📚 지식 노트

시각적 위계: 무엇이 먼저 보이나

시각적 위계는 눈이 중요한 순서대로 따라가게 요소를 배치하는 것이다. NN/g는 위계를 만드는 도구를 셋으로 꼽는다. 색과 대비(색 자체가 아니라 주변과의 명도·채도 차이), 크기(큰 것이 먼저 보인다), 묶기(가까움과 여백, 또는 테두리·배경으로 관련된 것을 묶는다)다. 굵기나 기울임도 중요도를 알린다.

위계를 점검하는 쉬운 방법은 화면을 흐리게 보는 것이다. 눈을 가늘게 뜨거나 화면을 흐리게 한 스크린숏에서 덩어리 서너 개와 가장 진한 점 하나가 보이면 위계가 서 있다. 모든 것이 비슷한 회색으로 뭉개지면 강조가 없고, 진한 점이 여럿이면 강조가 너무 많다. 강조는 상대적이라 모든 것을 강조하면 아무것도 강조되지 않는다.

글꼴 고르기: 분류와 한글 글꼴의 특성

라틴 글꼴은 크게 획 끝에 작은 돌기(세리프)가 있는 세리프, 돌기가 없는 산세리프, 모든 글자 폭이 같은 고정폭, 제목이나 포인트에 쓰는 디스플레이(손글씨 포함)로 나눈다. 한글에도 비슷한 갈래가 있다. 붓의 강약이 남은 명조(바탕), 굵기가 고른 고딕(돋움), 그리고 고정폭과 손글씨다. 화면 UI의 본문에는 고딕 계열이 가장 흔하고, 긴 읽을거리나 격식 있는 제목에 명조를 쓰기도 한다.

한글에는 라틴 글꼴과 다른 점이 있다. W3C의 한글 조판 요구사항 초안은 글자를 글자틀 안에 놓고, 고정폭 글꼴은 틀 폭이 일정하며 비례 글꼴은 글자 모양에 맞춘 폭을 쓴다고 적는다. 초성·중성·종성의 조합으로 만드는 현대 한글 음절은 11,172자라서 한글 글꼴 하나를 만드는 일은 라틴 글꼴보다 훨씬 크고, 웹 글꼴 파일도 커진다(그래서 쓰는 글자만 잘라 싣는 서브셋을 흔히 쓴다). 라틴 글자와 섞을 때는 두 글꼴의 크기와 기준선이 어긋나기 쉬우니 한글 글꼴에 딸린 라틴 글자를 쓰거나 섞어서 시험해 본다.

줄바꿈도 다르다. 한국어는 원칙적으로 단어를 띄어 쓰고, 줄 끝에서는 글자 단위로도 어절 단위로도 끊을 수 있다. 웹 브라우저는 기본으로 한글을 글자 단위로 끊어 "좌 / 석을"처럼 어절이 갈린다. 짧은 제목이나 버튼, 카드처럼 줄이 짧은 곳에서는 CSS word-break: keep-all로 어절 단위로 끊으면 읽기 좋다. 다만 아주 좁은 칸에서는 긴 어절이 넘칠 수 있어 overflow-wrap과 함께 쓴다.

글꼴 파일 자체(글리프, 힌팅, 오픈타입 기능)는 이 사이트의 폰트 테스트 도구로 직접 열어 볼 수 있다.

타입 스케일: 비율로 글자 크기를 정한다

제목 크기를 그때그때 정하면 화면마다 22px, 23px, 24px가 섞인다. 타입 스케일은 기본 크기 하나와 비율 하나로 모든 단계를 정한다. 기본이 16px이고 비율이 r이면 단계 n의 크기는 16 × rⁿ이다. 비율 이름은 음악의 음정에서 빌려 와 단3도(1.2), 장3도(1.25), 완전4도(1.333), 황금비(1.618) 등으로 부른다(typescale.com).

장3도라면 16, 20, 25, 31, 39px처럼 커진다(위로 네 단계: 16, 20, 25, 31, 39px). 비율이 크면 대비가 커져 표지나 랜딩 페이지에 어울리지만 단계가 빨리 커진다. 황금비로 네 단계를 올리면 110px이 된다. 정보가 촘촘한 앱 화면에는 1.2~1.25가, 단계가 적고 극적인 화면에는 1.333 이상이 흔하다. 계산 값은 4나 2의 배수로 반올림해 간격 체계와 맞추기도 한다. Material Design 3처럼 큰 디자인 시스템은 비율 하나로 끝내지 않고 역할(제목·본문·레이블)마다 크기와 행간을 정한 표를 둔다.

