눌러 보면 반응하는 아이소메트릭 그림을 만들어 주는 스킬, ai-iso-skill

MrBongoC/ai-iso-skill

물건 하나와 누르면 생길 일을 적으면, 부품을 누를 때마다 그림과 상태 표시가 바뀌는 아이소메트릭(등각 투영) 선화를 HTML 파일 하나로 만들어 주고, 끝내기 전에 모델이 직접 눌러 보며 확인합니다.

설치 방법

README의 Claude Code 설치 방법 두 가지 중 하나만 고르세요(둘 다 칠 필요 없음). 시험은 두 방법 대신 레포를 받아 --plugin-dir 옵션으로 그 세션에만 불러와 실행했습니다(전역 설치 없음). 플러그인으로 불러오면 '/iso-figure:iso-figure 물건과 누르면 생길 일'처럼 부르고, 시험 12번이 모두 이렇게 불렀습니다. 자연어 호출과 Claude.ai 업로드는 시험하지 않았습니다.

방법 1 · Claude Code 안에서 두 줄을 차례로 입력 (플러그인으로 설치)

복사/plugin marketplace add MrBongoC/ai-iso-skill
/plugin install iso-figure@ai-iso-skill

방법 2 · 터미널에서 두 줄을 차례로 입력 (레포를 받아 스킬 폴더를 복사)

복사git clone https://github.com/MrBongoC/ai-iso-skill.git
cp -r ai-iso-skill/skills/iso-figure ~/.claude/skills/

2026-10-04에 만들어진 레포로, 생성 16일 만에 누적 스타 258개이고 최근 7일 새 포크는 6개입니다(집계 상한에 닿지 않은 정확한 값입니다). 집계 시점의 GitHub 트렌딩 페이지에는 없었고 최근 7일 스타 증가량은 재지 못했습니다. 집계 자료에는 생성 이후 하루 평균 16.1개라는 어림(평생 일평균 추정값)만 있고, 마지막 푸시는 2026-10-04입니다. 써 보니 12번 모두 눌러 보면 반응하는 HTML 그림(12~17KB)이 나왔고, 시험자가 실제 마우스·키 입력을 보내 12개 모두 화면과 상태 표시가 바뀌는 것을 확인했습니다.

필요 조건

• Claude Code(플러그인 설치 또는 ~/.claude/skills/ 복사). 시험은 Claude Code 2.1.304 + claude-opus-5-5. README는 Claude.ai에서 릴리스의 iso-figure.skill을 올려 쓰는 방법도 안내한다(이번 시험 범위 밖)
• 결과를 열 웹 브라우저. 결과 HTML은 외부 스크립트·글꼴 없이 파일로 바로 열린다(시험 12개 모두 외부 요청 0)
• SKILL.md 9단계(헤드리스로 열어 눌러 보고 캡처)를 하려면 장비에 헤드리스 브라우저가 있어야 한다. 시험 장비는 Google Chrome 155 + python3 3.12(표준 라이브러리, run05·run07·run10·run11은 장비의 Pillow도 씀)였고 Playwright·Node가 없어서, 모델이 12번 모두 Chrome DevTools 파이프 확인 스크립트를 직접 짜서 돌렸다
• 한국어 화면 글자에는 한글 글꼴(시험 장비: Noto Sans CJK KR·Noto Sans Mono CJK KR)

README의 두 방법(플러그인: 마켓플레이스 등록 후 설치 / 손으로: 레포를 받아 skills/iso-figure 폴더를 ~/.claude/skills/에 복사) 중 하나를 고른다. 플러그인으로 설치하면 '/iso-figure:iso-figure 분 버튼과 표시창이 있는 주방 타이머'처럼 물건과 누르면 생길 일을 같이 적어 부른다(시험은 모두 이 명령으로 불렀다. README의 'iso figure of …' 같은 자연어 호출과 손으로 복사한 설치는 시험하지 않았다). 현재 폴더에 HTML 파일 하나(12~17KB)가 생기고, 모델이 그 파일을 헤드리스 브라우저로 직접 눌러 보고 캡처를 본 뒤 끝낸다. 대화형 세션에서는 python3·google-chrome 명령 승인 창이 뜰 수 있다(대화형은 시험하지 않았다). 물건 하나에 3.9~9.2분, 0.75~1.64달러가 들었다(claude-opus-5-5, 2026-10-21, 동시 2~4개 실행).

