0 - 개발자가 Claude Code를 진지하게 써봤다 — Flutter + Django편
- 카테고리 없음
- 2026. 3. 29. 23:24
목차
26년이 되어서 클로드 코드가 핫하다. 얼마나 핫하냐면 보수적인 회사에서조차 AI사용을 검토해 볼 정도로..?
바이브 코딩이 나오고 코드를 AI가 만들어주면서 개발자가 아닌 사람도 개발자처럼 코딩을 할 수 있는 시대가 되었다. 작년까지만 해도 뭐 얼마나 잘하겠어? 했지만, 클로드 코드의 퍼포먼스를 보면 '어? 좀 하는데?'라는 말이 나온다 ㅋㅋ
그래서 본격적으로 클로드 코드가 얼마나 대단하고 어디까지 할 수 있는지를 확인하고, 정리해보려고 한다.
‼️ 갑자기 클로드 코드를?
잠깐 쉬고 있던 블로그 활동에 갑자기 클로드 코드로 글을 쓰는 이유는 간단하다.
지금 이 시기가 기회라고 생각했다.
AI 코딩 시대 이전에는 개발자는 단순히 개발 관련 능력만 높으면 일을 잘하는 개발자였다. '개발자는 코드로 말한다' 느낌이랄까?
하지만 AI가 발전하고 gpt, copilot, 커서 ai, 클로드 코드와 같은 AI 툴이 나오면서, 시대가 변하고 있는 것이 느껴졌다. 개발은 AI가 할 거니 AI를 잘 이용하는 능력이 중요해졌다.
그럼 AI를 잘 이용하는 능력은 무엇일까? 현재 우리가 사용하는 AI는 LLM 방식으로 학습된 모델과 대화하면서 사용하는 방식이다. 즉 '대화'를 잘해야 한다.
나는 대부분의 개발자들이 커뮤니케이션 능력이 부족하고, 문서작업능력 역시 떨어진다고 생각한다. 이건 모두가 공감하는 개발자의 특성이 아닐까 싶다. (물론 예외도 있지만 ^~^)
따라서 기존 개발자들은 아마 LLM 방식의 AI를 잘 활용하지 못할 것이라고 예상한다. 실제로 주변 시니어 개발자들이 AI툴 활용을 어려워하는 것을 몸소 느끼고 있다. 하지만 시니어 중에서도 꾸준히 학습하고 노력하는 사람들은 AI를 사용하면서 보다 높은 퍼포먼스를 내고 있다.
즉, 개발자로서의 능력을 어느 정도 갖추고 있으며, 자기 계발과 학습을 꾸준히 하며, 커뮤니케이션과 문서작업과 같은 인문학적인 능력도 갖춘 사람이라면 지금 이 시대에 AI를 활용한 개발을 가장 잘하는 사람이지 않을까?
이 가설을 증명하기 위해 클로드 코드를 활용해서 이것, 저것 해보면서 내 능력이 어디까지 올라가는지 시험해보려고 한다.
⚙️ 클로드 코드 환경구성
클로드 코드는 cli 환경으로 터미널에서 명령을 실행하는 구조이다. 개발자들은 환영할 ux이긴 한데.. ㅋㅋ
개발자가 아닌 사람들은 살짝 불편하지 않을까?라는 생각.. 물론 다른 UI 툴을 이용하면 좀 편하게 쓸 수 있게 해 주겠지?
curl -fsSL https://claude.ai/install.sh | bash
mac에서는 brew로 설치할 수도 있지만, native install로 해야지 최신 버전 자동 업데이트가 된다고 해서 위에 curl 명령어로 설치함.
설치 후 claude 입력하면 실행됨.
이것저것 기본 세팅을 하면 클로드 메인 화면이 뜬다.
근데 메인화면 뜨고 나서. 응...? 그래서 뭐 어쩌라는 거지? 생각이 먼저 듬 ㅋㅋㅋㅋㅋ 첨부터 힘들구먼
💻 프로젝트 구성
일단 클로드 코드는 프로젝트의 루트 경로에서 실행하는 게 정석인 것 같다. 그리고 실행되는 폴더에 읽기 쓰기 권한을 획득한 후 이것저것 알아서 실행해 주는 것 같다.
근데 나는 이번에 프론트와 백엔드를 동시에 만들 것이기 때문에 프로젝트 폴더가 2개가 생길 텐데, 이럴 경우에는 최상위에 폴더 하나를 두고, 그 안에 두 프로젝트 폴더를 배치하면 된다.
my_project/
├── CLAUDE.md # 프로젝트 전체 컨텍스트 (핵심!)
├── frontend/ # Flutter 앱
│ ├── CLAUDE.md
│ └── lib/
│ ├── core/ # API 클라이언트, 공통 유틸
│ └── features/ # 기능별 모듈 (auth, home 등)
├── backend/ # Django 앱
│ ├── CLAUDE.md
│ ├── config/ # settings, urls, wsgi
│ ├── apps/ # Django 앱들
│ └── requirements/ # dev/prod 분리
├── docs/
│ └── api/ # OpenAPI 명세
└── docker-compose.yml
여기서 CLAUDE.md파일은 클로드에게 기본적인 가이드를 내려주는 파일이다. 이 CLAUDE.md파일에 대해서 어떻게 작성해야 되는지 논란이 많긴 한데, 기본적으로는 클로드 코드에서 /init이라는 명령어를 사용하면 자동으로 작성해 주는 파일이다. 논란인 이유는 CLAUDE.md파일이 클로드 코드의 성능을 떨어뜨린다!라는 논문 때문인데, 실제로 논문의 내용은 '쓸데없는 글이 적힌 CLAUDE.md파일은 클로드 코드의 성능을 떨어뜨린다' 이기 때문에 잘 적기만 한다면 CLAUDE.md는 아주 유용하다.
* 번외
클로드 코드를 구독을 하면 내가 얼마나 사용했는지 확인이 필요한 경우가 있는데, 이럴 경우에 ccusage cli를 사용하면 얼마나 사용했는지 알 수 있다.
데이터가 좀 불친절하게 나오기 때문에 claude-monitor를 사용하면 이쁘게 나오기는 하는데, 이게 터미널을 하나 새로 띄워놓고 할게 아니라면 생각보다 불편해서, claude code 아래 상태표시줄에 내 사용량을 측정해 주는 값을 넣을 수 있다.
이렇게 상태창에 넣기 완료. 넣는 방법은 claude code를 시키면 된다. ㅋㅋㅋ
명령어는 /statusline이고 명령어치고 원하는 데이터를 넣으면 클로드가 알아서 착착 넣어준다. (완벽하게 알아서 넣어주지는 않고 몇 번 try 끝에 저 모냥이 됨... ㅋㅋ)
현재는 위에 폴더 구조에서 CLAUDE.md와 백엔드, 프론트 프로젝트 폴더 기초적인 것을 만들어 놓은 상태.
CLAUDE.md에는 다음 내용이 적혀있다.
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## 프로젝트 구조
Django 백엔드 + Flutter 웹 프론트엔드 풀스택 프로젝트.
```
claudecode_project/
├── backend/ # Django 6.0 (Python) — API 서버
└── frontend/ # Flutter (Dart) — 웹 전용
```
각 프로젝트의 상세 가이드는 해당 폴더의 `CLAUDE.md` 참고.
## 개발 서버 실행 (동시)
```bash
# 백엔드 (터미널 1)
cd backend && source .venv/bin/activate && python manage.py runserver
# 프론트엔드 (터미널 2)
cd frontend && flutter run -d chrome
```
## 연동 구조
- Flutter 웹 → Django REST API 호출
- CORS: 백엔드에 `django-cors-headers` 설정 필요
- 기본 포트: Django `8000`, Flutter 웹 `기본 랜덤` (고정 시 `--web-port 3000`)
flutter를 웹으로 사용할 것이라는 설정만 넣고, 나머지는 아무것도 적지 않았다.
대신 백엔드랑 프론트를 기본 장고앱, 플러터앱으로 세팅해 놨기 때문에 클로드가 알아서 어떤 프레임워크인지 인식해서 써준 듯하다.
여기서 이제 바로 클로드한테 만들어달라고 해보자!
🗺️ 로드맵 작성하기
무작정 만들어 달라고 해도 잘 만들어주지만, 클로드 코드의 작업을 사람이 트랙킹하기 편하려면 '로드맵'을 작성하는 게 편하다. 클로드 코드가 어떤 순서로 어떤 작업을 할지 계획을 세워주는 단계라고 생각하면 된다. 위처럼 '로드맵을 만들어줘'라고 부탁하면 알아서 로드맵 md파일을 만들어준다.
각 단계별로 계획을 세우고, 로드맵대로 작업을 실행할까요? 하면 알아서 실행해 줌 ㅎㅎ
모델은 sonet을 사용했는데도, 생각보다 개발을 잘해주었다. 물론 돌아가는지는 잘 모르겠으니 한번 실행을 해볼까?
▶️ 서비스 실행해 보기
개발을 완료하기는 했는데, 프론트와 백엔드를 동시에 띄우기 위해 docker-compose를 사용하는 것은 적용이 안 된 상태이다.
백엔드 프론트 각각 실행하면 되긴 하는데, 한 번에 실행하는 게 좋으니 docker compose로 만들어달라고 요청했다.
❯ 백엔드랑 프론트 동시에 실행할 수 있게 docker compose로 만들어줘
만드는데 1분 33초 걸렸네요. 음.. 이 정도는 사람이 만드는 속도랑 비슷할 수도..
하지만 docker compose 지식이 없다면 오래 걸릴 텐데 클로드가 잘해줬다.
만들어진 docker-compose.yaml 파일은 아래 참고
services:
backend:
build:
context: ./backend
ports:
- "8000:8000"
volumes:
- ./backend:/app
environment:
- PYTHONUNBUFFERED=1
- DJANGO_SETTINGS_MODULE=backend.settings
restart: unless-stopped
healthcheck:
test: ["CMD", "python", "-c", "import urllib.request; urllib.request.urlopen('http://localhost:8000/admin/')"]
interval: 10s
timeout: 5s
retries: 5
start_period: 15s
frontend:
build:
context: ./frontend
ports:
- "3000:80"
depends_on:
backend:
condition: service_healthy
restart: unless-stopped
근데 그대로 docker compose 실행하니까 에러가 남 ㅋㅋㅋ
원래라면 에러 메시지 보고 어디가 문제인지 고민했겠지만, 클로드에게 맞겨본다.
자기가 직접 돌려보면서 에러메시지를 보고, 다시 수정해서 돌리고 에러 있나 체크하고 쿵짝쿵짝함.
그리고 다시 돌리니까 되네?
아마 docker-compose.yaml이 에러가 아니라 flutter 쪽 dockerfile에 패키지 다운로드하는 부분이 권한이 없어서, ghcr -> debian으로 바꾼 듯하다.
아무튼 실행하니 다음과 같은 프론트 화면이 뜬다.
디자인이 좀 구린데..?
내가 따로 가이드를 안 해서 그런지, sonet 모델이라서 그런지 생각보다 디자인은 구렸다 ㅋㅋㅋ flutter 기본 디자인을 쓴 것 같음. 뭐 가이드를 주면 이건 이쁘게 해 줄 거니까, 그냥 무시하고 어떤 기능들이 되는지 테스트해 봤다.
일단
- 로그인 가능 (어드민에서 유저 만들어야 함)
- 모임 생성, 참여, 삭제 가능
- 보드게임 관리기능 먹통...
보드게임은 추가 버튼을 눌렀더니 흰 화면만 나오고 먹통이다.
클로드에게 이 기능이 안 된다고 고쳐달라고 요청했다.
자동으로 배포까지 해주기 때문에 새로고침 한번 하고 하니까 잘됨!
근데 추가할 때 이미지랑 BGG ID 있길래 여기에 넣으면 자동으로 링크를 해주거나, 이미지를 추가해 주는 줄 알았는데 아무것도 안 함 ㅋㅋㅋ
이것도 한번 부탁해 보자.
이미지가 안 나온다고 하니 이것저것 하길래 그래도 안된다고 해서 3번에 씨름만에 드디어 완성 ㅋㅋㅋ
👩🎨 디자인 입혀보기
개발자가 1인 개발에서 가장 어려운 건 디자인이다.
공대 감성은 어쩔 수 없달까? ㅋㅋㅋㅋ
클로드 코드한테 한번 보드게임 앱답게 디자인을 바꿔달라고 해보자.
많이 바꿨다고 한다. 한번 실행해 볼까?
테마나 레이아웃을 뭔가 요즘(?)스럽게 바꿨다. 아까보다는 좋은 듯? ㅋㅋㅋㅋㅋ
👨💻 기능을 추가하기
처음에 만들어 달라고 했던 기능은 어느 정도 나온 것 같은데, 만들다 보니 새로운 기능이 필요해 보인다.
처음부터 만드는 것도 잘했으니, 새로 기능 추가도 잘하겠지?
일단 내 정보를 수정할 수 있게 해 보자. 비밀번호 수정이라던지, 프로필 사진 추가라던지, 내가 참여한 모임 보기 기능 이런 것들?
❯ 새로운 기능을 추가하고 싶어. 로드맵에 추가해줘.
회원의 개인 정보를 수정하는 기능이 필요해. 비밀번호를 변경하거나 프로필 사진을 변경하고 싶어. 변경한 프로필
사진은 참여한 모임이나 내 이름이 들어가는 곳에 동그랗게 표시하고 싶어.
보드게임 관리에서는 특정 보드게임을 즐겨찾기 할 수 있는 기능을 넣고 싶어. 물론 내가 즐겨찾기한 보드게임을
모아보는 화면도 만들어줘.
보드게임을 새로 추가할 때 BGG ID를 입력하면 BGG 홈페이지에서 정보를 읽어와서 자동으로 추가하게 해줘.
보드게임에 대한 평가점수나 난이도, 게임 인원 등 추가 정보도 더 많이 표기하고 싶어.
일단 로드맵을 만들고 기존 파일에 추가해줘
상당히 자세하게 요청했다.
이런 것을 요청하기 위해서는 어느 정도 기획능력이 필요한데, 이래서 개발자보다는 기획자가 클로드 코드를 사용한 바이브 코딩에 유리한 것 같다.
자 이제 만들어진 새로운 로드맵으로 작업을 해달라고 요청해 보자.
자 어디 얼마나 잘했는지 한번 실행해 보자.
개인 정보 수정은 완벽한 것 같다. 사진 변경도 잘 됨 ^~^
처음엔 BGG ID를 입력해도 작동이 안 되었는데, 클로드에게 물어보니 BGG에서 제공하는 API를 이용해서 만들려고 하고 있었다.
근데 API를 이용하자니 oauth연동을 해야 할 것이고, 실제로 API를 제공하는지도 모르겠고 ㅋㅋ
그래서 스크래핑으로 만들어줘!라고 했더니 BGG에서 가져오기를 누르면 BGG홈페이지가 잠깐 뜨고, 새로 추가되는 것을 확인할 수 있었다. 굳..
아니 너무 잘 만들어주잖아?
🤔 정리하기
이번에 클로드 코드를 이용해서 보드게임 동호회 서비스 프로토타입을 만들어보았다.
실제로 내가 개발을 해서 만들었으면 1달 정도 걸렸을 것 같은데, 클로드를 이용해서 한 5~6시간 만에 만든 것 같다. (블로그 쓰는 거 제외하면 2~3시간?)
프론트는 역시나 잘해주었고, 백엔드도 생각했던 것보다 너무 퀄리티 있게 뽑아주었다. 특히 에러난 부분을 스스로 테스트해 가면서 고치는 게 너무 좋은 듯?
특히 1인 개발자로 일하게 된다면 항상 아쉬웠던 디자인 부분도 클로드가 잘 만들어주니, 상용화된 서비스도 만들 수 있을 것 같은데?라는 생각이 들었다. 물론 인프라적인 내용까지 클로드가 해주지는 못할 것 같긴 한데(AWS나 domain 등록 등...) 이 정도는 사람이 해야지 ^~^
이번 포스팅에서는 단일 에이전트로 작업을 진행했는데, 최근에 에이전트 팀 모드를 사용해 보니 단일로 사용할 때보다 속도가 더 빨랐다. (물론 토큰을 그만큼 많이 사용해서 돈이 많이 나감.. ㅎ)
이번에 만든 동호회 서비스를 개선하거나, 다른 일을 하면서 클로드 코드를 어떻게 써야 효과적으로 쓸지 연구해 볼 생각이다. (요즘엔 이런 걸 AX - AI Transformation이라고 부르는 것 같다.)