생각하게 하지마 3판, 스티브 크룩

제목 : 생각하게 하지마 3판

저자 : 스티브 크룩

정리

1장 — 사용자를 고민에 빠뜨리지 마라

1장은 이 내용이 이 책의 핵심 가치이자 이 가치를 만들기 위해 모든 내용을 설명한다.

• 핵심
  • 사용자가 생각할 떄 답답하고, 불편하다.
  • 사용자의 머리속에 물음표를 없애자
• 방법
  • 자명하게 만들자.
  • 보자마자 설명이 필요 없게 만들자.
  • 버튼은 버튼답게, 링크는 링크답게, 추가 정보 없이 이해 되도록 디자인 하자

2장 — 우리가 실제 웹을웹을 사사용하는 방법

2장은 사용자가 어떻게 웹/앱을 대충 본다는걸 설명한다.

• 핵심
  • 훑어본다 : 사용자는 페이지를 읽지 않고, 대충 훑는 느낌으로 키워드만 본다.
  • 만족한다 : 최선의 선택을 하기 보다, 대강 맞으면 일단 눌러보며 만족한다.
  • 임기응변으로 대응한다 : “성당과 시장” 의 시장 모델처럼 사용한다.

3장 — 광고판 디자인 첫걸음

3장 ‘광고판 디자인 첫걸음’의 핵심은 사용자가 페이지를 훑어볼 때 중요한 정보를 즉시 파악할 수 있도록 디자인해야 한다는 것이다.

• 관례를 이용하라
  • 핵심
    • 관례의 본질을 이해하고, 재사용 한다.
  • 주의 사항
    • 쓸데 없는 곳에 창의력을 낭비하지 말자
    • 관례를 깰 때는, 본질의 가치를 유지하는 더 나은 아이디어가 있을 때 하자
• 시각적 계층구조를 효과적으로 구성하라
  • 핵심
    • 중요한걸 더 중요하게 보여야 생각하지 않기 때문
  • 방법
    • 중요도나 곈과/포함 관계로 표현하자
    • 왜냐하면 더 명확하게 이해되기 때문
    • 예) 하이러라키 구조를 보면 그냥 직관적으로 이해 된다.
  • 주의 사항
    • 모든걸 중요하게 만들지 말것 (중요하다고 모든걸 다 Bold 로 …)
    • 시각적인 혼란을 주지 말것(이쁘게 보이게 하려고 … )
• 페이지의 구역을 또렷하게 구분하라
  • 핵심
    • 훓어 보기 때문에 구역을 또렷하게 구분해야 생각을 안한다.
  • 방법
    • 시각적 단서를 이용한다
    • 제목을 이용하는게 가장 기본적인 방법
    • 공간 영역을 구분하여 시각적으로 배치
    • 배경이나 테두리를 이용하여 구분
  • 주의 사항
    • 물이 좋다고 넘치도록 컵에 따르지 마라(과하게 하지 마라)
• 클릭할 수 있는 요소를 명확히 표시하라
  • 핵심
    • 웹/앱에서 클릭은 사용자의 활동 중 큰 부분을 차지 한다.
    • 사용자가 생각하지 않게 명확히 구분하자
  • 방법
    • 텍스트 링크: 파란 링크 조합(하지만 지루하다)
    • 버튼 이미지: 입체감이 느껴지게. 누가 봐도 버튼처럼
    • 마우스 오버 효과 : 마우스 올렸을 때 반응 하게
    • ..
  • 주의 사항
    • 클릭할 수 없는데, 버튼처럼 보이게는 하지 말것
    • 클릭할 수 있는데, 일반 텍스트나 이미지 처럼 보이게 하지 말것
• 주의를 흩뜨릴 만한 요소를 없애라
  • 핵심
    • 사용자는 목표를 달성하는 과정에 방해가 되는 모든 것은 ‘소음’일 뿐이다.
  • 방법
    • 시각적 소음 줄이기: 모든 요소가 정말 필요한지 확인하기
      • 많은 색상, 복잡한 배경 이미지, 불필요한 장식은 사용자의 시선을 분산시킨다.
      • 페이지는 명확한 목적을 가져야 하며, 디자인은 그 목적을 뒷받침해야 한다
    • 인지적 부담 덜어주기: 불필요한 질문이나 너무 많은 선택지는 사용자를 한다.
      • “이걸 꼭 입력해야 하나?” 혹은 “이게 무슨 뜻이지?”라고 생각하게 만든다.
      • 필요한 정보가 아니라면 과감히 제거하자.
