init: company-haness 설계

This commit is contained in:
DongHyeonka
2026-07-23 17:49:00 +09:00
parent 57d1bab894
commit f668d6a158
962 changed files with 98989 additions and 1 deletions
+89
View File
@@ -0,0 +1,89 @@
# DESIGN.md (generated)
> Adapter generated from `org-os/08-design`. Do not edit. This is not a product-strategy, IA, or wireframe source.
## Taste thesis
절제된 구조, 명확한 정보 향기, 높은 상태 가시성으로 신뢰를 만든다.
## Principles
- **Task before decoration** — 핵심 작업과 정보 위계를 먼저 증명하고 장식은 그 이후에 추가한다. Anti-example: 색·그림자·타이포만 바꾼 채 흐름과 IA 결함을 숨긴다.
- **Evidence before taste** — 표준 관행과 차별화는 named competitive evidence 및 실제 캡처에 연결한다. Anti-example: modern, clean 같은 형용사만으로 시장 적합성을 주장한다.
- **States are the product** — default/loading/empty/error/partial/completed 상태를 기본 화면과 동등하게 설계한다. Anti-example: happy path 스크린샷 하나를 완성된 경험으로 간주한다.
- **Responsive priority, not shrinkage** — 모바일은 축소판이 아니라 우선순위와 탐색 모델을 재표현한다. Anti-example: 데스크톱 그리드를 단순 축소해 정보와 액션을 잘라낸다.
- **Accessible by construction** — 의미 구조·키보드·포커스·대비·동작 감소를 토큰과 recipe 단계에서 강제한다. Anti-example: 최종 검수에서 ARIA만 덧붙인다.
## Preferred signals
- 크기보다 간격·정렬·그룹화로 위계를 먼저 만든다.
- 작업 빈도와 판단 복잡도에 맞춰 밀도를 의도적으로 선택한다.
- 한 화면의 지배적 액션은 하나이며 보조 액션은 명확히 후퇴한다.
- 진행·저장·오류·부분 완료를 사용자가 추론하지 않게 표시한다.
## Anti-signals
- 무근거 hero gradient와 과도한 glassmorphism
- 동일 카드 셸을 반복하고 색만 바꾼 방향 탐색
- 모든 텍스트와 컨테이너를 pill로 만드는 습관
- 낮은 대비의 회색으로 비활성·보조·설명을 구분하는 방식
- 실제 콘텐츠보다 장식용 대시보드 수치를 우선하는 화면
## Token boundaries
- `color.canvas` = `#ffffff` — 최상위 배경에만 사용
- `color.surface` = `#f7f8fa` — 구획된 표면
- `color.text` = `#16181d` — 기본 본문
- `color.text-muted` = `#596170` — 보조 설명; 작은 본문 AA 대비 유지
- `color.border` = `#d9dde5` — 경계와 구분
- `color.accent` = `#2457d6` — primary action과 focus에만 사용
- `color.danger` = `#b42318` — 파괴적 액션과 오류
- `space.xs` = `0.25rem` — 아이콘 내부 간격
- `space.sm` = `0.5rem` — 밀접 요소 간격
- `space.md` = `1rem` — 기본 그룹 간격
- `space.lg` = `1.5rem` — 섹션 내부 간격
- `space.xl` = `2.5rem` — 주요 섹션 분리
- `radius.control` = `0.5rem` — 입력·버튼
- `radius.surface` = `0.75rem` — 카드·패널
- `typography.body-size` = `1rem` — 기본 본문 크기
- `typography.body-line` = `1.5` — 기본 본문 행간
- `typography.label-size` = `0.875rem` — 레이블 최소 크기
- `motion.fast` = `120ms` — 직접 조작 피드백
- `motion.standard` = `200ms` — 상태 전환
## Components
- `button` (stable) — surfaces: public-web, product-app, interactive-learning, developer-platform; anti: multiple-primary-actions, icon-without-name
- `field` (stable) — surfaces: public-web, product-app, interactive-learning, developer-platform; anti: placeholder-as-label, error-by-color-only
- `status-panel` (candidate) — surfaces: product-app, interactive-learning, developer-platform; anti: blank-screen, spinner-without-context
## Patterns
- `task-entry` (stable) — surfaces: public-web, product-app; anti: cta-before-value, competing-primary-actions
- `resilient-status` (candidate) — surfaces: product-app, developer-platform; anti: generic-error-toast-only, indefinite-spinner
- `content-discovery` (candidate) — surfaces: interactive-learning; anti: single-article-dead-end, topic-list-without-status, decorative-catalog
- `causal-learning-loop` (candidate) — surfaces: interactive-learning; anti: stepper-with-unrelated-content, answer-before-prediction, progress-without-evidence
- `learning-feedback-recovery` (candidate) — surfaces: interactive-learning; anti: wrong-answer-only, spoiler-first-hint, lost-return-state
## Page Archetypes
- `public-value-entry` (candidate) — surfaces: public-web; anti: see source
- `operational-workspace` (candidate) — surfaces: product-app, developer-platform; anti: see source
- `interactive-learning-atlas` (candidate) — surfaces: interactive-learning; anti: see source
- `interactive-learning-deep-dive` (candidate) — surfaces: interactive-learning; anti: see source
## Source hashes
- `org-os/08-design/components/actions/button.yaml`: `1c1f2ee50a36ac759303d958903409c6c82d79b749807b316c2dced18b5df73f`
- `org-os/08-design/components/feedback/status-panel.yaml`: `22dbd0bcf7f1dd2166563ce8691cf961ec0e1173bf3d0bb4cbb9cb9a19ec5064`
- `org-os/08-design/components/forms/field.yaml`: `e478891c6b999395d78e22f5ceda4acac22d1ff1450accc5be0a68fe35adc5c3`
- `org-os/08-design/components/registry.yaml`: `877700537510f7bdd5326338236d3055b84db4d18ccdee1d5367f860bf28c5bd`
- `org-os/08-design/design-engine-adapters.yaml`: `ee6a771488e7fe8342498aac96cb957ffc9c0736f9dab5617e5abd6669433542`
- `org-os/08-design/page-archetypes/registry.yaml`: `10faf739beb565455f55f69562e300ab17aeb6ab34ca07ac6100f3b992e53bee`
- `org-os/08-design/patterns/registry.yaml`: `cccc39f78e3c1bb370e201059b8d548e44255c04e246e46901cccdb741af2b40`
- `org-os/08-design/principles.yaml`: `cb00612da40377647cb886da3fa23097deabfa8776173626f1c363639bc0c97b`
- `org-os/08-design/releases/0.1.0.yaml`: `53bfaa503e4a1b34af0930c55393e70f982379317ba17dac9966b19b942df504`
- `org-os/08-design/releases/0.2.0.yaml`: `f569559cadadb57448f24650c11e8fc1b5431de602338d305a159702eb24e7c9`
- `org-os/08-design/releases/index.yaml`: `430a06a0f57c5d8ca938d82e8af26df172097a2d1d252b0fbc9dddf72b7385ad`
- `org-os/08-design/taste-profile.yaml`: `cea0ab83541c56911735239ec158ea48c140eddf898194d94d026a8a26759450`
- `org-os/08-design/tokens.yaml`: `11601f38cb0b2dba146129f8e1a9177c4376e77d7f93d96811bd9846592be38d`
+303
View File
@@ -0,0 +1,303 @@
{
"components": [
{
"anti-examples": [
"multiple-primary-actions",
"icon-without-name"
],
"examples": [
"primary-task",
"secondary-task",
"destructive-confirmation"
],
"id": "button",
"recipe": "actions/button.yaml",
"state": "stable",
"surfaces": [
"public-web",
"product-app",
"interactive-learning",
"developer-platform"
],
"tokens": [
"color.accent",
"color.danger",
"radius.control",
"motion.fast"
]
},
{
"anti-examples": [
"placeholder-as-label",
"error-by-color-only"
],
"examples": [
"labeled-input",
"inline-validation"
],
"id": "field",
"recipe": "forms/field.yaml",
"state": "stable",
"surfaces": [
"public-web",
"product-app",
"interactive-learning",
"developer-platform"
],
"tokens": [
"color.text",
"color.text-muted",
"color.border",
"radius.control"
]
},
{
"anti-examples": [
"blank-screen",
"spinner-without-context"
],
"examples": [
"empty",
"loading",
"error",
"partial",
"completed"
],
"id": "status-panel",
"recipe": "feedback/status-panel.yaml",
"state": "candidate",
"surfaces": [
"product-app",
"interactive-learning",
"developer-platform"
],
"tokens": [
"color.surface",
"color.text",
"color.danger",
"radius.surface"
]
}
],
"current-release": "org-design-0.2.0",
"generated-by": ".claude/hooks/compile_design_system.py",
"page-archetypes": [
{
"id": "public-value-entry",
"patterns": [
"task-entry"
],
"purpose": "누구를 위한 무엇인지 설명하고 핵심 작업 또는 다음 정보로 진입시킨다.",
"required-states": [
"default",
"loading",
"error"
],
"state": "candidate",
"surfaces": [
"public-web"
]
},
{
"id": "operational-workspace",
"patterns": [
"task-entry",
"resilient-status"
],
"purpose": "상태를 이해하며 반복 작업을 완료하고 실패에서 회복한다.",
"required-states": [
"default",
"loading",
"empty",
"error",
"partial",
"completed"
],
"state": "candidate",
"surfaces": [
"product-app",
"developer-platform"
]
},
{
"id": "interactive-learning-atlas",
"patterns": [
"content-discovery",
"task-entry"
],
"purpose": "제품 약속·활성 Deep Dive·학습 방법·신뢰 경계·전체 Atlas 상태를 보여주고 학습 진입을 돕는다.",
"required-states": [
"default",
"loading",
"empty",
"error",
"partial",
"completed"
],
"state": "candidate",
"surfaces": [
"interactive-learning"
]
},
{
"id": "interactive-learning-deep-dive",
"patterns": [
"causal-learning-loop",
"learning-feedback-recovery",
"resilient-status"
],
"purpose": "하나의 공유 시나리오에서 예측·관찰·비교·설명·전이를 수행하고 다음 메커니즘으로 연결한다.",
"required-states": [
"default",
"loading",
"empty",
"error",
"partial",
"completed"
],
"state": "candidate",
"surfaces": [
"interactive-learning"
]
}
],
"patterns": [
{
"anti-examples": [
"cta-before-value",
"competing-primary-actions"
],
"avoid-when": "비교·탐색이 핵심인 다중 선택 화면이다.",
"components": [
"button",
"field"
],
"id": "task-entry",
"state": "stable",
"surfaces": [
"public-web",
"product-app"
],
"use-when": "사용자가 한 가지 핵심 작업을 시작한다."
},
{
"anti-examples": [
"generic-error-toast-only",
"indefinite-spinner"
],
"avoid-when": "즉시 완료되는 로컬 조작이다.",
"components": [
"status-panel",
"button"
],
"id": "resilient-status",
"state": "candidate",
"surfaces": [
"product-app",
"developer-platform"
],
"use-when": "비동기 또는 부분 성공 작업의 상태를 설명하고 회복 경로를 제공한다."
},
{
"anti-examples": [
"single-article-dead-end",
"topic-list-without-status",
"decorative-catalog"
],
"avoid-when": "단일 작업을 즉시 수행하는 운영 화면이다.",
"components": [
"button"
],
"id": "content-discovery",
"state": "candidate",
"surfaces": [
"interactive-learning"
],
"use-when": "사용자가 전체 학습 지도에서 현재·다음 메커니즘의 관계를 파악하고 진입한다."
},
{
"anti-examples": [
"stepper-with-unrelated-content",
"answer-before-prediction",
"progress-without-evidence"
],
"avoid-when": "읽기 전용 참고 문서이거나 단계 간 상태·증거 결속이 없다.",
"components": [
"button",
"status-panel"
],
"id": "causal-learning-loop",
"state": "candidate",
"surfaces": [
"interactive-learning"
],
"use-when": "Predict→Observe→Compare→Explain→Transfer의 동일 시나리오를 단계별 상태와 함께 진행한다."
},
{
"anti-examples": [
"wrong-answer-only",
"spoiler-first-hint",
"lost-return-state"
],
"avoid-when": "단순 성공 알림처럼 복구 행동이 필요 없는 순간이다.",
"components": [
"status-panel",
"button"
],
"id": "learning-feedback-recovery",
"state": "candidate",
"surfaces": [
"interactive-learning"
],
"use-when": "오답·부분 완료·힌트·복귀 상태에서 다음 학습 행동과 근거를 제시한다."
}
],
"principles": [
{
"anti-example": "색·그림자·타이포만 바꾼 채 흐름과 IA 결함을 숨긴다.",
"id": "task-before-decoration",
"rule": "핵심 작업과 정보 위계를 먼저 증명하고 장식은 그 이후에 추가한다.",
"title": "Task before decoration"
},
{
"anti-example": "modern, clean 같은 형용사만으로 시장 적합성을 주장한다.",
"id": "evidence-before-taste",
"rule": "표준 관행과 차별화는 named competitive evidence 및 실제 캡처에 연결한다.",
"title": "Evidence before taste"
},
{
"anti-example": "happy path 스크린샷 하나를 완성된 경험으로 간주한다.",
"id": "states-are-the-product",
"rule": "default/loading/empty/error/partial/completed 상태를 기본 화면과 동등하게 설계한다.",
"title": "States are the product"
},
{
"anti-example": "데스크톱 그리드를 단순 축소해 정보와 액션을 잘라낸다.",
"id": "responsive-priority",
"rule": "모바일은 축소판이 아니라 우선순위와 탐색 모델을 재표현한다.",
"title": "Responsive priority, not shrinkage"
},
{
"anti-example": "최종 검수에서 ARIA만 덧붙인다.",
"id": "accessible-by-construction",
"rule": "의미 구조·키보드·포커스·대비·동작 감소를 토큰과 recipe 단계에서 강제한다.",
"title": "Accessible by construction"
}
],
"source-sha256": {
"org-os/08-design/components/actions/button.yaml": "1c1f2ee50a36ac759303d958903409c6c82d79b749807b316c2dced18b5df73f",
"org-os/08-design/components/feedback/status-panel.yaml": "22dbd0bcf7f1dd2166563ce8691cf961ec0e1173bf3d0bb4cbb9cb9a19ec5064",
"org-os/08-design/components/forms/field.yaml": "e478891c6b999395d78e22f5ceda4acac22d1ff1450accc5be0a68fe35adc5c3",
"org-os/08-design/components/registry.yaml": "877700537510f7bdd5326338236d3055b84db4d18ccdee1d5367f860bf28c5bd",
"org-os/08-design/design-engine-adapters.yaml": "ee6a771488e7fe8342498aac96cb957ffc9c0736f9dab5617e5abd6669433542",
"org-os/08-design/page-archetypes/registry.yaml": "10faf739beb565455f55f69562e300ab17aeb6ab34ca07ac6100f3b992e53bee",
"org-os/08-design/patterns/registry.yaml": "cccc39f78e3c1bb370e201059b8d548e44255c04e246e46901cccdb741af2b40",
"org-os/08-design/principles.yaml": "cb00612da40377647cb886da3fa23097deabfa8776173626f1c363639bc0c97b",
"org-os/08-design/releases/0.1.0.yaml": "53bfaa503e4a1b34af0930c55393e70f982379317ba17dac9966b19b942df504",
"org-os/08-design/releases/0.2.0.yaml": "f569559cadadb57448f24650c11e8fc1b5431de602338d305a159702eb24e7c9",
"org-os/08-design/releases/index.yaml": "430a06a0f57c5d8ca938d82e8af26df172097a2d1d252b0fbc9dddf72b7385ad",
"org-os/08-design/taste-profile.yaml": "cea0ab83541c56911735239ec158ea48c140eddf898194d94d026a8a26759450",
"org-os/08-design/tokens.yaml": "11601f38cb0b2dba146129f8e1a9177c4376e77d7f93d96811bd9846592be38d"
},
"version": 1
}
@@ -0,0 +1,21 @@
{
"color-accent": "#2457d6",
"color-border": "#d9dde5",
"color-canvas": "#ffffff",
"color-danger": "#b42318",
"color-surface": "#f7f8fa",
"color-text": "#16181d",
"color-text-muted": "#596170",
"motion-fast": "120ms",
"motion-standard": "200ms",
"radius-control": "0.5rem",
"radius-surface": "0.75rem",
"space-lg": "1.5rem",
"space-md": "1rem",
"space-sm": "0.5rem",
"space-xl": "2.5rem",
"space-xs": "0.25rem",
"typography-body-line": "1.5",
"typography-body-size": "1rem",
"typography-label-size": "0.875rem"
}
+22
View File
@@ -0,0 +1,22 @@
/* generated from org-os/08-design/tokens.yaml; do not edit */
:root {
--org-color-canvas: #ffffff;
--org-color-surface: #f7f8fa;
--org-color-text: #16181d;
--org-color-text-muted: #596170;
--org-color-border: #d9dde5;
--org-color-accent: #2457d6;
--org-color-danger: #b42318;
--org-space-xs: 0.25rem;
--org-space-sm: 0.5rem;
--org-space-md: 1rem;
--org-space-lg: 1.5rem;
--org-space-xl: 2.5rem;
--org-radius-control: 0.5rem;
--org-radius-surface: 0.75rem;
--org-typography-body-size: 1rem;
--org-typography-body-line: 1.5;
--org-typography-label-size: 0.875rem;
--org-motion-fast: 120ms;
--org-motion-standard: 200ms;
}
+100
View File
@@ -0,0 +1,100 @@
{
"$schema": "https://design-tokens.github.io/community-group/format/",
"tokens": {
"color.accent": {
"$description": "primary action과 focus에만 사용",
"$type": "color",
"$value": "#2457d6"
},
"color.border": {
"$description": "경계와 구분",
"$type": "color",
"$value": "#d9dde5"
},
"color.canvas": {
"$description": "최상위 배경에만 사용",
"$type": "color",
"$value": "#ffffff"
},
"color.danger": {
"$description": "파괴적 액션과 오류",
"$type": "color",
"$value": "#b42318"
},
"color.surface": {
"$description": "구획된 표면",
"$type": "color",
"$value": "#f7f8fa"
},
"color.text": {
"$description": "기본 본문",
"$type": "color",
"$value": "#16181d"
},
"color.text-muted": {
"$description": "보조 설명; 작은 본문 AA 대비 유지",
"$type": "color",
"$value": "#596170"
},
"motion.fast": {
"$description": "직접 조작 피드백",
"$type": "duration",
"$value": "120ms"
},
"motion.standard": {
"$description": "상태 전환",
"$type": "duration",
"$value": "200ms"
},
"radius.control": {
"$description": "입력·버튼",
"$type": "dimension",
"$value": "0.5rem"
},
"radius.surface": {
"$description": "카드·패널",
"$type": "dimension",
"$value": "0.75rem"
},
"space.lg": {
"$description": "섹션 내부 간격",
"$type": "dimension",
"$value": "1.5rem"
},
"space.md": {
"$description": "기본 그룹 간격",
"$type": "dimension",
"$value": "1rem"
},
"space.sm": {
"$description": "밀접 요소 간격",
"$type": "dimension",
"$value": "0.5rem"
},
"space.xl": {
"$description": "주요 섹션 분리",
"$type": "dimension",
"$value": "2.5rem"
},
"space.xs": {
"$description": "아이콘 내부 간격",
"$type": "dimension",
"$value": "0.25rem"
},
"typography.body-line": {
"$description": "기본 본문 행간",
"$type": "number",
"$value": "1.5"
},
"typography.body-size": {
"$description": "기본 본문 크기",
"$type": "dimension",
"$value": "1rem"
},
"typography.label-size": {
"$description": "레이블 최소 크기",
"$type": "dimension",
"$value": "0.875rem"
}
}
}