#2 초보를 위한 바이브코딩으로 만든 랜딩페이지 Vercel에서 배포하기

 

2026.07.08 - [Svelte_SvelteKit] - #1 초보를 위한 바이브코딩으로 랜딩페이지 만들기 (스벨트)

#1 초보를 위한 바이브코딩으로 랜딩페이지 만들기 (스벨트)

 

 

 

앞서 바이브코딩을 통해 실제 코드를 한 줄도 치지 않으면서도 그럴싸한 랜딩페이지를 만들어보았습니다.

이제 이렇게 만든 랜딩페이지를 인터넷에 공개(배포)하려면 몇 가지 절차가 필요합니다.

 

1. 깃허브 가입하기

 

깃허브는 개발자라면 모를 수 없는 필수적인 사이트입니다.

혼자 작업하든 여럿이 공동작업을 하든 소스를 내 컴퓨터와 동기화하고 공유하는 등에 있어 없어선 안되죠.

 

※ 초보라면 한글화가 잘 되어 있는 깃랩을 먼저 사용해 보는 것도 나쁘지 않습니다.

 

2. 리포지토리(저장소) 만들기

 

깃허브에 가입하면 대시보드에 New 라는 녹색 버튼이 있는데 이걸로 원하는 이름의 리포지토리를 새로 만듭니다.

(저는 svelte-landingpage 라고 만들었습니다.)

 

※ 안티그래비티에게 새로 만들라고 시켜도 거기까지 해주진 않습니다.

 

리포지토리를 새로 만들었으면 이제 안티그래비티에 동기화 시켜달라고 하면 됩니다.

git 명령어를 사용해서 직접 해볼 수도 있지만 어렵다면 그냥 에이전트에게 시키면 됩니다.

 

https://github.com/ethanjoh/svelte-landingpage

GitHub - ethanjoh/svelte-landingpage

 

위 사이트에 접속해 보시면 잘 동기화되어 있는 리포지토리를 확인할 수 있습니다.

컴퓨터가 바뀌었거나 혹은 다른 사람과 협업이 필요하다면 이 리포지토리에서 소스를 당겨와서 (Pull) 저장하고 수정한 뒤 다시 밀어넣으면 (Push) 소스가 동기화되고 혹시나 충돌되는 코드는 없는지까지 확인해줘서 편리합니다.

 

3. Vercel 가입하기

 

깃허브에 올라간 것을 확인했지만 소스코드만 보이는 것이지 웹사이트를 우리가 볼 수는 없습니다.

다면 이제 실제 배포를 위해 Vercel 이라는 사이트에 가입합니다.

이 때 주의할 점은 깃허브에 있는 리포지토리를 그대로 가져와야 하기 때문에 깃허브로 가입해야 합니다.

개인 취미로 쓸 것이므로  Hobby로 가입합니다.

 

 

 

4. 깃허브에서 가져오기

 

Continue with GitHub를 선택하고 내가 가져올 리포지토리와 깃허브 인증을 거치고 나면 리포지토리들이 나타납니다.

여기서는 앞서 동기화한 리포지토리인 svelte-landingpage를 가져오겠습니다.

 

 

5. 배포하기

 

새로운 프로젝트를 배포하는 과정이 나오는데 설정 상태 그대로 둔 채 Deploy 버튼을 누르면 아래처럼 진행이 됩니다.

 

 

 

6. 배포 사이트 확인하기

최종적으로 필요한 리소스를 빌드하는 과정을 거쳐 볼 수 있는 웹사이트가 공개되었습니다.

 

※ 처음에는 Application Preset을 Svelte로 놓고 했는데 제대로 배포가 안되어서 프로젝트를 삭제하고 다시 처음부터 진행했습니다.

 

 

https://svelte-landingpage-fawn.vercel.app/

temp-app

 

 

7. 문제 해결하기

 

배포까지 했지만 문제가 발생했습니다.

제품 페이지에 있는 헤드폰 이미지가 보이지 않았습니다.

 

제미나이에게 왜 이미지가 안보이는지 물어봤더니 원래 배포가 되면 빌드과정에서 public 폴더로 이미지가 옮겨져야 하는데 그렇게 되지 않았고, 확인해 보니 src/assets에만 이미지가 있었습니다.

하지만 이것을 내가 임의로 public 폴더로 옮겨줄 필요는 없습니다.

 

이건 안티그래비티가 실수한 것이기 때문입니다.

안티그래비티에게 수정을 요청했습니다. 배포 후 이미지가 보이지 않는다고 하니 소스 코드에 그냥 삽입되어 있던 이미지를 import 하도록 수정했습니다.

 

 

그 후 수정된 소스를 깃허브와 동기화하면 Vercel이 자동으로 수정된 것이 있는 것을 인식해서 빌드과정을 다시 거치고, 알아서 배포해줍니다. 이것이 CI/CD인데 처음부터

 

 

---

 

★ 빌드 과정은 왜 필요할까?? ★

 

 

우리가 스벨트 소스 코드를 작성하고 깃허브에 올린 것은 말 그대로 음식을 만들기 위한 재료에 불과합니다.

이것은 브라우저에서 곧바로 읽을 수 있는 형태가 아닙니다. 한마디로 브라우저는 .html 이 아닌 .svelte로 만들어진 파일을 읽어도 제대로 보여주지 못합니다. 

 

※ .svelte 파일을 브라우저에 드래그앤드롭 해보세요. 소스코드가 그대로 보일겁니다.

 

그래서 빌드 도구는 스벨트 컴포넌트들을 브라우저가 해석할 수 있는 순수 자바스크립트 파일로 쪼개고 변환합니다.

이 때 불필요한 줄바꿈이나 주석 등도 없애버리고 파일용량을 줄입니다.

 

또, 실제로 사용하지 않는 이미지나 외부 라이브러리들이 있을 수 있는데 이것도 확인해서 불필요한 것은 제거하고 딱 필요한 것만 만들어냅니다.

 

깃허브에 올린 것이 재료를 준비하는 과정이었다면 Vercel 등에서 하는 빌드작업은 재료를 지지고 볶아서 맛있는 요리로 내놓는 과정이라고 할 수 있습니다.