⚓ DATT 19 - 사용자 성장 시스템 및 게이미피케이션 프론트엔드 구조 설계
개요
서비스 초기 MVP 단계에서는:
- 장소 탐색
- 지도 탐색
- 리뷰
- Anchor 생성
등의 핵심 기능 구현이 우선이었다.
하지만 DATT의 방향성은 단순 장소 검색 서비스가 아니다.
핵심은:
1
"사용자의 탐색 경험을 성장 데이터로 연결하는 것"
이다.
이번 단계에서는:
- 사용자 성장 시스템
- 활동 로그
- 업적 및 칭호
- 경험치 기반 성장 구조
- Timeline UX
- 게이미피케이션 상태 관리
를 중심으로:
1
2
사용자 활동 흐름 자체를
서비스 경험으로 만드는 것
을 목표로 설계했다.
사용자 성장 시스템 프론트엔드 구조 설계
왜 성장 시스템이 필요한가
사용자는 단순 조회보다:
- 기록
- 수집
- 성장
- 보상
에 훨씬 강하게 반응한다.
특히 DATT는:
1
탐색 → 활동 → 성장
구조가 매우 중요하다.
따라서:
- 리뷰 작성
- Anchor 생성
- 저장 활동
등을 모두:
1
"성장 경험"
과 연결했다.
프로필 중심 구조
성장 시스템의 중심은:
1
/my/profile
이다.
프로필은 단순 개인정보 화면이 아니라:
1
사용자 활동 허브
역할을 한다.
최종 구조는 다음과 같다.
1
2
3
4
5
6
7
8
프로필
├─ 사용자 정보
├─ 대표 칭호
├─ 레벨/경험치
├─ 활동 요약
├─ 최근 Anchor
├─ 최근 리뷰
└─ 활동 Timeline
활동 로그 UX 설계
활동 로그의 목적
활동 로그는 단순 기록이 아니다.
실제로는:
1
2
사용자가 무엇을 했는지
시각적으로 피드백하는 구조
다.
예를 들어:
- 리뷰 작성
- 장소 저장
- Anchor 생성
- 좋아요 획득
등이 모두 Timeline에 기록된다.
Timeline 기반 UX
초기에는 단순 리스트 UI를 고려했다.
하지만 활동 로그는:
1
시간 흐름
이 중요했다.
따라서:
1
Timeline UX
를 채택했다.
구조는 다음과 같다.
1
2
3
4
5
● 리뷰 작성
│
● Anchor 생성
│
● 장소 저장
이 방식은:
- 활동 흐름 이해
- 성장 체감
- 사용자 몰입감
측면에서 훨씬 자연스럽다.
활동 타입별 아이콘 분기
활동 타입별로 아이콘을 분리했다.
예:
1
2
3
4
5
✍️ 리뷰 작성
⚓ Anchor 생성
🔖 장소 저장
🏆 업적 달성
❤️ 좋아요 획득
이를 통해:
- 정보 구분성
- 시각적 몰입감
- 활동 식별성
을 높였다.
업적 및 칭호 시스템 구조 설계
업적(Achievement)의 역할
업적은:
1
사용자의 장기 행동 유도 장치
다.
단기 보상은 경험치가 담당하고,
장기 목표는 업적이 담당한다.
예시:
1
2
3
4
첫 리뷰 작성
리뷰 10개 작성
Anchor 5개 생성
좋아요 100개 획득
업적 상태 구조
업적은:
1
2
달성
미달성
상태를 가진다.
프론트에서는:
1
achievement.achieved
기준으로 UI를 분기했다.
예:
1
2
3
4
5
달성
→ 강조 UI
미달성
→ 흐린 UI
칭호(Title) 시스템
칭호는:
1
사용자의 정체성 표현 수단
이다.
예:
1
2
3
탐험가
리뷰 마스터
Anchor Creator
사용자는 대표 칭호를 선택할 수 있다.
구조는:
1
2
3
보유 칭호 목록
→ 대표 칭호 선택
→ 프로필 반영
흐름이다.
경험치 기반 성장 모델 설계
왜 경험치 구조를 넣었는가
단순 활동만으로는:
1
성장 체감
이 약하다.
따라서 모든 활동에:
1
EXP
를 연결했다.
예:
1
2
리뷰 작성 +15 EXP
Anchor 생성 +30 EXP
레벨 Progress 구조
현재 구조는:
1
2
3
현재 EXP
/
다음 레벨 필요 EXP
형태다.
프론트에서는:
1
(exp / requiredExpForNextLevel) * 100
으로 Progress를 계산했다.
이를 통해:
- 성장 시각화
- 목표 제공
- 행동 유도
효과를 얻을 수 있다.
성장 요약 카드
프로필에는 다음 정보를 요약해서 보여준다.
1
2
3
4
보유 칭호
달성 업적
리뷰 수
Anchor 수
즉:
1
2
사용자의 활동량 자체를
시각적 성장 데이터로 변환
하는 구조다.
사용자 활동 Timeline UX 설계
Timeline이 중요한 이유
활동 피드는:
1
"내가 지금까지 뭘 했는가"
를 보여주는 공간이다.
단순 데이터 리스트보다:
1
스토리 흐름
처럼 느껴지는 것이 중요했다.
Timeline 설계 방향
Timeline은:
- 최신 활동 우선
- 활동 타입별 분기
- 경험치 표시
- 시간 흐름 강조
를 기준으로 설계했다.
Empty 상태 UX
활동이 없는 경우에도:
1
2
아직 활동 로그가 없습니다.
장소 저장, 리뷰 작성, Anchor 생성을 해보세요.
처럼:
1
다음 행동 유도
를 넣었다.
게이미피케이션에서는:
1
Empty 상태 UX
도 매우 중요하다.
게이미피케이션 상태 관리 전략
서버 상태와 UI 상태 분리
게이미피케이션 데이터는 대부분:
1
서버 상태
다.
예:
- 경험치
- 업적
- 칭호
- 활동 로그
따라서:
1
TanStack Query
기반으로 관리했다.
Query Key 전략
예시:
1
2
3
4
["my-profile"]
["my-achievements"]
["my-titles"]
["my-activity-logs"]
처럼 기능별로 명확히 분리했다.
invalidate 전략
대표 칭호 변경 시:
1
2
invalidateQueries(["my-profile"])
invalidateQueries(["my-titles"])
를 동시에 수행한다.
즉:
1
관련 화면 전체 최신화
를 보장한다.
왜 Context 대신 Query인가
초기에는 전역 상태(Context/Zustand)도 고려했다.
하지만:
- 경험치
- 업적
- 활동 로그
는 서버 데이터다.
따라서:
1
2
3
4
캐싱
동기화
재조회
invalidate
기능이 강한 Query 구조가 훨씬 적합했다.
앞으로의 개선 방향
현재는 MVP 단계다.
향후에는:
- 업적 Unlock 애니메이션
- 레벨업 모달
- 시즌 시스템
- 랭킹 시스템
- 실시간 경험치 반영
- 활동 Heatmap
- 소셜 피드
- 친구 시스템
- 활동 공유 기능
등으로 확장할 예정이다.
마무리
이번 단계에서 가장 중요했던 것은:
1
2
3
사용자 행동을
단순 기능 사용이 아니라
"성장 경험"으로 만드는 것
이었다.
특히:
- 리뷰
- Anchor
- 저장 활동
- 업적
- 칭호
- 경험치
를 하나의 흐름으로 연결하면서:
1
탐색 기반 게이미피케이션 플랫폼
에 가까운 구조를 만들 수 있었다.
DATT는 이제 단순 장소 서비스가 아니라:
1
2
사용자의 탐색 경험이
축적되고 성장하는 서비스
로 확장할 수 있는 기반을 갖추게 되었다.