AI

[혼자 공부하는 바이브 코딩 with 클로드 코드] 1-2주차 후기: 첫 웹페이지와 프롬프트 설계

2026. 7. 9.

이번 글은 『혼자 공부하는 바이브 코딩 with 클로드 코드』 완독 챌린지 1-2주차 기록입니다. 범위는 Ch 01의 바이브 코딩 개념과 클로드 아티팩트 실습, 그리고 Ch 02의 효과적인 프롬프트 작성법과 포트폴리오 웹페이지 제작 흐름이었습니다.

처음에는 “AI에게 만들어달라고 하면 되는 것 아닌가?”에 가까운 감각으로 접근했지만, 실습을 해보니 핵심은 한 번에 완성품을 얻는 것이 아니었습니다. 원하는 결과를 작게 설명하고, 나온 결과를 확인하고, 다시 수정 요청을 쌓아가며 프로그램을 만들어가는 과정에 더 가까웠습니다.

1-2주차 미션 정리

• 1주차 기본 미션

  PROJECT 1. 나의 첫 웹페이지 만들고 캡처하기

  클로드 아티팩트에서 시작 홈페이지를 만들고, 날씨·뉴스·시계·검색바·할 일 목록까지 단계적으로 추가했습니다.

• 1주차 기본 미션

  Ch 01-1, 01-2 확인 문제 풀이

  바이브 코딩, AI 코딩 도구 유형, 아티팩트, LLM 발전 과정, 게시와 사용자 지정 개념을 확인했습니다.

• 1주차 추가 미션

  클로드 아티팩트 커스터마이즈

  생성된 웹페이지를 두 번 이상 수정하며, 단순 생성보다 반복 개선이 중요하다는 점을 확인했습니다.

• 2주차 기본 미션

  p.66, p.80-81 확인 문제 풀이

  좋은 프롬프트의 조건, 5W1H, PRD에서 중요한 질문, 4단계 제작 전략과 섹션 이름의 장점을 확인했습니다.

• 2주차 실습 미션

  AI에게 디자인 수정 요청하고 캡처하기

  포트폴리오 웹페이지에서 디자인 수정 요청을 진행하고, 결과 화면을 캡처했습니다.

• 2주차 정리 미션

  웹페이지 구조 한 문단으로 정리

  웹페이지는 뼈대, 기능, 디자인으로 이루어진 구조라고 이해했습니다.

바이브 코딩의 개념

바이브 코딩은 AI와 대화를 주고받으며 프로그램을 만드는 개발 방식입니다. 코딩 경험이 많지 않아도 아이디어가 있으면 웹페이지나 간단한 앱을 만들 수 있다는 점이 가장 큰 장점입니다.

다만 “코딩을 전혀 몰라도 모든 것이 해결된다”와는 조금 다릅니다. AI가 초안을 빠르게 만들어주더라도, 원하는 방향으로 수정하고, 고장 난 부분을 찾고, 실제로 쓸 만한 수준까지 다듬는 과정은 여전히 필요합니다.

이번 강의에서는 AI 코딩 도구를 크게 두 유형으로 정리했습니다.

AI 어시스턴트의 발전 흐름도 다시 정리했습니다. 큰 흐름은 뉴럴 네트워크에서 딥러닝, 트랜스포머, LLM으로 이어집니다. 특히 2017년 구글의 트랜스포머 이후 GPT와 Claude 같은 대형 언어 모델이 빠르게 발전했고, 지금의 AI 코딩 도구도 이 흐름 위에 있습니다.

클로드 아티팩트로 만든 첫 웹페이지

실습에서는 먼저 클로드 아티팩트에서 웹페이지를 만들었습니다. 처음 요청은 다음과 같았습니다.

오늘의 날씨와 주요 뉴스를 보여주는 나만의 시작 홈페이지를 만들고 싶어. 밝고 깔끔한 스타일을 선호해. 시계와 검색바도 추가해 줘. 기술 관련 뉴스를 보여줘.

이 요청만으로도 기본적인 시작 홈페이지가 만들어졌습니다. 날짜, 인사말, 시계, 하루 진행률, 검색바, 날씨, 기술 뉴스, 바로가기 링크가 포함된 형태였습니다.

