📑 A. 들어가기 — 목업 v4 (논증 + 설명 산문)

v3의 논증 척추·교안 밀도에 더해, 풀어 쓴 설명 산문을 슬라이드마다 넣었습니다. 불릿이 아니라 강사가 읽고 그대로 말할 수 있는 문장 단위 해설입니다. 텍스트가 잘리지 않도록 슬라이드 높이는 가변(최소 16:9)으로 두었습니다.

이 장이 던지는 질문
디자인이 잘됐는지, 우리는 무엇으로 알아보는가?  →  주장: 좋은 디자인은 '안 보인다'. 그래서 디자인은 꾸미기가 아니라 '헤맴을 없애는 일'이다.
A
UX/UI 디자인 · 보는 눈, 만드는 손
CHAPTER A

들어가기

디자인을 보는 눈을 켜다  ·  A1 디자인은 꾸미기가 아니다 / A2 내 폰 속 디자인 찾기
이 장은 단 하나의 질문에서 출발한다 — "디자인이 잘됐는지 어떻게 알아보는가?" 우리는 흔히 '예쁘면 잘된 것'이라 답하지만, 이 장은 그 답을 6단계로 뒤집는다(통념→주장→왜→실패→반론→결론). 그리고 좋은 디자인을 알아보는 눈을 직접 기르는 법(관찰·언어화)으로 장을 닫는다.
A. 들어가기
01 / 13
A · 이 장의 지도
전체 구성 — 시작 전에 길을 펼친다

하나의 질문을, 여섯 단계로 답한다

이 장은 흩어진 이론을 나열한 게 아니라 한 질문을 끝까지 따라가는 하나의 논증이다. 본론에 들어가기 전, 우리가 지나갈 전체 길을 먼저 펼쳐 둔다. 윗줄(A1)은 '디자인이란 무엇인가'를 6단계로 논증하고, 아랫줄(A2)은 그렇게 정의한 좋은 디자인을 알아보는 눈을 기르는 법으로 잇는다.

A1 · 디자인이란 무엇인가 — 6단계 논증  (p3–p8)
① 통념
"예쁨 = 디자인?"
p3 · 노먼의 문
② 주장
좋은 디자인은 안 보인다
p4 · UX vs UI
③ 왜
모양이 곧 사용법
p5 · 어포던스
④ 실패
헤매는 두 순간
p6 · 두 간극
⑤ 반론
예쁨도 힘이 세다
p7 · 심미효과
⑥ 결론
경험엔 순서가 있다
p8 · 허니콤
A2 · 그 눈을 기르는 법  (p9–p11)  +  정리·출처
다리
보는 법을 배운다 (4렌즈)
p9 · 패턴 인식
근거
표준은 '다른 앱'
p10 · 야콥의 법칙
기술
본 것을 언어로
p11 · 관찰 메모
정리
한 줄의 논증으로 회수
p12 · 요약 / p13 출처
→ 자, 출발먼저 가장 흔한 통념부터 깬다 — "우리는 정말 무엇을 디자인이라 부르고 있나?"
A. 들어가기
02 / 13
A · 논증 1단계
① 통념② 주장③ 왜④ 실패⑤ 반론⑥ 결론
통념 깨기

우리는 '예쁜 것'을 디자인이라 부른다

학생들에게 "디자인이 뭐냐"고 물으면 거의 예외 없이 색·꾸밈·화려함으로 답한다. 디자인을 일종의 '꾸미기(decoration)', 즉 다 만들어진 것 위에 예쁜 옷을 입히는 마무리 작업쯤으로 여기는 것이다. 이 통념을 깨는 데서 이 강의가 시작된다.

🗣️ 교실에서 자주 나오는 말

  • "디자인? 색 예쁘게 칠하는 거요."
  • "포토샵 잘 다루면 디자이너죠."
  • "화려할수록 잘한 디자인 아닌가요?"

🚪 그런데 — '노먼의 문'

손잡이가 당기게 생겼는데 실제로는 미는 문. 사람들이 매일 헷갈리다 결국 '미시오' 스티커를 붙인다. 그 스티커는 친절이 아니라 디자인이 진 자리에 붙는 변명이다 — 아무리 예뻐도 못 열면 실패다.

