[Day 2] 시각적 위계 학습: 화면의 뼈대를 만드는 조형, 컬러, 타이포의 법칙

안녕하세요 여러분! 지난 금요일에 2일 차 수업을 진행했습니다. 수업을 하고 바로 블로그를 작성해야 했는 욕심이 생겨서 내용을 다듬다 보니 시간이 길어져서 일요일이 되어버렸어요.. 하지만 열심히 준비한 만큼 알차고 풍성하게 전달드리겠습니다.
 
금요일 수업에서 진행한 내용은 저희가 디자인을 할때 기본적으로 알고 있으면 좋은 단단한 뼈대를 잡는 세 가지 축인 '조형, 컬러, 타이포그래피'였습니다.
 
디자인은 수학처럼 정해진 공식이 있는 것은 아니라고 하지만, 좋은 디자인들을 보다 보면 분명히 사람의 마음을 움직이고 눈길을 사로잡는 '시각적 법칙'과 '논리'가 존재한다는 걸 느끼게 됩니다. 사실 저희가 하는 디자인은 순수미술이 아니다 보니 저희 디자인에는 클라이언트 혹은 같이 일하는 동료들을 설득할 수 있는 근거와 원칙이 필요하죠. UI/UX애관심을 가지게 되면서 
 
특히 수업응 듣고 있는 내내 제가 최근에 열심히 준비하고 있는  컬러리스트 자격증 공부 내용이 겹쳐 보여서 더 집중이 잘되었습니다. 매주 토요일마다 수업을 듣고 있는데 마침 어제 조색실습에 들어갔습니다. 열심히 물감을 다루고 있는데 참 쉽지가 않아요.. 그래도 열심히 해보겠습니다!
 
그럼, 주말 동안 정리한 학습내용 바로 시작해 보겠습니다!
 

---

1. 시각적 위계를 만드는 4가지 방법 & 조형의 기본

우리가 레고를 조립할 때, 무작위로 흩어진 레고 조각들만 보면 이게 도대체 무엇을 만드는 건지 알기 어렵기 때문에 박스 안에 '조립 가이드북(설계도)'을 같이 넣어주곤 하잖아요? 시각적 위계라는 건 어떤 것을 처음 봤을 때 시선이 어디로 먼저 가야 하는지, 무엇이 더 중요한 정보인지 길을 찾아주는 '설계도'와 같습니다.
 

| 점·선·면의 기본 개념

컬러리스트 필기 공부를 시작할때도 그렇고 실내건축기능사나 조경기능사 필기를 준비할 때도 항상  첫 파트에 항상 이 부분이 나왔습니다. 그만큼 디자인 분야를 관통하는 가장 핵심적인 기본 개념이기 때문이 아닐까 하는 생각이 듭니다.  학교 미술시간에도 들어봤을 만한 점선면 먼저 이야기를 해보겠습니다.
 

 

◎ 점 : 모든 것의 시작이자 위치. 시선이 머무르는 가장 작은 기본 단위. 화면 안에서 다음과 같은 기능들로 활용.
 

• 시각적 닻(Visual Anchor) : 시선을 집중시키는 역할, 현재 페이지 위치를 알려주는 인디케이터, 새로운 알림을 직관적으로 알리는 배지.

인디케이터와 배지

 

• 공간과 리듬감(Spacing&Rhythm) : 여러 단계의 진행 상황을 점과 선으로 연결해 보여주는 프로그레스 바나, 내용이 더 있음을 암시하는 말 줄임표(...)처럼 여백과 흐름을 만듦

프로그레스 바

 

• 상호작용 및 내비게이터(Interaction) : 좌우로 밀 수 있음을 보여주는 캐러셀 점, 지도 앱의 위치 핀, 크기를 조절하는 모서리의 조절점처럼 사용자의 행동을 유도

캐러셀

 
 
◎ 선 : 점들이 모여 방향과 길이를 만듭니다. 정보와 정보 사이를 깔끔하게 구별해 주는 경계선이나, 시선을 아래로 유도하는 가이드라인 역할. 
**주의 : 잘못 사용하면 화변이 복잡해지므로 주의해서 사용해야 함. 너무 많은 선은 화면을 지저분하고 좁아 보이게 하여 피로도를 줌(=라인 공해)
 

