flowchart — 코드를 흐름도로 (역기획)

📚 본 프로젝트는 패스트캠퍼스(FastCampus) 강의 자료입니다.

이미 만들어진 코드를 흐름도(mermaid)로 되돌려 이해하고, 링크 하나로 공유하는 서비스입니다. "이거 어떻게 돌아가는 거지?"를 자동으로 그려주는 역기획(reverse-planning) 도구예요.

핵심 아이디어

코드를 읽고 흐름도를 만드는 "무거운 일"은 Claude Code(MCP) 가 하고, 이 서비스의 서버는 결과물을 저장·공유만 합니다. 그래서 서버에서 AI를 호출하지 않아 토큰 비용이 거의 0입니다.

[Claude Code] ──(코드 읽고 mermaid 생성)──▶ [MCP 서버] ──▶ [웹앱: 저장 + 공유링크]
                                                                    │
                                                       공유링크 /f/xxx 로 누구나 열람

• 만드는 사람 — Claude Code에 MCP를 연결하고 "이 프로젝트 흐름도 그려서 저장해줘"
• 보는 사람 — 발급된 링크를 로그인 없이 열람

구성

폴더/파일	설명
app/	Next.js 웹앱 — 랜딩 / 회원가입·로그인 / 대시보드 / /f/[id] 공유 뷰어
app/api/flowcharts	MCP 서버가 호출하는 저장·수정·목록 API (개인 토큰 인증)
mcp-server/	Claude Code에 붙는 MCP 서버 (save/update/list_flowchart)
lib/	Supabase 클라이언트, 인증 헬퍼
supabase/migrations/	DB 스키마 (profiles, flowcharts, RLS)

기술 스택

• Next.js (App Router) + TypeScript
• Supabase (Auth + Postgres + RLS)
• Mermaid (흐름도 렌더링)
• Model Context Protocol (@modelcontextprotocol/sdk)

로컬 실행

# 1) 웹앱
npm install
cp .env.example .env.local   # 값 채우기 (Supabase 프로젝트)
npm run dev                  # http://localhost:3000

# 2) MCP 서버
cd mcp-server
npm install
npm run build

# 3) Claude Code에 연결 (대시보드에서 개인 토큰 발급 후)
claude mcp add flowchart \
  -e FLOWCHART_TOKEN=fc_... \
  -e FLOWCHART_API_URL=http://localhost:3000 \
  -- node "$(pwd)/dist/index.js"

인증 방식

아이디+비밀번호만 받아, 내부적으로 <아이디>@flowchart.local 이메일로 변환해 Supabase Auth를 사용합니다. 비밀번호 해싱은 Supabase Auth가 처리하고, 아이디 중복검사가 포함됩니다.

---

패스트캠퍼스 강의 자료 · 데일리 앱 예제