사용자 관계 XP 시스템, '이해'와 '함께한 시간'으로 개선하기

기존 사용자 관계 XP 시스템, '이해'와 '함께한 시간'으로 개선하기

사용자 간의 관계 레벨 XP 시스템이 너무 제한적이라 사용자 경험이 떨어진다는 피드백이 있었어요. 특히 관계를 쌓아가는 기준이 명확하지 않고, 얼마나 관계가 발전했는지 보여주는 것도 부족했죠. 그래서 이 부분을 개선하기로 했습니다.

시도와 함정

처음에는 단순히 대화 횟수만 늘리면 관계 레벨이 올라가도록 단순하게 접근했어요. 그런데 이게 생각보다 복잡하더라고요. 단순히 많이 대화한다고 해서 깊은 관계가 되는 건 아니니까요.

원인

기존 시스템은 관계의 깊이를 측정하는 기준이 너무 단일했습니다. '이해'라는 정성적인 부분을 수치화하기 어렵다는 점, 그리고 '함께한 시간'이라는 정량적인 부분을 단순히 대화 횟수로만 측정하는 데 한계가 있었습니다.

해결

이 문제를 해결하기 위해 기존 시스템을 '이해(상한)'와 '함께한 시간(대화한 날)'이라는 두 가지 축으로 확장했습니다. '이해'는 사용자가 서로에 대해 얼마나 잘 알고 있는지를 나타내고, '함께한 시간'은 실제로 대화한 날짜를 기준으로 삼았습니다.

이와 함께 XP 가시화도 개선했어요. 백엔드 리포지토리, 프로필 컴포넌트, 관련 훅, 그리고 사용되는 라이브러리까지 전반적으로 수정이 필요했습니다.

// 백엔드 리포지토리 수정 예시 (관계 XP 계산 로직)
interface UserRelationship {
  userId: string;
  targetUserId: string;
  understandingScore: number; // 0-100
  consecutiveChatDays: number; // 연속 대화한 날짜
  xp: number;
}
function calculateRelationshipXP(relationship: UserRelationship): number {
const understandingWeight = 0.6;
const chatDaysWeight = 0.4;
const xpFromUnderstanding = relationship.understandingScore * understandingWeight;
const xpFromChatDays = relationship.consecutiveChatDays * chatDaysWeight * 10; // 일별 가중치 조정
return xpFromUnderstanding + xpFromChatDays;
}
// 프로필 컴포넌트 수정 예시 (XP 가시화)
function UserProfile({ relationship }: { relationship: UserRelationship }) {
const currentXP = calculateRelationshipXP(relationship);
const level = determineLevelFromXP(currentXP); // XP에 따른 레벨 결정 함수
return (
<div>
<h2>{relationship.targetUserId}</h2>
<p>관계 레벨: {level}</p>
<p>현재 XP: {currentXP.toFixed(2)}</p>
<div className="xp-bar" style={{ width: ${(currentXP % 100)}% }}></div> {/* 간단한 XP 바 */}
<p>이해 점수: {relationship.understandingScore}</p>
<p>함께 대화한 날: {relationship.consecutiveChatDays}</p>
</div>
);
}

이렇게 두 가지 지표를 합산하고, 이를 시각적으로 잘 보여주도록 수정하니 사용자들의 반응이 훨씬 좋았습니다.

결과

• 사용자 간 관계에 대한 이해도가 높아졌습니다.
• 관계 레벨 XP 시스템의 가시성이 크게 향상되었습니다.
• 전반적인 사용자 경험 만족도가 증가했습니다.

정리 — 같은 함정 안 빠지려면

• [ ] 관계 레벨 XP 시스템의 측정 기준을 다각화할 것 ('이해', '함께한 시간' 등)
• [ ] XP 가시화 방법을 개선하여 사용자가 자신의 관계 발전을 쉽게 인지하도록 할 것
• [ ] 백엔드 로직, 프론트엔드 컴포넌트, 관련 훅 및 라이브러리 전반의 수정 계획을 세울 것