🌎 내 첫 번째 웹페이지 런칭기 - Git과 Vercel로 세상과 '링크'되다.

소개

오늘 지피터스 실습 세션에서는 Git과 Vercel을 활용해 직접 웹페이지를 배포하는 시간을 가졌다.

사실 Git은 지지난주 22기 온보딩 스터디에서 이미 설치해둔 상태라 비교적 수월하게 진행할 수 있었다. 처음에는 "웹페이지 배포"라는 말이 어렵고 거창하게 느껴졌는데, 막상 학습반장님의 안내를 따라 차근차근 진행해보니 생각보다 훨씬 간단했다.

특히 Vercel을 이용한 배포는 놀라울 정도로 쉬웠다. GitHub와 연결하고 몇 번의 클릭만으로 내가 만든 자기소개 페이지가 인터넷에 공개되었다.

그 순간의 신기함은 아직도 생생하다.

"내가 만든 페이지가 진짜 인터넷에 올라갔다고?"

너무 신기해서 배포가 완료되자마자 링크를 복사해 아내에게 카카오톡으로 보내주었다.

비록 단순한 자기소개 페이지였지만, 처음으로 세상에 공개된 내 웹페이지였다.

진행 방법

사용한 도구

• Git

• GitHub

• Vercel

• Claude AI

• AntiGravity Editor (IDE)

실습 내용

실습에서는 자기소개 페이지를 생성하고 GitHub에 업로드한 뒤 Vercel을 통해 배포했다.

참고한 실습 가이드

• https://lecture-pink.vercel.app/git-vercel-deploy-guide.html#antigravity-setup

첫 번째 시행착오 - HTML 파일을 수정할 수가 없었다

배포까지는 생각보다 쉽게 끝났다.

문제는 그 다음이었다.

페이지를 수정해보고 싶어 index.html 파일을 열어보려 했는데, 파일을 클릭할 때마다 코드가 보이는 것이 아니라 브라우저에서 웹페이지가 실행되기만 했다.

"도대체 어디서 수정하는 거지?"

결국 학습반장님께 질문을 드렸고, HTML 코드를 쉽게 수정하려면 안티그래비티(AntiGravity) 를 설치하면 된다는 조언을 받았다.

두 번째 시행착오 - 잘못된 프로그램 설치

곧바로 Claude AI의 도움을 받아 안티그래비티를 설치했다.

그런데 또 문제가 생겼다.

학습반장님이 말씀하신 "소스 컨트롤(Source Control)" 메뉴가 아무리 찾아도 보이지 않았다.

다시 확인해보니 내가 설치한 것은 AntiGravity Agent Manager 였다.

정작 필요한 것은 AntiGravity Editor(IDE) 였던 것이다.

결국 Claude의 안내를 따라 IDE까지 추가로 설치했다.

드디어 코드와 만나다

AntiGravity Editor에서 내 프로젝트 폴더를 열자 갑자기 수많은 코드가 화면에 나타났다.

솔직히 말하면 그 순간의 느낌은 이랬다.

"와... 코드가 엄청 많네..."

"근데 무슨 말인지는 하나도 모르겠다."

다행히도 AI가 있었다.

우측 AI 대화창에 원하는 내용을 자연어로 입력했다.

자기소개 내용을 좀 더 따뜻한 느낌으로 바꿔줘.

그러자 AI가 HTML 코드 속 내용을 수정해주었다.

코드를 직접 이해하지 못해도 원하는 결과를 만들어낼 수 있다는 점이 정말 신기했다.

수정 후에는 터미널에서 Git 명령어를 실행했다.

git add .
git commit -m "자기소개 수정"
git push

몇 분도 지나지 않아 Vercel이 자동으로 다시 배포를 진행했고, 웹페이지 내용이 수정된 것을 확인할 수 있었다.

결과와 배운 점

예상치 못한 활용

처음에는 단순한 자기소개 페이지였다.

그런데 수정 방법을 익히고 나니 갑자기 장난기가 발동했다.

그래서 자기소개 대신 아내에게 보내는 연애편지 형식으로 내용을 바꾸어 보았다.

AI에게 내용을 수정해달라고 요청하고, Git으로 Push한 뒤 새롭게 배포된 링크를 다시 아내에게 카카오톡으로 보냈다.

사실 처음 자기소개 페이지를 배포했을 때도 신기한 마음에 아내에게 링크를 보냈었다.

그런데 이번에는 단순한 자기소개가 아니라 갑자기 연애편지로 바뀐 웹페이지가 도착한 것이다.

아내가 링크를 열어본 뒤 잠시 후 카카오톡 알림이 왔다.

메시지를 확인해보니,

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

정확히 몇 개인지는 세지 못했지만 10개는 훌쩍 넘어 보였다.

그 짧은 반응 하나만으로도 얼마나 웃겼는지 충분히 전달되었다.

그 순간 깨달았다.

웹페이지는 꼭 거창한 서비스나 사업 아이디어를 위해서만 만드는 것이 아니구나.

이렇게 소소한 장난과 즐거움을 전하는 도구가 될 수도 있구나.

몇 줄의 글을 수정했을 뿐인데 인터넷에 공개된 페이지가 바로 업데이트되고, 그 링크를 통해 누군가를 웃게 만들 수 있다는 경험이 무척 재미있었다.

가장 크게 느낀 점

오늘 만든 페이지는 사실 매우 단순하다.

디자인도 화려하지 않고 기능도 거의 없다.

하지만 나에게는 굉장히 의미 있는 경험이었다.

왜냐하면 처음으로 내가 만든 무언가가 내 PC 안에만 머무르지 않고 인터넷 세상과 연결되었기 때문이다.

그동안 웹사이트는 늘 누군가가 만든 것을 사용하는 입장이었다.

하지만 오늘은 내가 만든 페이지를 직접 배포했고, 누군가에게 링크를 보내 보여줄 수 있었다.

"WWW(World Wide Web)"라는 거대한 공간에 내 흔적 하나를 남긴 셈이다.

페이지 자체는 볼품없고 단순할지 모른다.

하지만 내가 만든 무언가를 세상과 말 그대로 링크(Link)할 수 있다는 사실은 내게 매우 역사적인 순간이었다.

그리고 무엇보다 내 첫 웹페이지는 세상을 바꾸는 서비스는 아니었지만,

적어도 한 사람을 크게 웃게 만드는 데는 성공했다. 😄

앞으로의 계획

• HTML 구조를 조금씩 이해해보기

• AI와 함께 페이지를 계속 개선해보기

• 자기소개 페이지를 포트폴리오 형태로 발전시켜보기

• 더 다양한 웹서비스 배포 경험 쌓기

오늘의 실습은 단순히 Git과 Vercel 사용법을 배운 시간이 아니었다.

내가 만든 것을 세상과 연결(Link)할 수 있다는 가능성을 직접 체험한 시간이었다.

그리고 그 첫 경험은 생각보다 훨씬 짜릿했다. 🚀

도움 받은 글

실습 가이드

• Git & Vercel 배포 실습 가이드

  • https://lecture-pink.vercel.app/git-vercel-deploy-guide.html#antigravity-setup

도움 받은 도구

• Claude AI

  • AntiGravity 설치 및 IDE 설정 지원

도움 받은 사람들

• 지피터스 22기 실습 세션 학습반장님

  • HTML 수정 방법 안내

  • AntiGravity 활용법 설명

  • Git 및 Vercel 배포 과정 지원