44개 차트 데모를 한 자리에 모았습니다. 시각 사용자·키보드 사용자·스크린리더 사용자가 모두 자연스럽도록 처음부터 설계했고, 그 과정에서 정착된 패턴들 — HTML overlay, roving tabindex, 호버와 키보드 포커스의 분리, 데이터 표 fallback — 을 함께 정리했습니다.
read →
함수 단위의 안전망이 자리잡았다면, 다음은 화면입니다. 컴포넌트 테스트는 UI 단위의 동작을, 시각 회귀 테스트는 픽셀 단위의 변화를 잡아냅니다. 디자인 시스템을 운영한다면 거의 필수에 가까운 영역입니다.
접근성은 누구에게 동작하는가의 문제입니다. 키보드만 쓰는 사용자, 스크린리더로 읽는 사용자, 색을 구별하지 못하는 사용자에게도 같은 경험이 가야 합니다. 자동 검사와 수동 확인이 각자 잡아내는 영역이 다르고, 둘을 함께 운영해야 의미가 있습니다.
시리즈의 마지막 편입니다. 지금까지 다룬 모든 종류의 테스트를 정리하고, 팀 규모와 코드베이스 성숙도에 따라 무엇부터 도입할지를 결정합니다. 테스트 전략 매트릭스 양식과 흔히 빠지는 함정, 그리고 내일부터 할 수 있는 세 가지 실행 항목으로 시리즈를 닫습니다.
본 시리즈는 내부 개발 협업에서 쓰는 문서에 초점을 맞췄습니다. 그러나 그 바깥에도 자리한 문서들이 있습니다. 비개발자가 읽는 사용자 매뉴얼, 구현 직전에 동료에게 의견을 구하는 디자인 문서, 공개와 비공개 사이의 보안 문서. 이번 편은 각자의 위치를 짚어두며 시리즈를 마칩니다.
지표가 좋아졌다. 그런데 진짜 우리 변경의 효과일까. 아니면 그냥 운일까. 이 질문에 답하기 위한 통계 도구들 — A/B 테스트의 설계, 표본 크기 계산, p-value의 의미, 두 종류의 오류, 그리고 통계적 유의성과 비즈니스 유의성의 차이까지. 12개 용어를 정리합니다.
지금까지의 모든 지표가 정확하기 위해서는 데이터가 정확하게 수집되어야 합니다. UTM 파라미터로 채널을 구분하고, 이벤트로 사용자 행동을 잡고, 픽셀과 태그로 외부 매체와 연결하고, 서버사이드 트래킹으로 정확도를 끌어올리는 흐름. 그리고 쿠키 시대 종말과 동의 모드까지. 측정 인프라의 어휘 12개.
시리즈의 마지막 편. 한 사용자가 광고를 다섯 번 보고 가입했다면 그 공로는 어느 광고에게 갈까요. 첫 광고, 마지막 광고, 모든 광고에 골고루, 또는 데이터가 학습한 가중치. 어트리뷰션 모델 일곱 종과 마지막으로 실제 도구들 — GA4, Amplitude, Mixpanel의 차이까지. 13개 용어로 시리즈를 마칩니다.
광고비를 쓰고, 사용자를 데려오고, 활성화하고, 유지한 결과 회사가 살아남는가의 질문에 답하는 편입니다. LTV와 CAC의 정의와 그 비율, 월 반복 매출과 연 반복 매출, 회수 기간과 기여 마진까지. 가장 무거운 편이자 모든 편이 모이는 편.
만족도의 측정 방법은 하나가 아닙니다. 추천 의향을 묻는 NPS, 즉시 만족을 묻는 CSAT, 노력의 무게를 묻는 CES. 그리고 만족한 사용자가 추천을 통해 새 사용자를 만드는 바이럴 계수와 K-factor. 사용자가 마케팅이 되는 구조의 어휘 10개.
활성화한 사용자가 계속 돌아오는가의 문제. 일·주·월 활성 사용자를 묶는 단위, 두 단위를 나눠 만드는 Stickiness, 세션의 정의와 그 안의 시간 지표들. DAU가 늘었는데 사용자는 그대로일 수 있는 이유와 그 함정까지 정리합니다.
DAU와 MAU가 현재 시점의 사진이라면, 리텐션은 시간을 따라 사용자가 얼마나 남는지의 영상입니다. 같은 날 가입한 사람을 묶어 따라가는 코호트, 그 코호트의 잔존을 그린 리텐션 곡선, 그리고 그 곡선이 평탄해지는 모양에서 PMF를 읽는 법까지. 10개 용어를 정리합니다.
유지의 반대편을 다룹니다. 한 달 사이에 누가 떠났는가, 그게 매출에 어떤 영향을 주는가. 고객 수 기준 이탈과 매출 기준 이탈의 차이, SaaS의 핵심 지표 NRR과 GRR, 자발과 비자발 이탈의 구분, 그리고 윈백과 부활까지. 11개 용어를 정리합니다.
광고 클릭 직후부터 가입·구매 전까지의 짧은 구간에서 일어나는 일을 측정하는 지표들입니다. 클릭률과 전환율의 관계, 이탈률과 나가기 비율의 차이, 첫 화면(Above-the-fold)이 모든 것을 결정하는 이유, 그리고 히트맵과 클릭맵이 무엇을 보여주고 무엇을 가리는지까지. 디자이너에게 가장 직접적인 편.
가입은 끝이 아니라 시작입니다. 가입한 사람이 실제로 서비스의 가치를 경험하고 다시 돌아오는 사용자로 전환되는 구간 — 활성화. Activation Rate, Time-to-Value, Aha Moment, Onboarding Completion까지 11개 용어를 정리합니다. 페이스북의 10명 친구 추가, 슬랙의 2,000개 메시지 같은 Magic Number 사례도 함께.
광고비를 어디에 어떻게 쓰고 있는지 보여주는 비용 지표를 정리합니다. 노출 단가, 클릭 단가, 액션 단가의 차이와 함께 노출·도달·빈도가 같은 노출 데이터를 세 각도에서 본다는 점을 다룹니다. 가상 서비스 센티와 토스·당근·카카오 광고를 사례로 사용합니다.
광고비를 얼마나 썼는지(ep.01)에 이어 그래서 얼마를 벌었는지를 다룹니다. ROAS와 ROI의 차이, 광고 매니저가 자기 광고만 본다는 한계, 증분 ROAS와 블렌디드 CAC가 등장한 이유까지. SaaS와 이커머스의 사고 차이도 함께 정리합니다.
마케팅 지표 136개를 개발자와 디자이너의 시선으로 정리한 13부작 시리즈의 출발점입니다. 가상 서비스 센티(Centi)를 일관된 예시로 두고, 퍼널 단계별·실무 시나리오별·UI 컴포넌트별 세 가지 색인으로 입구를 세 개 만들었습니다. 어느 쪽으로 들어와도 원하는 용어에 닿도록 설계했습니다.
디지털 접근성의 정의와 장애 스펙트럼, 보조기기의 동작 원리, 한국과 국제 법규 현황, 그리고 비즈니스 지표와의 연결 관계를 다룹니다. 본격적인 WCAG 학습에 들어가기 전 공통 지반을 다지는 개요 편입니다.
WCAG 명도 대비 기준의 실전 적용, 색상에만 의존하지 않는 정보 전달, 다크·고대비 모드 동시 대응 전략, 포커스 인디케이터와 터치 타겟 디자인, 그리고 디자인 시스템 컴포넌트에 접근성 명세를 끼워 넣는 패턴을 정리합니다.
와이어프레임에 헤딩 레벨을 명시하는 법, 내비게이션 패턴별 접근성 트레이드오프, 폼 설계의 핵심 결정 포인트, 대체 텍스트 의사결정, 그리고 유저 스토리에 접근성 인수 조건을 끼워 넣는 패턴까지. 디자이너·개발자에게 넘기기 전에 기획자가 끝내야 할 일들을 정리합니다.
WCAG의 POUR 4원칙이 어떻게 13개 지침과 86개 성공 기준으로 펼쳐지는지, A·AA·AAA 등급의 의미와 실무 선택 기준, 2.1에서 2.2로 넘어오면서 추가된 9가지 신규 기준, 그리고 한국형 KWCAG와의 매핑까지 한 편에 정리합니다.
로그인 화면을 처음부터 설계하는 실습과, 의도적으로 누락된 상품 상세 설계서에서 빠진 항목을 찾는 실습. 옆에 두고 쓰는 UI 요소·상태 체크리스트와 자주 쓰는 문구 모음까지. 시리즈의 마지막 편입니다.
빠지기 쉬운 관리자 화면, 개발자가 읽기 좋은 설계서의 조건, 변경 관리 전략, 리뷰와 핸드오프 프로세스. 주니어에게는 미리보기, 경력자에게는 점검표가 됩니다.
화면 헤더, 와이어프레임, 주석, UI 요소 상세 정의, 인터랙션과 상태, 데이터 정의, 권한·정책, 예외 처리, 비기능 요구사항. 한 장의 화면을 빈틈없이 채우는 데 필요한 항목들을 정리합니다.
개별 화면을 채우기 전에 문서 자체의 구조를 먼저 잡습니다. 표지 필수 항목부터 개정이력 작성 요령, 목차 관리, 두 종류의 플로우차트까지 다룹니다.
정보구조(IA), 화면 ID 체계, 파일명/버전 규칙, 프로젝트 용어집, 공통 가이드까지. 본격적인 화면 설계에 들어가기 전 다섯 가지 준비물을 정리합니다.
화면설계서가 어떤 문서이고 왜 필요한지 정리합니다. 디자이너·개발자·QA·클라이언트가 같은 문서에서 다른 것을 본다는 점, 그리고 좋은 화면설계서가 갖춰야 할 다섯 가지 조건을 다룹니다. 시리즈의 진입편입니다.
시리즈의 마지막 편입니다. Bright Pattern의 5가지 설계 원칙(투명성·대칭성·기본값·비례성·명료성)을 정리하고, 같은 KPI를 정직한 경로로 달성하는 5가지 패턴 전환 사례를 제시합니다. 직무별 자가 점검 체크리스트, 다크패턴 리뷰 템플릿, 그리고 "전환율만 보지 않는" 보완 지표 설계까지 팀에 바로 적용할 수 있는 도구를 제공합니다.
EU DSA, GDPR, 미국 FTC의 규제 체계와 역대 주요 제재 사례를 분석합니다. 글로벌 서비스를 만들 때 어떤 기준을 따라야 하는지, 그리고 "가장 엄격한 기준"이 왜 결과적으로 가장 효율적인지를 다룹니다.
한국의 다크패턴 규제 타임라인(2023 가이드라인 → 2025 전자상거래법 시행 → 2025.10 첫 실질적 제재)을 정리하고, 공정위 6대 금지 유형의 구체적 해석 기준을 다룹니다. 기획·디자인·개발 직무별 법적 책임 영역과 Amazon Prime 사례에서 도출된 "개인 책임"의 함의를 분석합니다.
카피와 알림의 다크패턴을 해부합니다. 컨펌쉐이밍, 반복 간섭, 가치 판단을 심은 언어, 알림 설정의 비대칭까지. 한국어 서비스의 존댓말 구조와 "혜택" 프레이밍이 어떻게 거절을 더 어렵게 만드는지, 공정위 "반복 간섭" 금지 조항이 실무에서 어디까지 적용되는지를 다룹니다.
시각적 위계, 색상, 카피의 경계가 어떻게 다크패턴과 정직한 디자인을 가르는지 해부합니다. Misdirection, False Hierarchy, Trick Question, Disguised Ads, Visual Interference 다섯 가지 UI 조작 패턴을 분석하고, 공정위 "잘못된 계층구조" 해석 기준에 비춰 디자이너의 책임 범위를 정리합니다.
구독 비즈니스에서 "이탈 방지"의 압력이 다크패턴으로 전환되는 지점을 해부합니다. Roach Motel, Subscription Trap, Forced Continuity, Hard to Cancel을 분석하고, Amazon Prime 25억 달러 합의(2025) 사례를 통해 "가입과 해지의 대칭성"이 어떻게 글로벌 규제 표준이 되었는지를 추적합니다.
결제 여정에서 잠복하는 다섯 가지 다크패턴(Hidden Cost, Sneak into Basket, Drip Pricing, Bait and Switch, Price Comparison Prevention)을 분석합니다. 앵커링과 매몰비용이 어떻게 가격 조작 패턴을 작동시키는지, 공정위 "순차공개 가격책정" 금지 조항이 실무에서 어떤 의미를 가지는지를 다룹니다.
사용자 여정의 첫 단계인 가입·온보딩에서 발생하는 패턴을 심층 분석합니다. 동의 화면의 설계, 앱 권한 요청의 타이밍, 게스트 결제를 막는 패턴까지 실제 모의 화면과 Before/After 비교를 통해 구체적으로 다룹니다.
Brignull 분류가 "전문가의 관찰"에 기반했다면, Mathur et al.의 분류는 11,000개 쇼핑몰을 크롤링한 실증 데이터에 기반합니다. 그리고 한국 공정위의 6대 유형은 "법적으로 금지된 것"의 기준입니다. 세 분류를 겹쳐놓으면 무엇이 보이는지 통합 매핑 테이블과 "어떤 분류를 언제 쓸 것인가" 의사결정 트리를 제공합니다.
인지 편향이 "왜"를 설명했다면, 분류 체계는 "무엇이 있는가"를 정리합니다. Harry Brignull이 정의한 12가지 원형 다크패턴을 각각의 정의, 발생 지점, 모의 UI 예시와 함께 카탈로그화합니다. 이 12유형 카드는 시리즈 전체에서 반복적으로 참조되는 레퍼런스 자산이 됩니다.
다크패턴이 효과적인 이유는 사용자가 "멍청해서"가 아닙니다. 인간의 의사결정 시스템에 구조적인 취약점이 있고, 다크패턴은 그 취약점을 정확히 겨냥합니다. 손실 회피, 기본값 효과, 사회적 증거, 매몰비용, 앵커링 — 5가지 인지 편향이 어떤 다크패턴과 매핑되는지 분석합니다.
같은 "기본값 설정"이 어떤 맥락에서는 사용자를 돕는 넛지가 되고, 어떤 맥락에서는 동의를 가장한 기만이 되는지를 분석합니다. 설득·넛지·다크패턴을 구분하는 세 가지 기준(투명성, 이익 귀속, 동의 가능성)을 제시하고, 즉시 사용할 수 있는 판별 플로우차트를 제공합니다.
사용자를 속이는 UI는 어떻게 생겼고, 왜 작동하며, 어떻게 피할 수 있는가. 다크패턴에 대해 해부해봅니다.
