Design systemv1.7.0

SBH News / Design language

Clear signal.
Calm interface.

빠르게 변하는 세계를 과장 없이 선명하게 보여주는 시각 언어입니다. 핵심 색상 Sensor Purple과 역할 기반 토큰으로 뉴스, 지도, 시장 데이터를 하나의 일관된 경험으로 연결합니다.

Version1.7.0

Updated2026.09.11

원칙부터 보기

01 / Principles

우리가 화면을 만드는 기준

기능과 스타일이 충돌할 때 아래 원칙이 최종 판단 기준이 됩니다. 모든 원칙은 독자의 이해와 판단을 돕는 데서 출발합니다.

Signal over spectacle

장식보다 신호가 먼저

화면의 첫 시선은 가장 중요한 사실로 향해야 합니다. 정보나 행동이 없는 장식용 캡슐 칩은 사용하지 않고, 색·움직임·크기는 정보의 우선순위를 설명할 때만 사용합니다.

Context is content

맥락도 뉴스의 일부

헤드라인만 빠르게 보여주되 시간, 장소, 출처, 영향 범위를 함께 제공해 독자가 스스로 판단할 수 있게 합니다.

Urgent, never alarming

긴급하되 불안하게 만들지 않기

속보는 분명하게 구분하지만 과도한 경고색과 반복 애니메이션은 피합니다. 긴박함보다 정확한 다음 행동을 우선합니다.

One system, many surfaces

하나의 언어, 다양한 화면

웹, 모바일, 지도, 데이터 터미널에서 같은 의미의 토큰과 패턴을 사용합니다. 표현은 달라도 위계와 행동은 같아야 합니다.

Trust must be visible

신뢰를 화면에 드러내기

출처, 갱신 시각, 상태, 불확실성을 숨기지 않습니다. 시각적 완성도보다 검증 가능성과 접근성을 먼저 확인합니다.

02 / Color

색은 의미를 운반합니다

Sensor Purple은 SBHNews를 식별하는 핵심 색상입니다. 컴포넌트에는 고정 색상 대신 역할 기반 토큰을 사용해 테마가 바뀌어도 위계, 상태, 행동의 의미를 유지합니다.

Core identity / 01

Sensor Purple

#3B06F5RGB 59, 6, 245

Core color standard

SBHNews를 하나로 묶는 핵심 퍼플

SBHNews의 제품과 콘텐츠를 하나로 식별하는 핵심 퍼플입니다. 장식용 색이 아니라 가장 중요한 행동과 현재 선택을 분명하게 표시할 때 사용합니다.

CSS token: --accent-sensor
JavaScript: brand.sensor
Foreground: #ffffff · 8.30:1

핵심 용도

대표 CTA, 선택된 상태와 제품 식별 표식에 사용합니다.

권장 조합

채움 배경에는 흰색 전경을 사용합니다. 이 조합의 명암비는 8.30:1입니다.

사용 제한

다크 표면 위 작은 글자·아이콘이나 오류·경고 상태를 색상만으로 표현하지 않습니다.

Theme 01

Night

Default

실시간 모니터링과 집중 읽기를 위한 기본 다크 테마

Canvas--bg-primary#0b1020

Surface--bg-card#151b2e

Raised--bg-elevated#1d2538

Border--border-color#293347

Text--text-primary#f4f7fb

Muted--text-muted#77849a

Theme 02

Daylight

Optional

긴 기사와 밝은 환경에서 편안한 라이트 테마

Canvas--bg-primary#f7f8fb

Surface--bg-card#ffffff

Raised--bg-elevated#e5e9f0

Border--border-color#d7dce5

Text--text-primary#121826

Muted--text-muted#69758a

Theme-aware site chrome

상단 UI도 콘텐츠와 같은 테마를 따릅니다

홈 지도 위 헤더, 속보, 시장 보드는 하나의 상단 UI 계약을 공유합니다. Night와 Daylight 모두 같은 위계와 상태 의미를 유지해야 합니다.

