출시하기: 내 화면에서 전 세계로
출시하기: 내 화면에서 전 세계로
쓰라린 진실 하나: 내 컴퓨터에만 존재하는 페이지는 출시된 게 아니에요. 아무도 볼 수 없고, 아무도 쓸 수 없고, 아무도 멋지다고 말해 줄 수 없죠. 출시란 단 하나를 의미해요 — 전 세계 누구나 열 수 있는 URL. 그것이 "코딩을 배우는 중이에요"와 "제가 무언가를 만들었어요"를 가르는 선입니다.
좋은 소식은? 이제 URL을 얻는 건 쉬운 부분이에요. 무료 서비스가 몇 초 만에 해결해 줍니다:
- Netlify Drop — 사이트를 열고, HTML 파일을 페이지에 드래그하면, 라이브 URL이 나와요. 그게 전체 과정이에요.
- Vercel — 폴더나 GitHub 저장소를 연결하고, deploy를 클릭하면, 끝. (바로 이 아카데미도 Vercel에서 돌아가요.)
그리고 혹시 막히면? 여러분은 바이브 코더잖아요 — AI에게 물어보세요. "이 HTML 파일을 Netlify에 배포하는 과정을 단계별로 안내해 줘"라고 하면 아주 잘 통해요. 배포는 예전엔 코딩에서 제일 무서운 부분이었지만, 이제는 대화 한 번이면 됩니다.
하지만 파일을 어딘가로 드래그하기 전에, 작동하는 페이지와 출시 준비가 된 페이지 사이에는 차이가 있어요. 진짜 사이트에는 프로페셔널한 디테일이 있죠: 브라우저 탭에 뜨는 제대로 된 제목, 검색 엔진과 링크 미리보기가 보여줄 수 있는 설명, WhatsApp이나 X에서 누군가 공유할 때 링크가 근사해 보이게 하는 소셜 태그, 그리고 "진짜 사람이 만들었어요 — 여기, 공유해 주세요"라고 말하는 푸터. 이 마지막 레슨에서는 모듈 4에서 만든 아이디어 보드에 바로 그런 디테일을 입혀 봅니다.
여러분의 다음 여정
이것이 바이브 코딩 기초의 마지막 레슨이에요 — 하지만 Zero to Hero 경로의 1단계일 뿐이죠. 여기서부터 브라우저 속 Claude Code(대화만으로 프로젝트 전체를 만들어 주는 AI)를 만나고, 그다음 내 컴퓨터에 진짜 도구를 설치하고, 마침내 나만의 AI 에이전트를 만들게 됩니다. 이제 웹이 어떻게 만들어지는지 알게 됐으니, 훨씬 더 많이 만들 시간이에요.
자, 출시합시다.
안내
페이지에 진짜 <title>을 달아 주세요 — "Untitled"를 브라우저 탭에 어울리는 이름으로 바꾸세요. 검색 엔진과 북마크가 가장 먼저 보여주는 것이에요.
힌트: <head>에서 `<title>Untitled</title>`을 찾아 `<title>Idea Board — Never Lose a Spark</title>` 같은 것으로 바꾸세요. 최소 몇 글자 이상 — 여러분만의 이름으로요.
<head>에 <meta name="description"> 태그를 추가하세요 — 검색 엔진(과 궁금해하는 사람들)에게 여러분의 앱이 무엇을 하는지 알려주는 한 문장이에요.
Open Graph 태그를 추가하세요 — <meta property="og:title">과 <meta property="og:description">. WhatsApp, X, LinkedIn에서 공유될 때 링크가 어떻게 보일지 결정해요.
카드 맨 아래에 "Built with vibes" 크레딧과 <a id="share-link">가 들어간 <footer>를 추가하세요 — 출시되는 모든 제품은 자기 작품에 서명을 남기죠.
내 코드
이 단계에서 만들고 싶은 것을 설명해 주시면 코드를 작성해 드릴게요 — 그다음 적용을 클릭하면 에디터에 바로 들어갑니다. 이 단계: 페이지에 진짜 <title>을 달아 주세요 — "Untitled"를 브라우저 탭에 어울리는 이름으로 바꾸세요. 검색 엔진과 북마크가 가장 먼저 보여주는 것이에요.