앵그리비버's IT를 부탁해

혼자 공부하는 바이브 코딩 with 클로드 코드 - Ch4-(2,3)

클로드 코드가 만들어낸 web_version 폴더, 뜯어보니 이런 변화가!지난번 클로드 코드에서 할 일 목록을 만들고 카테고리를 자동으로 분류하는 것까지 해봤습니다. 이번에는 모바일용 화면 이외에 데스크톱용 화면에 최적화까지 해보았고, 그 결과물을 좀 더 자세히 파헤쳐 보려고 해요. 클로드 코드가 'web_version'이라는 새 폴더를 만들어줬는데, 그 안에 있는 것들이 무엇인지 공부 해보겠습니다.깔끔한 데스크톱 UI가 완성되었습니다! 클로드 코드는 1분 34초 만에 이 모든 작업을 끝내버렸어요. 정말... 놀랍습니다. 🔍 변경된 레이아웃 구조, 이 정도면 나쁘지 않음!클로드 코드가 요약해준 변경 내역을 보면 감탄이 절로 나옵니다.2단 그리드: 왼쪽에는 폭 260px의 고정된 사이드바, 오른쪽에는 메..

혼자 공부하는 바이브 코딩 with 클로드 코드 - Ch4-(1)

이게 되네? AI로 자동 분류되는 할 일! 🤯 카테고리 자동 분류 기능 추가클로드가 알려준 사용자 경험 개선 팁! 💡 할 일 앱 디테일 살리기PRD 작성부터 기능 구현, UX 개선, 그리고 복잡한 로직(자동 분류)까지 클로드 코드는 정말 전천후 만능 도우미입니다. 먼저 PRD를 생성하고 개발을 시키면 바로 뚝딱뚝딱 동작하는 웹페이지를 만들어줍니다. 물론 클로드가 완벽한 코드를 한 번에 짜주지는 않았어요. 제가 원하는 방향과 다를 때도 있었고, 몇 번의 수정이 필요한 부분도 있었습니다. 하지만 오히려 그런 과정을 통해 '어떻게 프롬프트를 개선해야 할까?', '어떤 점을 더 구체적으로 지시해야 할까?'를 배우면서 AI와의 협업 스킬이 향상됩니다.할 일 관리 웹페이지를 1차로 만들고 책에서 나온 것처럼 카..

AI가 뚝딱 만들어준 손글씨 인식 웹페이지 1장: 클로드 코드로 구현하기Chapter 03이 되어서야 드디어 클로드 코드(Claude Code)를 사용하여 학습을 진행합니다. 주제는 바로 손글씨 숫자 인식 웹페이지입니다. 다 만들어진 결과물을 살펴보니 CNN 모델을 갖다 쓰고, 그걸 Tkinter 기반의 GUI 앱으로 만드는 작업입니다."이거 만들어줘!" 한마디에 시작된 마법저는 클로드 코드에게 아주 간단하지만 명확한 프롬프트를 던졌습니다.손글씨 숫자를 입력하면 이것을 인식하는 앱을 만들어서 실행해주세요. 모든 코드와 주석을 영어와 한글로 작성해 주세요.이 한 문장으로 환경 설정부터 모델 학습, GUI 개발까지 다 해줄 수 있을까? 그런데 클로드 코드는 차근차근 작업을 시작합니다.환경 점검: 먼저 제 ..

