혼자 공부하는 바이브 코딩 with 클로드 코드 - Ch1

Chapter 01, Chapter 02는 클로드 코드(Claude Code)가 아니라  클로드 AI(Claude AI)로 따라해본 결과입니다.

AI랑 웹 달력 만들기? 생각보다 참 쉽죠잉!? 🗓️

2주 전부터 '혼자서 공부하는 바이브코딩' 책을 펼쳐서 '클로드 코드'로 바이브코딩을 시작했습니다. 책을 펴고 Day1부터 바로 들어갔습니다. '달력을 볼 수 있는 웹 페이지를 만들어 주세요.' 딱 한 문장이었습니다. 정말 놀랍네요! 몇 초 지나지 않아서 오른쪽에 보이시죠? 번듯한 달력 웹 페이지가 뚝딱 만들어져 있더라구요.

이런 프론트엔드 작업, 특히 UI 구현은 디테일하게 손이 많이 간다고 생각했거든요. HTML 구조 잡고, CSS 하나하나 만지고, JavaScript로 날짜 계산하고... 생각만 해도 머리가 지끈거렸는데, AI가 이렇게 뼈대를 탁! 만들어주니 정말 신기하더라구요. 저처럼 코딩 초보분들도 AI 덕분에 시각적인 결과물을 바로바로 확인할 수 있으니, 공부하는 재미가 두 배입니다.

 

Claude AI 아티팩트 기능,  첫 만남 후기

이어서 Claude AI의 '아티팩트(Artifacts)' 기능을 따라합니다.

아티팩트, 너는 무엇인가?

제일 먼저 마주한 화면은 다양한 아티팩트 카테고리였습니다. 글쓰기 에디터, 프로젝트 인사이트, 플래시카드 등등... 다른 것들을 클릭해보니, '앱 및 웹사이트', '문서 및 템플릿', '게임' 등 여러 가지 시작점이 있더군요. 그중에서 책에 있는대로 바로 '앱 및 웹사이트' 카테고리로 시작합니다.

 

첫 시도: 나만의 시작 페이지!

"오늘의 날씨와 주요 뉴스를 보여주는 나만의 시작 홈페이지를 만들어주세요."

불과 몇 초 만에 구체적인 계획과 함께 코드로 펼쳐집니다. 복잡한 UI/UX 고민 없이 제가 원하는 기능을 뚝딱 만들어낼 수 있다는 생각에 벌써부터 설레발이... 시작됩니다.

잠시 후, 첫 번째 결과물이 제 눈앞에 나타났습니다. 큼지막하게 현재 시각(16:58:13)과 날짜(2026년 3월 9일)가 표시되어 있었고, 그 아래에는 '오늘의 날씨'와 '오늘의 주요 뉴스' 섹션이 있었죠. 하지만... 여기서 작은 시행착오가 있었습니다. '오늘의 날씨'는 "날씨 정보를 불러올 수 없습니다"라고 뜨고, '오늘의 주요 뉴스'는 "뉴스를 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요."라는 메시지가 뜨는 게 아니겠어요? "크흡, 역시 한 번에 완벽할 수는 없지!" 하면서도 "이래서 계속 공부하게 되네요" 라는 마음으로 오류 메시지를 읽어봤습니다. 아무래도 날씨 API 연동이나 뉴스 데이터 로딩에 문제가 있었던 것 같아요. 하지만 괜찮습니다! 이 정도는 AI와 대화하며 충분히 개선할 수 있으니까요.

바이브코딩 책 1권을 따라해보니 이것저것 금방 될 것 같은 기대감이 생깁니다. 조금 더 영차영차해보겠습니다.