디자인 시스템11 콘텐츠 모더레이션 UX (시스템 설계, 한국 법령, 디자인 패턴) 솔직히 이건 예상 밖이었습니다. 신고 처리 후 아무 설명 없이 콘텐츠를 삭제했더니 NPS가 5점이 나왔습니다. 사용자가 화난 게 아니라, 그냥 아무것도 몰랐던 겁니다. 그 경험이 저를 콘텐츠 모더레이션 UX를 진지하게 파고들게 만들었습니다.시스템 설계: '검열'이 아니라 '흐름'으로 다뤄야 한다제가 직접 맡았던 커뮤니티 서비스 외주에서, 신고 기능은 있었지만 그 이후 흐름이 없었습니다. 사용자는 본인 게시물이 왜 사라졌는지 알 수 없었고, 이의를 제기할 창구도 없었습니다. 결과는 NPS 5점이었고, 이의제기 비율은 12%에 달했습니다. 모더레이터는 쌓이는 문의에 지쳐갔습니다.콘텐츠 모더레이션을 개별 결정의 집합이 아니라 시스템으로 바라봐야 한다는 관점을 적용한 뒤 흐름이 달라졌습니다. 여기서 콘텐츠 모더.. 2026. 5. 17. Figma 인풋 컴포넌트 (Variants, IME, 라벨) 플레이스홀더를 라벨 대신 쓴 가입 폼 하나가 완료율을 통째로 갉아먹고 있었습니다. 저도 직접 겪은 일입니다. 라벨 원칙 하나를 바꿨더니 완료율이 5%p 올랐고, 그때부터 인풋 컴포넌트 설계를 완전히 다시 공부했습니다. Figma에서 인풋을 제대로 만드는 방법, 한국 환경에서 빠지는 함정까지 정리했습니다.라벨과 플레이스홀더, 이 둘을 혼용하면 생기는 문제가입 폼 외주를 진행하던 중, 디자인 검수 단계에서 한 가지 이상한 피드백이 반복됐습니다. 사용자들이 입력을 시작한 뒤에 "내가 지금 뭘 쓰는 거지?"라고 헷갈린다는 것이었습니다. 원인을 파악해 보니 플레이스홀더(placeholder)가 라벨 역할을 대신하고 있었습니다. 플레이스홀더란 인풋 필드 안에 표시되는 예시 텍스트로, 사용자가 타이핑을 시작하는 순간.. 2026. 5. 12. 뱃지 컴포넌트 (디자인 시스템, 시맨틱 컬러, Storybook) 솔직히 고백하자면, 저는 한때 뱃지 컴포넌트를 '그냥 작은 색깔 동그라미' 정도로 취급했습니다. 외주 프로젝트를 진행하던 중 'Active', '활성', 'On'이 같은 의미인데 서로 다른 컴포넌트에 흩어져 있다는 걸 발견하고 나서야 그 인식이 완전히 바뀌었습니다. 뱃지 하나를 제대로 설계하지 않으면 팀 전체의 커뮤니케이션 비용이 올라간다는 걸, 그 프로젝트에서 몸으로 배웠습니다.디자인 시스템에서 뱃지가 왜 중요한가혹시 지금 만들고 있는 서비스에서 '상태 표시' 레이블이 몇 가지나 뒤섞여 있는지 세어보신 적 있으신가요?디자인 시스템이란 제품 전체에서 일관된 시각 언어와 컴포넌트를 공유하는 설계 체계입니다. 여기서 '일관된 시각 언어'란 동일한 의미를 동일한 UI로 표현한다는 원칙을 뜻합니다. Chakra.. 2026. 5. 7. 디자인 토큰 (네이밍 컨벤션, 토큰 구조, 자동화 파이프라인) 솔직히 저는 디자인 토큰이 그냥 "색깔에 이름 붙이는 것" 정도라고 생각했습니다. 디자인 시스템을 처음 구축하던 시절, 색상 이름을 red, dark-gray, white-background 식으로 저장해 두고는 꽤 체계적이라고 자부했었으니까요. 그 착각이 얼마나 비싼 대가를 치르게 되는지는, 실제로 무너져봐야 알게 됩니다.네이밍 컨벤션 — "이름이 틀리면 시스템 전체가 흔들린다"작년에 B2B SaaS 대시보드 프로젝트에서 디자인 시스템을 처음부터 구축할 때 일입니다. 디자이너 두 명이 각자 익숙한 색상 코드를 쓰다 보니 같은 앱인데 화면마다 분위기가 달랐습니다. 버튼 배경색이 한 화면에서는 #E53935, 다른 화면에서는 #EF5350이었고, 둘 다 "빨간 버튼"으로 통했습니다. 개발자에게 "이 빨간색.. 2026. 4. 7. 목업 디자인 도구 (Adobe XD, 프로토타입, 웹 접근성) Adobe XD로 목업을 처음 만들던 날, 제 디자인이 개발자에게 전달되는 순간 절반 이상의 의도가 사라졌습니다. 색상 코드는 맞는데 간격이 달랐고, 버튼 상태는 하나만 전달됐으며, 접근성 요구사항은 아예 누락됐습니다. 와이어프레임에서 목업으로, 목업에서 프로토타입으로 진화하는 과정에서 UX 디자이너가 놓치기 쉬운 것들이 생각보다 많습니다. Adobe XD는 이러한 격차를 줄이는 강력한 도구지만, 도구만으로는 충분하지 않습니다.Adobe XD 목업 제작의 핵심 기능와이어프레임과 목업의 차이를 제대로 이해하지 못하면 디자인 과정 자체가 비효율적으로 흐릅니다. 와이어프레임(Wireframe)이란 페이지의 핵심 요소 구조와 배치를 보여주는 기본 레이아웃으로, 보통 그레이스케일로 표현되며 시각적 스타일은 배제합.. 2026. 3. 15. 이전 1 2 다음