행간·자간·줄 길이

줄 길이가 길면 다음 줄의 시작을 찾기 어렵고, 짧으면 눈이 너무 자주 돌아와 리듬이 깨진다. 라틴 본문에는 흔히 한 줄 45~75자를 권한다. Baymard는 공백을 포함해 50~75자, CSS로는 약 max-width: 70ch를 권하고, 100자가 넘는 줄에서 사용자가 지치고 긴 글을 포기했다고 보고한다. Butterick은 평균 45~90자를 권한다. WCAG 1.4.8(AAA)은 사용자가 줄 폭을 80자, CJK(한중일 문자)는 40자 이하로 줄일 수 있게 하라고 적는다.

한글은 한 글자가 정사각형에 가까워 라틴 글자 두 개쯤의 폭을 차지한다. 16px 글자로 640px 줄이면 한글 약 40자, 라틴 약 80자가 든다. 그래서 같은 폭이라도 글자 수로는 라틴의 반쯤으로 어림하고, 라틴 권장 범위를 반으로 줄인 약 23~38자를 출발점으로 삼을 수 있다(WCAG의 CJK 상한 40자 안이다). 한글은 띄어쓰기 단위가 길어 실제로는 화면에서 읽어 보며 맞춘다.

• 행간(line-height): 본문은 글자 크기의 1.5배 안팎이 흔한 출발점이다. WCAG 1.4.12는 사용자가 행간을 1.5배, 문단 간격을 2배, 자간을 0.12배, 단어 간격을 0.16배로 늘려도 내용이 잘리거나 겹치지 않을 것을 요구한다. 높이를 고정한 상자에 글을 넣으면 이 검사에서 깨진다.
• 한글의 행간: 한글은 글자가 틀을 꽉 채워 라틴보다 빽빽해 보이므로, 같은 크기면 행간을 조금 더 주는 경우가 많다. 제목처럼 큰 글자는 행간을 1.2~1.3배로 줄인다.
• 자간(letter-spacing): 본문은 글꼴 기본값을 두는 것이 대개 낫다. 큰 제목은 조금 좁히고, 작은 대문자 레이블은 조금 넓힌다. WCAG 해설은 일본어처럼 단어 사이를 띄지 않는 언어에서는 단어 간격이 의미가 없다고 적는다. 한국어는 띄어 쓰므로 해당한다.
• 정렬: 웹 본문의 양쪽 정렬은 단어 사이 간격이 들쭉날쭉해져 WCAG 1.4.8이 피하라고 한다. 왼쪽 정렬이 기본이다.

색의 세 속성과 60-30-10

색은 세 속성으로 다룬다. 색상(hue)은 빨강·파랑 같은 색의 종류, 채도(saturation)는 맑음과 탁함, 명도(lightness 또는 value)는 밝음과 어두움이다. CSS의 hsl()이 이 세 축을 그대로 쓴다. 위계를 만드는 것은 대개 색상이 아니라 명도와 채도의 차이다. 빨간 글자와 파란 글자는 색상이 달라도 명도가 비슷하면 흑백에서 같은 회색이 된다.

60-30-10은 흔히 쓰는 어림 규칙이다. 바탕이 되는 중립색이 화면의 대부분(약 60%)을, 구조를 만드는 보조색이 약 30%를, 눈길을 끌 강조색이 약 10%를 차지하게 한다. 정확한 비율보다 "강조색은 아껴 쓴다"는 뜻이 중요하다. 강조색이 화면 곳곳에 있으면 정작 눌러야 할 버튼이 묻힌다. UI에서는 강조색을 주된 행동, 선택 상태, 링크처럼 사용자가 무언가를 할 수 있는 곳에 모아 쓴다. 차트의 색 고르기(범주형·순차형·발산형 팔레트)는 데이터 시각화 노트에 있다.

의미 색: 성공·경고·오류·정보

