개발자
류준열

AI 이용법

AI 강의를 들은지 약 2주가 되었고 업무 생산성이 눈에 띄게 향상되었다.

마치 막 걸음마를 떼고 세상구경하는 신나는 아이같달까..

하지만 여전히 사람이 필요하고, 어떻게 하면 AI가 찰떡같이 알아듣도록 지시를 할 수 있을지 공부를 하게 된다.

CLAUDE.md 작성

Claude가 프로젝트를 이해하는 "헌법"

• 작업별 참조 문서 매핑: 문서 모듈화로 컨텍스트 효율화 (대화 길어지면 AI 기억력 흐려짐)

Hooks

규칙 부여

{
  "hooks": {
    "SessionStart": [
      {
        "hooks": [
          {
            "type": "command",
            "command": "pnpm install && echo '✅ 의존성 설치 완료'",
            "timeout": 300
          }
        ]
      }
    ],
    "PreToolUse": [
      {
        "matcher": "Edit|Write|Create",
        "hooks": [
          {
            "type": "command",
            "command": "bash .claude/hooks/security-check.sh"
          }
        ]
      }
    ]
  }
}

SessionStart

세션 시작할때 자동 실행

• pnpm install && echo '✅ 의존성 설치 완료'

PreToolUse

파일 편집 전 실행

• 민감정보 접근 금지

  • security-check.sh

    #!/bin/bash
    # .claude/hooks/security-check.sh
    
    INPUT=$(cat)
    FILE_PATH=$(echo "$INPUT" | grep -o '"file_path":"[^"]*' | sed 's/"file_path":"//')
    
    PATTERNS=(
        "환경변수명" 
        "민감정보"
        "보안토큰"
        "비밀번호"
        "API_KEY"
        "apiKey"
        "ApiKey"
        "secret"
    )
    
    for pattern in "${PATTERNS[@]}"; do
        if echo "$CLAUDE_TOOL_INPUT" | grep -i -E -q "$pattern"; then
            echo "⚠️ 보안 경고: 민감 정보가 감지되었습니다!" >&2
            exit 2 # 작업 차단
        fi
    done
    
    exit 0 # 통과
    

  

Skills

description에 해당하는 상황을 스스로 감지하고 md에 입력된 프롬프트 실행

사용중인 Skills

• perf-optimizer: LCP, 이미지 최적화 등 분석
• markup-guidelines: SSR, CLS 방지등 웹표준에 맞는 마크업 검토
• dev-scan: raddit, dev.to등 커뮤니티에서 기술 의견 수집
• code-review: 코드리뷰

Agents

독립된 컨텍스트로 역할 분담 (컨텍스트가 길어지면 AI 기억력이 흐려짐)

feature-builder.md

역할: 엘리트 next.js 개발자
작업: 기능 구현

feature-reviewer.md

역할: 10년 이상 경험많은 프론트 시니어 개발자
작업: nextjs-feature-builder.md가 구현한 내용을 리뷰

Commands

자주 쓰이는 작업 커맨드화

pr-review

skills/code-reivew/skill.md 를 읽고 코드리뷰 하는 명령어

/pr-reivew {github pr url}

make-view-model

뷰와 로직을 분리하는 리팩토링 패턴 등록

/make-view-model {코드 복붙}

organize_hygraph_page

특정 페이지의 하이그래프 연결구조 정리

/organize_hygraph_page /

작업 방식

1. plan 모드로 전환

• plan 모드로 전환 (참고자료)

2. 클로드코드와 인터뷰

• 맥락, 요구사항 정리 후 애매한 부분 있으면 물어보라고 하기, AskUserQuestionTool 사용하라고 명시 (참고자료)

• AskUserQuestionTool 을 사용하면 클로드코드가 나를 인터뷰해서 스펙을 꼼꼼히 작성하는데 도움을 줌

3. Plan 검토 후 서브에이전트 호출하여 작업

• AI의 Plan을 직접 검토 한 후, 문제가 없으면 작업 시작 (복잡한 작업은 서브에이전트 호출하라고 명시)

  1. nextjs-feature-builder가 기능 구현

     

  2. next-feature-reviewer 가 리뷰

  

  3. nextjs-feature-builder가 리뷰내용을 반영

     

  4. nextjs-feature-reviewer가 최종 확인

     

4. 마무리

• 작업이 끝나면 /session-wrap 실행 (출처)

  • session-wrap: 5개의 독립된 에이전트가 직전 세션에서 유의미했던 내용들을 추출해서 자동화 할 수 있는 작업, 교훈과 실수, 우선순위 높은 후속작업 등 정리

    

5. /pr-review {github pr url}

• pr 만들고 바로 클로드코드에게 코드리뷰 요청