운세 조언을 색상·방향으로 한눈에 보기

사주 운세를 제공하는 서비스에 행운 방법을 담는 개운법(Saju Compass) 섹션을 추가했다. 기존 점술 결과에만 머물렀던 읽기 페이지를 이제 구체적인 조언——색, 방향, 시기, 피할 것——으로 확장하면서 사용자 가치를 한층 높이는 작업이었다.

왜 개운법 섹션을 추가했나

지금까지 우리 서비스는 사주 풀이와 운세 해석만 제공했다. 하지만 사용자들이 자주 묻는 질문은 "그럼 내가 뭘 해야 하는데?"였다. 운세를 알아도 어떻게 행동해야 하는지, 무엇을 피해야 하는지 명확하지 않으니 정보가 반쪽짜리로 느껴지는 것 같았다.

운세 정보의 정보 계층화 관점에서 봤을 때, 첫 번째 레이어(기본 운세)를 읽은 후 두 번째 레이어(실행 가능한 조언)로 자연스럽게 넘어가는 경험이 필요했다. 만화컷과 캐릭터 같은 시각 요소도 함께 덧씌우면서 페이지 체류시간을 늘리고, 무엇보다 사용자가 "이 정보가 나한테 실제로 도움이 된다"고 느끼도록 설계하고 싶었다.

섹션 구조와 시각화

개운법 섹션은 다음과 같은 원소들로 구성했다:

이미지 말풍선과 만화컷은 단순 장식이 아니다. 텍스트만 나열된 조언보다 캐릭터를 통한 의인화가 사용자 몰입감을 훨씬 높인다는 UX 리서치를 반영한 것이다. 캐릭터 확대 기능도 넣었는데, 모바일 사용자들이 세부 표정이나 디테일을 더 크게 보고 싶을 때를 대비하는 배려였다.

기술 구현의 트레이드오프

작업 과정에서 몇 가지 설계 결정이 필요했다:

1. 컴포넌트 분리 레벨
처음엔 개운법 섹션을 page.tsx에 직접 구현하려 했지만, 결국 reading-panel.tsx로 분리했다. 이유는 읽기 페이지의 복잡도 증가를 제어하려는 의도였다. 팀원들이 나중에 패널 내 다른 섹션을 수정할 때도 진입장벽이 낮아진다.

2. 데이터 모델 (reading.ts)
색상, 방향, 시기, 피할 것을 어떻게 구조화할지가 관건이었다. 초반엔 각각 별도 필드로 두려다가, "조언의 종류"라는 공통 개념으로 통합 배열로 모델링했다. 향후 조언 타입이 늘어날 때를 대비하는 결정이었다.

// 예시 데이터 구조
advice: [
  { type: 'color', value: '#FF6B6B', label: '빨강' },
  { type: 'direction', value: 'north', label: '북쪽' },
  { type: 'timing', value: 'summer', label: '여름' },
  { type: 'avoid', value: 'negativity', label: '부정적 생각' }
]

3. 스타일 조직 (globals.css)
Saju Compass 섹션 고유의 스타일이 상당했다. 재사용성 vs 명확성 사이에서 고민했는데, 결국 글로벌 스타일에 saju-advice- 프리픽스를 붙이면서 네임스페이스를 명확히 했다. 추후 다른 섹션과 겹치는 걸 방지하려는 배려다.

배운 점과 다음 스텝

이번 작업을 통해 느낀 것은, 운세 서비스에서 "정보 제공"과 "행동 유도"의 경계가 얇다는 것이다. 아무리 정확한 점술 결과를 줘도 사용자가 그걸 어떻게 쓸지 모르면 의미가 반감된다.

만약 다음에 비슷한 기능을 추가한다면, A/B 테스트로 실제 사용자 체류시간·재방문율·만족도가 어떻게 변하는지 측정할 계획이다. 그리고 팀 내 디자이너, 데이터 담당자와 함께 "어떤 조언이 가장 효과적인가"를 분석하는 피드백 루프도 만들고 싶다.

지금은 섹션 추가 수준이지만, 향후 조언을 개인화하거나(사용자의 별자리/십간십이지별로 상이한 조언), 시간대별로 동적으로 업데이트하는 등의 심화 기능도 고려할 가치가 있다.

🛒 이 글과 어울리는 추천 상품

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 인체공학마우스 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.