unclejobs-ai/satgat

---

1분 안에 만들기

1. satgat.vercel.app/ko에서 문서 종류를 고릅니다.
2. 생성 화면의 이력서 완성 예시 보기처럼 선택한 템플릿의 실제 PNG/PDF를 먼저 확인한 뒤, 목적·독자·반드시 들어갈 사실을 한 문장으로 적습니다.
3. 필요할 때만 브랜드 정보를 켜고 이름·역할·웹사이트·톤을 입력합니다.
4. 문서 만들기를 누른 뒤 결과를 검토합니다.
5. PDF 내려받기, 인쇄 / PDF 저장, 또는 명시적 확인 뒤 링크 복사를 사용합니다.

7년차 프론트엔드 개발자 이력서. 커머스 플랫폼 성능 개선과 디자인 시스템 구축 경험을 강조해 주세요.

입력은 최대 1,200자입니다. 사실 확인 목록이 있는 템플릿은 생성 화면에서 필요한 정보를 먼저 알려 줍니다.

웹앱 사용

템플릿을 선택하면 생성 화면의 예시 링크가 /ko/examples#로 바뀝니다. 전체 목록을 다시 탐색하지 않고 해당 템플릿으로 만든 실제 PNG/PDF 카드에 바로 도착합니다.

생성 결과는 템플릿별 슬롯 스키마로 검증한 뒤 렌더링합니다. 일반 미리보기 주소에는 UUID만 들어가며 문서 내용은 현재 탭의 sessionStorage에 보관됩니다. 공유 링크는 별도 동작이며, 복사 전에 링크에 문서 내용이 들어간다는 경고를 표시합니다.

화면 미리보기, specimen PNG, 서버 PDF, 브라우저 인쇄는 모두 SatgatTemplateRenderer와 SatgatPrintStyles를 사용합니다. 정적 HTML 데모를 별도 렌더러로 유지하지 않습니다.

셀프호스팅

새 작업 디렉터리

npx satgat init my-satgat
cd my-satgat
npm install
echo "GOOGLE_GENERATIVE_AI_API_KEY=" > .env.local
npm run dev

npx satgat init은 공식 저장소의 최신 얕은 clone을 만들고 패키지를 private 앱으로 바꿉니다. 생성 기능에는 Google Generative AI 키가 필요합니다. 카탈로그와 기존 specimen 열람에는 키가 필요하지 않습니다.

원본 저장소

git clone https://github.com/unclejobs-ai/satgat.git
cd satgat
npm install
cp .env.example .env.local
npm run dev

.env.local의 SATGAT_APP_ORIGIN을 사용자가 접속하는 정확한 http 또는 https origin으로 설정한 뒤 npm run build, npm run start 순서로 실행합니다. 이 값이 없으면 self-hosted production의 서버 PDF를 안전하게 렌더할 수 없습니다. 서버 PDF는 Chromium을 사용하며, 로컬에서는 CHROMIUM_PATH로 실행 파일을 지정할 수 있습니다. 미지정 환경에서는 패키지의 서버리스 Chromium 구성을 사용합니다.

AI agent skill

Claude Code 등 skill 디렉터리를 읽는 에이전트:

npx satgat skill ~/.claude/skills/satgat

이 명령은 skills/satgat/SKILL.md와 references/를 지정한 위치에 복사합니다. Codex·Cursor처럼 프로젝트 지침을 읽는 도구에서는 설치된 SKILL.md를 AGENTS.md에서 참조하세요.

호출 예시:

삿갓 규칙으로 시드 투자 IR 덱을 만들어 주세요. 문제, 해결, 시장, 트랙션, 비즈니스 모델, 팀, 요청 금액을 포함해 주세요.

skill은 시각 규칙과 콘텐츠 계약을 제공하는 지침입니다. 웹앱을 실행하거나 로컬 파일의 브랜드 정보를 읽는 플러그인이 아닙니다.

14개 문서와 실제 출력 형식

지원 시각화: 막대, 선, 도넛, 폭포, 타임라인, 흐름도, 구성도, 사분면, 벤 도표, 레이어 스택.

완성 예시는 /ko/examples에서 보고, canonical 배포 계약은 manifest.json과 같은 디렉터리의 14개 PNG/PDF에서 확인할 수 있습니다. PNG는 각 문서의 첫 페이지 미리보기이고 PDF는 전체 페이지를 담습니다. npm run specimens:render는 production React 경로를 열어 세 아티팩트 집합을 다시 만듭니다.

데이터 처리와 공유

