모바일 앱 사용성

"생각하게 하지 마" 원칙은 모바일에서도 그대로 적용되지만, 모바일만의 제약 때문에 지키기가 더 어려워. 이 책 초판이 2000년에 나왔을 때는 모바일 웹이라는 게 거의 없었는데, 3판(2014년)에서 추가된 이 챕터가 스마트폰 시대의 사용성을 다뤄.

모바일이 데스크톱과 다른 점:

• 화면이 작아 — 한 번에 보여줄 수 있는 게 적지. 데스크톱에서는 한눈에 보이던 것들이 모바일에서는 스크롤해야 보여
• 손가락으로 조작해 — 마우스보다 정밀도가 떨어지거든. 터치 타겟이 작으면 잘못 누르게 돼
• 이동 중에 써 — 집중이 분산된 상태야. 지하철, 걸어가면서, 대화 중에. 데스크톱보다 인지 자원이 부족하지
• 연결이 불안정해 — 로딩이 느리면 더 빨리 이탈해

이런 제약 때문에 모바일에서는 **"생각하게 하지 마"**가 더 중요해져. 화면은 작고, 손가락은 굵고, 사용자는 산만하니까.

모바일 디자인의 핵심 질문: 데스크톱에 있는 것들을 모바일에 다 넣을 수 없으니, 뭘 빼야 하는가?

크룩이 정리하는 접근법들:

• 관리 — 같은 콘텐츠를 더 작은 화면에 재배치. 내용은 줄이지 않고 레이아웃만 변경. 반응형 디자인이 여기 해당돼
• 축소 — 덜 중요한 걸 빼거나 숨겨. 모바일에서는 핵심 기능만 노출하고 나머지는 메뉴 안에
• 우선순위 조정 — 모바일에서 더 자주 쓰는 기능을 더 접근하기 쉽게

크룩은 "모바일 사이트에서는 기능을 줄여야 한다"는 흔한 조언에 약간 저항감을 보여. 왜냐면 모바일 사용자도 데스크톱 사용자와 같은 일을 하고 싶어하기 때문이지. "이건 모바일에서 할 필요 없지"라는 판단은 위험해. 사용자가 정말로 안 하는지 데이터로 확인하기 전까지는.

그래서 크룩의 조언은 — 빼기보다는 우선순위를 잘 잡아라. 자주 쓰는 건 바로 보이게, 가끔 쓰는 건 한두 번 탭해서 접근 가능하게, 거의 안 쓰는 건 깊이 숨겨도 돼.

**어포던스(affordance)**는 물건의 물리적 특성이 "이걸 어떻게 쓰는지"를 암시하는 거야. 문 손잡이의 모양이 "당기세요" 또는 "미세요"를 알려주는 것처럼.

도널드 노먼이 정리한 개념인데, 크룩은 이걸 디지털 인터페이스에 적용해. 화면의 버튼이 약간 볼록하게 보이면 "누를 수 있다"는 느낌을 주잖아. 이게 어포던스야.

**시그니파이어(signifier)**는 어포던스를 명시적으로 전달하는 시각적 단서지. 밑줄이 그어진 텍스트가 "이건 링크다"라고 알려주는 거.

모바일에서 이게 왜 중요하냐면 — 터치스크린에서는 물리적 어포던스가 없거든. 유리판 위에 그림이 있을 뿐이야. 그래서 시각적 단서가 더 중요해져. 이게 버튼인지 그냥 텍스트인지, 스와이프할 수 있는지 없는지, 당겨서 새로고침이 되는지 안 되는지 — 이런 걸 시각적으로 알려줘야 해.

데스크톱에서 당연하게 쓰던 호버(hover) — 마우스를 올리면 뭔가 반응하는 것 — 가 터치 디바이스에서는 없어. 손가락을 화면 위에 떠 있게 할 수 없으니까.

호버가 없어서 생기는 문제:

• 툴팁 — 마우스 올리면 나오는 추가 설명. 터치에서는 불가능하지. 그래서 설명이 필요하면 다른 방법으로 제공해야 해
• 호버 상태 — "마우스 올리면 색이 바뀌는" 효과가 없으니, 클릭 가능 여부를 다른 시각적 단서로 알려줘야 해
• 드롭다운 메뉴 — 마우스 올리면 펼쳐지는 메뉴. 터치에서는 탭해야 열리거든. 이 차이를 고려해서 설계해야 해

크룩의 메시지: 호버에 의존하는 디자인은 모바일에서 깨져. 호버 없이도 모든 정보가 접근 가능하도록 만들어야 해. 이건 **"점진적 향상(progressive enhancement)"**의 기본이기도 하지.

**플랫 디자인(flat design)**은 iOS 7 이후 대세가 된 디자인 트렌드야. 그림자, 그라데이션, 입체감을 빼고 평평하게 디자인하는 거지. 깔끔하고 모던해 보이지만, 크룩은 사용성 측면에서 문제를 지적해.

플랫 디자인의 사용성 문제:

• 클릭 가능 여부가 불분명해 — 버튼에 입체감이 없으면, 그게 버튼인지 장식인지 구분이 안 되잖아. "이거 누를 수 있는 거야?"를 고민하게 만들지
• 시각적 계층구조가 약해져 — 그림자와 입체감은 "이건 위에 떠 있는 거", "이건 배경"이라는 깊이감을 줬는데, 플랫하면 다 같은 레벨로 보여
• 어포던스의 상실 — 위에서 말한 어포던스 문제야. 볼록한 버튼은 "눌러라"고 말하는데, 평평한 사각형은 아무 말도 안 하거든

크룩은 플랫 디자인 자체를 반대하는 건 아니야. 다만 **"예쁨을 위해 사용성을 희생하면 안 된다"**는 거지. 플랫하게 만들되, 클릭 가능한 요소는 여전히 명확하게 구분되어야 해. 약간의 그림자, 색 차이, 테두리 — 이 정도만으로도 충분히 어포던스를 제공할 수 있어.

결국 모바일에서도 원칙은 같아:

• 생각하게 하지 마 — 화면이 작아서 더 중요해
• 훑어보기 좋게 만들어라 — 공간이 제한적이니 더 압축적으로
• 클릭 가능한 건 명확하게 — 어포던스 없는 터치스크린이니 시각적 단서가 더 중요하지
• 불필요한 단어를 빼라 — 모바일에서 긴 텍스트는 더 안 읽혀

크룩은 모바일을 위한 별도의 사용성 법칙을 만들지 않아. 왜냐면 기본 원칙이 동일하기 때문이지. 다만 모바일의 제약(작은 화면, 터치, 산만한 맥락) 때문에 원칙을 더 철저하게 지켜야 한다는 거야.

---

정리

10장 읽고 기억할 거:

1. 모바일은 제약이 더 많아서 "생각하게 하지 마" 원칙이 더 중요해. 작은 화면, 굵은 손가락, 산만한 환경
2. 호버가 없다는 걸 잊지 마. 호버에 의존하는 디자인은 모바일에서 깨져
3. 플랫 디자인의 함정을 조심해. 예쁨 때문에 "이거 버튼이야?" 고민하게 만들면 본말전도야
4. 기능을 함부로 빼지 마. 빼는 것보다 우선순위를 잘 잡는 게 답이야