내 컴퓨터에만 있던 앱, 1분 만에 전 세계로 생중계 한 썰

(부제: 서버? FTP? 몰라. 그냥 폴더째로 집어던지니까 배포되던데?)

'localhost'의 한계를 넘어, AI가 만들어준 'dist' 폴더를 Netlify 클라우드에 드래그하는 것만으로 '재즈 추는 여우(Jazzy Fox)' 웹사이트가 모바일과 PC에 생중계되는 성공 스토리 썸네일.

1. "야, 이거 왜 안 열려?"

장장 1.5편에 걸쳐 만든 내 앱, '유튜브 랭커'. 기가 막히게 잘 돌아간다. 뿌듯한 마음에 친구한테 자랑하려고 주소창의 localhost:5173을 복사해서 카톡으로 보냈다.

친구 왈, "야, 연결할 수 없대. 너 나 낚았냐?"

알고 보니 localhost는 내 방구석 컴퓨터 안에서만 통하는 주소란다. 남들이 보게 하려면 **'배포(Deploy)'**라는 걸 해서 인터넷 세상에 올려야 한다는데... 검색해 보니 AWS, 리눅스, FTP, 도메인 연결... 보기만 해도 머리가 지끈거린다.

"아, 역시 개발은 아무나 하는 게 아닌가." 그냥 자랑하지 말고 나 혼자 쓸까 고민했다.

---

2. AI의 솔루션: "그냥 포장해서 던지세요"

혹시나 해서 AI(Antigravity)에게 물어봤다. 속마음은 **"야, 복잡한 거 딱 질색이니까 제일 쉬운 거 가져와!"**라고 소리치고 싶었지만, 혹시나 AI가 삐져서 어려운 방법 알려줄까 봐 점잖게 물어봤다.

"앱을 배포 하려면 어떻게 해야 해?"

그러자 녀석이 내 마음을 읽었는지, 황당할 정도로 심플한 방법을 알려줬다.

"주인님, Netlify라는 사이트에 가시면 그냥 폴더를 마우스로 끌어다 놓기만 해도 됩니다."

...거짓말하지 마라. 웹사이트 만드는 게 무슨 바탕화면 파일 정리도 아니고, 드래그 앤 드롭으로 된다고? 속는 셈 치고 딱 한 번만 해보기로 했다.

---

3. 1단계: 이삿짐 포장하기 (Build)

일단 내 코드를 배포용으로 압축해야 한단다. 이걸 **'빌드(Build)'**라고 부른다나. AI가 시키는 대로 터미널(검은 화면)에 딱 한 줄 쳤다.

npm run build

AI의 안내에 따라 터미널에 빌드 명령어를 입력하자, 3초 만에 배포를 위한 완제품인 'dist' 폴더가 성공적으로 생성된 모습입니다.

[사진 설명] 엔터 치니까 뭔가 후다닥 지나가더니 왼쪽에 **dist**라는 폴더가 뿅 생겼다. 이게 배포용 '완제품 박스'란다.

---

4. 2단계: 인터넷에 던지기 (Drag & Drop)

이제 **Netlify(네트리파이)**라는 사이트에 접속해서 가입(구글 로그인 10초 컷)했다. 복잡한 설정? 메뉴? 다 무시했다. 화면 한가운데에 있는 점선 박스를 찾았다.

"Drag and drop your site output folder here" (니 사이트 결과물 폴더를 여기다 떨궈라)

아까 만든 dist 폴더를 마우스로 잡고, 그대로 인터넷 창 안으로 던져 넣었다.

복잡한 서버 설정 없이, 빌드된 폴더를 Netlify 브라우저 창의 점선 박스 안으로 끌어다 놓는 직관적인 배포 과정을 포착했습니다.

[사진 설명] 진짜 그냥 집어던졌다. 설마 되겠어? 했는데...

---

5. 3단계: 재즈 추는 여우(Jazzy Fox)의 탄생

폴더를 놓자마자 초록색 바가 쓱 지나가더니, 3초 만에 **"Published(게시됨)"**가 떴다. 그리고 위에 이상한(?) 주소가 하나 생겼다. 👉 jazzy-fox-d19359.netlify.app

"재즈 추는 여우...?" 이름이 좀 웃기지만 눌러봤다.

'jazzy-fox' 도메인으로 접속하여 실제 웹 환경에서 유튜브 데이터가 정상적으로 조회되는 최종 성공 인증샷입니다.

[사진 설명] 떴다! 서버비 0원, 코딩 지식 0, 소요 시간 1분. 내 앱이 전 세계에 생중계되는 순간이다.

내 핸드폰으로도, 와이프 핸드폰으로도, 회사 컴퓨터로도 다 들어가 진다. 와... 진짜 되네?

---

[꿀팁] 혹시 검색이 안 된다면?

처음에 배포하고 검색 버튼을 눌렀는데 반응이 없어서 당황했다. 알고 보니 구글 API 키 보안 설정 때문이었다. 구글 클라우드 콘솔에 가서 **'API 키 제한사항'**을 확인해 보자.

복잡하면 그냥 **'없음(None)'**으로 비워둬라. 그러면 구글이 "오케이, 어디서든 다 받아줄게!" 하고 문을 활짝 열어준다. (나중에 유명해지면 그때 막으면 된다. 지금은 일단 돌아가는 게 중요하니까.)

---

6. 결론: 개발, 쫄지 마라

세상 참 좋아졌다. 라떼는 서버실 들어가서 선 꼽고 난리 쳤다는데(사실 잘 모름), 요즘은 그냥 AI한테 "만들어줘" 하고, 결과물 나오면 "인터넷에 던지면" 끝이다.

여러분도 쫄지 마라. 나 같은 '코딩 까막눈' 팀장도 해냈다. 이제 나는 이 '재즈 추는 여우' 링크를 친구들에게 뿌리러 가야겠다.