많은 UI는 강조색과 별도로 상태를 알리는 의미 색(semantic color)을 둔다. 초록은 성공, 노랑·주황은 경고, 빨강은 오류·위험, 파랑은 정보로 쓰는 관례가 흔하다. 의미 색은 의미가 있을 때만 쓴다. 장식으로 빨강을 쓰면 사용자는 무언가 잘못됐다고 읽는다.

색만으로 의미를 전하면 안 된다. 적록 색각 이상이 있는 사람에게 빨강과 초록은 비슷하게 보이고, 햇빛 아래 화면이나 흑백 인쇄에서도 색 차이가 사라진다. 아이콘 모양, 문구, 위치를 함께 쓴다. 내 화면이 색각 이상인 사람에게 어떻게 보이는지는 색각 이상 시뮬레이터에서 직접 볼 수 있다.

대비비: 4.5:1을 계산으로 확인한다

글자와 바탕의 대비비(contrast ratio)는 두 색의 상대 휘도로 계산하며 1:1(같은 색)부터 21:1(흰색과 검정)까지다. WCAG 1.4.3(AA)은 본문 글자에 4.5:1, 큰 글자에 3:1 이상을 요구한다. 큰 글자는 18pt 이상 또는 굵은 14pt 이상으로, CSS 픽셀로는 각각 24px, 약 18.5px다. 계산 값은 반올림하지 않아 4.499:1은 통과하지 못한다. 쓰지 않는 비활성 컨트롤의 글자, 순수한 장식, 로고는 예외다.

흰 바탕에서 #777777는 4.48:1로 아깝게 떨어지고, 한 단계 진한 #666666가 5.74:1로 통과한다. 눈으로는 둘이 거의 같아 보이므로 대비는 눈이 아니라 계산으로 확인한다. 상대 휘도 공식과 더 많은 회색의 예는 웹 개발 노트의 접근성 절에 있다. 아이콘·입력칸 테두리·차트처럼 글자가 아닌 요소에는 1.4.11이 3:1을 요구한다. 흐린 회색 안내문, 사진 위 흰 글자, 연한 강조색 버튼 글자가 실무에서 가장 자주 걸린다.

그리드: 열, 거터, 마진

그리드는 화면을 일정한 열로 나눠 요소를 그 열에 맞춰 놓게 하는 보이지 않는 틀이다. 세 부분으로 이루어진다. 내용이 놓이는 열(column), 열 사이의 빈칸인 거터(gutter), 화면 가장자리의 빈칸인 마진(margin)이다. 데스크톱에서 흔한 12열은 2·3·4·6으로 나누어떨어져, 반반·셋·넷 배치를 모두 담는다.

열 폭은 (전체 폭 − 마진 × 2 − 거터 × (열 수 − 1)) ÷ 열 수다. 예를 들어 1200px 화면에 마진과 거터를 24px로 두면 열 하나는 74px이고, 8열을 차지하는 본문은 760px이다. Material Design 2의 반응형 그리드는 화면 크기에 따라 4열(휴대폰), 8열(태블릿), 12열(데스크톱)로 바꾼다. 브레이크포인트를 언제 바꾸는지와 유연한 레이아웃은 반응형·모바일·접근성에서 다룬다.

간격 체계와 CRAP

간격도 타입 스케일처럼 정해 둔다. 흔한 방식은 모든 여백과 크기를 8의 배수로, 아이콘 안쪽이나 촘촘한 목록처럼 좁은 곳에는 4의 배수로 맞추는 것이다(4·8pt 그리드). 값의 개수가 줄어 결정이 빨라지고, 디자인과 코드가 같은 토큰(space-1 = 4, space-2 = 8 …)으로 말하게 된다. 중요한 규칙은 하나다. 묶음 안쪽 간격이 바깥 간격보다 작아야 묶음으로 보인다.

디자인 입문서에서 널리 쓰이는 네 원리는 머리글자를 따 CRAP이라 부른다. 대비(Contrast): 다른 것은 확실히 다르게 한다. 어중간한 차이는 실수처럼 보인다. 반복(Repetition): 같은 역할의 요소는 같은 모양으로 되풀이해 일관성을 만든다. 정렬(Alignment): 모든 요소를 보이지 않는 선에 맞춘다. 근접(Proximity): 관련된 것은 가깝게 둔다. 근접과 유사성, 공통 영역 같은 지각 원리 자체는 HCI와 UX 노트의 게슈탈트 원리에 있다.

아이콘과 이미지

