한창 바이브 코딩(Vibe Coding)이 열풍이었는데요. 코드를 잘 몰라도 AI에게 말만 걸면 뚝딱 앱이 만들어진다는 이야기가 여기저기서 들려왔죠. 저는 현업에서 코드를 다루는 개발자이지만, 그 모습을 보다 보니 문득 궁금해졌습니다. 정말 명령만 하면 되는 걸까요? 그리고 비전공자라면 또 어디서 막히게 될까요?

그래서 저도 한번 간단한 페이지를 만들어보기로 했습니다. 인스타그램 프로필에서 흔히 보이는 '리틀리(Litt.ly)' 같은 링크 모음 페이지를 골랐습니다. 기능은 단순하지만, 디자인과 사용자 경험까지 신경 쓰려면 생각보다 손이 많이 가는 서비스인데요. 과연 AI에게 말로만 요구사항을 전달해도 원하는 결과를 얻을 수 있을지, 직접 확인해 본 후기를 공유합니다.

미리 요점만 콕 집어보면?

HTML·CSS·JavaScript만으로 만들 수 있는 프로필 링크 페이지를 바이브 코딩 프로젝트로 선정하고 Claude Code와 VSCode로 제작을 시작했습니다.
prompt.md에 요구사항을 정리해 @prompt.md로 불러오는 방식이 가장 큰 도움이 되었고, HTML·CSS·JavaScript의 역할을 구분하며 반복적으로 결과물을 개선했습니다.
Netlify에 드래그 앤 드롭으로 배포까지 완료했으며, AI가 많은 부분을 대신해도 원하는 방향을 명확히 정리하는 사람의 역할과 기본 코딩 지식의 중요성을 확인했습니다.

프로젝트 선정 이유

무엇을 만들지 정하는 일이 사실 절반인데요. 첫 단추만 잘 끼우면 끝까지 가기가 한결 수월해지기 때문입니다.

초보자를 위한 바이브 코딩 프로젝트 조건

조건은 단순했습니다. HTML, CSS, JavaScript만으로 완성할 수 있을 만큼 작고, 그러면서도 실제로 쓸모가 있을 것. 데이터베이스나 서버까지 필요한 쇼핑몰이나 SNS는 첫 프로젝트로는 조금 과했죠. 그런 면에서 프로필 링크 페이지는 딱 맞았는데요. 사진과 이름, 그리고 링크 카드 몇 개면 끝이라 끝까지 완성할 수 있고, 만들고 나면 명함처럼 바로 써먹을 수 있으니까요. 실제로 비슷한 서비스를 먼저 몇 개 둘러보면서 "이 정도 화면을 목표로 하자"고 그림을 그려두니, AI에게 무엇을 부탁해야 할지도 한결 또렷해지더라고요.

환경 세팅

본격적으로 AI를 부르기 전에 사실 먼저 챙겨야 할 준비물이 있습니다. 그리고 바로 이 단계에서 비전공자가 처음 멈칫하기 쉬운 지점도 함께 등장합니다.

1) 도구 설치

먼저 도구를 두 가지 준비했는데요. 하나는 AI 코딩 도구인 Claude Code입니다. Anthropic의 AI ‘Claude’로 코딩을 자동으로 수행하는 ‘AI 코딩 에이전트’인데요, 자연어로 원하는 기능을 설명하면 코드 작성과 실행, 수정 작업을 상당 부분 자동으로 해 줍니다.

다른 하나는 코드를 들여다볼 에디터인 VSCode입니다. 마이크로소프트가 만든 무료 소스 코드 에디터인데요. 한글 문서를 열 때 워드프로세서가 필요하듯 AI가 만든 코드를 열어 확인하려면 이런 에디터가 하나 있으면 좋습니다.

2) 터미널 기본 조작

여기서 비전공자가 처음 멈칫하는 구간이 바로 ‘터미널’입니다. 검은 화면에 글자만 깜빡이는 그 창 말입니다. 하지만 막상 써보면 생각보다 어렵지 않고, 사용을 위해 암기해야 할 명령어들도 그리 많지 않습니다. 처음에는 폴더로 들어가는 cd, 무슨 파일이 있는지 보는 ls 정도만 알아도 시작하는 데는 큰 문제가 없고, 막히면 그 명령어가 무슨 뜻인지조차 AI에게 그냥 물어보면 됩니다. 마우스로 메뉴를 이리저리 헤매는 것보다 짧은 한 줄로 끝나니, 익숙해지면 오히려 더 빠르게 사용할 수 있습니다.

본격적인 제작기

자, 이제 진짜 만들 차례인데요, AI와 주고받은 대화를 따라가며, 텅 빈 화면이 어떻게 점점 모양을 갖춰갔는지 단계별로 살펴보겠습니다.

1) 첫 프롬프트와 결과물(프롬프트 작성 꿀팁)

