tag · 19 posts

#ux

유입과 클릭 - 마케팅 지표 핸드북 ep.03
  • series
  • develop
  • design
  • marketing
  • metrics
  • ctr
  • cvr
  • ux
  • landing-page

유입과 클릭 - 마케팅 지표 핸드북 ep.03

광고 클릭 직후부터 가입·구매 전까지의 짧은 구간에서 일어나는 일을 측정하는 지표들입니다. 클릭률과 전환율의 관계, 이탈률과 나가기 비율의 차이, 첫 화면(Above-the-fold)이 모든 것을 결정하는 이유, 그리고 히트맵과 클릭맵이 무엇을 보여주고 무엇을 가리는지까지. 디자이너에게 가장 직접적인 편.

read →
개발자와 디자이너를 위한 - 마케팅 지표 핸드북 ep.00
  • series
  • develop
  • design
  • cover
  • marketing
  • metrics
  • glossary
  • kpi
  • ux

개발자와 디자이너를 위한 - 마케팅 지표 핸드북 ep.00

마케팅 지표 136개를 개발자와 디자이너의 시선으로 정리한 13부작 시리즈의 출발점입니다. 가상 서비스 센티(Centi)를 일관된 예시로 두고, 퍼널 단계별·실무 시나리오별·UI 컴포넌트별 세 가지 색인으로 입구를 세 개 만들었습니다. 어느 쪽으로 들어와도 원하는 용어에 닿도록 설계했습니다.

read →
접근성, 다시 묻기 - 앱·웹 접근성 실무 가이드 ep.00
  • series
  • cover
  • design
  • develop
  • frontend
  • a11y
  • wcag
  • kwcag
  • ux

접근성, 다시 묻기 - 앱·웹 접근성 실무 가이드 ep.00

디지털 접근성의 정의와 장애 스펙트럼, 보조기기의 동작 원리, 한국과 국제 법규 현황, 그리고 비즈니스 지표와의 연결 관계를 다룹니다. 본격적인 WCAG 학습에 들어가기 전 공통 지반을 다지는 개요 편입니다.

read →
디자인 단계 — 색·타이포·모션·시스템 - 앱·웹 접근성 실무 가이드 ep.03
  • series
  • design
  • ux
  • a11y
  • wcag
  • contrast
  • dark-mode
  • design-system

디자인 단계 — 색·타이포·모션·시스템 - 앱·웹 접근성 실무 가이드 ep.03

WCAG 명도 대비 기준의 실전 적용, 색상에만 의존하지 않는 정보 전달, 다크·고대비 모드 동시 대응 전략, 포커스 인디케이터와 터치 타겟 디자인, 그리고 디자인 시스템 컴포넌트에 접근성 명세를 끼워 넣는 패턴을 정리합니다.

read →
기획 단계 — 구조와 콘텐츠 - 앱·웹 접근성 실무 가이드 ep.02
  • series
  • design
  • ux
  • a11y
  • wcag
  • planning
  • forms

기획 단계 — 구조와 콘텐츠 - 앱·웹 접근성 실무 가이드 ep.02

와이어프레임에 헤딩 레벨을 명시하는 법, 내비게이션 패턴별 접근성 트레이드오프, 폼 설계의 핵심 결정 포인트, 대체 텍스트 의사결정, 그리고 유저 스토리에 접근성 인수 조건을 끼워 넣는 패턴까지. 디자이너·개발자에게 넘기기 전에 기획자가 끝내야 할 일들을 정리합니다.

read →
WCAG 2.2 구조 완벽 정리 - 앱·웹 접근성 실무 가이드 ep.01
  • series
  • design
  • develop
  • frontend
  • a11y
  • wcag
  • kwcag
  • ux

WCAG 2.2 구조 완벽 정리 - 앱·웹 접근성 실무 가이드 ep.01

WCAG의 POUR 4원칙이 어떻게 13개 지침과 86개 성공 기준으로 펼쳐지는지, A·AA·AAA 등급의 의미와 실무 선택 기준, 2.1에서 2.2로 넘어오면서 추가된 9가지 신규 기준, 그리고 한국형 KWCAG와의 매핑까지 한 편에 정리합니다.

read →
다크패턴 없이 만들기 - Bright Pattern과 팀 프로세스 - 다크패턴 해부하기 ep.12
  • series
  • design
  • ux
  • ui
  • darkpattern
  • deceptivedesign
  • brightpattern
  • ethics
  • designprinciples
  • checklist

다크패턴 없이 만들기 - Bright Pattern과 팀 프로세스 - 다크패턴 해부하기 ep.12

