harness/design.md

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 코드 드로잉). 크랩 브리프는 레거시 참고용으로 보존