콘텐츠 UX 디자인

1장 콘텐츠! 콘텐츠! 콘텐츠!

사람들은 콘텐츠를 보기 위해 웹사이트에 간다
사용자들은 흘깃 보고 대충 훑어 본다
웹 사용자도 읽기는 한다 그러나…
그들이 더 읽지 않는 이유는…
무엇이 웹의 글을 돋보이게 만드는가?
콘텐츠 UX 디자인 소개
1장 요약

2장 사람! 사람! 사람!

사람들은 읽으면서 자신의 방식대로 해석한다
성공적인 작가는 고객을 생각한다
고객을 이해하기 위한 7단계
- 1 핵심 고객 목록을 만든다
- 2 고객에 대한 정보를 모은다
- 3 고객군별 주요 특징을 알아낸다
- 4 고객의 의문점, 과제, 이야기를 수집한다
- 5 페르소나를 만들 때 이 정보를 활용한다
- 6 페르소나마다 목표와 과제 정보를 추가하라
- 7 시나리오를 만들 때 이 정보를 활용한다
2장 요약

3장 잘 시작하기: 메인 페이지

메인 페이지: 10분의 미니 투어
사이트의 성격을 규명하고 브랜드를 인지한다
사이트의 톤과 개성을 심는다
이 사이트가 어떤 곳인지 감을 잡게 한다
주요 과제를 즉시 시작할 수 있게 한다
효율적으로 사람들을 옳은 길로 안내함
사례 연구 3-1
메인 페이지에서 내려감과 동시에 정보에서 올라가자
3장 요약

4장 목적지로 가는 길:중간 페이지

사이트 방문자들은 사냥(임무 수행) 중이다
중간 페이지는 목적지에 가기 전 거쳐가는 곳일 뿐이다
사람들은 사냥 중에 많이 읽고 싶어하지 않는다
사례 연구 4-1
때로는 짧은 설명이 도움된다
중간 페이지에서는 마케팅이 간과되어도 좋다
클릭을 몇 번 하는가보다 얼마나 부드럽게 이어지는지가 더 중요하다(적절한 한도 내에서)
사람들은 그럴 듯해 보이는 제일 첫 번째 것을 선택한다
많은 방문자들이 사이트 안으로 바로 들어온다
4장 요약


5장 문서가 아닌 정보를 만들어라

긴 문서 자르기
한 페이지에 얼마나 많은 정보를 넣을지 결정하기
PDF 필요할까 아닐까?
5장 요약


6장 없으면 안 되는 내용에만 집중하기

꼭 필요한 내용만 주기 위한 여섯 가지 지침
- 1 사람들이 필요로 하는 것만 제공하라
- 2 자르고, 자르고, 또 잘라라!
- 3 핵심부터 써라 역 피라미드 형태로 써라
- 4 언어의 담장을 허물어라
- 5 유용한 정보를 제공하는 것으로 마케팅하라
- 6 정보를 여러 층으로 나눠라(레이어링)
6장 요약

7장 쉽게 사용할 수 있는 웹 페이지 만들기

유용한 디자인을 위한 열네 가지 지침
- 1 규칙과 정렬을 이용해 페이지 요소가 눈에 잘 들어오게 하라
- 2 페이지를 기획할 때 사이트 전체를 생각하라
- 3 템플릿을 만들어라
- 4 여백을 효율적으로 활용하라 콘텐츠에 능동적인 여백을 넣어라
- 5 가짜 바닥을 조심하라
- 6 제목이 떠보이지 않게 하라
- 7 중앙 정렬하지 마라
- 8 산 세리프 체를 디폴트로 하라
- 9 글자 크기를 선택할 때는 사용자와 그들의 상황을 폭넓게 고려하라
- 10 중간 줄 길이를 디폴트로 한 유동 레이아웃을 이용하라
- 11 대문자로 모든 철자를 구성하지 마라
- 12 링크 외에는 어디에도 밑줄을 긋지 마라 이탤릭체는 아껴라
- 13 글자와 배경 화면은 충분히 대조되게 하라
- 14 색상을 선택할 때 방문자 모두를 고려하라
사례연구 7- 1
7장 요약
쉬어 가는 이야기


8장 문장 가다듬기

문장을 가다듬는 10가지 지침
- 1 방문자에게 이야기하라 "당신"이라고 부른다
- 2 여러분은 사람이고, 회사도 사람이 모인 곳이라는 것을 보여준다
- 3 능동형으로 써라(대부분)
- 4 문장을 짧고, 간결하고, 직접적으로 만들어라
- 5 불필요한 말을 잘라내라
- 6 추가 정보는 별도 공간에서 제공하라
- 7 단락을 짧게 하라
- 8 상황을 가장 먼저 설정하라 - 첫 번째 내용은 첫 번째에, 두 번째 내용은 두 번째에
- 9 행위는 명사가 아닌 동사에 담아라
- 10 사용자의 언어를 이용하라
8장 요약


9장 목록과 도표를 이용하라