처음엔 터미널에 곧장 “프로필 링크 페이지 만들어줘”라고 쳐보았지만, 결과는 솔직히 좀 초라했습니다. 사진은 덩그러니 크고, 링크는 파란 밑줄 텍스트로 나열된, 뼈대만 있는 화면이었죠.

그런데 더 큰 문제는 결과물보다 ‘입력 방식’이었습니다. 터미널에 긴 요구사항을 한 줄로 쭉 치려니, 줄바꿈도 어렵고 오타가 나도 고치기 번거롭고, 같은 요청을 다시 쓰기도 귀찮더라고요.

바로 이때 사용하면 좋은 방식이 있는데요, 프롬프트를 파일로 적어두고 불러 쓰는 방식입니다. 방법은 간단합니다. VSCode에서 prompt.md라는 파일을 하나 만들고, 거기에 ‘무엇을, 어떻게 만들지’를 차분하게 적어두는 거죠. 그리고 Claude Code에서는 이렇게 명령합니다.

❯ @prompt.md 이 내용대로 만들어줘

@를 붙이면 AI가 그 파일을 통째로 읽어 들이는데요. 터미널에 직접 길게 작성할 필요 없이, 잘 정리된 문서를 그대로 명령으로 넘기는 방식입니다.

이 방식은 요구사항을 편집기에서 또박또박 정리하니 생각이 훨씬 명확해지고, 마음에 안 들면 파일만 고쳐 다시 @prompt.md로 부르면 되니 수정이 편리하다는 장점이 있습니다. 또한 잘 쓴 프롬프트가 파일로 남으니, 다음에 그대로 다시 꺼내 쓸 수도 있습니다.

실제로 저는 위 이미지처럼 prompt.md에 '무엇을 만들까', '화면 구성', '디자인', '동작'을 항목으로 나눠 적었는데요, 이렇게 사람에게 일을 부탁할 때처럼 조건을 정리해두니 AI도 훨씬 의도에 가깝게 만들어 주었습니다. 비전공자일수록 머릿속 그림을 글로 옮기는 이 과정 자체가 곧 실력이 됩니다. 사소해 보일 수 있지만, 이 글을 쓰며 돌아봐도 가장 큰 도움이 된 것이 바로 이 부분이었습니다.

2) HTML, CSS, JavaScript 구분하기

prompt.md에 "파일을 index.html, style.css, script.js로 나눠달라"고 적은 데는 이유가 있습니다. 웹 페이지는 크게 세 가지로 이루어집니다. HTML은 뼈대(구조), CSS는 옷(디자인), JavaScript는 행동(동작)입니다.

이 구분을 알고 나니 AI에게 요청하는 말이 확 달라졌는데요. 막연하게 "예쁘게 해줘"가 아니라 "카드를 흰 박스로, 썸네일은 왼쪽에 일정한 크기로 살짝 떠 있게"처럼 어느 부분(CSS)을 어떻게 바꿀지 콕 집어 말할 수 있게 되었습니다. 처음 접하는 분도 이 세 가지 역할만 기억해두면, “이 부분의 스타일(CSS)을 이렇게 바꿔줘”처럼 어디를 손볼지 정확히 짚어 부탁할 수 있게 됩니다.

3) 반복과 개선의 과정

핵심은 한 번에 완성하려 하지 않는 것이었는데요. prompt.md를 조금씩 고치고 다시 불러오며 “배경은 연한 하늘색으로”, “공유 버튼을 누르면 주소가 복사되게”처럼 하나씩 다듬어 갔습니다. 마지막 ‘복사’ 기능이 바로 JavaScript가 담당하는 영역입니다. 버튼 클릭에 반응하거나 화면을 동적으로 바꾸는 일들이 모두 JavaScript, 즉 ‘행동’의 몫입니다. 한 번에 다 바꾸려 하면 어디서 틀어졌는지 알기 어렵지만, 하나씩 바꾸고 바로 확인하면 문제가 생겨도 금방 되돌릴 수 있습니다.

예를 들어, 처음엔 밋밋한 파란 글자였던 링크가, “카드를 흰 박스로, 썸네일과 텍스트를 좌우로 나란히 배치하고”라는 한 줄을 더하자 단번에 카드 모양으로 바뀌었습니다. 이렇게 작은 요청을 하나씩 쌓아 올리는 재미가, 바이브 코딩의 진짜 매력이 아닐까 싶습니다. 그렇게 대화를 주고받은 끝에, 프로필 사진과 이름 아래로 카드가 깔끔하게 정렬된 페이지가 완성됐습니다.

배포하고 사용하기

다 만들었다면 이제 세상에 내보낼 차례죠. 의외로 이 단계가 가장 단순합니다.

1) 간단하게 배포하는 방법(Netlify)