이후 “구글 스타일로 디자인을 수정해줘”라는 프롬프트도 생각했지만, 현재 스타일이 마음에 들어서 실제로는 실행하지 않았습니다. 이 부분도 작은 배움이었습니다. AI가 수정할 수 있다고 해서 무조건 수정할 필요는 없고, 마음에 드는 결과가 나오면 멈추는 판단도 필요했습니다.

다음으로는 할 일 목록을 추가했습니다.

오늘의 할 일 목록을 추가해줘

처음에는 단순 할 일 목록이었지만, 이후 하위 할 일을 넣을 수 있도록 수정했습니다. 예를 들어 “프로젝트 개요 작성하기” 아래에 “초안 작성하기”, “재검토 작업”, “퇴고하기”, “작업 제출” 같은 세부 작업을 붙였습니다.

이후에는 버그 수정, 섹션 접기, 순서 바꾸기 기능도 추가했습니다. 여기서부터는 단순히 예쁜 화면을 만드는 단계를 넘어, 실제로 사용자가 조작하는 작은 대시보드에 가까워졌습니다.

아티팩트에서 느낀 점

아티팩트는 대화창과 별도로 결과물을 바로 볼 수 있는 작업 공간입니다. 보고서, 차트, 웹페이지, 코드 실행 결과를 확인할 수 있고, 수정할 때마다 이전 버전도 자동으로 저장됩니다.

이번 실습에서는 이 기능이 특히 좋았습니다. 내가 말한 요구사항이 바로 화면으로 보이기 때문에, “생각한 것과 실제 결과가 다른 지점”을 빨리 찾을 수 있었습니다. 말로는 “깔끔한 시작 홈페이지”라고 했지만, 실제로는 시계의 위치, 검색바의 크기, 할 일 목록의 구조, 카드 간격 같은 디테일을 보면서 다시 요청하게 됩니다.

즉, 아티팩트는 단순 미리보기가 아니라 대화형 프로토타이핑 공간에 가깝다고 느꼈습니다.

효과적인 프롬프트 작성법

Ch 02에서 가장 중요하게 느낀 내용은 좋은 프롬프트가 곧 좋은 기획서라는 점이었습니다.

AI는 방대한 데이터를 학습한 지식 저장소이지만, 우리가 AI와 소통하는 통로는 결국 프롬프트 창 하나입니다. 그래서 결과의 품질은 프롬프트의 품질에 크게 영향을 받습니다.

좋은 프롬프트의 조건은 세 가지로 정리할 수 있었습니다.

• 명확성

  모호한 표현을 줄이고 원하는 결과를 분명하게 말하기

• 구체성

  필요한 기능, 조건, 화면 구성, 제약을 세부적으로 알려주기

• 맥락 제공

  왜 필요한지, 누가 쓰는지, 어떤 상황에서 쓰는지 설명하기

5W1H와 PRD

막연한 아이디어를 정리할 때는 5W1H가 유용했습니다.

이 질문에 답하다 보면 “웹사이트 만들어줘”가 아니라 “누가, 왜, 어떤 상황에서 쓰는 웹사이트인지”가 드러납니다.

PRD는 Product Requirements Document, 즉 제품 기획서입니다. 개발자들이 코딩 전에 무엇을 만들지, 왜 필요한지, 어떻게 작동해야 하는지 정리하는 문서입니다. 이번 강의에서는 좋은 프롬프트가 좋은 PRD와 닮아 있다는 점이 인상적이었습니다.

포트폴리오 웹페이지 실습

뒤쪽 실습에서는 포트폴리오 웹페이지 제작 흐름도 다뤘습니다. 핵심은 처음부터 “완성된 웹페이지를 만들어줘”라고 요청하지 않는 것이었습니다.

먼저 PRD를 작성하게 하고, 그 PRD를 기반으로 HTML 구조를 만들고, 섹션별 고유 이름을 붙인 다음, 실제 내용을 채우고, 디자인을 다듬고, 마지막으로 점검하는 흐름이었습니다.

