나 혼자 산다. 바이브코딩과 함께. 9장

 

 

 

PART 3

첫 번째 프로젝트: 나만의 웹사이트

 

 

CHAPTER 9

배포까지 한 번에 — 세상에 공개하기

 

"당신의 웹사이트가 세상과 만나는 순간. 이것이 배포다. 몇 번의 클릭으로, 당신의 작업이 인터넷을 통해 전 세계에 공개된다."

 

 

9.1 배포란 무엇인가

배포(deployment)는 복잡해 보이는 단어이지만, 그 의미는 간단하다. 당신이 만든 웹사이트를 서버에 업로드하여, 인터넷을 통해 누구나 접근할 수 있게 하는 것이다.

지금까지 당신이 만든 웹사이트는 당신의 컴퓨터 또는 개발 환경에만 존재한다. 다른 사람들은 그것을 볼 수 없다. 배포를 하면, 당신의 웹사이트는 서버라는 특별한 컴퓨터에 저장되고, 그 컴퓨터는 24시간 내내 작동하면서 방문자들의 요청에 응답한다.

배포 과정은 다음과 같다. 첫째, 당신의 파일들(HTML, CSS, JavaScript, 이미지 등)을 서버에 업로드한다. 둘째, 도메인(예: www.myportfolio.com)을 설정하여, 방문자들이 쉽게 당신의 웹사이트에 접근할 수 있도록 한다. 셋째, HTTPS 보안을 설정하여, 방문자의 데이터를 보호한다. 넷째, 배포 후에 당신의 웹사이트가 제대로 작동하는지 테스트한다.

과거에는 배포가 복잡했다. 서버 관리, 도메인 설정, 보안 인증서 설치 등이 모두 기술적인 지식을 요구했다. 하지만 오늘날에는 많은 플랫폼이 이 과정을 매우 간단하게 만들어 놓았다. 특히 정적 웹사이트(HTML, CSS, JavaScript만 사용하는)의 경우, 배포는 정말 간단하다.

배포 서비스의 종류

배포 서비스는 여러 종류가 있다. Vercel, Netlify, GitHub Pages, AWS, Google Cloud 등이 있다. 각 서비스는 장점과 단점이 있지만, 초보자에게는 Vercel이나 Netlify가 가장 좋다. 왜냐하면 이들은 매우 간단하고, 무료로 시작할 수 있으며, 자동으로 많은 일을 해주기 때문이다.

  💡 배포 준비

  배포 전에 확인할 것들: 1. 모든 링크가 올바른가? 2. 이미지가 모두 로드되는가? 3. 모바일에서도 잘 보이는가? 4. 로딩 시간이 합리적인가?

 

9.2 Vercel로 3분 만에 배포하기

Vercel은 Vercel, Inc.라는 회사가 만든 배포 플랫폼이다. 주로 프론트엔드 개발자들이 사용하며, 매우 간단하고 빠른 배포 경험을 제공한다. 가장 좋은 점은 무료라는 것이다.

Vercel 계정 만들기

첫 번째 단계는 Vercel 계정을 만드는 것이다. vercel.com에 접속하고 "Sign Up" 버튼을 클릭한다. 이메일 또는 GitHub 계정으로 가입할 수 있다. GitHub 계정으로 가입하는 것이 편하다.

가입 후, 당신은 대시보드라는 화면을 보게 된다. 여기서 당신의 모든 배포된 프로젝트를 관리할 수 있다.

GitHub에 코드 업로드하기

Vercel과 함께 작동하는 가장 일반적인 방법은 GitHub를 사용하는 것이다. GitHub는 코드 저장소이고, Vercel은 GitHub의 코드를 감시하고 있다가, 코드가 변경되면 자동으로 배포한다.

