한 번에 한 가지만 묻기
설명, 질문, 두 개의 답변만 남겨 선택 전에 읽어야 할 내용을 줄였습니다.
TRAVELLY
24개의 질문으로 알아보는
나의 여행 스타일
Project summary
24개의 선택을 16가지 여행 유형으로 바꾸고,
질문부터 공유와 공개까지 완성한 웹서비스
Overview
프로젝트 개요
Travelly는 계획, 활동, 장소, 소비 성향을 묻고 나와 닮은 여행 동물을 보여주는 모바일 중심의 여행 성향 테스트입니다.
하루 동안 질문과 결과 기준을 만들고, 진행 상태 저장, 결과 계산, 고유 결과 URL, 공유, 익명 집계와 도메인 배포까지 1인으로 완성했습니다.
- Role
- UX/UI Designer · Frontend Developer
- Type
- Personal Project
- Platform
- Responsive Web
- Scope
- 기획 · 디자인 · 개발 · 배포
Key challenges
설문 화면 뒤에서 함께 풀어야 했던 문제
- 01
24개 질문이 길게 느껴지지 않아야 했다
문항을 한 화면에 쌓지 않고 한 번에 하나씩 보여줬습니다. 두 개의 선택지를 크게 배치하고 현재 문항과 진행률만 남겨, 다음 선택에 집중하도록 했습니다.
- 02
16개 결과가 같은 기준으로 설명되어야 했다
동물 이름부터 정하지 않고 계획·활동·장소·소비라는 네 축을 먼저 만들었습니다. 네 글자 코드의 조합으로 결과를 계산해, 문구와 화면이 바뀌어도 기준은 흔들리지 않게 했습니다.
- 03
결과 공유와 운영이 한 흐름이어야 했다
결과 코드와 점수를 URL에 담아 같은 결과가 다시 열리게 했습니다. 공유 이후에는 개인정보 없이 방문과 완료 현황을 확인할 수 있도록 익명 집계 구조를 연결했습니다.
UX/UI
선택에 집중하는 화면
여행 기록 노트와 빈티지 스티커의 분위기를 가져오되, 테스트를 푸는 동안에는 질문과 선택지만 또렷하게 남겼습니다.
종이색 배경과 검정 잉크 같은 색을 기본으로 사용하고, 주황색은 진행 상태와 핵심 단어처럼 지금 확인해야 하는 곳에만 사용했습니다.
진행 상태를 놓치지 않기
현재 문항과 진행률, 이전 질문을 같은 위치에 두어 긴 테스트에서도 흐름을 파악하게 했습니다.
결과를 읽는 순서 만들기
정체성, 성향 그래프, 습관, 여행 궁합, 공유 순서로 긴 결과 화면의 위계를 정했습니다.
Visual language
여행 노트와 스티커에서 가져온 분위기
흰색 스크립트 글자와 검정 외곽선, 그림자로 여행 스티커 같은 인상을 만들었습니다.
Paper#F4F1E8Ink#1D1D1BOrange#FF5B35Yellow#F7C843
Content design
네 축으로 만든 16개 유형
재미있는 이름보다 먼저 결과가 만들어지는 기준을 정했습니다.
네 축에 기본 질문을 여섯 개씩 배정하고, 50:50이 된 축에만 추가 질문을 보여줍니다. 네 글자 코드와 콘텐츠를 분리해 16개 결과가 같은 구조 안에서 관리되도록 했습니다.
계획 · 즉흥
미리 정하는 여행과 현지에서 바꾸는 여행
탐험 · 휴양
새로운 장소를 채우는 여행과 충분히 쉬는 여행
핫플 · 로컬
대표 명소를 찾는 여행과 동네를 발견하는 여행
실속 · 경험
예산을 아끼는 여행과 기억에 투자하는 여행
4 TRAVEL AXES2 × 2 × 2 × 216 travel types
Interaction flow
답변부터 결과 공유까지 끊기지 않게
서비스와 소요 시간 확인
24개 상황에 A/B로 응답
네 축 점수와 동률 확인
16개 동물 중 한 유형 표시
같은 결과 URL로 다시 연결
Build & Launch
사용한 기술
화면을 만드는 데서 끝내지 않고, 저장·공유·집계·배포가 실제로 이어지게 했습니다.
Next.js · React · TypeScript
설문, 결과, 공유 화면 구현
Local Storage · Vitest · ESLint
진행 상태와 결과 로직 검증
Route Handlers · Upstash Redis
해시 처리한 익명 ID로 집계값만 저장
SHA-256 · HMAC Session
익명 식별값과 관리자 세션 보호
Kakao SDK · Web Share · X Intent
결과 공유와 재유입 연결
vinext · Cloudflare Workers
Next.js 프로젝트를 Workers 환경으로 변환해 배포
Release
완성한 범위
하루 동안 질문, 결과 계산, 동률 처리, 진행 상태 저장, 공유, 익명 집계와 배포까지 하나의 서비스로 연결했습니다. 현재 Travelly는 독립 도메인에서 직접 사용할 수 있습니다.