절제: 색과 서체에 예산을 잡으세요
예쁜 인터페이스는 대개 더해서 만든 게 아니라, 아끼며 남긴 결과예요. 이번 레슨은 예산표입니다: 주색 하나와 중성색, 서체 굵기 두 단계, 둥근 모서리 한 세트. 예산을 넘는 건 아무리 예뻐도 잘라요.
예산제의 규칙은 짧아요. 주색 하나, 나머지는 흑·백·회색 중성색에 맡기고; 서체 굵기 두 단계, 본문 한 단·강조 한 단; 둥근 모서리 한 세트, 숫자를 정해 곳곳에 쓰세요. 두 번째 포인트 색을 넣고 싶을 때 한 번 물으세요 — 「예산을 쓸 가치가 있을까?」 대부분 아껴 두는 쪽이 답이에요.
아래는 절제된 프로모 페이지예요. 「색 하나 더」를 다섯 번 눌러 단계적으로 무너지는 걸 보고, 다섯 번 채운 뒤 한 번에 빼기를 해 보세요.
색 추가기는 어떻게 못생기게 되는지, 빼기 게임은 어떻게 되돌리는지를 보여 줘요. About Face 4가 바로 쓸 수 있는 방법을 줍니다: 하나를 더 지우면 디자인이 깨질 때까지 줄인 뒤, 마지막으로 지운 것을 다시 넣으세요. 아래 프로모 카드에 장식 여섯이 쌓여 있어요 — 하나씩 끄면, 어느 것을 지울 때 페이지가 깨지는지 알게 돼요.
절제에는 「거의 같음」을 다루는 더 세밀한 규칙도 있어요. About Face 4는 단호합니다: 불필요한 차이는 일관된 디자인의 적이에요. 간격이 거의 같으면 같은 숫자로, 색이 거의 같으면 하나로. 모든 차이는 이유가 있어야 하고, 이유를 못 찾으면 없애세요. 아래 카드에 「거의」가 세 곳 숨겨져 있어요 — 전환해 정리 전후를 보세요.
색 예산은 「몇 가지」를, 채도는 「얼마나 크게」를 물어요. About Face 4가 경고합니다: 고채도 색은 저마다 소리치고, 모이면 카니발 효과 — 사용자가 압도당해요. 같은 태그 세 개로, 채도를 볼륨처럼 밀어 보세요.
이번엔 예산 세 가지를 스위치로 만들어, 마음대로 섞어 보세요. 오른쪽 아래 배지가 초과 여부를 실시간으로 알려 줘요.
예산제 세 가지: 주색 하나와 중성색, 서체 굵기 두 단계, 둥근 모서리 한 세트. 예산을 넘기 전에, 가치가 있는지 물으세요.
색을 하나 더할수록, 이미 있는 색은 가치가 떨어져요. 빼기가 더하기보다 더 자주 먹히고, 색을 지우는 게 ROI가 가장 높은 한 수예요.
페이지가 싸 보이면 순서대로 보세요: 포인트 색이 몇 개인지, 굵기 단계가 몇인지, 둥근 모서리가 통일됐는지.
실행 가능한 규칙 둘: 거의 같으면 똑같게; 남길지 모르겠으면 깨질 때까지 지운 뒤, 마지막에 지운 것을 다시 넣으세요.
콘텐츠 출처: 샤오산 아카데미 「미학 엔지니어링」 특집 오리지널; 「불필요한 차이는 적」「깨질 때까지 줄이기」 등 원칙은 About Face 4: The Essentials of Interaction Design 17장(Alan Cooper 외)에서 정리.