Chapter 01, Chapter 02는 클로드 코드(Claude Code)가 아니라 클로드 AI(Claude AI)로 따라해본 결과입니다.구글 대신 네이버로? 나만의 취향이 담긴 시작 페이지 리디자인!클로드를 이용해 나만의 시작 페이지를 만드는 여정입니다. 책에서는 구글 스타일로 적용하라고 권했지만, 저는 좀 더 친숙한 '네이버 스타일'로 바꿔보고 싶었어요. 그래서 클로드에게 대뜸 네이버 스타일로 디자인을 수정해주세요라고 요청했습니다. "설마 이것까지 될까?" 했는데, 정말 놀랍게도 클로드가 제 의도를 정확히 파악하더라고요!클로드는 친절하게도 네이버 스타일로 어떤 부분이 바뀌는지 상세하게 설명해줬습니다. GNB 스타일, 상단 메뉴, 로고, 검색창, 섹션 레이아웃, 그리고 배경색까지 (#F5F5F5)..

Chapter 01, Chapter 02는 클로드 코드(Claude Code)가 아니라 클로드 AI(Claude AI)로 따라해본 결과입니다.AI랑 웹 달력 만들기? 생각보다 참 쉽죠잉!? 🗓️2주 전부터 '혼자서 공부하는 바이브코딩' 책을 펼쳐서 '클로드 코드'로 바이브코딩을 시작했습니다. 책을 펴고 Day1부터 바로 들어갔습니다. '달력을 볼 수 있는 웹 페이지를 만들어 주세요.' 딱 한 문장이었습니다. 정말 놀랍네요! 몇 초 지나지 않아서 오른쪽에 보이시죠? 번듯한 달력 웹 페이지가 뚝딱 만들어져 있더라구요.이런 프론트엔드 작업, 특히 UI 구현은 디테일하게 손이 많이 간다고 생각했거든요. HTML 구조 잡고, CSS 하나하나 만지고, JavaScript로 날짜 계산하고... 생각만 해도 머리가..

지난 몇 주간은 커서 AI (Cursor AI)와 씨름하면서 서비스를 만들어 보던 시절이었는데요. 최근에는 클로드 코드 (Claude Code)가 많이 떠오르고 있더라구요. 그래서 이번에는 클로드 코드 (Claude Code)를 정복해보았습니다. 좋은 인터넷 강의도 너무 많고 잘 하시는 분들도 너무 많은데, 저는 조용히 혼자서 책 1권을 처음부터 끝까지 따라해보았습니다. 처음부터 끝까지 다 따라해보니 감이 많이 오더라구요. 이제 인터넷에 돌아다니는 좋은 강의들을 살짝 살짝 보더라도 무슨 이야기인지 잘 보이고 금방 감이 오는 느낌입니다. 바이브 코딩에 자신감이 더 생기네요! 오예! https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=379260002&srsltid=A..

PRD는 ChatGPT - Lovable PRD Generator로 만들고, 구현은 Cursor AI(커서 AI)와 함께, 서버 운영과 배포는 Google Cloud 로 웹서비스 만들기 지난 게시판 웹서비스 만들기에 이어서 이번에는 조금 더 의미있는 서비스를 만들어 보았습니다. PM 업무를 수행하다 보면 다른 앱/웹 프로덕트들의 모습을 찾아보게 됩니다. 그리고 스크린샷을 모아두기도 하고 함께 업무하는 분들께 소개하기도 합니다. 그래서 IT 프로덕트들의 스크린샷을 모아볼 수 있는 웹서비스를 하나 만들어보았습니다. "기획부터 배포까지" 약 2일 정도가 소요되었고, 매일 조금씩 수정하면서 1일 1회 ~ 10회 정도 추가로 커밋을 하고 있습니다. 이번 포스팅에서도 ChatGPT (특히 Lovable PRD Ge..

지난 게시판 웹서비스 만들기 - 사용자 프로필 기능 및 Display 명 수정 기능에 이어서 이번에는 관리 기능을 조금 더 확장해 본 경험에 대하여 포스팅합니다. 아예 관리자 페이지를 만들었습니다.관리자 페이지 생성실제 서비스를 런칭하고 나면 사용자들이 사용하는 화면 이외에 관리자를 위한 기능이 필요한 순간이 있습니다. 이번 포스팅은 관리자를 위한 관리자 페이지 생성과 관련 기능을 추가해본 내용입니다. 게시판 웹서비스의 관리자 페이지 추가 - Cursor AI 프롬프트사실 관리자 페이지와 기능은 최초에 PRD를 작성할 md 파일에 내용이 포함되어 있었습니다. 이번에 정상적으로 동작하는지 확인하면서 잘 동작하지 않는 부분을 수정하여 적용하였습니다.👉 결과물: https://board-app--board-..

지난 주 게시판 웹서비스 만들기 - 구글로그인 연동에 이어서 이번에는 기능을 조금 더 확장해 본 경험에 대하여 포스팅합니다.프로필 기능 및 Display 명 수정 기능게시판에 글을 쓰기 위해서는 사용자의 프로필이 필요합니다. 그래서 사용자의 프로필을 관리(조회)할 수 있는 프로필 페이지를 추가하고 글 작성자의 정보를 노출할 수 있는 Display 명을 정보구조에 추가하였었습니다. 그리고 Display 명을 변경하도록 기능을 수정하였습니다. 사용자 프로필 기능 및 Display 명 수정 기능 - Cursor AI 프롬프트지난 포스팅에서도 작성하였지만 생성된 md 파일들을 그대로 Cursor AI에 넣고, 아래와 같은 방식으로 진행하면서 바로 사용자 프로필을 추가하고 글 작성자의 Display 명을 수정할 ..

지난 주 게시판 웹서비스 만들기에 이어서 이번에는 기능을 조금 더 확장해 본 경험에 대하여 포스팅합니다.구글 로그인 인증(Auth) 추가 구글 로그인 인증 (Auth) 추가지난 포스팅에서도 작성하였지만 생성된 md 파일들을 그대로 Cursor AI에 넣고, 아래와 같은 방식으로 진행하면서 바로 구글 로그인 인증 (Auth)을 추가하였습니다.👉 결과물: https://board-app--board-app-7d889.us-east4.hosted.app/그런데 실제로 구현된 것을 실행하였을 때, 한 번에 성공하지는 못했었습니다. 그래서 해당 에러 메시지를 복붙해서 수정하면서 문제를 해결했습니다.구글 로그인을 시도하였을 때, 아래와 같은 에러가 발생했습니다. 확인 후 수정사항을 제안해주세요.Unhandled ..