리포트 조회를 캐릭터 내레이션으로 재구성

데이터 리포트를 정적인 표와 차트가 아니라 만화처럼 읽는 경험으로 바꿨다. Haneul의 내레이션과 Day Master 캐릭터가 등장해 사용자를 가이드하고, 표 스타일을 정비하고, 프롬프트 전체를 1인칭으로 다시 썼다.

이 작업은 단순 UI 개선 이상으로, 우리 제품이 "데이터 도구"에서 "이야기하는 경험"으로 어떻게 진화하는지를 보여준다.

왜 만화 패널 레이아웃인가

사용자가 리포트를 볼 때 가장 큰 문제는 피로감이었다. 숫자와 표만 마주하면 맥락 파악이 느리고, 특히 데이터 해석을 스스로 해야 한다는 점에서 인지 부하가 높다. 우리가 목표한 것은 데이터 리터러시가 없어도 빠르게 인사이트를 얻을 수 있는 경험이다.

만화 형식은 이를 해결하는 좋은 선택지였다:
- 시각적 정보 처리: 텍스트와 그래픽이 결합되면 패턴 인식이 빨라진다
- 감정적 연결: 캐릭터가 함께하면 정보 전달이 설교가 아니라 대화처럼 느껴진다
- 순차적 네러티브: 패널을 차례로 읽으면서 자연스럽게 스토리를 따라간다

파일 구조와 역할 분담

특히 reading.ts는 단순 데이터 변환이 아니다. 같은 숫자를 "17% 상승했습니다 (어제 대비)" vs "좋은 진전입니다. 목표 대비 70%입니다" 로 다르게 전하는 곳이다. 내레이션 톤이 사용자의 몰입도를 결정한다.

프롬프트 엔지니어링: 정보에서 이야기로

1인칭 개편이 핵심이었다. 이전에는 제3자 관점("사용자의 일일 활동은…")이었다면, 이제는 Haneul이 직접 "당신이" 라고 말한다.

// Before: 객관적 설명
"일일 활동량이 어제보다 15% 증가했습니다."

// After: 1인칭 내레이션 (Haneul)
"어제보다 15% 더 활발했네요. 이 속도면 주간 목표도 무난할 것 같은데요?"

이 차이는 단순 문장 개편이 아니라 프롬프트 자체의 역할 정의를 바꾼다. LLM이 "리포트 생성기"가 아니라 "사용자의 응원자" 역할을 하도록 유도하는 것이다.

팀 관점: UI와 로직의 분리

이 작업은 프론트엔드와 백엔드/프롬프트 담당자가 독립적으로 진행할 수 있게 설계했다:
- UI 팀: reading-panel.tsx에서 패널의 "틀"만 정의. 실제 내용은 props로 받는다
- 프롬프트 팀: reading.ts에서 내레이션 생성. 새로운 톤, 새로운 구조 설계
- 스타일: globals.css에 중앙화해서 한 곳에서 표·패널 미학 통제

이렇게 하면 나중에 캐릭터를 바꾸거나 표 스타일을 조정할 때도 다른 레이어에 영향을 주지 않는다.

배운 점과 다음 고민

처음엔 "캐릭터를 이용한 내레이션이 과할 수 있지 않나" 했지만, 테스트 결과 사용자들이 오히려 피드백을 더 쉽게 이해했다. 캐릭터가 없으면 "왜 이 데이터를 봐야 하는가"를 스스로 이해해야 하는데, 캐릭터가 함께하면 관계 속에서 정보를 받는다는 심리적 차이가 있었다.

다음 피드백 사이클에서 확인할 것:
- 패널 개수가 많아질 때 스크롤 피로는 없는지
- 표 데이터가 복잡할수록 내레이션 길이를 줄여야 하는지
- Day Master 캐릭터의 등장 타이밍이 자연스러운지

지금은 모두가 같은 내레이션 톤을 받지만, 향후 사용자 프로필별로 (예: 신입 vs 베테랑) 설명 깊이를 다르게 할 여지도 남겼다. reading.ts 레이어가 이미 분리돼 있어서 나중에 추가하기 쉽다.

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

• 27인치모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

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