류준열의 기술 블로그 | AI 이용 2주차 응애

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 가 리뷰
1. nextjs-feature-builder가 리뷰내용을 반영
2. nextjs-feature-reviewer가 최종 확인