비행기 e-ticket이나 숙소 예약 캡처를 넣으면 잠금화면에 바로 띄울 수 있는 여행 일정표를 만든다. 출발 시간, 체크인 시간, 주소, 예약번호까지 한 화면에 붙는 식이다. 지난 편에서 웹페이지 변동 알림봇을 만들었다면, 이번엔 여행 직전에 제일 자주 보는 화면을 뽑아보는 쪽이 더 재밌다.
여행 일정표는 예쁘기만 하면 소용이 없다. 공항에서 메일함 뒤지는 30초가 꽤 길거든요. 일정이 한 장으로 붙어 있으면 택시 잡을 때도 덜 헤맨다.
준비물은 하나만 고르면 된다
오늘은 Codex로 간다. Claude Code 쓰는 분도 같은 프롬프트를 넣으면 되지만 둘 다 켤 필요는 없다. 예약 PDF 한 장이나 캡처 2~3장만 있으면 시작되고, 문서가 깔끔하면 Codex CLI 기본 흐름으로 충분하다. 표가 꼬인 항공권만 GPT-5.2-Codex high reasoning으로 한 번 더 보면 된다.
여행 일정표 뽑아보기
1
일정 JSON 먼저 고정
AI에게 보낸 프롬프트
예약 PDF 또는 캡처 이미지를 읽고 여행 일정표용 JSON만 만들어줘. 필드는 trip_title, date, time, place, address, note, reservation_code로 제한해. 모르면 추측하지 말고 null로 남겨. 출력은 JSON만.
왜 이렇게 시켰나: Codex는 최근 공식 문서 기준으로 이미지 입력과 structured outputs가 잘 맞는다. 그래서 화면 만들기 전에 일정 값을 먼저 고정해야 덜 흔들린다.
이렇게 나오면 OK: 날짜, 시간, 장소, 주소가 칸별로 나뉘고 빠진 값은 null로 비어 있다.
⚠여기서 이렇게 하면 안 돼요: Step 1부터 디자인까지 한 번에 시키면 시간은 맞는데 화면 문구가 뒤섞인다.
2
잠금화면 한 장 만들기
AI에게 보낸 프롬프트
방금 만든 JSON을 써서 모바일 세로 화면용 index.html 하나를 만들어줘. 여행 일정표가 위에서 아래로 읽히게 하고, 오늘 일정이 가장 크게 보이게 해. 배경은 어둡게, 글자는 크게, 오프라인에서도 열리게 외부 라이브러리 없이 만들어줘.
왜 이렇게 시켰나: 첫 결과는 한 파일이 제일 빠르다. 5분 안에 화면이 떠야 계속 하게 된다.
이렇게 나오면 OK: 휴대폰 세로 비율에 맞는 카드 하나가 뜨고 여행 일정표를 스크롤 없이 볼 수 있다.
⚠여기서 이렇게 하면 안 돼요: 지도 버튼, 날씨, 환율까지 처음부터 다 넣으려 하면 레이아웃이 바로 무거워진다.
3
한국어만 다듬기
AI에게 보낸 프롬프트
문장을 한국어 생활말로 다듬어줘. 오전 오후 표기를 한국식으로 바꾸고, 공항이나 호텔 이름은 원문을 유지해. 예약번호는 작게, 출발 시간과 체크인 시간은 크게 보여줘.
왜 이렇게 시켰나: 이 한 줄이 없으면 AM 9:20, Check-in 15:00 같은 딱딱한 말이 남는다.
이렇게 나오면 OK: 여행 일정표에 '오전 9시 20분 출발', '체크인 15시'처럼 바로 읽히는 문장이 보인다.
⚠여기서 이렇게 하면 안 돼요: 전체를 다시 만들라고 하면 이미 맞던 간격까지 바뀐다. 문장만 고치라고 짚는 게 낫다.
4
마지막 검수 한 번
AI에게 보낸 프롬프트
이 여행 일정표를 검수해줘. 날짜가 하루 밀린 곳, 같은 시간에 겹치는 일정, 주소가 비어 있는 칸, 공항 이동 전에 체크인 시간이 먼저 오는 이상한 순서를 찾아서 수정안만 짧게 알려줘.
왜 이렇게 시켰나: 여행 일정표는 예쁜 것보다 날짜 실수가 더 아프다. 여기서 한 번 잡아두면 현장에서 덜 당황한다.
이렇게 나오면 OK: 겹치는 시간이나 빈 주소가 짧은 메모로 잡히고, 수정할 줄만 딱 보인다.
⚠여기서 이렇게 하면 안 돼요: 검수 없이 저장하면 출발일이 하루 밀려도 눈으로는 잘 안 보인다.
여기서 막히면
첫 번째는 PDF를 넣었는데 시간이 비어 있는 경우다. 원인은 항공권 표가 이미지처럼 납작하게 들어가서 날짜 줄과 시간 줄이 떨어져 읽히는 데 있다. 이럴 땐 PDF 전체를 다시 넣지 말고 시간표가 있는 부분만 캡처해서 Step 1 프롬프트를 다시 돌리면 금방 붙는다.
두 번째는 여행 일정표가 너무 예쁜 포스터처럼 나오는 경우다. 원인은 첫 프롬프트에 카드 스타일 이야기를 너무 많이 넣어서 Codex가 화면보다 장식에 힘을 준 데 있다. Step 2 문장처럼 'index.html 하나', '오늘 일정 크게', '외부 라이브러리 없이' 이 세 줄만 남기고 다시 시키면 바로 정리된다.
세 번째는 숙소 주소가 영어로만 남아서 현장에서 보기 불편한 경우다. 원인은 Codex가 원문 보존을 너무 충실하게 지켜서 설명 문장까지 영어를 남겼기 때문이다. 주소 원문은 두고 아래 줄에 '택시 기사 보여주기용 한글 주소 한 줄 추가'라고 수정 요청하면 여행 일정표가 훨씬 쓸 만해진다.
다음에 하나만 더 붙인다면
한 걸음 더
다음엔 이 여행 일정표 아래에 체크리스트 한 칸만 붙여보자. 여권, 보조배터리, 유심만 넣어도 출발 직전 멘붕이 줄고, 그때부터는 진짜 여행 PDF보다 이 화면을 더 많이 보게 될 겁니다.
