톡브릿지 트랙 시각 정체성 (Visual Style)

이 트랙의 그림은 아키텍처 다이어그램이 아니라 이야기 카드다. 개발자가 아니어도 그림만 보고 그 절이 무슨 말을 하는지 알 수 있어야 한다.

확정: 2026-09-13 (M021). 모델 gpt-image-2.5-flare, 사용자 선택.

1. 왜 캐릭터인가

개발과 비개발의 경계가 얇아졌다. 비개발자도 AI를 써서 구현하는 시대이므로, 이 트랙의 독자는 "개발자"로만 잡히지 않는다. 그렇다고 본문의 기술 설명을 줄이지는 않는다. 기존 설명은 그대로 두고, 그림과 쉬운 설명을 덧붙인다. 줄이는 것이 아니라 더하는 것이다.

2. 등장 캐릭터 다섯

원본 캐릭터 시트: manuscript/articles/images/_talkbridge-characters/cast-clay.png (2026-09-16 개정판) 구 시트: cast-flare.png — 평면 벡터 판. 새 카드에는 쓰지 않는다.

캐릭터	정체	생김새 (프롬프트에 그대로 쓴다)
다리	톡브릿지	a sturdy little arched footbridge character with a rounded stone-teal body, friendly eyes on the arch, two small arms that hand over envelopes
말풍선 손님	고객 (카카오톡에서 오는 사람)	a customer character that IS a speech bubble — a plump rounded warm-yellow speech-bubble body with the little tail at the lower left, short stubby teal arms and legs, dot eyes, small smile, blushed cheeks and a tiny teal scarf
상담원	사람이 답하는 자리	a support agent character wearing a headset, teal outfit, holding a small tablet
개발자 곰	파트너사 개발자	a friendly brown bear character in a teal hoodie holding an open laptop, a paper coffee cup at their feet
에이전트 로봇	AI 에이전트 — 코딩 에이전트 · 상담 에이전트 · 하네스 검수 전문가 모두 이 모습으로 그린다	a small white helper robot with one antenna, glowing amber dot eyes, holding a tiny shield and a checklist clipboard

본문에서는 "로봇"이라고 쓰지 않는다. 그림은 AI 에이전트를 실체화한 것이지 물리적 기계가 아니다. 산문·"그림으로 말하면" 박스에서는 역할에 맞게 AI 에이전트 / 상담 에이전트 / 검수 에이전트 / 보조 에이전트로 쓴다. 이미지 alt 텍스트는 그림을 묘사하므로 "작은 로봇"이 남아도 되지만, 오해 소지가 큰 곳에는 "AI 에이전트(작은 로봇으로 그림)"처럼 병기한다. 편마다 낱말 박스에 이 대응을 한 줄 넣는다 — "그림에서 작은 로봇으로 그린 것이 바로 이 에이전트입니다" (M021 확정, 2026-09-13)

• 사람 캐릭터는 인종·성별이 특정되지 않게 단순화한다. 개발자는 곰이라 사람 묘사 부담이 없다
• 캐릭터에 이름을 붙여 본문에서 서사 인물로 쓰지 않는다 — 그림과 alt 텍스트 안에서만 산다. 본문 화자는 여전히 톡브릿지 팀이다

3. 고정 그림체 (프롬프트 보일러플레이트)

새 카드를 만들 때 아래 문장을 그대로 앞뒤에 붙인다.

[앞] Warm storybook cartoon illustration with soft sculpted clay-like texture, felted
matte surfaces, rounded shapes with gentle clean outlines, simple dot eyes and small
smiles, soft directional morning light with visible soft shadows, layered depth
(detailed foreground props, a mid-ground scene, a soft distant background), teal and
warm amber as lead colours on a cream ground with sage green and terracotta support.

[뒤] No text, no letters, no numbers, no logos, no realistic humans, no photorealism,
no UI screenshots, no charts.