페이지가 완성됐지만 아직은 제 컴퓨터 안에서만 보이는 상태인데요, 남에게 보여주려면 인터넷에 올려야 합니다. 이걸 ‘배포’라고 부릅니다. 저는 Netlify라는 무료 서비스를 사용했는데, 방법이 아주 간단합니다. Netlify 사이트에 가입한 뒤, 작업한 폴더를 화면 위로 드래그 앤 드롭하면 끝입니다.

몇 초 뒤 실제 인터넷 주소(URL)가 생기고, 그 주소로 누구나 제 페이지에 들어올 수 있게 됩니다. 깃허브(GitHub) 같은 도구를 모르더라도 폴더만 끌어다 놓으면 되니, 비전공자의 첫 배포로 특히 잘 맞는 서비스입니다.

2) 배포 후 달라지는 것들

배포 전에는 이 페이지가 제 컴퓨터 안에만 있어서, 다른 사람은 볼 방법이 없습니다. 배포를 하면 이 역할을 ‘서버’가 대신 맡는데요, 서버는 인터넷에 연결된 컴퓨터라고 생각하면 됩니다. 누군가 제 주소로 접속하면, 서버가 미리 올려둔 HTML, CSS, JS 파일을 전달해 페이지를 보여주는 것입니다.

Netlify 같은 서비스가 이 서버를 대신 운영해 주는 셈입니다. 그래서 배포 후에는 제 컴퓨터를 꺼도 페이지가 살아 있고, 누구든 주소만 알면 들어올 수 있습니다. 실제로 휴대폰을 열어보니 몰랐던 어색한 여백도 눈에 들어왔는데요. 그럴 땐 prompt.md를 고쳐 다시 만들고 폴더를 한 번 더 드래그 앤 드롭하면 바로 반영됩니다.

완성된 결과물과 느낀 점

그렇게 완성한 결과물은 어땠을까요? 마지막으로 만들어진 페이지와, 개발자로서 직접 해보며 느낀 점을 정리해 봤습니다.

1) 결과 정리

최종 결과물은 처음 목표했던 그대로였는데요. 원형 프로필 사진과 이름, 그리고 여러 사이트의 링크와 이메일로 이어지는 카드까지 모두 담겼습니다. 들인 시간은 한 시간 남짓, 그리고 비용은 0원이었습니다. 카드를 누르면 요즘 IT 글과 인프런 강의가 새 탭으로 열리고, 공유 버튼을 누르면 주소가 복사됐습니다.

완성된 주소를 전달해 휴대폰에서 열어보니, 기기와 상관없이 똑같이 잘 동작하는 것을 확인할 수 있었습니다. 코드를 한 줄씩 직접 짜는 대신 AI에게 방향을 잡아주는 방식만으로 배포까지 마쳤다는 점이, 개발자인 제게도 꽤 새로운 경험이었습니다. 완성된 페이지는 여기에서 확인할 수 있습니다.

2) 개발자로서 느낀 점

솔직하게 말하면, 이번 경험을 통해 기본적인 코딩 지식은 여전히 중요하다고 생각했습니다. AI가 많은 부분을 대신해 주지만, 결과가 예상과 다르게 나오거나 문제가 생겼을 때는 결국 무엇이 문제인지 판단해야 했기 때문입니다. 저는 개발자라 원인을 비교적 빠르게 짚을 수 있었지만, 처음 접하는 분들은 ‘뭐가 문제인지조차 모르는’ 순간을 만날 수도 있겠다는 생각입니다.

다만 prompt.md처럼 요구사항을 글로 정리하는 습관을 들이면, 그 막막함을 꽤 줄일 수 있습니다. 결국 완성도를 가르는 건 AI가 아니라, 무엇을 원하는지 또렷하게 적어 방향을 잡는 사람이었습니다. 도구가 아무리 좋아도 어떤 결과물을 만들고 싶은지 결정하는 일은 결국 사람의 몫이었기 때문입니다.

마치며

바이브 코딩으로 직접 만들어보니, 생각보다 알아야 할 필수 지식이 꽤 많았습니다. 마냥 순탄하지만은 않았다는 뜻입니다. 하지만 HTML, CSS, JavaScript의 역할 또는 prompt.md에 원하는 바를 정리하고, @prompt.md로 부르는 방식과 같은 간단한 개념과 꿀팁만 알더라도 AI를 훨씬 수월하게 끌고 갈 수 있었습니다.

그래서 다음 글에서는 개발자인 제가 직접 부딪혀보며 정리한 ‘비전공자가 바이브 코딩 전에 꼭 알아야 할 개념들’을 다뤄보려고 합니다. 이번 글에서 잠깐 언급했던 HTML, CSS, JS의 역할 구분부터 터미널과 프롬프트를 다루는 방법까지, 만들기 전에 이것만 알아도 훨씬 덜 헤맬 이야기들을 다음 편에서 이어가 보겠습니다.

<참고>

출처: 바이브 코딩 핸드북
결과물: 효빈 프로필 페이지