전체 글125 웹폼 에러 메시지 (blur 검증, 인라인 검증, 메시지 카피) 솔직히 고백하자면, 저는 꽤 오랫동안 폼 검증을 '그냥 되면 되는 것'으로 여겼습니다. 타입을 확인하고, 빈 값을 막고, 서버에 넘기면 끝이라고 생각했죠. 그러다 SaaS 가입 폼 외주에서 "아직 입력하는 중인데 빨간 X가 뜬다"는 피드백을 6건 연속으로 받고 나서야 검증 시점 하나가 가입 완료율을 통째로 흔들 수 있다는 걸 실감했습니다. 그때부터 폼 검증 UX를 제대로 들여다보기 시작했고, 지금은 외주 5건에 같은 패턴을 재사용하는 단계까지 왔습니다.검증 시점: 언제 에러를 보여줄 것인가가장 먼저 짚어야 할 질문은 "에러를 언제 보여줄 것인가"입니다. 저도 처음에는 사용자가 글자를 입력하는 즉시 검증하면 더 빠른 피드백이 되지 않을까 생각했습니다. 결과는 처참했습니다. 사용자가 이메일 주소를 절반쯤 치.. 2026. 5. 8. 앱 온보딩 설계 (코치마크, 활성화 지표, 리텐션) 앱을 처음 켰을 때 화면 가득 설명이 쏟아지는 경험, 한 번쯤 있으실 겁니다. 저도 그랬습니다. 그리고 직전 핀테크 앱 외주에서 그 반대편을 직접 설계해야 했을 때, 처음엔 '많이 알려줄수록 좋겠지'라는 생각으로 5단계짜리 풀스크린 가이드를 만들었습니다. 결과는 예상 밖이었습니다. 사용자 인터뷰에서 "튜토리얼이 너무 길어서 중간에 꺼버렸다"는 피드백이 다섯 건이나 나왔습니다. 온보딩이 오히려 이탈의 원인이 된 셈입니다.코치마크 3개로 D1 리텐션을 12%p 끌어올린 이유그 피드백을 받고 바로 구조를 뜯어고쳤습니다. 5단계 풀스크린을 없애고, 코치마크(Coach Mark) 3개만 남겼습니다. 코치마크란 특정 UI 요소 위에 말풍선이나 하이라이트로 설명을 덧붙이는 온보딩 패턴으로, 사용자가 실제로 해당 기능.. 2026. 5. 7. 뱃지 컴포넌트 (디자인 시스템, 시맨틱 컬러, Storybook) 솔직히 고백하자면, 저는 한때 뱃지 컴포넌트를 '그냥 작은 색깔 동그라미' 정도로 취급했습니다. 외주 프로젝트를 진행하던 중 'Active', '활성', 'On'이 같은 의미인데 서로 다른 컴포넌트에 흩어져 있다는 걸 발견하고 나서야 그 인식이 완전히 바뀌었습니다. 뱃지 하나를 제대로 설계하지 않으면 팀 전체의 커뮤니케이션 비용이 올라간다는 걸, 그 프로젝트에서 몸으로 배웠습니다.디자인 시스템에서 뱃지가 왜 중요한가혹시 지금 만들고 있는 서비스에서 '상태 표시' 레이블이 몇 가지나 뒤섞여 있는지 세어보신 적 있으신가요?디자인 시스템이란 제품 전체에서 일관된 시각 언어와 컴포넌트를 공유하는 설계 체계입니다. 여기서 '일관된 시각 언어'란 동일한 의미를 동일한 UI로 표현한다는 원칙을 뜻합니다. Chakra.. 2026. 5. 7. Figma 패럴랙스 (스크롤애니메이션, 모바일최적화, GSAP) 랜딩 페이지에 패럴랙스 효과를 넣었다가 모바일 사용자에게 "화면이 어지럽다"는 피드백을 받아본 적 있으신가요? 저는 있습니다. 브랜드 랜딩 외주에서 데스크톱과 모바일에 동일한 강도로 효과를 적용했다가 5명에게서 같은 말을 들었습니다. 그 경험이 지금 이 글을 쓰게 만든 출발점입니다.Figma 안에서 패럴랙스를 시뮬레이션한다는 것혹시 디자이너로 일하면서 "이 효과를 개발자한테 어떻게 설명하지?"라고 막막했던 순간이 있으셨나요? 패럴랙스(parallax) 효과는 특히 그렇습니다. 패럴랙스란 스크롤할 때 전경과 배경 레이어가 서로 다른 속도로 움직이면서 원근감과 공간감을 만들어 내는 기법입니다. 말로 설명하면 쉽지만, 실제 느낌을 전달하기는 어렵습니다.Figma의 스마트 애니메이트(Smart Animate) .. 2026. 5. 6. 다이얼로그 설계 (의사결정 트리, 보텀시트, 컴포넌트) 편집 화면을 모달로 띄웠더니 "옆 데이터를 봐야 하는데 가린다"는 컴플레인이 들어온 적 있으신가요. 저도 SaaS 대시보드 외주에서 똑같이 당했습니다. 그 경험이 계기가 되어 다이얼로그 설계 기준을 처음부터 다시 정리하게 됐고, 지금은 외주 5건에 같은 가이드를 재사용 중입니다.의사결정 트리: 모달을 열기 전에 먼저 물어야 할 것모달을 열기 전에 스스로에게 딱 하나만 물어보면 됩니다. "사용자가 이 작업을 하면서 뒤에 있는 화면을 참조해야 하는가?" 이 질문에 '예'가 나오면 모달은 이미 틀린 선택입니다.저는 이걸 직접 겪고 나서야 깨달았습니다. 상세 편집 화면을 모달로 구성했을 때 편집 완료율이 64%에 머물렀는데, 사이드 패널로 바꾼 후 79%까지 올랐습니다. 15%포인트 차이가 단순히 컴포넌트 하나.. 2026. 5. 6. 피그마 3D 캐러셀 (스마트 애니메이트, 자동재생, 마스킹) 직전 외주에서 메인 비주얼 캐러셀의 자동재생을 끈 것만으로 CTA 클릭률이 14%에서 22%로 뛰었습니다. 솔직히 이건 저도 예상 밖이었습니다. 그 경험 이후로 캐러셀을 설계할 때 완전히 다른 기준으로 접근하게 됐고, 피그마에서 3D 캐러셀을 구현하는 방법도 다시 들여다보게 됐습니다.스마트 애니메이트로 3D 전환 효과 만들기피그마에서 3D 캐러셀의 핵심은 스마트 애니메이트(Smart Animate)입니다. 스마트 애니메이트란 두 프레임 사이에서 동일한 레이어 이름을 가진 요소를 자동으로 감지해 위치·크기·불투명도 변화를 부드럽게 연결해주는 피그마 전용 트랜지션 방식입니다. 일반 디졸브나 슬라이드 전환과는 달리, 요소 하나하나가 마치 실제로 이동하는 것처럼 보이기 때문에 3D 회전 효과를 낼 때 특히 효과.. 2026. 5. 3. 이전 1 ··· 8 9 10 11 12 13 14 ··· 21 다음