상단 헤더와 상태 보드의 표면색을 컴포넌트에 직접 입력하지 않습니다.
:root의 Night 값과 html.light의 Daylight 값을 항상 함께 정의합니다.
속보 레이블처럼 의미가 있는 강한 색상은 상태 토큰과 전용 전경 토큰을 사용합니다.
로그인 여부와 관계없이 주요 메뉴에서 현재 테마와 반대 테마로 전환할 수 있어야 합니다.

NightDefault

메뉴SBH News

속보주요 현황을 빠르고 선명하게 전달합니다

MarketKOSPI+0.84%

DaylightOptional

메뉴SBH News

속보주요 현황을 빠르고 선명하게 전달합니다

MarketKOSPI+0.84%

--site-chrome-bg: 속보·시장 보드의 전체 표면
--site-chrome-cell-bg: 보드 내부 셀의 기본 표면
--site-chrome-cell-hover: 보드 내부 셀의 hover 표면
--site-chrome-border: 보드 외곽선
--site-chrome-cell-border: 보드 내부 셀 외곽선
--site-chrome-divider: 셀 내부 구분선
--site-chrome-text: 상단 보드의 기본 전경
--site-header-home-bg: 홈 지도 위 헤더 배경
--site-header-home-border: 홈 지도 위 헤더 구분선
--site-header-home-shadow: 홈 지도 위 헤더 그림자

Brand & action

Sensor Purple을 중심으로 보조 퍼플과 시안을 역할에 맞게 사용합니다.

Sensor Purple#3b06f5

핵심 브랜드, 주요 행동·선택 상태

Supporting Purple#7167d8

보조 강조, 데이터 시각화

Cyan#36d3c8

실시간 신호, 포커스

Status

상태색은 아이콘, 레이블, 문구와 함께 사용합니다.

Critical--accent-red

Information--accent-blue

Watch--accent-yellow

Warning--accent-orange

Positive--accent-green

Map categories

지도 범례는 위치와 형태를 함께 사용해 색각 차이를 보완합니다.

분쟁

외교

경제

재난

스포츠

일반

Semantic theme contractCSS

:root {
  --accent-sensor: #3b06f5;
  --site-chrome-bg: rgba(3, 7, 18, 0.92);
  --site-chrome-cell-bg: rgba(15, 23, 42, 0.82);
  --site-chrome-text: #dbe5f2;
  --site-header-home-bg: linear-gradient(...);
}

html.light {
  --site-chrome-bg: rgba(247, 248, 251, 0.94);
  --site-chrome-cell-bg: rgba(255, 255, 255, 0.88);
  --site-chrome-text: var(--text-primary);
  --site-header-home-bg: linear-gradient(...);
}

