UI/UX
한 장 교과서.

UI와 UX는 다르다

UI(User Interface)는 접점이에요 — 버튼, 글자, 색, 간격처럼 눈에 보이고 손에 닿는 것들. UX(User Experience)는 여정 전체예요 — 어떤 목적으로 들어와서, 헤맸는지, 해냈는지, 다시 오고 싶은지까지. UI는 UX의 부분집합이고, 화면이 예쁜데 경험이 나쁜 제품은 얼마든지 있어요.

식당으로 치면 UI는 그릇과 플레이팅, UX는 예약부터 계산까지의 저녁 전체예요. 그릇이 아무리 고와도 주문이 40분 걸리면 나쁜 저녁이죠. 반대로 그릇이 평범해도 "다시 오고 싶다"면 그건 좋은 UX예요.

• 예쁜데 못 쓰는 것 — UI는 좋고 UX는 나쁨 (수상하는 포트폴리오 사이트에서 자주 봐요)
• 못생겼는데 잘 쓰는 것 — UI는 낡고 UX는 좋음 (오래된 관공서 조회 화면 중에 의외로 있어요)
• 우리가 노릴 것 — 둘 다. 순서는 UX 먼저, UI 나중이에요. 여정이 틀리면 화장이 소용없어요.

사용자는 읽지 않는다

눈동자 추적 연구가 수십 년째 같은 걸 보여줘요 — 사람들은 웹페이지를 읽지 않고 훑어요. 왼쪽 위에서 시작해 F자 모양으로 첫 줄 몇 개만 가로로 읽고, 나머지는 세로로 스캔하며 걸리는 단어만 주워요. 첫 방문에서 페이지의 20~28% 정도만 읽는다는 추정이 유명하고요.

그러니 "이렇게 썼는데 왜 못 봤지?"는 틀린 질문이에요. 못 본 게 기본값이에요. 보게 만드는 게 설계고요.

• 앞에 실어요. 문장의 첫 두 단어, 문단의 첫 문장, 목록의 첫 항목이 제일 많이 읽혀요.
• 제목이 일해야 해요. 제목만 이어 읽어도 내용이 통해야 해요 — 지금 이 페이지의 목차처럼요.
• 덩어리를 쪼개요. 다섯 줄 넘는 문단은 훑는 눈에 벽으로 보여요.
• 굵게는 걸리라고 쓰는 거예요. 문단마다 한두 곳이면 충분하고, 다 굵으면 아무것도 안 굵은 거예요.

위계 — 중요한 것부터 보이게

시각 위계는 "무엇을 먼저 볼지"를 디자이너가 정해 주는 일이에요. 도구는 넷 — 크기, 굵기, 색, 위치. 이 넷을 안 쓰면 사용자가 스스로 중요도를 추리해야 하고, 대부분은 추리하는 대신 떠나요.

아래 카드로 직접 확인해 보세요. 내용은 한 글자도 안 바뀌어요 — 위계만 껐다 켜요.

위계를 끄는 순간 눈이 어디로 가야 할지 몰라 헤매는 게 느껴질 거예요. 정보는 같은데 전달이 죽는 거죠. 반대로 전부 크게·전부 민트로 강조하면? 위계는 상대적인 거라, 전부 강조는 강조 없음과 같아요.

여백은 낭비가 아니라 문법이다

초보의 화면은 요소가 많아서가 아니라 간격이 균일해서 어지러워요. 여백은 두 가지 일을 해요 — ① 관련 있는 것을 붙여서 덩어리를 만들고(근접성), ② 덩어리 사이를 벌려서 단락을 만들어요. "안쪽 여백 < 바깥 여백" — 이 부등식 하나가 여백 문법의 절반이에요.

간격을 균일하게 트는 순간, "이메일" 라벨이 위 칸 것인지 아래 칸 것인지 헷갈리기 시작해요. 선이나 박스를 안 그려도 여백만으로 소속을 말할 수 있어요. 그게 더 조용하고 더 세련된 방법이에요.

• 여백이 아까우면 이렇게 생각해요 — 여백은 "아무것도 없음"이 아니라 강조에 쓰는 예산이에요.
• 답답한 화면의 처방은 대개 "요소 빼기"가 아니라 "덩어리 사이 여백 두 배"예요.

타이포그래피 — 화면 글의 8할

웹 화면의 대부분은 결국 글자예요. 그래서 타이포만 바로잡아도 화면의 8할이 좋아져요. 외울 숫자는 몇 개 안 돼요.