따라서 다음 단계는 당신의 코드를 GitHub에 업로드하는 것이다. GitHub에 계정을 만들고, 새로운 저장소(repository)를 만든다. 저장소의 이름은 당신의 프로젝트 이름으로 지정한다. 예를 들어, "my-portfolio"라고 할 수 있다.

당신의 코드 파일들(index.html, styles.css, script.js, 이미지 폴더 등)을 이 저장소에 업로드한다. GitHub는 웹 인터페이스에서 드래그 앤 드롭으로 파일을 업로드할 수 있다. 또는 Git 명령어를 사용하여 업로드할 수 있다.

Vercel에서 배포하기

이제 Vercel로 돌아온다. Vercel 대시보드에서 "New Project" 버튼을 클릭한다. Vercel이 당신의 GitHub 계정의 저장소들을 보여줄 것이다. 당신의 프로젝트 저장소를 선택한다.

다음 화면에서, 몇 가지 설정을 할 수 있다. 프로젝트 이름, 빌드 명령어 등이다. 하지만 정적 웹사이트의 경우, 대부분의 기본 설정이 작동한다.

마지막으로 "Deploy" 버튼을 클릭한다. 잠깐 기다리면, "Congratulations! Your site has been deployed"라는 메시지가 나타난다. 당신의 웹사이트가 성공적으로 배포된 것이다!

Vercel이 제공하는 URL

배포 후, Vercel은 당신의 웹사이트에 자동으로 생성된 URL을 할당한다. 예를 들어, "my-portfolio-abc123.vercel.app"이라는 형태이다. 이 URL로 당신의 웹사이트에 접근할 수 있다.

이 URL은 임시적이지만, 충분히 작동한다. 나중에 당신의 도메인을 이 Vercel 배포와 연결할 수 있다.

자동 배포와 미리보기

Vercel의 가장 좋은 기능 중 하나는 자동 배포이다. 당신의 GitHub 저장소에 코드를 업데이트할 때마다, Vercel이 자동으로 감지하고 다시 배포한다. 이는 당신이 새로운 기능을 추가하거나 버그를 수정할 때마다, 수동으로 배포할 필요가 없다는 뜻이다.

또한, 당신이 GitHub에 풀 리퀘스트(pull request)를 만들 때, Vercel이 자동으로 미리보기 배포를 만든다. 이를 통해, 실제로 배포하기 전에 변경사항을 테스트할 수 있다.

  💡 Vercel 팁

  GitHub와 Vercel을 연결하면, 당신의 배포 프로세스가 자동화됩니다. 코드를 GitHub에 푸시하면, Vercel이 자동으로 그것을 감지하고 배포합니다. 이는 매우 효율적입니다.

 

9.3 대안 플랫폼 (Netlify, GitHub Pages)

Vercel이 훌륭하지만, 다른 선택지도 있다. 각 플랫폼은 약간씩 다른 장점을 가지고 있다.

Netlify

Netlify는 Vercel과 매우 유사한 플랫폼이다. 둘 다 정적 웹사이트 배포에 최적화되어 있고, 무료로 시작할 수 있으며, 자동 배포를 지원한다.

Netlify의 특징은 다음과 같다. 첫째, 빌드 기능이 강력하다. 복잡한 빌드 프로세스를 지원한다. 둘째, 폼 처리 기능이 있다. 접촉 폼이나 뉴스레터 구독 폼을 쉽게 처리할 수 있다. 셋째, 리다이렉션 규칙을 세밀하게 설정할 수 있다.

Netlify를 사용하는 방법은 Vercel과 거의 동일하다. netlify.com에 접속하여 계정을 만들고, GitHub 저장소를 연결하고, 배포 버튼을 클릭하면 된다.

GitHub Pages

GitHub Pages는 GitHub에서 직접 제공하는 배포 서비스이다. 가장 큰 장점은 GitHub와 완전히 통합되어 있다는 것이다. GitHub 저장소만 있으면, 추가 계정이 필요 없다.

