만식

눈에 보이는 그대로의 컬러 시스템

2026-05-03T12:06:49Z

*원문을 번역한 글입니다. *원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다. 몇 주 전 빨간색 계열의 컬러를 찾으려고 Tailwind v4 문서를 훑어보고 있었습니다. 그때 이 코드를 발견했습니다. --color-red-500: oklch(0.637 0.237 25.331); Hex도 HSL도 아닌 완전히 처음 보는

아이콘 디자인 : 점(Dots) 활용법

2026-04-29T11:46:25Z

*원문을 번역한 글입니다. *원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다. 이번 글은 아이콘 디자인 심화 팁 시리즈의 첫 번째 순서입니다. 타이포그래피 디자인 원리를 적극 활용해 아이콘 완성도를 한 차원 높여주는 시각적 효과들을 살펴보겠습니다. 먼저 가장 기본적인 스마일 아이콘을 통해 점을 어떻게 다루어야 하는지 알

클로드 디자인의 첫인상 - 솔직히 인정할 수밖에 없었습니다.

2026-04-20T23:43:33Z

*원문을 번역한 글입니다. *원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다. 구글 스티치(Google Stitch), 클로드 디자인(Claude Design), 피그마 메이크(Figma Make) 전격 비교 오늘날 대부분의 디자인 시스템은 업계 표준인 피그마를 기반으로 구축됩니다. 컴포넌트나 스타일 그리고 패턴을

'바이브 코딩'이 유행한 지 1년 - AI는 여전히 인간의 노력과 전문성을 대체하지 못합니다

2026-04-12T13:17:38Z

*원문을 번역한 글입니다. *원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다. Andrej Karpathy가 '바이브 코딩'이라는 용어를 만든 지 1년이 조금 넘었습니다. 자연어만으로 누구나 앱을 만들 수 있다는 아이디어는 지난 2025년 들불처럼 빠르게 번져 나갔습니다. 당시 우리는 직관과 챗봇 프롬프트로 개발된 코

만화 속 뱀 캐릭터에 공감하기 - 이해하기 어려운 사용자에게 공감하는 방법

2026-04-06T16:49:56Z

*원문을 번역한 글입니다. *원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다. 공감은 프로덕트 디자인의 기초입니다. 우리는 공감을 기르고 지도로 만들며 이를 바탕으로 설계하는 일에 관해 끊임없이 이야기합니다. 하지만 공감이 자연스럽게 일어나지 않을 때는 어떻게 해야 할까요? 사용자와 공통점을 찾기 어렵고 그들의 행동

대화는 줄이고, UI는 빠르게 — Lovable AI - 핵심은 프롬프트를 길게 쓰는 것이 아닙니다.

2026-03-29T23:30:14Z

*원문을 번역한 글입니다. *원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다. Lovable을 활용할 때 프롬프트를 길게 쓰는 것은 중요하지 않습니다. AI가 코딩을 시작하기 전 디자이너처럼 사고하는 과정이 핵심입니다. 저는 수백 개의 프로젝트 성패를 지켜보며 반복되는 특정 패턴을 발견했습니다. 뛰어난 빌더는 단순히 지

아마존에 25억 달러의 손실을 안긴 다크 패턴 - 다크 패턴이 실제로 법적 책임으로 이어지는 방식

2026-03-24T23:12:57Z

*원문을 번역한 글입니다. *원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다. 연휴 시즌이 코앞으로 다가오면서 한참 온라인 쇼핑에 빠져 지내던 중, 최근 아마존에서 매우 불쾌한 트렌드를 하나 목격했습니다. 상품 가격 바로 옆에 강렬한 빨간색으로 '-25%' 할인 문구가 강조되어 있었죠. 여기까지는 딱히 이상할 게 없어

컴포넌트 설정의 간소화 - 피그마 슬롯이 가져올 컴포지션의 시대

2026-03-15T11:10:25Z

