전체 글132 피그마 3D 캐러셀 (스마트 애니메이트, 자동재생, 마스킹) 직전 외주에서 메인 비주얼 캐러셀의 자동재생을 끈 것만으로 CTA 클릭률이 14%에서 22%로 뛰었습니다. 솔직히 이건 저도 예상 밖이었습니다. 그 경험 이후로 캐러셀을 설계할 때 완전히 다른 기준으로 접근하게 됐고, 피그마에서 3D 캐러셀을 구현하는 방법도 다시 들여다보게 됐습니다.스마트 애니메이트로 3D 전환 효과 만들기피그마에서 3D 캐러셀의 핵심은 스마트 애니메이트(Smart Animate)입니다. 스마트 애니메이트란 두 프레임 사이에서 동일한 레이어 이름을 가진 요소를 자동으로 감지해 위치·크기·불투명도 변화를 부드럽게 연결해주는 피그마 전용 트랜지션 방식입니다. 일반 디졸브나 슬라이드 전환과는 달리, 요소 하나하나가 마치 실제로 이동하는 것처럼 보이기 때문에 3D 회전 효과를 낼 때 특히 효과.. 2026. 5. 3. 스낵바 알림 (컴포넌트, 큐 관리, 다크모드) 장바구니 담기 버튼을 눌렀을 때 화면 절반을 가리는 모달이 뜨면, 사용자는 본능적으로 "왜 자꾸 방해하냐"고 느낍니다. 저도 직접 겪었습니다. 이커머스 모바일 앱 외주에서 같은 이유로 한 달에 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. 이전 1 ··· 10 11 12 13 14 15 16 ··· 22 다음