• 내용을 훑어보기 좋은 방식으로 구성하라
  • 핵심
    • 사용자는 웹페이지를 훑어 본다! 그러니 훑어보기 좋게 구성하자!
  • 방법
    • 명확한 제목과 부제목을 활용해라
      • 사용자는 페이지 구조를 한눈에 파악하고 원하는 섹션으로 바로 이동 할 수 있다.
    • 짦은 단락과 글머리 기호를 사용해라
      • 긴 텍스트 덩어리는 사용자를 힘들게 한다
      • 내용을 잘게 나누어 단락화 시키자
    • 중요한 단어를 강조해라
      • 눈길이 머물만한 키워드를 굵은 글씨로 강조해라

4장 — 동물입니까, 식물입니까, 무생물입니까?

• 핵심
  • 사용자가 클릭 할 때, 고민하게 하지 마라
  • 클릭은 생각이 아니라 반사다. 단순하게, 제때, 당연하게 만들어라.
• 근거
  • 사용자가 링크를 클릭할 때, 모하다면 불안감을 증가 시킨다
  • 링크의 의미를 추측하는 것 조차 사용자에게 부담으로 받아 드린다.
• 방법
  • 간결성(Clarity)
    • 선택지를 여러개 제공해서 고민하게 만들지 말것
    • 클릭하기 전에 머리로 계산하게 하지 말 것
    • 버튼, 링크, 문구는 읽자마자 간결하게 직관적으로 알게 해야 한다
  • 적시성(Timing / Relevance)
    • 버튼이나 정보는 사용자가 그걸 필요로 하는 바로 그 순간 보이게 할 것
    • 너무 일찍 던지면 헷갈리고, 너무 늦게 던지면 짜증나게 된다.
    • 사용자의 진행 과정에서 바로 납득이 가게 해야 한다.
  • 불가피성(Inevitability)
    • 흐름상 그 버튼을 누르는 게 너무도 당연하고 불가피하게 할 것

5장 — 불필요한 단어를 덜어내라

• 핵심
  • 불필요한 단어를 덜어내라.
  • 글자는 줄이는 게 목적이 아니라, 사용자가 고민하지 않고 즉시 행동하게 만드는 것이 목적이다.
  • 사용자는 글을 정독하지 않는다 → 훑어본다.
  • 불필요한 단어는 인지 부하를 키운다.
  • 단어는 신호(signal)인데, 많아지면 노이즈(noise)가 된다.
• 방법
  • 인사말·장황한 설명 제거: 방문을 환영한다는 말은 삭제. 사용자는 이미 목적이 있다.
  • 동사 중심의 라벨 사용: 버튼과 링크는 행동 + 목적을 담은 짧은 문구.
  • 문장과 단락을 최소화: 1문단 = 1~2문장. 글머리 기호, 굵은 글씨로 훑기 쉽게.
  • 설명 대신 UI로 해결: 라벨, 아이콘, 시각 계층으로 의미 전달.
  • 정보는 적시에, 점진적으로 제공: 필요할 때만 보여주기. 한 번에 다 던지지 말 것.
  • 오류·상태 메시지는 해결 지향적: 문제 + 해결 방법을 함께 제공.
  • 사용자 언어 사용: 내부 용어, 기술 용어 대신 사용자가 아는 표현으로.
