테크모라

차 안에서 시작한 10분의 기획이, 다른 사람에게 링크로 공유할 수 있는 웹서비스가 됐습니다. 이번 실습에서는 실제로 만든 ‘대전 막걸리로드’를 살펴보고, 기획서와 소스를 받아 여러분의 아이디어로 바꿔봅니다.

이 글에서 사례 읽기 → 결과물 체험 → 구조 분석 → 아이디어 보완 → 구현·배포까지 따라갈 수 있습니다. 파일을 먼저 받아두고 진행해도 좋습니다.

만든 이야기 · 결과물 체험 · 1단계 구조 분석 · 2단계 아이디어 보완 · 3단계 구현·배포 · 자료 다운로드

비 오는 날엔 막걸리 — 작은 생각에서 시작한 서비스

비가 오면 생각나는 전 한 장, 막걸리 한 사발. “이럴 때 갈 만한 가게를 지도에서 한눈에 찾아볼 수 있으면 어떨까?” 이번에는 이 작은 아이디어를 AI와 함께 실제 웹서비스로 만들어 봤습니다. 이름은 대전 막걸리로드입니다.

시작은 차 안에서 보낸 약 10분이었습니다. AI에게 아이디어를 이야기하고, 누구에게 필요한 서비스인지, 어떤 정보를 보여줄지, 어디까지 만들면 좋을지를 함께 정리했습니다. 그렇게 대화가 하나의 기획서가 됐습니다.

1. 아이디어를 기획서로. 사용할 사람과 필요한 기능, 첫 버전의 범위를 함께 정했습니다.
2. 기획서를 실제 화면으로. 가게 목록과 상세 화면을 만들고, 버튼을 눌렀을 때 실제로 반응하도록 기능을 붙였습니다.
3. 정보와 지도 보완하기. 가게 사진, 후기 요약, 추천 이유를 보완하고 지도도 연결했습니다.
4. 아스트라에서 다듬고 배포. 아스트라 버전에서 더 다듬어 다른 사람에게 링크로 공유할 수 있도록 최종 배포까지 이어갔습니다.

10분은 처음 기획에 쓴 시간입니다. 구현하고, 확인하고, 다시 고치는 과정은 그 뒤에 이어졌습니다.

아직 상용 서비스 수준까지 완성했다고 보기는 어렵습니다. 가게 정보의 최신성, 사진 이용 권한, 여러 휴대폰에서의 동작처럼 더 다듬어야 할 부분도 있습니다. 그래도 가족이나 친구, 모임에서 “오늘 어디 갈까?”를 함께 살펴보는 용도로는 충분히 활용해 볼 만합니다.

먼저, 완성된 결과물을 직접 눌러보세요

1. 지역을 바꿔 가게 찾기: 원도심·서구·유성의 가게 목록을 비교해 보세요.
2. 가게 상세 정보 열기: 사진, 후기 요약, 추천 이유와 출처를 살펴보세요.
3. 지도와 저장 기능 써보기: 위치와 외부 지도 연결을 확인하고 마음에 드는 곳을 저장해 보세요.

가게 정보는 실시간 정보가 아닙니다. 실제 방문 전에는 영업 여부와 메뉴를 확인해 주세요. 저장한 곳은 이용 중인 브라우저에 보관됩니다.

“만약 상용화한다면, 어떻게 바꿔보면 좋을까?”

이번 실습은 기존 서비스를 출발점으로 각자의 아이디어를 넣어보는 시간입니다. 대전을 우리 동네로, 막걸리 가게를 다른 장소로 바꿔도 좋습니다. 처음에는 직접 써보고 싶은 변화 한 가지부터 정해 보세요.

바꿔볼 주제	사용할 사람	해결하고 싶은 불편
아이와 가기 좋은 식당 지도	어린 자녀와 외식하는 가족	유아 의자·주차 등 방문에 필요한 정보가 흩어져 있음
조용히 작업하기 좋은 카페 지도	집 근처에서 집중할 공간을 찾는 사람	소음·좌석·콘센트 정보를 비교하기 어려움
모임 장소 지도와 투표	친구 모임의 장소를 정하는 사람	후보 장소가 대화방에 흩어져 결정하기 어려움

상용화까지 생각한다면 누가 계속 쓰고 싶어 할지, 가게 정보를 누가 갱신할지, 잘못된 정보를 어떻게 제보받을지도 함께 고민해 보세요. 예약·제휴 같은 기능은 기본 탐색이 안정적으로 작동한 다음에 검토해도 좋습니다.

실습 준비: 기획서와 소스 파일 받기

기획서를 읽고 구조를 이해한 뒤 소스를 함께 분석하면 수정할 부분을 구체적으로 짚기 쉽습니다. 아래 전체 ZIP을 내려받아 압축을 풀어 주세요. 각 파일의 용도와 개별 링크는 글 아래 자료실에도 정리했습니다.

• 파일을 읽고 코드를 만들 수 있는 AI 도구를 준비합니다. 파일 첨부와 배포 지원 여부는 사용 중인 도구에서 확인하세요.
• 기획서 HTML은 브라우저에서 열어 읽을 수 있습니다. 구현 소스 ZIP은 AI에게 첨부하거나, 압축을 풀고 README부터 살펴보세요.
• 기획서는 최초 버전입니다. 이후 지도 방식과 상세 정보가 보완되어 현재 서비스와 일부 차이가 있습니다.

1단계 — AI에게 서비스 구조 분석시키기

