웹 경험이 없는 직장인이 스마트폰만으로 AI와 4일 만에 '지도를 따라 가장 저렴한 골프장을 찾는 사이트'를 만든 이야기

제작한 것

골맵(GOLMAP) https://golmap-jp.com

지도를 손가락으로 원을 그리듯 감싸면, 그 안의 골프장들을 라쿠텐 GORA의 요금이 저렴한 순서대로 배열해 주는 사이트입니다.

日付を選ぶ画面

① 날짜를 선택합니다. '이번 주말', '다음 3연휴'는 원터치로 가능합니다.

地図で範囲を囲んだ画面

② 가고 싶은 지역을 손가락으로 원을 그립니다. 감싼 범위 안의 66개 코스가 대상이 됩니다.

安い順の結果の地図

③ 저렴한 순서대로 지도에 배열됩니다. 숫자는 순위이며, 누르면 상세 정보와 예약 버튼이 나타납니다.

• 가고 싶은 지역을 지도로 그리기만 하면 됩니다 (예: 고속도로 출구 주변 등, 떨어진 여러 곳을 감쌀 수 있습니다).
• 날짜는 여러 개를 선택할 수 있으며, 그중 가장 저렴한 날짜를 골프장별로 보여줍니다.
• 점심 식사 포함 여부, 2인 동반 보장, 승용 카트 등의 조건이나 '하프(9H) 플랜은 제외'와 같은 제외 조건도 설정할 수 있습니다.
• 다시는 가지 않을 골프장은 '항상 제외' 목록에 추가해 둘 수 있습니다.
• 도도부현/시구정촌 이름으로 선택하면, 지도에 해당 시구정촌의 실제 형태가 나타납니다 (나중에 손가락으로 넓히거나 줄일 수 있습니다).
• 골프장 이름으로도 검색할 수 있습니다. 자주 사용하는 조건은 '📌고정'하여 제목(예: 평소 가던 치바)을 붙여둘 수 있습니다.

왜 만들었는가

저는 골프를 하기 때문에 예약 사이트를 자주 이용합니다. 가족들 때문에 골프 비용은 최대한 저렴하게 쓰고 싶습니다. 찾는 방법은 항상 같아서, '가기 쉬운 곳에서 저렴한 골프장' 입니다.

그런데 기존 예약 사이트에서 저렴한 순서대로 배열하면,

• 단축 코스나 9홀을 두 번 도는 코스가 위쪽에 섞여 나옵니다.
• 같은 현이라도 멀어서 절대 가고 싶지 않은 지역까지 대상이 됩니다.

이것을 매번 눈으로 읽어 건너뛰는 것이 은근히 귀찮았습니다. '가고 싶은 범위를 지도로 감싸서, 그 안에서만 저렴한 순서대로 배열하고 싶다'는 것이 출발점입니다.

또 다른 이유는 웹 개발을 해보고 싶었기 때문입니다. 직장에서는 업무용 애플리케이션을 만들지만, 웹사이트는 한 번도 만들어 본 적이 없었습니다.

• 돈을 들이지 않고 시작하고 싶습니다.
• 들어간 비용(도메인 값 정도)은 회수하고 싶습니다.

이 두 가지 조건을 바탕으로 AI (Claude)와 함께 만들어 보기로 했습니다.

AI와의 진행 과정

방법은 간단해서, 저는 '이렇게 하고 싶다', '여기 부분이 불편하다'만 말하면 됩니다. 코드 작성, 테스트, GitHub에 올리기, 공개하기까지는 AI가 처리합니다.

모든 것은 스마트폰으로 만들었습니다. 지시사항도, 스크린샷도, 도메인 구매(Cloudflare 및 GitHub 설정 화면의 키 등록 포함)도 전부 아이폰에서 했습니다. 직장 휴식 시간이나 자기 전 등 여유 시간에 조금씩 진행했습니다. 컴퓨터를 연 것은 공개한 후에 PC에서의 보이는 것을 확인했을 때뿐이었습니다.

제 업무는 주로 이 세 가지였습니다.

• 하고 싶은 것을 일본어로 전달하기 (예: '따라 그리는 설명 아이콘이 문장과 어긋난다' 정도의 구체적인 수준으로도 통한다)
• 아이폰으로 직접 만져보고 스크린샷을 찍어 돌려주기
• 계정 생성이나 키 등록 등, 저만이 할 수 있는 작업하기 (API 키나 비밀번호는 채팅에 붙이지 않고, 각 서비스에 제가 직접 등록합니다.)

인상적이었던 점은, AI가 매번 테스트(Playwright로 실제로 브라우저를 구동)를 작성한 후에 공개한다는 것이었습니다. 수정했다고 생각했는데 다른 부분이 고장 나는 경우가 거의 없었습니다.

잘 된 요령은 다음과 같습니다.