유용한 웹 목록을 만들기 위한 9가지 지침
유용한 웹 도표를 만들기 위한 6가지 지침
- 1 정보를 쉽게 쥘 수 있는 목록을 이용하라
- 2 대부분의 목록을 짧게 만들어라
- 3 제 역할을 할 수 있는 포맷으로 만들어라
- 4 사이트 개성에 맞는 글머리 기호를 사용하라
- 5 절차에는 숫자 목록을 이용하라
- 6 단락은 단계로 바꿔 제시하라
- 7 복잡한 절차도 단계로 제시하라
- 8 목록 내 문장 구조를 평행하게 하라
- 9 단계가 아니면 숫자를 쓰지 마라 그렇지 않으면 사람들은 단계로 착각한다
- 10 비교할 숫자가 있을 때 도표를 이용하라
- 11 일련의 "~하면 ~할 것이다(if, then)" 형식의 문장이 있다면 도표를 이용하라
- 12 도표는 질문에 대한 답변으로 생각하라
- 13 도표의 왼쪽 열에 어떤 정보를 넣을지 신중히 생각하라
- 14 도표를 간단하게 만들어라
- 15 줄이 아닌 정보에 집중할 수 있는 도표를 만들어라
9장 요약


10장 제목으로 본문을 나눠라

좋은 제목은 여러 면에서 독자를 돕는다
제목은 작가도 돕는다
옛날 콘텐츠에 제목만 던져 놓지 마라
유용한 제목을 만들기 위한 12가지 지침
- 1 제목으로 콘텐츠의 윤곽을 잡아라
- 2 사람들이 질문을 가지고 올 때는 제목에서 질문을 하라
- 3 핵심 요지를 전달할 때는 진술문으로 된 제목을 제공하라
- 4 절차를 보여주는 제목에는 행위 절을 이용하라
- 5 명사나 명사구로 된 제목은 가끔만 사용하라
- 6 제목에 방문자의 언어를 담아라
- 7 평행의 힘을 활용하라
- 8 너무 깊이 파고들지 마라: 제목을 두 레벨 이상으로 만들지 마라(페이지 제목 아래로)
- 9 제목의 레벨을 분명히 하라
- 10 글자 크기, 진하기, 색상으로 본문과 제목을 차별화하라
- 11 같은 페이지 링크로 사람들이 쉽게 옮겨 다니게 하라
- 12 평가하라! 여러분이 쓴 제목을 읽어 보라
10장 요약
쉬어 가는 이야기
사례 연구 10- 1


11장 일러스트레이션 효과적으로 사용하기

일러스트레이션은 모두 저마다의 목적을 가지고 있다
효과적으로 일러스트레이션을 이용하기 위한 9가지 지침
- 1 무엇인지, 왜 그런지 생각하게 하지 마라
- 2 적당한 크기로 제시하라
- 3 콘텐츠를 감추기보다 돋보이게 하는 일러스트레이션을 이용하라
- 4 사람 사진에는 다양성을 담아라
- 5 콘텐츠가 광고처럼 보이지 않게 하라
- 6 글자나 사진이 깜박거리거나, 돌아가거나, 흔들리거나, 돌아다니게 하지 마라
- 7 애니메이션은 도움될 때만 사용하라
- 8 스플래쉬나 플래시로 사람들을 기다리게 하지 마라
- 9 일러스트레이션은 접근 가능하게 만들어라
11장 요약


12장 의미 있는 링크 만들기

의미있는 링크를 만들기 위한 열두 가지 지침
- 1 링크 이름으로 새로운 프로그램이나 제품의 이름을 이용하지 마라
- 2 문서 제목이나 제목을 링크로 이용하겠다는 생각을 재고하라
- 3 한발 앞서 생각하라 링크와 페이지제목을 맞춰라
- 4 허락된 공간에서 최대한 명시적으로 써라 필요하면 자리를 만들어라
- 5 행위 링크에는 행위 절을 이용하라
- 6 명사 단독 사용을 아껴라 길게 설명하는 링크가 더 좋다
- 7 사람들이 필요로 하면 짧은 설명을 덧붙여라 아니면 링크를 다시 써라
- 8 링크를 의미 있게 만들어라 Click here나 More를 피하라
- 9 비슷한 링크가 여러 개 있다면 정리하라
- 10 사람들이 여러분의 정보에 머무르기를 원한다면 링크를 임베드하지 마라
- 11 링크에 글머리 기호를 이용할 때는 이 기호도 클릭되게 하라
- 12 방문하지 않은 링크와 방문한 링크 모두 명확히 보이게 하라
12장 요약


13장 초안에서 최종 페이지로 가기

글쓰기를 초안의 수정 과정으로 생각하라
동료들이나 다른 사람들에게 읽어보고 지적해 달라고 요청한다
여러분의 자존심을 기꺼이 서랍 속에 넣어라
글쓰기 전문가나 편집자들의 도움을 받아라
여러분과 사이트 방문자 모두를 만족시키는 검토가 되어야 한다
13장 요약

쉬어 가는 이야기

