PRO+ 공개 샘플 · 로그인 없이 전체 내용을 볼 수 있어요.
설치 전 시식 · 로그인 없이 공개
Aryanutkarsh/SeeCode 개발·문서
새 팀원에게 주문 코드를 설명해야 하나요? 57초 손그림 영상으로 AI의 구조 정리, SeeCode의 그림 생성, 실제 코드와의 대조를 따라가요. 공식 예제와 함께 준비물·공유 방식·한계도 확인합니다.
약 57초 영상공식 예제 3개선택 가이드01 · 영상으로 한눈에
약 57초 · 한국어 음성·자막 · 배경음악. 공식 체크아웃 예제를 바탕으로 깃밥이 만든 손그림 설명입니다. 주문 화면 → Edge cache → Checkout API → Stripe 경로를 요약했고, 저장·영수증 분기는 생략했어요. 실제 실행 녹화는 아닙니다.
02 · 실제 화면
SeeCode README의 'See it in action'에 실린 클립 6개예요. SeeCode가 만든 HTML 파일 하나를 브라우저로 열었을 때 할 수 있는 일이에요. 정지 화면으로 먼저 보이고, 재생을 누르면 움직여요.
화면: Aryanutkarsh/SeeCode README의 클립(docs/features, v0.6.2), MIT. 원문은 실제 다이어그램에서 녹화했다고 적어요. 깃밥은 GIF를 고치지 않고 그대로 재생하고, 재생 전 정지 화면만 GIF의 한 프레임을 WebP로 뽑아 만들었어요. 오른쪽 아래의 SeeCode 표시는 모든 다이어그램에 들어가는 원본 워터마크예요. 화면 속 결제·캐시 그림은 원본 레포의 예시이고, 깃밥이 찍은 화면이 아니에요.
03 · 바로 시작하기
SeeCode는 따로 켜는 앱이 아니라 내가 쓰는 코딩 AI 안에 넣는 스킬이에요. 쓰는 AI에 맞는 설치 방법을 고르고, 명령어 옆 복사 버튼을 눌러 붙여넣으면 돼요. SeeCode용 계정이나 API 키는 없어요.
원본 v0.6.2(2026-10-17 UTC 릴리스, 태그 커밋 9a186890) 문서 기준 · 2026-10-19 확인 · 깃밥이 직접 설치하거나 실행해 보지는 않았어요. 레포는 2026-10-02(UTC)에 만들어졌고, 2026-10-08부터 10-17까지 v0.5.1에서 v0.6.2까지 다섯 번 릴리스했어요. 원문은 'main에 합쳐진 변경마다 새 버전이 나온다'고 적어요. 그래서 자동 업데이트를 켜거나 main을 그대로 받으면 v0.6.2보다 새 버전이 설치되고, 이 글과 달라질 수 있어요. 준비물은 Node.js 20 이상이에요(원문).
Claude Code를 쓸 때
1 · Claude Code 입력창에 직접 입력 (터미널 아님)
/plugin marketplace add Aryanutkarsh/seecode2 · 이어서 입력
/plugin install seecode@seecode원본 레포의 마켓플레이스를 더하고 seecode 플러그인을 설치해요. 두 줄 모두 Claude Code 안에서 내가 직접 입력하는 명령이에요. 플러그인은 /seecode:export·/seecode:import·/seecode:doctor·/seecode:settings 명령도 함께 더해요.
원문은 /plugin → Marketplaces → seecode → Enable auto-update를 한 번 켜 두라고 권해요. 켜면 새 릴리스가 나올 때마다 저절로 올라가서, 이 글이 기준으로 삼은 v0.6.2를 지나가요.
Agent Skills를 읽는 코딩 AI를 쓸 때 (원문: Claude Code·Cursor·Codex·OpenCode 등)
npx skills add Aryanutkarsh/seecode -gskills.sh의 설치 도구로 SeeCode 스킬을 받아요. -g는 이 프로젝트가 아니라 사용자 전체(전역)에 설치하는 옵션이에요. 원문 업데이트 표는 프로젝트에만 설치할 때는 -g를 빼라고 적고, 이렇게 설치한 스킬은 저절로 업데이트되지 않는다고 해요.
깃밥 덧붙임: npx skills는 SeeCode가 아니라 제3자 npm 패키지(skills)를 내려받아 실행해요. 실행하기 전에 이 점을 알고 쓰세요.
OpenAI Codex를 쓸 때
codex plugin marketplace add Aryanutkarsh/seecode
codex plugin add seecode@seecodeCodex 플러그인 마켓플레이스에 원본 레포를 더하고 seecode 플러그인을 설치해요. 업데이트는 Codex의 플러그인 관리자에서 하거나 같은 명령을 다시 실행하라고 원문이 적어요.
GitHub Copilot을 쓸 때
copilot plugin marketplace add Aryanutkarsh/seecode
copilot plugin install seecode@seecodeCopilot 플러그인 마켓플레이스에 원본 레포를 더하고 seecode 플러그인을 설치해요. 업데이트는 플러그인 관리자에서 하거나 같은 명령을 다시 실행하라고 원문이 적어요.
웹이나 데스크톱 앱의 Claude에서 쓸 때
seecode.zip아래 v0.6.2 릴리스 페이지에서 seecode.zip(358,688바이트)을 받아 Settings → Capabilities → Skills에 올려요. 원문은 여기서도 모든 기능이 되지만, 샌드박스에 브라우저가 없어서 이미지와 영상 파일은 다이어그램의 Export 메뉴로 만든다고 적어요. 업데이트할 때는 새 seecode.zip을 다시 올려요.
원문은 최신 릴리스(latest) 링크를 걸지만, 깃밥은 이 글과 같은 v0.6.2 릴리스 페이지로 고정했어요. Skills를 쓸 수 있는 요금제나 계정 조건은 원문에 없어서 깃밥이 확인하지 못했어요.
Claude Code의 스킬 폴더(~/.claude/skills)에 직접 연결할 때
git clone https://github.com/Aryanutkarsh/seecode ~/code/seecode
ln -s ~/code/seecode/skills/seecode ~/.claude/skills/seecode레포를 ~/code/seecode에 받고, 그 안의 skills/seecode 폴더를 ~/.claude/skills/seecode로 연결(심볼릭 링크)해요. 업데이트는 클론 폴더에서 git pull이에요(연결이 그대로 따라가요).
깃밥 덧붙임: git clone은 v0.6.2가 아니라 지금 main의 최신 상태를 받아요. 이 글과 같은 버전으로 맞추려면 받은 뒤 클론 폴더에서 git checkout v0.6.2를 실행하세요. 다시 올리려면 git checkout main 뒤 git pull.
v0.6.2 릴리스 페이지 (seecode.zip) ↗
설치한 뒤에는 코딩 AI의 새 세션을 시작해요(원문: 스킬은 세션이 시작될 때 읽혀요). 그다음 README의 첫 요청을 그대로 붙여넣어 보세요. 깃밥 덧붙임: 이 요청은 결제 흐름을 문장으로 알려 주는 예제라서, 내 레포를 스캔해 달라는 요청이 아니에요.
Use SeeCode to show how checkout works: the browser calls the API,
the API writes to Postgres, charges Stripe and publishes an event to Kafka.프로젝트에서 처음 쓰면 SeeCode가 전역 설정을 쓸지, 이 프로젝트용 설정을 따로 만들지 한 번 물어요. 전역 설정은 ~/.seecode/config.json, 프로젝트 설정은 <레포>/.seecode/config.json에 저장돼요. 깃밥 덧붙임: 원문 설정 문서상 어느 쪽을 골라도 레포 안에 .seecode/config.json이 생길 수 있어요. 커밋할지 먼저 정하세요.
기본 설정에서 명세(JSON)와 HTML은 diagrams 폴더에 저장돼요. 기본 내보내기 형식은 HTML과 PNG예요(원문). HTML 파일 하나를 브라우저로 열면 위 화면처럼 마우스를 올리고, 누르고, 경로를 따라가고, ←/→로 단계를 넘길 수 있어요. 이어서 '결제 경로를 강조해 줘', '어둡게 해 줘', '슬라이드용으로 내보내 줘'처럼 평소 말로 고쳐 달라고 하면 된다고 원문이 적어요.
다이어그램의 Export 메뉴가 브라우저에서 PNG·JPEG·SVG·GIF·MP4를 만들어요. 아무것도 설치할 필요가 없어요. 명령줄로 내보낼 때는 SVG는 Node만 있으면 되고, 나머지 형식은 이미 있는 Chrome이나 Edge를 써요. 원문의 CLI 문서는 이 명령들을 직접 실행할 일은 드물고 스킬이 AI에게 알려 준다고 적어요.
doctor는 Node, 함께 들어 있는 인코더, PNG·GIF·MP4 내보내기에 쓰는 브라우저를 점검하고, 항목마다 한 줄로 알려 줘요. 실패한 항목이 있으면 원문의 고치는 방법(fix)을 그대로 전해 줘요. Claude Code 플러그인이 아니면 원문의 node skills/seecode/scripts/seecode.mjs doctor를 써요(깃밥 덧붙임: 클론했다면 클론 폴더에서, npx skills로 설치했다면 node <설치된 스킬 폴더>/scripts/seecode.mjs doctor예요).
/seecode:doctor설치된 SKILL.md 맨 위의 version: 줄이나 /seecode:doctor로 지금 버전을 확인할 수 있어요. 이 글과 같은 버전이면 0.6.2예요. 더 높다면 이 글 이후의 변경이 들어간 거예요. 원문이 엇갈려요: README는 /seecode:doctor로도 버전을 볼 수 있다고 적지만, doctor 설명(CLI 문서·명령 파일)에는 Node·인코더·브라우저 점검만 있어요. SKILL.md의 version 줄이 확실해요.
설치한 방법마다 업데이트 방법이 달라요. npx skills로 설치했다면 아래 원문 명령으로 올려요. 생성된 HTML이 Google Fonts에 요청하지 않게 하려면 fonts 설정을 system으로 바꿔요(원문: config set fonts system).
npx skills로 설치했다면 업데이트 (README 그대로)
npx skills update seecode -g깃밥 덧붙임 · Claude Code 플러그인에서 Google Fonts 요청 끄기
/seecode:settings fonts systemClaude Code 플러그인은 /plugin → Marketplaces → seecode에서 Enable auto-update(자동) 또는 Update(지금 바로)로 올려요. 업데이트한 뒤에는 새 세션을 시작해야 스킬이 다시 읽혀요. 깃밥 덧붙임: /seecode:settings는 원문의 config set 명령을 실행하는 플러그인 명령이라 위처럼 적었어요. --global 없이 실행하면 이 프로젝트에만 적용될 수 있어요. 모든 프로젝트에는 /seecode:settings fonts system --global. 이 설정은 브랜드 프로필의 글꼴에는 적용되지 않아요(원문).
아래 명령문을 Claude Code나 Codex에 붙여넣으면, 고정된 v0.6.2 README대로 설치하고 예제 그림 하나로 확인해요. 설치 방법·전역 설치·Node.js 설치·자동 업데이트·설정 저장 위치·이미지 내보내기·스캔할 폴더 앞에서는 먼저 물어보고, 외부 요청은 미리 알려 주며, 만든 그림은 공유하지 않아요. 명령문은 깃밥이 공식 문서를 바탕으로 썼어요.
설치 방법 (README Install) ↗빠른 설치와 첫 요청 ↗업데이트·버전 확인 ↗실제 화면 클립 (See it in action) ↗내보내기 (설치 없는 Export 메뉴) ↗가져오기 (색·글꼴·좌표는 안 옮겨짐) ↗개인정보·외부 요청 (PRIVACY.md) ↗설정 (outputDir·fonts) ↗/seecode:settings 명령 ↗SKILL.md (version 0.6.2) ↗CLI·doctor ↗코드에서 그릴 때 근거 표시 ↗가져오기 명령 (파일 안 글자는 자료) ↗라이선스: MIT ↗함께 들어 있는 인코더·글꼴 라이선스 ↗
먼저 SeeCode가 하는 일을 알아보고, 주문이 지나가는 길과 작업 순서를 차례로 읽어봐요.
01 / 공식 SeeCode 개요
아래 해설은 공식 예제와 문서에 기반합니다. 깃밥의 실제 시스템 구조나 실행 검증 결과가 아닙니다.
공식 예제: Aryanutkarsh 및 SeeCode 기여자 · MIT. 손그림 영상·해설: 깃밥. 나레이션: Google Flow Despina. 자료 재확인: 2026. 10. 19. 자료 라이선스 ↗
04 · 선택 가이드
답을 고르면 아래 비교와 판단 근거를 바탕으로 깃밥이 정리한 결론이 바로 나와요.
세 가지를 고르면 결론이 나와요.
결론은 아래 비교와 '조건이 달라지면' 판단, 원래 분석의 추천·보류 조건을 바탕으로 정리한 거예요. README: 공유처별 내보내기 형식 ↗
같은 '새 팀원에게 주문 하나의 경로 설명하기'를, SeeCode v0.6.2 README와 Mermaid 공식 소개(2026-10-19 확인, 버전 고정 없음) 기준으로 비교했어요.
| 기준 | SeeCode | Mermaid |
|---|---|---|
| 읽는 경험 | HTML에서 경로·노드 탐색, 단계별 설명 | 텍스트로 정의해 문서에 포함 |
| 기존 문서와의 관계 | Mermaid를 초안 명세로 가져옴 (색·글꼴·좌표는 안 옮겨짐) | 쓰던 문법·렌더링 유지 |
| 공유 결과 | 탐색 HTML 또는 SVG·PNG·GIF·MP4 (영상엔 클릭 없음) | 문서의 Mermaid 렌더링 |
| 검토할 내용 | AI가 쓴 명세를 사람이 대조 | 다이어그램 정확성은 따로 확인 |
이럴 땐 SeeCode경로를 따라가며 설명하고 결과를 여러 형식으로 나눠야 할 때.
이럴 땐 Mermaid팀 문서에서 이미 Mermaid를 잘 읽고 관리하고 있을 때.
독자가 직접 경로를 따라갈 필요가 있는지 봅니다.
한 장을 변환해 의미와 누락을 먼저 비교하세요.
공유할 곳이 HTML 실행을 허용하는지 확인하세요.
어느 쪽도 실행 추적 도구를 대신하지 않아요.
설치하기 전에 확인하면 헛걸음을 줄일 수 있어요. 체크는 이 화면에만 표시돼요.
안 맞으면 틀린 구조도를 공유하면 인수인계가 더 어려워져요.
안 맞으면 SeeCode 자체에 서버·계정·텔레메트리가 없다는 설명이 완전한 오프라인을 뜻하지는 않아요. Google Fonts 요청은 fonts 설정을 system으로 바꾸면 끌 수 있지만, AI 제공자에게 가는 자료와 Export 메뉴의 GIF·MP4 내보내기 때 jsDelivr 요청은 따로 남아요.
개발자가 코드와 설계를 확인할 수 있고, 처음 보는 사람이 흐름을 이해해야 하는 상황을 가정해요.
SeeCode 공식 문서·예제는 2026-10-19에 v0.6.2 태그 커밋(9a186890)에 고정해 다시 확인했어요. Mermaid 공식 소개(mermaid.js.org/intro)는 버전 고정 없이 같은 날 다시 확인했어요. 공식 문서·예제와 Mermaid 공식 소개에 기반한 편집 해설입니다. SeeCode 설치·실행과 실제 서비스 구조 검증은 수행하지 않았습니다.
개발자가 코드와 설계를 확인할 수 있고, 처음 보는 사람이 흐름을 이해해야 하는 상황을 가정해요.
그림을 만들기 전에 전달할 질문 하나부터 정해보세요.
영상처럼 “새 팀원에게 주문 하나의 경로를 설명한다”는 질문부터 시작해요. AI가 정리한 명세를 그림으로 만들고, 코드와 대조한 뒤 공유하는 순서입니다. 그림의 완성도와 설명의 정확성은 각각 확인해야 해요.
내 조건에 맞춰 확인하기 위한 순서예요. 깃밥이 직접 실행한 결과를 뜻하지는 않아요.
확인 후 남길 것담당자가 노드와 연결을 원본과 대조합니다.
확인 후 남길 것빠진 실패 경로와 모호한 이름을 찾아 명세를 수정합니다.
확인 후 남길 것명세·소스 버전과 함께 공유하고 변경 시 갱신합니다.
그림이 코드와 맞고, 설명 뒤 남는 질문이 줄며, 변경 시 갱신할 수 있다면 범위를 넓혀요.
누락을 고치는 시간이 더 크거나 공유 환경에서 열리지 않으면 기존 문서 방식으로 돌아가요.
선정한 이유: 코드를 읽은 사람이 머릿속에 그린 연결을 다른 사람에게 전달하는 도구예요. 인수인계와 설계 설명에서 실제로 무엇을 덜어주는지 살펴봅니다.
공식 자료를 읽고 해설한 편집 콘텐츠예요. 새로 설치해 검증하거나 도입 효과를 측정한 기록은 아니에요. 원본 화면의 언어와 수치는 그대로 유지했어요.