복사# $T = 시험용 작업 폴더(전체 경로는 생략)
git clone --depth 1 https://github.com/MrBongoC/ai-iso-skill $T/src  (커밋 44b4da7)
claude plugin validate --strict $T/src ; claude plugin validate --strict $T/src/.claude-plugin/plugin.json ; claude --plugin-dir $T/src plugin details iso-figure  (설치 없이 구조 확인: Skills 1 iso-figure, Agents 0, Hooks 0, MCP 0)
mkdir -p /tmp/gitstar-sandbox/MrBongoC__ai-iso-skill/runNN/.cache/tmp  (실행마다 새 샌드박스. run09만 $T/inputs/run09/자판기_메뉴.csv를 미리 복사)
TMPDIR=/tmp/gitstar-sandbox/MrBongoC__ai-iso-skill/runNN/.cache/tmp claude -p "/iso-figure:iso-figure <물건과 누르면 생길 일> … 진행 메모 …" --output-format json --plugin-dir $T/src --permission-mode acceptEdits --allowedTools Read Glob Grep Write Edit "Bash(python3:*)" "Bash(google-chrome:*)" (+ 기본 파일 명령) --disallowedTools AskUserQuestion WebFetch WebSearch Skill Task Agent "Bash(curl:*)" "Bash(wget:*)" "Bash(git:*)" "Bash(node:*)" "Bash(npm:*)" "Bash(npx:*)" "Bash(pip:*)" "Bash(rm:*)" … --strict-mcp-config --no-chrome --max-budget-usd 2  (run_once.py 경유, 전체 인자는 tools/trial.sh·install.md 5번)

보안 검토: pass — 플러그인은 SKILL.md 한 파일(115줄)과 매니페스트 2개뿐이다. 훅·MCP 서버·에이전트·실행 스크립트 없음(claude plugin details: Hooks 0, MCP 0). 레포의 실행 코드는 예시 HTML 2개의 인라인 스크립트(계산기·신시사이저, 네트워크·저장소 접근 없음, Google Fonts 스타일시트만 불러옴)뿐이고 시험에서 실행하지 않았다. 자격 증명 접근·외부 전송·난독화·위험 지시문 없음. SKILL.md는 '실존 로고·제품 실루엣 금지, 외부 스크립트 금지'를 요구하고, 9단계에서 모델에게 헤드리스 브라우저로 결과를 눌러 보게 하므로 모델이 쓴 확인 스크립트가 사용자 권한으로 실행된다. 시험은 --plugin-dir(전역 설치 없음), 실행마다 /tmp 샌드박스, TMPDIR 샌드박스 안, acceptEdits + 허용 목록(python3·google-chrome·기본 파일 명령), WebFetch·WebSearch·Skill·Task·curl·wget·git·node·npm·npx·pip·rm 거부, --strict-mcp-config·--no-chrome·--max-budget-usd 2로 했다.

써 보니