GitHub Pages를 사용하려면, 저장소 설정에서 "Pages" 섹션으로 가서, 배포할 브랜치를 선택하면 된다. 그러면 GitHub Pages가 자동으로 당신의 코드를 배포한다.

GitHub Pages의 단점은 속도이다. 때때로 배포가 느릴 수 있다. 또한, 도메인 설정이 Vercel이나 Netlify보다 복잡할 수 있다. 하지만 무료이고, GitHub를 이미 사용하고 있다면, 추가 설정이 없다.

플랫폼 비교

어떤 플랫폼을 선택할까? 여기 간단한 가이드라인이 있다. 속도와 기능을 원한다면, Vercel을 선택하라. 폼 처리나 복잡한 빌드가 필요하다면, Netlify를 선택하라. GitHub와 완전히 통합되기를 원한다면, GitHub Pages를 선택하라.

대부분의 경우, 시작 단계에서는 어떤 것을 선택하든 상관없다. 나중에 필요하면 옮길 수 있다.

  💡 플랫폼 선택

  초보자에게는 Vercel이나 Netlify를 추천합니다. 둘 다 사용자 친화적이고, 훌륭한 문서를 제공합니다. GitHub Pages는 GitHub에 익숙하다면 좋은 선택입니다.

 

9.4 도메인 연결하기

당신의 웹사이트가 Vercel에 배포되면, 당신은 "my-portfolio-abc123.vercel.app" 같은 URL을 갖게 된다. 이것은 작동하지만, 전문적이지 않다. 대신, 당신만의 도메인(예: www.myportfolio.com)을 사용하고 싶을 것이다.

도메인이란?

도메인은 인터넷 주소이다. www.google.com, www.naver.com, www.myportfolio.com 모두 도메인이다. 도메인을 구매해야 한다. 도메인 등록 회사(registrar)라고 불리는 회사들이 도메인을 판다.

인기 있는 도메인 등록 회사로는 GoDaddy, Namecheap, Google Domains 등이 있다. 도메인 가격은 보통 년간 10-15달러 정도이다. 하지만 일부 회사는 첫 해에 싸게 판다.

도메인 구매 과정

도메인을 구매하는 과정은 간단하다. 도메인 등록 회사 웹사이트에 가서, 원하는 도메인이 사용 가능한지 확인한다. 사용 가능하면 장바구니에 추가하고 결제한다. 보통 신용카드로 결제한다.

도메인을 구매한 후, 당신은 DNS 설정을 해야 한다. DNS는 Domain Name System의 약자로, 도메인을 서버의 IP 주소와 연결하는 시스템이다.

도메인을 Vercel과 연결하기

당신의 도메인을 Vercel에 연결하는 것은 매우 간단하다. Vercel 대시보드에서, 당신의 프로젝트를 클릭하고, "Settings" 탭으로 간다. "Domains" 섹션에서, 당신의 도메인을 추가한다.

그러면 Vercel이 DNS 설정에 필요한 정보를 보여준다. 예를 들어, "CNAME 레코드를 만들어서, www.myportfolio.com을 cname.vercel-dns.com으로 가리키도록 해"라는 식이다.

당신은 도메인 등록 회사의 대시보드에 가서, 이 DNS 설정을 입력한다. 보통 "DNS 설정" 또는 "DNS 관리" 섹션이 있다. 거기서 새로운 DNS 레코드를 만들고, Vercel이 제공한 정보를 입력한다.

DNS 설정이 전파되는 데는 몇 시간이 걸릴 수 있다. 따라서 잠깐 기다려야 한다. 24시간 후, 당신의 도메인이 당신의 Vercel 배포와 연결되어 있을 것이다.

  💡 DNS 설정 팁

  DNS 설정이 복잡하면, Vercel이 도메인 구매 기능을 제공합니다. Vercel에서 직접 도메인을 구매하면, DNS 설정이 자동으로 됩니다. 비용은 조금 더 비싸지만, 편리합니다.

 

