홈페이지나 예약 페이지를 클로드에게 만들게 하면 겉모습은 그럴듯합니다. 그런데 흐린 글씨, 키보드로 누를 수 없는 버튼, 이름표 없는 입력 칸 같은 접근성 문제가 그대로 남기 쉽습니다. Design(디자인)은 Anthropic이 만든 지식 업무용 플러그인으로, 접근성 점검·디자인 비평·UX 문구·개발 인계 같은 디자인 일을 스킬 7개로 묶었습니다. Claude 앱 디렉터리의 “가장 많이 설치된” 목록에 올라 있습니다(2026-10-15 앱 화면 기준 약 270만 설치). 문제를 일부러 심은 공방 예약 페이지를 플러그인 없이, 깔아 두기만 하고, 명령으로 불러서 각각 두 번씩 고치게 한 뒤 숨은 검사 11개로 채점했습니다.
- 플러그인 없이 “접근성 점검하고 고쳐 줘”라고만 해도 클로드는 키보드·대비·이름표 문제를 대부분 고쳤습니다(숨은 검사 11개 중 9·10개).
- 플러그인을 깔아 두기만 하고 같은 문장을 보냈을 때는 두 번 다 접근성 스킬이 불리지 않았고 결과도 플러그인 없을 때와 비슷했습니다(10·10개).
/design:accessibility-review명령으로 부르면 두 번 다 11개를 모두 통과했고, WCAG 기준 번호와 심각도가 붙은 점검표가 함께 나왔습니다. 대신 사용량이 조금 더 들었습니다(0.6달러 안팎 대 0.7~0.9달러).
결과부터 보기: 같은 예약 페이지를 키보드로만 눌러 보기
왼쪽은 고치기 전 원본, 가운데는 플러그인 없이 고친 결과, 오른쪽은 명령으로 부른 결과입니다. Tab 키로 한 칸씩 옮기다가 빈 칸 그대로 Enter를 누릅니다. 원본은 초점 테두리가 보이지 않고, 예약하기 버튼에 닿지 않아 아무 일도 일어나지 않습니다.
직접 눌러 보기: 세 페이지 나란히 보기(화면을 한 번 누른 뒤 Tab 키로 이동)
직접 실행 확인한 날짜 2026-10-16
- 실행 환경
- macOS 26.1 · Claude Code 2.1.299 · Opus 5.5 · 생각 깊이 중간 (일곱 번 모두 같은 설정)
- 설치 난이도
- 명령 한 줄. 안에 든 것은 스킬 문서 7개와 외부 서비스 연결 설정 9개(스크립트 없음)
- 비용
- 플러그인은 무료. 명령으로 부른 점검·수정 한 번에 API 단가로 0.7~0.9달러어치 사용량
- 라이선스
- Apache-2.0 (anthropics/knowledge-work-plugins)
따라 해 보기: 요청문과 실습 재료
점검할 HTML 파일이 있는 폴더에서 클로드 코드를 열고, 플러그인을 깐 뒤 아래처럼 보내면 이번 실험과 같습니다. 클로드 코드가 처음이라면 클로드 코드 설치 방법을 먼저 보세요. 실습 재료(zip)에는 문제를 심은 예약 페이지 원본, 요청문, 채점 기준, 숨은 검사 스크립트를 넣었습니다.
/design:accessibility-review index.html
이 폴더의 index.html은 우리 도자기 공방의 원데이 클래스 예약 페이지입니다. 눈이 잘 안 보이는 분, 마우스 없이 키보드만 쓰는 분도 예약할 수 있는지 접근성을 점검하고, 찾은 문제를 직접 고쳐 주세요(index.html, style.css 수정). 디자인 분위기는 유지해 주세요. 마지막에 무엇을 고쳤는지 한국어로 정리해 주세요.좋은 결과라면 답 첫머리에 “WCAG 2.1 AA” 기준과 찾은 문제 수가 나오고, 문제마다 기준 번호(예: 2.1.1 키보드)·심각도·고친 내용이 표로 정리됩니다. 파일을 연 뒤 Tab 키만으로 모든 칸과 예약 버튼에 갈 수 있어야 합니다.
Design 플러그인에 들어 있는 것
플러그인은 스킬·명령·외부 연결을 묶어 클로드 코드에 넣는 꾸러미입니다(스킬은 클로드 스킬 글 참고). claude plugin details로 뽑은 1.2.0의 구성은 스킬 7개와 외부 서비스 연결(MCP 서버) 9개입니다. 명령·에이전트·훅은 없습니다. 스킬은 대화창에서 /design:스킬이름으로 바로 부를 수 있습니다.
| 스킬 (부르는 명령) | 하는 일 | 이번에 써 봤나 |
|---|---|---|
/design:accessibility-review | WCAG 2.1 AA 기준 접근성 점검. 대비·키보드·이름표·터치 영역을 보고 문제·기준 번호·심각도 표와 고칠 순서를 냄 | ✅ 두 번(아래 비교) |
/design:ux-copy | 버튼·오류 메시지·빈 화면·안내 문구를 쓰거나 검토 | ✅ 한 번(아래) |
/design:design-critique | 화면 시안의 사용성·시각적 위계·일관성 비평 | 공식 설명 기준 |
/design:design-handoff | 개발자에게 넘길 사양서(레이아웃·디자인 토큰·상태·반응형·예외 상황) | 공식 설명 기준 |
/design:design-system | 디자인 시스템 점검·문서화·확장(이름 불일치, 하드코딩된 값 찾기) | 공식 설명 기준 |
/design:research-synthesis | 인터뷰·설문·사용성 테스트 기록을 주제·인사이트·다음 할 일로 정리 | 공식 설명 기준 |
/design:user-research | 사용자 조사 계획, 인터뷰 질문지, 설문 설계 | 공식 설명 기준 |
MCP 서버 9개는 슬랙·피그마·리니어·아사나·아틀라시안·노션·인터컴·구글 캘린더·지메일 주소입니다. 각 서비스에 로그인해야 쓸 수 있고, 이번에는 로그인하지 않아 하나도 쓰이지 않았습니다. 연결하지 않아도 스킬은 동작합니다. README에 적힌 /critique·/accessibility 같은 짧은 명령은 이번 버전의 구성 목록에 명령으로 들어 있지 않았습니다. 같은 일을 스킬 이름으로 부르면 됩니다.
1단계. 플러그인 깔기 (약 1분)
쓰려는 프로젝트 폴더에서 터미널에 아래 명령을 실행합니다. 첫 줄은 Anthropic의 지식 업무 플러그인 저장소를 등록하는 명령이고, 이미 등록돼 있으면 건너뛰어도 됩니다. --scope local은 이 폴더에서만 켜는 옵션입니다.
claude plugin marketplace add anthropics/knowledge-work-plugins
claude plugin install design@knowledge-work-plugins --scope local
claude plugin details design@knowledge-work-plugins
이렇게 나오면 성공 ✔ Successfully installed plugin: design@knowledge-work-plugins (scope: local)(플러그인 설치 성공, 범위: 이 폴더). 구성 목록의 Always-on: ~619 tok은 스킬 설명이 대화마다 약 619토큰씩 붙는다는 뜻입니다. 스킬 본문은 부를 때만 붙고, 접근성 점검은 약 1,500토큰입니다.
- 설치 명령이 플러그인을 찾지 못하면 첫 줄의 저장소 등록 명령을 먼저 실행합니다.
- README에 따르면 이 플러그인은 Cowork(코워크) 데스크톱 앱용으로 먼저 만들었고 클로드 코드에서도 동작합니다. 이 글은 클로드 코드 터미널 기준입니다.
필요 없어지면 같은 폴더에서 아래 명령으로 지웁니다.
claude plugin uninstall design@knowledge-work-plugins --scope local2단계. 명령으로 불러 점검하기 (약 3분)
명령 뒤에 점검할 파일이나 주소를 쓰고, 줄을 바꿔 원하는 일을 적습니다. 스킬 본문에는 점검할 WCAG 기준 표, 흔한 문제 8가지, 점검 순서(자동 검사 → 키보드만으로 이동 → 스크린리더 → 대비 → 200% 확대), 결과 양식이 들어 있습니다. 명령으로 부르면 이 내용이 대화에 그대로 들어갑니다.
명령으로 부른 첫 번째 실행의 답 머리 부분입니다(출력에서 일부 줄임).
## 접근성 점검: 달빛 공방 원데이 클래스 예약 페이지
**기준:** WCAG 2.1 AA | **날짜:** 2026-10-16
**찾은 문제:** 17건 (치명 5 · 주요 8 · 경미 4), 모두 수정함
| # | 문제 | WCAG | 심각도 | 수정 |
| 1 | "예약하기"가 div라서 키보드로 누를 수 없었음. … | 2.1.1 | 🔴 치명 | 진짜 <button type="submit">으로 바꿈 … |
| 2 | 문자 알림 스위치도 div라서 키보드로 켤 수 없고 … | 2.1.1, 4.1.2 | 🔴 치명 | 실제 체크박스(role="switch")에 … |같은 요청, 세 가지 조건 비교
채점 기준은 실행 전에 접근성 스킬의 WCAG 표와 흔한 문제 목록에서 뽑아 고정했고, 요청문에는 넣지 않았습니다. 결과 페이지를 브라우저로 열어 휴대폰 폭에서 Tab 키로 이동하고, 빈 칸으로 제출하고, 글자 대비를 계산하는 검사 스크립트로 채점했습니다. 원본은 11개 중 1개(예약 기능)만 통과합니다.
| 검사 (WCAG 번호) | ① 플러그인 없음 (1·2) | ② 깔아 두기만 (1·2) | ③ 명령으로 부름 (1·2) |
|---|---|---|---|
| 대표 이미지·로고 대체 텍스트 (1.1.1) | ❌ ✅ | ✅ ✅ | ✅ ✅ |
| 입력 칸 이름표 (3.3.2) | ✅ ✅ | ✅ ✅ | ✅ ✅ |
| 글자 대비 4.5:1 (1.4.3) | ✅ ✅ | ✅ ✅ | ✅ ✅ |
| 키보드로 예약 (2.1.1) | ✅ ✅ | ✅ ✅ | ✅ ✅ |
| 초점 테두리 보임 (2.4.7) | ✅ ✅ | ✅ ✅ | ✅ ✅ |
| 아이콘 버튼 44×44 (2.5.5) | ❌ ❌ | ❌ ❌ | ✅ ✅ |
| 오류를 글자로 알림 (3.3.1) | ✅ ✅ | ✅ ✅ | ✅ ✅ |
| 알림 스위치 역할·상태 (4.1.2) | ✅ ✅ | ✅ ✅ | ✅ ✅ |
| 아이콘 링크 이름 (4.1.2) | ✅ ✅ | ✅ ✅ | ✅ ✅ |
| 언어·본문 영역·제목 (1.3.1) | ✅ ✅ | ✅ ✅ | ✅ ✅ |
| 예약 기능 그대로 | ✅ ✅ | ✅ ✅ | ✅ ✅ |
| 합계(11개 중) | 9 · 10 | 10 · 10 | 11 · 11 |
| 답에 WCAG 번호·심각도 표 | 없음 · 없음 | 없음 · 없음 | 있음 · 있음(둘 다 17건) |
| 걸린 시간 | 2분 가까이 · 1분 반쯤 | 2분 남짓 · 2분쯤 | 2분 반쯤 (둘 다) |
| 사용량(API 단가) | 0.62 · 0.58달러 | 0.73 · 0.65달러 | 0.73 · 0.86달러 |
①의 첫 번째 실행은 대표 이미지를 “장식용”으로 보고 대체 텍스트를 비워 두었습니다. 잘못된 판단은 아니지만, 수업 결과물을 보여 주는 그림이라 이번 채점에서는 설명을 붙이는 쪽을 기준으로 삼았습니다.
가장 큰 차이는 아이콘 버튼 크기입니다. ①과 ②는 네 번 모두 전화·인스타 버튼을 28px에서 40px로 키웠고, ③은 두 번 다 스킬 표에 적힌 44px로 맞췄습니다. 다만 W3C 원문에서 44px 기준(2.5.5)은 AA보다 한 단계 높은 AAA 등급입니다. 최신판 WCAG 2.2의 AA 기준(2.5.8)은 24px이라, 40px도 AA는 넘습니다. 스킬 표는 이 항목을 AA 목록에 넣어 두었습니다.
②가 ①과 비슷했던 이유는 스킬이 불리지 않았기 때문입니다. 두 실행 모두 시작할 때 스킬 목록에 design:accessibility-review가 올라와 있었지만, 클로드는 스킬을 부르지 않고 바로 파일을 고쳤습니다. 세션 기록에도 스킬 본문이 들어가지 않았습니다. 스킬 설명의 부르는 말이 “audit accessibility”, “is this accessible?” 같은 영어 문장이라 한국어 요청과 덜 맞았을 수 있습니다.
③의 두 번째 실행은 바닥글의 “화~일 영업”을 보고 월요일을 고르면 “월요일은 휴무입니다” 오류를 내는 검사까지 넣었습니다. 요청하지 않은 기능이라, 실제로 쓸 때는 바뀐 동작이 맞는지 확인해야 합니다.
ux-copy로 문구 검토 받기 (1분 안쪽)
같은 원본 페이지에 /design:ux-copy를 한 번 걸어, 파일은 고치지 말고 바꿀 문구만 표로 달라고 했습니다. 1분이 안 걸렸고 0.29달러어치를 썼습니다.
/design:ux-copy 이 폴더의 index.html(도자기 공방 원데이 클래스 예약 페이지)에 있는 버튼·안내·오류 문구를 검토해 주세요. 파일은 고치지 말고 바꿀 문구만 표로 제안해 주세요. 답은 한국어로.답에는 줄 번호가 붙은 제안 20줄과 성공 메시지 말투 3가지가 나왔습니다. 그중 세 줄입니다(출력에서 일부 줄임).
| 현재 문구 | 제안 문구 | 이유(요약) |
|---|---|---|
| (없음, 빨간 테두리만) | 이름을 입력해 주세요. | 색만으로는 무엇을 고칠지 모름 |
| 예약하기 | 예약 신청하기 | 카드 제목 “예약 신청”과 같은 말로 맞춤 |
| 물레 체험부터 유약 바르기까지, 2시간이면 나만의 컵 하나가 완성됩니다. | … 2시간 동안 나만의 컵을 만들어요. 완성품은 가마에 구운 뒤 약 3주 후 받을 수 있어요. (실제 기간으로 수정) | 당일에 가져가는 줄 오해할 수 있음 |
가격·완성품 받는 시기처럼 페이지에 빠진 정보까지 짚었습니다. “약 3주”처럼 공방 사정을 모르는 숫자에는 “(실제 기간으로 수정)”을 붙여 두었으니, 그대로 붙이지 말고 실제 값으로 바꿔 씁니다.
이런 사람에게 권합니다
- ✅ 만든 페이지를 WCAG 기준 번호가 붙은 점검표로 정리해 고객이나 팀에 넘겨야 하는 사람. 명령 한 줄로 기준·심각도·고칠 순서가 같은 양식으로 나옵니다.
- ✅ 버튼·오류 문구를 자주 다듬는 1인 사업자나 기획자.
/design:ux-copy가 위치별 제안과 이유를 표로 줍니다. - ❌ 깔아 두면 알아서 접근성을 챙겨 줄 거라 기대하는 사람. 이번에는 명령으로 부르지 않으면 두 번 다 쓰이지 않았습니다.
- ❌ 고치는 결과만 필요한 사람. “접근성 점검하고 고쳐 줘”만으로도 11개 중 9~10개를 고쳤습니다.
한계와 주의할 점
- 작은 예약 페이지 하나로 조건마다 두 번씩만 돌렸습니다. ux-copy는 한 번만 써 봤고, 나머지 스킬 5개는 써 보지 않았습니다.
- 실행 중 크롬을 띄우는 명령은 이번 실험에서 허용하지 않았습니다. 그래서 몇몇 실행은 브라우저로 확인하지 못하고 코드 검사와 대비 계산까지만 했다고 답했습니다. 직접 쓸 때 브라우저 확인까지 맡기려면 그 명령을 허용해야 합니다.
- 숨은 검사는 자동으로 잴 수 있는 항목만 봅니다. 스킬도 자동 검사로는 문제의 약 30%만 잡힌다고 적고, 스크린리더(맥의 VoiceOver, 윈도우의 NVDA)로 직접 들어 보라고 권합니다.
- 피그마·슬랙 같은 연결은 각 서비스에 로그인해야 쓸 수 있습니다. 이번에는 연결하지 않았습니다.
대안
| 방법 | 다른 점 | 이럴 때 고르세요 |
|---|---|---|
| Design 플러그인(이 글) | 접근성·문구·사양서 등 디자인 일 7가지를 정해진 양식으로 | 점검 결과를 문서로 남기고 넘길 때 |
| 플러그인 없이 “접근성 점검하고 고쳐 줘” | 고치는 결과는 비슷, 점검표 양식은 없음 | 빨리 고치기만 하면 될 때 |
| frontend-design 등 디자인 스킬 | 처음 만들 때 화면을 더 보기 좋게 | 새 페이지를 만들 때 |
| playground 플러그인 | 조절 막대로 디자인 값을 바꿔 보는 페이지를 만듦 | 색·글꼴을 눈으로 고를 때 |
자주 묻는 질문
Design 플러그인은 무료인가요?
플러그인 자체는 무료(Apache-2.0)입니다. 스킬을 쓸 때 Claude 사용량이 들고(이번 비용은 위 비교 표), 구독 요금제라면 그만큼 사용량 한도에서 빠집니다.
설치했는데 접근성 점검이 자동으로 안 돼요
이번 실험에서도 그랬습니다(위 비교의 ②). 2단계처럼 /design:accessibility-review 파일이름으로 부릅니다.
README의 /critique 명령이 안 보여요
1.2.0 구성 목록에는 명령이 없고 스킬만 있습니다. /design:design-critique처럼 스킬 이름으로 부릅니다.
피그마 없이도 쓸 수 있나요?
됩니다. 이번 실험은 피그마를 연결하지 않고 HTML 파일만으로 했습니다. 공식 설명에 따르면 피그마를 연결하면 색 값·글자 크기·터치 영역을 디자인 파일에서 직접 읽습니다.
출처
Design 플러그인 README·스킬 7개, accessibility-review SKILL.md, anthropics/knowledge-work-plugins 저장소, W3C WCAG 2.1, W3C WCAG 2.2, 클로드 코드 플러그인 문서 (모두 2026-10-16 확인, 저장소 별 29,805개)