• 구분선(Divider / Separator) : 연관된 콘텐츠나 리스트 항목을 명확하게 분리하여 사용자가 정보를 쉽게 인지하도록 도움. 시선을 분산시키지 않고 최대한 가늘고 연한 회색을 쓰는 것이 기본.

 

• 시선 유도(Reading Direction) : 수평선이나 수직선을 통해 사용자의 시선이 길을 잃지 않고 자연스럽게 이동할 수 있도록 안내

 

• 시각적 위계(Visual Hierarchy) : 선의 굵기, 길이, 색상의 명도를 조절하여 콘텐츠의 중요도나 카테고리의 상하 종속 관계를 직관적으로 표현

 

• 상태 및 인터랙션 표시 : 사용자의 행동이나 시스템의 실시간 상태를 선의 변화로 표현. ex) 유튜브 영상을 볼 때 아래에서 흰색으로 차로르는 로딩/재생 프로그레스 바

 

 

[ux/ui 팁]
1. 가늘고 연한 선 사용 - 메인이 아니기 대문에 두껍고 진한 선은 사용자의 시선을 부산시킬 수 있음. 배경색 대비가 낮은 색상 사용을 추천
2. 충분한 여백 활용 - '여백'이 '선'보다 모바일 화면을 덜 답답하게 보이게 함, 선을 추가하기 전에 여백을 먼저 고려
3. 일관된 규칙 적용 - 사용할 선의 두께를 정해두고 전체적으로 통일하여 일관성을 유지하여 안정감을 전달
 
 
◎ 면 : 선이 닫히면서 생기는 무게감. 관련된 요소들을 하나로 묶어주는 '영역(그룹)'을 만들어 줌. 

• 콘텐츠 그루핑과 정보 카드 : 서로 연관된 텍스트와 이미지를 하나의 덩어리로 묶어 인지도를 높임.

 

• 공간감과 깊이 생성 : 평면적인 환면에 입체적인 층을 만들어 냄.

 

• 초점 유도와 영역강조 : 특정 영역에 시선이 가장 먼저 꽂히도록 배경색을 칠해 강조

 
 

| 시선을 사로잡는 4가지 방법

지금부터 설명들이 애매하게 사용되면 우리 눈은 그걸 하나의 지루한 패턴으로 인식해 그냥 지냐쳐 버립니다. 눈길을 끄는 차이가 있어야 강조가 됩니다.

• 크기(Size)

- 어정쩡한 크기 차이(Bad) : 제목과 본문의 크기가 비슷하면 화면이 답답하고 시선이 분산.
- 확실한 위계 차이(Good) : 타이틀의 크기를 확실하게 키워야 어디를 먼저 읽어야 할지 순서가 정해짐.
 

• 색(Color)

- 무분별한 색상 사용(Bad) : 모든 버튼에 쨍한 색을 쓰면 시선이 사방으로 분산.
- 전략적인 포인트 컬러(Good) : 꼭 강조해야 하는 핵심 액션에만 쨍한 색을 써야 효과가 극대화
 

• 공간감(Space & Depth)

- 평면적인 형태(Bad) : 배경에 완전히 붙어 있으면 누를 수 있는 버튼인지 모호.
- 입체적인 그림자(Good) : 입체적인 효과를 주어야 무의식적으로 '눌러보고 싶다'는 느낌을 받음.
 

• 형태(Shape)

- 시각적 자극이 강해지는 4단계 : 단순한 선 > 네모난 면 > 그림자 면 > 입체적인 형태
- 형태 조절 규칙 : 조형이 단순에서 복잡해질수록 눈길을 더 강하게 사로잡음. 가장 강조해야 할 핵심 요소에 입체적인 형태를 배치.

---

2. 컬러, 중심을 잡아주는 규칙

지금 한창 컬러리스트 실기를 준비하면서 주말마다 눈이 빠져라 들여다보는 명도, 채도, 그리고 배색 조화론과. 매주 컬러칩을 자르면서 글을 작성했던 원리를 다시 공부했어요~!

 
색의 삼속성
 