/* Component code uses meaning, not a fixed color. */
.story-card {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.story-card:focus-visible {
  outline: 2px solid var(--brand-cyan);
  outline-offset: 3px;
}

.primary-action {
  background: var(--accent-sensor);
  color: #ffffff;
}

.site-header--home {
  background: var(--site-header-home-bg);
}

.split-flap-board {
  background: var(--site-chrome-bg);
  color: var(--site-chrome-text);
}

.split-flap-cell {
  background: var(--site-chrome-cell-bg);
}

03 / Typography

읽는 속도에 맞춘 위계

본문과 제목은 Pretendard를 사용합니다. 코드와 정렬이 필요한 숫자는 시스템 모노스페이스를 쓰고, 그 안의 한글은 Pretendard로 표시합니다. 글꼴을 받지 못하면 Apple SD Gothic Neo와 맑은 고딕을 사용합니다.

Headline / 800

뉴스의 핵심은
한 번에 읽혀야 합니다.

Body / 400

복잡한 국제 정세도 짧고 정확한 문장으로 설명합니다. 문단 폭은 편안한 읽기를 위해 제한하고, 줄 간격은 본문 크기의 1.65배를 기준으로 합니다.

역할토큰 / 크기굵기용도

Display

--type-display
clamp(2.75rem, 7vw, 6rem)

800

페이지의 단 하나뿐인 메시지

Headline

--type-headline
2rem

750

주요 기사와 섹션 제목

Title

--type-title
1.25rem

700

카드와 모듈 제목

Body

--type-body
1rem

400

본문과 주요 설명

Compact body

--type-body-compact
0.9375rem

500

카드 제목과 밀도 높은 본문

Supporting

--type-supporting
0.8125rem

400

도움말과 보조 설명

Meta

--type-meta
0.75rem

650

출처, 시각, 상태 정보

Label

--type-label
0.6875rem

700

카테고리와 짧은 데이터 레이블

Badge

--type-badge
0.625rem

700

속보와 접근 권한 등 짧은 배지

04 / Spacing

4px에서 시작하는 리듬

간격은 화면 밀도가 달라져도 관계를 설명해야 합니다. 같은 그룹은 가깝게, 다른 의미는 더 멀리 배치합니다.

space-14px

space-28px

space-312px

space-416px

space-624px

space-832px

space-1248px

space-1664px

0–4px

편집 면, 데이터 표, 속보

8px

카드, 버튼, 입력 필드

999px

선택 필터, 접근 권한

05 / Components

조용하지만 분명한 인터페이스

한 화면에 강한 버튼은 하나만 둡니다. 선택지의 중요도는 색보다 배치, 문구, 채움 여부로 구분합니다.

ButtonsDefault · Hover · Focus · Disabled

Live signal

LIVE

흑해 항로 운항 상황

3분 전 갱신 · 출처 4개

Metadata, states & access

국제분석업데이트됨읽는 시간 4분

PREMIUMBUSINESS

· Premium 기능은 왕관 아이콘, PREMIUM 레이블, Sensor Purple 채움으로 표시합니다.
· Business 기능은 빌딩 아이콘, BUSINESS 레이블, Cyan 채움으로 표시합니다.
· 플랜 칩은 색상만으로 의미를 전달하지 않으며 장식용 태그나 콘텐츠 카테고리에 사용하지 않습니다.
· 기능 제목 옆에는 작은 크기, 페이지·게이트의 핵심 안내에는 중간 또는 큰 크기를 사용합니다.

06 / Editorial patterns

기사의 중요도를 형태로 설명합니다

모든 기사가 같은 크기로 소리치지 않도록 중요도, 최신성, 콘텐츠 유형에 따라 반복 가능한 편집 패턴을 사용합니다.

WORLD / EXPLAINED

오늘의 핵심 · 8분

변화의 방향을 이해하는 데 필요한 다섯 가지 신호

사건보다 중요한 것은 사건들이 연결되는 방식입니다. 핵심 지표와 현장 정보를 함께 살펴봅니다.

SBH News Desk10:24 KST 업데이트

MARKETS

위험 선호가 바뀌는 세 가지 데이터

데이터 브리핑 · 4분

MAP

실시간 지도에서 확인된 이동 경로

지도 브리핑 · 방금 전

BACKGROUND

이 이슈를 처음 보는 독자를 위한 맥락

배경 설명 · 6분

Headline first

제목은 결과나 변화를 먼저 말하고 수식어를 줄입니다.

Source visible

출처와 갱신 시각을 사용자가 찾기 전에 보여줍니다.

Uncertainty honest

확인 중인 정보는 완결된 사실처럼 표현하지 않습니다.

07 / Accessibility

접근성은 품질 기준입니다

마지막에 확인하는 체크리스트가 아니라 기획, 디자인, 구현 전 과정에서 지켜야 하는 제품 요구사항입니다.

기본 목표

WCAG 2.2

본문 텍스트와 배경은 WCAG AA 명암비를 충족합니다.
색상만으로 속보, 상승·하락, 선택 상태를 전달하지 않습니다.
키보드 포커스는 2px 이상의 분명한 외곽선으로 표시합니다.
동작 요소의 최소 터치 영역은 44 × 44px을 유지합니다.
라이브 갱신과 움직임은 사용자가 줄이거나 멈출 수 있어야 합니다.
출처와 갱신 시각은 보조 정보여도 스크린 리더에서 빠지지 않습니다.

Clear signal.Calm interface.