바이브 코딩 입문 1편: 코딩 몰라도 웹페이지 하나 만드는 법

이 글은 쿠팡 파트너스 활동의 일환, 수수료를 제공받습니다

바이브 코딩이 뭔데요

바이브 코딩은 코드를 전부 외워서 치는 방식이 아니다.

내가 만들고 싶은 걸 말로 설명하고, AI가 만든 코드를 보면서 조금씩 고쳐가는 방식에 가깝다.

그래서 처음 시작할 때 제일 중요한 건 “자바스크립트 문법을 다 외우기”가 아니다.

오히려 내가 원하는 화면을 또렷하게 말하는 쪽이 먼저다.

 

예를 들면 이런 식이다.

• 영화 리뷰 블로그 첫 화면을 만들고 싶다.
• 상단에는 블로그 이름을 넣고 싶다.
• 최근 본 영화 3개를 카드처럼 보여주고 싶다.
• 모바일에서도 글자가 겹치지 않았으면 좋겠다.

이 정도만 말해도 AI는 꽤 그럴듯한 첫 화면을 만들어준다.

물론 한 번에 완벽하진 않다. 하지만 처음부터 완벽할 필요도 없다.

보고, 마음에 안 드는 부분을 다시 말하고, 조금씩 고치면 된다.

오늘 목표는 딱 하나다

오늘은 웹사이트 하나를 완성하려고 하지 말고, HTML 파일 하나를 브라우저에서 열어보는 것까지만 하면 된다.

순서는 간단하다.

 

1. 컴퓨터에서 메모장이나 VS Code를 연다.

2. AI에게 HTML 페이지를 만들어달라고 말한다.

3. 나온 코드를 `index.html`이라는 이름으로 저장한다.

4. 그 파일을 크롬으로 열어본다.

여기까지 되면 이미 첫 관문은 넘은 것이다. 화면이 뜨는 순간부터는 “코딩 공부”라기보다 “화면 수정 놀이”에 가까워진다.

 

AI에게 이렇게 시켜보자

처음 프롬프트는 길 필요 없다. 대신 구체적이어야 한다.

아래 문장을 그대로 써도 된다.

코딩을 전혀 모르는 사람도 열어볼 수 있게 HTML 파일 하나로 작동하는 블로그 소개 페이지를 만들어줘.
주제는 영화 리뷰 블로그야. 상단에는 블로그 이름, 가운데에는 최근 본 영화 카드 3개,
아래에는 짧은 소개 문구를 넣어줘. 모바일에서도 보기 좋게 만들어줘.

 

이렇게 요청하면 AI가 코드 덩어리를 줄 것이다. 그 코드를 복사해서 `index.html` 파일에 붙여넣으면 된다.

처음에는 코드 내용을 다 이해하려고 하지 않아도 된다. 지금은 “이걸 열면 화면이 뜨는구나”만 확인하면 충분하다.

 

작업환경은 편하면 좋다

바이브 코딩은 오래 앉아서 화면을 보게 된다.

그래서 장비를 거창하게 맞출 필요는 없지만, 노트북 화면이 너무 낮으면 금방 피곤해진다.

처음에는 노트북 거치대 하나만 있어도 체감이 꽤 크다.

화면 높이가 올라가면 목이 덜 꺾이고, 키보드와 마우스를 따로 두기도 편하다.

호밍사이 360도 회전 높이 조절 노트북 거치대 메탈 쿨링 거치대

첫 결과물이 이상해도 정상이다

처음 AI가 만들어준 페이지는 보통 애매하다.

색이 이상할 수도 있고, 글자가 너무 클 수도 있고, 카드 간격이 좁을 수도 있다.

그럴 때는 코드를 붙잡고 혼자 해석하려고 하지 말고, 보이는 문제를 그대로 말하면 된다.

예를 들면 이렇게 말하면 된다.

• 전체적으로 너무 화려해. 흰색과 검정 중심으로 단정하게 바꿔줘.
• 모바일에서 카드가 너무 붙어 보여. 간격을 넓혀줘.
• 제목이 너무 커. 조금 줄여줘.
• 설명 문구가 광고 같아. 더 자연스럽게 바꿔줘.
• 영화 카드에 별점과 한 줄 감상을 넣어줘.

이게 바이브 코딩의 핵심이다. 내가 코드를 전부 이해해서 고치는 게 아니라, 결과를 보고 다음 요청을 하는 것이다.

 

초보자가 제일 많이 막히는 부분

첫 번째는 파일 이름이다. AI가 `index.html`이라고 저장하라고 했는데 실제로는 `index.html.txt`로 저장하는 경우가 있다.

이러면 브라우저에서 이상하게 열릴 수 있다. 파일 이름 끝이 정확히 `.html`인지 확인하면 된다.

두 번째는 복사 범위다. 코드의 처음이나 끝이 빠지면 화면이 깨진다. AI가 준 코드 블록 전체를 복사하는 게 좋다.

세 번째는 한 번에 너무 많은 걸 만들려고 하는 것이다.

로그인, 게시판, 결제, 자동 저장 같은 기능은 나중 문제다. 입문 단계에서는 “화면 하나가 열린다”만으로도 충분하다.

다음 단계

오늘 만든 페이지가 열렸다면 다음에는 내용을 내 취향에 맞게 바꾸면 된다.

영화 리뷰 블로그라면 영화 제목, 별점, 짧은 감상부터 바꾸면 된다.

개발 블로그라면 공부한 내용 카드로 바꾸면 되고, 여행 블로그라면 여행지 카드로 바꾸면 된다.

중요한 건 작은 단위로 고치는 것이다. 한 번에 “완벽한 사이트 만들어줘”라고 하기보다

“카드 제목을 더 크게 해줘”, “버튼 색을 바꿔줘”처럼 하나씩 요청하는 편이 훨씬 잘 된다.

3줄 요약

바이브 코딩은 코드를 외우는 공부가 아니라 AI와 대화하면서 결과물을 고치는 방식이다.

처음 목표는 거창한 앱이 아니라 `index.html` 파일 하나를 크롬에서 열어보는 정도면 충분하다.

잘하려면 “예쁘게 만들어줘”보다 원하는 구조와 분위기를 구체적으로 말하는 게 중요하다.