Logo

Foundation logo catalog는 제품 shell에 로고를 직접 적용하기 전에 canonical asset, 제외 asset, theme/surface/usage mapping, 상태와 접근성 기준을 한 화면에서 검수하는 관리 화면입니다.

끊기지 않는 한획과 플랫폼의 입구

RE:Verse의 r을 끊기지 않는 한획으로 그리면서 영원히 즐길 수 있는 컨텐츠를 제공하는 플랫폼이 되겠다는 것을 뜻하며, :은 플랫폼으로 들어가는 입구를 상징적으로 표현한다.

Canonical Registry

`logo.png`만 canonical logo로 등록하고 storage path와 runtime URL을 분리해 표시합니다.

Base canonical mark

base.mark.default

storage: public/assets/logo/all/logo.png
runtime: /assets/logo/all/logo.png
file: logo.png · 1024 x 1024 · RGBA
themes: base-light, base-dark

Base 계열 투명 mark. Foundation catalog와 제품 shell 브랜드 식별 후보로 검수한다.

Red canonical mark

red.mark.default

storage: public/assets/logo/red/logo.png
runtime: /assets/logo/red/logo.png
file: logo.png · 1024 x 1024 · RGBA
themes: red-light, red-dark

Red 계열 투명 mark. Red brand mode에서 canonical logo 후보로 검수한다.

Theme Surface Usage Mapping

Base Light, Base Dark, Red Light, Red Dark에서 권장/비권장/GAP 조합을 label과 badge로 함께 표시합니다.

Base Light

Base Light · 기본 light surface

recommendedselected

usage: 제품 shell brand
asset: base.mark.default
path: public/assets/logo/all/logo.png
file: logo.png · 1024 x 1024 · RGBA

Base 계열 브랜드와 light surface가 같은 정책 계열에 있다.

Base Light

Base Light · 기본 light surface

not-recommended

usage: Foundation catalog preview
asset: red.mark.default
path: public/assets/logo/red/logo.png
file: logo.png · 1024 x 1024 · RGBA

Red mark는 Base brand mode의 기본 shell 식별 자산이 아니다.

disabled reason

Base Dark

Base Dark · dark shell surface

recommendedselected

usage: 제품 shell brand
asset: base.mark.default
path: public/assets/logo/all/logo.png
file: logo.png · 1024 x 1024 · RGBA

Base dark에서도 canonical mark는 bitmap 교체 없이 wrapper surface로 검수한다.

Base Dark

Base Dark · dark shell surface

not-recommendederror

usage: asset inspection
asset: red.mark.default
path: public/assets/logo/red/logo.png
file: logo.png · 1024 x 1024 · RGBA

/assets/logo/red/logo.png 로드 또는 복사 실패

disabled reason

Red Light

Red Light · red light surface

recommended

usage: 제품 shell brand
asset: red.mark.default
path: public/assets/logo/red/logo.png
file: logo.png · 1024 x 1024 · RGBA

Red 계열 브랜드와 light surface가 같은 정책 계열에 있다.

Red Dark

Red Dark · red dark surface

gap

usage: 제품 shell brand
asset: red.mark.default
path: public/assets/logo/red/logo.png
file: logo.png · 1024 x 1024 · RGBA

canonical 선택은 맞지만 Red Dark logo-tone 문서/구현 불일치를 GAP으로 추적한다.

Red Dark

Red Dark · red dark surface

not-recommendedselected

usage: asset inspection
asset: base.mark.default
path: public/assets/logo/all/logo.png
file: logo.png · 1024 x 1024 · RGBA

다른 brand mode 자산이므로 inspection 용도로만 비교한다.

disabled reason

Excluded Assets

배경 포함 bitmap은 canonical registry와 Components 기본 사용에서 제외하고 재검토 조건만 추적합니다.

Base logo-white.png

registry key 없음 · Components 기본 사용 제외

excluded

storage: public/assets/logo/all/logo-white.png
runtime: /assets/logo/all/logo-white.png

배경 표현을 포함한 bitmap이므로 투명 canonical mark로 등록하지 않는다.

마케팅 그래픽 또는 별도 graphic asset role이 필요할 때만 재검토한다.

Base logo-opposite.png

registry key 없음 · Components 기본 사용 제외

excluded

storage: public/assets/logo/all/logo-opposite.png
runtime: /assets/logo/all/logo-opposite.png

surface 대비를 asset variant로 해결하게 만들 수 있어 Components 기본 사용에서 제외한다.

배경 포함 표현을 별도 asset governance로 분류할 때만 재검토한다.

Red logo-white.png

registry key 없음 · Components 기본 사용 제외

excluded

storage: public/assets/logo/red/logo-white.png
runtime: /assets/logo/red/logo-white.png

배경 표현을 포함한 bitmap이므로 투명 canonical mark로 등록하지 않는다.

마케팅 그래픽 또는 별도 graphic asset role이 필요할 때만 재검토한다.

Red logo-opposite.png

registry key 없음 · Components 기본 사용 제외

excluded

storage: public/assets/logo/red/logo-opposite.png
runtime: /assets/logo/red/logo-opposite.png

surface 대비를 asset variant로 해결하게 만들 수 있어 Components 기본 사용에서 제외한다.

배경 포함 표현을 별도 asset governance로 분류할 때만 재검토한다.

Catalog States

상태 이름만 나열하지 않고 loading, error, disabled, selected, copied의 실제 affordance를 함께 둡니다.

Default

default

기본 preview tile

default canonical preview

canonical logo preview와 registry metadata가 안정적으로 표시된다.

Loading

skeleton placeholder

slot 크기를 유지한 skeleton으로 이미지 로딩 중 layout shift를 막는다.