• 잘못된 예시
  • 주문을 완료하시려면 먼저 장바구니에 담긴 상품이 현재 고객님이 구매를 원하는 상품이 맞는지 반드시 확인해 주셔야 합니다. 상품 확인이 끝나면 다음 단계로 결제를 진행할 수 있는데, 이때 여러 가지 결제 수단 중에서 하나를 선택하실 수 있습니다. 저희 앱에서는 신용카드, 체크카드, 간편결제, 휴대폰 결제 등 다양한 방법을 지원하고 있으니 고객님의 상황에 맞는 방법을 골라 주시면 됩니다. 결제 방식을 선택하신 뒤에는 화면 하단에 크게 보이는 파란색 버튼을 누르시면 결제가 진행되며, 이 버튼에는 ‘주문하기’라는 글자가 쓰여 있습니다. 버튼을 누르시면 시스템이 자동으로 주문을 접수하게 되며, 주문이 정상적으로 완료되면 고객님이 가입 시 등록한 이메일 주소로 주문 확인 메일이 발송됩니다. 혹시라도 주문 과정에서 오류가 발생하거나 결제가 정상적으로 처리되지 않을 경우에는 고객센터로 문의하실 수 있도록 별도의 안내가 제공될 예정입니다.
  • 수정된 예시
    • 장바구니에서 상품을 확인하고, 결제 수단을 선택한 뒤 [주문하기] 버튼을 누르세요. 주문이 완료됩니다.

6장 표지판과 빵부스러기

• 핵심: 사용자가 길을 잃지 않도록, 웹사이트 내비게이션은 현실 세계의 명확한 ‘표지판’과 지나온 길을 알려주는 ‘빵부스러기’ 역할을 해야 한다.

• 쇼핑몰에서
  • 웹 내비게이션은 쇼핑몰의 안내 표지판과 같다. 사용자가 현재 위치를 알고, 원하는 곳으로 쉽게 찾아갈 수 있도록 직관적인 안내 체계를 제공해야 한다.
• 웹 내비게이션 첫걸음 / 참을 수 없는 브라우징의 가벼움
  • 사용자는 ‘뒤로 가기’ 버튼 때문에 아무런 부담 없이 링크를 클릭하고, 마음에 안 들면 즉시 떠난다. 내비게이션은 이러한 가볍고 즉흥적인 탐색 방식을 지원해야 한다.
• 내비게이션의 숨은 용도
  • 내비게이션은 길 찾기 외에도 ① 사이트 전체 구조를 가르쳐주고, ② 사이트에 대한 신뢰감을 형성하며, ③ 어떤 콘텐츠가 있는지 보여주는 중요한 역할을 한다.
• 웹 내비게이션 관례
  • 로고는 왼쪽 상단에, 주 메뉴는 상단이나 왼쪽에 두는 등 사용자가 이미 익숙한 ‘관례’를 따르는 것이 가장 효과적이다. 창의성보다 일관성과 예측 가능성이 중요하다.
• 어딜 가든 따라온다 / 내가 방금 ‘어딜 가든’이라고 했던가?
  • 전역 내비게이션(Persistent Navigation)은 사이트의 모든 페이지에 일관된 형태로 제공되어야 한다. 이는 사용자에게 안정감을 주고 어디서든 길을 찾을 수 있다는 확신을 준다. (단, 결제 페이지 등 집중이 필요한 곳은 예외)
• 여기는 캔사스가 확실히 아냐 / 섹션 / 유틸리티
  • 내비게이션 링크는 주요 콘텐츠인 ‘섹션(Sections)’과 로그인, 장바구니 같은 부가 기능인 ‘유틸리티(Utilities)’로 명확히 구분하고 시각적으로 분리해야 사용자의 혼동을 막을 수 있다.
• 세 번 클릭하고 이렇게 말해보세요. “집이 최고야.”
  • ‘홈(Home)’ 버튼은 사용자가 길을 잃었을 때 언제든 처음으로 돌아갈 수 있는 비상 탈출구다. 항상 명확하고 접근하기 쉬운 위치에 제공해야 한다.
• 검색 방법
  • 검색은 메뉴 탐색을 원치 않거나 특정 키워드를 찾는 사용자에게 필수적인 내비게이션 도구다. 사용자가 쉽게 찾을 수 있는 곳에 명확한 검색창을 제공해야 한다.
• 1, 2단계 이후의 내비게이션에 대해서도 고민하라
  • 사이트의 깊은 하위 페이지(지역 내비게이션, Local Navigation)에서도 사용자가 길을 잃지 않도록, 현재 속한 섹션 내에서의 위치와 이동 경로를 명확히 보여줘야 한다.
