예린's AI 세컨프로젝트 — 비전공자의 IT & AI 공부 일대기

[바이브코딩 3편] 서버·배포가 뭐예요? 내 앱을 다른 사람에게 보여주는 과정

바이브 코딩 서버 배포 썸네일

안녕하세요. 칼퇴하는 예린입니다.

AI가 만들어준 앱이 내 컴퓨터에서는 잘 보인다고 해볼게요. 친구에게 주소를 보내니 열리지 않고, AI는 “배포하면 됩니다”라고 합니다. 이때 무엇을 해야 할까요?

바이브코딩을 하다 보면 만들기 다음에 서버와 배포라는 단어를 만나게 됩니다. 이번에는 내가 보고 있는 화면을 다른 사람도 열게 하려면 무엇이 달라져야 하는지를 기준으로 이해해 보겠습니다.

1. 내 컴퓨터에서 열리는 주소가 모두에게 열리지는 않아요

내 컴퓨터와 친구 컴퓨터에서 localhost가 각자 자기 기기를 가리키는 그림
개념도|localhost는 주소를 여는 기기 자신을 가리킵니다. 친구에게 보내도 내 컴퓨터의 앱으로 연결되지 않습니다.

AI가 앱을 실행하고 localhost로 시작하는 주소를 알려줄 수 있습니다. 이 주소는 지금 사용하는 컴퓨터 자신을 가리킵니다. 친구가 같은 주소를 열면 친구의 컴퓨터를 찾게 되므로 내 앱이 보이지 않습니다.

반면 AI 제작 도구가 제공하는 미리보기 링크는 다른 사람도 열 수 있는 경우가 있습니다. 도구마다 공유 권한과 유지 기간이 다릅니다. 따라서 “미리보기니까 공유할 수 없다”라고 단정하기보다 이 링크를 누가, 언제까지 열 수 있는지 확인해야 합니다.


2. 서버는 계속 요청을 받아주는 쪽이에요

기기의 요청과 서버의 화면 데이터 응답을 보여주는 흐름도
개념도|기기가 화면이나 데이터를 요청하면 서버가 필요한 내용을 응답합니다. 서버는 이런 역할을 맡는 프로그램과 환경을 뜻합니다.

메모 앱에 접속하면 먼저 화면이 필요합니다. 로그인하거나 저장한 메모를 불러올 때는 사용자에 맞는 데이터도 필요합니다. 이 요청에 필요한 내용을 보내주는 역할을 서버가 맡습니다.

서버라는 말을 들었다고 직접 컴퓨터를 사야 하는 것은 아닙니다. 앱을 올려둘 환경을 제공하는 호스팅 서비스를 사용할 수 있습니다. 화면 파일을 전달하는 정도로 충분한 앱도 있고, 로그인 확인이나 외부 API 호출을 처리하는 실행 환경까지 필요한 앱도 있습니다.


3. 배포는 만든 앱이 다른 환경에서도 돌아가게 하는 일이에요

앱 파일과 DB API 설정을 배포 환경에 준비하고 기능을 확인하는 과정
개념도|배포는 앱 파일과 실행에 필요한 설정을 다른 환경에 준비하는 과정입니다. 배포 후 화면뿐 아니라 저장·조회·요약 기능도 확인합니다.

AI가 내 컴퓨터에 작성한 파일은 그곳에 있습니다. 다른 사람이 접속할 환경에서도 앱을 쓸 수 있도록 파일을 올리고, 실행에 필요한 설정을 갖추는 작업이 배포입니다. 사용하는 도구에 따라 버튼 몇 번으로 진행할 수도 있습니다.

여기서 중요한 점은 화면이 열리는 것과 기능이 작동하는 것은 별개라는 것입니다. 메모 앱의 화면을 올렸어도 저장할 DB나 외부 AI API 설정이 빠졌다면 저장과 요약은 실패할 수 있습니다. AI에게 “배포 환경에서도 저장·조회·요약이 되는지”까지 확인해 달라고 요청하세요.


4. 도메인은 주소이고, 앱이 돌아가는 장소는 따로 있어요

도메인은 사람이 기억하기 쉬운 인터넷 주소입니다. 호스팅 서비스에서 받은 기본 주소로도 앱을 확인할 수 있는 경우가 많습니다. 개인 도메인은 그 앱을 찾는 주소로 연결할 수 있습니다.

AI가 “도메인을 연결하세요”라고 해도 도메인 구입부터 할 필요는 없습니다. 우선 기본 주소가 있는지, 그 주소에서 앱이 제대로 작동하는지 물어보세요. 주소를 바꾸는 일과 앱을 실제로 실행하는 일을 구분하면 덜 헷갈립니다.


5. 공유하기 전에 AI에게 사용 범위를 알려주세요

“내가 다른 기기에서도 쓰고 싶어”, “친구 두 명에게만 보여주고 싶어”, “누구나 링크를 열게 하고 싶어”는 서로 다른 요청입니다. 비공개로 쓰려면 로그인이나 접근 제한 같은 조건도 함께 알려줘야 합니다.

AI에게 필요한 계정, 서비스의 이용 조건, 예상 비용, 공유 권한을 먼저 설명받으세요. 준비가 끝나면 다른 기기에서 주소를 열고 주요 기능을 직접 사용해 봅니다. 내 컴퓨터에서 성공한 작업이 그 주소에서도 이어지는지 확인하면 됩니다.

설명에 참고한 공식 자료

MDN: 클라이언트와 서버가 요청·응답하는 구조


다음 4편에서는 AI가 코드를 고친 뒤 잘되던 기능이 망가졌을 때, 변경 기록을 남기는 Git과 GitHub가 어떤 도움을 주는지 알아봅니다.

바이브코딩 깊이 알아보기에서 다른 용어도 이어서 보기

댓글 쓰기

이메일 주소는 공개되지 않습니다.