• 색상(Hue):색의 첫인상을 결정하는 고유한 색의 이름.(빨강, 노랑, 파랑 등). 
• 명도(Value): 밝고 어두운 정도. 명도가 높으면 화면이 화사하고 열려 있는 느낌을 주지만, 조금 더 진중하고 차분한 톤을 잡고 싶을 땐 명도를 낮춰 묵직한 안정감을 줌.
• 채도(Saturation): 색의 쨍함과 탁함의 정도. 에너지를 확실히 줘야 하는 알림이나 클릭 버튼은 채도를 높이고, 배경이나 중요하지 않은 상태는 채도를 뚝 떨어뜨려 시선에서 지움. *(참고로 2026년 팬톤이 선정한 올해의 컬러는 정제되고 맑은 무드의 'Cloud Dancer'*라고 합니다. 나중에 미니멀한 디자인을 할 때 배경 톤으로 참고해 봐야겠습니다.)

 

| 색채 조화론과 행동 유도

• 보색 대비: 색상환 반대편에 있는 색들의 조합. 확실하게 눈길을 사로잡아야 할 때 강렬한 대비를 줌.

• 유사색 대비: 이웃한 색들의 조합. 눈이 편안하고 조화로워서 전체적인 배경 톤이나 배너의 부드러운 그러데이션을 잡을 때 유용.

 

!! 중요: 상태를 나타내는 컬러의 구분

새롭게 알게 된 사실. 내가 만드는 화면의 메인 포인트 컬러가 '레드'라고 해서, 화면에 에러(Error) 메시지가 뜰 때 똑같은 레드를 그대로 갖다 쓰면 안 된다는 점입니다. 에러, 성공, 정보 같은 안내 컬러는 철저하게 사용자에게 현재 상태를 알려주는 기능적인 언어이기 때문에, 메인 컬러와는 확실하게 분리해서 독립적인 명도와 채도로 규칙을 정해두어야 화면이 꼬이지 않습니다.

---

3. 타이포그래피, 가독성의 공식

글자를 단순히 화면에 얹는 것을 넘어, '어떻게 해야 막힘없이 읽히게 만들 것인가'를 설계하는 영역입니다.

 

| 폰트 선택의 기본

글자 끝에 장식이 없어 깔끔하고 화면에서 가독성이 가장 좋은 산세리프(Sans-Serif/고딕체)를 기본 뼈대로 잡되, 주제와 성격에 맞춰 옷을 입혀야 합니다. 예를 들어 신뢰감이 중요한 내용이라면 단정하고 묵직한 서체를 골라 서두부터 무게감을 잡는 식입니다.

| 가독성을 높이는 실무 공식

수업을 들으며 바로 대입해 볼 수 있는 구체적인 가이드들을 꼼꼼하게 메모했습니다.

1. 폰트 종류는 최소화: 화려하게 서체를 섞기보단, 하나의 서체 안에서 두께(Weight)만 조절해서 쓰는 게 화면이 훨씬 안정적입니다.
2. 행간(줄간격)의 정석: 본문 글자 크기의 1.5배~1.75배가 기본입니다. 웹 표준 가이드에서는 1.6배를 가장 편안한 간격으로 권장합니다.
3. 자간(글자 간격)의 마법: 글자가 클수록 자간을 좁히고, 작을수록 넓히는 게 원칙입니다. 한글은 받침 때문에 유독 빽빽해 보이기 때문에 문장을 직접 보며 미세하게 자간을 좁혀주는 감각이 필요합니다.
4. 한 줄당 글자 수 제한: 눈이 피로하지 않으려면 한글 본문 기준으로 한 줄에 20~40자 정도가 적당하며, 길어져도 60자는 절대 넘지 않게 글상자 폭을 제한해야 합니다.
5. 명암비 표준 준수: 배경과 글자색의 대비가 명확해야 눈이 아프지 않습니다. 기준에 따르면 본문 글자는 최소 4.5:1 이상의 명암비를 넘겨야 누구나 무리 없이 읽을 수 있습니다.
6. 3~4단계 계층 구조: 제목, 부제목, 본문 등의 계층을 두께와 간격, 글자 색상(진한 블랙 vs 차분한 그레이)으로 명확하게 쪼갭니다. 한 화면에 너무 많은 단계가 들어가면 복잡해지니 3~4단계 안에서 끝내는 것이 좋습니다.

 
오늘 제가 지난 시간에 배운 걸 정리해 봤는데 쓰다 보니 내용이 많아졌습니다. 하지만 이 내용들이 언젠가는 여러분과 저에게 도움이 되길 바라면서 저는 다음 수업을 마치고 돌아오겠습니다!