WCAG 명도 대비 기준의 실전 적용, 색상에만 의존하지 않는 정보 전달, 다크·고대비 모드 동시 대응 전략, 포커스 인디케이터와 터치 타겟 디자인, 그리고 디자인 시스템 컴포넌트에 접근성 명세를 끼워 넣는 패턴을 정리합니다.
read →
디지털 접근성의 정의와 장애 스펙트럼, 보조기기의 동작 원리, 한국과 국제 법규 현황, 그리고 비즈니스 지표와의 연결 관계를 다룹니다. 본격적인 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 조합의 구체적인 구현 방법을 정리합니다.
