1# Week 04 — 셀피쉬클럽 v4.0 작업 로그
2026-04-08
하네스 엔지니어링 — 토큰 효율화 전처리
왜: 매번 새 대화를 시작할 때마다 프로젝트 맥락 파악에 토큰이 낭비되고 있어서, 본격 개발 전에 Claude Code가 읽는 설정 파일들을 정비함 한 일:
- CLAUDE.md에 “현재 진행 상황” 섹션 추가 — 완료/다음 작업/미결정 사항을 한눈에 파악 가능
- AGENTS.md에 서브에이전트용 절대 규칙 추가 (Supabase 직접 호출 금지 등)
- memory 시스템 세팅 — 유저 프로필, 프로젝트 현황, 배포 구조 미정 건 3개 파일
- 작업 로그 자동 기록 구조 세팅 (이 파일)
2026-04-09
레포지토리 구조 정리 및 자동 동기화 구축
왜: 소스코드와 작업 로그가 한 곳에서 체계적으로 관리되고, AAA 레포와 Obsidian에 자동으로 전파되는 구조가 필요해서 한 일:
- selfishclub-ax 전용 GitHub 레포 연결 및 전체 소스코드 push
- .gitignore 정리 (Obsidian 파일 제외)
- GitHub Actions 자동 동기화 설정 (selfishclub-ax → aaa 레포로 작업 로그 자동 복사)
- /worklog 스킬 수정 (주차 자동 계산, selfishclub-ax + Obsidian 두 곳 동시 기록)
- GitHub workflow 권한 설정 및 AAA_REPO_TOKEN 등록
BetterAuth + 카카오 로그인 셋업
왜: 카카오 비즈앱 심사에 시간이 걸리므로 로그인 인프라를 먼저 구축 한 일:
- BetterAuth + 카카오 OAuth 연결 (기존 카카오 앱 REST API 키 사용)
- Supabase DB에 인증 테이블 4개 생성 (user, session, account, verification) — 기존 테이블 무변경
- 카카오 로그인 UI 페이지 구현
- Supabase Pooler 경유 DB 연결 (IPv4 호환 이슈 해결)
Vercel 배포 + 홈페이지/어드민 레이아웃
왜: 로컬만으로는 한계가 있어서, 기본 레이아웃이라도 배포해두고 작업하기 위해 한 일:
- GitHub 레포 Public 전환 → Vercel Hobby(무료) 배포 성공
- 홈페이지 기본 레이아웃 구성 (Header, Hero, 프로그램 카드, 소개 섹션, Footer)
- 어드민 기본 레이아웃 구성 (사이드바 + 대시보드 껍데기)
- AX 대시보드 경로 변경 (/admin/dashboard → /dashboard)
- 배포 주소: selfishclub-ax.vercel.app
2026-04-10
카카오 로그인 테스트 + 블로커 확인
왜: 어제 셋업한 카카오 로그인이 실제로 동작하는지 검증하기 위해 한 일:
- 카카오 디벨로퍼스에서 카카오 로그인 ON, OpenID Connect ON 설정
- 동의항목 3개 활성화 (이메일, 프로필 이미지, 닉네임)
- Redirect URI 등록 시도 → Editor 권한이라 등록 불가, 오너(젬마)에게 요청 필요
- 비즈앱 전환도 오너 권한 필요 → 전화번호 수집은 비즈앱 승인 후 가능
- 로그인 페이지에 고객 안내 문구 추가 (기존 회원 연결, 전화번호 변경 시 대응 안내)
어드민 프로그램 등록 기능
왜: 결제 테스트를 하려면 먼저 상품(프로그램)을 등록할 수 있어야 해서 한 일:
- 어드민 프로그램 관리 페이지 구현 (/admin/programs) — 목록 조회 + 등록 폼
- 프로그램 등록 API 구현 (POST /api/admin/programs) — 기존 item 테이블 구조 그대로 사용
- 홈페이지 프로그램 섹션을 하드코딩에서 DB(item 테이블) 조회로 전환
- 프로그램 상세페이지 구현 (/sharing/[slug]) — 결제 버튼 포함
결제 구조 파악 + 토스페이먼츠 연동 시도
왜: 기존 결제 흐름을 이해하고 새 플랫폼에서 결제를 연결하기 위해 한 일:
- 기존 결제 구조 파악: Webflow → 포트원(아임포트) → 토스페이먼츠 → Firebase → Supabase
- 토스페이먼츠 직접 연동 시도 → API 개별 키 vs 위젯 키 이슈, 상점 비활성화 문제 발견
- 기존에 포트원(아임포트)을 사용하고 있었음을 확인 → 포트원으로 연동 방향 전환 예정
- 결제 성공 페이지 + 서버 사이드 금액 검증 API 구현 (토스 → 포트원으로 교체 필요)
AX 대시보드 진행 상황 업데이트
왜: 어제 작업분이 대시보드에 반영되지 않아서, 매일 작업 종료 시 업데이트하기로 함 한 일:
- 완료 처리: AX 대시보드 v1, 전체 레이아웃 쉘, Design.md
- 진행 중 처리: 카카오 소셜 로그인 (테스트 미완), 홈페이지, 어드민
- 사이트맵에 로그인 페이지(/login), AX 대시보드 경로(/dashboard) 반영
- 미결정 사항 추가: item 테이블 홈페이지 노출 여부 컬럼(i_visible) 추가 여부
2026-04-11
홈페이지 리디자인 — Editorial Tech 컨셉
왜: 기존 홈페이지가 캐주얼하고 전문성이 부족해서, 셀피쉬클럽의 새 방향(실전적·진중한 실무자 커뮤니티)에 맞는 디자인으로 전환 한 일:
- 다크 헤더 + 풀스크린 히어로 + 패럴랙스 스크롤 구현
- 모션 애니메이션 시스템 구축 (FadeIn, StaggerChildren, CountUp, MagneticButton)
- 카피 톤 전환 — “냅-다 우당탕탕”에서 “실전에 장착하는 사람들”로
- 모바일 반응형 + 햄버거 메뉴
콘텐츠 마이그레이션 — 프로그램 목록 + 카테고리
왜: 기존 Webflow에 있던 82개 프로그램을 새 사이트에서 볼 수 있게 하기 위해 한 일:
- 공유회(/sharing), 챌린지·워크숍(/challenge), 커뮤니티 행사(/community) 3개 목록 페이지 생성
- 카테고리 15개를 5개로 통합 (AI 마케팅/콘텐츠/빌딩/비즈니스/커뮤니티)
- 지난 프로그램 그레이스케일 처리, 진행 중/종료 자동 분리
- Webflow CMS API로 콘텐츠 추출 파이프라인 구축
- 3개 샘플 상세 페이지 (ai-github, ai-bizvideo, ai-claude4) — 커리큘럼/대상/혜택/FAQ/공유자 정보 포함
- Supabase Storage 버킷 생성 + Webflow 이미지 마이그레이션
- 이미지 카드 디자인 (딤 + 타이틀 오버레이)
- 지난 프로그램 상세 페이지에 리뷰 상단 노출 (186개 후기 연동)
카카오 로그인 완성
왜: 비즈앱 인증이 완료되어, 그동안 블로커였던 카카오 로그인을 마무리하기 위해 한 일:
- Vercel 환경변수 추가 (DATABASE_URL, BETTER_AUTH_URL, BETTER_AUTH_SECRET, KAKAO_CLIENT_SECRET)
- 카카오 개발자 콘솔에서 Web 도메인 등록 + REST API 키에 Redirect URI 등록
- 카카오 로그인 성공 확인 (BetterAuth user/account 테이블에 정상 저장)
- 로그인 후 리다이렉트 경로 변경 (/mypage → / 홈)
결제 구조 방향 확정
왜: 토스 직접 연동 vs 포트원 경유를 결정하고, 결제 전 선행 작업을 명확히 하기 위해 한 일:
- 포트원 경유로 결정 (기존 계약 활용)
- Firestore 제거 확정 — Next.js API Route가 대체, Supabase가 유일한 DB
- 결제 전 선행 과제 정리: 구매자 정보 수집(로그인 필수), 저장 실패 시 안전장치
- Supabase 유료 전환 시점 검토 사항 기록
AX 대시보드 레이아웃 수정 + 전체 진행 상황 동기화
왜: 대시보드 탭이 사이드에 있어 클릭 영역이 안 보이는 문제 해결 + 지금까지 작업한 모든 내역을 대시보드에 반영 한 일:
- 1차/2차/3차 탭을 왼쪽 사이드에서 리스트 상단 가로 3열로 이동
- 비활성 탭도 보이도록 스타일 수정
- 누락된 완료 항목 추가 (홈 리디자인, Vercel 배포, 비즈앱 인증, 목록 페이지 등)
- 누락된 진행 중 항목 추가 (콘텐츠 마이그레이션, 상세 페이지 리뉴얼 등)
- 사이트맵에 /community 페이지 추가
삽질과 배움
카카오 로그인 Redirect URI를 찾지 못해 2시간 삽질 카카오 개발자 콘솔에서 Redirect URI 등록하는 메뉴를 한참 찾지 못했다. 에디터 권한으로는 안 보여서 오너 권한을 받았는데, 오너로도 별도 메뉴가 없었다. 알고 보니 Redirect URI는 독립된 메뉴가 아니라 앱 > 플랫폼 키 > REST API 키를 클릭해서 들어간 키 설정 페이지 안에 숨어 있었다. 게다가 REST API 키가 여러 개 있었는데, Vercel에 등록한 키와 Redirect URI를 넣은 키가 달라서 한 번 더 실패했다. → 배움: 카카오는 키별로 Redirect URI가 따로 관리된다. 반드시 실제 사용 중인 키에 등록해야 한다.
Webflow CDN 이미지 접근 차단 (403) Webflow 상세 페이지에서 스크래핑한 이미지 URL을 새 사이트에서 쓰려 했더니 403 Forbidden이 떴다. Webflow가 외부에서 직접 이미지를 가져가는 것(핫링크)을 차단하고 있었다. Referer 헤더를 바꿔봐도 안 됐는데, CMS API로 가져온 이미지 URL은 CDN 경로가 달라서 접근이 가능했다. 결국 CMS API의 OG 이미지를 다운로드해서 Supabase Storage에 업로드하는 방식으로 우회했다. → 배움: Webflow는 페이지 빌더 이미지와 CMS 이미지의 CDN 경로가 다르고, 빌더 이미지는 핫링크가 차단된다. 이미지 마이그레이션 시 CMS API를 통해 가져와야 한다.
Vercel 환경변수 추가 후 재배포 필요한 줄 몰라서 삽질
NEXT_PUBLIC_BETTER_AUTH_URL을 Vercel에 등록했는데도 로그인 버튼이 localhost로 요청을 보내고 있었다. NEXT_PUBLIC_으로 시작하는 환경변수는 빌드 시점에 코드에 포함되기 때문에, 환경변수를 추가한 뒤 반드시 재배포(Redeploy)해야 반영된다. → 배움: Vercel에서 NEXT_PUBLIC_ 환경변수를 추가/변경하면 반드시 Redeploy 해야 한다. 서버 전용 환경변수(DATABASE_URL 등)는 재시작만으로 반영되지만, 클라이언트 환경변수는 빌드에 포함되므로 다르다.
UI 컴포넌트 라이브러리 스타일을 덮어쓰기 어려운 문제
대시보드의 1차/2차/3차 탭을 상단으로 옮기려고 했는데, base-ui의 Tabs 컴포넌트에 w-fit, flex-col 같은 기본 스타일이 강하게 적용되어 있어서 !important로도 제대로 안 먹혔다. 결국 Tabs 컴포넌트를 쓰지 않고 useState + button으로 직접 만들어서 해결했다. → 배움: UI 라이브러리 컴포넌트의 레이아웃을 크게 바꿔야 할 때는 오버라이드에 시간 쓰지 말고 처음부터 직접 만드는 게 빠르다.
작업 순서를 유동적으로 바꾼 판단들 원래 계획은 마이페이지 → 결제 순서였는데, 카카오 오너 계정을 받았다는 소식에 카카오 로그인을 먼저 마무리했다. 블로커가 해소된 시점에 바로 처리하는 게 맞았고, 실제로 로그인 완성까지 환경변수/키 불일치 등 예상 못한 삽질이 많았기 때문에 더 일찍 시작한 게 좋았다. 또한 콘텐츠 마이그레이션도 원래 2차 작업이었지만, “일정 대비 진도가 느리다”는 판단에 홈페이지 디자인 작업 중에 끼워 넣었다. 디자인만 하면 껍데기만 예쁘고 실제 데이터가 안 보이니까, 디자인과 콘텐츠를 같이 작업하는 게 결과물 확인에 효과적이었다.
2026-04-12
포트원 결제 연동 완료
왜: 기존 토스페이먼츠 직접 연동이 키 불일치로 안 됐고, 포트원 경유로 방향을 확정했기 때문에 실제 연동 작업을 진행 한 일:
- 토스페이먼츠 SDK 제거 → 포트원 V2 SDK로 교체
- 결제 요청 + 서버 사이드 금액 검증 + Supabase 저장 완성
- 실제 100원 결제 테스트 성공 확인
카카오싱크 심사 신청
왜: 채널 추가 필수화 + 전화번호/이름 자동 수집을 위해 한 일:
- 대표 채널 설정, 비즈니스 정보 심사 즉시 승인
- 개인정보 동의항목(이름/전화번호 필수) 심사 신청 → 심사 중
스폰지클럽(Sponge Club) 이름 확정
왜: AAA 2기를 외부에 공개 모집하면서 새 브랜드명이 필요 한 일:
- AAA = 1기(내부 베타), 스폰지클럽 = 2기(외부 공개 모집)로 정리
- 핵심 철학: Absorb → Compress → Release → React
삽질과 배움
결제 버튼이 상세 페이지에서 안 보이는 문제 어제 상세 페이지를 리뉴얼하면서 PurchaseButton import와 렌더링 코드가 빠져 있었다. → 배움: 페이지를 대폭 리뉴얼할 때는 기존 기능이 빠지지 않았는지 체크리스트로 확인해야 한다.
결제 성공했는데 구매자 정보가 비어있는 문제 포트원 결제는 성공했지만 purchase 테이블에 이름/전화번호가 빈 값. 카카오 로그인 세션에서 사용자 정보를 결제에 넘기는 연결이 아직 없기 때문. 카카오싱크 심사 통과 후 처리하기로. → 배움: 결제 연동과 인증 연동은 독립적으로 만들되, 최종적으로는 연결해야 구매자 식별이 가능하다.
마이페이지를 지금 만들지 않기로 한 판단 카카오싱크가 아직 심사 중이라 전화번호/이름 수집이 안 되고, 기존 회원 매핑도 못 하는 상태. 지금 만들면 결국 다시 수정해야 하므로, 카카오싱크 통과 후로 미루기로. → 배움: 의존성이 있는 작업은 선행 작업이 완료된 후에 하는 게 재작업을 줄인다.
미결정 / 논의 필요
- 상세 내용은 [AX프로젝트 추후 결정 및 논의 필요사항](/missions/AX프로젝트 추후 결정 및 논의 필요사항/) 참고
==Week 04 전체 요약 (4/8 ~ 4/12)==
이번 주에 한 일 — 한눈에 보기
4/8 레포 구조 정리 + 작업 로그 자동화
4/9 카카오 로그인 인프라 구축 + Vercel 배포 + 홈페이지/어드민 레이아웃
4/11 홈페이지 리디자인 + 콘텐츠 마이그레이션 + 카카오 로그인 완성 + 결제 구조 확정
4/12 포트원 결제 연동 + 실결제 테스트 + 카카오싱크 심사 신청 + 스폰지클럽 확정달성한 것
==1. 자체 플랫폼의 뼈대를 세웠다==
Webflow에 의존하던 셀피쉬클럽 홈페이지를 Next.js로 새로 만들기 시작했다. 단순히 코드를 짠 게 아니라, GitHub 레포 → Vercel 자동 배포 → 작업 로그 자동 동기화까지 개발 환경 전체를 세팅했다. 이제 코드를 push하면 자동으로 사이트가 업데이트되고, 작업 기록도 자동으로 남는다.
==2. 카카오 로그인이 진짜로 동작한다==
BetterAuth라는 인증 라이브러리를 붙이고, 카카오 개발자 콘솔에서 비즈앱 인증, Redirect URI 등록, 클라이언트 시크릿 연동까지 마무리했다. 실제로 카카오 계정으로 로그인하면 우리 Supabase DB에 사용자 정보가 저장된다.
==3. 실제 돈이 결제된다==
포트원(구 아임포트) SDK를 연동해서, 상세 페이지에서 “신청하기” 버튼을 누르면 실제 카드 결제가 진행되고, 결제 데이터가 Supabase에 저장된다. 100원 실결제 테스트까지 성공.
==4. 82개 프로그램이 새 사이트에서 보인다== 기존 Webflow에만 있던 프로그램 데이터를 새 사이트에서 카테고리별로 필터링해서 볼 수 있게 됐다. 공유회/챌린지·워크숍/커뮤니티 행사 3개 목록 페이지를 만들고, 지난 프로그램은 그레이스케일로 표시한다.
==5. 기존 시스템을 대폭 단순화했다==
기존: Webflow + Firebase(Firestore) + n8n + Supabase (4개 시스템이 복잡하게 연결)
새로: Next.js + Supabase (2개로 끝)
Firestore를 완전히 걷어내고, Supabase가 유일한 데이터베이스가 됐다.
삽질과 배움 — 모아보기
🔑 카카오 로그인 편
1. Redirect URI가 어디 있는지 모르겠다 (2시간 삽질) 카카오 개발자 콘솔에서 “Redirect URI 등록” 메뉴를 찾으려고 왼쪽 사이드바를 위아래로 수십 번 훑었다. 에디터 권한이라 안 보이는 줄 알고 오너 권한까지 받았는데, 오너로 봐도 별도 메뉴가 없었다.
알고 보니: Redirect URI는 독립된 메뉴가 아니라, 앱 > 플랫폼 키 > REST API 키를 클릭해서 들어간 키 설정 페이지 안에 숨어 있었다. 카카오 공식 문서를 끝까지 읽어서야 발견.
한 번 더 실패: REST API 키가 여러 개 있었는데, Redirect URI를 등록한 키와 Vercel 환경변수에 넣은 키가 달랐다. 카카오는 키별로 Redirect URI가 따로 관리되기 때문에, 반드시 실제 사용 중인 키에 등록해야 한다.
💡 꿀팁: 카카오 Redirect URI 등록 경로 =
앱 > 플랫폼 키 > 사용 중인 REST API 키 클릭 > 카카오 로그인 리다이렉트 URI
2. 환경변수 넣었는데 왜 안 바뀌지?
NEXT_PUBLIC_BETTER_AUTH_URL을 Vercel에 등록했는데, 카카오 로그인 버튼이 계속 localhost:3000으로 요청을 보냈다. 브라우저 콘솔에 ERR_CONNECTION_REFUSED 에러.
원인: NEXT_PUBLIC_으로 시작하는 환경변수는 빌드 시점에 코드에 직접 포함된다. 그래서 환경변수를 추가한 뒤에 반드시 Redeploy(재배포)를 해야 새 값이 반영된다. 서버 전용 환경변수(DATABASE_URL 등)와는 다르게 동작한다.
💡 꿀팁: Vercel에서
NEXT_PUBLIC_이 붙은 환경변수를 추가/변경하면, 반드시 Redeploy. 서버 전용 환경변수는 재시작만으로 OK.
🖼️ 콘텐츠 마이그레이션 편
3. Webflow 이미지를 가져오려는데 403 Forbidden Webflow 상세 페이지에서 이미지 URL을 복사해서 새 사이트에서 쓰려 했더니, 이미지가 하나도 안 떴다. Webflow가 “핫링크 보호”를 걸어서, 자기 사이트 외부에서 이미지를 직접 불러오는 걸 차단하고 있었다.
해결: Webflow에는 두 종류의 이미지 경로가 있었다.
- 페이지 빌더에 직접 넣은 이미지 → CDN 경로 A (핫링크 차단됨 ❌)
- CMS에 등록된 이미지 (썸네일, OG 이미지) → CDN 경로 B (접근 가능 ✅)
CMS API로 OG 이미지 URL을 가져온 뒤, 이미지를 다운로드해서 우리 Supabase Storage에 업로드하는 방식으로 우회했다.
💡 꿀팁: Webflow에서 이미지를 마이그레이션할 때는 페이지에서 긁지 말고, CMS API를 통해 가져와야 한다.
💻 개발 편
4. UI 라이브러리 컴포넌트를 커스텀하려다 시간 낭비
대시보드에서 1차/2차/3차 탭을 왼쪽 사이드에서 상단으로 옮기려고 했다. base-ui의 Tabs 컴포넌트에 CSS 클래스를 덮어씌우고, !important도 써보고, 인라인 스타일도 넣어봤지만 계속 원래 레이아웃으로 돌아갔다.
해결: Tabs 컴포넌트를 포기하고, React의 useState + 일반 <button>으로 직접 만들었다. 10분 만에 해결.
💡 꿀팁: UI 라이브러리 컴포넌트의 레이아웃을 근본적으로 바꿔야 할 때는, 오버라이드에 시간 쓰지 말고 처음부터 직접 만드는 게 빠르다.
5. 페이지 리뉴얼 후 결제 버튼이 사라졌다
상세 페이지를 예쁘게 다시 만들었는데, 어드민에서 새 상품을 등록하고 상세 페이지에 가보니 결제 버튼이 없었다. 리뉴얼하면서 PurchaseButton 컴포넌트의 import와 렌더링 코드를 빼먹은 것.
💡 꿀팁: 페이지를 대폭 수정할 때는, 기존에 있던 기능(결제 버튼, 폼, 링크 등)이 빠지지 않았는지 체크리스트를 만들어 확인하자.
🧭 작업 순서 편
6. 블로커가 풀리면 바로 처리하라 원래 계획: 마이페이지 → 결제 순서. 그런데 카카오 오너 계정을 받았다는 소식에 계획을 바꿔서 카카오 로그인을 먼저 마무리했다. 결과적으로 로그인 완성까지 환경변수 불일치, 키 매칭 오류 등 예상 못한 삽질이 많았기 때문에 일찍 시작한 게 좋았다.
💡 꿀팁: 외부 의존성(심사, 권한, 키 발급)이 있는 작업은 블로커가 해소된 시점에 바로 착수하자. 예상보다 삽질이 많다.
7. 의존성 있는 작업은 미루는 게 낫다 마이페이지를 만들려 했는데, 카카오싱크 심사가 안 끝나서 전화번호/이름 수집이 불가능한 상태. 지금 만들면 구매자 정보가 비어있어서 나중에 다시 수정해야 함. 그래서 카카오싱크 심사 통과 후로 미루기로 했다.
💡 꿀팁: 선행 작업이 안 끝났으면 억지로 만들지 말고, 선행 작업이 완료된 후에 하는 게 재작업을 줄인다.
8. 디자인과 콘텐츠를 같이 작업하라 콘텐츠 마이그레이션은 원래 2차 작업이었지만, 홈페이지 디자인만 하면 껍데기만 예쁘고 실제 데이터가 안 보여서 결과물 확인이 어려웠다. 디자인과 콘텐츠를 같이 작업하니까 실제 데이터로 디자인이 어떻게 보이는지 바로 확인할 수 있었다.
💡 꿀팁: 디자인 작업 시 실제 데이터를 최대한 빨리 넣어서 확인하자. 더미 데이터로만 보면 실제 서비스와 괴리가 생긴다.
클로드 코드 사용법 — 이번 주에 효과적이었던 것들
🚀 클로드 코드가 특히 잘한 것
1. 기존 시스템 구조 파악 “기존 결제 구조 정리해줘”라고 하면, Supabase 테이블 구조, Firestore 데이터, Webflow CMS 필드를 직접 조회해서 한눈에 볼 수 있는 표로 정리해줬다. 내가 직접 콘솔 여러 개를 왔다갔다하며 파악하려면 몇 시간 걸릴 일을 몇 분 만에 해결.
2. 외부 서비스 API 연동 Webflow CMS API로 콘텐츠를 추출하고, 포트원 SDK로 결제를 연동하고, BetterAuth로 카카오 로그인을 붙이는 등 — 외부 서비스와의 연동 코드를 한 번의 대화로 완성했다. API 문서를 읽고 코드를 짜는 과정이 매우 빠르다.
3. 삽질할 때 원인 추적 에러 메시지를 복사해서 붙여넣으면, 가능한 원인을 빠르게 좁혀준다. “403이면 핫링크 차단일 수 있다”, “ERR_CONNECTION_REFUSED면 URL이 localhost로 가고 있다” 등. 내가 직접 구글링하는 것보다 빠르게 방향을 잡아줬다.
4. 워크로그 자동화
/worklog 스킬을 만들어서, 작업 끝에 한 번만 실행하면 워크로그 작성 + 대시보드 업데이트 + 커밋 + 푸시 + 옵시디언 동기화가 한 번에 된다. 매일 기록하는 게 부담이 아니라 습관이 됐다.
⚠️ 클로드 코드 사용 시 주의할 점
1. 답을 너무 빨리 믿지 말 것 클로드가 “카카오 플랫폼 메뉴에서 등록하세요”라고 했는데, 실제로는 그 메뉴가 없었다. 외부 서비스(카카오, 포트원 등)의 콘솔 UI는 자주 바뀌기 때문에, 클로드의 안내가 현재 UI와 다를 수 있다. 스크린샷을 보여주면서 진행하는 게 가장 정확하다.
2. 한 번에 너무 많이 시키지 말 것 “홈페이지 전체를 리디자인하고, 콘텐츠 마이그레이션도 하고, 결제도 붙여줘”라고 하면 범위가 넓어서 하나씩 빠지는 게 생긴다 (결제 버튼 누락처럼). 한 가지씩 완성하고 확인한 뒤 다음으로 넘어가는 게 안전하다.
3. 환경변수/키 관련은 직접 확인하라 클로드가 코드를 짜주는 건 빠르지만, 카카오 키, 포트원 키, Vercel 환경변수 같은 것은 결국 내가 직접 콘솔에서 확인하고 입력해야 한다. 키가 여러 개일 때 어떤 키가 맞는지는 클로드가 알 수 없다.
💬 효과적인 대화 패턴
- “정리해줘”로 시작 → 현재 상태를 파악한 뒤 작업 착수
- 스크린샷 보내기 → 텍스트로 설명하는 것보다 정확하고 빠름
- “이거 맞아?”로 확인 → 작업 중간에 방향이 맞는지 체크
- “삽질과 배움 기록해줘” → 나중에 같은 실수 반복 방지
- 결정이 필요한 순간 표로 정리 요청 → 선택지와 장단점이 한눈에 보임