데이터 기반 설계: 히트맵을 통한 UI 개선
1. 사용자의 시선이 머무는 곳을 찾아서
디자인은 주관적일 수 있지만, 사용자의 행동은 객관적인 진실을 말해줍니다. Phase 13에서 우리는 '예쁜 사이트'를 넘어 '쓰기 편한 사이트'로의 도약을 위해 데이터의 힘을 빌리기로 했습니다. Microsoft Clarity와 Hotjar를 도입하여 사용자들이 우리 사이트의 어디를 클릭하고, 어디까지 스크롤하며, 어떤 요소에서 머뭇거리는지를 시각화된 히트맵(Heatmap)으로 분석하기 시작했습니다.
처음 히트맵을 마주했을 때의 충격은 신선했습니다. 우리가 공들여 만든 화려한 장식 요소보다, 구석에 작게 배치된 '운세 풀이법' 도움말 버튼에 더 많은 클릭이 집중되고 있었습니다. 사용자는 단순히 결과를 보는 것을 넘어, 그 결과가 도출된 원리를 이해하고 싶어 한다는 것을 데이터를 통해 깨달았습니다. 이러한 발견은 우리에게 디자인의 우선순위를 다시금 정립하는 계기가 되었습니다.
2. 직관과 지표 사이의 균형 잡기
데이터 분석 결과, 사주 입력 폼에서 의외로 많은 사용자가 '출생 시간'을 선택하는 단계에서 이탈한다는 사실을 발견했습니다. 기존의 드롭다운 방식이 모바일 환경에서는 다소 번거로웠던 것이 원인이었습니다. 우리는 즉시 이를 개선하여, 시각적으로 직관적인 슬라이더 방식과 빠른 선택 버튼으로 UI를 교체했습니다. 결과는 놀라웠습니다. 입력 폼 완료율이 이전 대비 25% 상승했습니다.
우리는 단순히 숫자를 올리는 것에 매몰되지 않았습니다. 아르누보 양식의 고전적인 미학을 유지하면서도 현대적인 데이터가 가리키는 편의성을 어떻게 조화시킬 것인가가 핵심 과제였습니다. 버튼의 크기를 키우되 테두리의 곡률은 유지하고, 로딩 바의 속도를 개선하되 애니메이션의 우아함은 잃지 않도록 세밀하게 조정했습니다. 지표(Metrics)는 방향을 제시하고, 감성은 그 길을 걷는 태도를 결정합니다.
Phase 13 분석 및 개선 지점
- 클릭 히트맵 분석: 데스크탑과 모바일의 클릭 패턴 차이를 분석하여 내비게이션 바의 위치와 크기 최적화.
- 스크롤 뎁스 추적: 페이지 하단의 주요 콘텐츠가 읽히지 않는 문제를 발견하여 콘텐츠 배치 순서 재조정.
- A/B 테스팅: 두 가지 다른 스타일의 타로 카드 뒤집기 애니메이션을 테스트하여 사용자 참여도가 높은 버전을 최종 채택.
3. 숨겨진 의도를 읽어내는 히트맵 분석
히트맵은 사용자의 '실수'도 알려줍니다. 링크가 아닌 곳을 반복해서 클릭하는 'Dead Click' 지점들을 찾아내어, 사용자가 기대하는 기능이 무엇인지 유추했습니다. 예를 들어, 메인 화면의 별자리 일러스트를 클릭하려는 시도가 많다는 것을 확인하고, 각 일러스트를 클릭하면 해당 별자리의 특징 페이지로 이동하는 기능을 새롭게 추가했습니다.
사용자의 무의식적인 행동 하나하나가 우리에게는 소중한 피드백이었습니다. 우리는 데이터를 차가운 통계 수치가 아닌, 사용자들이 우리에게 보내는 '말 없는 건의사항'으로 받아들였습니다. 이러한 과정을 통해 '별자리 다방'은 제작자의 아집에서 벗어나 사용자의 니즈와 호흡하는 살아있는 유기체로 거듭났습니다.
우리는 데이터를 통해 사용자의 마음을 측정하고, 그 진심에 응답하는 과정을 통해 더 나은 공간을 빚어낼 수 있었습니다.
4. 따뜻한 데이터로 빚어내는 공간
Phase 13을 마무리하며, 우리는 기술이 인간을 소외시키는 것이 아니라 오히려 인간을 더 깊이 이해하는 도구가 될 수 있음을 확신했습니다. 데이터 기반의 설계는 차가운 계산이 아니라, 사용자의 불편함을 먼저 찾아내어 해결해주려는 '배려'의 기술적 표현입니다. 이제 안정적인 UI와 최적화된 경험 위에, 우리는 시스템의 근간을 지키는 '보안'이라는 견고한 성벽을 쌓으려 합니다. 다음 Phase에서는 보이지 않는 위협으로부터 이 평화로운 다방을 지키는 보안 강화 로직 이야기를 들려드리겠습니다.