🔎 한 걸음 더 '디자인(design)'의 어원은 라틴어 de+signare(계획하다·기호로 나타내다)다. 애초에 디자인은 '꾸미기'가 아니라 '의도를 가지고 설계하기'를 뜻했다. 꾸미기(decoration)와는 출발부터 다른 말인 셈이다.
→ 그래서'예쁨'은 디자인의 판단 기준이 될 수 없다. 우리는 질문을 바꿔야 한다 — 디자인이 *잘됐는지*를 대체 무엇으로 판단하는가?
A. 들어가기
03 / 13
A · 논증 2단계
① 통념② 주장③ 왜④ 실패⑤ 반론⑥ 결론
이 장의 주장

좋은 디자인은 안 보인다

이 강의가 증명하려는 한 문장은 이것이다 — 좋은 디자인은 의식되지 않는다. 우리가 화면을 보며 "예쁘다"라고 감탄하는 부분(UI)은 빙산의 일각일 뿐이고, 정작 그 앱의 성패는 눈에 보이지 않는 경험의 흐름(UX)에서 갈린다. 표면이 예쁜지보다, 사용자가 헤매지 않고 원하는 일을 해냈는지가 디자인의 진짜 성적표다.

🎨 UI — 보이는 표면 (감탄의 대상)

버튼·색·글씨·아이콘·간격처럼 눈에 띄고 손에 닿는 모든 것. "예쁘다"는 평가는 거의 여기서 나온다. 토스의 파란 버튼과 둥근 모서리가 UI다.

🧭 UX — 안 보이는 경험 (성패의 대상)

송금까지 몇 번을 누르는지, 실수해도 되돌릴 수 있는지, 다 쓰고 난 기분이 어떤지 같은 여정 전체의 느낌. 눈에 안 보이지만 만족을 좌우한다.

🔎 한 걸음 더 'UX(User Experience)'라는 말은 도널드 노먼이 1990년대 애플에서 자기 직함("User Experience Architect")으로 처음 쓰며 퍼졌다. 화면 하나가 아니라 경험 전체를 설계 대상으로 삼겠다는 선언이었다. 즉 UI는 UX를 이루는 한 부분이지, 같은 말이 아니다.
→ 그래서사용자가 줄 수 있는 최고의 칭찬은 "디자인 좋다"가 아니라 "그냥 편했다"이다. 그렇다면 *어떻게* 디자인을 안 보이게 만들 수 있는가?
A. 들어가기
04 / 13
A · 논증 3단계 · 근거: 도널드 노먼
① 통념② 주장③ 왜④ 실패⑤ 반론⑥ 결론
메커니즘 — 왜 안 보이는가

모양이 곧 사용법이면, 디자인은 사라진다

디자인이 '안 보이는' 비결은 단순하다. 모양 자체가 사용법을 설명하면, 사용자는 따로 '생각'하거나 '배울' 필요가 없어진다. 노먼은 이를 두 개념으로 나눠 설명했다 — 무엇이 가능한지를 정하는 어포던스, 그것을 어떻게 알리는지를 맡는 시그니파이어.

어포던스 Affordance · 행위 가능성

사물이 할 수 있게 해주는 것. 버튼은 '누르기'를, 의자는 '앉기'를, 손잡이는 '쥐기'를 어포드한다. 사물의 물리적 성질이 가능한 행동을 규정한다.

시그니파이어 Signifier · 행위 단서

그 행위가 가능하다고 알리는 신호. 둥근 손잡이는 당기기를, 평평한 판은 밀기를, 밑줄 친 파란 글씨는 누르기를 알려준다.

🔎 화면 속 시그니파이어 디지털에서는 버튼의 그림자·입체감(눌린다), 링크의 밑줄·파란색, 스크롤바(더 있다), 토글의 위치(켜짐/꺼짐)가 단서다. 그래서 '평면 디자인(flat design)'이 이 단서를 모두 지우면 "이게 버튼이야 그냥 글씨야?"라는 혼란이 생긴다 — 시그니파이어가 사라진 대가다.
🎓 교실에서 노먼의 문 사진 2장을 띄우고 "스티커 없이, 모양만으로 고치려면 손잡이를 어떻게 바꿀까?"를 짝 토론 3분(당기는 문엔 손잡이, 미는 문엔 평판).
→ 그래서모양이 스스로 설명하면 디자인은 의식에서 사라진다. 그럼 반대로, 디자인이 실패해서 '보이는' 순간은 정확히 언제인가?
A. 들어가기
05 / 13
A · 논증 4단계 · 근거: 노먼의 7단계 행위 모형
① 통념② 주장③ 왜④ 실패⑤ 반론⑥ 결론
실패의 정의 — '보이는' 순간 = 헤매는 순간