9.5 HTTPS와 보안의 기초

당신의 웹사이트가 HTTPS를 사용하고 있는가? 웹 브라우저의 주소창을 보자. 만약 주소 앞에 자물쇠 아이콘이 있다면, HTTPS를 사용하고 있다는 뜻이다.

HTTPS란?

HTTPS는 HyperText Transfer Protocol Secure의 약자이다. 간단히 말해서, 당신과 웹사이트 사이의 통신을 암호화하는 기술이다. 암호화 없이는, 중간에서 누군가가 당신의 데이터를 엿볼 수 있다.

예를 들어, 당신이 로그인 폼에 비밀번호를 입력하면, HTTPS 없이는 그 비밀번호가 평문으로 인터넷을 통해 전송된다. 해커가 중간에 이것을 캡처할 수 있다. 하지만 HTTPS를 사용하면, 비밀번호는 암호화되어 전송되므로, 해커가 이것을 읽을 수 없다.

SSL 인증서

HTTPS를 사용하려면, SSL 인증서라는 것이 필요하다. SSL은 Secure Sockets Layer의 약자이다. 이 인증서는 당신의 웹사이트가 진짜라는 것을 증명한다.

좋은 소식은, Vercel, Netlify, GitHub Pages 모두 무료 SSL 인증서를 자동으로 제공한다는 것이다. 당신이 추가로 할 일은 없다. 배포하면 자동으로 HTTPS가 활성화된다.

보안의 기초

HTTPS 외에도, 웹사이트 보안을 위해 고려해야 할 다른 사항들이 있다. 첫째, 사용자 데이터를 보호하라. 만약 당신의 웹사이트가 사용자로부터 데이터를 수집한다면, 그 데이터를 안전하게 저장해야 한다. 둘째, 정기적으로 업데이트하라. 당신이 사용하는 라이브러리나 플러그인에 보안 취약점이 발견되면, 즉시 업데이트해야 한다.

당신의 포트폴리오 웹사이트는 복잡한 보안이 필요 없다. 사용자 데이터를 저장하지 않기 때문이다. 하지만 연락처 폼이 있다면, 그 데이터를 안전하게 처리해야 한다.

  💡 보안 체크리스트

  1. HTTPS를 사용하고 있나? 2. 폼 데이터를 암호화해서 저장하고 있나? 3. 라이브러리와 플러그인을 최신 상태로 유지하고 있나? 4. 민감한 정보(API 키, 비밀번호)를 공개 저장소에 커밋하지 않았나?

 

9.6 배포 후 수정: 업데이트 워크플로우

당신의 웹사이트가 배포되었다고 해서, 일은 끝나지 않았다. 오히려, 이제부터가 시작이다. 방문자의 피드백을 받고, 버그를 수정하고, 새로운 기능을 추가해야 한다.

피드백 수집

당신의 웹사이트가 공개되면, 방문자들의 피드백을 얻을 수 있다. 방문자들이 어떤 부분을 좋아하는가? 어디서 혼란스러워하는가? 무엇이 작동하지 않는가?

피드백을 수집하는 방법은 여러 가지이다. 연락처 폼을 통해 직접 피드백을 받을 수 있다. 또는 분석 도구를 사용하여, 방문자들이 어떻게 당신의 웹사이트를 사용하는지를 추적할 수 있다. Google Analytics는 무료 분석 도구이다.

버그 수정

배포 후에 버그가 발견될 수 있다. 예를 들어, 어떤 브라우저에서는 작동하지 않는 기능이 있을 수 있다. 또는 모바일에서만 나타나는 문제가 있을 수 있다.

