📌
사이트 개요
Travel-Check는 여행을 준비하면서 D-Day와 준비물 체크리스트를 한 화면에서 관리할 수 있도록 만든 무료 웹사이트입니다.
별도의 회원가입이나 설치 없이 브라우저만 있으면 바로 사용할 수 있도록 설계했고, 실제 여행 준비를 하면서 필요하다고 느낀 기능들을 중심으로 구현했습니다.
여행 D-Day 자동 계산
체크리스트 진행도 표시
CSV · JSON 백업/복원
Drag & Drop 정렬
모바일 최적화
🧩
구현된 주요 기능
-
✅
D-Day 계산 기능
- 여행 출발 날짜를 입력하면 남은 일수를 자동으로 계산하여 표시합니다.
- 여행이 가까워질수록 직관적으로 남은 기간을 확인할 수 있습니다. 완료 -
📝
여행 준비 체크리스트
- 준비해야 할 항목들을 자유롭게 추가/수정/삭제할 수 있습니다.
- 각 항목을 체크하면 완료 처리되며, 전체 진행도가 상단 진행 바(Progress Bar)로 표시됩니다. 완료 -
🔃
Drag & Drop 순서 변경
- 체크리스트 항목의 우선순위를 사용자가 직접 끌어서(Drag & Drop) 조정할 수 있습니다.
- 중요한 준비물은 위로 올려 한눈에 볼 수 있습니다. 완료 -
💾
CSV 내보내기 & JSON 백업/복원
- 현재 체크리스트를 CSV 파일로 내보내기 기능을 통해 저장할 수 있습니다.
- JSON 형식으로 전체 데이터를 백업/복원할 수 있어, 브라우저를 바꾸더라도 동일한 리스트를 다시 불러올 수 있습니다. 완료 -
📱
반응형 UI 및 모바일 최적화
- PC는 물론, 스마트폰 화면에서도 보기 좋게 구성된 반응형 디자인을 적용했습니다.
- 실제 여행 중에도 모바일 브라우저로 접속해 체크리스트를 바로 확인할 수 있습니다. 완료 -
🧭
브라우저 로컬 저장 기반
- 체크리스트 데이터는 브라우저의 로컬 스토리지에 저장되도록 구현했습니다.
- 간단한 사용성을 유지하면서도, 페이지를 새로고침해도 데이터가 유지됩니다. 완료
🛠️
구현 작업 요약
이 사이트는 다음과 같은 흐름으로 구현 및 구성 작업을 진행했습니다.
- 1️⃣ 아이디어 설계 – “여행 준비에 진짜로 쓰는 D-Day + 체크리스트”를 목표로 필요한 화면 구성과 필수 기능을 정의했습니다.
- 2️⃣ 프론트엔드 구현 – HTML, CSS, JavaScript만으로 D-Day 계산, 체크리스트, Drag & Drop, 진행도 표시, CSV/JSON 기능을 구현했습니다.
- 3️⃣ 디자인 및 UI 다듬기 – 여행 느낌의 색상과 레이아웃, 모바일 대응을 적용해 실제 사용 시 가독성과 사용성을 고려해 수정·보완했습니다.
-
4️⃣
배포 및 테스트 – Cloudflare Pages를 통해
travel-check.pages.dev도메인으로 배포하고, PC/모바일 환경에서 직접 테스트하며 버그를 보완했습니다.