시리즈의 마지막 편입니다. Bright Pattern의 5가지 설계 원칙(투명성·대칭성·기본값·비례성·명료성)을 정리하고, 같은 KPI를 정직한 경로로 달성하는 5가지 패턴 전환 사례를 제시합니다. 직무별 자가 점검 체크리스트, 다크패턴 리뷰 템플릿, 그리고 "전환율만 보지 않는" 보완 지표 설계까지 팀에 바로 적용할 수 있는 도구를 제공합니다.

read →
해외 규제 — EU DSA, GDPR, FTC, 주요 제재 사례 - 다크패턴 해부하기 ep.11
  • series
  • design
  • ux
  • ui
  • darkpattern
  • deceptivedesign
  • regulation
  • gdpr
  • dsa
  • ftc
  • rosca
  • compliance

해외 규제 — EU DSA, GDPR, FTC, 주요 제재 사례 - 다크패턴 해부하기 ep.11

EU DSA, GDPR, 미국 FTC의 규제 체계와 역대 주요 제재 사례를 분석합니다. 글로벌 서비스를 만들 때 어떤 기준을 따라야 하는지, 그리고 "가장 엄격한 기준"이 왜 결과적으로 가장 효율적인지를 다룹니다.

read →
국내 규제 - 공정위 가이드라인과 전자상거래법 - 다크패턴 해부하기 ep.10
  • series
  • design
  • ux
  • ui
  • darkpattern
  • deceptivedesign
  • regulation
  • korea
  • kftc
  • ecommercelaw
  • compliance

국내 규제 - 공정위 가이드라인과 전자상거래법 - 다크패턴 해부하기 ep.10

한국의 다크패턴 규제 타임라인(2023 가이드라인 → 2025 전자상거래법 시행 → 2025.10 첫 실질적 제재)을 정리하고, 공정위 6대 금지 유형의 구체적 해석 기준을 다룹니다. 기획·디자인·개발 직무별 법적 책임 영역과 Amazon Prime 사례에서 도출된 "개인 책임"의 함의를 분석합니다.

read →
언어와 알림의 패턴 — Confirmshaming, Nagging, Loaded Language - 다크패턴 해부하기 ep.09
  • series
  • design
  • ux
  • ui
  • darkpattern
  • deceptivedesign
  • uxwriting
  • copywriting
  • confirmshaming
  • nagging
  • notification

언어와 알림의 패턴 — Confirmshaming, Nagging, Loaded Language - 다크패턴 해부하기 ep.09

카피와 알림의 다크패턴을 해부합니다. 컨펌쉐이밍, 반복 간섭, 가치 판단을 심은 언어, 알림 설정의 비대칭까지. 한국어 서비스의 존댓말 구조와 "혜택" 프레이밍이 어떻게 거절을 더 어렵게 만드는지, 공정위 "반복 간섭" 금지 조항이 실무에서 어디까지 적용되는지를 다룹니다.

read →
UI 조작 패턴 — Misdirection, False Hierarchy, Trick Question - 다크패턴 해부하기 ep.08
  • series
  • design
  • ux
  • ui
  • darkpattern
  • deceptivedesign
  • misdirection
  • visualhierarchy
  • falsehierarchy
  • trickquestion

UI 조작 패턴 — Misdirection, False Hierarchy, Trick Question - 다크패턴 해부하기 ep.08

시각적 위계, 색상, 카피의 경계가 어떻게 다크패턴과 정직한 디자인을 가르는지 해부합니다. Misdirection, False Hierarchy, Trick Question, Disguised Ads, Visual Interference 다섯 가지 UI 조작 패턴을 분석하고, 공정위 "잘못된 계층구조" 해석 기준에 비춰 디자이너의 책임 범위를 정리합니다.

read →
구독과 해지의 함정 — Roach Motel, Subscription Trap - 다크패턴 해부하기 ep.07
  • series
  • design
  • ux
  • ui
  • darkpattern
  • deceptivedesign
  • subscription
  • cancellation
  • retention
  • roachmotel
  • clicktocancel

구독과 해지의 함정 — Roach Motel, Subscription Trap - 다크패턴 해부하기 ep.07

구독 비즈니스에서 "이탈 방지"의 압력이 다크패턴으로 전환되는 지점을 해부합니다. Roach Motel, Subscription Trap, Forced Continuity, Hard to Cancel을 분석하고, Amazon Prime 25억 달러 합의(2025) 사례를 통해 "가입과 해지의 대칭성"이 어떻게 글로벌 규제 표준이 되었는지를 추적합니다.

read →
결제의 함정 — Hidden Cost, Sneak into Basket, Drip Pricing - 다크패턴 해부하기 ep.06
  • series
  • design
  • ux
  • ui
  • darkpattern
  • deceptivedesign
  • checkout
  • pricing
  • drippricing
  • hiddencost
  • ecommerce

결제의 함정 — Hidden Cost, Sneak into Basket, Drip Pricing - 다크패턴 해부하기 ep.06

