UX설계5 SwiftUI 알림 UX (Rive 애니메이션, 상태머신, 묶음규칙) 솔직히 고백하자면, 저는 알림 화면을 단순 리스트로 쌓아두는 것이 당연하다고 생각했습니다. 그러다 커뮤니티 앱 외주에서 알림 진입 후 행동 전환율이 18%에 머무는 것을 보고 뭔가 잘못됐다는 걸 깨달았습니다. 그 과정에서 배운 Rive 애니메이션 연동과 알림 묶음 규칙 설계를 지금부터 풀어보겠습니다.Rive 애니메이션과 SwiftUI 상태머신 연결하기처음 Rive 파일을 SwiftUI 프로젝트에 붙였을 때 솔직히 당황했습니다. 캐릭터가 그냥 멈춰 있는데, 이게 맞는 건지 틀린 건지조차 몰랐습니다. 알고 보니 상태머신(State Machine)을 따로 구동해줘야 했습니다. 여기서 상태머신이란 애니메이션의 여러 동작을 조건과 입력값에 따라 전환시키는 논리 구조입니다. 단순히 타임라인을 재생하는 것과 달리, .. 2026. 6. 6. 카드 UI 설계 (필터 칩, 마이크로모션, 한국어 가이드) 솔직히 말씀드리면, 저는 필터 UI를 드롭다운으로 구현하는 게 당연하다고 생각했던 시절이 있었습니다. 콘텐츠 큐레이션 SaaS 외주를 맡았을 때도 처음엔 그냥 드롭다운으로 납품할 생각이었습니다. 그런데 칩(chip) 컴포넌트로 바꾼 뒤 필터 적용률이 22%에서 47%로 뛰었고, 그때부터 카드 UI와 내부 컴포넌트 설계를 제대로 들여다보기 시작했습니다.카드 UI가 왜 필터 칩과 함께 쓰이는가카드 UI는 단순히 "예쁜 박스"가 아닙니다. 하나의 카드는 단일 주제에 대한 정보와 액션을 담는 원자적 단위입니다. 여기서 원자적(atomic)이란 더 이상 쪼갤 수 없는 최소 단위를 의미합니다. 카드를 반으로 나누면 의미가 사라집니다. 이 원자성 덕분에 카드는 콘텐츠 탐색(Content Exploration) 환경에.. 2026. 6. 5. 로딩 UX 개선 (체감 시간, 스켈레톤 UI, 낙관적 업데이트) 이커머스 앱 상품 목록 페이지를 개편하면서 처음에는 실제 로딩 속도를 줄이는 데만 집중했습니다. 그런데 막상 배포하고 보니 사용자 반응이 기대만 못했습니다. 알고 보니 문제는 속도가 아니라 기다리는 동안 사용자가 느끼는 불안감이었습니다. 실제 시간과 체감 시간은 전혀 다른 문제였고, 저는 엉뚱한 곳을 파고 있었던 셈입니다.실제 시간이 아니라 체감 시간이 UX를 결정한다일반적으로 로딩 속도를 개선하면 사용자 만족도가 오른다고 알려져 있지만, 제 경험상 이건 절반만 맞는 말입니다. 서버 응답 시간을 0.5초 줄이는 데 며칠을 쏟아도 사용자는 그 차이를 인식하지 못합니다. 반면 화면이 바뀌고 있다는 시각적 신호 하나를 추가했더니 체감 대기 시간이 눈에 띄게 줄었습니다.이 현상을 이해하려면 퍼시브드 퍼포먼스(P.. 2026. 4. 28. 피그마 프로토타이핑 (온클릭, 오버레이, 스마트애니메이트) 기획서를 열심히 써서 넘겼는데 회의실에서 돌아오는 말이 "이게 정확히 어떻게 동작하는 건가요?"였던 경험, 한 번쯤 있으실 겁니다. 저도 그랬습니다. 텍스트로 설명하는 데 한계를 느끼고 피그마 프로토타이핑을 제대로 파고들기 시작했는데, 막상 써보니 알려진 것과 다른 점도 있었고, 예상보다 강력한 부분도 있었습니다.말로 설명하던 시절과 프로토타입이 바꾼 것피그마 프로토타이핑은 디자인한 화면을 실제로 작동하는 것처럼 인터랙티브하게 연결해 테스트할 수 있는 기능입니다. UI 설계 단계에서 개발 전에 이해관계자와 소통하거나 사용성을 검증하는 데 활용됩니다.일반적으로 프로토타이핑 툴은 복잡하고 진입 장벽이 높다고 알려져 있지만, 제가 직접 써봤는데 피그마는 그렇지 않았습니다. 프로토타입 모드에서 요소를 선택하고 .. 2026. 4. 15. 서비스 블루프린트 (백스테이지, 가시선, 실패지점) 고객 불만의 진짜 원인이 UI가 아닌 백스테이지 시스템에 있다는 사실, 블루프린트를 직접 그려보기 전까지는 저도 몰랐습니다. 서비스 블루프린트(Service Blueprint)는 서비스 전달 과정을 단계별로 시각화한 설계 지도입니다. 이 한 장의 지도가 팀의 논의 방향을 완전히 바꿔놓은 경험을 공유합니다.백스테이지를 보지 못하면 문제의 절반을 놓친다서비스 디자인 프로젝트를 처음 맡았을 때, 저는 솔직히 블루프린트를 형식적인 산출물로 생각했습니다. 고객 여정 지도(Customer Journey Map)와 비슷한 거 아닌가 싶었거든요. 그런데 실제로 작성해보니 전혀 달랐습니다.서비스 블루프린트의 가장 큰 특징은 가시선(Line of Visibility)을 기준으로 서비스를 두 층으로 나눈다는 점입니다. 여기.. 2026. 4. 12. 이전 1 다음