버그를 수정하는 과정은 다음과 같다. 첫째, 버그를 재현한다. 문제를 정확하게 파악한다. 둘째, 원인을 찾는다. AI의 도움을 받아서, 코드에서 무엇이 잘못되었는지를 파악한다. 셋째, 수정한다. 코드를 수정하거나 설정을 변경한다. 넷째, 테스트한다. 수정이 작동하는지 확인한다. 다섯째, 배포한다. GitHub에 코드를 푸시하면, Vercel이 자동으로 다시 배포한다.

새로운 기능 추가

처음에는 MVP(최소한의 기능)로 배포했다. 시간이 지나면, 새로운 기능을 추가하고 싶어질 것이다. 예를 들어, 블로그 섹션을 추가하거나, 이미지 갤러리를 개선하거나, 소셜 미디어 통합을 추가할 수 있다.

새로운 기능을 추가하는 과정도 동일하다. 로컬 환경에서 개발하고, GitHub에 푸시하고, Vercel이 자동으로 배포한다.

버전 관리

시간이 지나면서 당신의 웹사이트는 계속 변한다. 이전의 버전으로 돌아가야 할 경우도 있다. 이것이 버전 관리(version control)의 역할이다.

GitHub는 자동으로 모든 변경사항을 기록한다. 각 커밋(commit)은 특정 시점의 코드의 스냅샷이다. 만약 새로운 업데이트가 문제를 일으킨다면, 이전 커밋으로 돌아갈 수 있다.

  💡 업데이트 팁

  1. 한 번에 많은 것을 수정하지 마세요. 작은 단위로 나누어서 수정하세요. 2. 매 수정마다 의미 있는 커밋 메시지를 작성하세요. 3. 중요한 변경 전에 백업을 하세요. 4. 배포 전에 항상 테스트하세요.

 

9.7 축하합니다! 당신의 첫 웹사이트

당신은 이 책의 시작에서 웹 개발에 대해 아무것도 몰랐을 수도 있다. 하지만 지금, 당신은 당신 자신의 웹사이트를 만들고, 세상에 공개했다.

이것은 작지 않은 성취이다. 많은 사람들이 웹 개발을 배우려고 시도했지만, 포기한다. 기술이 너무 복잡해 보이기 때문이다. 하지만 당신은 AI의 도움으로, 코드를 직접 배우지 않고도, 전문적인 웹사이트를 만들었다.

당신이 배운 것들

당신은 이 여정에서 많은 것을 배웠다. 첫째, 웹사이트 기획하는 방법. 두 번째, 사용자 관점에서 생각하는 방법. 세 번째, AI와 효과적으로 협력하는 방법. 네 번째, 웹 개발의 기본 개념들. 다섯 번째, 배포와 운영하는 방법.

이 모든 것들이 당신의 앞으로의 프로젝트에 도움이 될 것이다. 당신의 다음 웹사이트는 이 첫 번째 경험을 바탕으로 더욱 쉽고 빠르게 만들어질 것이다.

앞으로의 여정

당신의 첫 웹사이트가 공개되었으니, 이제 무엇을 할까? 여러 선택지가 있다.

첫째, 현재 웹사이트를 계속 개선하라. 피드백을 받고, 새로운 기능을 추가하고, 디자인을 개선하라. 당신의 웹사이트는 살아있는 프로젝트이다. 계속 진화한다.

둘째, 다른 사람들을 도와주어라. 당신이 배운 것들을 친구나 동료에게 공유하라. 그들도 웹 개발에 관심이 있을 수 있다. AI를 활용하는 방법을 알려주어라.

셋째, 더 복잡한 프로젝트를 만들어 보아라. 데이터베이스가 필요한 프로젝트, 사용자 인증이 필요한 프로젝트, 실시간 상호작용이 필요한 프로젝트. 이러한 프로젝트들은 새로운 기술을 배워야 한다. 하지만 당신은 이미 기초가 있다.

넷째, 웹 개발을 깊이 있게 배워라. 당신이 흥미를 느낀다면, 더 깊이 있는 공부를 할 수 있다. JavaScript를 깊이 있게 배우고, React 같은 프레임워크를 배우고, 백엔드 개발을 배울 수 있다.