• 부르는 법: /iso-figure:iso-figure 뒤에 물건과 그 물건이 하는 일을 같이 적습니다(예: '서랍 손잡이를 누르면 그 서랍이 앞으로 미끄러져 열리고 안에 든 물건이 보여'). 시험 프롬프트 12개가 모두 그렇게 적었고, README 예시 문장(run01은 첫 예시를 한국어로 옮긴 것, run02는 둘째 예시의 영어 원문)부터 번호 목록 5개(run06)까지 12번 모두 눌러 보면 반응하는 그림이 나왔습니다. 누를 것이 없는 물건이면 다른 물건을 고르라고 스킬 문서(SKILL.md)가 말하는데, 그런 요청은 시험하지 않았습니다.
• 적은 문구는 그대로 나옵니다. '헹굼 · 2/4 · 남은 12분'처럼 상태 표시 문구 예시를 적은 프롬프트 7개(run04·run06~run10·run12)는 모두 같은 모양의 문구가 나왔고, 'Fig 12'처럼 적은 그림 번호도 그대로 나왔습니다. 반대로 요청에 없던 부품을 모델이 더하기도 했습니다(run10 줄바꿈 레버, run07 꼭대기 칸을 가리키는 ▼ 표시).
• 입력 파일도 읽습니다. run09는 현재 폴더의 자판기_메뉴.csv(음료 6개·가격·재고)대로 자판기를 만들었는데, 파일로 연 HTML은 옆의 CSV를 읽지 못해서 모델이 CSV 내용을 HTML 안에 넣었습니다. CSV를 고치면 HTML 안의 사본도 고쳐야 한다고 모델이 알렸습니다.
• 화면 글자는 한국어로 나옵니다. 시험 프롬프트에는 화면 글자를 한국어로 쓰고 중국어·한자는 쓰지 말고 글꼴 목록에 한글 글꼴을 넣으라는 진행 메모를 붙였고, 12개 모두 한자가 0자였습니다(이 메모를 뺀 경우는 시험하지 않았습니다). 영어로 요청한 run12도 화면 글자는 한국어로 받았습니다. 결과를 보는 컴퓨터에 한글 글꼴이 있어야 합니다.
• 테마와 색: 밝은·어두운 테마가 둘 다 들어 있고 따로 말하지 않으면 운영체제 설정을 따릅니다. 밝은 테마를 요청한 4번(run03·run06·run09·run12)은 모두 밝게 열렸고, run03·run06·run12는 요청에 없던 어두운 테마 전환(버튼 또는 T 키)도 넣었습니다. 색은 기대하지 마세요. 색·그라데이션·그림자를 쓰지 않는 것이 스킬 규칙이라 12개 모두 회색 선과 눌리거나 켜진 부분 강조뿐인 흑백 선화입니다(색을 요청하는 경우는 시험하지 않았습니다).
• 결과 파일: 12~17KB짜리 HTML 하나가 생기고, 12개 모두 외부 스크립트·글꼴·요청 없이 파일로 바로 열렸습니다(시험자가 헤드리스 Chrome으로 확인, 페이지 오류 0). 소리를 내게 만든 run01(알람)·run03(실로폰)·run11(도어락)은 모두 모델이 소리를 귀로 듣지 못했다고 알렸고(run03은 AudioContext 실행·파형까지, run11은 소리를 끈 채 재생 오류만 확인), 실제로 어떻게 들리는지는 이 시험에서 확인하지 못했습니다.
• 끝내기 전에 모델이 직접 눌러 봅니다. 스킬의 9단계가 헤드리스 브라우저에 실제 키·마우스 입력을 보내 상태 표시를 읽고 한 장 찍어 확인하라고 해서, 12번 모두 모델이 Chrome 확인 스크립트를 직접 짜서 눌러 보고 캡처를 본 뒤 끝냈습니다(캡처를 보고 화면을 고친 예: run02 콘센트, run04 서랍 옆벽, run05 라벨 겹침, run09 재고 글자 대비, run11 벽 높이·●). Playwright와 Node가 없는 시험 장비에서는 매번 새로 짰고, 12번 중 10번(run08·run09만 바로 연결)은 처음 짠 스크립트가 Chrome과 파이프로 연결하지 못해 고친 뒤 통과했습니다(run06·run10은 두 번 고침). 이 확인까지 포함해 물건 하나에 3.9~9.2분, 0.75~1.64달러(12번 합계 14.26달러·78.5분)가 들었고 비용 상한 2달러(--max-budget-usd 2)에는 한 번도 걸리지 않았습니다(claude-opus-5-5, 2026-10-21, 2~4개를 동시에 실행).
• 권한 창: 시험은 답할 사람이 없는 비대화형(claude -p) 실행이라 권한·셸 안전 검사에 실행마다 0~3번(합계 14번) 막혔고, 대부분 sed -i가 든 명령(6번)과 중괄호·따옴표가 든 heredoc(5번)이었습니다. 모델이 명령을 나누거나 Edit·Write 도구로 바꿔 이어 갔습니다. 그 밖의 도구 오류는 실행마다 0~3번(합계 13번)으로, 두 수는 따로 센 값입니다. 대화형으로 쓰면 python3·google-chrome 명령 승인 창이 뜰 수 있으니 승인할 준비를 하세요(대화형은 시험하지 않았습니다).
• 알려진 흠(모델이 스스로 알린 것과 시험자가 본 것): run10은 띄어쓰기 바와 키캡 구석의 작은 글자가 흐리고 앞면 이름판이 뒷줄 키에 가려지고, run08은 문이 열릴 자리를 비워 닫힌 상태에서 오른쪽으로 치우쳐 있고, run04는 위 칸을 열면 아래 손잡이가 가려질 수 있습니다. run11은 문이 열리면 키패드 오른쪽이 문틀 뒤로 가려지고(모델은 의도한 것이라고 알렸습니다), run03은 짧은 음판의 받침대 점이 계이름 글자와 겹치며, run09는 자판기가 작아 카드 속 글자가 작게 보입니다.
• 시험하지 않은 것: README의 자연어 호출('iso figure of …'), 손으로 복사한 설치(~/.claude/skills/ 복사), Claude.ai에 iso-figure.skill 올리기, 대화형 세션, 모바일 터치 입력입니다. 라이선스는 MIT(저작권 표기 2026 Tolga Cohce)이고, 이 페이지에는 결과 캡처 PNG만 싣고 결과 HTML은 싣지 않았습니다. 결과 HTML에는 스킬의 투영 커널 코드(MIT)가 들어 있습니다.

결과물 12개

카드 한 장은 실행 한 번의 결과 HTML을 헤드리스 Chrome으로 열어 찍은 화면 두 장(기본 상태 또는 실제 마우스·키 입력을 보낸 뒤의 상태)을 위아래로 이은 캡처입니다. 굵은 글씨는 결과 설명이고, '프롬프트 전문 보기'를 누르면 그때 쓴 프롬프트가 펼쳐집니다(물건 설명 뒤에 시험 때마다 붙인 공통 진행 메모가 이어집니다). 결과 HTML은 싣지 않아 이 페이지의 그림은 눌러 볼 수 없고 소리도 담기지 않았습니다. 12개 모두 흑백 선화라 카드끼리 달라 보이는 것은 물건 모양과 밝은·어두운 테마뿐입니다(run03·run06·run09·run12는 밝은 테마로 열었습니다). 테두리 카드(run06, run07, run08, run10)는 물건과 누르는 방식이 서로 다른 대표 결과입니다. 화면 속 이름·숫자는 모두 지어낸 가상 자료이고(run11의 비밀번호 2580은 시험용 가상 번호, run09의 음료 이름·가격·재고는 시험자가 만든 CSV) 실제 서비스가 아닙니다.