• LA에서 드라이브하기 즐거운 데는 이유가 있다 / 현재 위치를 표시하라
  • 사용자가 사이트 구조 내에서 ‘현재 내가 어디에 있는지(You are here)’를 명확하게 알려줘야 한다. 현재 보고 있는 메뉴 항목을 시각적으로 강조(색상, 굵기 등)하는 것이 가장 효과적이다.
• 빵부스러기(Breadcrumbs)
  • 현재 페이지까지의 경로를 계층 구조로 보여주는 내비게이션 요소다. 특히 구조가 깊은 사이트에서 현재 위치를 알려주고 상위 단계로 쉽게 이동할 수 있게 돕는다.
• 내가 탭을 여전히 사랑하는 세 가지 이유
  • 탭(Tab) 디자인은 ① 물리적 서류철 비유로 직관적이고, ② 공간 효율적이며, ③ 현재 위치를 명확하게 보여주기 때문에 여전히 매우 효과적인 내비게이션 방식이다.
• 트렁크 평가를 하라
  • 어떤 페이지에 처음 방문했더라도 사용자가 즉시 답할 수 있어야 하는 4가지 질문. 모든 페이지는 이 테스트를 통과해야 한다.
    1. 여기는 어떤 사이트인가? (사이트 정체성)
    2. 나는 지금 어디에 있는가? (페이지 위치)
    3. 이 사이트의 주요 섹션은 무엇인가? (주요 내비게이션)
    4. 이 페이지에서는 무엇을 할 수 있는가? (콘텐츠, 기능)

7장 웹 디자인의 빅뱅이론

• 핵심: 홈페이지는 첫인상으로 모든 것을 증명해야 한다.
  • 홈페이지는 사용자가 사이트에 대해 알아야 할 모든 것(정체성, 목적, 가치, 사용법)을 첫눈에 파악할 수 있도록 설계된 ‘빅뱅’의 순간이어야 한다. 사용자가 고민하기 전에 사이트가 먼저 답을 제시해야 한다.
• 근거: 왜 홈페이지가 여전히 중요한가?
  • 검색을 통해 하위 페이지로 바로 유입되는 시대에도, 홈페이지는 사용자가 길을 잃었을 때 돌아오는 ‘기준점(Home Base)’이자 사이트 전체의 신뢰도를 대표하는 ‘얼굴’이기 때문이다. 첫인상이 무너지면 사이트 전체가 무너질 수 있다.
• 방법: 어떻게 첫인상을 각인시키는가?
  • 사이트 정체성 명확화: 왼쪽 상단에 명확한 로고를 배치하고, 그 옆에 사이트의 목적과 가치를 설명하는 간결하고 강력한 태그라인을 제시하라.
    • 예시: Dropbox의 “모든 것을 한 곳에 보관하세요”는 모호하지만, 초기의 “가장 간단하게 파일을 보내는 방법”은 명확하고 강력하다.
  • 핵심 질문에 즉시 답변: 사용자가 무의식적으로 던지는 4가지 질문에 대한 답을 시각적으로 보여줘라.
    • 여기는 어떤 사이트인가? → Amazon 로고와 “지구상에서 가장 큰 셀렉션”이라는 문구.
    • 여기엔 무엇이 있는가? → “도서”, “전자제품”, “주방용품” 같은 명확한 섹션(내비게이션).
    • 여기서 무엇을 할 수 있는가? → 페이지 중앙의 거대한 검색창.
    • 왜 이곳을 이용해야 하는가? → “프라임 무료 배송”, “오늘의 딜” 같은 가치 제안 배너.
  • 명확한 시작점 제시: 사용자가 “이제 뭘 해야 하지?”라고 생각하기 전에, 가장 가능성 높은 다음 행동을 눈에 잘 띄게 배치하라.
    • 예시: SaaS 서비스의 홈페이지라면 [무료로 시작하기] 버튼을, 쇼핑몰이라면 [여성복], [남성복] 링크나 메인 프로모션 배너를 가장 눈에 띄는 곳에 둔다.
