[#002] Claude Code와 Cursor 최신 세팅으로 회의록 폴더 액션 보드 만들기 [Vibe Coding, Claude Code, Cursor, 로컬 웹앱]

이번에 만들 것

이번 편에서는 회의록 txt나 md 파일을 폴더째 넣으면 담당자 없음, 오늘 할 일, 이번 주 할 일, 보류로 자동 정리해주는 로컬 액션 보드를 만듭니다. 브라우저 서비스 안에서 끝내던 지난 편과 달리, 이번에는 내 PC 폴더를 읽는 도구를 직접 굴려보는 게 목표입니다. 첫 로컬 프로젝트는 거창할 필요 없고, 내가 바로 다시 쓸 수 있으면 됩니다.

준비물

Claude Code와 Cursor를 설치한 뒤 같은 프로젝트 폴더를 열어두세요. Claude Code는 공식 settings 문서 기준으로 CLAUDE.md와 .claude/settings.json을 프로젝트 단위로 읽고, Cursor는 2026년 기준 .cursorrules보다 .cursor/rules를 권장합니다. 이번 수업은 Claude Code settings, Cursor Rules, Cursor Background Agents, GitHub Copilot cloud agent, OpenAI Responses API migration에서 확인한 최신 흐름을 반영합니다. OpenAI는 2025년 8월 26일 Assistants API deprecation을 발표했고 2026년 8월 26일 sunset 일정을 열어둔 상태라, 이번 편부터도 도구별 버튼 외우기보다 저장소 안 지침 파일을 먼저 잡는 습관으로 가겠습니다.

따라하기

Step 1: Claude Code가 길을 안 잃게 프로젝트 규칙부터 만드세요

프로젝트 폴더를 열고 Claude Code에 아래처럼 입력하세요. 여기서 범위를 먼저 못 박아두면 AI가 괜히 React나 서버를 붙이지 않습니다.

이 폴더를 로컬 전용 생산성 도구 프로젝트로 세팅해 주세요. CLAUDE.md와 .claude/settings.json을 만들어 주세요. 조건은 순수 HTML/CSS/JS, txt와 md 파일 드래그앤드롭 지원, 결과는 담당자 없음/오늘 할 일/이번 주 할 일/보류 보드, 브라우저에서 바로 열 수 있게, .env와 secrets 폴더는 읽지 않기입니다.

정상이면 CLAUDE.md에는 목표와 UI 규칙이, .claude/settings.json에는 permissions.deny가 들어갑니다. 여기서 ignorePatterns를 쓰면 안 됩니다. Claude Code 문서 기준으로 이 항목은 이미 deprecated라서 지금은 permissions.deny로 막아야 합니다.

Step 2: Cursor에는 레거시 말고 Project Rules를 넣으세요

같은 폴더를 Cursor로 열고 Chat 또는 Agent에 아래를 넣으세요. 이번 단계는 품질을 올리는 장치라서 건너뛰면 같은 요구를 계속 반복하게 됩니다.

이 프로젝트용 Cursor Rule 파일을 만들어 주세요. 위치는 .cursor/rules/action-board.mdc로 해 주세요. 규칙은 CLAUDE.md를 우선 따르고, 순수 JS 우선, 한글 UI 유지, 새 기능 추가 전 기존 함수 재사용, 변경 후 수동 테스트 체크리스트 출력, 모바일 화면도 반드시 확인입니다.

정상이면 .cursor/rules 폴더와 rule 파일이 생깁니다. 만약 AI가 .cursorrules를 만들겠다고 하면 바로 멈추게 하세요. 최신 Cursor 문서에서는 그 파일을 legacy로 두고 Project Rules를 기본으로 안내하고 있거든요.

Step 3: 첫 결과물을 한 번에 뽑으세요

이제 다시 Claude Code로 돌아가서 실제 도구를 만들게 합니다. 처음부터 욕심내서 검색, 로그인, DB까지 넣으려 하면 초반 성공 경험이 흐려집니다.

회의록 txt 또는 md 파일 여러 개를 드래그하면 액션 아이템만 추출해서 4개 칸 보드로 정리하는 single-page app을 만들어 주세요. 항목마다 제목, 담당자, 마감일, 원문 근거 한 줄을 보여주고, 샘플 데이터 버튼과 localStorage 저장도 넣어 주세요. 결과물은 index.html만 열어도 실행되게 해 주세요.

정상이면 index.html, app.js, style.css 정도로 끝납니다. 브라우저에서 index.html을 열었을 때 샘플 데이터 버튼이 바로 눌리고 카드가 네 칸으로 나뉘면 됩니다. 여기서 프레임워크를 새로 깔거나 dev server를 먼저 만들게 두면 안 됩니다. 이번 편 목표는 설치 자랑이 아니라 첫 실행까지 가는 거라서요.

Step 4: Cursor Background Agent로 손 안 가는 수정을 맡기세요

작동은 되는데 UI가 거칠면 여기서 Cursor의 최신 기능을 쓰면 됩니다. Background Agent는 메인 흐름을 안 끊고 좁은 수정 작업을 던질 때 특히 편합니다.

현재 앱에서 모바일 카드 줄바꿈을 고치고, 담당자 없는 항목에는 빨간 배지를 붙이고, 빈 상태 문구를 추가해 주세요. 기존 구조는 유지하고 바뀐 파일과 확인한 체크리스트를 마지막에 요약해 주세요.

정상이면 백그라운드 작업이 끝난 뒤 수정 파일 목록과 요약이 돌아옵니다. 여기서 앱 전체를 다시 설계하라고 시키면 안 됩니다. Background Agent는 범위가 좁을수록 결과가 안정적입니다.

직접 해보기

이제 회의록 대신 본인 파일로 바꿔보세요. 지난주 영업 콜 메모 3개나 채용 인터뷰 노트 3개를 넣고, 분류 칸 이름을 오늘 회신, 초안 작성, 승인 대기, 보류로 바꾸라고 지시해 보세요. 같은 앱 구조를 유지한 채 분류 기준만 바뀌면 이번 수업을 제대로 따라온 겁니다.

결과물 체크

파일을 드래그했을 때 카드가 즉시 생성되고, 담당자 없는 항목이 따로 눈에 띄어야 합니다. 새로고침해도 마지막 결과가 남아 있으면 정상이고, 모바일 폭에서도 카드가 한 줄씩 읽히면 성공입니다. 회의록 원문 한 줄 근거가 함께 보이지 않으면 다시 수정 지시를 넣으세요.

다음 편 예고

다음 편에서는 같은 프로젝트를 가지고 작업을 잘게 쪼개서 Claude Projects, Claude Code, Cursor를 한 흐름으로 묶는 법까지 가보겠습니다.