[올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #07] 내 노트북 속 코드를 전 세계로: Netlify 무료 배포 및 Github 연동

 

안녕하세요! 방구석에서 코딩이라는 마법 지팡이로 저만의 자본주의 파이프라인을 구축하고 있는 1인 개발자입니다.

지난 1편부터 6편까지 정말 먼 길을 달려왔습니다. 기획을 하고, 슬라이더를 달고, 복잡한 로직을 짜고, 영롱한 J커브 그래프까지 완벽하게 그려냈죠. 지금 제 노트북 화면에 띄워진 시뮬레이터는 정말이지 완벽하게 작동합니다.하지만 치명적인 문제가 하나 있습니다. 이 완벽한 사이트의 주소가 http://localhost:5173 이라는 사실이죠. 즉, 지금 이 세상에서 이 웹사이트를 볼 수 있는 사람은 제 노트북 앞에 앉아있는 저 혼자뿐이라는 뜻입니다. 친구에게 카카오톡으로 저 주소를 보내봤자 "접속할 수 없는 사이트"라는 에러창만 뜨겠죠. 그래서 오늘 7편에서는 제 노트북 속에 갇혀있던 이 귀여운 코드를 전 세계 누구나 접속할 수 있는 진짜 '웹사이트'로 세상에 쏘아 올리는 과정, 즉 '배포(Deployment)'에 대한 썰을 풀어보겠습니다.

 

첫 번째 관문: 짐 싸기 (npm run build)

우리가 리액트(React)로 열심히 작성한 코드는 사실 웹 브라우저(크롬, 사파리 등)가 날것 그대로 읽기에는 너무 무겁고 복잡합니다. 여러 개의 파일로 쪼개져 있고, 개발자가 보기 편하게 띄어쓰기나 엔터도 팍팍 들어가 있거든요.

그래서 이 코드를 인터넷 세상으로 내보내기 전에 브라우저가 아주 빠르게 읽어 들일 수 있도록 코드를 납작하게 압축하고 최적화하는 '포장' 작업이 필요합니다. 이걸 개발 용어로 '빌드(Build)'라고 부르죠. 마치 해외여행 가기 전에 널브러져 있는 옷들을 여행용 캐리어 안에 꽉꽉 압축해서 담는 것과 똑같습니다.

 

방법은 허무할 정도로 쉽습니다. 제 개발 에디터(VS Code) 터미널 창에 아주 유명한 마법의 주문을 한 줄 입력합니다. npm run build 이 주문을 치고 엔터를 누르면, 번개처럼 빠른 우리의 Vite(비트)가 순식간에 코드를 압축해서 프로젝트 폴더 안에 dist (혹은 build)라는 이름의 작고 깔끔한 폴더 하나를 뱉어냅니다. 자, 이제 여행 갈 캐리어는 완벽하게 짐이 싸졌습니다!

 

 

 

구세주의 등장: 왜 1인 개발자는 Netlify를 사랑하는가?

캐리어(dist 폴더)를 쌌으니, 이제 이걸 24시간 365일 켜져 있는 컴퓨터, 즉 '서버(Server)'에 올려놓아야 합니다. 그래야 사람들이 밤이든 낮이든 제 사이트에 접속할 테니까요. 예전 같았으면 호스팅 업체를 찾아가서 매월 몇천 원, 몇만 원씩 돈을 내고 서버 공간을 빌려야 했습니다. 하지만 수익이 0원인 상태에서 시작하는 1인 창업가에게 고정 지출은 쥐약이죠. 그래서 저는 전 세계 프론트엔드 개발자들의 구세주, Netlify라는 무료 호스팅 서비스를 선택했습니다.

 

Netlify가 1인 개발자에게 신(God)처럼 추앙받는 이유는 명확합니다. 첫째, 우리가 만든 사이드 프로젝트 정도는 평생 돌려도 될 만큼 넉넉한 트래픽을 '무료'로 제공해 줍니다. 둘째, 아까 만든 dist 폴더를 마우스로 잡아서 Netlify 화면에 드래그 앤 드롭(끌어다 놓기)만 하면 1초 만에 배포가 끝납니다. 서버 세팅? 복잡한 명령어? 그런 건 하나도 알 필요가 없습니다.

 

진정한 마법: Github 연동으로 이뤄낸 '자동화(CI/CD)'

사실 드래그 앤 드롭만으로도 감지덕지지만, 인간의 귀찮음은 끝이 없잖아요? 제가 코드를 수정해서 글씨 하나를 바꿀 때마다 매번 npm run build를 치고, 폴더를 열어서, 마우스로 끌어다 올리는 짓을 평생 반복할 수는 없었습니다.

그래서 저는 Netlify의 진짜 강력한 무기인 'Github(깃허브) 자동 연동'을 꺼내 들었습니다. 제 컴퓨터에 있는 코드 저장소(Github)와 Netlify를 서로 연결해 주고 이렇게 명령을 내려두는 겁니다. "야, Netlify! 너 앞으로 내가 마우스로 폴더 끌어다 줄 때까지 기다리지 마. 대신 내 Github 저장소를 24시간 감시하고 있어. 그러다가 내가 코드를 수정해서 Github에 새로 올리면(Push), 네가 알아서 내 코드 가져다가 빌드(Build)도 하고 서버에 배포(Deploy)도 해버려!" 이것을 전문 용어로 CI/CD(지속적 통합/지속적 배포) 자동화라고 부르는데, 말이 어렵지 그냥 '무료 자동화 로봇 비서'를 한 명 고용한 것과 같습니다.

 

Netlify 화면에서 [Add new site] -> [Import from Github] 버튼을 차례대로 누르고, 제 파이어족 계산기 저장소를 선택해 주기만 하면 모든 세팅이 끝납니다. 이제 저는 제 방구석 노트북에서 코드를 쓱쓱 수정하고 저장 버튼만 누르면, 몇 초 뒤에 전 세계에서 돌아가고 있는 제 웹사이트 화면이 스르륵 하고 최신 버전으로 바뀌는 기적을 맛보게 됩니다.

 

 

"Site is live!" 드디어 세상에 나오다

Github 연동을 마치고 [Deploy] 버튼을 누르니, 화면에 "Building"이라는 글씨가 빙글빙글 돌기 시작했습니다. 그리고 한 10초쯤 지났을까요? 초록색 글씨로 "Site is live"라는 문구가 떴습니다. Netlify가 저에게 code-bricks-fire-calculator.netlify.app 이라는 그럴싸한 전 세계 유일의 URL을 만들어준 겁니다. 떨리는 손으로 스마트폰을 켜서 인터넷 창에 저 주소를 입력해 보았습니다. 제 노트북이 아니라 폰의 LTE 데이터를 타고, 제가 만든 영롱한 파란색 화면과 슬라이더가 나타나는 순간! 그 감동은 정말이지 1인 개발자만이 느낄 수 있는 최고의 카타르시스였습니다.

 

자, 이제 카카오톡을 열어서 친구들에게 "이거 내가 만든 계산기인데 한번 써볼래?" 하고 링크를 자랑스럽게 날릴 일만 남았습니다. 어라? 그런데 카톡에 링크를 올렸더니 썸네일 이미지는 안 뜨고 회색 빈칸에 글씨만 덩그러니 나오는 게 아니겠어요? 이래서는 아무도 제 사이트를 클릭하지 않을 텐데 말이죠!

 

다음 8편에서는 기껏 잘 만들어놓은 사이트의 클릭률을 10배로 폭발시키기 위한 마케팅의 기본, [올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #08] 클릭률 10배 높이기: 완벽한 Open Graph(OG) 태그와 썸네일 적용기에 대한 피 튀기는 해결기를 들려드리겠습니다. 다음 편도 기대해 주세요!

[올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #08] 완벽한 Open Graph(OG) 태그와 썸네일 적용