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

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

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

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

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 ..

PRD는 ChatGPT로 만들고, 구현은 Cursor AI와 함께, 배포는 Firebase App Hosting으로 끝내는 게시판 웹서비스 개발기 AI로 무언가를 만든다...면 무엇을 만들어야 할까요? 저는 아주 고전으로 돌아가서 CRUD 기본기를 확실하게 연습하는 "게시판"을 만들어보았습니다. 요즘 AI를 공부하면서 가장 크게 달라진 점은 "기획부터 배포까지 혼자서도 충분히 빠르게" 할 수 있게 되었다는 점입니다. 이번 글에서는 ChatGPT와 Cursor AI, 그리고 Google Firebase를 활용해 게시판 웹서비스를 만든 전체 과정을 정리해 보려고 합니다.기획: ChatGPT (Lovable PRD Generator)개발: Cursor AI + 로컬 Firebase 환경배포: Firebase ..

아주 어렵고 힘든거 아니면 가끔이라도 착한 일을 해보려고 합니다.쓰레기 길에 안 버리는 것까지는 잘 했지만 줍는 것까지는 잘하지 못 했었는데요. 이제 마음의 여유를 많이 갖고 조금씩이라도 착한 일, 좋은 일 해보려고 합니다. 아주 어렵고 힘든거 아니면 가끔이라도!사실 주로 사용하는 사람은 저와 제 강아지이긴 합니다만 그래도 깨끗해지니까 기분이 아주 좋구만요. ㅎㅎ

작년 8월 아내가 임신을 했습니다. "내년에 아들이 태어난다"는 소식을 들었을 때는 실감이 안 났었는데, 이제 다음 달이면 만날 수 있다니 ㅎㅎ 조금씩 심장이 두근두근합니다. 회사원으로 쉼 없이 살아오다가 "육아휴직"을 해야겠다고 마음 먹었습니다. 26년도 연차, 좋은 회사에서 제공해주는 안식월, 사회의 배려로 늘어난 배우자 출산 휴가와 육아휴직을 알뜰하게 계산해보니 저에게 9개월이란 시간이 생겼습니다.육아휴직기간 동안 당연히(?) 육아에 집중해야겠지만 보람찬 생활을 위해서 GPT와 계획을 세워보았습니다. GPT 슨생님의 말씀 중에 뼈때리는 이야기가 있네요.진짜 중요한 한 문장“잘하는 9개월”이 아니라“안 멈춘 9개월”이 이깁니다. 그래서 저도 "잘하는" 것에 집중하기 보다 "안 멈춘"에 집중해보겠습니다..