marker-sketch은(는) 무엇을 하나요?
아이디어를 마커 스케치로 변환합니다. 굵고 약간 떨리는 검은 선, 약간 어긋나고 마커 결이 있는 회색 면, 회색 그림자, 짧은 손글씨, 도트 모눈종이가 특징입니다. 스타일이 고정된 코어(assets/template.svg, assets/glyphes.svg)에 존재하고 사고 과정이 항상 동일한 프로토콜을 따르므로 결과물은 매번 같습니다. 기억에 의존해 다시 그리지 않고, 조립합니다.
경로 및 의존성
명령어에서 ${CLAUDE_SKILL_DIR}은 이 스킬의 폴더입니다(Claude Code가 자동으로 대체). claude.ai에서 이 변수가 그대로 나타나면, 스킬 폴더에서 실행 환경(scripts/compose.py)까지의 상대 경로를 사용합니다. 작업 파일(draft.svg, croquis.svg)은 작업 폴더에 작성되며, 절대 스킬 폴더에 기록되지 않습니다.
의존성: compose.py 실행에 Python 3이면 충분합니다(텍스트는 임베드된 폰트와 함께 <text>로 유지됨). fonttools는 텍스트를 패스로 변환하고(--outline, 모든 환경에서 동일한 렌더링), playwright는 Chromium으로 PNG 제어 렌더링을 생성합니다(render.py). 설치: pip install fonttools playwright && playwright install chromium. 의존성이 누락되어 설치되지 않으면 SVG를 전달하고 시각적 제어가 수행되지 않았음을 명시합니다.
1. 10초 안에 모드 선택하기
| 상황 | 모드 | 출력물 | 목표 시간 |
|---|---|---|---|
| 질문 또는 다이어그램 요청, 설명 답변 | 스케치 (기본) | SVG 하나 | 단일 생성 |
| 회의, 워크숍, 구두 교환, "방금 말한 걸 보여줘" | 라이브 | 매우 가독성 좋은 16:9 SVG, 교환 시마다 수정 | 수정당 몇 초 |
| 밀도 높은 다이어그램(10개 이상 객체), 많은 링크, 렌더링 제어 필요 | 워크숍 | 스크립트로 구축된 SVG, 제어 PNG | 1분 |
| "지금, 그다음, 나중", "현재, 미래", 진화, 트렌드, 이동할 요소 | 인터랙티브 | 독립형 HTML 페이지 하나 | JSON 설정 한 번 |
확신이 없으면 스케치 모드로 시작합니다. three.js를 기본으로 사용하지 마십시오. 워크숍 모드에서 누락된 원근 심볼을 만들 때만 사용합니다(references/glyphes.md, 3D 섹션 참조).
2. 항상 동일한 정신적 프로토콜 (그리기 전에)
다음 여섯 가지 질문에 순서대로 정신적으로 답하십시오. 이것이 일관성을 보장하는 요소이며, 재능이 아닙니다.
- 한 문장으로 된 메시지. 독자가 3초 안에 이해해야 하는 것은? 이 문장이 제목 또는 파란색 주석이 됩니다.
- 다이어그램 계열.
references/familles-diagrammes.md에서 선택합니다(흐름, 루프, 트리, 집합, 계층, 허브, 바퀴, 곡선, 행렬, 네트워크, 장면, 와이어프레임, 전후, 타임라인, 깔때기의 15가지 계열). - 가능한 은유. 아이디어가 추상적(긴장, 성장, 부채, 마찰)이면, 긴장을 전달하고 약 10개의 선으로 그릴 수 있는 물리적 대상을 찾습니다(
references/metaphores.md). 그렇지 않으면 계열을 유지합니다. - 예산. 5~9개 객체, 40% 여백, 텍스트는 한 단어에서 세 단어(최대 한 문장의 범례). 라이브 모드: 최대 7개 객체.
- 잉크 계층. 검은색 = 메시지의 핵심(최대 한 객체만 검은색으로 채움). 회색 = 맥락. 파란색 펜 = 주석, 설명 화살표, 숫자. 그림당 하나의 채우기 강조색만 사용(노란색 하이라이터, 주황색, 빨간색, 하늘색, 모래색), 표면적의 10% 미만, 장식용으로 절대 사용 금지.
- 구성. 왼쪽에서 오른쪽, 위에서 아래로 읽기, 하나의 초점, 느슨한 그리드에 정렬, 주석을 위한 공간 확보.
그런 다음 작성합니다. 그런 다음 제어합니다(섹션 8).
3. 타협할 수 없는 스타일 규칙
- 절대 그라데이션 사용 금지, 절대 가늘고 균일한 외곽선 사용 금지, 절대 흐린 그림자 사용 금지. 그림자 = (-7, 10)만큼 이동한 회색 복사본.
- 세 가지 회색조 + 검은색 + 종이:
f1밝음,f2중간,f3어두움,f4순수 검은색. - V자형 열린 화살표(
arr,arrb,arrg클래스), 직각 꺾임보다는 S자 곡선. - 넓은 회색 점선 흐름(
flow), 작은 점으로 된 검은색 경계(dotk), 대시(dash). - 텍스트: Patrick Hand 폰트,
t(36),tl(52, 제목),ts(27, 소형),tb(파란색),tg(회색),tw(검은색 배경 흰색 텍스트) 클래스. 세련된 프랑스어: 대문자 악센트, œ, « » 따옴표, 긴 대시 없음, 곡선 아포스트로피 ’. - 단어는 독자의 단어입니다. 지어낸 전문 용어나 문장 없음.
- 이모지, 브랜드 로고, 저작권 보호 캐릭터 사용 금지.
정확한 숫자 값, 색상 및 특수 사례: references/grammaire-visuelle.md.
4. 스케치 모드: 직접 작성
원시 그림은 내용만 포함합니다. 스타일 코어는 compose.py에 의해 추가됩니다.
객체 패턴(4개 레이어, 동일한 id 공유):
<use href="#a1" x="-7" y="10" class="sh"/> <!-- 그림자 -->
<use href="#a1" class="pp"/> <!-- 불투명 종이 -->
<use href="#a1" x="-2.5" y="2.5" class="f1"/> <!-- 오프셋 면 -->
<g class="ink"><path id="a1" d="M300 300 L560 296 L556 420 L296 424 L302 296"/></g>
<text class="t" x="430" y="372">아이디어</text>
모서리는 약간 벗어나고(패스가 정확히 닫히지 않음), 변은 절대 완벽하게 평행하지 않습니다. 심볼(사람, 창, 데이터베이스, 구름, 돋보기...)의 경우 라이브러리를 사용합니다:
<use href="#g-person" x="540" y="260" class="cb"/> <!-- 색조 클래스: cb co cr cs ch c1 c3 c4 -->
카탈로그: python3 ${CLAUDE_SKILL_DIR}/scripts/compose.py --catalog 또는 references/glyphes.md. 시각적 판: references/planche-symboles.png.
조립 및 제어:
python3 ${CLAUDE_SKILL_DIR}/scripts/compose.py draft.svg -o croquis.svg --outline # 종이, 점, 필터, 텍스트를 패스로 변환
python3 ${CLAUDE_SKILL_DIR}/scripts/check.py draft.svg # 예산, 강조, 심볼, 색상 강조 확인
python3 ${CLAUDE_SKILL_DIR}/scripts/render.py croquis.svg # 제어 PNG (Chromium)
compose.py 옵션: --paper cream|white|kraft|yellow|blue, --no-dots, --transparent (슬라이드에 삽입용), --size 1200x1200, --embed-font (텍스트 편집 가능 유지), --title.
코드 실행 없이(claude.ai의 간단한 대화): assets/template.svg의 <defs> 블록을 그대로 복사하고, 사용된 심볼만 assets/glyphes.svg에서 해당 블록에 붙여넣은 다음, 내용을 <g id="drawing" filter="url(#wob)"> 안에 넣습니다. 시각적 제어가 수행되지 않았음을 명시적으로 언급합니다.
5. 라이브 모드: 회의, 워크숍, 구두 발표
첫 번째 수정 전에 references/mode-live.md를 읽으십시오. 핵심 사항:
- 듣고, 작성하지 마십시오. 대화에서 3~7개 요소를 추출합니다. 명사는 객체가 되고, 동사는 화살표가 되며, "하지만"과 "아니면"은 분기가 되고, "전/후"는 두 개의 열이 되며, "먼저, 그다음"은 흐름이 됩니다.
- 16:9 형식, 최소 텍스트 36px(
t), 제목 52px(tl),ts는 절대 사용 금지. 4미터 거리에서도 읽기 쉬워야 함. - 안정적인 위치. 수정할 때마다 변경된 부분만 이동합니다. 동일한 식별자와 좌표를 재사용합니다. 팀이 방향을 잃지 않아야 합니다.
- 구두 수정: "추가", "연결", "취소선", "강조"(순수 검은색 또는 하이라이터), "깔끔한 버전"(재정렬, 마지막에 한 번만).
- 프로젝션:
python3 ${CLAUDE_SKILL_DIR}/scripts/live.py draft.svg는 파일이 다시 쓰일 때마다 자동 업데이트되는 페이지를 엽니다(전체 화면은 f 키). claude.ai에서는 동일한 artifact를 다시 게시하거나 각 수정 시마다 SVG를 PNG로 렌더링합니다. - 실시간 와이어프레임 및 흐름:
references/wireframes-flows.md의 레시피 참조.
6. 워크숍 모드: 스크립트로 구축된 밀도 높은 다이어그램
10개 이상의 객체 또는 많은 링크의 경우 scripts/sketch.py를 사용하여 몇 줄을 작성합니다. 링크는 객체 경계에서 계산되며 S자 곡선과 열린 화살표를 포함합니다.
import sys; sys.path.insert(0, "${CLAUDE_SKILL_DIR}/scripts")
from sketch import Sketch
s = Sketch()
s.box("a", 260, 420, "탐색", fill="f1") # (id, 중심 x, 중심 y, 텍스트)
s.box("b", 800, 420, "정의", fill="fh")
s.glyph("c", "g-flag", 1340, 400, "전달")
s.link("a", "b"); s.link("b", "c", label="검증")
s.perimeter(["a", "b"], "디스커버리")
s.note(1330, 640, "여기서 측정", target="c")
s.save("draft.svg")
객체: box(형태 box, pill, oval, 겹치는 집합을 위한 solid=False 옵션), glyph, text, label, wf(와이어프레임 요소), badge(파란색 번호). 링크: link(kind="ink|gray|flow|dash|blue|line"), arrow, perimeter, note, highlight, raw(자유 SVG). 전체 예제는 examples/build_examples.py에 있습니다.
대규모 그래프의 자동 레이아웃을 위해서는 ELK 또는 dagre(npm)로 위치를 계산한 다음 좌표를 sketch.py에 전달합니다.
7. 인터랙티브 모드: 시간에 따른 진화
요청이 진화, 연속 상태, "지금, 그다음, 나중", 트렌드 변화, 변환 중인 조직, 이동해야 하는 요소에 관한 것일 때: 독립형 HTML 페이지를 생성합니다. references/interactif.md를 읽으십시오(6가지 패턴, 설정 구성도, 함정).
원리: 원시 그림(요소에 id 있음) + JSON 설정(상태, 요소별 키 프레임: x y s r o d draw txt, 레이어, 노트):
python3 ${CLAUDE_SKILL_DIR}/scripts/compose.py draft.svg --interactive scenes.json -o page.html
python3 ${CLAUDE_SKILL_DIR}/scripts/render.py page.html --state 1 # 각 상태 제어
페이지는 다음을 제공합니다: 상태 버튼, 시간 슬라이더, 재생, 표시/숨길 레이어, drag 표시된 요소 드래그 앤 드롭, 텍스트 이름 바꾸기를 위한 더블 클릭, 요소를 따르는 링크, SVG로 상태 내보내기, 레이아웃 복사(JSON), 키보드(화살표, 스페이스, f). 종속성 없음, 오프라인 작동. 예제: examples/migration-organisation.html, examples/tendance-adoption.html.
8. 응답 전 제어
check.py오류 없음(알려진 심볼, 긴 대시 없음, 단일 색상 강조).- 렌더링된 PNG 확인: 텍스트 읽기 가능, 겹치는 부분 없음, 그림자 보임, 초점 명확, 충분한 여백.
- 텍스트를 읽지 않고 그림만 봐도 메시지가 한 문장으로 파악됨.
- 시각적 제어가 불가능하면 그 사실을 알립니다.
9. 환경에 따라 전달
- Claude Code: 작업 폴더에
croquis.svg(및 PNG)를 쓰고 경로를 알려줍니다. 라이브 모드에서는live.py를 실행합니다. - 코드 실행이 가능한 claude.ai: 생성, 제어, SVG 및 PNG 전송. 인터랙티브 페이지나 보관/공유할 그림의 경우 artifact로 게시합니다(먼저
artifact-design스킬 로드, 제목은 2~4단어).compose.py --interactive가 생성한 HTML은 이미 독립적입니다. - 코드 실행 없음: 섹션 4에 따라 수동으로 완전한 SVG를 작성하고, 제어되지 않았음을 명시합니다.
프랑스어 응답: 그림 레이블과 주변 텍스트 모두에 francais-parfait를 적용합니다.
10. 참조 색인
| 파일 | 언제 읽을지 |
|---|---|
references/grammaire-visuelle.md | 스타일의 정확한 값, 클래스, 종이, 한계 사례 |
references/familles-diagrammes.md | 15개 계열 중 하나를 선택하고 구성 |
references/metaphores.md | 추상적인 아이디어를 시각화 가능하게 만듦 |
references/glyphes.md | 47개 심볼 카탈로그, 심볼 추가, 선택적 3D |
references/mode-live.md | 회의, 워크숍, 구두 발표 |
references/wireframes-flows.md | 와이어프레임, 사용자 여정, 화면 상태 |
references/interactif.md | 애니메이션 페이지, 상태, 드래그 가능 요소 |
references/planche-symboles.png | 모든 심볼 미리보기 |
examples/ | 6개의 스케치(SVG 및 PNG), 2개의 인터랙티브 페이지, brut/(소스 그림 및 설정), build_examples.py |