Blog

Claude Code로 개발 워크플로우 - Slash Command 설치 및 사용법

Claude Code의 Slash Command 기능 소개와 ai-commit 명령어 설치 가이드. 워크플로우 자동화를 위한 실용적인 팁과 문제점 해결 방법을 다룹니다.

Slash Command

Slash Command는 Claude Code에서 **/**를 입력하면 사용 가능한 명령어 목록이 나타난다.

내가 생각한 워크플로 방법은 다음과 같았다.

  1. /jira-worktree <지라URL> <대상브랜치 없으면 현재 브랜치>
  2. 생성된 worktree 폴더로 이동
  3. pnpm i 로 패키지 설치
  4. code . 명령으로 VS Code 에디터 실행

그런데 몇 가지 문제점이 있었다.

  1. worktree 폴더가 상위로 생성되었을 때 Claude Code의 보안 제한으로 접근 불가: 현재 폴더에서 .worktrees 폴더를 생성하고 그 안에 worktree를 생성하는 방식으로 해결 가능
  2. 명령 실행 시 토큰을 소모한다. (비용 증가)
  3. 셸 스크립트 실행인데 실행 및 최종 완료되는 시간이 많이 소요된다. (오래 걸린다)

그래서 Slash Command를 사용하지 않고 bash 쉘로 작업이 가능한것은 Git Subcommand로 대부분을 변경했다.

하지만 AI를 사용해서 작업하는 게 더 편한 것은 Slash Command이기 때문에 Slash Command를 사용해서 작업하는 방법을 소개한다.

ai-commit

Git 커밋 메시지를 자동으로 생성하는 slash command이다. 현재 변경된 사항을 분석해서 메시지를 생성한다.

이를 설치하는 셸 스크립트를 작성해 달라고 했다. 등록하기 쉽고 삭제하기 쉬운 방법이 셸 스크립트라서 선택했다.

설치와 삭제 모두 지원하는 스크립트이며, 전역과 현재 프로젝트 내 설치 둘 다 지원한다.

셸 스크립트 실행 시 다음 위치에 생성되고 명령어 사용법은 다음과 같다.

사용 설명서

설치 위치

글로벌 설치 (추천)

  • 모든 프로젝트에서 사용 가능
  • 명령어: /ai-commit, /aic
  • 설치 위치: ~/.claude/commands/ai-commit.md

프로젝트 설치

  • 현재 프로젝트에서만 사용
  • 명령어: /ai-commit, /aic
  • 설치 위치: .claude/commands/ai-commit.md

동작 방식

변경사항 감지 → 스마트 그룹화 → 커밋 메시지 생성 → 순차 커밋

스크립트 실행

bash
$> bash ./ai_commit_manager_enhanced.sh

글로벌 명령어

bash
/ai-commit          # 기본 자동 분리 커밋
/aic               # 짧은 별칭 (추천)

프로젝트 명령어

bash
/ai-commit      # 프로젝트별 설정
/aic           # 짧은 별칭

옵션들

bash
/ai-commit                    # 기본 자동 분리 커밋
/ai-commit --push            # 커밋 후 자동 push
/ai-commit --dry-run         # 미리보기만 (커밋 안함)
/ai-commit --single          # 모든 변경사항을 하나로 통합
bash
/ai-commit --lang en         # 영문 커밋 메시지
/ai-commit --emoji           # 이모지 포함 (✨ feat, 🐛 fix 등)
bash
/ai-commit --push            # 가장 일반적인 사용법
/ai-commit --single --push   # 단일 커밋 후 push
/ai-commit --dry-run         # 테스트용 미리보기
/ai-commit --emoji --lang en # 영문 + 이모지

Dry-run 모드

code-highlight
⚡ AI Commit (Dry-run) - 커밋 시뮬레이션

📋 생성될 커밋 미리보기:

Commit 1: feat(dashboard): 대시보드 차트 컴포넌트 추가
Files: src/components/Chart.tsx, src/hooks/useChartData.ts

Commit 2: test(dashboard): 차트 컴포넌트 단위 테스트
Files: src/components/__tests__/Chart.test.tsx

💡 실제 커밋을 하려면 --dry-run 옵션을 제거하고 다시 실행하세요.

단일 커밋 모드

code-highlight
📦 모든 변경사항을 하나의 커밋으로 통합합니다...

✨ 생성된 커밋 메시지:
feat(auth): 사용자 인증 시스템 구현

- 로그인/로그아웃 기능 추가
- JWT 토큰 기반 인증 구현  
- 사용자 상태 관리 훅 개발
- API 엔드포인트 및 타입 정의
- 로그인 페이지 UI/UX 구현

이 메시지로 커밋하시겠습니까? (Y/n/e[dit]):

스마트 그룹화 규칙

파일 경로별 그룹화
code-highlight
components/Login.tsx + components/Button.tsx → UI 컴포넌트 그룹
api/auth.ts + types/user.ts → API 관련 그룹
utils/validation.ts → 유틸리티 그룹
기능별 그룹화
code-highlight
Login.tsx + Login.test.tsx → 로그인 기능 그룹  
UserProfile.tsx + useUserProfile.ts → 프로필 기능 그룹
변경 타입별 그룹화
code-highlight
새 파일들 → feat 그룹
버그 수정 → fix 그룹
테스트 파일 → test 그룹

커밋 타입 자동 결정

타입조건예시
feat새 기능, 컴포넌트, API새 로그인 페이지
fix버그 수정, 에러 처리try-catch 추가
refactor코드 구조 개선함수 분리
styleCSS, 스타일링버튼 스타일 수정
test테스트 코드단위 테스트 추가
docs문서, 주석README 업데이트
chore설정, 빌드package.json 수정

⚡ 효율적인 워크플로우

bash
# 개발 중
$> git add .
$> /ai-commit --dry-run        # 미리보기

# 확인 후 커밋
$> /ai-commit --push           # 커밋 + 푸시

# 급할 때
$> /ai-commit --single --push  # 단일 커밋 + 푸시

해당 스크립트는 여기에서 다운로드 가능하다.

해당 스크립트는 macOS에 최적화되어 있으므로 다른 OS에서는 Claude Code에게 최적화를 요청하면 된다.