*원문을 번역한 글입니다. *원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다. 고도화 단계에 접어든 피그마 컴포넌트의 속성 패널을 살펴보면 이른바 ‘부끄러운 스크롤바’를 마주하게 될지도 모릅니다. 아이콘 노출 여부나 레이아웃 방향(상하/좌우)처럼 요소를 미세하게 조정하는 수많은 속성이 끝없이 나열되어 있기 때문입니다.

디자인팀에 UX라이터가 필요한 이유 - 인터페이스 안에서 길을 잃은 사용자들

2026-03-07T15:48:45Z

*원문을 번역한 글입니다. *원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다. 현재 업계 전반에 휘몰아치는 감원 바람 속에서 수십 년 경력의 실력자들조차 구조조정의 칼날을 피하지 못하고 있습니다. 이 과정에서 수많은 디지털 프로덕트 디자인 팀이 글을 다루는 전문가들과 작별하는 중입니다. 하지만 인력이 줄어들 때마다 우

구글 맵 vs 애플 지도: 작은 UX 차이 - 동일한 문제를 서로 다른 방식으로 해결하는 과정을 비교해보기

2026-03-02T10:24:51Z

*원문을 번역한 글입니다. *원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다. 내비게이션 앱을 켤 때 디자인을 먼저 생각하는 사용자는 없습니다. 그저 목적지까지 안전하고 편하게 도착하고 싶을 뿐입니다. 하지만 그 단순한 경험 뒤에는 운전 방식이나 시선이 머무는 곳 그리고 앱 사용 시 느끼는 확신의 정도에 영향을 주는 수

변화하는 시스템 속에서 디자인하기 - 더 나은 디자인 의사결정을 위한 제품 생애주기 관점

2026-02-22T09:48:55Z

*원문을 번역한 글입니다. *원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다. 디자인은 보통 문제를 확대하는 것에서 시작합니다. 눈앞의 문제를 해결하는 것이 우선순위가 되며 제품의 전반적인 상태는 뒷전으로 밀려나곤 합니다. 시간이 흐를수록 이런 작업 방식은 의도가 좋았더라도 시야를 좁게 만드는 '터널 시야' 현상을 초래

데이터 시각화, 직관적으로 디자인하기 - 데이터 시각화가 도구가 아닌 퍼즐이 되어버리는 순간

2026-02-08T14:21:56Z

*원문 출처를 번역한 글입니다. 종종 나를 완전히 혼란스럽게 만드는 시각화 결과물을 마주하곤 합니다. 차트에 무엇이 표시되어 있는지는 알겠지만 뇌가 그 비중을 가늠하지 못하거나 이 시각화가 도대체 왜 존재하는지 이해하지 못하는 경우입니다. 이런 차트를 어떻게 '읽어내야' 할지 파악하는 데는 꽤 많은 시간이 필요합니다. 혹시 남의 일 같지 않으신가요?

UX의 중요성을 증명하는 우버의 기능 - 한밤중 공항에서 겪은 악몽이 UX에 관한 가장 중요한 교훈을 준 경험

2026-02-08T13:48:40Z

*원문 출처를 번역한 글입니다. 이런 악몽 같은 상황을 상상해 보세요. 자정이 넘은 공항에, 비행기는 방금 착륙했고 몸은 녹초가 됐습니다. 우버 앱은 "검정색 도요타 캠리"가 도착할 예정이라며 기분 좋게 알림을 띄웁니다. 참 좋네요! 승차 구역에 검정색 차량만 20대 정도 서 있다는 점만 빼면 말입니다. 드라이버의 인내심이 바닥나는 동안 여러분은 길 잃은

보드게임 디자인 속의 UX - 보드게임을 프로덕트로 가정하고 UX 실무 기법들을 활용해 UI 개선해보기

2026-01-27T06:49:48Z

*원문 출처를 번역한 글입니다. UX 전문가로서 보드게임 디자인과 UX 사이의 상관관계를 무시하기란 쉽지 않습니다. 페르소나 설정부터 프로토타이핑, 사용성 테스트, 그리고 콘텐츠 계층 구조 설계에 이르기까지... 두 분야의 유사성은 놀라울 정도입니다. 만약 당신이 보드게임 디자이너라면, 아마 자신도 모르는 사이에 이미 이런 작업들을 수행하고 있을 것입니다