결제 여정에서 잠복하는 다섯 가지 다크패턴(Hidden Cost, Sneak into Basket, Drip Pricing, Bait and Switch, Price Comparison Prevention)을 분석합니다. 앵커링과 매몰비용이 어떻게 가격 조작 패턴을 작동시키는지, 공정위 "순차공개 가격책정" 금지 조항이 실무에서 어떤 의미를 가지는지를 다룹니다.

read →
가입·온보딩의 함정 — Privacy Zuckering, Forced Action - 다크패턴 해부하기 ep.05
  • series
  • design
  • ux
  • ui
  • darkpattern
  • deceptivedesign
  • onboarding
  • signup
  • privacy
  • consent
  • gdpr

가입·온보딩의 함정 — Privacy Zuckering, Forced Action - 다크패턴 해부하기 ep.05

사용자 여정의 첫 단계인 가입·온보딩에서 발생하는 패턴을 심층 분석합니다. 동의 화면의 설계, 앱 권한 요청의 타이밍, 게스트 결제를 막는 패턴까지 실제 모의 화면과 Before/After 비교를 통해 구체적으로 다룹니다.

read →
분류 지도 ② — Mathur의 실증 분류와 공정위 6유형 - 다크패턴 해부하기 ep.04
  • series
  • design
  • ux
  • ui
  • darkpattern
  • deceptivedesign
  • mathur
  • kftc
  • taxonomy
  • regulation
  • ecommerce

분류 지도 ② — Mathur의 실증 분류와 공정위 6유형 - 다크패턴 해부하기 ep.04

Brignull 분류가 "전문가의 관찰"에 기반했다면, Mathur et al.의 분류는 11,000개 쇼핑몰을 크롤링한 실증 데이터에 기반합니다. 그리고 한국 공정위의 6대 유형은 "법적으로 금지된 것"의 기준입니다. 세 분류를 겹쳐놓으면 무엇이 보이는지 통합 매핑 테이블과 "어떤 분류를 언제 쓸 것인가" 의사결정 트리를 제공합니다.

read →
분류 지도 ① — Brignull의 12가지 원형 - 다크패턴 해부하기 ep.03
  • series
  • design
  • ux
  • ui
  • darkpattern
  • deceptivedesign
  • brignull
  • taxonomy
  • classification

분류 지도 ① — Brignull의 12가지 원형 - 다크패턴 해부하기 ep.03

인지 편향이 "왜"를 설명했다면, 분류 체계는 "무엇이 있는가"를 정리합니다. Harry Brignull이 정의한 12가지 원형 다크패턴을 각각의 정의, 발생 지점, 모의 UI 예시와 함께 카탈로그화합니다. 이 12유형 카드는 시리즈 전체에서 반복적으로 참조되는 레퍼런스 자산이 됩니다.

read →
다크패턴은 왜 작동하는가 — 인지 편향의 해부학 - 다크패턴 해부하기 ep.02
  • series
  • design
  • ux
  • ui
  • darkpattern
  • deceptivedesign
  • psychology
  • cognitivebias
  • behavioraleconomics
  • lossaversion
  • anchoring

다크패턴은 왜 작동하는가 — 인지 편향의 해부학 - 다크패턴 해부하기 ep.02

다크패턴이 효과적인 이유는 사용자가 "멍청해서"가 아닙니다. 인간의 의사결정 시스템에 구조적인 취약점이 있고, 다크패턴은 그 취약점을 정확히 겨냥합니다. 손실 회피, 기본값 효과, 사회적 증거, 매몰비용, 앵커링 — 5가지 인지 편향이 어떤 다크패턴과 매핑되는지 분석합니다.

read →
다크패턴이란 무엇인가 — 설득과 기만의 경계 - 다크패턴 해부하기 ep.01
  • series
  • design
  • ux
  • ui
  • darkpattern
  • deceptivedesign
  • nudge
  • ethics
  • confirmshaming
  • regulation

다크패턴이란 무엇인가 — 설득과 기만의 경계 - 다크패턴 해부하기 ep.01

같은 "기본값 설정"이 어떤 맥락에서는 사용자를 돕는 넛지가 되고, 어떤 맥락에서는 동의를 가장한 기만이 되는지를 분석합니다. 설득·넛지·다크패턴을 구분하는 세 가지 기준(투명성, 이익 귀속, 동의 가능성)을 제시하고, 즉시 사용할 수 있는 판별 플로우차트를 제공합니다.

read →
다크패턴 해부하기 ep.00
  • series
  • cover
  • design
  • ux
  • ui
  • darkpattern
  • deceptivedesign

다크패턴 해부하기 ep.00

사용자를 속이는 UI는 어떻게 생겼고, 왜 작동하며, 어떻게 피할 수 있는가. 다크패턴에 대해 해부해봅니다.

read →