docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동
최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치. 콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서 전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한 업데이트0615/무제 3.canvas 뿐).
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,257 @@
|
||||
---
|
||||
id: wiki-2026-0508-상업용-브랜드-이미지-및-디자인-시스템-구축
|
||||
title: 상업용 브랜드 이미지 및 디자인 시스템 구축
|
||||
category: 10_Wiki/Topics
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: [Brand Design System, Visual Identity System, AI Brand Pipeline]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [branding, design-system, ai-image, lora, tokens]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
tech_stack:
|
||||
language: typescript
|
||||
framework: design-tokens
|
||||
---
|
||||
|
||||
# 상업용 브랜드 이미지 및 디자인 시스템 구축
|
||||
|
||||
## 매 한 줄
|
||||
> **"매 Design System 매 token + component + asset pipeline 의 single source of truth"**. Brand 의 visual identity (color, type, voice) 의 design token 으로 codify 후 component library + AI asset generator (brand LoRA) 의 distribute. 매 2026 의 Style Dictionary + Figma Variables + brand-specific LoRA + IP-Adapter 의 standard stack.
|
||||
|
||||
## 매 핵심
|
||||
|
||||
### 매 layer
|
||||
- **Foundation tokens**: color primitives, type scale, spacing, radii.
|
||||
- **Semantic tokens**: `bg.surface`, `fg.muted`, `border.subtle` (theme-aware).
|
||||
- **Component**: button, card, input — token 의 consume.
|
||||
- **Asset**: photo, illustration, icon — brand LoRA / vector library.
|
||||
- **Voice**: tone-of-voice prompt template (LLM brand voice).
|
||||
|
||||
### 매 distribution
|
||||
- Style Dictionary → CSS vars / iOS / Android / JSON.
|
||||
- Figma Variables sync ↔ token JSON.
|
||||
- Storybook 의 component reference.
|
||||
- Brand LoRA 의 ComfyUI / replicate.
|
||||
|
||||
### 매 응용
|
||||
1. Multi-platform consistent rebrand rollout.
|
||||
2. Marketing asset 의 batch generation 의 brand consistency 보장.
|
||||
3. Dark/light/high-contrast theme 의 single source.
|
||||
|
||||
## 💻 패턴
|
||||
|
||||
### Foundation tokens (Style Dictionary)
|
||||
```json
|
||||
// tokens/color.json
|
||||
{
|
||||
"color": {
|
||||
"primary": {
|
||||
"50": { "value": "#eff6ff" },
|
||||
"500": { "value": "#3b82f6" },
|
||||
"900": { "value": "#1e3a8a" }
|
||||
},
|
||||
"neutral": {
|
||||
"0": { "value": "#ffffff" },
|
||||
"950": { "value": "#0a0a0a" }
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Semantic tokens (theme layer)
|
||||
```json
|
||||
// tokens/semantic.light.json
|
||||
{
|
||||
"bg": {
|
||||
"surface": { "value": "{color.neutral.0}" },
|
||||
"muted": { "value": "{color.neutral.50}" }
|
||||
},
|
||||
"fg": {
|
||||
"default": { "value": "{color.neutral.950}" },
|
||||
"muted": { "value": "{color.neutral.500}" }
|
||||
},
|
||||
"accent": { "value": "{color.primary.500}" }
|
||||
}
|
||||
```
|
||||
|
||||
### Build → CSS variables
|
||||
```javascript
|
||||
// build.js
|
||||
import StyleDictionary from 'style-dictionary';
|
||||
|
||||
StyleDictionary.extend({
|
||||
source: ['tokens/**/*.json'],
|
||||
platforms: {
|
||||
css: {
|
||||
transformGroup: 'css',
|
||||
buildPath: 'dist/',
|
||||
files: [{
|
||||
destination: 'tokens.css',
|
||||
format: 'css/variables',
|
||||
options: { selector: ':root' },
|
||||
}],
|
||||
},
|
||||
ts: {
|
||||
transformGroup: 'js',
|
||||
buildPath: 'dist/',
|
||||
files: [{ destination: 'tokens.ts', format: 'javascript/es6' }],
|
||||
},
|
||||
},
|
||||
}).buildAllPlatforms();
|
||||
```
|
||||
|
||||
### Tailwind v4 의 token consume
|
||||
```css
|
||||
/* app.css */
|
||||
@import "tailwindcss";
|
||||
@import "./dist/tokens.css";
|
||||
|
||||
@theme {
|
||||
--color-accent: var(--accent);
|
||||
--color-bg-surface: var(--bg-surface);
|
||||
--color-fg-default: var(--fg-default);
|
||||
}
|
||||
```
|
||||
|
||||
### Component (semantic token 만 사용)
|
||||
```tsx
|
||||
// Button.tsx
|
||||
export function Button({ variant = 'primary', children }) {
|
||||
return (
|
||||
<button
|
||||
className={cn(
|
||||
'px-4 py-2 rounded-md font-medium transition-colors',
|
||||
variant === 'primary' && 'bg-accent text-white hover:bg-accent/90',
|
||||
variant === 'ghost' && 'bg-bg-muted text-fg-default hover:bg-bg-surface',
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Brand LoRA training (kohya_ss)
|
||||
```bash
|
||||
# 매 20-50 brand asset (lookbook, ad, hero shot) 의 dataset
|
||||
# 매 caption 의 trigger word "<acme>" 의 prepend
|
||||
accelerate launch sdxl_train_network.py \
|
||||
--pretrained_model_name_or_path=stabilityai/stable-diffusion-xl-base-1.0 \
|
||||
--train_data_dir=./brand_dataset \
|
||||
--resolution=1024,1024 \
|
||||
--network_module=networks.lora \
|
||||
--network_dim=32 --network_alpha=16 \
|
||||
--learning_rate=1e-4 --max_train_epochs=15 \
|
||||
--output_dir=./loras --output_name=acme-brand-v3
|
||||
```
|
||||
|
||||
### Asset generator (brand LoRA + token-aware prompt)
|
||||
```python
|
||||
import yaml
|
||||
from diffusers import StableDiffusionXLPipeline
|
||||
import torch
|
||||
|
||||
brand = yaml.safe_load(open("brand.yaml"))
|
||||
# brand.yaml: { trigger: "<acme>", palette: ["#3b82f6","#0a0a0a"], mood: "minimal, bold" }
|
||||
|
||||
pipe = StableDiffusionXLPipeline.from_pretrained(
|
||||
"stabilityai/stable-diffusion-xl-base-1.0", torch_dtype=torch.float16
|
||||
).to("cuda")
|
||||
pipe.load_lora_weights("./loras/acme-brand-v3.safetensors", adapter_name="brand")
|
||||
pipe.set_adapters(["brand"], adapter_weights=[0.85])
|
||||
|
||||
def gen(scene: str):
|
||||
return pipe(
|
||||
prompt=f"{brand['trigger']} {scene}, {brand['mood']}, brand color palette",
|
||||
negative_prompt="off-brand color, cluttered, generic stock photo",
|
||||
num_inference_steps=30, guidance_scale=6.0,
|
||||
).images[0]
|
||||
|
||||
gen("hero shot, sneaker on rocky terrain, golden hour")
|
||||
gen("packshot, white seamless, soft shadow")
|
||||
```
|
||||
|
||||
### Tone-of-voice template (LLM brand voice)
|
||||
```typescript
|
||||
const BRAND_VOICE = `
|
||||
You are writing copy for ACME, a minimalist outdoor brand.
|
||||
Voice: confident, terse, sensory. NEVER use exclamation marks.
|
||||
Lexicon: prefer "built" over "made", "trail" over "outdoors".
|
||||
Forbidden: "amazing", "innovative", "revolutionary", "game-changer".
|
||||
Sentence length: avg 8 words, max 14.
|
||||
`;
|
||||
|
||||
await anthropic.messages.create({
|
||||
model: 'claude-opus-4-7',
|
||||
system: BRAND_VOICE,
|
||||
messages: [{ role: 'user', content: 'Write a hero headline for new trail runner.' }],
|
||||
});
|
||||
```
|
||||
|
||||
### Dark theme override
|
||||
```json
|
||||
// tokens/semantic.dark.json — same shape, different values
|
||||
{
|
||||
"bg": { "surface": { "value": "{color.neutral.950}" } },
|
||||
"fg": { "default": { "value": "{color.neutral.0}" } }
|
||||
}
|
||||
```
|
||||
```css
|
||||
:root { /* light */ }
|
||||
:root[data-theme="dark"] { /* dark override generated */ }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) { /* dark */ }
|
||||
}
|
||||
```
|
||||
|
||||
### Figma Variables ↔ tokens sync
|
||||
```bash
|
||||
# 매 Tokens Studio plugin / figma-variables-cli
|
||||
figma-variables export --file-id $FIGMA_FILE --out tokens/figma.json
|
||||
node scripts/normalize-figma.js tokens/figma.json tokens/color.json
|
||||
npm run build-tokens
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| 새 brand 의 from scratch | Foundation → Semantic → Component → Asset 의 순 |
|
||||
| Multi-theme (light/dark/contrast) | semantic 1 layer + theme override |
|
||||
| AI asset 의 brand consistency | brand LoRA (weight 0.7-0.9) + IP-Adapter |
|
||||
| Designer-Dev 의 sync | Figma Variables ↔ Style Dictionary |
|
||||
| LLM copy 의 brand voice | system prompt 의 lexicon + forbidden + tone |
|
||||
| Token 의 hard-code (ad-hoc color) | 매 ban — semantic token 만 |
|
||||
|
||||
**기본값**: Style Dictionary + Tailwind v4 + brand LoRA + Figma Variables sync.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[Design System]]
|
||||
- 변형: [[Design Tokens]] · [[Component Library]]
|
||||
- 응용: [[상업용 제품 사진 및 브랜드 로고 디자인]]
|
||||
- Adjacent: [[Style Dictionary Pipelines|Style Dictionary]] · [[Figma Variables]] · [[Tailwind v4]] · [[Storybook]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: brand-aware copy generation, asset prompt template, lexicon enforcement, multi-language brand voice.
|
||||
**언제 X**: 매 legal-sensitive copy (claims, compliance) — human review 의 의무.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **Hard-coded hex**: token bypass — semantic token 만 사용.
|
||||
- **Foundation 의 component 직접 consume**: theme override 불가능 — semantic layer 의 거침.
|
||||
- **Brand LoRA 의 single asset overfit**: dataset diversity (20+) 의 필요.
|
||||
- **Figma ↔ code 의 drift**: 매 sync automation 의 부재 — bi-directional pipeline 의 추천.
|
||||
- **LLM voice 의 forbidden 의 부재**: cliche ("game-changer") 의 leak.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (Style Dictionary docs, Figma Variables 2024, kohya_ss SDXL LoRA, Tailwind v4 docs).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — token layers + brand LoRA + voice template |
|
||||
Reference in New Issue
Block a user