화자 초상 시각화 강화로 리딩 패널 UX 개선
목차
리딩 패널에 화자 소개 카드 컴포넌트를 추가하고, 아바타와 캐릭터 이미지를 확대했다. 사용자가 콘텐츠를 소비할 때 그 화자가 누구인지 시각적으로 더 빨리, 더 명확하게 인식하게 하려는 의도다.
시각적 계층구조와 사용자 초점
이 작업의 핵심은 화자를 부각하는 것이었다. 기존에는 아바타가 작게 끼워 있거나 명패가 텍스트 형태로만 있었다면, 이제는 대형 초상과 함께 이름을 강조 표시하는 방식으로 변경했다. 특히 "Haneul" 같은 특정 화자의 경우, 그들의 정체성과 브랜드를 더 강하게 드러낼 수 있다.
이렇게 설계한 이유는 첫 인상이 중요하기 때문이다. 사용자가 리딩 컨텐츠(음악, 낭독, 또는 비슷한 경험)를 재생할 때, 누가 제공하는 콘텐츠인지가 신뢰와 기대감을 좌우한다. 스포티파이의 아티스트 카드, 팟캐스트의 진행자 프로필, 오디오북의 성우 정보를 생각해 보면, 화자의 가시성이 높을수록 사용자는 그 콘텐츠에 더 집중하는 경향이 있다.
반응형 설계와 리스크
한 가지 주의할 점은, 큰 초상과 명패가 모든 화면 크기에서 균형잡혀야 한다는 것이다. reading-panel.tsx 같은 동적 라우트 컴포넌트는 데스크톱, 태블릿, 모바일을 가리지 않고 들어온다. 이미지를 "확대"할 때 깨지는 화면, 텍스트가 겹치거나 overflow 되는 상황이 생기기 쉽다.
실제로 이런 UI 개선을 할 때 팀에서 자주 나누는 고민이 있다.
- "얼마나 크게?" — 초상 이미지의 해상도와 크기를 어디까지 올려야 UX를 망치지 않나?
- "모바일은?" — 작은 화면에서 대형 초상은 불필요한 스크롤만 늘리지 않나?
- "캐싱과 성능" — 아바타 여러 종류가 모두 고해상도라면 로딩 시간이 늘지 않나?
이 부분은 코드 리뷰 때 꼭 짚고 넘어가야 한다. image 컴포넌트에 srcSet이나 sizes 속성이 제대로 들어갔는지, 그리고 Haneul 같은 특정 캐릭터만 초상이 있다면 fallback 처리는 어떻게 했는지 확인해야 한다.
팀 측면과 우선순위
이런 시각화 개선이 왜 우선순위가 됐을까? 보통 백로그에서 밀려나는 작업이기 때문이다. "기능 추가도 많은데 왜 UI를…" 하는 의문이 있을 수 있다.
하지만 리딩 경험은 다르다. 사용자가 콘텐츠를 선택하고 재생하는 그 순간의 심리적 안정감이 전환율과 체류 시간을 좌우한다. 화자 정보가 명확하면 사용자는 "아, 내가 좋아하는 음성이 맞네" 또는 "오, 이 화자는 처음이네"라고 빠르게 판단할 수 있다. 그리고 명패나 메타데이터를 충분히 크게 노출하면, 필터링이나 추천 로직의 효과도 높아진다.
즉, 이 작업은 기능 추가처럼 보이지만 사실은 전환 최적화인 셈이다.
마무리: 컴포넌트 설계 일반론
이런 작업을 하면서 배운 점 하나는, UI 컴포넌트를 만들 때 "기본 상태"와 "강조 상태"를 명확히 분리해야 한다는 것이다. reading-panel.tsx 안에서 화자 소개 카드는 그냥 "정보"가 아니라 액션 진입점이 되어야 한다. 클릭하면 화자의 다른 콘텐츠를 본다거나, 팔로우 버튼으로 연결된다거나.
작은 아바타에서 큰 초상으로 업그레이드하는 것만으로는 부족하다. 그 초상이 단순 이미지 표시인지, 아니면 상호작용 가능한 요소인지, UI와 interaction이 일관되어야 사용자 경험이 통일된다.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.