나쁜 디자인은 딱 두 곳에서 튀어나온다

사용자가 "이 앱 짜증나"라고 말할 때, 그 짜증은 막연한 게 아니라 정확히 두 지점 중 하나에서 생긴다. 노먼은 사람이 무언가를 할 때 '목표→실행→결과 확인'의 과정을 거친다고 봤고, 디자인이 무너지는 두 틈을 이렇게 이름 붙였다.

① 실행의 간극 하려는 것 ↔ 할 수 있는 것

내가 하려는 행동과 시스템이 허용하는 행동 사이의 거리. "하고 싶은데 어떻게 하는지 모르겠다."

  • "결제하고 싶은데… 버튼이 어디 있지?"
  • "이거 어떻게 시작하는 거야?"

명확한 시그니파이어로 좁힌다.

② 평가의 간극 시스템이 한 일 ↔ 내가 아는 것

시스템이 한 일을 내가 알아채는 정도. "했는데 됐는지 안 됐는지 모르겠다."

  • "눌렀는데… 된 건가 안 된 건가?"
  • "로딩 중이야, 멈춘 거야?"

즉각 피드백으로 좁힌다.

🔎 7단계 행위 모형 목표→계획→구체화→실행 (앞 절반 = 실행의 간극) ··· 지각→해석→비교 (뒤 절반 = 평가의 간극). 결국 '헤맴'이란 매끄럽던 디자인이 표면을 뚫고 의식 위로 튀어나온 순간이며, 이는 좋은 디자인(=안 보임)의 정확한 반대말이다.
🎓 교실에서 "최근 앱에서 헤맸던 경험"을 칠판 두 칸(실행의 간극 / 평가의 간극)에 분류시키면, 막연한 불만이 구체적 진단으로 바뀐다 — 이게 디자이너의 사고법이다.
→ 그런데여기서 단골 반론이 나온다. "그래도 화면이 예쁘면 좀 봐주게 되지 않나요?"
A. 들어가기
06 / 13
A · 논증 5단계 · 근거: Kurosu & Kashimura (1995)
① 통념② 주장③ 왜④ 실패⑤ 반론⑥ 결론
반론 처리 — "예쁨은 정말 의미 없나?"

예쁨은 힘이 세다 — 단, 토대를 대신하진 못한다

"예쁨이 그렇게 안 중요하냐"는 반론은 절반은 맞다. 실제로 예쁨은 사용성에 대한 인식을 바꿀 만큼 강력하다. 이를 보여준 유명한 연구가 있다.

252
명에게 ATM 화면 26종 평가
히타치 디자인센터 1995
· 트랙틴스키 1997 이스라엘 재현(문화 무관)

참가자가 느낀 '쓰기 쉬움'은 실제 사용성보다 화면의 아름다움과 더 강하게 연관됐다. 즉 사람은 예쁜 것을 더 잘 작동한다고 믿는다(심미적 사용성 효과). 그래서 예쁜 디자인은 ① 첫인상이 좋고 ② 작은 불편에 더 너그러워지며 ③ 전문성·신뢰로 읽힌다.

⚠️ 하지만 결정적 단서가 있다 — 예쁨은 사소한 흠은 덮어주지만 치명적 결함은 못 덮는다. 결제가 안 되는 앱은 아무리 예뻐도 결국 버려진다. 형태와 기능은 함께 가야 한다.
→ 따라서반론은 절반만 맞다. 예쁨에도 분명한 자리가 있다 — 단, 맨 앞이 아니라 토대 위에. 그리고 그 '자리'에는 순서가 있다.
A. 들어가기
07 / 13
A · 논증 6단계 · 근거: 피터 모빌 UX 허니콤(2004)
① 통념② 주장③ 왜④ 실패⑤ 반론⑥ 결론
결론 — 좋은 경험엔 '순서'가 있다

그래서 '예쁨(매력)'은 마지막 관문이다

지금까지의 논증을 한 그림으로 정리한 것이 피터 모빌의 UX 허니콤(2004)이다. 좋은 경험은 일곱 개의 면으로 이루어지는데, 중요한 건 그 사이에 순서가 있다는 점이다. 매력(예쁨)은 일곱 중 하나일 뿐 아니라, 토대가 선 다음에야 의미를 갖는 마지막 관문이다.