• 임시 초안: 생성 결과와 현재 초안 ID는 브라우저 탭의 sessionStorage에 저장됩니다. 탭을 닫으면 유지된다고 가정하지 마세요.
• AI 생성: 프롬프트와 선택한 브랜드 정보는 /api/generate를 거쳐 설정된 Google Generative AI 서비스로 전송됩니다.
• PDF: 현재 문서 데이터는 /api/export로 전송되어 서버의 Chromium에서 PDF로 렌더링됩니다.
• 일반 미리보기: URL에는 문서 내용 대신 무작위 UUID만 포함됩니다. 다른 브라우저나 기기에서 그 주소만 열어도 문서가 전달되지 않습니다.
• 공유 링크: 사용자가 공유 대화상자에서 확인한 경우에만 문서 데이터를 URL fragment에 넣습니다. 서버 요청에는 fragment가 포함되지 않지만, 링크를 받은 사람은 내용을 읽을 수 있습니다. 개인정보가 있는 문서는 공유하지 마세요.
• 계정·DB: 현재 소스에는 인증이나 서버 문서 저장소가 없습니다.

배포 전에는 사용하는 AI 제공자, 로그, 프록시, 호스팅 환경의 개인정보 정책을 별도로 검토하세요.

개발·검증

Node.js 20.9 이상과 npm을 기준으로 합니다. 테스트 러너는 Bun입니다.

npm run dev                 # Next.js 개발 서버
npm run lint                # ESLint
npx tsc --noEmit            # TypeScript 검사
npm test                    # Bun 테스트 전체
npm run build               # 프로덕션 빌드
npm run tokens:check        # constraint.ts → 생성 토큰 drift 검사
npm run verify:templates    # 14개 정의·registry·렌더러·아티팩트 계약
npm run verify:web          # 실행 중인 프로덕션 앱의 브라우저·PDF 계약
npm run specimens:render    # 런타임 PNG/PDF/manifest 재생성
node scripts/design-guard.mjs --check
node scripts/design-guard.mjs --check-density

verify:web은 기본적으로 http://127.0.0.1:3000을 검사합니다. 먼저 프로덕션 서버를 실행하세요.

npm run build
SATGAT_APP_ORIGIN=http://127.0.0.1:3000 npm run start -- --hostname 127.0.0.1 --port 3000
npm run verify:web

CI의 blocking 계약:

• tokens:check: constraint.ts에서 생성한 app/satgat-tokens.css와 저장된 파일의 drift 없음
• verify:templates: 정의, registry, React renderer, manifest, 14개 PNG/PDF의 메타데이터·바이너리·모든 PDF 페이지 치수 일치
• design-guard --check: raw Unicode escape, 순백, rgba(), 장식 한자, 관리되지 않은 토큰 등 오류 0개
• lint, typecheck, test, build
• 실행 중인 production 앱에서 verify:web: 데스크톱·모바일 랜딩/생성/미리보기, 14개 renderer, 모든 PDF 페이지, 실제 /api/export 응답

디자인 밀도 검사는 현재 advisory warning으로 보고하며 CI 실패 조건은 아닙니다.

단일 진실원천

src/lib/design-system/constraint.ts       색·폰트·간격·그림자 원본
scripts/generate-design-tokens.mjs        CSS 토큰 생성기
app/satgat-tokens.css                     생성된 웹 토큰
src/lib/templates/definitions/            14개 슬롯·section·specimen 정의
src/lib/templates/registry.ts             PageSpec·카테고리 연결
src/components/templates/runtime-catalog.tsx React renderer 연결
src/lib/engine/                            슬롯 정규화·검증·렌더 계약
src/lib/generation/                        AI 요청·응답 계약
scripts/verify-template-catalog.mjs        카탈로그·아티팩트 검증
scripts/verify-web-product.mjs             실행 제품·PDF 검증
skills/satgat/SKILL.md                     에이전트용 한국 문서 brief

디자인 8조

1. 캔버스는 백자지 #F7F7F2; 순백과 누런 양피지를 쓰지 않습니다.
2. 단청 #9B1B1B은 페이지의 5% 이내입니다.
3. 보조 강조는 취색 또는 금박 중 하나만 고릅니다.
4. 회색은 회녹 계열만 사용합니다.
5. 표지·display는 명조 800, 제목은 명조 700, 본문은 바탕 400; 위계는 크기로 만듭니다.
6. 문서 UI 색은 solid hex를 사용합니다.
7. 큰 여백을 디자인 요소로 취급합니다.
8. 합성 볼드와 장식 한자를 사용하지 않습니다. 한자는 필요한 고유명 옆 괄호 표기만 허용합니다.

전문은 skills/satgat/SKILL.md, references/design.ko.md, references/anti-patterns.ko.md를 참조하세요.

영감과 라이선스

삿갓의 제약 기반 문서 디자인 접근은 tw93/Kami에서 영감을 받았습니다. 삿갓은 별도 코드와 런타임을 가진 독립 프로젝트입니다.

MIT © 2026 unclejobs-ai. 번들 폰트는 각 OFL·MIT 라이선스를 따릅니다.