한글은 라틴보다 글자 폭이 넓고 네모틀이라, 같은 픽셀에서 더 빽빽해 보여요. 그래서 한글 본문은 행간을 후하게(1.7 안팎) 주는 게 안전해요. 지금 읽는 이 본문이 1.75예요.

색 — 예쁨보다 역할

색은 감각이 아니라 배역부터 정해요. ① 바탕과 글(무채색 계열), ② 브랜드색 하나 (이 사이트의 민트), ③ 의미색(성공·경고·위험). 흔한 배분은 60:30:10 — 바탕 60, 보조 30, 강조 10이에요. 강조색이 화면의 10%를 넘으면 더는 강조가 아니에요.

그리고 취향보다 먼저 대비가 있어요. 글자와 바탕의 명도 대비가 4.5:1(작은 글자 기준)을 넘어야 읽는 데 무리가 없다는 게 WCAG 접근성 기준이에요. 큰 글자(굵은 19px+ 또는 24px+)는 3:1까지 봐줘요.

• 색만으로 정보를 전하지 않아요 — 색약인 분께는 빨강·초록이 같은 회색이에요. 아이콘·문구를 겸해요.
• 다크 모드는 반전이 아니라 재설계예요 — 순백(#fff) 글자는 다크에서 눈을 찔러요. 이 페이지도 #ededed를 써요.
• 의미색은 브랜드색과 겹치지 않게 — 성공(초록)과 브랜드(민트)가 닮은 우리 사이트에선 성공 배지에 문구를 꼭 붙여요.

정렬 — 보이지 않는 선

잘 만든 화면에는 눈에 안 보이는 세로선 몇 개가 있고, 모든 요소가 그중 하나에 딱 붙어 있어요. 2px 어긋난 정렬은 의식으로는 못 집어내도 "어딘가 엉성하다"는 인상으로 남아요. 신뢰는 이런 데서 새요 — 특히 돈 내는 화면에서요.

• 왼끝 정렬이 기본이에요. 가운데 정렬은 짧은 제목·인용에만 쓰고, 여러 줄 본문에 쓰면 눈이 매번 줄 시작점을 찾아야 해요.
• 8의 배수(8·16·24·32…)로 간격을 통일하면 판단이 빨라지고 화면이 저절로 정돈돼요.
• 숫자 표는 오른끝 정렬 + 고정폭 숫자(tabular-nums)로 — 자릿수가 맞아야 비교가 돼요.

게슈탈트 — 뇌는 묶어서 본다

사람 뇌는 낱개를 보기 전에 무리부터 지어요. 이걸 정리한 게 게슈탈트 원리고, 화면 설계에서 매일 쓰는 건 넷이에요.

• 근접성 — 가까우면 한패로 보여요. (4강의 여백 데모가 이거예요)
• 유사성 — 닮으면 한패로 보여요. 같은 역할은 같은 모양이어야 하는 이유죠. 모든 링크가 민트인 이 사이트에서 민트 글자는 "누를 수 있음"으로 읽혀요.
• 연속성 — 눈은 선을 따라가요. 목록·타임라인이 힘이 센 이유예요.
• 폐쇄성 — 뇌는 빈칸을 메워요. 화면 끝에 반쯤 걸친 카드는 "옆으로 더 있음"을 말없이 알려요 (캐러셀에서 다음 카드를 살짝 보여주는 그 수법이에요).

거꾸로 쓰면 사고가 나요 — 관련 없는 것을 가까이 두거나, 다른 역할을 같은 모양으로 만들면 뇌가 지어낸 무리와 실제 구조가 어긋나서 "왜 이게 눌리지?"가 돼요.

어포던스 — 눌리는 건 눌리게 생겨야 한다

문 손잡이가 "당기세요"라고 말 안 해도 당기게 생긴 것 — 그게 어포던스예요. 화면에선 눌리는 것은 눌리게, 안 눌리는 것은 안 눌리게 생겨야 해요. 요즘 화면이 평평해지면서(플랫 디자인) 이 신호가 약해졌고, 그래서 더 의식적으로 챙겨야 해요.

• 인터랙티브 요소의 4상태를 다 그려요 — 기본 · hover · 누름(active) · 잠김(disabled). 키보드용 focus까지 다섯.
• 링크와 버튼을 구분해요 — 이동은 링크(밑줄·색), 행동은 버튼(면·형태). 섞이면 예측이 깨져요.
• 커서만 pointer로 바꾸는 건 어포던스가 아니라 변명이에요 — 모바일엔 커서가 없어요.

피드백 — 무응답이 최악이다

버튼을 눌렀는데 0.5초간 아무 일도 없으면 사람은 다시 눌러요. 그 두 번째 누름이 중복 결제를 만들고요. 모든 입력에는 즉각적인 반응이 있어야 해요 — 성공이든 실패든, 하다못해 "하는 중"이든.

• 0.1초 안의 반응은 '즉시'로 느껴요. 1초가 넘으면 진행 표시가 필요하고, 10초가 넘으면 자리를 떠나도 되게(백그라운드+알림) 설계해요.
• 스피너보다 스켈레톤(내용 자리 미리 그리기)이 체감이 좋아요 — 뭐가 올지 예고하니까요.
• 이 페이지 맨 위의 민트 실선도 피드백이에요 — 얼마나 읽었는지 스크롤이 답해 줘요.

인지 부하 — 선택지가 많으면 안 고른다

결정에 걸리는 시간은 선택지 수에 따라 늘어나요(힉의 법칙). 잼 24종을 늘어놓은 매대보다 6종 매대에서 구매가 훨씬 많았다는 실험이 유명하죠. 화면도 같아요 — 메뉴 12개짜리 내비게이션은 자유가 아니라 숙제예요.

• 기본값이 제일 힘센 UI예요. 대부분은 기본값대로 해요. 좋은 기본값을 고르는 게 설계의 절반이에요.
• 점진적 공개 — 다 보여주지 말고, 지금 필요한 것만. 고급 옵션은 "더 보기" 뒤로. (모바일 목차를 접어 둔 이 페이지처럼요.)
• 선택지를 못 줄이면 추천을 얹어요 — "가장 많이 골라요" 배지 하나가 결정 시간을 크게 줄여요.
• 양식(폼)은 한 화면에 한 주제만 — 긴 폼은 단계로 쪼개고 진행률을 보여줘요.

피츠의 법칙 — 크고 가까우면 빠르다

목표물에 닿는 시간은 멀수록, 작을수록 길어져요. 1954년 실험실에서 나온 법칙인데 70년째 모든 화면에 적용돼요. 실감해 보세요:

• 터치 목표는 최소 44×44px(애플)·48px(구글) — 손가락 지문 면적이 그 정도예요. 보이는 아이콘은 작아도 누르는 영역은 채워요(패딩으로).
• 자주 쓰는 행동일수록 크게, 엄지 닿는 곳에. 파괴적 행동(삭제)은 반대로 멀리·작게·한 번 더 묻기.
• 화면 모서리와 가장자리는 '무한히 큰' 목표예요 — 커서가 걸려 멈추니까요. OS 메뉴가 다 가장자리에 사는 이유예요.

야콥의 법칙 — 사용자는 남의 사이트에서 산다

사용자는 하루의 대부분을 다른 서비스에서 보내요. 그래서 그들이 아는 방식이 곧 그들이 기대하는 방식이에요. 로고는 왼쪽 위(누르면 홈), 장바구니는 오른쪽 위, 밑줄 글자는 링크 — 이 관습을 지키면 배움 없이 쓰고, 어기면 하나하나 가르쳐야 해요.

• 관습을 깨는 건 지불이에요 — 깨서 얻는 게 학습 비용보다 클 때만 깨요. 대부분은 안 커요.
• 혁신은 관습 위에서 해요 — 익숙한 뼈대에 새로운 살. 전부 새로우면 사용자는 길을 잃어요.
• 같은 이유로 내부 일관성도 법이에요 — 한 화면에서 '확인'이 오른쪽이면 끝까지 오른쪽.

모바일 — 엄지의 세계

트래픽의 절반 이상이 폰이에요. 폰의 조종간은 마우스가 아니라 엄지 하나고, 엄지가 편하게 닿는 곳은 화면 아래쪽 절반이에요. 위쪽 구석은 그립을 고쳐 쥐어야 닿는 오지고요.

• 핵심 행동은 아래에 — 주요 앱들의 탭바가 다 바닥에 붙은 이유예요. 위쪽엔 읽을 것, 아래쪽엔 누를 것.
• 가로 스크롤은 사고예요 — 요소 하나가 삐져나오면 페이지 전체가 흔들려요. 우리는 이걸로 40군데를 잡아낸 적이 있어요. overflow-x:hidden으로 덮으면 숨겨질 뿐 고쳐지지 않아요.
• 입력은 최소로 — 폰 타이핑은 고역이에요. 선택지·자동완성·적절한 키보드 타입(inputmode)으로 대신해요.
• 호버는 없어요 — 호버에만 숨긴 정보는 모바일에서 존재하지 않는 정보예요.

접근성 — 모두를 위한 설계가 제일 좋은 설계다

접근성은 소수를 위한 부가 기능이 아니에요. 자막은 청각장애인을 위해 태어나 지하철의 모두가 쓰고, 경사로는 휠체어를 위해 태어나 유모차와 캐리어가 써요. 장애는 상태가 아니라 상황이기도 해요 — 한 손에 아기를 안은 사람, 햇빛 아래의 화면, 시끄러운 카페.

• 키보드만으로 모든 걸 할 수 있어야 해요 — Tab으로 이동, Enter로 실행, 포커스가 눈에 보이게. (이 페이지에서 Tab을 눌러 보세요 — 민트 테두리가 따라다녀요.)
• 이미지엔 alt, 아이콘 버튼엔 aria-label — 스크린리더는 그것만 읽을 수 있어요.
• 대비 4.5:1(6강), 터치 44px(12강) — 접근성 기준은 대부분 그냥 좋은 디자인 기준이에요.
• 움직임 최소화 설정(prefers-reduced-motion)을 존중해요 — 애니메이션에 멀미하는 분들이 있어요. 이 페이지도 그 설정이면 조용해져요.
• HTML을 의미대로 써요 — 제목은 h1~h3, 누르면 button, 이동은 a. div로 다 만들면 보조기기에겐 백지예요.

마이크로카피 — 버튼은 동사다

화면의 짧은 글들 — 버튼, 라벨, 에러, 빈 화면 안내 — 이게 마이크로카피예요. 작지만 전환과 이탈을 가르는 건 대체로 이 작은 글들이에요.

• 버튼 두 개가 "예/아니오"면 질문을 다시 읽어야 해요 — 버튼 자체에 결과를 쓰면 안 읽어도 돼요.
• 사과·감탄사·기술 용어를 빼요. "죄송합니다, 500 에러입니다"는 사용자에게 아무 정보가 없어요.
• 시스템 아니라 사람의 말로 — 이 사이트가 전부 해요체인 것도 그 연장이에요.

상태 설계 — 화면은 다섯 벌이다

디자인 시안은 보통 데이터가 알맞게 찬 '이상적인 상태' 한 벌만 그려요. 실제 화면은 최소 다섯 벌이에요 — 이상적 · 빈 · 로딩 · 에러 · 부분(데이터가 이상하게 많거나 적음). 다섯 벌을 설계 안 하면 나머지 넷은 사고 현장에서 즉흥으로 태어나요.

• 빈 상태가 첫인상이에요 — 새 사용자는 전부 빈 화면부터 만나요. 안내+첫 행동 버튼을 꼭 넣어요.
• 에러 상태엔 출구를 — 재시도 버튼, 도움말, 문의 길. 막다른 골목을 만들지 마요.
• 극단값 시험 — 제목이 두 줄이면? 닉네임이 20자면? 가격이 ₩1,234,567이면? 깨지는 건 늘 극단값이에요.
• 목록이 셋 미만일 때와 백 개일 때의 화면은 다른 화면이에요 — 페이지네이션·접기·검색은 많아진 뒤가 아니라 설계 때 정해요.

전환 — 팔리게 하되 속이지 마라

파는 화면(랜딩·판매 페이지)의 문법은 따로 있어요. 원칙은 하나 — 행동은 하나만 요구하고, 그 행동의 마찰을 전부 치워요.

• CTA는 화면당 하나 — "구매·구독·공유·팔로우"를 다 시키면 아무것도 안 해요. 주인공 버튼 하나, 나머지는 조연(회색·작게).
• 불안을 먼저 치워요 — 가격 옆에 환불 조건, 결제 버튼 옆에 "즉시 다운로드". 사람은 사고 싶어도 불안하면 멈춰요. 목차 공개·맛보기 제공이 그 역할이에요.
• 사회적 증거 — 리뷰·판매 수·사용 화면. 없으면 만들 때까지 솔직하게 비워 둬요. 지어내는 순간 끝이에요.
• 다크 패턴 금지 — 몰래 체크된 구독, 찾기 힘든 해지, 가짜 카운트다운. 단기 전환을 사고 신뢰를 파는 짓이에요. 법으로도 점점 막히고 있고요.

디자인 시스템 — 한 번 정하고 재사용한다

화면마다 색과 간격을 새로 고민하면 느리고, 결과도 제각각이에요. 잘하는 팀은 토큰(색·글꼴·간격의 이름 붙은 값)과 컴포넌트(버튼·카드·입력칸)를 한 번 정하고 조립만 해요. 이 사이트도 그래요 — 잉크 바탕, 민트 강조, Pretendard, 라운드 카드, 알약 배지. 새 페이지는 이 문법을 따라 짓기만 하면 돼요.

• 시작은 거창할 것 없어요 — 색 6개, 간격 6단계, 글꼴 크기 5단계를 CSS 변수로 못 박는 것부터.
• 같은 역할 = 같은 모습 — 부품이 두 벌 생기는 순간(버튼 스타일 2종…) 시스템이 아니라 수집이에요.
• 남의 시스템을 훔쳐 배워요 — 큰 회사들이 디자인 시스템을 문서로 공개해요. 부품 이름 짓는 법부터 배울 게 많아요.

측정 — 감을 데이터로 바꾼다

"더 좋아진 것 같아요"는 감상이에요. UX는 측정할 수 있어요 — 과업 성공률(끝낸 사람 비율), 소요 시간, 이탈 지점(깔때기 어디서 새나), 재방문. 파는 화면이면 전환율(방문→구매)이 왕이고요.

• 깔때기를 그려요 — 유입 → 판매 페이지 도달 → 구매 버튼 클릭 → 결제 완료. 단계마다 몇 %가 남는지. 고칠 곳은 감이 아니라 제일 크게 새는 단계예요.
• 바꾸기 전 숫자를 적어 둬요 — 전후 비교가 안 되면 개선인지 개악인지 영영 몰라요.
• 한 번에 하나만 바꿔요 — 셋을 동시에 바꾸면 뭐가 효과였는지 알 수 없어요.
• 정량(숫자)과 정성(사용자의 말)을 겸해요 — 숫자는 '어디서'를, 관찰은 '왜'를 알려줘요.

프로세스 — 다섯 명이면 85%가 보인다

완성하고 보여주면 늦어요. 순서는 문제 정의 → 종이 스케치 → 프로토타입 → 사용자 테스트 → 만들기. 비싼 단계(코드)를 마지막으로 미루고, 싼 단계(종이)에서 실수를 다 쓰는 거예요.

• 사용성 테스트는 5명이면 큰 문제의 85%가 드러난다는 유명한 경험칙이 있어요(닐슨). 거창한 실험실 말고, 지인 다섯에게 "이걸로 ○○를 해 보세요" 하고 조용히 지켜보는 것으로 충분해요.
• 테스트에서 말하면 안 되는 것 — 조작법. 헤매는 그 지점이 바로 발견이에요. 도와주면 데이터를 버리는 거예요.
• 나는 사용자가 아니에요. 만든 사람은 모든 걸 알아서 아무것도 못 봐요. 그래서 남의 눈이 필수예요.
• 완벽한 첫 버전보다 고칠 수 있는 이른 버전 — 배포하고, 재고, 고치는 회전이 실력을 만들어요.

공부 지도 — 책 세 권과 매일 훈련

책 — 이 순서로 세 권

• 『도널드 노먼의 디자인과 인간 심리』(The Design of Everyday Things) — 어포던스·피드백·멘탈 모델의 원전. 문손잡이 얘기로 시작해서 모든 인터페이스로 끝나요.
• 『(사용자를) 생각하게 하지 마!』(Don't Make Me Think, 스티브 크룩) — 웹 사용성의 고전. 얇고 웃기고, 2~3장(스캔·관습)은 이 교과서 2강·13강의 원류예요.
• 『Refactoring UI』(Adam Wathan·Steve Schoger, 영문) — 개발자를 위한 실전 시각 디자인. 위계·여백·색을 "당장 이렇게 고쳐라" 수준으로 알려줘요. 이 교과서의 3~5강이 그 책의 축약이에요.

사이트 — 즐겨찾기 셋

• Nielsen Norman Group(nngroup.com) — 사용성 연구의 본진. 아티클이 전부 근거 기반이에요.
• Laws of UX(lawsofux.com) — 이 교과서 2부의 법칙들을 카드 한 장씩 정리한 사전.
• Mobbin / 스크린 아카이브 — 잘 만든 앱들의 실제 화면 모음. "남들은 이 문제를 어떻게 풀었나" 검색용.

매일 훈련 — 하루 15분

1. 따라 그리기 — 잘 만든 화면 하나를 골라 똑같이 만들어 봐요. 눈으로 볼 땐 안 보이던 간격·크기 결정이 손으로 옮기면 전부 보여요.
2. "왜 이렇게 했을까" 묻기 — 오늘 쓴 앱에서 버튼 하나를 골라 위치·크기·문구의 이유를 추리해요. 답을 맞히는 게 아니라 질문하는 근육을 키우는 거예요.
3. 망가뜨려 보기 — 내 화면에서 위계를 꺼 보고(3강 데모처럼), 여백을 균일하게 해 봐요. 좋은 결정은 망가뜨려 봐야 왜 좋았는지 알아요.

모션 — 움직임에도 문법이 있다

화면의 움직임이 하는 일은 셋이에요 — ① 인과(이 패널이 어디서 나와서 어디로 갔나), ② 피드백(입력을 들었다는 대답), ③ 성격(브랜드의 몸짓). 넷째 역할 '장식'은 없어요. 셋 중 아무것도 안 하는 움직임은 소음이고, 소음은 뺄수록 좋아요.

속도에는 통용되는 구간이 있어요. UI 전환은 대략 150~300ms — 100ms 아래는 즉시로 느껴져서 인과가 안 보이고, 500ms를 넘으면 기다림이 시작돼요. 작은 요소(버튼·토글)는 짧게, 크고 멀리 가는 것(패널·페이지)은 길게 잡아요. 직접 느껴 보세요:

• 이징(easing) — 등속(linear)은 기계 티가 나요. 자연물은 가속하고 감속해요. 들어올 땐 감속(ease-out), 나갈 땐 가속(ease-in)이 기본형이에요.
• 스크롤을 훔치지 마요 — 스크롤 속도를 바꾸거나 가로채는 연출은 사용자의 손을 뺏는 거예요. 조작감은 항상 사용자 소유여야 해요.
• 움직임 최소화 설정을 존중해요(15강) — 이 페이지의 데모도 그 설정이면 조용해져요.

폼 — 묻는 만큼 잃는다

가입·문의·결제·검색, 서비스의 결승선은 대부분 폼이에요. 그리고 입력칸 하나하나가 마찰이에요 — 칸이 줄면 완료율이 오르는 건 가장 재현이 잘 되는 UX 실험 중 하나예요. 그러니 첫 질문은 배치가 아니라 "이걸 꼭 지금 물어야 하나"예요.

• 한 열로 세로로 — 여러 열이면 눈이 지그재그로 헤매요.
• 라벨은 칸 위에, 항상 보이게 — 플레이스홀더를 라벨로 쓰면 치는 순간 질문이 사라져요. 뭘 묻고 있었는지 기억하는 건 사용자 몫이 되고요(11강의 부하).
• 폰을 배려해요 — 이메일 칸엔 이메일 키보드, 숫자 칸엔 숫자 키보드(inputmode), 주소·이름은 자동완성(autocomplete)으로 한 번만 치게.
• 실패해도 입력은 보존해요 — 제출이 실패했다고 쓴 걸 지우는 폼이 최악의 폼이에요.

검증 타이밍의 정석은 "늦게 꾸짖고, 빨리 용서하기"예요 — 치는 중에는 잠자코 있다가 칸을 떠날 때(blur) 판정하고, 일단 틀렸다고 말한 뒤에는 고치는 즉시 다시 판정해서 빨간불을 바로 꺼 줘요. 쳐 보세요:

정보 구조 — 이름과 길

정보 구조(IA)는 세 가지 일이에요 — 무엇을 어떻게 부르고(이름), 어디에 두고(분류), 어떻게 잇나(길). 화면 이전의 설계라 눈에 안 보이지만, 사용자가 길을 잃는 사고의 대부분이 여기서 나요.

• 이름은 사용자의 말로 — 회사 조직도의 말("솔루션", "리소스")이 아니라 그 사람이 찾을 때 쓰는 말로요(16강의 연장). 메뉴 이름만 바꿔도 완료율이 움직여요.
• "3클릭 안에"는 미신이에요 — 중요한 건 클릭 수가 아니라 매 클릭의 확신, 이른바 정보의 냄새예요. "맞게 가는 중"이라는 냄새가 나면 다섯 클릭도 즐겁고, 냄새가 없으면 두 클릭짜리도 미로예요. 링크 문구가 목적지를 정직하게 예고하게 해요.
• "여기가 어디"에 상시 응답 — 현재 메뉴 강조, 빵부스러기, 명확한 페이지 제목. 이 페이지의 왼쪽 목차 레일도 그 역할이에요.
• 훑는 길과 찾는 길, 둘 다 — 메뉴로 훑는 사람과 검색으로 직행하는 사람은 다른 사람이에요. 콘텐츠가 많아지면 검색·필터를 내고, 필터엔 결과 수를 미리 보여줘요 ("이 조건이면 3건"). 0건짜리 필터를 누르게 하는 건 헛걸음을 설계하는 거예요.
• 분류가 막히면 카드 소팅 — 항목들을 카드로 만들어 남에게 묶어 보라고 해요. 내 분류가 아니라 사용자의 분류가 정답이에요.

신뢰와 보안 — 안심은 설계다

돈과 개인정보 앞에서 사용자의 기본값은 불신이에요. 그리고 신뢰는 "믿어 주세요"라는 문구가 아니라 작은 신호들의 합으로 생겨요 — 주소창의 자물쇠(https), 실체가 보이는 운영자 정보와 연락처, 미리 보여주는 조건(가격·환불), 숨김없는 방침. 우리 사이트의 개인정보처리방침이 "수집 안 해요"를 그대로 말하는 것도 그 신호예요.

• 요구는 최소로 — 지금 필요 없는 정보를 미리 걷지 마요. "생일은 왜 필요하지?"라는 생각이 드는 순간, 이탈과 의심이 같이 시작돼요.
• 총액을 먼저 — 마지막 단계에서 튀어나오는 배송비·수수료는 장바구니 이탈 사유 1순위로 꼽혀요. 숨겨서 얻는 전환은 환불과 악평으로 돌아와요(18강).
• 비밀번호 UX — 보기 토글을 주고, 붙여넣기를 막지 말고(비밀번호 관리자 사용자를 벌주는 짓이에요), 규칙은 틀린 다음이 아니라 치기 전에 보여줘요.
• 보안이 UX를 이기는 게 정당한 자리도 있어요 — 로그인 실패에 "아이디가 틀렸는지 비밀번호가 틀렸는지" 안 알려주는 건 불친절이 아니라 계정 보호예요. 다만 그 대가로 찾기 링크는 바로 옆에 둬요.
• 가짜 신호는 사기예요 — 가짜 자물쇠 아이콘, 가짜 재고 카운트다운, 가짜 리뷰. 단기 전환을 사고 신뢰 전부를 파는 거래예요(18강의 다크 패턴).

내보내기 전 점검표 — 20문

화면을 배포하기 전에 이 목록을 한 바퀴 돌아요. 체크는 이 브라우저에 저장돼요 — 떠났다 와도 그대로예요 (17강 '상태 설계'의 실물이에요).

이 사이트에서 찾아보기

배운 눈으로 bruni.world를 다시 보면 결정들이 보여요. 몇 개만 짚어 둘게요 — 나머지는 직접 찾아보세요.

• 홈의 작업 카드 — 상태 배지(LIVE·PLAY·ARCHIVE)가 유사성 원리(8강)로 한눈에 갈라져요. 아카이브 카드만 회색인 것도 위계(3강)예요.
• 책 페이지 — 목차 전부 공개 + 본문 맛보기 = 18강의 "불안 먼저 치우기"예요.
• 링크 페이지 — 선택지를 그룹으로 묶고(4강) 카드마다 한 줄 설명 — 11강의 부하 줄이기예요.
• 순위 페이지 — 색을 누르면 복사되고 "복사됐어요" 토스트가 떠요 — 10강의 피드백이에요.
• 파는 감각 — 18강 '전환'을 책 한 권 분량으로 편 자매 교과서예요. 같이 읽으면 만드는 눈과 파는 눈이 짝이 돼요.
• 이 페이지 — 진행 바(10강), 접힌 목차(11강), 포커스 테두리(15강), 44px 데모(12강), 체크가 남는 점검표(17강), 그리고 지금 이 부록(21강의 "검증하며 배우기")까지요.