순서면 (모빌의 7면)통과 질문
1Useful 유용애초에 내 문제를 푸는가?
2Usable 사용헤매지 않는가? (= 두 간극이 좁은가)
3·4·5Findable · Accessible · Credible금방 찾히고 · 누구나 쓰고 · 믿을 만한가?
6Valuable 가치쓰는 쪽·만든 쪽 모두에게 득인가?
Desirable 매력(예쁨)← 토대가 선 다음에 얹는다
🔎 한 걸음 더 허니콤은 정보구조(IA) 분야 선구자 모빌이 2004년 제안했다. 다른 모델과 달리 Valuable(비즈니스 가치)까지 포함한 것이 특징으로, "사용자에게도 만든 쪽에도 득이 되어야 그 서비스가 지속된다"는 통찰을 담는다.
🎯 그래서 당신은 화면을 만들 때 이 순서대로 물어라 — "유용한가 → 헤맴 없는가"를 통과한 뒤에야 "예쁜가"를 묻는다.
A. 들어가기
08 / 13
A2 · 관찰의 시작
다리근거기술— A1의 결론에서 출발
A1 → A2 다리

안 보이는 디자인은, 보는 법을 배워야 보인다

A1은 "좋은 디자인은 안 보인다"로 끝났다. 그런데 여기서 역설이 생긴다 — 안 보이는 것을 배우려는 사람은 그것을 의식적으로 보는 법부터 익혀야 한다. 그냥 쓰기만 하면 평생 안 보인다. 감독이 영화를 볼 때 줄거리가 아니라 카메라·조명·편집을 보듯, 디자이너는 화면에서 네 개의 렌즈로 숨은 규칙을 읽는다. 이건 재능이 아니라 훈련된 패턴 인식이다.

🎨 색

몇 개 썼나?
보통 3개 이내

🔤 글자

크기·굵기 단계?
2~3단계

📏 간격

여유로운가?
8의 배수

📐 정렬

줄이 맞나?
기준선 하나

🔎 한 걸음 더 인지심리학에서 전문성(expertise)의 핵심은 패턴 인식이다. 체스 고수가 판을 한눈에 읽듯, 디자이너는 화면을 '색 규칙 + 글자 규칙 + 간격 규칙'의 묶음으로 읽는다. 이 4렌즈는 B(구조)·C(시각) 장 전체의 예고편 — 지금 발견하고, 뒷장에서 원리로 배운다.
→ 그런데그럼 무엇을 보고 배워야 하나? 아무 앱이나 보면 되는가? 여기엔 분명한 기준이 있다.
A. 들어가기
09 / 13
A2 · 근거: 야콥 닐슨
다리근거기술
왜 '잘 만든 앱'을 보나

당신이 따라야 할 표준은, 당신 앱이 아니다

관찰의 대상을 정해주는 원칙이 야콥의 법칙이다. 사용자는 우리 앱만 쓰는 게 아니라 대부분의 시간을 다른 수많은 앱에서 보낸다. 그래서 우리 앱에 처음 들어와도 "여기도 그 앱들처럼 작동하겠지"라고 기대한다. 사용자의 '표준'은 우리가 아니라 세상이 만든다는 뜻이다.

