🚀 Claude와 Cursor에서 @ttsc/graph 100% 활용하기 (프롬프트 context 최적화)
1
설명
최근 복잡한 프로젝트 아키텍처나 모듈 의존성을 LLM에게 정확히 이해시키는 게 정말 중요해졌죠. 파일 몇 개만 던져주면 전체 구조를 놓치고 헛소리(할루시네이션)를 하기 일쑤인데요.
TypeScript 프로젝트의 전체 의존성 시각화 및 구조 분석 도구인 @ttsc/graph를 Claude(Projects)와 Cursor에 적용해, AI가 내 코드베이스를 완벽하게 파악하도록 만드는 워크플로우를 공유합니다.
🛠️ 1단계: @ttsc/graph로 구조 분석 데이터 생성하기
먼저 프로젝트 루트에서 @ttsc/graph를 이용해 아키텍처 맵 데이터를 추출해야 합니다. LLM이 읽기 가장 좋은 포맷은 텍스트 기반의 구조 정의(예: Mermaid 또는 JSON/Text 맵)입니다.
💡 Tip: 시각화된 이미지(PNG/SVG)보다, 텍스트 형태의 의존성 그래프 파일이 LLM의 문맥 이해에 훨씬 효율적입니다.
Bash
# @ttsc/graph를 이용해 의존성 그래프 정보 추출 (예시)
npx @ttsc/graph --format json --output project-architecture.json
# 또는 트리/텍스트 형태로 추출
npx @ttsc/graph --format text > project-structure.txt
🤖 2단계: Claude (Projects)에서 사용하기
Claude.ai의 Projects 기능은 커스텀 지침(Custom Instructions)과 파일(Context)을 미리 지정할 수 있어 아키텍처 학습에 최적입니다.
1. Context 파일 업로드
생성된 project-architecture.json 또는 project-structure.txt 파일을 Claude Project의 Files 탭에 업로드합니다.
2. Custom Instructions (지침) 설정
프로젝트의 Set Custom Instructions에 아래 내용을 추가해 줍니다.
Markdown
당신은 이 프로젝트의 수석 아키텍트입니다.
업로드된 `project-structure.txt`(또는 .json) 파일은 `@ttsc/graph`로 추출한 프로젝트의 의존성 그래프 및 아키텍처 맵입니다.
새로운 기능을 구현하거나 리팩토링을 제안할 때, 반드시 이 의존성 그래프를 기반으로 순환 참조가 발생하지 않는지, 기존 모듈 경계를 침범하지 않는지 먼저 검토하고 답변하세요.
이렇게 설정하면 Claude가 파일 몇 개만 보고 코드를 짜는 게 아니라, 프로젝트 전체의 거대한 흐름 속에서 안전한 코드를 제안하게 됩니다.
💻 3단계: Cursor (IDE)에서 활용하기
Cursor에서는 .cursorrules 설정과 @ 심볼을 이용해 더 다이내믹하게 활용할 수 있습니다.
1. .cursorrules에 규칙 추가
프로젝트 루트에 .cursorrules 파일이 있다면 아래 내용을 상단에 명시해 줍니다.
Markdown
## Project Architecture Rule
- `@ttsc/graph`로 생성된 `project-structure.txt` 파일을 기반으로 프로젝트 구조를 이해할 것.
- 새로운 파일 생성이나 `import` 추가 시, 기존 의존성 그래프의 규칙을 준수할 것.
2. Cursor Chat / Composer에서 Context로 호출하기
코딩 중 의존성이나 아키텍처 관련 질문을 할 때 @ 기능을 적극 활용하세요.
질문 예시:
"@project-structure.txt 참고해서, 이번에 새로 만들 NotificationService는 어느 디렉토리에 위치해야 기존 의존성 아키텍처를 깨지 않을까?"
Composer(Ctrl+I / Cmd+I) 활용 시:
전체 리팩토링을 지시할 때 파일 첨부(@project-structure.txt)를 해두면, 파일 간의 얽히고설킨 관계를 Cursor가 알아서 계산하여 부수 효과(Side Effect)가 없는 깔끔한 코드를 생성해 줍니다.
🎯 요약 및 기대 효과
할루시네이션 방지: "어라? 이 파일이 왜 저기 있죠?" 같은 AI의 착각이 눈에 띄게 줄어듭니다.
아키텍처 일관성 유지: 주니어 개발자나 AI가 프로젝트 고유의 레이어드 아키텍처 규칙을 위반하는 코드를 짜지 않도록 방어할 수 있습니다.
온보딩 최적화: 새로운 AI agent 환경을 세팅할 때 @ttsc/graph 결과물 하나면 프로젝트 파악이 끝납니다.
다들 대형 TypeScript 프로젝트 관리하실 때 이 조합으로 생산성 극대화해 보세요! 질문이나 더 좋은 팁이 있다면 댓글로 공유 부탁드립니다. 🔥
신고 · 불법·유해·아동 안전(CSAE) 관련 콘텐츠
댓글 0
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.