AI와 함께하는 미래

당신이 이 책에서 배운 가장 중요한 것은 기술이 아니라, 사고방식이다. AI를 두려워하지 말고, 도구로 사용하라. AI와 대화하듯이 협력하라. AI의 제안을 받아들이되, 비판적으로 생각하라.

AI 기술은 계속 발전하고 있다. 미래에는 더욱 더 강력한 AI 도구들이 나올 것이다. 당신이 현재 배운 방법들은, 이 새로운 도구들을 사용할 때도 적용될 것이다.

가장 중요한 메시지는 이것이다. "기술은 변한다. 하지만 올바른 문제를 묻는 능력은 변하지 않는다." 당신은 이제 올바른 질문을 묻는 방법을 안다. 당신은 AI와 협력하는 방법을 안다. 당신은 당신의 아이디어를 현실로 만드는 방법을 안다.

  💡 마지막 생각

  당신은 웹 개발자가 될 필요가 없다. 당신은 기획자, 디렉터, 비전 제시자가 되면 된다. 기술은 AI가 담당한다. 당신의 역할은 당신의 창의성과 통찰력을 발휘하는 것이다.

 

9.8 이 장을 마치며

이 장에서 우리는 배포라는 마지막 단계를 살펴봤다. 배포가 무엇인지, Vercel을 사용하여 어떻게 배포하는지, 도메인을 연결하는 방법, HTTPS 보안, 그리고 배포 후 운영과 업데이트하는 방법들을 배웠다.

배포는 당신의 여정의 끝이 아니라, 새로운 시작이다. 당신의 웹사이트는 이제 세상과 만나게 된다. 방문자들의 피드백을 받고, 그것에 대응하고, 계속 개선한다. 이것이 실제 제품 개발의 본질이다.

이 책을 통해, 당신은 웹사이트를 만드는 전체 과정을 경험했다. 기획에서 시작하여, 설계를 거쳐, 개발하고, 배포하고, 운영하는 것까지. 이것은 매우 실질적인 기술이다. 당신은 이제 당신의 아이디어를 웹사이트로 만들 수 있다.

그리고 가장 중요한 것은, 당신은 이것을 코드를 직접 배우지 않고도 했다는 것이다. AI의 도움으로, 당신은 기술적 장벽을 넘을 수 있었다. 이것은 미래의 개발 방식이다. 기술이 중요한 것이 아니라, 아이디어와 실행이 중요하다.

당신의 웹사이트를 보고 있을 때, 그것이 당신의 창의성의 산물이라는 것을 기억하라. AI는 도구였을 뿐이다. 진정한 창조자는 당신이다.

 

직접 해보기

1. Vercel 계정을 만들고, 당신의 웹사이트를 배포해 보세요. 배포 과정을 기록해 두세요.

2. 배포 후, 당신의 웹사이트를 다양한 기기에서 테스트해 보세요. 데스크톱, 태블릿, 모바일. 모두 제대로 작동하나요?

3. 도메인을 구매하고, 당신의 Vercel 배포와 연결해 보세요. DNS 설정이 전파되는 것을 확인하세요.

4. Google Analytics를 설정하고, 당신의 웹사이트 방문자들이 어떻게 당신의 사이트를 사용하는지 추적해 보세요.

5. 당신의 웹사이트에 대한 피드백을 요청하세요. 친구, 가족, 동료에게 당신의 웹사이트를 보여주고, 그들의 의견을 들으세요.

6. 피드백을 바탕으로, 당신의 웹사이트를 개선해 보세요. 새로운 기능을 추가하거나, 디자인을 개선하거나, 버그를 수정해 보세요.

7. 당신이 배운 것들을 정리해서, 다른 사람들과 공유해 보세요. 당신의 경험이 다른 사람들에게 도움이 될 수 있습니다.