인물 카드에 2D·실사 표현과 감정 케어 기능 추가

개별 인물에 대한 2D/실사 카드와 감정 상태 기반 케어 기능을 한 번에 추가했다. 3개의 API 라우트(chat, gift, selfie)와 채팅 페이지, 메인 페이지 UI를 함께 수정하는 꽤 큰 작업이었다. 이 기능이 왜 필요했고, 구현할 때 어떤 설계 선택을 했는지 정리해본다.

왜 2D/실사 분리 표현인가

초반에는 "인물은 인물인데, 왜 굳이 2D와 실사를 따로 지원해야 하는가"라는 질문이 나올 수 있다. 실제로 이 부분은 팀 내 논의가 있었다. 결론은 사용자 선호도의 다양성이었다.

어떤 사용자는 그려진 형태를 선호하고, 어떤 사용자는 실제 사진을 보고 싶어 한다. 특히 감정 케어 시나리오에서는 더 그렇다. 그리움을 달랠 때 사진을 보길 원하는 사람과, 그림을 통해 느슨한 형태로 추억하기를 원하는 사람의 심리 상태가 다르다. 이걸 무시하고 단일 형식만 제공하면 일부 사용자에게는 서비스의 매력이 떨어진다.

결국 멀티모달 표현은 단순 기술 선택이 아니라, 감정 서비스의 개인화 전략인 것이다.

감정 상태 기반 케어 아키텍처

커밋 메시지의 세 가지 감정 케어 상태는 우연이 아니다:

이들은 단순히 UI 버튼이 아니라, API 레벨에서 context로 전달되는 메타정보다. chat 라우트가 수정된 이유가 이것이다. 사용자가 선택한 감정 상태에 따라 AI 응답의 톤과 내용이 달라져야 하니까.

// 의사코드 - 실제 구현은 다를 수 있음
const response = await chat({
  personId: "individual_card_123",
  emotionalContext: "그리움" | "기념일" | "위로",
  message: userMessage,
  personFormat: "2D" | "실사"
})

API 라우트 변경의 의미

세 라우트가 함께 변경된 것도 주목할 만하다:

• /api/chat: 감정 상태를 포함한 대화 로직
• /api/gift: 인물에게 보내는 선물/메시지 기능 (기념일과 연계)
• /api/selfie: 사용자의 사진/표현 (2D/실사 변환 또는 저장)

이들이 모두 "개별 인물 카드" 기능의 일부라는 걸 알 수 있다. 한 인물에 대해 다각적으로 상호작용할 수 있도록 설계된 것이다.

프론트엔드 페이지 구조

변경된 파일들을 보면:

• chat/[slug]/page.tsx, chat/[slug]/chat-client.tsx: 동적 라우팅으로 개별 인물 채팅방 구성
• page.tsx (메인): 사용 가능한 인물 카드 목록 또는 선택 UI

[slug] 패턴은 URL에서 인물 ID를 받아 각각의 개별 채팅 세션을 관리한다는 뜻이다. 이는 확장성 있는 구조다. 인물이 1개든 100개든 같은 페이지 로직을 재사용할 수 있다.

회고: 감정 상태 설계의 주의점

비슷한 기능을 구현할 때 배웠던 점들:

1. 감정 상태는 고정적이지 않다: 사용자가 대화 도중 감정 상태를 바꾸고 싶을 수 있으니, 한 번 설정하면 끝이 아니라 중간에 전환할 수 있어야 한다.

2. API 응답과 DB 저장은 분리: 감정 상태가 대화 톤에만 영향을 주는 게 아니면, 나중에 분석하거나 추천할 때 이력이 필요하다. 한 번은 감정 상태를 저장하지 않아서 유저 인사이트를 놓친 적이 있었다.

3. 2D/실사 전환은 가볍게: 사용자가 언제든 형식을 바꿀 수 있도록 프론트에서 빠르게 전환되어야 한다. 전환할 때마다 API 호출로 큰 비용이 드는 구조는 피해야 한다.

이 작업은 단순 기능 추가가 아니라, 감정 인식 시스템을 본격적으로 구축한 시점이었다. 앞으로 이 구조 위에 추천, 알림, 분석 같은 기능들이 쌓일 거라고 본다.

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

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

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