← Projects로 돌아가기
3D 주사위와 보드 타일로 여행 게임 콘셉트를 보여주는 홈 히어로 
여행지 탐색과 게임 만들기 진입을 연결한 웹 홈 화면 
추천 여행지와 검색 입력을 통해 여행 탐색을 시작하는 화면 
장소 목록, 카테고리 필터, 지도를 함께 배치한 여행지 탐색 화면 
생성된 여행 게임의 보드, 미션 인증, 타임라인을 확인하는 화면
TripMarble
TripMarble
2025.05 - 2025.09Published#travel#game#nextjs#ux
TripMarble은 여행지를 탐색하고, 그 여행을 게임 루프로 전환하고, 실제 방문 기록을 미션과 리뷰로 남기는 서비스입니다. 저는 Web 프론트엔드 담당으로 Next.js 기반 웹앱 구조와 주요 사용자 흐름을 다뤘습니다.
홈에서는 3D 주사위와 보드 이미지를 활용해 서비스의 게임성을 먼저 보여주고, 사용자가 게임 만들기나 여행지 탐색으로 진입할 수 있도록 구성했습니다. 검색, 여행지 목록, 게임 목록, 로그인, 프로필 같은 주요 라우트도 웹 경험 안에서 연결했습니다.
이후에는 단순 스타일 통일보다 여행 탐색, 게임 생성, 미션 수행이 하나의 루프로 느껴지도록 서비스 UX를 다시 검토했습니다. 디자인 토큰, 공통 카드, 헤더, 게임 리스트, 지도 중심 화면의 구조를 정리하며 웹 서비스의 확장성을 높이는 방향으로 개선했습니다.
What I worked on
- Next.js App Router 기반으로 홈, 검색, 여행지 목록, 게임 목록, 로그인, 프로필 등 웹 주요 화면의 라우트와 레이아웃을 구성했습니다.
- React Query 기반 API 훅과 Redux Persist 기반 클라이언트 상태 흐름을 연결해 사용자, 여행지, 게임, 리뷰 데이터를 웹 화면에서 다룰 수 있게 했습니다.
- 게임 목록, 카드 레일, 헤더, 푸터, 빈 상태 등 공통 위젯을 정리하고 서비스 화면 전반의 일관성을 높였습니다.
- 여행지 탐색에서 게임 생성, 보드 진행, 미션 인증으로 이어지는 핵심 흐름을 UX 관점에서 재검토하고 개선 기준을 문서화했습니다.
Technical highlights
- Next.js 14, TypeScript, Sass 기반으로 app, entities, features, shared, widgets 계층을 나누어 웹 코드를 구성했습니다.
- Three.js와 GSAP을 활용한 3D 주사위 홈 히어로로 여행 게임 서비스의 첫인상을 시각화했습니다.
- React Query로 여행지, 게임, 리뷰 관련 서버 상태를 관리하고 Redux Toolkit과 redux-persist로 사용자 상태를 유지했습니다.
- 카드, 리스트, 모달, 버튼, 헤더 같은 공통 UI를 정리해 이후 화면 확장과 리디자인 작업의 기반을 마련했습니다.
Screens
« Newer
pawsitive
입양자와 보호소를 연결한 맞춤형 유기견 입양 지원 서비스
Older »
Cherry Wish
벚꽃나무와 꽃잎으로 오늘의 소원을 건네는 단일 페이지 인터랙션