위계: 한 화면에 주인공은 하나
화면을 열면 시선은 어딘가에 먼저 닿아야 해요. 디자이너가 그 착지점을 안 정해 주면, 독자의 눈이 제멋대로 부딪혀 다녀요. 이번 레슨은 위계입니다: 글자 크기·굵기·색상 세 레버로 「어디를 먼저 볼지」를 어떻게 정하는지.
주의력은 희소한 자원이고, 화면의 모든 요소가 그걸 빼앗아요. 굵게·빨강·키우기—각각은 말이 되지만, 겹치면 서로 상쇄돼요: 주인공 다섯이 같은 무대에 서면 관객은 아무도 기억 못 해요. 위계는 반대로 해요. 주인공을 먼저 고르고, 나머지는 중요도에 따라 한 단계씩 내려요. 손에 든 레버는 세 개뿐:
| 레버 | 쓰는 법 | 흔한 사고 |
|---|---|---|
| 글자 크기 | 주인공이 조연보다 한두 단계만 크면 충분해요—단계 차를 벌리고, 개수는 절제하세요 | 요소 세 개가 전부 최대 크기, 큰 글자가 서로 싸워요 |
| 굵기 | 본문 400, 강조 700—두 단계면 충분해요 | 화면 가득 볼드, 「더 중요함」의 의미가 사라져요 |
| 색상 | 강조색은 동작 하나 또는 숫자 하나에만 | 빨간 곳 세 개—어느 빨강이 진짜 경보인지 몰라요 |
About Face 4: The Essentials of Interaction Design 17장 시각적 위계는, 사용자가 화면을 볼 때 첫 반응을 두 무의식 질문으로 나눕니다: 「여기서 뭐가 중요하지?」, 이어서 「이것들은 어떻게 연결되지?」. Cooper의 결론: 화면은 위계와 관계를 세워 이 두 질문에 답해야 해요. 위계가 잘되면 사용자는 거의 존재를 못 느껴요; 엉망이면 혼란이 바로 튀어나와요.
이 두 질문이 이번 레슨의 검수 구호예요. 아래 사례마다 먼저 스스로 물어보세요: 주인공을 3초 안에 찾을 수 있나요? 어떤 요소가 한눈에 「한 패」로 보이나요?
아래는 상품 카드예요. 세 레버를 다 드려요: 제목 크기, 부가 정보 색, 강조색 개수. 당겨 보고 카드의 「주인공」이 어떻게 바뀌는지 관찰하세요.
초보는 위계를 덧셈으로 세워요: 주인공이 안 돋보여? 키우고, 굵게, 배경색까지. Cooper의 조언은 정반대예요: 두 요소가 주의력을 다툴 때, 덜 중요한 쪽을 낮추는 편이 중요한 쪽을 올리는 것보다 나아요. 낮추면 주인공에게 공간이 생기고, 올리면 군비 경쟁만 열려요—이번엔 제목을 키우고, 다음엔 버튼이 따라 커져요. 책의 비유: 화면 글자마다 빨간 볼드면, 어느 글자가 튀어 보이나요?
위계는 시각 변수로 전달되지만, 변수마다 성질이 달라요. About Face 4는 Bertin Semiology of Graphics를 따릅니다: 크기와 색값(명도)은 순서 변수예요—눈은 「더 큼」「더 어두움」을 자동으로 「더 중요」로 읽어요; 색조(빨강·파랑·초록)에는 자연 순서가 없어요. 독자는 빨강과 파랑 중 누가 앞인지 못 정하고, 색에 의미를 지어내요. 위계를 전하려면 순서가 있는 두 레버를 우선하세요.
위계를 검사하는 공짜 방법—그래픽 디자이너는 이를 스퀸트 테스트(squint test)라고 해요: 눈을 가늘게 뜨면 디테일이 흐려진 뒤, 무엇이 아직도 튀고 무엇이 한 무리로 줄어드는지 보여요. About Face 4는 위계와 관계를 점검하는 일상 수단으로 적어 두었어요. 각도를 바꾸면 놓쳤던 레이아웃 문제가 자주 나와요. 아래 두 화면에서 버튼을 누른 채 스퀸트를 시뮬레이션해 보세요.
한 화면에 주인공은 하나. 독자는 한눈에 「뭐가 중요하지」「뭐가 관련이지」를 물어요. 주인공을 먼저 고르고 나머지는 관계에 따라 낮추면, 두 질문에 답이 생겨요.
세 레버는 한 단계씩이면 충분해요: 크기 한두 단계, 굵기 두 단계, 강조색 한곳. 위계는 크기·명도처럼 순서가 있는 변수를 쓰고, 색조는 분류에 남기세요.
강조하고 싶으면, 먼저 빼세요. 조연을 낮추는 편이 주인공을 키우는 것보다 먹혀요; 분량 줄이기는 핵심 결정에서 가장 먼 요소부터.
납품 전에 한번 스퀸트하세요. 흐려져도 주·부가 갈리면 위계가 선 거예요; 안 갈리면 레버를 다시 당기세요.
콘텐츠 출처: 샤오산 아카데미 「미학 엔지니어링」 특집 오리지널; 일부 원칙은 About Face 4: The Essentials of Interaction Design 17장(Alan Cooper 외)에서 정리.