서비스 링크와 첨부 기획서를 AI에게 전달합니다. 링크만으로 내부 코드를 확인하지 못한다면 구현 소스 ZIP도 함께 첨부해 주세요. 먼저 무엇이 있는지 파악한 뒤 수정을 시작합니다.

아래 요청문을 복사해 AI에게 보내세요.

아래 서비스와 첨부한 기획서·소스를 바탕으로 화면 구성, 사용자 이용 흐름, 주요 기능과 데이터 구조를 분석해 줘.

서비스: https://makgeolli-road-daejeon.pluzh22.chatgpt.site

자료로 확인한 내용과 추정한 내용을 구분하고, 내가 수정하기 쉬운 부분을 알려줘. 링크만으로 확인할 수 없는 내용은 알려줘. 아직 구현은 시작하지 마.

확인할 결과: 주요 화면과 기능 목록, 데이터가 들어 있는 위치, 수정 가능한 부분이 정리되어 있으면 다음 단계로 넘어갑니다.

2단계 — 내 아이디어를 넣어 수정·보완하기

만들고 싶은 서비스, 사용할 사람, 해결하고 싶은 불편을 한 줄씩 적습니다. 아래 대괄호를 내 내용으로 바꿔 AI에게 전달하세요.

기존 서비스를 아래 아이디어에 맞게 바꾸고 싶어.

만들고 싶은 서비스: [내 아이디어]
사용할 사람: [대상]
해결하고 싶은 불편: [문제]

첫 버전에 필요한 핵심 기능 3개를 정리하고, 기존 구조에서 무엇을 수정하면 좋을지 제안해 줘.

상용화한다면 추가로 준비할 부분도 따로 알려줘.

예시: ‘아이와 가기 좋은 우리 동네 식당 지도 / 어린 자녀와 외식하는 가족 / 유아 의자와 주차 정보를 찾기 어려움’처럼 적으면 됩니다.

확인할 결과: 첫 버전에서 바꿀 핵심 기능 3개와 나중에 추가할 기능이 구분되어 있는지 살펴보세요.

입력칸에 아이디어를 적어 요청문을 만들고 복사하려면 아래 실습 화면을 이용할 수 있습니다. 원래 안내 페이지의 예시 선택·요청문 복사 기능이 연결됩니다.

3단계 — 구현하고 실제 배포하기

정한 수정안을 실제로 구현한 뒤 휴대폰에서 주요 버튼을 눌러봅니다. 다른 사람에게 전달할 수 있는 주소까지 만드는 것이 이번 실습의 목표입니다.

정리한 수정안을 실제로 구현해 줘. 모바일 화면과 주요 버튼, 데이터가 없거나 오류가 날 때의 동작을 확인해 줘.

사용할 수 있는 배포 도구로 로그인 없이 열 수 있는 링크를 만들고, 실제 접속 결과와 아직 확인하지 못한 부분을 알려줘.

유료 서비스가 필요하다면 비용과 선택지를 먼저 설명해 줘.

배포 후 직접 확인할 세 가지

• 가게 카드, 필터, 상세 보기 등 주요 버튼이 실제로 반응하는지 확인합니다.
• 휴대폰에서 글자가 읽히고 버튼이나 화면이 겹치지 않는지 확인합니다.
• 로그인하지 않은 환경에서도 공유 링크가 열리는지 확인합니다.

외부 앱으로 이동하는 버튼은 사용하는 휴대폰에서도 눌러보세요. AI가 확인하지 못한 항목은 남겨두고, 동작이 다른 부분을 구체적으로 알려주며 수정하면 됩니다.

실습에 필요한 파일 다운로드

아래 파일은 로그인 없이 받을 수 있습니다. 전체 ZIP에는 기획서, 구현 소스, 결과물 HTML, 사례 글, 시작 안내가 들어 있습니다.

자료	어디에 쓰나요?	열기·다운로드
처음 작성한 기획서 · HTML	초기 기능 범위, 데이터 구조, 개발 요청문과 출처를 읽습니다.	기획서 열기
구현 소스 · ZIP	AI에게 첨부해 분석하거나 내 아이디어로 수정합니다.	소스 ZIP 다운로드
결과물 · HTML	내 컴퓨터에서 열어볼 수 있는 웹페이지 버전입니다.	결과물 HTML 열기
사례 글과 실습 안내 · MD	텍스트 편집기에서도 읽을 수 있는 원고입니다.	실습 안내 MD 열기

HTML·MD가 브라우저에서 바로 열리면 ‘다른 이름으로 저장’을 이용하거나 전체 ZIP을 내려받으세요. 결과물 HTML의 지도와 사진 등 외부 자료에는 인터넷이 필요합니다. 현재 배포본은 위의 ‘대전 막걸리로드 체험하기’로 확인할 수 있습니다.

같은 시작, 다른 아이디어

완성한 링크와 함께 “나는 무엇을 바꿨는지” 한 가지씩 모임에 공유해 주세요. 막걸리 지도에서 출발했지만, 누군가는 가족 외식 지도를, 누군가는 동네 카페 지도를 만들 수 있습니다. 같은 출발점에서 어떤 서비스가 나오는지 함께 만들어 보겠습니다.

이 글은 직접 진행한 대전 막걸리로드 제작 사례와 배포된 실습 페이지를 바탕으로 작성했습니다. 대표 이미지는 AI로 제작했습니다. 실습 자료와 원본 서비스의 정보 확인 기준은 2026년 11월 5일입니다.