"사용자는 자기 시간 대부분을 다른 앱에서 보낸다. 그래서 당신 앱도 이미 아는 다른 앱들처럼 작동하길 기대한다."— 야콥의 법칙(Jakob's Law), 야콥 닐슨 · Nielsen Norman Group 공동설립자

그래서 관찰은 '베끼기'가 아니다

잘 만든 앱을 관찰하는 건 디자인을 훔치는 게 아니라, 사용자가 이미 학습한 공통 언어를 익히는 일이다. 그 언어를 알아야 사용자를 헤매게 하지 않는다.

이미 굳은 '공통 언어' 예

  • 장바구니 = 🛒 아이콘
  • 핵심 메뉴 = 하단 탭 4~5개
  • 설정·더보기 = ☰ / 우측 상단
  • 당겨서 새로고침
🔎 한 걸음 더 물론 관습을 수도 있다 — 단, 깨려면 그만한 이득이 있어야 한다. 뚜렷한 이유 없이 혼자 다르게 만들면 사용자는 "왜 이것만 이래?"라며 헤맨다(= 스스로 실행의 간극을 만드는 셈).
→ 그래서관찰의 대상이 정해졌다(잘 만든 앱들). 그럼 본 것을 어떻게 내 것으로 만드는가?
A. 들어가기
10 / 13
A2 · 핵심 기술
다리근거기술
관찰을 자산으로 — 언어화

말로 옮기지 못한 관찰은, 본 게 아니다

관찰에는 함정이 있다. 대부분의 사람은 "예쁘다 / 별로다"로 끝낸다. 그런데 이유가 없는 감상은 다음에 써먹을 수 없다. 게다가 앞서 본 심미적 사용성 효과 때문에, 예쁨은 종종 우리 눈을 속여 진짜 문제를 못 보게 한다. 그래서 디자이너는 본 것을 반드시 언어로 옮긴다 — 언어화되지 않은 관찰은 그대로 증발한다.

❌ 증발하는 관찰

"카톡 예쁘다."

이유가 없으니 내 디자인으로 옮길 수 없다.

✅ 자산이 되는 관찰

"카톡은 노랑 1+회색조로 색을 절제하고, 채팅 글씨는 1단계, 시간은 작고 연하게 처리해 정보 위계를 만들었다."

📝 관찰 메모 4줄 템플릿 : 몇 개·주조색은? / 글자: 단계 몇 개·굵기로 위계? / 간격: 빽빽/여유·규칙적인가? / 정렬: 기준선이 하나로 맞나? — 각 칸에 '무엇을 + 왜'를 한 줄씩 적는다.
🎓 교실에서 design-sense 분석 탭에 좋아하는 앱 1장을 올려 AI 추출 결과와 내 눈대중을 비교한 뒤 위 4줄 메모를 쓴다. 이때 뽑은 색은 나중에 내디자인 탭에서 내 팔레트의 출발점(seed)이 된다.
🎯 그래서 당신은 관찰을 항상 '무엇을 + 왜' 한 문장으로 적는다. '왜'가 빠지면 그건 관찰이 아니라 감상이다.
A. 들어가기
11 / 13
A · 정리
A장이 증명한 것 — 한 줄의 논증

예쁨에서 출발해, '안 보임'에 도착했다

이 장은 흩어진 이론을 모은 게 아니라, 하나의 질문을 끝까지 따라간 추론이었다. 출발점은 "디자인=예쁨"이라는 통념이었고, 도착점은 "좋은 디자인은 안 보인다"는 주장이었다. 그 사이를 노먼·모빌·닐슨·심미효과 연구가 각자의 역할로 이어주었다.

통념우리는 예쁜 걸 디자인이라 부른다 (꾸미기)
↓ 그런데
주장좋은 디자인은 안 보인다 — UX(경험)가 먼저, UI(표면)는 그 위
↓ 왜냐면
모양이 곧 사용법이면(어포던스·시그니파이어) 의식에서 사라지니까
↓ 그래서 실패는
실패사람이 헤매는 두 순간(실행·평가의 간극)에 디자인이 '보인다'
↓ 하지만
반론예쁨도 힘이 있다 — 단 사소한 흠만 덮지, 토대는 못 대신한다
↓ 따라서
결론좋은 경험엔 순서가 있다 (유용→사용→…→매력). 그 눈은 관찰 + 언어화로 기른다(A2)
🎯 한 문장 요약 디자인은 꾸미기가 아니라 '헤맴을 없애 안 보이게 만드는 일'이며, 그 눈은 관찰을 언어로 옮길 때 자란다.
A. 들어가기
12 / 13
더 읽을거리 · 검증된 1차 자료

근거가 된 자료 & 다음 장

  • 노먼, 『디자인과 인간심리(The Design of Everyday Things)』 개정판(2013) — 어포던스·시그니파이어·실행/평가의 간극 · ③④단계 근거
  • 모빌, UX 허니콤(2004) — 좋은 경험의 7면(Valuable 포함) · ⑥ 결론 근거
  • NN/g, 심미적 사용성 효과 — 구로스·가시무라(1995) ATM 연구, 트랙틴스키(1997) 재현 · ⑤ 반론 근거
  • 닐슨, 야콥의 법칙 — lawsofux.com/jakobs-law · A2 근거
다음 장 — B. 구조 · A장에서 발견한 네 렌즈(색·글자·간격·정렬) 중 '간격·정렬·위계'를 이제 원리로 배운다: 시각적 계층 · 그리드 · 네비게이션.
A. 들어가기
13 / 13