[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -2,65 +2,256 @@
|
||||
id: wiki-2026-0508-상업용-브랜드-이미지-및-디자인-시스템-구축
|
||||
title: 상업용 브랜드 이미지 및 디자인 시스템 구축
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
aliases: [Brand Design System, Visual Identity System, AI Brand Pipeline]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [uncategorized]
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [branding, design-system, ai-image, lora, tokens]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: typescript
|
||||
framework: design-tokens
|
||||
---
|
||||
|
||||
# [[상업용 브랜드 이미지 및 디자인 시스템 구축|상업용 브랜드 이미지 및 디자인 시스템 구축]]
|
||||
# 상업용 브랜드 이미지 및 디자인 시스템 구축
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
상업용 브랜드 이미지 및 디자인 시스템 구축은 AI 이미지 생성 모델을 활용해 로고, 제품 목업, 마케팅 그래픽, UI 등 비즈니스 목적의 시각 에셋을 효율적으로 기획하고 제작하는 과정이다 [1-3]. 마케팅 캠페인이나 제품 라인업 전반에 걸쳐 통일성을 부여하기 위해 스타일 참조 매개변수와 일관된 프롬프트 작성 규칙을 적용하여 브랜드 고유의 정체성을 시각화하는 것이 핵심이다 [3, 4].
|
||||
## 매 한 줄
|
||||
> **"매 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.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
* **일관된 브랜드 미학 및 서사 구축:** 미드저니(Midjourney) V6 및 V7에서 제공하는 스타일 참조(`--sref`), 캐릭터 참조(`--cref`), 옴니 참조(`--oref`) 기능은 일관성 있는 브랜드 이미지와 디자인 시스템을 구축하는 데 필수적인 도구이다 [3, 5, 6]. 특정 무드보드나 브랜드 에셋의 이미지 URL을 활용하면 복잡한 단어 나열 없이도 브랜드 고유의 색감, 질감, 미적 테마를 여러 출력물에 일관되게 적용할 수 있다 [3, 7]. 시리즈물 전반에 걸쳐 시각적 정체성을 유지하려면 핵심 스타일과 조명 묘사어를 정확히 반복해서 사용하는 것이 매우 중요하다 [4].
|
||||
* **상업용 제품 및 패키지 목업 생성:** 이커머스 등 상업적 용도를 위한 제품 사진 및 패키징 디자인을 연출할 때는 명확한 구도와 조명 설정이 필요하다 [8]. "이음새 없는 흰색 배경(seamless white)", "소프트 박스 조명(soft box lighting)", "제품 중심의 구도(product-forward composition)", "에디토리얼 사진(editorial photography)" 등의 키워드를 조합하면 상업 광고에 적합한 전문가급 퀄리티의 이미지를 얻을 수 있다 [8, 9].
|
||||
* **로고 및 텍스트 기반 마케팅 그래픽 설계:** 브랜드 로고를 디자인할 때는 "미니멀리스트 로고(minimalist logo)", "벡터 아트(vector art)", "모던 기하학(modern geometric)"과 같이 디자인 스타일과 산업적 맥락을 구체적으로 명시해야 한다 [2, 10]. DALL-E 3 모델은 텍스트 렌더링 능력이 뛰어나 로고나 소셜 미디어 포스터 제작 시 오타 없는 텍스트 삽입과 명확한 구성을 만들어내는 데 유리하다 [11-13]. 반면, 미드저니의 경우 텍스트 생성에 제한이 있을 수 있으므로 시각적 엠블럼 형태만 우선 생성하고 실제 텍스트는 외부 디자인 도구에서 추가하는 방식이 자주 권장된다 [14].
|
||||
* **UI/아이콘 및 패턴 디자인 시스템 연출:** 미니멀한 모바일 앱 화면 콘셉트, 웹 대시보드 와이어프레임, 일관된 코너 반경을 가진 듀오톤(duotone) 아이콘 세트 등 UI 디자인 요소들도 프롬프트를 통해 설계할 수 있다 [15]. 더불어 "이음새 없는 패턴(seamless pattern)"이나 "반복 모티프(repeating motif)" 등의 지시어를 사용해 브랜드 텍스타일이나 배경에 활용할 기하학적·유기적 패턴을 무한히 확장할 수 있도록 생성할 수 있다 [16, 17].
|
||||
## 매 핵심
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** 프롬프트 일관성 유지 (Prompt Consistency), [[스타일 참조 (Style Reference)|스타일 참조 (Style Reference)]]
|
||||
- **Projects/Contexts:** 이커머스 제품 목업 및 마케팅 그래픽 제작 (E-commerce Product Mockups & Marketing Graphics)
|
||||
- **Contradictions/Notes:** 타이포그래피 생성 시 모델별 권장 방식이 다릅니다. DALL-E 3는 사용자가 지정한 정확한 텍스트 렌더링에 강점을 보이지만, 미드저니는 길고 정밀한 텍스트 생성이 불완전할 수 있어 텍스트 없는 시각적 분위기만 생성한 후 서드파티 디자인 툴에서 텍스트를 조판하는 방식이 권장됩니다 [11, 13, 14].
|
||||
### 매 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).
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-30*
|
||||
### 매 distribution
|
||||
- Style Dictionary → CSS vars / iOS / Android / JSON.
|
||||
- Figma Variables sync ↔ token JSON.
|
||||
- Storybook 의 component reference.
|
||||
- Brand LoRA 의 ComfyUI / replicate.
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
### 매 응용
|
||||
1. Multi-platform consistent rebrand rollout.
|
||||
2. Marketing asset 의 batch generation 의 brand consistency 보장.
|
||||
3. Dark/light/high-contrast theme 의 single source.
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
## 💻 패턴
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
### 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" }
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
### 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}" }
|
||||
}
|
||||
```
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
### Build → CSS variables
|
||||
```javascript
|
||||
// build.js
|
||||
import StyleDictionary from 'style-dictionary';
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
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();
|
||||
```
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
### Tailwind v4 의 token consume
|
||||
```css
|
||||
/* app.css */
|
||||
@import "tailwindcss";
|
||||
@import "./dist/tokens.css";
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
@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>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
### 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
|
||||
```
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
### 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]] · [[Brand Strategy]]
|
||||
- 변형: [[Design Tokens]] · [[Component Library]]
|
||||
- 응용: [[상업용 제품 사진 및 브랜드 로고 디자인]] · [[Marketing Asset Pipeline]]
|
||||
- Adjacent: [[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