Empty

empty

empty copy

조건에 맞는 logo registry item이 없습니다.

필터 또는 registry 결과가 없을 때 빈 상태 안내를 제공한다.

Error

error

role alert

/assets/logo/missing.png 로드 실패

이미지 실패 경로와 retry/copy action 후보를 함께 표시한다.

Disabled

disabled

disabled button

비권장 조합은 선택 불가 affordance와 사유 label을 함께 제공한다.

Focus Visible

focus-visible

outline preview

keyboard focus 기준 outline을 실제 UI에서 확인한다.

Hover

hover

hover surface

hover surface preview · bitmap 색상 유지

카드 hover affordance는 surface wrapper만 바꾸고 bitmap 색은 바꾸지 않는다.

Selected

selected

selected badge

selected

선택 상태는 ring, badge, 텍스트를 함께 사용한다.

Copied

copied

copied feedback

storage path copied

path copy 성공은 visual badge와 polite live region을 함께 갱신한다.

Alt And Aria Policy

브랜드 식별 로고와 catalog 반복 preview의 접근성 목적을 JSX 속성과 metadata 배치로 분리합니다.

RE:Versebrand identification

제품 식별 목적이 있는 로고는 alt="RE:Verse" 또는 link/button의 동등한 accessible name을 제공한다.

base.mark.default

public/assets/logo/all/logo.png

반복 preview 이미지는 장식 처리하고 registry key, 파일명, dimensions는 인접 텍스트 metadata로 제공한다.

Image error fallback

실패 경로는 `/assets/logo/missing.png`처럼 텍스트로 제공하고 fallback label은 이미지 alt에 몰아넣지 않습니다.

WCAG scope

WCAG AA 표시는 bitmap 자체가 아니라 주변 UI와 텍스트 fallback 조합으로 제한합니다.

Path Copy Feedback

복사 feedback은 이 catalog 안의 local interaction이며 toast 표준이나 analytics로 확정하지 않습니다.

idle

복사 대기 중

canonical registry card의 버튼은 min-height 44px 이상이며 성공 시 visual badge와 aria-live="polite" 문구가 함께 갱신됩니다.

Change Requests And Gaps

Red Dark logo-tone 불일치와 bitmap registry gap은 임시 보정 없이 변경 요청으로 역추적합니다.

FND-001

Red Dark logo-tone 문서/구현 정합성

gap

target: docs/base/design-system/theming.md / src/app/globals.css
section: theme mapping
linked: DS-FND-001

Red Dark fallback 대비 gap을 임의 보정하지 않고 GAP으로 표시한다.

FND-002

bitmap logo asset registry 기준 부재

feature-limited

target: docs/base/design-system/tokens.md
section: canonical registry
linked: DS-FND-002

본 기능 한정으로 `base.mark.default`, `red.mark.default` registry key를 사용한다.

FND-003

canonical logo.png 기준 부재

feature-limited

target: docs/base/design-system/theming.md
section: canonical registry
linked: DS-FND-002

`logo.png` 2개만 canonical 후보로 등록하고 전역 승격은 별도 작업으로 남긴다.

FND-004

bitmap logo alt/aria 정책 부재

feature-limited

target: docs/base/design-system/accessibility.md
section: accessibility
linked: DS-FND-003

브랜드 식별 로고와 반복 preview thumbnail의 접근성 목적을 분리한다.

FND-005

로고 최소 크기 QA 기준 부재

feature-limited

target: docs/base/design-system/spacing.md / components.md
section: minimum size QA
linked: DS-FND-004

24px, 32px, 44px preview를 Foundation QA 기준으로 추적한다.

FND-006

배경 포함 logo asset role policy 부재

feature-limited

target: public/assets/logo/
section: excluded assets
linked: DS-FND-005

`logo-white.png`, `logo-opposite.png`를 canonical registry와 Components 기본 사용에서 제외한다.

DS-FND-001

Brand Chrome theming sync

escalate-candidate

target: theming / tokens / implementation sync
section: change requests
linked: FND-001

Red Dark logo fallback이 접근성 기준을 놓치지 않도록 정책과 구현을 동기화한다.

DS-FND-002

logo asset registry 승격

escalate-candidate

target: tokens / theming
section: canonical registry
linked: FND-002, FND-003

header, splash, empty-state에서 반복될 logo asset registry 기준을 추가한다.

DS-FND-003

브랜드 이미지 접근성 정책

escalate-candidate

target: accessibility
section: accessibility
linked: FND-004

식별 목적과 preview 장식 목적이 혼재하지 않도록 공통 alt 정책을 추가한다.

DS-FND-004

로고 최소 크기와 안전 영역

escalate-candidate

target: spacing / components
section: minimum size QA
linked: FND-005

shell과 onboarding에 영향을 주는 logo size QA 기준을 승격한다.

DS-FND-005

asset governance

escalate-candidate

target: asset role policy
section: excluded assets
linked: FND-006

배경 포함 bitmap이 canonical logo처럼 사용되지 않도록 role 기준을 추가한다.

Minimum Size QA

24px, 32px, 44px preview를 제공하되 조작 가능한 control은 44px 이상을 유지합니다.

24px visual QA

24px

visual

작은 header나 compact preview에서 형태가 식별되는지 확인한다.

조작 가능한 control로 쓰지 않고 시각 QA로만 제공한다.

32px visual QA

32px

visual

일반 header brand slot 후보 크기에서 형태와 여백을 확인한다.

조작 가능한 control로 쓰지 않고 시각 QA로만 제공한다.

44px touch target

44px

control

터치 가능한 brand/link control의 최소 target 기준을 확인한다.

button/link control은 min-height 44px 이상을 유지한다.