• '무엇이 싫은지'를 그대로 말하기. 해결책은 스스로 생각하지 않고 AI에게 맡깁니다. '스크롤하려고 하면 선을 그려버린다'고 전달했더니, '지도를 탭할 때까지 조작할 수 없는 상태로 만든다'는 안이 나왔습니다.
• 망설여질 때는 의견 물어보기. '위자드 형식으로 하는 게 좋을까?'라고 물으니, 이유와 함께 '모두 위자드는 피하고, 완료된 항목은 한 줄에 접는 것이 좋다'고 답이 돌아옵니다.
• 다른 AI의 리뷰도 보여주기. 다른 AI에게 평가받은 내용을 붙여 넣으면, '이것은 대응됨', '이것은 맞음', '이것은 동의하지 않음' 등으로 분류해 줍니다.
• 그림은 그림에 특화된 AI에게 맡기기. 상단의 먹그림 골퍼와 홈 화면 아이콘은 '붓으로 그린 골프 스윙, 일본적인 분위기'라는 콘셉트만 전달하여 Gemini에게 그리게 했습니다. 솔직히 그림 감각은 Claude보다 Gemini가 더 좋았습니다. 완성된 그림을 Claude에게 넘겨서 사이트에 통합하도록 했습니다.

4일 동안 한 일

4일차 마무리 및 성과

GitHub에 반영된 변경 사항은 자동 업데이트를 제외하고 약 150회였으며, 프로그램 코드는 약 4,700줄이 되었습니다. 이 코드 중 제가 직접 작성한 부분은 없습니다.

사용 기술 및 비용

막혔던 부분 (트러블슈팅)

예약 버튼을 누르면 '서버를 찾을 수 없습니다'

라쿠텐 API가 반환하는 스마트폰용 예약 링크가 이미 종료된 오래된 휴대폰 사이트 주소였습니다. AI가 임시 조사용 자동 처리를 만들어 라쿠텐이 반환하는 값을 확인하고, PC용 링크로 전환하여 해결했습니다.

광고 차단기 때문에 예약 화면이 열리지 않음

제휴 마케팅 링크가 iPhone의 콘텐츠 차단기에 막히는 경우가 있었습니다. 버튼을 눌러도 열지 않는 사용자를 위해 '열리지 않았을 때는 직접 열기'를 제공하도록 했습니다.

지도를 따라 그리려고 하면 스크롤과 충돌이 발생함

스마트폰에서 지도 위를 아래로 스크롤하려고 할 때, 선을 긋는 기능과 충돌했습니다. 지도는 터치할 때까지 '정지 상태'로 유지하고, 조작 중인 부분은 주황색 두꺼운 테두리로 표시하여 사용자가 알 수 있게 했습니다.

라쿠텐 API는 '1초에 1번'까지 제한적임

범위가 넓으면 문의(요청)가 늘어나 대기 시간이 발생합니다. 대응책은 다음 세 가지입니다.

• 날짜와 지역이 결정되는 순간, 백그라운드에서 미리 요금을 가져옴
• 동일한 조건의 결과는 서버에서 일정 시간 재사용함
• 혼잡할 때는 동시 문의를 줄임

약관은 제대로 읽기

라쿠텐 웹 서비스에는 수익화 방법이나 링크 배치에 관한 규정이 있습니다. 처음에는 타사 예약 사이트 버튼도 배치했지만, 규정을 다시 읽고 제거했습니다. 골프장 사이트로 안내할 때는 '예약'이 아니라 '골프장 정보 보기'로 안내하고 있습니다. 수익은 원하지만, 비열한 행동은 하지 않는다가 방침입니다.

공들인 부분 (강조점)

• 노년층 골퍼도 읽을 수 있는 글자 크기 (PC는 전체를 1.15배로 확대) -
• 개인 정보를 수집하지 않음 (기록은 도도부현(都道府県) 수준의 지역까지만, IP 주소는 저장하지 않음) -
• 예약은 라쿠텐 GORA 화면에서 확인한 후 진행하도록 함. 버튼을 '라쿠텐 GORA / 예약・확인'으로 설정하여, 누른다고 해서 바로 예약이 확정되는 것이 아님을 알 수 있도록 했습니다.

경험을 마치고 느낀 점

업무용 애플리케이션(業務アプリ)의 경험이 있었음에도 불구하고, 웹은 '어디에 배치할지', '어떻게 공개할지', '도메인이 무엇인지'부터 알지 못했습니다. 그것이 4일 만에 제가 매주 사용하고 싶은 것이 되었습니다.

제가 한 일은 '무엇이 불편한가'를 계속 말하는 것뿐이었고, 이는 매주 골프장을 찾는 저 자신만이 할 수 있는 부분이었습니다. AI에게 만들게 할 때보다, 만드는 사람보다 사용하는 사람의 시점이 더 중요하다는 것을 느꼈습니다.

골프를 치시는 분들은 꼭 사용해 보시길 바랍니다. 불편한 점은 사이트 하단의 '의견・요구사항'을 통해 보내주시면 감사하겠습니다.

Discussion