• 주의사항: 무엇을 경계해야 하는가?
  • 내부 정치에 휘둘리지 마라: 홈페이지는 회사의 조직도가 아니다. 모든 부서의 요구를 똑같이 반영하려는 ‘영역 싸움’은 사용자에게 혼란만 준다.
    • 나쁜 예시: 대학 홈페이지 메인 화면이 ‘총장 동정’, ‘도서관 행사’, ‘공과대학 수상’ 등 각 부서의 소식을 담은 슬라이드 배너로 가득 차 있는 경우. 정작 예비 신입생이 원하는 ‘입학 안내’는 찾기 어렵다.
  • 단기 이익에 눈이 멀지 마라: 과도한 팝업, 광고, 프로모션으로 홈페이지를 어지럽히는 것은 장기적인 신뢰라는 ‘황금알을 낳는 거위’의 배를 가르는 행위다.
    • 나쁜 예시: 뉴스 사이트에 접속하자마자 구독 요청 전체 화면 팝업이 뜨고, 그걸 닫으면 알림 허용 팝업이, 또 그걸 닫으면 쿠키 동의 배너가 뜨는 경우. 사용자는 콘텐츠를 보기도 전에 신뢰를 잃고 떠난다.

8장 “농부와 카우보이는 친구가 되어야 한다”

• 핵심: ‘평균 사용자’는 없으니, 끝없는 논쟁을 멈추고 테스트하라.
  • 디자인에 대한 팀 내 논쟁은 개인의 취향과 추측에 기반한 ‘종교적인 논쟁’일 뿐이다. 이 소모적인 논쟁을 끝내는 유일한 방법은 실제 사용자를 대상으로 한 사용성 테스트를 통해 무엇이 정말 효과적인지 데이터를 확인하는 것이다.
• 근거: 왜 논쟁이 무의미한가?
  • ‘평균 사용자’라는 신화: 모든 사용자를 만족시키는 완벽한 디자인은 존재하지 않는다. 사용자는 체계적으로 메뉴를 탐색하는 ‘농부’와 일단 검색부터 하는 ‘카우보이’처럼 성향이 완전히 다르다. ‘평균’을 가정하는 것 자체가 잘못된 접근이다.
  • 근거 없는 믿음: “모든 사용자는 OOO을 좋아해”와 같은 주장은 객관적 데이터가 없는 개인의 신념일 뿐이다. 이런 주장은 팀을 분열시키고 시간을 낭비하게 만든다.
  • 테스트는 논쟁을 끝낸다: 어떤 디자인이 더 나은지에 대한 의견 대립은 실제 사용자가 과업을 수행하는 모습을 관찰하는 순간 끝난다. 추측이 아닌 사실이 논쟁의 종결자 역할을 한다.

---

---

목차

옮긴이의 글

이번 개정판에 대하여

1. 솔직히 오래되었다
2. 세상이 바뀌었다 오해는 말기 바란다…

본문에 앞서

• 나쁜 소식: 여러분에게 사용성 전문가를 고용할 여력이 없을 수도 있다
• 좋은 소식: 로켓 수술TM처럼 어려운 일도 아니다
• 이 책은 짧다
• 이 책에 없는 내용
• 모바일 부분 추가!
• 시작하기 전 마지막 한 가지

1장 사용자를 고민에 빠뜨리지 마라

• 사용자를 고민에 빠뜨리지 마라!
• 사용자는 이럴 때 고민한다
• 모든 것을 자명하게 만들 수는 없다
• 웹 사이트를 명확하게 만들어야 하는 이유는 무엇인가?
• 그러면 진짜 이유는?

2장 우리가 실제 웹을 사용하는 방법

• 첫 번째 진실: 사용자는 웹 페이지를 읽지 않는다. 훑어본다
• 두 번째 진실: 사용자는 최선의 선택을 하지 않는다. 최소 조건만 충족되면 만족한다
• 세 번째 진실: 사용자는 작동방식까지 이해하려 하지 않는다. 적당히 임기응변한다
• 피할 수 없다면…

3장 광고판 디자인 첫걸음

• 관례를 이용하라
• 시각적 계층구조를 효과적으로 구성하라
• 페이지의 구역을 또렷하게 구분하라
• 클릭할 수 있는 요소를 명확히 표시하라
• 주의를 흩뜨릴 만한 요소를 없애라
• 내용을 훑어보기 좋은 방식으로 구성하라

4장 동물입니까, 식물입니까, 무생물입니까?

• 도움이 필요할 때도 있다

5장 불필요한 단어를 덜어내라

