09073279de
- harness_{banner,icon,social,team}.png(크랩) 삭제 → logo_thumb.png(ZIO 로고) 기반
zioinfo_{banner,icon,social,team}.png 재생성 (SVG 코드 드로잉 → 헤드리스 Chrome 렌더)
· 팀 다이어그램 흐름: 지휘→분석→개발→검증 순환
- 참조 갱신: README(EN/KO/JA)·gen_intro_deck.py·PROJECT_MAP·design.md
(design.md에 크랩 브리프=레거시 주석)
- 사내전용 설치가이드 재구성: 구 pptx 2종 삭제,
docs/gen_install_guide.py(진실원천) 신설 → docs/zioinfo_사내전용_설치가이드.pptx(10슬라이드)
· ythong 마켓플레이스·플러그인 4종·2줄 설치·검증·트러블슈팅
- .gitignore: 설치가이드 pptx만 *.pptx 예외로 추적
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
163 lines
9.2 KiB
Markdown
163 lines
9.2 KiB
Markdown
# zioinfo 브랜드 에셋 디자인 의뢰서 (for Stitch)
|
||
|
||
> **현행 브랜드(2026-07-17 교체):** 저장소 에셋 4종(`zioinfo_banner.png`·`zioinfo_icon.png`·`zioinfo_social.png`·`zioinfo_team.png`)은
|
||
> **ZIO INFOTECH 로고(`logo_thumb.png`) 기반** — 라이트블루(#2E9BD6)·네이비(#17357F)·그레이(#A7ABB0) 교차 바 마크 — 로 재생성되었다.
|
||
> 아래 §1~§4는 **구(harness) 크랩 마스코트 브랜드 기준의 레거시 의뢰서**다. 스티치에 재의뢰할 때는
|
||
> ZIO 로고 마크·팔레트를 상위 제약으로 삼고, 아래 프롬프트의 마스코트 묘사(crab)를 ZIO 마크 모티프로 치환해 사용하라.
|
||
|
||
---
|
||
|
||
## 1. 브랜드 개요
|
||
|
||
| 항목 | 내용 |
|
||
|------|------|
|
||
| 프로젝트 | **harness** — Claude Code 에이전트 팀 & 스킬 하네스 마켓플레이스 (`ythong`) |
|
||
| 마스코트 | **하네스(안전벨트+공구벨트)를 착용한 주황색 꽃게** — "에이전트에게 하네스를 채워 일을 시킨다"는 은유 |
|
||
| 핵심 컨셉 | 개발 자동화 · 에이전트 팀 협업 · 도구(스킬) 장착 |
|
||
| 톤 & 무드 | 친근하고 귀여운 카툰, 그러나 개발 도구다운 정돈됨. 유치하지 않게 채도·라인 정리 |
|
||
| 금지 | 실존 기업/제품 로고, 워터마크, 사진 합성, 과도한 그라데이션·이펙트 |
|
||
|
||
### 1-1. 마스코트 공통 스펙 (전 에셋 동일 유지 — 가장 중요)
|
||
|
||
- **몸체:** 둥근 타원형 꽃게, 주황–레드 (#E8542F 계열), 배 부분은 밝은 살구색 (#F6C29A)
|
||
- **하네스:** 검정(#2B2B2B) X자 어깨 스트랩 + 허리 벨트, 회색 버클. 용도별 변형 허용(공구벨트/클립보드/렌치 파우치)
|
||
- **눈:** 크고 둥근 눈(흰자+검은 동공+하이라이트), 항상 미소
|
||
- **다리:** 좌우 3~4개, 집게 2개
|
||
- **스타일:** 두꺼운 다크 아웃라인의 플랫 벡터 카툰 (셀 셰이딩 최소화)
|
||
|
||
### 1-2. 컬러 팔레트
|
||
|
||
| 역할 | HEX (근사) | 사용처 |
|
||
|------|-----------|--------|
|
||
| Primary — Crab Orange | `#E8542F` | 마스코트 몸체, 포인트 |
|
||
| Primary Light | `#F6C29A` | 마스코트 배, 보조 면 |
|
||
| Ink — Harness Black | `#2B2B2B` | 스트랩, 아웃라인, 텍스트 |
|
||
| Brand Navy | `#2B3AA0` | 아이콘 배경 원, 딥 포인트 |
|
||
| Sky Blue | `#7EB3E8 → #4A72C4` | 배너 배경 그라데이션 |
|
||
| Pale Blue | `#CFE4F5` | 팀/설명 일러스트 배경 |
|
||
| Accent Yellow | `#FFC72C` | 번개·기어·별 등 장식 아이콘 |
|
||
| Neon Cyan | `#3DF5E0` | 연결선·워크플로우 경로 |
|
||
| Social Orange | `#F2622E` | 소셜 카드 단색 배경 |
|
||
|
||
### 1-3. 타이포그래피 (텍스트 포함 에셋)
|
||
|
||
- 로고타입/헤드라인: 굵은 라운드 산세리프 (예: Baloo·Fredoka 계열 느낌), 대문자 `HARNESS`
|
||
- 본문/캡션: 중립 산세리프. 한글 병기 시 Pretendard
|
||
- 텍스트는 요청된 에셋에만 넣는다 (아이콘·팀 일러스트는 텍스트 없음)
|
||
|
||
---
|
||
|
||
## 2. 에셋별 의뢰 명세
|
||
|
||
### 2-1. `zioinfo_banner.png` — GitHub/Gitea 저장소 배너
|
||
|
||
| 항목 | 현행 | 요청 |
|
||
|------|------|------|
|
||
| 크기 | 2752×1536 (16:9 근사) | 동일 비율, 3840×2160 마스터 + 1280×640(GitHub social preview) 크롭 |
|
||
| 구성 | 공구벨트 하네스를 찬 꽃게가 중앙, 주변에 `</>`·번개·기어·아톰 아이콘 부유, 하단 글로우 테크 플랫폼, 파란 그라데이션 배경 | 구도 유지. 장식 아이콘 수를 줄여 여백 확보(좌우 텍스트 오버레이 공간), 아웃라인 스타일을 2-3(소셜)과 통일 |
|
||
|
||
**Stitch Prompt:**
|
||
```
|
||
Wide 16:9 hero banner for a developer tool called "harness".
|
||
A cute cartoon crab mascot (rounded orange-red body #E8542F, light peach belly,
|
||
big glossy eyes, friendly smile) wearing a black X-shaped safety harness with
|
||
a tool belt holding tiny wrench, hammer, pliers and gears. Bold dark outlines,
|
||
flat vector cartoon style, minimal cel shading.
|
||
Centered composition, crab standing on a subtle glowing circuit platform.
|
||
A few floating flat icons around it: code brackets </>, lightning bolt,
|
||
gear, atom — accent yellow #FFC72C and light blue, keep them sparse so the
|
||
left and right sides stay clean for text overlay.
|
||
Background: smooth vertical gradient from #7EB3E8 to #4A72C4.
|
||
No text, no watermark, no logos.
|
||
```
|
||
|
||
### 2-2. `zioinfo_icon.png` — 플러그인/앱 아이콘
|
||
|
||
| 항목 | 현행 | 요청 |
|
||
|------|------|------|
|
||
| 크기 | 2048×2048 | 2048 마스터 + 512/256/128/64/32 리사이즈, 32px에서도 식별 가능 |
|
||
| 구성 | 남색(#2B3AA0) 원 안에 극단순화된 꽃게 + 검정 X 하네스 스트랩·버클, 흰 배경 | 실루엣 유지. 소형 사이즈용으로 디테일(버클 문양) 단계별 제거한 단순화 버전 동시 제작. 원형·사각(라운드 코너) 2종 |
|
||
|
||
**Stitch Prompt:**
|
||
```
|
||
Minimal flat app icon. A simplified cute crab (solid orange-red #E8542F,
|
||
two dot eyes with white highlights, tiny smile, two claws) wearing a black
|
||
X-cross harness strap with a small gray buckle, centered inside a solid
|
||
deep navy circle #2B3AA0 on a white background.
|
||
Flat vector, no gradients, no outline noise, maximum 5 colors,
|
||
legible at 32x32 pixels. Also provide a rounded-square background variant.
|
||
No text.
|
||
```
|
||
|
||
### 2-3. `zioinfo_social.png` — 소셜/커뮤니티 카드
|
||
|
||
| 항목 | 현행 | 요청 |
|
||
|------|------|------|
|
||
| 크기 | 2048×2048 (1:1) | 1:1 유지 + 1200×630(OG 카드) 가로 변형 1종 |
|
||
| 구성 | 주황 단색 배경, 윙크+엄지척 꽃게, 검정 하네스(카라비너·파우치), 말풍선 "HARNESS!" | 스타일 기준 에셋. 이 두꺼운 아웃라인·스티커 감성을 전 에셋의 통일 기준으로 삼는다. 말풍선 텍스트는 `HARNESS!` 유지 |
|
||
|
||
**Stitch Prompt:**
|
||
```
|
||
Square sticker-style illustration on a solid orange background #F2622E.
|
||
A cheerful cartoon crab winking and giving a thumbs-up, wearing a detailed
|
||
black climbing/safety harness (shoulder straps, waist belt, small pouches,
|
||
one tiny orange carabiner). Very thick black outlines, bold flat colors,
|
||
subtle blush on cheeks, one sparkle. A white speech bubble with bold black
|
||
uppercase text "HARNESS!". Playful mascot sticker aesthetic, high contrast,
|
||
centered, no other text, no watermark.
|
||
```
|
||
|
||
### 2-4. `zioinfo_team.png` — 에이전트 팀 일러스트
|
||
|
||
| 항목 | 현행 | 요청 |
|
||
|------|------|------|
|
||
| 크기 | 2752×1536 | 동일 비율 마스터 |
|
||
| 구성 | 연파랑 아이소메트릭 그리드 위 꽃게 3마리(검정 하네스=분석가+돋보기·태블릿 / 파랑 하네스=엔지니어+렌치·기판 / 초록 하네스=QA+클립보드·체크), 네온 시안 삼각 경로로 연결 | **4번째 꽃게 추가** — 보라 하네스 + 지휘봉(오케스트레이터). 삼각형 → 다이아몬드 경로로 확장. 하네스 색 = 역할 코드(검정 분석·파랑 개발·초록 QA·보라 지휘) 유지 |
|
||
|
||
**Stitch Prompt:**
|
||
```
|
||
Wide 16:9 flat illustration of four cute cartoon crabs collaborating as an
|
||
agent team on a pale blue isometric grid background #CFE4F5.
|
||
Each crab wears a different colored harness that encodes its role:
|
||
(1) black harness crab holding a magnifying glass over a small tablet = analyst,
|
||
(2) blue harness crab with two wrenches assembling a gear circuit board = engineer,
|
||
(3) green harness crab holding a clipboard with green checkmarks and a pencil = QA,
|
||
(4) purple harness crab at the top holding a tiny conductor baton = orchestrator.
|
||
They are connected by a glowing neon cyan diamond-shaped workflow path #3DF5E0
|
||
with small arrows. Same mascot design language: rounded orange-red bodies
|
||
#E8542F, big friendly eyes, bold dark outlines, flat vector cartoon style.
|
||
Sparse sparkles only, no text, no watermark.
|
||
```
|
||
|
||
---
|
||
|
||
## 3. 확장 에셋 (옵션 — 여력 시)
|
||
|
||
| 에셋 | 용도 | 가이드 |
|
||
|------|------|--------|
|
||
| 플러그인 배지 3종 | `zio-harness`·`proposal-builder`·`zioinfo` 카탈로그 썸네일 | 2-2 아이콘 프레임 재사용, 하네스 색/소품만 변경(풀스택=파랑+렌치, 제안서=노랑+문서, PM·PMO=보라+클립보드) |
|
||
| 빈 상태(empty state) 일러스트 | 문서/웹 | 하네스를 손에 든 꽃게가 "장착 대기" 포즈, 연파랑 배경 |
|
||
| 로딩 스피너 | 웹 | 기어를 굴리는 꽃게 미니 루프(스프라이트 시트) |
|
||
|
||
---
|
||
|
||
## 4. 납품 규격 & 검수 기준
|
||
|
||
**납품 형식**
|
||
- 원본: SVG 또는 레이어 보존 파일(가능한 경우) + PNG(투명 배경 버전 포함)
|
||
- 각 에셋 규격: §2의 크기 열 참조. 색상 프로파일 sRGB
|
||
|
||
**검수 기준 (전부 충족 시 승인)**
|
||
1. 마스코트 4요소(몸체 색·하네스·눈·아웃라인)가 4종 에셋에서 동일 캐릭터로 인지될 것 — §1-1
|
||
2. 팔레트 이탈 색 없음(±10% 명도 허용) — §1-2
|
||
3. 아이콘 32px 축소 시 실루엣 식별 가능 — §2-2
|
||
4. 텍스트는 §2-3의 `HARNESS!` 외 삽입 금지, 워터마크·외부 로고 없음
|
||
5. 팀 일러스트의 역할-색 코드(검정·파랑·초록·보라) 정확 — §2-4
|
||
|
||
**참조 원본:** 저장소 루트 `zioinfo_banner.png` · `zioinfo_icon.png` · `zioinfo_social.png` · `zioinfo_team.png`
|
||
|
||
| 문서 이력 | |
|
||
|------|------|
|
||
| 2026-07-17 | 최초 작성 — 기존 PNG 4종 분석 기반 Stitch 의뢰서 생성 |
|
||
| 2026-07-17 | 에셋 교체 반영 — harness_*.png(크랩) 삭제, logo_thumb.png(ZIO INFOTECH) 기반 zioinfo_*.png 4종 재생성(SVG→PNG 코드 드로잉). 크랩 브리프는 레거시 참고용으로 보존 |
|