이 과정에서 “스타일을 알려주면 더 효과적으로 수정할 수 있다”는 점도 확인했습니다. 단순히 예쁘게 해달라고 하기보다, 어떤 톤을 원하는지, 어떤 레퍼런스와 가까운지, 섹션별로 어떤 느낌을 줘야 하는지를 말하면 결과가 더 좋아집니다.

4단계 제작 전략

PRD를 통째로 주고 “이대로 만들어줘”라고 하면 코드가 복잡하게 뒤섞이고 수정하기 어려워질 수 있습니다. 그래서 이번 주에 배운 4단계 전략이 실용적으로 느껴졌습니다.

1. 뼈대: 기본 HTML 구조와 섹션별 고유 이름 만들기
2. 기능: 실제 데이터와 필요한 로직 추가하기
3. 디자인: UI/UX와 레퍼런스를 반영하기
4. 점검: 테스트하고 품질을 검수하기

각 단계마다 요청, 생성, 확인, 수정 사이클을 반복해야 합니다. 이 방식은 특히 바이브 코딩에서 중요해 보였습니다. AI가 빠르게 만들어준다고 해서 한 번에 모든 것을 맡기면, 나중에 어디가 문제인지 찾기 어려워질 수 있기 때문입니다.

확인 문제 정리

Ch 01-1 확인 문제에서는 AI 코딩 도구의 종류와 핵심 개념을 정리했습니다.

Ch 01-2 확인 문제에서는 다음 내용을 확인했습니다.

• AI 발전 흐름

  뉴럴 넷 → 딥러닝 → 트랜스포머 → LLM

• CLI 모델 비용

  CLI 모델은 별도 도구 비용보다 모델 사용료 중심으로 이해

• 클로드 핵심 기능

  아티팩트, 게시, 사용자 지정

2주차 확인 문제에서는 프롬프트와 PRD, 포트폴리오 웹사이트 제작 흐름을 다시 점검했습니다.

p.80-81 확인 문제에서는 4단계 전략과 단계별 요청의 중요성을 확인했습니다.

• 4단계 전략의 순서

  기본 틀 잡기 → 핵심 기능 넣기 → 디자인 입히기 → 완성도 점검

• 효과적인 프롬프트 작성 방법이 아닌 것

  모든 기능을 한 번에 요청하여 시간을 절약한다.

• 섹션에 고유한 이름을 붙이는 이유

  수정할 위치를 정확히 지정하기 위해서다. 자동으로 디자인이 개선되는 것은 아니다.

• 내가 이해한 웹페이지 구조

  웹페이지는 뼈대, 기능, 디자인으로 이루어진 구조다.

이번 주 느낀 점

AI 코딩의 수준이 높아지면서 비전문가가 만들 수 있는 작업물의 수준도 같이 올라가고 있습니다. AI 모델의 버전이 조금 올라갔을 뿐인데 결과물의 수준은 훨씬 빠르게 좋아지는 것처럼 느껴졌습니다.

요즘 많은 사람들이 코딩에 도전하고, 프로그램을 만들어보고, 업무나 개인 프로젝트에 활용하는 이유도 여기에 있다고 생각합니다. 웹페이지나 간단한 프로그램은 70% 정도 수준까지는 꽤 빠르게 만들어낼 수 있습니다.

하지만 그 이후의 디테일을 잡고, 버그를 고치고, 실제로 써도 되는 수준까지 개선하는 데에는 다른 종류의 지식이 필요합니다. 여기서 포기하는 사람도 많을 것 같습니다.

그래서 바이브 코딩은 “대충 말하면 AI가 다 해준다”가 아니라, 오히려 더 잘 질문하고 더 잘 검토하는 사람이 좋은 결과를 얻는 방식에 가깝다고 느꼈습니다. 좋은 프롬프트와 제작 절차를 모르고 그냥 만들어달라고 하면 50~70%에서 멈추거나, 복잡한 프로그램은 그보다 더 빨리 고장날 수 있습니다.

딸깍 한 번으로 무언가 만들어지는 시대처럼 보이지만, 그 딸깍 한 번이 손쓸 수 없이 커지는 불길이 될 수도 있습니다. 그래서 더 공부하고, 더 작게 나누고, 더 자주 확인하는 습관이 필요하다고 느꼈습니다.