소개
지난주에 만들었던 n8n 공유 플랫폼의 경우, 바이브 코딩으로 구현된 코드들을 뜯어보며 프론트/백엔드 각각 수정 및 개선 작업 중에 있습니다.
이와는 별개로 Claude Code 활용 사례 공유하고자 합니다.
진행 방법
시간 관리 앱 개발 및 배포
Figma Make로 간단한 시간 앱 구현 + Claude Code 로 Flutter 기반 모바일 앱 빌드
Figma Make로 시계 / 타이머 / 뽀모도로 / 스탑워치 UI 구현해달라고 요청
Claude Code로 해당 코드를 Flutter 기반으로 변환 요청
해당 앱 빌드 및 구글 플레이 스토어에 등록
Gemini CLI 에 찾은 경쟁앱 리스트 제공 및 추가 조사하여 현재 구현된 코드의 상업화 전략 수립 요청
현재는 광고/구독/인앱결제 등 없이 로컬 스토리지 저장 기반 앱
별도 광고 진행도 안함.
순수하게 상기 4가지 기능만 탑재한 상태
추후, 해당 계획 기반 Claude Code로 단계별 개선작업 진행 예정
여자친구 React Natvie 앱 디버깅 및 고도화 (제 클코 사용량은 소중하기에 초기에 미사용)
디버깅 관련
Gemini CLI: 앱 빌 드 시 지속 오류 발생하여 해당 오류 코드 집어넣어도 계속 같은 답변
해결 X
Codex: 답답해서 Codex에 집어넣어보니 조금씩 다른 답변 진행
경로 내 한글이 있어 오류 발생 가능하다고 하여 경로 변경 후 정상적으로 실행됨
Gemini CLI
Gemini CLI 에게 경쟁 앱 리스트 제공 및 추가 조사하여 상업화 전략 수립
해당 전략 기반 Figma Make에게 제시할 UI 프롬프트 구현 요청
Figma Make로 UI 구현 및 코드 추출
Gemini CLI 에게 기존 코드, 전략 수립 문서, Figma Make 코드 참고하여
Figma Make 코드에서 벤치마킹할만한 요소 추출하여 전략 수립 문서에 반영 요청Gemini CLI에게 전략 수립 문서 기반 개발 로드맵(TODO 문서) 작성 요청
TODO.md에 따라 Phase 1 UI 개선 작업 진행
Claude Code
Phase 1 UI 개선작업 완료 후, Firebase Realtime DB 구조 변경이 필요하여, 노가다 작업 하기 싫어 Gemini CLI에게 변환 요청 (구조 변경 + 추가 조사로 데이터 기입 필요)
잘 진행하다가 자꾸 DB 구조 이상하게 생성하거나 idx 일부 씹히고 넘어감
Claude Code로 변환 요청
문제 없이 쭉 처음부터 끝까지 진행
해당 건은 상황 봐서 잘 안되면 Claude Code 쓰고 기본은 Gemini CLI로..ㅎㅎ
중간에 코드 확인 시, 불필요한 부분 있어서 별도 수정작업 진행 중
옵시디언 플러그인 앱 개발 계획에 대해 깃헙 이슈 생성
Claude Code에게 Github PAT 제공하여 간단하게 한줄씩 적어둔 개발 계획을
기획, 그룹화, 고도화하여 이슈 생성 요청
생성된 이슈들에 대해 적합한 라벨 요청
사용자가 작성한 이슈들에 대해 적절한 코멘트 작성 요청
결과와 배운 점
3사 비교
Claude Code: 제일 만족스럽게 답변을 하나, 사용량 제한 + 컨텍스트 길이 제한
Gemini CLI: 자료 조사, 긴 컨텍스트 참고 필요 시 사용
Codex: 그냥 터미널 내 출력 UI 자체가 맘에 안듭니다. 가시적이지 않음.
전반적인 느낀점
귀찮더라도 매 단계별 확인 후 승인하는 것이 좋은 것 같습니다.
차츰 방향이 틀어지다보면 시작은 같아도 끝은 제 의도와 달라지는 경우가 많았음.
중간중간 불필요한 코드 구현, 로직 구현이 되기에 직접 검증이 중요할 것 같음.
Figma Make 너무 편한 것 같습니다 😊 지난번 스터디 때 Figma Make 청강이라도 해볼걸 그랬네요