아이콘은 공간을 아끼지만 뜻이 늘 통하지는 않는다. NN/g의 정리에 따르면 거의 누구나 알아보는 아이콘은 홈, 인쇄, 검색 정도이고, 나머지는 글자 레이블을 늘 함께 보여야 한다. 마우스를 올려야 나오는 레이블은 손이 더 가고 터치 화면에서는 아예 쓸 수 없다. 5초 안에 알맞은 아이콘이 떠오르지 않는다면 그 뜻은 아이콘으로 전하기 어렵다는 경험칙도 있다.

한 화면의 아이콘은 같은 세트에서 고른다. 선 아이콘과 면 아이콘을 섞거나 선 굵기가 다르면 반복의 원리가 깨진다. 선택 상태는 선 아이콘을 면 아이콘으로 바꾸는 식으로 모양 차이를 함께 준다(색만으로 선택을 보이지 않는다).

이미지는 장식이 아니라 내용일 때 힘이 있다. 사진 위에 글자를 얹으면 사진의 밝은 곳에서 대비가 무너지기 쉽다. 아래쪽을 어둡게 덮는 그라데이션(스크림)을 깔거나, 글자를 사진 밖에 둔다. 이미지는 비율(1:1, 4:3, 16:9)을 정해 두고 잘라 써야 목록이 들쭉날쭉하지 않다. 여백도 디자인 요소다. 빈 공간은 낭비가 아니라 묶음을 가르고 중요한 것을 돋보이게 한다.

다크 모드: 색을 뒤집지 말고 다시 고른다

다크 모드는 흰 바탕을 검정으로, 검정 글자를 흰색으로 바꾸는 것만으로는 잘 되지 않는다. Material Design 2의 다크 테마 지침은 몇 가지를 권한다. 바탕은 순수한 검정 대신 아주 어두운 회색(#121212)을 쓰고, 강조색은 채도를 낮춰 어두운 바탕에서 번쩍이지 않게 하고, 위로 뜬 면(카드, 대화상자)은 그림자 대신 더 밝은 면으로 높이를 보이고, 글자는 흰색의 불투명도를 87%, 60%, 38%로 나눠 위계를 만든다.

그림의 숫자를 보면 이유가 보인다. 라이트 화면에서 통과하던 강조색(#3b5bdb)은 검정 위에서 3.71:1로 떨어진다. 어두운 바탕에서는 강조색을 밝고 덜 진한 쪽으로 바꿔야 한다. 흰 글자는 87% 불투명도로 #121212 위에 겹치면 실제 색이 #e0e0e0가 되어 대비비 14.2:1로, 눈부심을 줄이면서도 기준을 넉넉히 넘는다. 이 사이트도 다크가 기본이고, 색을 직접 쓰지 않고 테마별 변수로 바꾼다. 그 변수(디자인 토큰)를 짜는 법은 디자인 시스템에서 다룬다.

흔한 오해

• "좋은 시각 디자인은 취향이다": 위계, 대비비, 줄 길이, 간격은 측정하고 검사할 수 있다. 취향은 그 위에 얹는 것이다.
• "글자를 키우면 강조된다": 모든 것을 키우면 아무것도 강조되지 않는다. 강조는 주변과의 차이다.
• "색이 다르면 구분된다": 색상이 달라도 명도가 같으면 흑백과 색각 이상에서 같아진다. 명도 차이와 모양을 함께 쓴다.
• "회색 글자가 더 세련돼 보인다": 흐린 회색은 대비 기준에서 가장 자주 떨어진다. 흰 바탕에서 #777777도 본문 기준에 못 미친다.
• "다크 모드는 색을 뒤집으면 된다": 순수한 검정과 라이트용 강조색은 눈부시거나 대비가 모자란다. 바탕·강조색·높이 표현을 다시 고른다.
• "8pt 그리드면 모든 값이 8의 배수여야 한다": 촘촘한 곳에는 4를 쓰고, 글자의 행간처럼 맞추기 어려운 값은 결과 높이를 맞춘다. 규칙은 결정을 줄이려는 도구다.
• "한글도 라틴과 같은 줄 길이 규칙을 쓴다": 한글 한 글자는 라틴 두 글자쯤 폭이라 글자 수 기준이 다르다. WCAG도 CJK 상한을 80자가 아닌 40자로 둔다.

핵심 자료