여백과 정렬: 못생긴 대부분은 간격 탓
「어디가 못생겼는지 모르겠는데, 어쨌든 못생겼다」—이 평가의 팔 할은 간격 이야기예요. 색과 글꼴은 안 건드리고 간격만 정리해도 화면이 한 단계 올라가요. 이번 레슨은 규칙 두 개와 바로 쓸 숫자표를 드려요.
간격에는 규칙이 두 개뿐이에요. 근접성: 관련 요소는 가깝게, 무관한 건 멀리—독자는 거리로 「누가 한패인지」를 판단해요. 일관성: 같은 위계는 같은 간격. 카드 사이가 16이면 어디든 16. 남은 질문은 「몇을 넣을까」—답은 8pt 그리드: 간격은 8·16·24·32에서만 고르세요. 13이냐 15냐에 고민할 필요 없어요. 선택지가 줄면 일관성은 자동으로 따라와요. 이 그리드는 AI에게 내릴 지시에도 좋아요요: 「간격은 전부 8pt 그리드」가 「좀 더 예쁘게」보다 훨씬 먹혀요.
같은 가입 폼—내용은 한 글자도 안 바꾸고 간격만 움직여요. 슬라이더를 4px에서 32px까지 당겨 「한덩어리」에서 「숨 쉴 여유」까지의 과정을 느껴 보세요.
About Face 4의 근접성은 픽셀 장부가 또렷해요: 툴바에서 같은 그룹 아이콘은 4px, 그룹 사이는 8px—테두리 하나 없이 그룹이 성립해요. Cooper는 반대 사례도 짚어요: 많은 UI가 테두리로 가득하고, 요소 한둘에도 울타리를 쳐요. 서툰 그룹 짓기이자 시각 소음이에요. 같은 툴바, 두 방식—직접 전환해 보세요.
8pt 그리드는 업계 은어처럼 들리지만, 출처는 소박해요. About Face 4의 그리드 시스템은 원자 그리드 단위—화면의 최소 간격을 말해요. 잘 짠 그리드에서 요소·그룹 사이 거리는 원자의 정수배예요. 원자를 8로 정하면 페이지 간격은 8·16·24·32뿐. 간격이 서로 배수면 눈이 질서를 읽고, 그게 바로 위 슬라이더 「숨 쉴 여유」의 뼈대예요.
| 그리드가 사는 것 | 어떻게 사는지 |
|---|---|
| 사용성 | 요소 위치가 예측 가능해져, 매 화면마다 제목·버튼을 다시 찾지 않아도 돼요 |
| 미감 | 간격이 배수라 질서가 생겨요—왜 좋은지는 말 못 해도, 누가 손본 티가 나요 |
| 효율 | 「여기 얼마나 비울까」를 곳곳마다 안 싸워도 돼요—간격 결정이 수십 번에서 한 번으로 |
이 세 이점은 About Face 4의 그리드 시스템 요약이에요. AI에게 지시할 때도 같아요: 원자를 먼저 못 박으면(간격은 전부 8의 배수) 자유 연주 기회가 수십 번 줄어요.
아래 설정 페이지는 얼핏 괜찮은데, 자세히 보면 정렬이 안 된 곳이 세 곳이에요. 어색한 곳을 누르면 밝아지며 설명이 나와요.
카드와 단의 비율은? About Face 4는 먼저 검증된 후보 둘을 줘요: 황금비(약 1.61)와 √2(약 1.41, A4 비율). 더 힘주는 말은 이거예요: 비율은 단호해야 해요. 대충 정사각형—안 돼요. 거의 황금 직사각형—그것도 안 돼요. 정확히 맞추거나 분명히 벌리세요. 중간에 낀 비율은 독자에게 묘한 불안을 주고, 이유도 말 못 하게 해요.
눈이 화면을 읽는 관성: 왼쪽 위에서 오른쪽 아래로. About Face 4는 이 관성에 맞춘 레이아웃을 논리 경로라고 해요: 시선을 제목→내용→버튼으로 되돌아가지 않게. 오해하기 쉬운 원칙도 덧붙여요: 완벽한 대칭은 오히려 층이 없고, 균형 잡힌 비대칭이 화면에 시각 입구를 줘요. 아래 가입 페이지, 두 배치.
어디가 못생겼는지 모르겠다면, 먼저 간격을 보세요. 근접성은 그룹(관련은 가깝게), 일관성은 질서(같은 위계·같은 간격).
그룹은 먼저 간격으로: 그룹 안 4px, 그룹 사이 8px면 충분—테두리 없이. 테두리는 정말 울타리가 필요할 때만.
8pt 그리드의 바닥은 원자 단위: 최소 간격을 정하고 곳곳에서 배수로 쓰면 일관성이 자동으로 와요. 이 단어는 AI 지시에도 바로 넣을 수 있어요.
비율은 단호하게: 1:1, √2, 황금비 다 괜찮고 「대충 정사각형」이 제일 아파요. 차이는 없애거나 분명히 벌리세요.
정렬은 가장 값싼 고급감. 납품 전 2분: 왼쪽 가장자리·아이콘 기준선·버튼 간격을 맞추고, 왼쪽 위에서 오른쪽 아래로 시선 경로를 한 번 걸어 보세요.
콘텐츠 출처: 샤오산 아카데미 「미학 엔지니어링」 특집 오리지널; 일부 원칙은 About Face 4: The Essentials of Interaction Design 17장(Alan Cooper 외)에서 정리.