광고판 디자인 첫걸음

사용자가 웹을 훑어본다는 걸 알았으니까, 이제 질문은 하나야 — 훑어보는 사용자를 위해 어떻게 디자인할 거냐? 크룩은 이걸 **"광고판 디자인"**에 비유해. 시속 100km로 달리는 운전자가 한눈에 이해할 수 있는 광고판처럼, 웹 페이지도 훑어보는 사용자가 한눈에 파악할 수 있게 만들어야 한다는 거야.

웹에는 이미 수십 년간 쌓인 **관례(convention)**가 있어. 로고는 왼쪽 위, 내비게이션은 위쪽이나 왼쪽, 검색은 오른쪽 위, 장바구니 아이콘은 오른쪽 위. 사용자는 이 관례를 이미 학습해서 무의식적으로 기대하지.

관례를 따르면 좋은 점:

• 사용자가 이미 아는 패턴이니까 배울 필요가 없어
• 어디에 뭐가 있을지 예측할 수 있고
• 생각 없이도 원하는 걸 찾을 수 있지

크룩이 강조하는 건 — 관례를 깨는 건 자유이지만, 깰 만한 충분한 이유가 있어야 한다는 거야. "우리 사이트는 특별하니까"는 이유가 안 돼. 관례를 깨면 사용자는 생각해야 하고, 생각하게 만들면 안 된다는 게 이 책의 대전제니까. 관례를 깨도 되는 경우는 딱 하나 — 새로운 방식이 관례보다 압도적으로 명확하고 직관적일 때. 그런데 솔직히 그런 경우는 거의 없어.

**시각적 계층구조(visual hierarchy)**란 페이지에 있는 것들 사이의 관계를 시각적으로 표현하는 거야. 쉽게 말해 — 중요한 건 크게, 관련된 건 가까이, 포함관계는 들여쓰기로 보여주는 것이지.

좋은 시각적 계층구조의 세 가지 원칙:

• 중요한 것은 더 크거나 더 굵거나 더 눈에 띄게. 제목은 크게, 본문은 작게. 이건 기본인데 의외로 안 지키는 사이트가 많아
• 논리적으로 관련된 것은 시각적으로도 관련되게. 같은 카테고리에 속하는 항목들은 같은 스타일로, 같은 영역에 묶어서 보여줘야 해
• 논리적으로 포함된 것은 시각적으로도 포함되게. 섹션 제목 아래에 그 섹션의 내용이 들여쓰기되어 있으면, 보는 순간 구조가 파악되거든

시각적 계층구조가 잘 되어 있으면 사용자는 페이지를 스캔하면서 무의식적으로 구조를 이해해. 뇌가 알아서 "아, 이건 제목이고 이건 그 아래 내용이구나"를 처리해주지. 이게 안 되어 있으면? 모든 걸 읽어봐야 뭐가 중요한지 알 수 있어.

사용자가 페이지를 훑어볼 때, 명확하게 **구역(section)**이 나뉘어 있으면 "내가 찾는 건 이 구역에 있겠다" 하고 바로 해당 구역만 집중해서 볼 수 있어. 반면 구역이 불명확하면 페이지 전체를 다 스캔해야 하지. 신문이 좋은 예시야. 신문은 섹션별로 명확하게 나뉘어 있어서 — 정치, 경제, 스포츠, 문화 — 원하는 섹션만 바로 찾아갈 수 있거든. 웹 페이지도 마찬가지야.

구역을 나누는 방법은 여러 가지야:

• 여백으로 구분
• 배경색으로 구분
• 구분선으로 구분
• 박스로 묶기

중요한 건 구역이 한눈에 **"이 덩어리는 한 묶음이구나"**라고 인식되는 거야.

웹에서 가장 흔한 질문 중 하나가 **"이거 클릭할 수 있는 거야?"**지. 이 질문이 떠오르는 순간 이미 사용성 실패야. 클릭 가능한 요소는 보는 순간 클릭할 수 있다는 걸 알 수 있어야 해:

• 링크는 색이 다르거나 밑줄이 있거나
• 버튼은 버튼처럼 생기거나 (입체감, 테두리, 배경색)
• 클릭할 수 없는 건 클릭할 수 있는 것처럼 보이면 안 돼

크룩이 특히 싫어하는 패턴이 있어 — 텍스트가 파란색이면 링크라고 기대하는데, 그냥 디자인 요소로 파란색 텍스트를 쓰는 것. 이러면 사용자는 매번 "이거 링크인가?" 확인해야 하거든.

페이지에 정보가 많을수록 중요한 게 안 보여. 시각적 잡음의 세 가지 유형을 보면:

• 어수선함(clutter) — 너무 많은 요소가 빽빽하게 들어차 있어서 뭐가 뭔지 모르겠는 것
• 배경 잡음 — 장식용 그래픽, 불필요한 패턴, 의미 없는 이미지가 시선을 분산시키는 것
• 과도한 강조 — 모든 것이 강조되면 아무것도 강조되지 않아. 굵은 글씨, 느낌표, 빨간 글씨가 도처에 있으면 정작 중요한 게 안 보이지

해법은 단순해. 줄여라. 꼭 필요한 것만 남기고 나머지는 빼. 이건 글쓰기 원칙과 같아 — 불필요한 단어를 빼면 문장이 좋아지듯, 불필요한 시각 요소를 빼면 페이지가 좋아져.

텍스트 콘텐츠도 훑어보기 좋게 만들어야 해:

• 제목을 잘 써라. 사용자가 훑어볼 때 제목만 읽거든. 제목이 명확하면 본문을 안 읽어도 돼
• 짧은 단락을 써라. 긴 단락은 스캔하기 어려워. 한 단락 3~4줄이면 충분해
• 불릿 리스트를 써라. 나열할 게 있으면 문장으로 쓰지 말고 목록으로 쪼개
• 핵심 단어를 강조해라. 굵은 글씨로 키워드를 표시하면 스캔 속도가 올라가지

결국 이 챕터 전체의 메시지는 — 사용자는 페이지를 "읽는" 것이 아니라 "스캔하는" 거니까, 스캔에 최적화된 디자인을 해야 해. 광고판을 만든다는 마음으로.

---

정리

3장 읽고 기억할 거:

1. 관례를 따라야 해. 창의적이고 싶으면 콘텐츠에서 해. 내비게이션과 레이아웃은 관례를 따르는 게 사용자를 위한 거야
2. 시각적 계층구조가 핵심이야. 중요한 건 크게, 관련된 건 가까이, 포함된 건 안에. 이걸 시각적으로 보여줘야 해
3. 클릭 가능한 건 보는 순간 알 수 있어야 해. "이거 버튼인가?" 고민하게 만드는 순간 실패야
4. 줄여야 해. 모든 걸 넣으려 하지 말고, 핵심만 남기고 빼