• 불필요한 인사말을 빼라
• 설명을 없애라
• 이제 다음 단계로 넘어가자

6장 표지판과 빵부스러기

• 쇼핑몰에서
• 웹 내비게이션 첫걸음
• 참을 수 없는 브라우징의 가벼움
• 내비게이션의 숨은 용도
• 웹 내비게이션 관례
• 어딜 가든 따라온다
• 내가 방금 ‘어딜 가든’이라고 했던가?
• 여기는 캔사스가 확실히 아냐
• 섹션
• 유틸리티
• 세 번 클릭하고 이렇게 말해보세요. “집이 최고야.”
• 검색 방법
• 1, 2단계 이후의 내비게이션에 대해서도 고민하라
• LA에서 드라이브하기 즐거운 데는 이유가 있다
• 현재 위치를 표시하라
• 빵부스러기
• 내가 탭을 여전히 사랑하는 세 가지 이유
• 트렁크 평가를 하라

7장 웹 디자인의 빅뱅이론

• “아, 그런데 한 가지 조건이 더 있습니다. 눈을 가리고 해야 합니다.”
• 영역싸움의 첫 번째 사상자
• 홈 페이지가 아직도 그렇게 중요하다고요?
• 중요한 메시지는 이렇게 전달하라
• 좋은 태그라인이 최고야™
• 태그라인 따위 없어도 그만이야
• 다섯 번째 질문
• 황금알을 낳는 거위를 잡아먹고 싶은 이유

8장 “농부와 카우보이는 친구가 되어야 한다”

• “모든 사용자는 ____을 좋아해”
• 농부 대 카우보이
• ‘평균 사용자’라는 신화
• 종교적인 논쟁은 이렇게 해결하라

9장 적은 비용으로 사용성 평가하기

• 제 말을 따라하세요: 포커스 그룹은 사용성 평가가 아닙니다
• 사용성 평가에 대한 몇 가지 진실
• DIY 사용성 평가
• 평가 주기는 어느 정도가 좋을까?
• 사용자는 몇 명이 필요한가?
• 참가자는 어떻게 선택하는가?
• 참가자는 어떻게 찾는가?
• 평가는 어디서 하는가?
• 누가 진행하는 게 좋은가?
• 누가 관찰하는가?
• 무엇을, 언제 평가하는가?
• 평가할 과제는 어떻게 선택하는가?
• 평가 중에 어떤 일이 일어나는가?
• 평가 세션 예시
• 일반적으로 발생하는 문제들
• 브리핑: 고칠 내용 정하기
• 대안적 평가 방식
• 해보면 마음에 들 거다

10장 모바일 앱 사용성

• 무엇이 다른가?
• 트레이드오프를 고려하라
• 공간이 좁아서 생기는 문제들
• 카멜레온 기르기
• 어포던스를 감추지 마라
• 커서 없음 = 호버 없음 = 힌트 없음
• 플랫 디자인: 약일까 독일까?
• 돈이 너무 많은 사람, 몸이 너무 마른 사람은 있을 수 있다
• 모바일 앱 사용성 속성
• 재미가 대세다
• 앱에는 학습 용이성이 있어야 한다
• 앱에는 기억 용이성 또한 있어야 한다
• 모바일 기기 사용성 평가
• 모바일 평가 실행 방식
• 내가 사용한 방법
• 개념 증명: 브런들플라이Brundlefly 카메라
• 마침내…

11장 기본예절로서의 사용성

• 호감 저장고
• 호감이 줄어드는 요인들
• 호감을 키우는 요인들

12장 웹 접근성과 여러분

• 사람들이 개발자나 디자이너에게 하는 말
• 개발자와 디자이너가 두려워하는 것
• 사실 정말 복잡해질 수도 있다
• 지금 당장 할 수 있는 네 가지 사항
  1. 모두가 혼란스러워 하는 사용성 문제부터 고쳐라
  2. 논문을 한 편 추천한다
  3. 책 한 권을 추천한다
  4. 쉬운 문제부터 해결하라

13장 회의론자를 위한 안내서

• 사용성이란 분야에 대해 먼저 알아야 한다
• 흔한 조언
• 만약 내가 여러분이라면…
• 어둠의 세력에 저항하라
• 몇 가지 확실한 대답

감사의 글