이 스터디는 이지스퍼블리싱 Do it! 스터디와 함께 합니다.
해당 도서를 보유하고 있는 누구나 디스코드 채널에서 참여 신청하실 수 있습니다.책 발행 시점으로부터 변동된 사항이 있을 때 헤매지 않고 물어볼 상대가 있는 곳,
공부하다가 막히면 언제라도 저자 분께 직접 질문할 수 있는 곳!
게다가 스토디 완주자에게는 선물도 있다고 하니 관심 있는 분들은 참고 바랍니다.현재는 《Do it! 바이브 코딩 + 안티그래비티》 및 《Do it! LLM을 활용한 AI 에이전트 개발 입문》
두 권의 스터디가 진행되고 있으며, 저는 《Do it! 바이브 코딩 + 안티그래비티》 스터디에 참여하고 있습니다.
[바이브코딩 스터디] 4주 차 with 《Do it! 바이브 코딩 + 안티그래비티》
📚 이지스퍼블리싱 | 4주 차 안내
4주차는 프로젝트 주간으로 진행됩니다.
기간: 이번 한 주
주제: 자유
목표: 그동안 학습한 내용을 직접 프로젝트에 적용해 보기
주제는 자율이므로, 안티그래비티로 만들고 싶은 것을 자유롭게 구현해 보시면 됩니다. 시간이 부족하거나 마땅한 아이디어가 떠오르지 않으신 분들은, 책에서 진행했던 예제를 발전시켜 완성해 보시는 것도 좋은 방법입니다!진행 중 궁금한 점이나 막히는 부분은 언제든지 편하게 공유해 주세요 :)
마지막 주도 모두 화이팅입니다!!
자유 주제다. 뭐 하지?
실습을 위한 실습은 왠지 싫다.
교재 따라하는 것까지는 괜찮지만 내 개인 실습이 그렇게 되는 건 싫다.
그러니까 기껏 만들어 놓고 "완성했으니 끝!" 하는 게 아니라
실제로 써 먹을 수 있을 만한 무언가를 만들고 싶다.
프로덕션 수준으로 만들어 배포하는 건 아니더라도
그냥 내가 개인적으로 써먹을 수 있는 무언가.
기획
6월 25일 목요일, Gemini와의 대화 속에서 힌트를 얻었다.
이걸 하려고 했던 대화는 아니고, 그냥 방 바닥에 늘어져 있다가 했던 대화다.
사람들이 흔히 하는 실습 예제 중 대표적인 게 투두리스트라고도 하던데.
그래서 뉴비 바이브코더들이 투두리스트 앱을 잔뜩 만들어 올려서 스토어에 넘쳐 난다나.
웬만한 차별성으로는 승인이 안 나기도 한다고 했던 것 같다.
하여간 할 일 목록에 대한 데이터베이스 작업이 포함된 예제로서 애용되는 일반 투두리스트 말고
좀 더 별 거 없는(?)... 근데 나에겐 필요한 무언가다.
Gemini는 책상 위 적당한 공간에 만들어 두라고 했지만 난 구현해버릴 것이다.
프로젝트를 시작하는 시점에서 AI와 함께 관련 문서를 먼저 작성하였다.
대화를 통해 다음과 같은 문서들이 생성되었다.
❯ tree . └── docs ├── 00_entry_prompt.md ├── 01_plan.md ├── 02_secure.md ├── 03_architecture.md ├── 04_schema.md ├── 05_design_system.md ├── 06_interfaces.md ├── 07_roadmap.md └── 08_issue_tracking.md 2 directories, 9 files
이 때, 토큰을 아끼기 위해 docs/*.md 파일 작성까지는 생성형 AI 챗봇을 사용하고
위와 같은 프로젝트 구조로 문서를 넣어놓은 후에야 AI 에이전트에게 요청을 하기 시작했다.
(플랜 업그레이드를 하지 않겠다는 강한 의지 ㅋㅋ)
🤖 ANTIGRAVITY | Project Manager
Listed directory docs Viewed 00_entry_prompt.md:1-16 Viewed 01_plan.md:1-79 Viewed 02_secure.md:1-35 Viewed 03_architecture.md:1-39 Viewed 04_schema.md:1-75 Viewed 05_design_system.md:1-83 Viewed 06_interfaces.md:1-131 Viewed 07_roadmap.md:1-51 Viewed 08_issue_tracking.md:1-11 Listed directory stashbay Viewed .env:1-4프로젝트 루트의
docs/폴더 내 모든 설계 문서를 검독하고 분석을 마쳤습니다. 각 문서에서 정의하고 있는 핵심 요구사항과 아키텍처는 다음과 같습니다.
01_plan.md (프로젝트 계획):
- Core: 생각의 즉각적인 쏟아내기(Dump)와 타임라인/대기열(Bay) 배치를 통한 인지 부하 최소화.
- UI/UX: 상단/하단 고정 Dump Zone (Shift+Enter로 즉시 Bay에 포스트잇 저장), Timeline Board (05:00 ~ 23:00, Y축 드래그), Stash Bay (미배치 카드 대기열), 마크다운 렌더링/더블클릭 수정, 카드 세로 크기 조절, 더미 블록(회색 마스킹 테이프 차단막), 5초 언두 토스트 및 소프트 삭제(deleted_at Timestamp 활용).
02_secure.md (보안 가이드라인):
- Zero-Knowledge: 로그인 비밀번호와
user_id(Salt)를 결합하여 PBKDF2로 AES-GCM 256비트 암호화 키를 클라이언트단에서 유도(derive).- Client-Side Encryption:
tasks테이블의content는 브라우저에서 암호화되어 Base64 문자열로 저장됨. 그 외 좌표/상태 정보는 성능을 위해 평문 저장.- RLS:
tasks,dummy_blocks테이블에auth.uid() = user_id기반의 RLS를 철저히 적용.03_architecture.md & 04_schema.md (아키텍처 및 스키마):
- React, Vite, TS, Zustand (상태 관리), Tailwind CSS, Framer Motion, Lucide React 구성.
- Zustand 내
authStore에 복호화 키(cryptoKey)를 메모리상으로만 유지.taskStore는 낙관적 업데이트(Optimistic Update) 필수.- Supabase DDL 설정: UUID v7 커스텀 생성 함수를 PK 기본값으로 활용.
05_design_system.md & 06_interfaces.md (디자인 시스템 및 인터페이스):
- 메인 짙은 녹색 테마 컬러(
#2e6705),rem단위 스케일링 기본 적용, Lucide 단색 아이콘 사용(이모지 하드코딩 금지).- Zustand/UI 내 카드는 항상 복호화된 평문 상태로 유지하며, Supabase API를 통한 DB I/O 레이어에서만 암/복호화 수행.
07_roadmap.md (개발 로드맵):
- Phase 1부터 Phase 6까지 단계별 체크리스트를 준수하며, 상향식(Bottom-up)으로 개발 진행 및 각 Phase 마다 진행 상황 요약 보고.
모든 문서를 숙지하였으며, Phase 1: Project Setup & Infrastructure 작업을 시작할 준비를 마쳤습니다. 승인해 주시면 1.1단계인 프로젝트 스캐폴딩 및 필요 패키지 설치부터 차례대로 시작하도록 하겠습니다.
개발
안티그래비티 2.0에서 작업을 하다 보니 AI와의 채팅에서 여러 개의 서브 에이전트가 생성되었다.
어떤 작업은 프로젝트의 빌드/인프라 설정을 전담하는 infra_agent 에게 위임하고,
어떤 작업은 프로젝트의 시각적 요소와 상호작용을 책임지는 uiux_agent 에게 위임하고,
어떤 작업은 프로젝트의 데이터베이스 설정을 전담하는 db_agent 에게 위임하고, 뭐 그런 식이다.
1.x 버전에서는 에이전트를 사전에 정의해 놓고 사용하던 모양인데 지금은...
아무래도 좀 더 건드려 보며 살펴볼 필요가 있을 것 같다.
도중에 궁금한 게 있으면 안티그래비티에서 직접 물어봐도 되지만
개인 공부도 안티그래비티로 병행하고 있어 토큰을 아낄 겸 생성형 AI 챗봇에게 물어보기도 했다.
(원래 개인 공부는 다른 데에서 했는데 최근에 옮겨 왔다.)
나는 웹 프론트엔드를 마이너한 프레임워크인 Svelte만 사용해 왔기에
대중적인 React 문법은 전혀 알지 못한다.
그렇기에 코드 리뷰는 일절 하지 않고 문서 리뷰만 했다.
각 Phase별로 AI 에이전트가 보내주는 Implementation Plan 문서를 살펴보고
"이 부분은 이렇게 하겠다고 주장했는데 이러이러한 이유에서 이렇게 하는 게 좋을 것 같다"
코멘트를 최대한 상세하게 남겼다.
코멘트 예시
마크다운 렌더러 구현 관련:
이 마크다운 렌더러가 렌더링할 수 있는 마크다운 문법의 종류를 README.md에 명시해 두면 좋을 것 같다.회원가입 시 뜨는 비밀번호 변경/재설정에 대한 안내문 관련:
사용자 입장에서 Zero-Knowledge이 뭔지 모를 것 같다. DB를 뚫어도 사용자 데이터를 추출할 수 없도록 보안을 강화하기 위한 방식이라는 것을 명시해 주어야 비밀번호 재설정 시 기존 데이터 영구 복원 불가에 대해 납득할 수 있을 것 같다.
docs/07_roadmap.md 문서를 따라 작업하다가 구현상의 모순이라거나 개선 사항이 발견될 경우
AI 에이전트가 알아서 Implementation Plan 문서의 Open Questions 섹션에
질문을 남겨 놓아 코멘트로 응답을 받고 구현을 시작하기도 한다.
또한, docs/*.md 만 있는 상태에서 초기 commit을 남긴 후
Phase 1-1 마치고 commit, Phase 1-2 마치고 commit, 이런 식으로
최소 작업 단위마다 commit을 남기는데
그 때마다 git status 를 통해 어떤 파일들이 수정/추가되었는지 살펴보고
docs/08_issue_tracking.md 이 변경되었다면 어떤 이슈가 있었는지 확인하기도 한다.
개발이 구체화되는 거에 따라 다른 마크다운 파일에 내용이 추가되기도 한다.
결과
보관함에 할 것들을 적어놓은 후 당장 오늘 할 것만 타임라인에 배치하는 매우 단순한 형태의 웹 페이지다.
타인을 식별할 필요가 없기에 닉네임 설정 등 없이 이메일/패스워드만 받는다.
주변에 배포하게 될 경우 "님이 내 일정 DB에서 볼 수 있는 거 아니에요?"를 방지하기 위해
DB를 까봐도 누가 어떤 일정을 적었는지 알 수 없게 구현하였는데
(일정 좌표, 생성 일시, 수정 일시 등의 시스템 데이터만 사람이 식별할 수 있다.)
이 과정에서 비밀번호 변경 시 기존 일정을 복호화할 수 없게 되어 버렸다.
하지만 비밀번호를 까먹었을 정도면 이미 기존에 적어놓은 일정들은
이제 와서는 아무래도 상관 없는 레거시가 되어 있지 않을까 하여
복호화하지 못하는 기존 일정들은 비밀번호 변경 시점에 일괄 삭제되도록 하였다.
상태는 지금 하거나, 나중에 하거나, 안 하거나, 셋 중 하나다.
안 할 거라 삭제하든 다 해서 삭제하든 그건 구분하지 않는다.
아무튼 "할 것"이 아니게 된 순간 그건 그냥 삭제 대상일 뿐이다.
중요도는 나중에 추가했는데, 타임라인에 배치한 것에 대해서만 따진다.
기본값은 중요도 보통이며, 필요에 따라 중요도 높음이나 중요도 낮음으로 변경할 수 있다.
보관함으로 옮길 경우 중요도가 보통으로 초기화된다.
내일의 일정으로 적당히 채워 넣어 보았다.
하려고 했는데 못한 거든 부분적으로 완료한 거든
나중에 더 해야 할 것이 있다면 그건 타임라인 상의 미래 시점으로 옮기거나
보관함으로 되돌려 놓으면 된다.
마크다운 형식을 지원하고 언제든지 수정할 수 있기에
장기적인 반복 일정에 대해서도 - [ ] 체크박스 마크다운으로 상태 추적을 할 수 있다.
제목도 # (h1)부터 ###### (h6)까지 지원하기는 하는데 사실상 ## (h2)까지만 쓸 것 같다.
새벽까지 작업하지 말고 밤에는 잠을 자라는 취지에서 시간은 5시에서 23시까지로 설정했다.
일찍 일어나거나 늦게 자더라도 이 범위를 벗어난 시간까지 붙잡고 있진 말자.
(이 시간을 벗어난 시간에 접속 시 잠을 자라는 메시지가 뜨는 이스터에그?가 있다.)
그리고 어딘가에 가야 한다거나 교육, 프로그램 등등 타의적인 일정이 채워져 있어
내 할 일을 배치하지 못하는 시간에 대해서는
더미 블록을 배치하여 빈 시간이 아님을 명시하도록 하였다.
이 시간에 아무것도 안 적혀 있으면 뭔가로 채워야겠다는 강박이 생길 수 있는데
타의적인 일정까지 할 일로 배치하면 진짜 내 할 일과 구분이 어려우니 말이다.
Vercel에 배포된 StashBay
(Supabase 무료 버전 서비스를 그냥 이용하여 가입 인증 메일 발송 횟수 제한이 있다는 건 여담...)
여담
토큰을 아끼기 위한 방법들을 좀 사용했음에도
이번에는 스터디 활동 외에도 개인 공부도 안티그래비티를 활용해서 하고
커서를 사용하는 서울청년센터 강북 강의 수강 관련 작업에서
커서 토큰 다 써서 안티그래비티로도 좀 건드리는 바람에 토큰 만료 알림을 만났다.
사실 스터디 프로젝트 시작한 시점에 주간 토큰 할당량이 17% 밖에 안 남아 있었는데
그 17%로 Phase 6-4까지의 작업 중 Phase 5-2 진행 도중 막혔으니 잘 아껴 쓴 거긴 하다.
목요일부터 금요일까지 간간이 작업하고, 토요일은 토큰이 없어서 쉬고, 일요일에 마저 작업했다.
금요일은 9시 반에 코엑스 도착하여 하루 종일 서울국제도서전에 있었기에 아침저녁으로만 작업했고
목요일도 중곡복지관 나다움 사업도 참여하고 친구도 만나 작업 시간이 많진 않았는데
그만큼의 시간으로도 작동하는 무언가가 만들어진다니... 바이브코딩이란.
이런 거 잘 한다고 주장하면 누가 취업시켜 주려나(?).
취업 준비 너무 어렵다.
서른을 앞두고 이제 막 취업 준비를 시작하여 몇 주 전에 처음으로 면접 준비라는 걸 해봤는데
미래청년일자리 사업은 역시나 선정되기 쉽지 않더라.
일단 고립은둔청년 전형으로 장학금 받으며 SeSAC 다니게 되었으니 그거나 열심히 해야지...
라고 하면서도, 기술의 발전을 새삼 다시 느끼게 된다.
원래 이 정도 프로젝트면 기말 대체 과제 아니었냐고요;;;
