찾아야 하는 정보
가족 여행계획숙소 공식 웰컴북관광 티켓 PDF지도·운전 경로날씨 API정부 주유가격 데이터현지 식당·편의정보
LANGUAGE
BUILT PROJECT · ALSACE FAMILY WEB GUIDE
가족여행을 위해,
제가 직접 만든
프랑스 알자스 여행 웹가이드.
흩어진 일정, 티켓, 숙소 안내, 운전 경로, 날씨와 가족의 준비사항을 한곳에 모아, 휴대폰에 설치하고 인터넷이 끊겨도 볼 수 있는 여행가이드로 제작했습니다.
DESTINATION알자스 · 프랑스 동부
알자스는 프랑스 동부의 독일·스위스 국경 가까이에 있는 지역입니다. 이 가이드는 목조 가옥과 와인 마을 풍경으로 알려진 Colmar와 Eguisheim을 중심으로 합니다.
ALSACE · FAMILY TRAVEL WEB GUIDEBUILT
개인 프로젝트 · 공개용 재구성본
프랑스 알자스 가족여행
웹가이드
5 DAYS가족여행 전체 일정
KR · EN · NL한국어·영어·네덜란드어 전환
OFFLINE인터넷 없이 핵심정보 확인
LIVE DATA날씨·주유정보 연결
02 · FULL CASE STUDY실제로 만든 모든 내용을 확인하세요.장소 사진, 작동하는 가이드, 12개 기능, 제작 과정과 개인정보 공개 기준은 여기에 그대로 보존했습니다.
전체 사례 열기 ↓
THE PROJECT
여행정보는 많았지만,
필요한 순간에 바로 찾기 어려웠습니다.
가족 대화, 숙소 안내, 티켓 PDF, 지도, 날씨와 메모가 서로 다른 곳에 흩어져 있었습니다. 저는 이것을 여행의 흐름에 맞춘 하나의 개인 여행 웹가이드로 만들었습니다.
한 번 열면 필요한 정보가 이어지는 웹가이드
일정 확인 → 지도 열기 → 티켓 확인 → 날씨 판단 → 비용·주차·체크리스트 기록까지 한 흐름 안에서 이어집니다.
PLACES ON THE ITINERARY
일정에 등장하는 장소를
사진으로 먼저 만나보세요.
여행의 순서와 장소의 분위기를 빠르게 파악하도록 5일 일정의 핵심 지점을 카드로 정리했습니다. 사진은 공개 라이선스 자료이며 각 카드에 출처를 표시했습니다.
DAY 1 · DAY 5프랑스 알자스 · 숙박 거점
Eguisheim
원형으로 이어지는 골목과 목조 가옥, 포도밭 풍경이 여행의 시작과 마무리를 연결합니다.
PHOTO · Nicolas Torquet · CC BY-SA 2.0 ↗
DAY 2프랑스 알자스 · 구시가지
Colmar · Petite Venise
운하와 목조 가옥을 따라 걷고, 시장·교회·카페를 하나의 도보 동선으로 볼 수 있는 일정입니다.
PHOTO · Gzen92 · CC BY-SA 4.0 ↗
DAY 3Pfaffenheim · 프랑스
Schauenberg
포도밭 위 예배당과 알자스 평야 전망을 만나는 예약 일정의 핵심 장소입니다.
PHOTO · Gzen92 · CC BY-SA 4.0 ↗
DAY 4
DAY 4보주 산지 · 프랑스
Hohneck · Vosges
높은 능선의 풍경을 보는 전망 구간으로, 바람·안개·시야에 따라 정차 여부를 판단합니다.
PHOTO · Florian Grossir · CC BY-SA 3.0 ↗
DAY 5 · OPTIONAL림뷔르흐 · 네덜란드
Roermond
귀가 동선의 상황에 따라 점심, 산책, 쇼핑 중 필요한 활동만 고르는 선택 정차지입니다.
PHOTO · M.M. Minderhoud · CC BY-SA 3.0 ↗※ 현재 날씨나 현장 상태가 아닌, 일정 장소의 이해를 돕기 위한 참고 사진입니다.
WHAT I ACTUALLY BUILT
기획안이 아니라,
실제로 작동하도록 만들었습니다.
아래 기능은 제가 직접 만든 Alsace 가족여행 웹가이드에 실제로 들어간 항목입니다. 앞으로 제공하려는 서비스 아이디어와 구분해 표시했습니다.
01IMPLEMENTED
5일 통합 일정
이동·관광·휴식·귀가를 날짜별 타임라인으로 구성했습니다.
02IMPLEMENTED
티켓·예약 요약
PDF를 다시 찾지 않아도 시간·좌석·식사·집합 장소를 확인하도록 만들었습니다.
03IMPLEMENTED
숙소 웰컴북 정리
체크인, 주차, 수영장, 세탁, 비품과 대여 서비스, 퇴실 규칙을 사용자가 선택한 언어로 이해하기 쉽게 정리했습니다.
04IMPLEMENTED
상세 운전 동선
휴게소·주유·주차·산악 정차지와 Google Maps 경로를 일정에 연결했습니다.
05IMPLEMENTED
4개 지역의 실시간 날씨
Open-Meteo에서 각 지역의 현재 날씨와 여행 기간 예보를 불러오도록 만들었습니다.
06IMPLEMENTED
실시간 주유 정보
프랑스 정부의 공개 데이터와 독일의 가격 비교 사이트를 이동 계획에 연결했습니다.
07IMPLEMENTED
주변·식당·생활정보
공식 안내와 현장에 필요한 식사·장보기·편의 정보를 목적별로 정리했습니다.
08IMPLEMENTED
쇼핑 목록과 예산
항목별 예산·실구매액·완료 상태를 기기에 자동 저장하도록 만들었습니다.
09IMPLEMENTED
여행 가계부
지출 분류, 합계 계산, 항목 삭제와 CSV 내보내기를 구현했습니다.
10IMPLEMENTED
주차 메모와 좌표
텍스트 메모와 현재 위치 좌표를 브라우저에 저장할 수 있습니다.
11IMPLEMENTED
여행·준비물 체크리스트
기본 항목과 직접 추가한 항목의 완료 상태가 같은 기기에 유지됩니다.
12IMPLEMENTED
휴대폰 설치·오프라인·3개 언어
휴대폰 홈 화면에 추가하고, 인터넷이 끊겨도 핵심 정보를 확인하며, 한국어·영어·네덜란드어를 바꿔 볼 수 있도록 만들었습니다. 언어를 바꿔도 저장한 내용은 그대로 유지됩니다.
HOW I BUILT IT
정보 수집에서
실제 여행용 가이드 완성까지.
여행자료를 단순히 모아놓는 데서 끝내지 않고, 가족이 여행 중 무엇을 먼저 보고 판단하는지에 맞춰 여러 차례 다듬었습니다.
자료 수집
여행 일정, 공식 숙소 웰컴북, 티켓 PDF, 지도, 날씨와 교통·주유 출처를 모았습니다.
가족 기준으로 재편집
정보 출처의 순서가 아니라 여행 당일의 시간, 이동, 체력과 의사결정 순서로 다시 구성했습니다.
하나의 여행 웹가이드로 제작
휴대폰 홈 화면 추가, 오프라인 보기, 최신 정보 확인, 기기 저장 도구를 하나의 화면 흐름으로 연결했습니다.
여행 중 사용하기 쉽게 다듬기
가로 메뉴, 5일 요약, 언어 전환, 저장 도구와 바로가기를 보강해 가족이 여행 중 더 빠르게 사용할 수 있도록 여러 차례 다듬었습니다.
사용한 기술HTML · CSS · JavaScriptWeb App ManifestService WorkerlocalStorageGeolocationOpen-Meteo API정부 공개데이터 APICSV Export
PUBLIC PORTFOLIO RULE
작품은 실제이고,
여행자의 정보는 비공개입니다.
원본 파일에서 몇 가지만 가린 채 공개하지 않았습니다. 제작 과정과 기능은 사실대로 설명하되, 공개 화면은 개인을 알아볼 수 없는 별도의 포트폴리오용 화면으로 다시 만들었습니다.
FROM ONE PROJECT TO A SERVICE
이 실제 제작 경험을,
맞춤형 여행가이드 서비스로 확장합니다.
Alsace 웹가이드를 만들며 흩어진 개인 여행정보를 여행 중 바로 쓰는 하나의 가이드로 바꾸는 가치를 확인했습니다. 다음 단계는 이 제작 과정을 누구에게나 반복해서 제공할 수 있도록 자동화하는 것입니다.
한 여행의 여러 자료를 휴대폰에서 바로 쓰는 하나의 웹가이드로 통합
이번 포트폴리오에서 확인할 수 있는 실제 결과입니다.
여러 가이드 보관함·단계형 AI 입력·자료 통합
사전신청은 보류하고, 로그인한 계정에서 실제 제품 흐름을 단계별로 구현하고 있습니다.
CURRENT STATUS
포트폴리오는 실제,
제품은 비공개로 개발 중입니다.
PRODUCT DEVELOPMENT
사전신청은 잠시 멈추고,
직접 앱을 만들고 있습니다.
이메일 신청은 현재 받지 않습니다. 계정에서 여러 여행가이드를 만들고 단계형 AI 입력을 연결하는 실제 제품 개발로 전환했습니다.
- 기존 신청자의 삭제 관리링크는 계속 작동합니다.
- 현재 앱은 비공개 개발 환경입니다.
- 실제 예약번호·티켓·여권·결제정보는 아직 입력하지 않습니다.
PRIVATE PRODUCT BUILD · READY GUIDE나의 여행가이드 보관함계정별 여러 여행 · 완성된 첫 가이드
01
나의 가이드 만들기 →현재 허용된 계정만 로그인할 수 있습니다.7개 질문에 답하기
02정확한 날짜가 없어도 여행지·시기·기간과 취향을 간단히 고릅니다.
완성된 첫 가이드 받기
추천 일정과 장소를 먼저 보고, Guide AI로 필요한 내용만 바로 바꿉니다.