[5화] AI로 내 아이디어를 웹사이트로 만들기 — 전 세계에 공개하기 (마지막 화)

1화에서 시작한 아이디어가 4화를 거치며 실제로 작동하는 화면이 되었습니다. 지금 내 컴퓨터 안에서만 볼 수 있는 이 결과물을, 이번 편에서 인터넷 주소만 있으면 누구나 볼 수 있게 공개해보겠습니다. 이 시리즈의 마지막 편입니다.

이 시리즈의 전체 여정

공개하기, 왜 필요할까요

지금까지 만든 결과물은 내 컴퓨터의 npm run dev 서버가 켜져 있을 때만 볼 수 있습니다. 컴퓨터를 끄거나 서버를 종료하면 아무도 접속할 수 없습니다. '공개하기(배포)'는 이 결과물을 24시간 켜져 있는 인터넷 어딘가에 옮겨서, 친구에게 주소만 보내줘도 바로 볼 수 있게 만드는 과정입니다.

필요한 도구는 두 가지뿐입니다

이 시리즈의 이전 편들과 마찬가지로, 공개하기도 무료 도구 두 가지만 있으면 충분합니다.

• GitHub — 완성된 코드를 저장해두는 사물함
• Vercel — 사물함 속 코드를 꺼내서 실제 인터넷 주소로 만들어주는 서비스

이 두 도구를 이용한 구체적인 가입·연결 방법은 AI로 홈페이지 만들고 무료로 인터넷에 올리기 글에서 화면 단계별로 자세히 다뤘습니다. 이번 편에서는 그 방법을 이 시리즈에서 만든 프로젝트에 그대로 적용해보겠습니다.

실전 — "우리 반 숙제 알림 앱" 공개해보기

2화에서 my-first-project라는 폴더에서 시작해 3, 4화를 거치며 다듬어온 프로젝트가 있다면, 아래 순서로 공개할 수 있습니다.

1. GitHub에 가입하고, homework-app처럼 이 프로젝트를 나타내는 이름으로 새 저장소(repository)를 만듭니다.
2. 터미널에서 my-first-project 폴더 안으로 들어간 뒤, AI에게 이렇게 요청합니다.

이 프로젝트를 방금 만든 GitHub 저장소에 올려줘

3. AI가 안내하는 대로 진행하면 코드가 GitHub에 저장됩니다. (직접 git 명령어를 입력하고 싶다면 위에서 링크한 배포 가이드 글에 순서가 자세히 나와 있습니다.)
4. Vercel에 가입하고, 방금 GitHub에 올린 저장소를 연결합니다.
5. 몇 번의 클릭만으로 배포가 시작되고, 잠시 후 실제로 접속할 수 있는 주소가 만들어집니다.

이 주소를 반 친구에게 보내주면, 친구는 그 주소를 누르는 것만으로 여러분이 만든 숙제 알림 앱을 바로 볼 수 있습니다.

배포 후에도 계속 고칠 수 있어요

한 번 공개했다고 끝이 아닙니다. 4화에서 다룬 것처럼 AI에게 계속 수정을 요청하고, GitHub에 다시 저장(git push)하면 Vercel이 자동으로 새 버전을 다시 배포합니다. 즉 서비스를 운영하면서도 언제든 기능을 추가하거나 고칠 수 있다는 뜻입니다.

5편을 마치며

1화에서 아이디어를 한 문장으로 정리하는 것부터 시작해, 도구를 준비하고, 프롬프트로 화면을 만들고, 다듬고, 마침내 공개하기까지 전체 과정을 함께 살펴봤습니다. 이 다섯 단계는 숙제 알림 앱뿐 아니라, 여러분이 떠올릴 어떤 아이디어에도 똑같이 적용할 수 있습니다. 이제 다음 아이디어가 떠오르면, 1화로 돌아가 다시 시작해보세요.

시리즈 전체 다시 보기

• 1화: 아이디어 정리하기
• 2화: 개발 도구 설치하고 시작하기
• 3화: 프롬프트로 진짜 화면 만들어보기
• 4화: 확인하고 다듬기