직접 만들어봅시다
1. 오늘 할 일: 첫 바이브 코딩
도구 세팅이 끝났으니, 이제 진짜로 만들어봅니다. Three.js는 아직 아닙니다. 그 전에 바이브 코딩의 리듬(요청 → 확인 → 다듬기)을 몸에 익히는 것이 오늘의 목표입니다.
만들 것은 나를 소개하는 프로필 카드 페이지입니다. 사진, 이름, 한 줄 소개, 링크가 들어간 HTML 페이지 하나. 이 페이지는 버리는 연습작이 아닙니다. Part 2에서 여기에 3D 화면을 얹어 "3D 자기소개 페이지"로 업그레이드할 밑그림입니다.
작업은 주력 환경인 Claude Desktop에서 합니다.
2. 1단계. 요청하기: 첫 프롬프트
Claude Desktop을 열고 새 대화를 시작합니다. 그리고 이렇게 요청해 보세요.
프롬프트 예시
나를 소개하는 프로필 카드 웹페이지를 만들어줘.
- HTML 파일 하나로 완성해줘
- 가운데에 카드가 하나 있고, 그 안에 프로필 이미지 자리, 이름, 한 줄 소개, 이메일 버튼이 들어가
- 배경은 부드러운 그라데이션
- 폰트는 깔끔한 고딕 계열
- 모바일에서도 예쁘게 보이게 해줘
잠시 기다리면 코드와 함께 미리보기 화면이 나타납니다. 방금 여러분은 코드를 한 줄도 쓰지 않고 웹페이지를 만들었습니다.
바이브 코딩 팁
위 프롬프트에서 눈여겨볼 것은 "만들어줘" 뒤에 붙은 조건들입니다. 파일 형태(HTML 하나), 들어갈 요소(이미지·이름·소개·버튼), 분위기(그라데이션, 고딕)를 말했습니다. 조건이 구체적일수록 결과가 내 머릿속 그림과 가까워집니다.
3. 2단계. 확인하기: 무엇을 봐야 할까
미리보기가 떴다면 이것들을 확인하세요.
- 요청한 요소가 다 있는가? 이미지 자리, 이름, 소개, 버튼
- 의도와 다른 부분은 없는가? 색이 너무 튄다, 카드가 너무 작다 등
- 창 크기를 줄여보세요. 모바일 화면에서도 괜찮은지
"뭔가 마음에 안 드는데 뭐라고 말해야 할지 모르겠다"면, 그걸 그대로 물어봐도 됩니다. "카드가 좀 심심해 보이는데 어떻게 개선할 수 있을까?" AI가 선택지를 제안해 줍니다.
4. 3단계. 다듬기: 대화로 수정하기
이제 마음에 들 때까지 고칩니다. 예를 들면 이런 식입니다.
> 배경을 밤하늘 느낌의 어두운 색으로 바꿔줘
> 이름 아래에 "프론트엔드 개발자 지망생" 같은 직함 한 줄 추가해줘
> 이메일 버튼에 마우스를 올리면 살짝 커지는 효과 넣어줘
> 카드에 그림자를 줘서 떠 있는 느낌으로 만들어줘
한 번에 하나씩 요청하는 것이 좋습니다. 결과를 확인하고 → 다음 수정을 요청하고. 이 리듬이 바이브 코딩입니다.
4.1 나쁜 요청 vs 좋은 요청
| 이렇게 말하면 | 이렇게 말해보세요 |
|---|---|
| 예쁘게 해줘 | 배경을 연보라→흰색 그라데이션으로 바꾸고, 카드 모서리를 더 둥글게 해줘 |
| 뭔가 이상해 | 이름이랑 소개 글 사이 간격이 너무 좁아 보여. 여백을 늘려줘 |
| 버튼 고쳐줘 | 이메일 버튼 색을 카드 배경과 대비되는 색으로 바꾸고, 클릭하면 메일 앱이 열리게 해줘 |
바이브 코딩 팁
좋은 요청의 공통점은 "어디를" + "어떻게" 가 들어있다는 것입니다. 디자인 용어를 몰라도 됩니다. "떠 있는 느낌", "밤하늘 느낌"처럼 일상 언어로 말해도 AI는 알아듣습니다.
5. 4단계. 내 컴퓨터에 저장하고 열어보기
미리보기로 보는 것과 진짜 브라우저에서 여는 것은 기분이 다릅니다. 완성됐다면 저장해 봅시다.
- Claude Desktop에서 완성된 결과물의 다운로드 버튼을 눌러 파일로 저장합니다. 파일 이름은
index.html로 합니다. - 바탕화면에
my-profile폴더를 만들어 그 안에 넣습니다. - 파일을 더블클릭하면 크롬에서 내가 만든 페이지가 열립니다.
이 파일이 여러분의 첫 번째 결과물입니다. Part 2에서 다시 꺼내 쓸 테니 지우지 마세요.
개념 사전: HTML 파일이란? · index.html이라는 이름을 쓰는 이유
6. 망했을 때 되돌리는 법
다듬다 보면 이런 순간이 옵니다. "아까가 더 나았는데..."
- 직전으로 되돌리기: "방금 수정 취소하고 이전 버전으로 되돌려줘"라고 요청하세요.
- 대화가 꼬였을 때: 수정을 거듭하다 결과가 산으로 갔다면, 새 대화를 열고 처음부터 다시 요청하는 게 빠를 때도 많습니다. 잘 나왔던 버전의 파일을 저장해뒀다면 그 파일을 첨부하고 "여기서부터 이어서 수정하자"라고 하면 됩니다.
바이브 코딩 팁
"마음에 드는 버전이 나오면 일단 저장"이 바이브 코딩의 보험입니다. Part 2부터는 이 보험을 GitHub가 대신해 줍니다.
7. 도전 과제
강의를 멈추고 직접 해보세요.
- 프로필 카드에 취미를 보여주는 이모지 3개를 추가해 보세요.
- 페이지 제일 아래에 "만든 날짜" 를 작게 넣어 보세요.
- 여러분만의 수정 요청을 3번 이상 해서, 강의 화면과 완전히 다른 나만의 카드로 만들어 보세요.
8. 정리
- 바이브 코딩의 리듬: 요청(조건을 구체적으로) → 확인(요소·의도·모바일) → 다듬기(한 번에 하나씩)
- 좋은 요청 = 어디를 + 어떻게. 일상 언어면 충분합니다.
- 마음에 드는 버전은 파일로 저장해 두세요. 오늘 만든
index.html은 Part 2에서 다시 씁니다.
다음 파트에서는 드디어 Three.js를 만납니다. 이 프로필 카드에 3D 화면이 들어갑니다.