DAU와 MAU가 현재 시점의 사진이라면, 리텐션은 시간을 따라 사용자가 얼마나 남는지의 영상입니다. 같은 날 가입한 사람을 묶어 따라가는 코호트, 그 코호트의 잔존을 그린 리텐션 곡선, 그리고 그 곡선이 평탄해지는 모양에서 PMF를 읽는 법까지. 10개 용어를 정리합니다.
read →
활성화한 사용자가 계속 돌아오는가의 문제. 일·주·월 활성 사용자를 묶는 단위, 두 단위를 나눠 만드는 Stickiness, 세션의 정의와 그 안의 시간 지표들. DAU가 늘었는데 사용자는 그대로일 수 있는 이유와 그 함정까지 정리합니다.
가입은 끝이 아니라 시작입니다. 가입한 사람이 실제로 서비스의 가치를 경험하고 다시 돌아오는 사용자로 전환되는 구간: 활성화. Activation Rate, Time-to-Value, Aha Moment, Onboarding Completion까지 11개 용어를 정리합니다. 페이스북의 10명 친구 추가, 슬랙의 2,000개 메시지 같은 Magic Number 사례도 함께.
광고 클릭 직후부터 가입·구매 전까지의 짧은 구간에서 일어나는 일을 측정하는 지표들입니다. 클릭률과 전환율의 관계, 이탈률과 나가기 비율의 차이, 첫 화면(Above-the-fold)이 모든 것을 결정하는 이유, 그리고 히트맵과 클릭맵이 무엇을 보여주고 무엇을 가리는지까지. 디자이너에게 가장 직접적인 편.
광고비를 얼마나 썼는지(ep.01)에 이어 그래서 얼마를 벌었는지를 다룹니다. ROAS와 ROI의 차이, 광고 매니저가 자기 광고만 본다는 한계, 증분 ROAS와 블렌디드 CAC가 등장한 이유까지. SaaS와 이커머스의 사고 차이도 함께 정리합니다.
광고비를 어디에 어떻게 쓰고 있는지 보여주는 비용 지표를 정리합니다. 노출 단가, 클릭 단가, 액션 단가의 차이와 함께 노출·도달·빈도가 같은 노출 데이터를 세 각도에서 본다는 점을 다룹니다. 가상 서비스 센티와 토스·당근·카카오 광고를 사례로 사용합니다.
자동화 도구가 발견하는 30~40% 너머의 영역, 한국 WA 인증 절차, 이슈 우선순위 산정 공식, CI/CD 파이프라인 접근성 게이트, 조직의 챔피언 모델, 그리고 5단계 성숙도 모델까지. 검사 통과로 끝나지 않는 운영의 영역을 마지막 편에서 정리하며 시리즈를 마무리합니다.
마케팅 지표 136개를 개발자와 디자이너의 시선으로 정리한 13부작 시리즈의 출발점입니다. 가상 서비스 센티(Centi)를 일관된 예시로 두고, 퍼널 단계별·실무 시나리오별·UI 컴포넌트별 세 가지 색인으로 입구를 세 개 만들었습니다. 어느 쪽으로 들어와도 원하는 용어에 닿도록 설계했습니다.
SwiftUI의 accessibility 수정자와 Compose의 semantics, Flutter의 Semantics 위젯을 비교하고, 네이티브·하이브리드·웹뷰 아키텍처별 접근성 함정을 짚습니다. React Aria·Radix·Headless UI 같은 헤드리스 라이브러리, jsx-a11y 린트 규칙, VoiceOver와 TalkBack 차이까지 한 편에 모았습니다.
네이티브 HTML이 ARIA + JavaScript 20줄을 대체하는 이유, W3C ARIA 5대 규칙, 랜드마크와 라이브 리전 설계, 모달 포커스 트랩 구현, 복합 위젯의 표준 키보드 패턴까지. 가장 많은 실수가 발생하는 단계인 만큼 가장 길게 다룹니다.
WCAG 명도 대비 기준의 실전 적용, 색상에만 의존하지 않는 정보 전달, 다크·고대비 모드 동시 대응 전략, 포커스 인디케이터와 터치 타겟 디자인, 그리고 디자인 시스템 컴포넌트에 접근성 명세를 끼워 넣는 패턴을 정리합니다.
디지털 접근성의 정의와 장애 스펙트럼, 보조기기의 동작 원리, 한국과 국제 법규 현황, 그리고 비즈니스 지표와의 연결 관계를 다룹니다. 본격적인 WCAG 학습에 들어가기 전 공통 지반을 다지는 개요 편입니다.
와이어프레임에 헤딩 레벨을 명시하는 법, 내비게이션 패턴별 접근성 트레이드오프, 폼 설계의 핵심 결정 포인트, 대체 텍스트 의사결정, 그리고 유저 스토리에 접근성 인수 조건을 끼워 넣는 패턴까지. 디자이너·개발자에게 넘기기 전에 기획자가 끝내야 할 일들을 정리합니다.
WCAG의 POUR 4원칙이 어떻게 13개 지침과 86개 성공 기준으로 펼쳐지는지, A·AA·AAA 등급의 의미와 실무 선택 기준, 2.1에서 2.2로 넘어오면서 추가된 9가지 신규 기준, 그리고 한국형 KWCAG와의 매핑까지 한 편에 정리합니다.
로그인 화면을 처음부터 설계하는 실습과, 의도적으로 누락된 상품 상세 설계서에서 빠진 항목을 찾는 실습. 옆에 두고 쓰는 UI 요소·상태 체크리스트와 자주 쓰는 문구 모음까지. 시리즈의 마지막 편입니다.
빠지기 쉬운 관리자 화면, 개발자가 읽기 좋은 설계서의 조건, 변경 관리 전략, 리뷰와 핸드오프 프로세스. 주니어에게는 미리보기, 경력자에게는 점검표가 됩니다.
화면 헤더, 와이어프레임, 주석, UI 요소 상세 정의, 인터랙션과 상태, 데이터 정의, 권한·정책, 예외 처리, 비기능 요구사항. 한 장의 화면을 빈틈없이 채우는 데 필요한 항목들을 정리합니다.
개별 화면을 채우기 전에 문서 자체의 구조를 먼저 잡습니다. 표지 필수 항목부터 개정이력 작성 요령, 목차 관리, 두 종류의 플로우차트까지 다룹니다.
정보구조(IA), 화면 ID 체계, 파일명/버전 규칙, 프로젝트 용어집, 공통 가이드까지. 본격적인 화면 설계에 들어가기 전 다섯 가지 준비물을 정리합니다.
화면설계서가 어떤 문서이고 왜 필요한지 정리합니다. 디자이너·개발자·QA·클라이언트가 같은 문서에서 다른 것을 본다는 점, 그리고 좋은 화면설계서가 갖춰야 할 다섯 가지 조건을 다룹니다. 시리즈의 진입편입니다.
Logging & Alerting Failures(A09)와 2025년 신규 카테고리 Mishandling of Exceptional Conditions(A10)를 다룹니다. 무엇을 로깅하고 무엇을 로깅하지 말아야 할지, Fail Closed의 의미, Circuit Breaker 패턴, Chaos Engineering의 보안적 의미, 그리고 Incident Response Playbook까지.
Software Supply Chain Failures(A03)와 Insecure Design(A06)을 다룹니다. 의존성 관리와 SBOM, dependency confusion, install script 위험, SLSA. 그리고 위협 모델링과 비즈니스 로직 악용까지. 스캐너에 잡히지 않고 설계 단계에서 봐야 하는 두 카테고리입니다.
Next.js 서비스에서 시간을 두고 접속하면 가끔 503이 떨어지던 문제를 추적했습니다. 처음에는 MongoDB 유휴 커넥션을 의심해 옵션을 다듬었고, 다음으로 OOM을 의심했지만 둘 다 원인이 아니었습니다. 진짜 원인은 PM2 데몬 자체가 systemd에 의해 통째로 강제 종료되고 있다는 사실이었고, 그 뿌리에는 SELinux의 사용자 홈 파일 접근 차단이 있었습니다.
SQL Injection이 왜 prepared statement로 풀리는지, XSS의 세 유형은 왜 다른 방어가 필요한지, 역직렬화는 왜 JSON과 Pickle이 천지차이인지. 그리고 외부 스크립트·CI/CD 아티팩트의 무결성을 어떻게 보장하는지를 실전 수준으로 정리합니다.
전송 중 보호(HTTPS/TLS), 저장 시 보호(해시·암호화·키 관리), 애플리케이션 레이어(보안 헤더·CORS), 그리고 클라우드 설정까지. 2025년판 2위와 4위로 올라온 두 카테고리의 핵심을 실전 명령어와 함께 정리합니다.
시리즈의 마지막 편입니다. Bright Pattern의 5가지 설계 원칙(투명성·대칭성·기본값·비례성·명료성)을 정리하고, 같은 KPI를 정직한 경로로 달성하는 5가지 패턴 전환 사례를 제시합니다. 직무별 자가 점검 체크리스트, 다크패턴 리뷰 템플릿, 그리고 "전환율만 보지 않는" 보완 지표 설계까지 팀에 바로 적용할 수 있는 도구를 제공합니다.
Broken Access Control(A01)과 Authentication Failures(A07)를 한 편에서 다룹니다. IDOR과 권한 상승, JWT의 함정과 세션 관리, MFA의 실제 효과와 Passkey까지. 실제로 확인 가능한 명령어와 체크리스트를 포함합니다.
EU DSA, GDPR, 미국 FTC의 규제 체계와 역대 주요 제재 사례를 분석합니다. 글로벌 서비스를 만들 때 어떤 기준을 따라야 하는지, 그리고 "가장 엄격한 기준"이 왜 결과적으로 가장 효율적인지를 다룹니다.
OWASP Top 10:2025가 왜 이전과 다른지, 그리고 중고급 개발자가 이 시리즈를 통해 무엇을 얻을 수 있는지 정리합니다. 시리즈 전체 구성과 각 편에서 다룰 카테고리, 배포 직전 30분 안에 돌릴 수 있는 스모크 테스트를 소개합니다.
한국의 다크패턴 규제 타임라인(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는 어떻게 생겼고, 왜 작동하며, 어떻게 피할 수 있는가. 다크패턴에 대해 해부해봅니다.
플랫폼에 종속되지 않고, 내 도메인에서 글을 온전히 소유할 수 있는 기술 블로그를 구축하려 합니다. 주로 기술이나 디자인에 관한 실무적·교육적 콘텐츠를 다룰 예정이며, 코드 블록과 인터랙티브 데모를 자유롭게 삽입할 수 있는 환경이 필요합니다. 이 글에서는 기술 스택을 선정하기까지의 과정과, 최종 선택한 Astro + Vercel 조합의 구체적인 구현 방법을 정리합니다.
