A·들어가기 덱과 동일한 논증 척추·캡션 설명 산문·교안 밀도 포맷. C1 색 → C2 타이포 → C3 여백·정렬 → C4 대비·접근성을 '하나의 인상을 만드는 규칙들'로 엮습니다. 수치·연구는 1차 자료(NN/g·Material·WCAG·Bringhurst·Laws of UX)로 검증했습니다.
이 장은 이론 네 개를 나열한 게 아니라 '좋은 인상'이라는 한 결과를 향해 쌓이는 규칙의 사슬이다. 색이 감정과 강조를 정하고, 그 위에 글자가 목소리의 위계를 세우고, 여백·정렬이 숨 쉴 틈과 질서를 주고, 마지막으로 대비·접근성이 '그 인상이 누구에게나 도달하는가'를 보장한다. 아래로 갈수록 토대 위에 얹힌다.
학생들은 흔히 색이 많을수록 화려하고 좋다고 여긴다. 그런데 잘 만든 앱은 거의 예외 없이 주조색 1 + 보조색 1~2 + 무채색으로 끝낸다. 색은 화려함의 양이 아니라 비율과 절제의 문제다. 반찬이 12가지면 뭘 먹을지 모르듯, 색이 많으면 어디를 봐야 할지가 사라진다. 핵심은 적은 색이 '강조할 곳'을 정확히 가리키게 하는 것이다.
60% 주조색(배경·바탕) · 30% 보조색(카드·내비·구역) · 10% 강조색(핵심 행동 버튼·링크). 강조색은 화면의 10%로 아껴 쓸 때 비로소 눈이 그리로 간다.
토스 파랑(신뢰)·당근 주황(활기)·카카오 노랑(친근) — 브랜드는 색으로 성격을 말한다. 또 약속된 의미도 있다: 빨강=경고/삭제, 초록=성공/완료, 노랑=주의. 삭제 버튼을 초록으로 칠하면 사용자가 헷갈린다.
같은 정보라도 색을 절제한 화면은 시선이 자동으로 핵심 버튼을 향하고, 색을 흩뿌린 화면은 모든 게 똑같이 소리쳐서 결국 아무것도 안 튄다. 강조의 힘은 '많음'이 아니라 '희소함'에서 나온다 — 이것이 색 모듈의 한 문장이다.
무채색이 90%, '보내기' 버튼만 강조색 1개. 눈이 자동으로 버튼으로 간다. 통일감·명확한 위계·편안함.
빨강+파랑+초록+노랑+보라 혼합. 시선 분산, 중요도 불명, 유치·산만. 어디부터 봐야 할지 모른다.
색이 시선의 방향을 정했다면, 타이포그래피는 그 안에서 읽는 순서를 정한다. 같은 말도 크게/작게, 굵게/연하게 하면 "이건 제목(큰 목소리), 이건 설명(작은 목소리)"이 구분된다. 폰트를 여러 개 섞는 건 한 문장을 여러 사람이 번갈아 외치는 것과 같아 산만하다. 그래서 폰트는 1~2종으로 두고, 한 폰트 안에서 크기·굵기로 위계를 만드는 것이 핵심이다.
제목 600 / 본문 400 / 캡션은 작고 연하게. 크기를 안 바꿔도 굵기만으로 계층이 보인다. weight는 2~3단계로 제한 — 굵기가 너무 많으면 위계가 무너진다.
"개성 있으려면 폰트를 독특한 걸로 골라야 한다"는 반론은 틀렸다. 본문에 멋부린 폰트를 쓰면 읽기 힘들어 오히려 손해다. 잘 만든 앱일수록 폰트는 평범하고, 개성은 크기·굵기·여백을 다루는 솜씨에서 나온다. 카카오톡 채팅이 그 증거다 — 폰트 한 종류로 세 단계 위계를 만든다.
이름은 굵게, 메시지는 보통, 시간은 작고 연하게. 폰트 1종인데 정보 위계가 또렷하다.
손글씨체 제목 + 명조 본문 + 고딕 버튼. 글씨가 따로 노는 느낌, 위계 불가, 줄 간격도 제각각이라 산만하다.
명품 매장은 물건 사이가 넓어 고급스럽고, 전단지는 빽빽해 싸 보인다. 여백은 비어 있는 게 아니라 "이건 중요하다"고 말하는 공간이다. 그리고 정렬은 보이지 않는 기준선 — 요소들이 같은 세로선에 맞춰 서면 전문적으로 보이고, 제각각이면 아마추어 느낌이 난다. 둘 다 돈도 기술도 안 드는데 결과를 가장 크게 바꾼다.
가까이 둔 것은 한 그룹으로 읽힌다(게슈탈트 근접성). 그래서 같은 묶음은 가깝게, 다른 묶음은 멀게 둔다. 카드 안쪽(padding) 16~24px, 섹션 사이 24~48px, 화면의 30~60%는 여백.
좌측 한 기준선에 모두 맞추는 게 기본. 어긋난 정렬은 '의도'가 아니면 실수로 읽힌다. 가운데·우측 정렬은 가격·아이콘처럼 이유가 있을 때만.
"빈 공간은 낭비니 정보로 채워야 한다"는 반론은 틀렸다. 여백은 빈 게 아니라 남은 요소를 강조하는 적극적 디자인이다. 게다가 여백이 만든 '정돈된 인상'은 단지 예뻐 보이는 데 그치지 않는다 — 사람은 아름다워 보이는 화면을 실제로 더 쓰기 쉽다고 믿는다. A장에서 만난 '심미적 사용성 효과'가 여기서 회수된다.
참가자가 느낀 '쓰기 쉬움'은 실제 사용성보다 화면의 아름다움과 더 강하게 연관됐다(심미적 사용성 효과). 즉 여백·정렬로 만든 '정돈된 아름다움'은 첫인상과 신뢰까지 끌어올린다. 그래서 빽빽함을 줄이는 일은 미관이 아니라 '더 쉬워 보이게' 만드는 일이다.
앞의 세 규칙(색·글자·여백)이 만든 인상도 화면이 안 읽히면 무너진다. 똑같은 화면이 어두운 방에선 멀쩡하다가 햇빛 쏟아지는 창가에선 흐린 글씨가 안 보인다. 디자인은 '내 책상'이 아니라 가장 불리한 자리의 사람을 기준으로 해야 한다. 대비 = 글씨와 배경의 밝기 차이이고, 이건 미관이 아니라 '모두가 쓸 수 있는가(접근성)'의 문제다.
본문 텍스트 4.5:1 이상, 큰 글씨(18pt+ 또는 14pt 굵게)·UI 요소는 3:1 이상이 기준(AA). 더 엄격한 AAA는 본문 7:1.
디자이너가 가장 자주 빠지는 함정이 '예뻐 보이는 옅은 회색'이다. stone-300(≈2:1)은 화면에선 세련돼 보이지만 밝은 곳에선 사라진다. 접근성은 '장애가 있는 소수만을 위한 배려'가 아니라, 밝은 햇빛·깨진 액정·바쁜 한 손처럼 누구나 겪는 '일시적 불편'에 모두 도움이 되는 기본 품질이다.
stone-900 글씨 + 흰 배경(17:1). 아이콘과 라벨을 함께 써 색맹도 구분. 48px 터치 영역.
stone-300 글씨(2:1)는 흐려서 안 보임. 빨강·초록 점만으로 상태를 알리면 색맹은 구분 불가.
이 장은 시각 이론 넷을 나열한 게 아니라, '좋은 인상은 무엇이 정하나'라는 한 질문을 끝까지 따라간 추론이었다. 출발점은 "예쁘면 좋은 것"이라는 취향이었고, 도착점은 "시각은 위계·대비·절제의 규칙"이라는 주장이었다. 네 규칙은 따로가 아니라 토대 위에 차례로 얹혀 하나의 인상을 만든다.