클로드의 응답 스타일을 설정하는 명령어.
참고) 공식문서: https://code.claude.com/docs/ko/output-styles
/config output-style
- /config 슬래시 명령어
- Output style 로 이동 후 [space] 버튼 누르면 아래와 같이 3가지 옵션이 보인다!
- Default : 작업을 효율적으로 완료
- Explanatory : 작업에 대한 설명을 해줌. 교육용 인사이트 제공.
- Learning : "협업" 방식 학습 모드. 인사이트 공유 뿐만 아니라 사용자가 작성할 수 있도록 TODO 생성해줌.
나만의 스타일 만들기
- 전역 적용 : ~/.claude/output-styles
- 특정 프로젝트 적용: .claude/output-styles
- 생성 후 클로드 재실행 해야 적용된다!
.claude/output-styles/beginner.md 생성
---
name: For Beginner
description: 초보자를 위한 output style
keep-coding-instructions: true <-- !! Claude Code의 시스템 프롬프트의 코딩 관련 부분을 유지할지 여부 true로 설정해주기!!
---
# For Beginner Style
당신은 프로그래밍을 배우는 초보자를 돕는 친절한 선생님입니다.
## 주요 행동 방식
- 코드를 한 줄씩 자세히 설명하고, 왜 이렇게 하는지 이유를 함께 알려주세요.
- 예제 코드에는 한글 주석을 충분히 달아주세요.
- 어려운 프로그래밍 용어는 쉽게 풀어서 설명하세요.
- 비유를 많이 사용하여 이해하기 쉽게 설명하세요.
- HTML 구조를 먼저 설명한 후 Javascript 로직을 설명하세요.
---
name: Advanced Developer
description: 숙련된 개발자를 위한 효율적인 스타일
keep-coding-instructions: true
---
# Advanced Developer Style
당신은 숙련된 개발자를 위한 효율적인 파트너입니다.
## 주요 행동 방식
- 간결하고 효율적인 코드를 작성하세요
- 트레이드오프와 성능 고려사항을 간단히 설명하세요
- 불필요한 설명은 최소화하고, 핵심 아키텍처 결정 사항만 언급하세요
- 중요한 기술적 선택에 대한 근거를 명확히 제시하세요
- CSS 스타일링 부분도 각 속성의 역할을 설명하세요
- 코드 작성 전에 전체 구조를 먼저 개요로 알려주세요
- 복잡한 로직은 단계별로 나누어 설명하세요Explanatory 스타일 테스트
- 프롬프트: 간단한 TODO 리스트 HTML을 만들어줘.
- output
⏺ 간단한 TODO 리스트 HTML을 만들어드리겠습니다.
⏺ Write(todo.html)
⎿ Wrote 242 lines to todo.html
1 <!DOCTYPE html>
2 <html lang="ko">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>TODO 리스트</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
… +232 lines (ctrl+o to expand)
⏺ 완료했습니다! todo.html 파일이 생성되었습니다.
★ Insight ─────────────────────────────────────
주요 기능:
1. 로컬 스토리지 활용 — 새로고침해도 데이터가 유지되도록 localStorage API 사용
2. JavaScript 이벤트 처리 — 체크박스/버튼 클릭으로 상태 변경, Enter 키로 빠른 추가
3. 반응형 디자인 — 그래디언트 배경과 부드러운 애니메이션으로 현대적인 UI 구현
사용 방법:
- 파일을 브라우저에서 열면 바로 사용 가능합니다
- 할 일을 입력하고 "추가" 버튼을 클릭하거나 Enter 키를 누르면 됩니다
- 체크박스로 완료 표시, "삭제" 버튼으로 항목 제거
- 데이터는 브라우저에 자동 저장됩니다
─────────────────────────────────────────────────Learning 스타일 테스트
- 프롬프트: 간단한 계산기 HTML을 만들어줘.
- Output
⏺ 간단한 계산기 HTML을 만들어드리겠습니다.
⏺ Write(calculator.html)
⎿ Wrote 242 lines to calculator.html
1 <!DOCTYPE html>
2 <html lang="ko">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>계산기</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
… +232 lines (ctrl+o to expand)
⏺ 완료했습니다! calculator.html 파일이 생성되었습니다.
★ Insight ─────────────────────────────────────
핵심 설계 결정:
1. 상태 관리 — currentValue, previousValue, operator 변수로 계산 흐름을 추적합니다. shouldResetDisplay 플래그로 다음 입력 시 표시를 초기화할지 결정하는데, 이는 연속 연산(예: 5 + 3 * 2)을 정확히 처리하기 위함입니다.
2. 연산자 처리 — 새 연산자를 누르면 이전 계산을 즉시 수행(appendOperator에서 calculate() 호출)합니다. 이렇게 하면 5 + 3 − 입력 시 먼저 8을 표시한 후 빼기로 전환되어, 사용자 기대와 부합합니다.
3. 키보드 지원 — keydown 이벤트리스너로 숫자/연산자 입력을 받고, Enter로 계산, Escape로 초기화합니다. 특히 /와 *는 preventDefault()로 기본 동작을 막아 페이지 검색이나 확대를 방지합니다.
사용 방법:
- 마우스 클릭 또는 키보드(숫자, +−×÷, Enter, Escape) 모두 지원
- 소수점 계산 가능
- +/− 버튼으로 부호 전환
- C 버튼 또는 Escape로 초기화
───────────────────────────────────────────────── 의견) Explanatory와 Learning의 차이가 별로 없다...?
매일매일 삽질중인, 열심히 땅을 파고있는 개발자