"기획자가 직접 만든다는 건, 끝까지 직접 확인한다는 뜻이기도 하다."
Next.js 스캐폴딩과 GitHub 레포는 만들어져 있었지만, 실제 서비스가 돌아가려면 필요한 것들이 산더미처럼 남아있었습니다. 데이터베이스는 어디에 만드는지, 이미지는 어디에 저장하는지, 로컬에서 만든 코드가 어떻게 인터넷에 올라가는지 — 개념은 알겠는데 실제로 어떻게 연결하는지 몰랐습니다. 특히 dev/prod를 "나눠야 한다"는 건 알았지만, 왜 나눠야 하는지, 어떻게 나누는지는 직접 해보기 전까지 막연했습니다.
Step 1에서 완료한 것들을 순서대로 정리하면:
제이의 빌드로그 Step 1 — 환경 세팅 전체를 완료했습니다. GitHub 레포 생성부터 Supabase 스키마, RLS, Storage 버킷, Vercel 연결, 그리고 DB 연결 검증까지. 비개발자가 직접 세팅하면서 마주친 것들과, 그걸 어떻게 하나씩 해결했는지 기록합니다.
이번 Step 1에서 가장 크게 배운 것은 세 가지입니다. 첫째, 새 방식으로 처음부터 잡는 게 낫다. Supabase가 API 키 체계를 바꾼 걸 모르고 기존 튜토리얼을 따라갔다면 나중에 마이그레이션 작업이 생겼을 것입니다. 공식 문서와 현재 화면을 직접 확인하는 습관이 중요합니다. 둘째, 이해하고 실행하는 것과 복사해서 실행하는 것은 다르다. SQL 코드를 비유로 이해하고 나서 실행하니, Storage 버킷 권한 설정에서도 같은 원리를 바로 적용할 수 있었습니다. 한 번 제대로 이해한 개념은 전이됩니다. 셋째, 설정만 하고 끝이 아니다. dev/prod를 나눠도, 실제로 연결됐는지 확인하지 않으면 의도한 대로 동작한다는 보장이 없습니다. 테스트 코드로 검증하고, 확인 후 바로 삭제하는 것이 올바른 마무리입니다.
관련 프로젝트
프로젝트 개요 기획자(PM)로서 AI를 활용한 업무 자동화(AX) 사례를 문서화하는 개인 포트폴리오 사이트입니다. 국내 기업의 AX 기획자/AI PM 직군으로의 커리어 전환을 목표로, 사이트 자체가 채용 지원용 스토리텔링 자료로 실사용되고 있습니다. 핵심 패턴: 업무 병목 발견 → AI로 워크플로우 재설계 → Before/After·근거·재현 가능성 문서화 전체 서사는 '실행하지 않은 아이디어 나열'이 아니라, 하나의 검증된 자동화 패턴과 도메인별 확장 블루프린트를 갖춘 재사용 가능한 엔진을 보유하는 방향으로 수렴하고 있습니다. 기술 스택 Next.js 16, Tailwind CSS v4, TypeScript Supabase (개발/운영 환경 분리), Vercel, Resend Claude API 기반 기술 자문 및 프롬프트 설계 보안 아키텍처 관리자 CRUD는 세션 기반 인증과 RLS(Row Level Security)로 보호 공개 읽기 전용 경로는 별도의 익명 클라이언트로 분리 서비스 롤 키는 애플리케이션 코드에서 완전히 배제 권한 검증은 마이그레이션 파일 및 대시보드 검토를 통해서만 진행 작업 방식 (에이전틱 IDE 협업 워크플로우) AI 에이전트 기반 IDE가 파일/버전관리 작업을 담당하고, LLM은 기술 자문 및 프롬프트 작성 역할을 수행하는 협업 구조를 운영합니다. AI 자문 → 에이전트용 프롬프트 작성 → 실행자가 붙여넣기 → 계획 확인 → 자문 검토 → 실행 승인 → 로그 검토 → 직접 클릭 테스트 → 명시적 지시 시에만 커밋 통제 규칙 실행 전 계획 검토 필수 요약 보고가 아닌 직접 클릭 테스트로 검증 개발 환경 우선 적용 후 명시적 승인 하에 운영 환경 반영 커밋은 명시적 지시가 있을 때만 수행 DB 자격증명 직접 연결 및 범위 외 삭제 금지 브랜치 전략: 개발 브랜치에서 작업 후 운영 브랜치는 배포 전용으로 직접 커밋 금지, 병합 전 변경 범위 검증 현재 진행 상황 고객사 미팅 브리핑 자동화 사례: 1단계 완료, 개발/운영 환경 배포 및 실데이터 테스트 완료 범위 변경 감지 자동화 사례: 상태 확인 진행 중 리스크 조기 경보 자동화 사례: 운영 환경 배포 완료 보안 사고 관련 포스트: 'AI 리스크 거버넌스 사례'로 재구성 예정 AI 활용 관련 콘텐츠 시리즈 초안 작성 완료, 게시 미확정 핵심 학습 원칙 보고가 아닌 검증: 버그·보안 이슈는 항상 직접 로그/브라우저 검토를 통해서만 발견되며, 에이전트의 자체 결과 요약을 그대로 신뢰하지 않음 보안 사고의 콘텐츠화: 실제 발생한 권한 관련 이슈 사례를 케이스 스터디로 재구성하여 콘텐츠화 커밋 의미 분리: 기능 단위/변경 유형별로 항상 분리 커밋 자동화하지 않는 것도 스토리: 저사용 빈도 기능을 의도적으로 고도화하지 않은 결정 자체를 AX 스토리텔링 소재로 활용