사용자 경험3 칩 컴포넌트 설계 (변형 구조, 단축 옵션, 도메인 최적화) 예약 시스템 외주를 맡았을 때 처음 맞닥뜨린 문제는 캘린더 입력이 아니었습니다. 정작 발목을 잡은 건 칩 컴포넌트였습니다. 첫 사용자 성공률이 64%에 머물렀고, 원인을 파고들수록 칩 설계 방식이 UX 전체에 얼마나 깊이 연결돼 있는지 실감했습니다. 컴포넌트 하나를 어떻게 만드느냐가 결국 전환율 숫자를 바꿉니다.칩 컴포넌트의 변형 구조, 왜 셋으로 나뉘는가처음 피그마에서 칩 컴포넌트를 설계할 때 저도 의아했던 부분이 있습니다. 액션 칩(Action Chip), 초이스 칩(Choice Chip), 필터 칩(Filter Chip)이 시각적으로는 동일한 형태를 가지는데 왜 굳이 세 가지로 분리하느냐는 것이었습니다.여기서 칩 컴포넌트란 사용자가 정보를 입력하거나, 선택을 내리거나, 콘텐츠를 필터링하거나, 특정 .. 2026. 6. 4. 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. 와이어프레임 작성법 (레이아웃 구조, 반응형 설계, 디지털 전환) 저는 처음 와이어프레임을 그릴 때 도구 선택부터 고민했습니다. Figma, Sketch, Adobe XD 등 10가지가 넘는 도구를 써보며 깨달은 건, 도구보다 '이 와이어프레임으로 무엇을 검증할 것인가'가 훨씬 중요하다는 점이었습니다. 정보 구조를 검증할 때는 Whimsical의 플로우차트가 가장 빠르고, 인터랙션 검증은 Figma 프로토타이핑이 효율적이며, 이해관계자와의 커뮤니케이션에는 Balsamiq의 스케치 스타일이 최적이었습니다. 목적에 맞는 도구를 선택하는 것만으로 작업 시간을 30%단축할 수 있었습니다.웹사이트 레이아웃 구조와 종이 와이어프레임와이어프레임(Wireframe)은 제품이나 화면의 골격을 나타내는 초기 설계도입니다. 여기서 와이어프레임이란 주로 도형, 선, 최소한의 텍스트로 구성.. 2026. 3. 15. 이전 1 다음
