혼자 상하이 가는 아내를 위해, AI랑 여행 웹페이지를 만들었습니다 (실사용 후기까지)

처음엔 채팅으로 만들었습니다#

처음에는 AI 채팅창에서 만든 간단한 페이지였습니다. 일정이 나열되기는 하는데, 수정하면 저장이 안 되고 폰에서 열면 글자가 작았습니다.

그래서 처음부터 다시 가기로 했습니다. 요청은 딱 한 줄이었습니다. “아이폰에서 보기 좋게, 수정하면 저장되게.”

일정 카드 하나에 다 넣었습니다#

여행 중에 필요한 건 결국 “지금 어디로, 어떻게, 얼마” 세 가지입니다. 그래서 카드 하나에 시간·장소·메모·예상 경비를 넣고, 아래에 버튼 네 개를 달았습니다.

• 길찾기 — 지도 앱으로 바로
• 기사님께 보여주기 — 중국어 주소를 크게
• • 지출 — 쓴 돈 기록
• 편집 — 시간·메모 수정

완료 버튼은 카드 오른쪽 위에 크게 뒀습니다. 걸어 다니면서 누르는 버튼이라 작은 동그라미로는 안 눌립니다.

말이 안 통할 때를 위한 화면#

중국에서 택시를 타면 결국 주소를 보여줘야 합니다. 그래서 버튼 하나로 중국어 주소가 화면 가득 뜨게 했습니다.

위에는 “师傅，请送我到这里，谢谢！“(기사님, 여기로 가 주세요) 한 줄을 넣었습니다. 폰을 그냥 내밀면 되게요. (호텔 이름과 주소는 가렸습니다.)

예산을 일정 안으로#

예산표를 따로 만들면 여행 중에는 안 봅니다. 그래서 그 날 일정 맨 위에 예상 경비를 올리고, 항목을 펼쳐볼 수 있게 했습니다.

체크하면 지출 기록에 자동으로 들어갑니다. 금액이 다르면 그 자리에서 고칩니다.

경비 탭에서는 예산 대비 얼마나 썼는지 게이지로 봅니다. 환율은 설정에서 바꿀 수 있게 했습니다.

아이폰에서만 깨졌습니다#

AI가 보는 미리보기는 크롬입니다. 그래서 아이폰 사파리에서만 생기는 문제는 못 잡습니다. 실제로 편집 화면 아래쪽이 이렇게 깨졌습니다.

캡처 한 장에 “하단 레이아웃 깨짐” 한 줄만 보냈더니 바로 고쳤습니다. 시간·선택 입력칸이 화면 밖으로 밀려나는 문제였습니다.

화면 가운데로 올려 주세요#

지출 기록 창이 아래에서 올라오는 방식이었는데, 폰에서는 손가락에 가려 보기 불편했습니다. 가운데 팝업으로 바꿨습니다.

다크 모드도 이때 넣었습니다. 폰 설정을 따라가되, 오른쪽 위 버튼으로 바꿀 수 있게 했습니다.

지도 앱으로 바로 넘기기#

중국에서는 구글 지도가 안 되니 고덕지도(Amap)를 씁니다. 길찾기 버튼을 누르면 현재 위치에서 목적지까지 지도 앱이 바로 열립니다.

처음에는 누를 때마다 “앱으로 열까요?” 확인창이 떴습니다. 고덕 유니버설 링크로 감싸서 없앴습니다.

날짜를 예쁘게, 날씨도#

상단 날짜를 옆으로 넘기는 카드로 바꾸고, 날짜마다 그날 예보를 넣었습니다. 비 올 확률이 높으면 우산을 챙기라고 알려 줍니다.

여행 중에 제일 자주 보는 건 “지금 뭐 하고 다음은 뭐지”입니다. 그래서 현재 시각 기준으로 지금·다음 일정을 맨 위에 띄웠습니다.

출발 전 체크리스트#

비자, 알리페이 카드 등록, 디디 앱 가입, 로밍, 보조배터리 같은 것들입니다. 여행 전날 밤에 쓸 화면이라 정보 탭에 넣었습니다.

실제로 출발 전에 이렇게 썼습니다. 11개 중 8개가 체크된 상태입니다.

혼자 있을 때를 위한 탭#

혼자 가는 여행이라 제일 신경 쓴 부분입니다. 긴급 전화, 영사관, 제 연락처, 그리고 현지에서 바로 보여줄 중국어 문구를 넣었습니다.