이 책을 소개하기 전에 잠시 취업 준비생 A, B, C의 이력서를 비교해 보겠다. 이 세 사람은 모두 소위 말하는 훌륭한 '스펙'을 가졌다. 이 셋은 동일한 5개의 기업에 이력서를 넣었다.

A는 자신의 스펙을 모두 다 적었다. 자세히 읽어 보면 꽤 훌륭한 인물이라는 사실을 알 수 있으나 너무 길게 강약 조절 없이 작성했기에 이력서를 읽기가 힘들다. 이력서는 하나만 만들어 지원하는 기업에 모두 똑같은 것을 제출했다. B는 이력서를 화려하게 만들었다. 파워포인트 애니메이션 CD로 제출했다. 포토샵으로 멋지게 다듬은 이미지도 많다. 색상도 현란하다. 한눈에 봐도 공을 많이 들였다는 생각이 들지만 정작 알맹이는 없다. B 역시 모든 기업에 똑같은 이력서를 넣었다. C는 자신의 수많은 스펙(학력, 수상 경력, 전공, 활동 등) 가운데 취업에 꼭 필요한 것이 무엇인지부터 생각했다. 그리고 자신의 어떤 면이 지원 회사와 지원 분야와 관련 있는지도 파악했다. 따라서 채용 담당자가 관심 있어 할 만한 내용만 이력서에 넣었다. 자신의 장점을 부각시켰고, 담당자가 관심 없어 할 만한 내용은 아무리 멋진 것도 과감히 정리했다. 산문형으로 길게 늘어 놓는 대신 몇 개의 핵심 문구만 눈에 잘 띄게 편집했다. 따라서 C의 이력서는 지원 기업마다 달라질 수밖에 없다. 어떤 이력서가 채용자의 눈에 들고, 따라서 누가 입사 확률이 높을지 기업에 몸담아 본 사람이라면 누구나 짐작할 수 있을 것이다.

웹사이트의 정보를 보면 A, B의 이력서와 같다는 생각이 든다. 정보가 너무 많다. 아니면 정보가 너무 없다. 도대체 무슨 말인지 모르겠다. 무슨 말인지는 알겠지만 보기가 어렵다. 이미지만 많고 알맹이가 없다. 광고나 유도성 문구만 가득하다. 등등등...그 결과는?

아무리 좋은 정보가 있어도 사용자가 보지 않는다. 현란한 이미지에 잠시 현혹됐지만 이내 잊는다. 이 사이트가 무슨 사이트인지도 모르겠고, 자신이 해야 할 일을 이 사이트에서 어떻게 할지도 모르겠다. 무엇보다 이 사이트를 만든 기업이 제대로 일하는 곳인지 믿음이 가지 않는다.
그럼 채용 담당자의 관점에 맞게 스펙을 재가공한 C의 이력서처럼 고객의 관점에 맞게 정보를 가공한 사이트, 그리고 그런 정보를 주기적으로 업데이트하는 사이트는 어떨까?

사용자는 필요한 정보를 쉽게 찾는다. 자신이 해야 할 과제를 쉽게 수행한다. 관심 정보가 쉽게 정리돼 있어서 더 오래 머물면서 연관 정보를 본다. 이 사이트와 기업에 대해 더 잘 알게 된다. 이 기업의 꼼꼼함과 전문성을 알게 되고, 나아가 신뢰감이 생긴다.

기업의 입장에서 C를 채용하는 것처럼 고객의 입장에서는 그 사이트를 채용할 것이다.

하지만 우리나라에서는 온라인 전문 업체나 사용자 경험에 큰 투자를 하는 회사조차 이렇게 사이트의 콘텐츠를 재가공해 사용자의 관점에 맞게 제공하자는 곳이 거의 없다. 혹 업계의 선각자 가운데 이런 필요를 느끼고 있는 사람이라도 이 분야만 다룬 전문서나 전문가가 없어 무엇을 어떻게 해야 할지 모른다.

이 책의 저자인 지니 레디쉬는 미국 내 '콘텐츠 UX 디자인' 분야에서 입지전적인 인물이다. 이 책은 저자가 수십 년간 현장에서 체득한 노하우를 바탕으로 온라인에서 정보를 재가공하는 것이 왜 중요하고 온라인에서의 정보 습득은 다른 매체와 어떻게 다르며, 그럼 도대체 어떤 방식으로 가공해야 할지를 쉽고 실용적으로 풀어 썼다.

이 책은 내 사이트의 스펙을 다시 생각할 기회를 줄 것이다. 우리는 사용자가 필요로 하는 정보를 주고 있는가? 불필요한 정보에 가려 정작 중요한 정보가 가려지지 않았는가? 정보는 좋은데 보기가 어려워 사용자가 다른 곳으로 가고 있지 않은가?

이 책을 읽다 보면 고객이 필요로 하는 정보를 고객이 원하는 방식으로 제공할 수 있게 될 것이다. 궁극적으로 사이트, 더 나아가 기업은 고객의 신뢰와 존경을 얻게 되고 해당 분야의 전문가로서 입지를 굳히는 계기가 될 수 있으리라 믿어 의심치 않는다.
- 옮긴이 서문 중에서