2026-09-16 개정 — 왜 바꿨나. 구 보일러플레이트는 chunky rounded shapes · even flat lighting · generous whitespace를 요구해, 하네스 시리즈의 풍경화식 밀도에 견주면 스티커처럼 단조로웠다. 사용자 판정(2026-09-16): 그림체를 하네스 시리즈 수준으로 끌어올리되 캐릭터 다섯은 유지한다. 시험 생성 4종(images/_style-lab/220-hero-variants/) 중 점토 질감 + 방향광 + 3단 깊이 안을 채택. 함께 바뀐 것: 말풍선 손님이 "머리에 말풍선을 붙인 사람"에서 말풍선 그 자체인 캐릭터로 재설계됐다(시험안 images/_style-lab/customer-character/c3-bubble-body.png). 붙인 느낌을 없애면서 채팅 표식은 살리기 위해서다.

• 모델: gpt-image-2.5-flare · 크기: 히어로 1536x1024, 절 카드 1536x1024 · 품질 high
• 장면 묘사를 아끼지 않는다. 캐릭터 외형은 §2 표를 복사해 짧게 두고, 그 절의 장면과 소품·원경에 문장을 더 쓴다 — 단조로움의 주된 원인은 장면 묘사가 짧은 것이었다
• 글자를 넣지 않는다. 한글이 깨지고 번역본을 못 만든다. 뜻은 사물의 모양으로 전한다(자물쇠=잠김, 방패=검수, 지도=이미 아는 길)
• 정확한 관계·순서는 mermaid의 몫이다 — 카드는 분위기와 결론을 맡는다

화면을 그릴 때 (2026-09-13 개정)

제품 화면도 카툰으로 그린다. 실제 스크린샷보다 처음 보는 사람이 "무엇이 보이는 화면인지" 더 빨리 안다.

• 화면은 캐릭터가 보고 있는 대상으로 그린다 — 모니터 앞의 곰, 지도를 든 로봇
• 칸 구성과 그 칸이 무엇인지까지만 그린다(목록·대화·도착한 편지). 버튼·메뉴·글자를 모사하지 않는다 — 모사하면 가짜 스크린샷이 되어 없는 UI를 약속하게 된다
• 글자 자리에는 물결선, 데이터 자리에는 아이콘(말풍선=손님, 편지=메시지, 물음표 카드=문의, 이름표=낱말)
• 실제 스크린샷은 저장소 README의 몫으로 두고, 원고에서는 링크로 안내한다

원고에 스크린샷을 싣지 않는다 (2026-09-16 확정)

사용자 결정: 저장소 캡처를 그대로 옮기지 않고, 더 이해하기 쉬운 그림으로 다시 그린다. 캡처에는 실제 브랜드 키·내부 문의 내용 같은 식별자가 섞이고, 처음 보는 독자에게는 화면이 빽빽해 무엇을 보는 화면인지 오히려 늦게 전달된다.

• 화면 카드는 카툰 재구성으로 만든다 — 칸 구성과 아이콘까지, 글자 자리는 물결선
• 숫자가 든 데모 화면(요금표 등)은 값을 모사하지 않는다. 금액 자리도 물결선·아이콘으로 두고, 본문이나 캡션에서 "샘플 규칙의 예시입니다"라고 밝힌다
• 실제 화면을 보고 싶은 독자는 저장소 README로 안내한다

예외 — 캡처가 곧 데모인 개발 보강 절 (2026-09-16 저녁, 사용자 지시)

M022 개발 보강("참고 스크린샷·머메이드·샘플 코드를 충분히 표현할 것")에서 정해진 예외다. 화면의 칸 구성이 아니라 화면에 실제로 찍힌 값(진행 단계·받은 정보·판단 근거·활동 로그)이 글의 증거일 때는 저장소 캡처를 그대로 싣는다.

• 왜곡하지 않는다. 블러·모자이크·값 치환으로 UI 느낌을 해치지 않는다. 사용자 지시: "저장소 캡처는 UI의 느낌을 잘 살려 너무 왜곡하지 말 것 (스샷 데모가 중요한 경우)". M022에서 상담방 키·금액 말풍선을 블러 처리했다가 이 지시로 원본으로 되돌렸다
• 출처는 공개 저장소(BlumnAI-Playground/talk-bridge)에 이미 게시된 캡처만. 원본 저장소는 읽기 전용이며, 사본은 images/<order>-<slug>/walkthrough/에 둔다
• 캡처에 금액이 보이면 캡션에서 "샘플 규칙의 대응 지식에 넣어 둔 예시"라고 밝힌다. 위 금액 규칙(값을 모사하지 않는다)은 카툰 카드와 본문 산문에 적용되고, 실캡처에는 캡션 고지로 대신한다
• 개념 카드(카툰)는 그대로 둔다. 캡처는 카드를 대체하지 않고 따라하기 단계의 "확인" 앞에 뒤따른다
• 캡처 뒤에는 "무엇을 보는 화면인지"를 첫 문장에서 말하는 산문 한 문단을 둔다(alt 텍스트만으로 끝내지 않는다)