이름을 누르면 중국어 도움 카드가 크게 뜹니다. 전화는 번호 버튼에만 걸었습니다. 줄 전체를 누르면 걸리게 해 두면, 걸어가다 잘못 눌러 모르는 번호로 전화가 갑니다.

삭제는 모달로 한 번 더 묻습니다. 연달아 터치하는 실수를 막으려고 창이 열린 뒤 0.4초는 확인 버튼을 무시합니다.

나스로 옮기고 비밀번호를 걸었습니다#

처음에는 웹호스팅에 올리고 주소를 아무에게도 알려주지 않는 걸로 관리했습니다. 그러다 집에 있는 시놀로지 나스로 옮기면서 6자 비밀번호를 걸었습니다.

한 번 넣으면 그 폰에서는 180일 동안 다시 묻지 않습니다. 주소만 아는 것으로는 안 열립니다.

일정을 아는 AI를 붙였습니다#

여기가 이번에 제일 크게 바뀐 부분입니다. 페이지 안에 AI 도우미를 넣었습니다. 우리 일정을 이미 알고 있는 AI라서 “다음 일정 가는 법” 같은 걸 바로 답합니다.

제일 많이 쓴 건 메뉴판입니다. 사진을 찍어 올리면 한국어로 번역하고, 혼자 먹기 좋은 메뉴와 가격까지 정리해 줍니다.

답은 2~3초면 나옵니다. 대신 영업시간처럼 최신 정보가 필요한 건 답변 아래 “웹에서 다시 확인” 버튼을 누르면 됩니다. 30초쯤 걸리지만 출처 링크까지 달아서 다시 답합니다.

빠른 답과 느린 답을 사용자가 고르게 하는 대신, 일단 빠르게 답하고 필요할 때만 느린 쪽을 부르는 구조입니다. 이건 AI가 제안한 방식인데 제 생각보다 나았습니다.

그래서 아내는 뭘 제일 많이 썼을까요#

여행이 끝나고 물어봤습니다. 세 가지였습니다.

1. AI 번역 — 메뉴판을 찍어서 물어보는 것

2. 길찾기 버튼 — 검색하고 누르면 지도 앱으로 바로 연결되는 것

3. 타임라인 + 지도 조합 — 시간표를 보면서 지도 앱으로 동선을 확인하는 것

특히 카페에서요.

“커피숍 가서 주문할 때 편했어!”

반대로 경비 기록은 쓰다가 말았다고 합니다. 체크 한 번으로 지출이 남게 만든 기능인데, 정작 여행 중에는 손이 안 갔다는 거죠.

만들 때 제일 공들인 게 경비 쪽이었는데 말입니다. 실제로 쓰인 건 “지금 이게 뭐야”와 “여기서 저기까지 어떻게 가” 를 해결해 주는 기능이었습니다. 여행 중에는 계산보다 주문과 이동이 훨씬 자주 일어나니까요.

AI와 만들면서 느낀 것#

• 처음엔 대충 말해도 됩니다. “별로라서 다시 봐 줘”로 시작해도 AI가 먼저 문제를 찾아 줍니다.
• 누가, 어떤 상황에서 쓰는지를 떠올리면 필요한 기능이 보입니다. 저는 “아내가 혼자 있을 때”를 계속 상상했습니다.
• 구체적일수록 결과가 좋습니다. “모바일” 대신 “아이폰”, “예쁘게” 대신 “옆으로 넘기게, 3일 보이게”.
• 버그는 캡처 한 장 + 한 줄. 길게 설명할 필요가 없었습니다.
• AI 제안이 이상하면 바로 말합니다. 실제로 쓰는 사람이 제일 잘 압니다.

주의할 점도 있습니다. AI는 실제 폰에서 직접 확인하지 못합니다. 아이폰에서만 생기는 문제는 결국 사람이 열어 봐야 합니다. 그리고 가족 일정이 담긴 페이지는 처음부터 비밀번호를 걸고 시작하는 게 낫습니다. 저는 나중에 걸었습니다.

마치며#

코딩을 몰라도 “이거 불편해, 이렇게 해 줘”를 계속 말하는 것만으로 우리 여행에 맞는 도구가 생겼습니다.

그리고 다 만든 뒤에야 알게 된 것이 하나 있습니다. 만든 사람이 중요하다고 생각한 기능과, 쓰는 사람이 실제로 손이 가는 기능은 다릅니다. 다음에 만든다면 번역과 길찾기부터 만들 것 같습니다.