전체 글125 스낵바 알림 (컴포넌트, 큐 관리, 다크모드) 장바구니 담기 버튼을 눌렀을 때 화면 절반을 가리는 모달이 뜨면, 사용자는 본능적으로 "왜 자꾸 방해하냐"고 느낍니다. 저도 직접 겪었습니다. 이커머스 모바일 앱 외주에서 같은 이유로 한 달에 12건의 컴플레인이 들어왔고, 모달을 스낵바로 교체한 뒤 컴플레인이 0건이 됐습니다. 스낵바 하나가 UX 전체를 바꿀 수 있다는 걸 그때 처음으로 실감했습니다.모달 대신 스낵바를 쓰는 이유모달(Modal)이란 사용자의 현재 작업을 강제로 중단시키고 확인을 요구하는 전면 팝업 방식입니다. 정보 전달보다 사용자의 행동을 차단하는 쪽에 가깝기 때문에, 단순 확인 메시지에 모달을 쓰면 불필요한 인지 부하가 발생합니다.반면 스낵바(Snackbar)는 화면 하단에 잠시 떴다가 사라지는 비침입형 알림 패턴입니다. 사용자가 하던.. 2026. 5. 3. 빈 화면 UX (Empty State, CTA 설계, 활성화율) 솔직히 저는 빈 화면을 디자인이라고 생각하지 않았습니다. '데이터가 없습니다' 한 줄이면 충분하다고 여겼으니까요. 그 생각이 바뀐 건 B2B SaaS 대시보드 외주를 진행하면서입니다. 빈 상태 화면 하나 바꿨을 뿐인데 7일 활성화율이 38%에서 61%로 뛰었습니다. 그때 처음 깨달았습니다. 빈 화면은 디자인의 빈 공간이 아니라, 사용자가 이탈하거나 남거나를 결정하는 가장 중요한 접점이라는 것을.Empty State 설계, 왜 한 줄 텍스트로는 안 되는가Empty State란 앱이나 서비스에서 보여줄 콘텐츠가 없을 때 나타나는 화면 상태를 의미합니다. 쉽게 말해 장바구니가 비어 있거나, 검색 결과가 없거나, 처음 가입해서 아직 데이터가 없는 그 순간입니다.제가 직접 겪어보니, 이 순간에 아무런 안내 없이 .. 2026. 5. 2. UI 모션 디자인 (이징 함수, 타이밍, spring 물리) 디자이너라면 한 번쯤 클라이언트에게 "좀 더 부드럽게 해주세요"라는 말을 들어봤을 겁니다. 저도 5년 차 프리랜서로 일하면서 이 한마디 앞에서 막막했던 적이 한두 번이 아니었습니다. '부드러움'은 감각이 아니라 수치입니다. 이징 함수와 타이밍 구간을 제대로 이해하고 나서야 저는 그 막막함에서 벗어났습니다.이징 함수, 숫자로 부드러움을 만드는 법일반적으로 모션 디자인에서 200ms 안팎의 트랜지션이면 충분하다고 알려져 있습니다. 저도 그렇게 믿고 핀테크 모바일 앱 외주를 진행했었는데, 실제 사용자 테스트 결과는 생각과 달랐습니다.디폴트로 적용해둔 linear 200ms 트랜지션을 ease-out 280ms로 바꿨을 뿐인데, NPS(Net Promoter Score)가 6점에서 8점으로 올랐습니다. NPS란.. 2026. 5. 2. i18n 국제화 (로케일, RTL 설계, 현지화) 글로벌 SaaS 프로젝트에서 영문 단일 UI를 6개 로케일로 확장하는 작업을 맡았을 때, 저는 솔직히 "번역만 붙이면 되지 않나"라고 생각했습니다. 아메리카노 한 잔 놓고 세팅을 시작했는데, 30분이 지나도록 화면이 제대로 나오지 않았습니다. 그때서야 깨달았습니다. 번역은 시작도 아니었다는 것을.로케일 확장, 왜 이렇게 복잡한 걸까i18n(internationalization)이란 코드 안에 하드코딩된 텍스트·날짜·통화 형식을 모두 분리해, 언어와 지역이 바뀌어도 소스 로직을 건드리지 않고 UI를 전환할 수 있도록 설계하는 아키텍처 작업입니다. 여기서 국제화(i18n)는 '18'이 i와 n 사이의 글자 수에서 나온 약어이며, 단순 번역 작업인 l10n(localization)과는 역할이 다릅니다. l10.. 2026. 5. 1. Core Web Vitals (LCP, CLS, INP) 솔직히 저는 Core Web Vitals를 처음 접했을 때 "그냥 SEO 점수 맞추는 용도겠지"라고 가볍게 봤습니다. 그런데 콘텐츠 미디어 사이트 메인 페이지를 직접 개선해보면서 생각이 완전히 바뀌었습니다. 세 지표가 망가진 상태에서는 아무리 콘텐츠가 좋아도 사용자가 떠난다는 걸 수치로 확인하고 나서야 진지하게 파고들게 됐습니다.LCP, 가장 중요한 콘텐츠가 언제 나타나는가처음 작업을 시작했을 때 LCP(Largest Contentful Paint) 수치가 4.2초였습니다. LCP란 페이지에서 가장 큰 시각적 요소, 보통 hero 이미지나 대형 텍스트 블록이 화면에 완전히 그려지는 데 걸리는 시간을 의미합니다. Google은 2.5초 이하를 양호 기준으로 권고하고 있습니다(출처: Google Search.. 2026. 5. 1. 체크아웃 전환율 (게스트결제, 폼최적화, 신뢰설계) 강제 회원가입 하나를 없앴더니 체크아웃 완료율이 54%에서 72%로 뛰었습니다. 저도 처음엔 이 정도 차이가 날 거라고는 솔직히 예상하지 못했습니다. 체크아웃 마찰을 줄이는 것이 광고비보다 먼저라는 걸, 직접 겪고 나서야 확실히 알게 됐습니다.게스트 체크아웃이 전환율을 바꾸는 이유이커머스에서 전환율(Conversion Rate)이 정체되면 가장 먼저 의심해야 할 지점이 회원가입 강제 여부입니다. 전환율이란 사이트에 방문한 사람 중 실제로 구매까지 완료한 비율을 뜻합니다. 그런데 많은 쇼핑몰이 아직도 결제 전에 회원 가입을 요구합니다.Baymard Institute 조사에 따르면, 장바구니 이탈 원인 1위가 강제 회원가입으로 전체 이탈의 24%를 차지합니다(출처: Baymard Institute). 한 번.. 2026. 4. 29. 이전 1 ··· 9 10 11 12 13 14 15 ··· 21 다음