예외 2 — 외부 서비스 연동을 증명하는 사용자 제공 실사용 화면 (2026-10-06, M025)

톡브릿지가 외부 AI 서비스(예: OpenAI dots)에서 실제로 동작한다는 것이 그 절의 증거일 때, 사용자가 직접 제공하고 싣도록 지시한 실사용 화면은 싣는다. 공개 저장소 캡처가 아니므로 예외 1과 조건이 다르다.

• 사용자 지시가 있을 때만. 정원지기가 임의로 캡처를 찍거나 고르지 않는다
• 화면 속 브랜드·데이터가 자사 개발용·시험 데이터임을 캡션에 밝힌다(M025: '톡브릿지-DEV' 브랜드, 연동 시험 대화). 실고객 식별자가 보이면 싣지 않는다
• 원본은 사용자 제공 위치에 두고, 원고용 사본을 images/<order>-<slug>/에 둔다. 왜곡하지 않는다(예외 1과 같음)
• 캡처 뒤 산문 한 문단 규칙은 같다

예외 3 — 시장·제품 비교 편의 인포그래픽 히어로 (2026-10-08, M026)

사용자가 "카툰풍 채택하지 말고" 비교 인포그래픽을 지시한 편은 히어로를 텍스트 인포그래픽 한 장으로 둔다. 로고·캐릭터 없음, 제품명은 텍스트로만, 한국어 문구는 생성 후 오탈자 육안 확인. alt에 그림 속 문구를 모두 옮긴다. 사용자 지시가 있을 때만 적용한다.

4. 카드 슬롯 규칙

슬롯	넣는다	넣지 않는다
히어로	그 편 전체를 한 장면으로	절 하나의 세부
절 카드	그 절의 결론을 그림 하나로	절차의 단계 전부
화면 카드	그 화면에서 무엇을 보는지를 카툰으로 재구성 (따라하기 절)	저장소 캡처 전재, 버튼·글자·숫자 모사 (2026-09-16 개정)
mermaid	흐름·구조의 정확한 관계	분위기

절 카드는 모든 절에 넣지 않는다. 독자가 그림 없이 못 넘어갈 절에만 — 개념이 새로 나오거나(2·3·4절), 겁을 주는 절(1·7절), 순서를 보여 주는 절(6절).

5. "그림으로 말하면" 박스

카드 바로 아래에 인용 박스 2~3줄. 그 절의 내용을 기술어 없이 다시 말한다.

> **그림으로 말하면** — 손님이 보낸 편지를 다리가 세 갈래로 똑같이 나눠 줍니다.
> 답장은 그중 한 곳에서만 보냅니다. 나머지는 보기만 합니다.

• 본문을 요약하지 않는다. 다른 말로 한 번 더 말한다 (같은 내용, 생활 언어)
• 개발 용어를 쓰지 않는다. 웹훅·멱등·서명 같은 낱말이 들어가면 실패
• 길면 실패다. 세 줄을 넘기지 않는다
• 이 박스는 [[writing-style-guide]] §사람 목소리의 목록·강조 집계 대상이 아니다 (트랙 규약 예외)

6. 재생성·일관성

• 모든 카드의 영문 프롬프트는 images/<order>-<slug>/.prompts/<slug>.md에 자동 보존된다. 같은 슬러그로 다시 호출하면 메타가 갱신되므로, 변형은 항상 기존 프롬프트에서 출발한다
• 캐릭터 묘사는 §2 표의 영문을 복사해 쓴다 — 매번 새로 쓰면 인물이 달라진다
• 새 캐릭터가 필요하면 이 문서 §2에 먼저 등재하고 쓴다

관련

• [[talkbridge-blog-track]] §7 이미지 — 이 문서가 그 절의 정본
• [[talkbridge-guide]] — 카드 슬롯 판단의 주체
• [[manuscript-architect]] 1C — image-gen 스킬 호출 절차