설명이 필요한 UI는 실패한 디자인입니다. - 사용자는 가이드를 정독하지 않습니다.

2026-01-26T14:42:29Z

*원문 출처를 번역한 글입니다. 지난달 한 사용성 테스트를 참관했는데 어떤 사용자가 저장 버튼을 찾느라 3분이나 헤매는 모습을 보았습니다. 버튼은 바로 그 자리에 있었죠. 우측 상단에 크고 파란색으로요. 하지만 버튼에는 '저장' 대신 '변경 사항 전송'이라고 적혀 있었습니다. 결국 사용자는 포기하고 탭을 닫아버렸고, 2시간 동안 작업한 결과물은 날아가 버

바쁜 사용자를 위한 제품 디자인

2026-01-21T11:05:14Z

*원문 출처를 번역한 글입니다. 예전에 나는 사용자들이 호기심이 많다고 생각했습니다. 눈에 띄는 곳에 두기만 하면 사용자가 찾아서 클릭해 볼 것이라고 믿었죠. 순진한 착각이라기보다는, 디자이너들이 흔히 빠지기 쉬운 '전문적인 편견'에 가까웠습니다. 사용자가 가이드를 읽기 위해 잠시 멈추고, 툴팁을 보려고 마우스를 올리고, 내가 왜 이런 인터랙션을 설계했

면접관에게 매력적이지 않은 UX 포트폴리오

2026-01-12T03:46:19Z

*원문 출처를 번역한 글입니다. 디자인과 비즈니스 사이의 간극 지난 3년 동안 UX 매니저로 일하며 신입부터 시니어까지 수백 개의 포트폴리오를 검토했습니다. 그 과정에서 한 가지 일관된 패턴을 발견할 수 있었습니다. 주니어에서 미들급 디자이너 중 포트폴리오에 수치화된 지표를 포함하는 경우는 고작 10% 남짓이었습니다. 시니어급조차도 지표를 제시할 때

UI 디자인을 위한 Google Stitch 활용법

2026-01-03T16:37:59Z

*원문 출처를 번역한 글입니다. "아이디어에서 앱까지(From idea to app)"는 구글의 AI 기반 UI 생성 도구인 'Stitch'가 내세우는 슬로건입니다. 한동안 이 툴을 직접 사용해 보며 한 가지 명확한 사실을 깨달았습니다. Stitch는 단순히 "대신 최종 UI 디자인을 완성해 주는" 툴이 아니라는 점입니다. 그보다는 디자이너가 겪는 '빈

당신의 디자인 시스템은 AI에 친화적이지 않습니다 - AI 시대를 살아가는 디자이너를 위한 객체지향적 사고 실무 가이드

2025-12-26T13:49:06Z

*원문 출처를 번역한 글입니다. 어떤 기분인지 다들 아실 겁니다. AI 도구를 써서 레이아웃을 빠르게 하나 뽑아봅니다. 스크린샷으로 볼 때는 아주 완벽해 보이죠. 하지만 막상 실제로 써보려고 하면 모든 게 엉망진창이 됩니다. '버튼'은 그냥 파란색 사각형일 뿐입니다. 간격은 디자인 토큰이 아니라 픽셀값으로 하드코딩되어 있죠. 카드처럼 보이는 컴포넌트

접근성 디자인과 포용적 디자인의 차이점 - 각 용어의 정의와 구체적인 사례를 통해 그 차이점을 소개합니다.

2025-12-26T13:44:25Z

*원문 출처를 번역한 글입니다. 들어가며 그동안 접근성과 포용성, 그리고 포용적 디자인에 대해 강연하고 글을 쓰면서, 이 용어들이 얼마나 자주 혼용되는지 체감해 왔습니다. 특히 2025년 6월 28일 유럽 접근성법(EAA, EN 301 549)이 적용됨에 따라, 이제는 이 용어들의 차이를 명확히 짚고 넘어가야 할 때라고 생각했습니다. 접근성 (Acces