AI에게 디자인을 맡기면 “글자 조금 더 크게, 아니 아까가 나았나” 같은 말로 몇 번씩 주고받게 됩니다. playground(플레이그라운드)는 Anthropic 공식 플러그인 목록에 있는 스킬입니다. 버튼과 슬라이더로 바꿔 보며 미리 보고, 고른 조합을 요청문으로 복사하는 HTML 파일을 만들어 줍니다. 카페 신메뉴 인스타그램 카드를 고르는 플레이그라운드를 같은 요청으로 스킬 없이 두 번, 스킬을 깔고 네 번 만들었습니다. 플러그인은 무료이고, 만들 때 Claude 사용량이 듭니다.
- 스킬이 없어도 Claude는 프리셋 5개, 바로 바뀌는 미리보기, 요청문 복사 버튼까지 갖춘 플레이그라운드를 두 번 다 만들었습니다.
- 스킬을 깔면 네 번 모두 어두운 화면, 인터넷 없이도 그대로 열리는 파일 하나, 첫 화면에 보이는 요청문으로 모양이 맞춰졌습니다. 채점 9개 중 6개 → 8개입니다.
- 한 번 만드는 데 2~3분, API 단가로 0.6~0.9달러어치였습니다. 복사한 요청문을 다시 넣으니 1분이 안 걸려 미리보기와 거의 같은 카드가 나왔습니다.
결과부터 보기: 같은 요청, 네 개의 플레이그라운드
네 파일에서 똑같이 프리셋 두 개를 차례로 누르고, 아래의 복사 버튼을 눌렀습니다.
네 개 모두 프리셋을 누르면 카드와 아래 요청문이 함께 바뀌었습니다. 눈에 띄는 차이는 화면 바탕과 요청문 위치입니다. 스킬 없음 1회차는 요청문 상자가 첫 화면 아래에 있어서, 복사하려면 스크롤을 내려야 했습니다.
직접 눌러 보기: 스킬 없음 1 · 스킬 없음 2 · 스킬 있음 1 · 스킬 있음 2 · 스킬 있음 3 · 스킬 있음 4
직접 실행 확인한 날짜 2026-10-15
- 실행 환경
- macOS 26.1 · Claude Code 2.1.299 · Opus 5.5 · 생각 깊이 중간 (일곱 번 모두 같은 설정)
- 설치 난이도
- 명령 한 줄. 스킬 파일만 들어 있고 따로 깔리는 프로그램 없음
- 비용
- 플러그인은 무료. 플레이그라운드 한 번에 API 단가로 0.6~0.9달러어치 사용량
- 라이선스
- Apache-2.0 (Anthropic 공식 플러그인 저장소)
따라 해 보기: 요청문과 실습 재료
빈 폴더에서 Claude Code를 열고 아래 요청을 붙여 넣으면 이번 실험과 같습니다. 메뉴 이름과 가격만 바꿔 쓰면 됩니다. Claude Code가 처음이라면 클로드 코드 설치 방법을 먼저 보세요. 실습 재료(zip)에는 요청문, 채점 기준, 이번에 만든 플레이그라운드 네 개(스킬 없음 2·있음 2)를 넣었습니다.
우리 동네 카페 신메뉴(유자 크림 라떼, 6,500원)를 인스타그램에 올릴 정사각형 소개 카드 디자인을 정하고 싶어. 배경색·글자 크기·모서리·배치 같은 걸 직접 바꿔 보면서 바로 미리 볼 수 있는 플레이그라운드를 만들어 줘. 마음에 드는 조합을 고르면 그걸 너에게 다시 요청할 수 있는 문장으로 복사할 수 있게 해 줘. 파일 하나로 card-playground.html 에 만들어 줘.좋은 답이라면 card-playground.html 하나가 생기고, 브라우저로 열었을 때 한쪽에 조절 장치, 다른 쪽에 정사각형 카드, 아래에 복사 버튼이 붙은 요청문이 보입니다.
1단계. 플러그인 깔기 (약 1분)
플러그인은 스킬·명령·자동 실행 규칙을 묶어 클로드 코드에 넣는 꾸러미입니다. playground 플러그인에는 스킬 하나와 템플릿 문서 여섯 개만 들어 있습니다. 스킬이 무엇인지는 클로드 스킬 글에 정리했습니다. 공식 플러그인 목록(claude-plugins-official)에 있어서 목록을 따로 추가하지 않아도 됩니다.
쓰려는 폴더에서 터미널에 아래 명령을 실행합니다. --scope local은 이 폴더에서만 켜는 옵션입니다.
claude plugin install playground@claude-plugins-official --scope local이렇게 나오면 성공 ✔ Successfully installed plugin: playground@claude-plugins-official (scope: local). 폴더 안 .claude/settings.local.json에 이 플러그인이 켜짐으로 적힙니다.
- 클로드 코드 대화창에서
/plugin install playground@claude-plugins-official를 입력하면 플러그인 정보 창이 열리고, 거기서 범위를 골라 깔 수 있습니다. 데스크톱 앱 Code 탭에서는 입력 칸 옆 + > Plugins > Add plugin입니다(공식 플러그인 문서 기준). --scope를 빼면 user 범위, 곧 내 컴퓨터의 모든 프로젝트에 켜집니다. 먼저 한 폴더에서 써 보려면 local로 까세요.
- 클로드 코드를 대화형으로 한 번도 켜지 않은 컴퓨터에서는 공식 목록이 아직 등록되지 않아 설치가 실패할 수 있습니다. 그때는
claude plugin marketplace add anthropics/claude-plugins-official를 먼저 실행합니다(공식 플러그인 문서 기준).
필요 없어지면 같은 폴더에서 아래 명령으로 지웁니다.
claude plugin uninstall playground@claude-plugins-official --scope local2단계. “플레이그라운드 만들어 줘”라고 요청하기 (약 3분)
따로 부를 명령은 없습니다. 요청에 “플레이그라운드”라는 말이 들어가면 Claude가 스킬을 꺼내 씁니다. 이번 네 번 모두 첫 동작이 스킬 호출이었습니다.
스킬은 플레이그라운드를 여섯 종류로 나눠 템플릿을 둡니다. 원문은 영어라 우리말로 옮겼습니다.
| 템플릿 | 이럴 때 | 예 |
|---|---|---|
| 디자인 | 색·글자·간격·배치처럼 눈으로 골라야 할 때 | 이번 카드, 버튼 모양, 홈페이지 첫 화면 |
| 데이터 탐색 | 조건을 바꿔 가며 질의를 만들 때 | SQL, API 요청, 정규식 |
| 개념 지도 | 배울 범위·모르는 부분을 정리할 때 | 공부할 주제 지도 |
| 문서 검토 | 제안을 하나씩 받아들이거나 뺄 때 | 계약서·기획서 수정 제안 |
| 코드 변경 검토 | 바뀐 줄마다 의견을 달 때 | git 변경 내역 검토 |
| 코드 구조 지도 | 부품 사이 관계를 그림으로 볼 때 | 프로젝트 구조도 |
스킬이 정한 규칙은 이렇습니다. 파일 하나에 다 넣고 외부 파일을 쓰지 않는다, 바꾸는 즉시 미리보기가 바뀐다, 요청문은 값 나열이 아니라 문장으로 쓴다, 이름 붙은 프리셋 3~5개, 어두운 화면. 마지막에는 open 명령으로 파일을 브라우저에 띄우라고 적혀 있습니다.
한 번 묻고 끝내는 방식(claude -p)으로 돌렸더니, 처음 두 번은 템플릿 문서를 읽으려다 권한 승인에서 막혔습니다. 템플릿이 작업 폴더 밖(~/.claude/plugins/cache/)에 있기 때문입니다. 두 번 다 스킬 본문만 보고 만들었습니다. 그래서 템플릿 읽기만 허락한 실행을 두 번 더 했습니다. 대화창에서 쓸 때는 이런 읽기를 Claude가 허락을 구하는 질문으로 띄우니 허락하면 됩니다(이번에는 대화창에서 돌려 보지 않았습니다).
Skill {"skill": "playground:playground"}
Read ~/.claude/plugins/cache/claude-plugins-official/playground/8f814f49002f/skills/playground/templates/design-playground.md
→ Claude requested permissions to read from ~/.claude/plugins/cache/…/templates/design-playground.md
Bash open <작업 폴더>/pg1/card-playground.html
→ This command requires approval
# 번역: 스킬 호출 → 디자인 템플릿 읽기는 권한 요청에서 멈춤 → 브라우저로 열기도 승인 필요여섯 번 모두 다 만든 뒤 브라우저 열기나 스크립트 문법 검사로 확인하려 했지만, 이번 실행 설정에서 허락하지 않은 명령이라 막혔습니다. Claude는 답에서 “직접 열어 보지는 못했다”고 밝혔습니다. 확인은 아래 3단계처럼 직접 열어서 하면 됩니다.
3단계. 고른 조합을 복사해서 Claude에게 다시 주기 (약 1분)
플레이그라운드의 쓸모는 마지막 한 걸음에 있습니다. 파일을 더블클릭해 브라우저로 열고, 프리셋과 슬라이더로 고른 뒤 복사하기를 누릅니다. 복사된 요청문을 Claude에게 그대로 붙여 넣으면 진짜 카드를 만들어 줍니다.
스킬 있음 1회차를 처음 연 상태 그대로 복사해, 스킬 없는 새 폴더에서 “결과는 card.html 파일 하나로 만들어 줘” 한 줄만 붙여 보냈습니다.
1분이 안 걸려 배치·색·문구가 거의 같은 카드가 나왔고, 사용량은 0.34달러어치였습니다. 복사된 요청문에 카드 크기, 색 코드, 글자 크기, 문구 순서까지 들어 있어서 다시 설명할 것이 없었습니다.
카드 문구 중 한 줄 소개(“상큼한 유자 위에 부드러운 크림 한 스푼”)와 카페 이름은 요청에 없던 것을 Claude가 지어 넣은 것입니다. 스킬 있음 4회차는 “고흥 유자청”처럼 요청에 없던 산지까지 적었으니, 올리기 전에 문구 칸을 꼭 확인하세요.
스킬 없이·있이 채점 결과
채점 기준은 실행 전에 스킬 문서의 “모든 플레이그라운드가 지킬 것”에서 9개를 뽑아 고정했습니다. 요청문에는 넣지 않았습니다. 완성된 파일은 브라우저에서 열어 슬라이더를 움직이고 복사 버튼을 눌러 확인했습니다.
| 검사 항목 | 스킬 없음 (1·2) | 스킬 있음, 템플릿 못 읽음 (1·2) | 스킬 있음, 템플릿 읽음 (3·4) |
|---|---|---|---|
| 파일 하나, 외부 파일 없음 | ❌ ❌ (구글 글꼴을 인터넷에서 불러옴) | ✅ ✅ | ✅ ✅ |
| 바꾸면 미리보기가 바로 바뀜 | ✅ ✅ | ✅ ✅ | ✅ ✅ |
| 요청문이 무엇을 만들지 설명하는 문장으로 시작함 | ✅ ✅ | ✅ ✅ | ✅ ✅ |
| 기본값에서 바꾼 것만 요청문에 적음 | ❌ ❌ | ❌ ❌ | ❌ ❌ |
| 바꿀 때마다 요청문도 바뀜 | ✅ ✅ | ✅ ✅ | ✅ ✅ |
| 복사 버튼 + “복사됨” 표시 | ✅ ✅ | ✅ ✅ | ✅ ✅ |
| 이름 붙은 프리셋 3~5개 | ✅ ✅ (5개씩) | ✅ ✅ (5개씩) | ✅ ✅ (5개씩) |
| 어두운 화면 | ❌ ❌ | ✅ ✅ | ✅ ✅ |
| 첫 화면 정상, 오류 없음 | ✅ ✅ | ✅ ✅ | ✅ ✅ |
| 합계(9개 중) | 6 · 6 | 8 · 8 | 8 · 8 |
| 요청문이 첫 화면에 보임 | 아래로 스크롤 · 보임 | 보임 · 보임 | 보임 · 보임 |
| 걸린 시간 | 2분 · 2분 | 2분 반 남짓 · 2분 남짓 | 3분 · 2분 반 |
| 사용량(API 단가) | 0.62 · 0.65달러 | 0.78 · 0.71달러 | 0.91 · 0.73달러 |
요청문 형식은 여섯 번 모두 “무엇을 만들어 줘” 첫 문장 아래에 항목 목록이 붙는 꼴이었습니다. “기본값에서 바꾼 것만 적기”는 여섯 번 모두 지키지 않았습니다. 대신 매번 카드 크기·문구·색·글자 크기를 전부 적었습니다. 새 대화에서 처음부터 카드를 만들게 하려면 전부 적는 편이 오히려 쓸모가 있었습니다. 3단계에서 다시 만든 카드가 그 예입니다.
템플릿을 읽은 두 번과 못 읽은 두 번은 채점 결과가 같았습니다. 프리셋 이름과 조절 장치 수가 조금 달랐을 뿐, 화면 구성은 비슷했습니다. 이번 과제에서는 스킬 본문의 규칙만으로도 모양이 거의 정해졌습니다.
이런 사람에게 권합니다
- ✅ 디자인·설정을 말로 주고받다 지치는 사람. 이 형식 자체는 스킬이 없어도 “플레이그라운드 만들어 줘, 고른 걸 요청문으로 복사하게” 한 줄로 얻을 수 있었습니다.
- ✅ 플레이그라운드를 자주 만들고 늘 같은 모양을 원하는 사람. 스킬을 깔면 네 번 모두 어두운 화면, 외부 파일 없는 파일 하나, 첫 화면 요청문으로 맞춰졌습니다.
- ❌ 한두 번만 만들어 볼 사람. 스킬 없이도 프리셋·미리보기·복사가 다 들어갔고, 사용량은 스킬 쪽(0.71~0.91달러어치)이 스킬 없음(0.62~0.65달러어치)보다 조금 더 나왔습니다.
한계와 주의할 점
- 디자인 템플릿 하나(카페 카드)로만 시험했습니다. 데이터 탐색·문서 검토처럼 다른 템플릿에서는 스킬의 차이가 더 클 수도, 작을 수도 있습니다.
- Opus 5.5로만 해 봤습니다. 더 가벼운 모델에서 스킬이 얼마나 더 도움이 되는지는 확인하지 않았습니다.
- 조건마다 두 번씩만 돌렸습니다. 시간·사용량 차이는 참고용입니다.
- 스킬은 어두운 화면을 기본으로 정해 둡니다. 밝은 화면이 편하면 요청에 따로 적어야 합니다.
- 만들어진 플레이그라운드는 컴퓨터 화면에서 쓰기 좋게 나왔습니다. 휴대폰 폭(390px)에서 가로로 넘치지는 않았습니다.
대안
| 방법 | 다른 점 | 이럴 때 고르세요 |
|---|---|---|
| playground 스킬(이 글) | 조절 → 미리보기 → 요청문 복사 형식을 늘 같은 모양으로 만듦 | 설정·디자인을 자주 눈으로 골라야 할 때 |
| 요청문에 형식을 직접 적기 | 스킬 없이 “플레이그라운드, 프리셋, 복사 버튼”을 말로 요청. 이번에 6/9 | 한두 번만 필요할 때 |
| 디자인 스킬(frontend-design 등) | 고르는 도구가 아니라 완성 화면의 디자인 수준을 높임 | 바로 쓸 홈페이지·화면을 만들 때 |
자주 묻는 질문
playground 플러그인은 무료인가요?
플러그인 자체는 무료(Apache-2.0)입니다. 플레이그라운드를 만들 때 Claude 사용량이 들고, 구독 요금제라면 사용 한도에서 빠집니다. 이번 사용량은 위 채점 표에 적었습니다.
인터넷이 없어도 열리나요?
스킬로 만든 네 파일은 바깥 파일을 하나도 불러오지 않아 그대로 열립니다. 스킬 없이 만든 두 파일은 구글 글꼴을 인터넷에서 불러오도록 되어 있어, 연결이 없으면 컴퓨터에 있는 다른 글꼴로 보입니다.
스킬을 깔았는데 쓰이지 않아요
요청에 “플레이그라운드”라는 말을 넣어 보세요. 스킬 설명에 플레이그라운드·탐색기·인터랙티브 도구를 만들어 달라고 할 때 쓰라고 적혀 있고, 이번 네 번은 이 말이 들어간 요청에서 모두 스킬이 먼저 불렸습니다. 공식 문서에 따르면 플러그인 스킬은 대화창에서 /playground:playground처럼 /플러그인:스킬 형식으로도 부를 수 있습니다.
다른 일에도 쓸 수 있나요?
2단계 표의 여섯 종류가 스킬에 들어 있는 템플릿입니다. 이번에는 디자인 템플릿만 써 봤습니다. 예를 들어 “엑셀에서 뽑은 판매 자료를 조건별로 걸러 보는 플레이그라운드를 만들어 줘”처럼 요청할 때는 데이터 탐색 템플릿(조건을 바꿔 가며 질의를 만드는 용도)이 맞는 쪽입니다(스킬 문서 기준).
퀴즈
스킬 없이 “플레이그라운드를 만들어 줘, 고른 조합을 요청문으로 복사하게 해 줘”라고만 요청했을 때 이번 실험에서 나온 것은?
❌ 조절 장치 없이 카드 그림 한 장만 만들었다
✅ 프리셋 5개, 바로 바뀌는 미리보기, 복사 버튼까지 갖춘 플레이그라운드를 두 번 다 만들었다
출처
playground 플러그인 README·SKILL.md, anthropics/claude-plugins-official 저장소, 클로드 코드 플러그인 문서 (모두 2026-10-15 확인, 저장소 별 38,200개)