홈 대표 시스템 소개 컬러 타이포그래피 아이콘 레이아웃 · 스페이싱 글래스 · 블러 카탈로그 · 53 폼 · 입력 액션 · 버튼 내비게이션 오버레이 데이터 표시 피드백 · 상태 레이아웃 디자인 원칙

Foundations

레이아웃 · 스페이싱

4px 베이스 그리드 위에서 모든 화면이 같은 컨테이너 · 헤더 · 사이드바 · 푸터 구조를 공유합니다. 아래는 사이트 셸 전체의 단일 기준입니다.

정렬 시스템

디자인 시스템 전 페이지가 따르는 단 하나의 정렬 기준. 새 페이지는 아래 토큰만 조합합니다.

페이지 헤더

ds_head()

모든 페이지 상단 동일 — 아이브로 · H1 · 리드. 좌측 정렬 고정.

섹션 헤더

ds_sec()

text-xl · 좌측 정렬 · 아래 여백 20px(mb-5).

섹션 리듬

space-y-16

섹션 사이 수직 간격은 항상 64px.

데모 카드

.ds-card

라운드 16px · 패딩 24/32px. 모든 예시 박스 공통.

카드 그리드

gap-4

카드형 그리드 거터 16px, 조밀한 타일은 gap-3(12px).

데모 폭

max-w-lg

단일 패널 데모 512px · 폼 필드 max-w-sm(384) · 표·그리드·칩 행은 풀폭.

그리드 시스템

헤더 pill·본문·푸터가 같은 1320px 공통 컨테이너(px-5 lg:px-8)를 공유하고, 문서·앱 셸은 그 안에서 238px 사이드바 + 본문 2단. 모든 배치는 12-컬럼을 기준으로 합니다.

공통 컨테이너

max-w-[1320px]

헤더 pill · 본문 · 푸터 공통. 좌우 여백 px-5 lg:px-8.

문서 · 앱 셸

max-w-[1320px]

같은 컨테이너 안에 사이드바 238px + 본문 2단.

셸 거터

lg:gap-12

사이드바와 본문 사이 48px.

본문 그리드

grid-cols-12

카드·메가메뉴 배치 기준. 거터 8–24px.

메가메뉴

12-col

비주얼 3 · 서비스 5 · 솔루션 4 컬럼.

12-column · gap 8–24px

238px

사이드바

1fr

본문 · 12-column

max-w-[1320px] · lg:gap-12

콘텐츠 얼라인

헤더 · 본문 · 푸터는 모두 동일한 max-w-[1320px] + px-5 lg:px-8 컨테이너에 정렬합니다. 떠있는 글래스 헤더 pill의 외곽선이 사이드바·콘텐츠·푸터의 좌우 가장자리와 한 줄로 맞고, 푸터 브랜드 로고는 pill 내부 패딩(16/20px)만큼 들여써 헤더 로고와 같은 세로선에 떨어집니다. 우측 끝은 세 영역 모두 본문 가장자리에 정렬합니다.

헤더 pill glass

238

레일

푸터

헤더 pill · 본문 · 푸터 = 같은 좌우 기준선 (max-w-[1320px] · px-5 lg:px-8)

공통 컨테이너

max-w-[1320px] mx-auto

헤더 pill · 본문 · 푸터가 모두 같은 1320px 중앙 정렬 박스를 공유.

공통 거터

px-5 lg:px-8

좌우 여백 20px(데스크톱 32px) — 헤더·본문 동일.

헤더 정렬

pill = 컨테이너 100%

떠있는 글래스 pill 외곽선을 본문·푸터의 좌우 가장자리에 맞춤.

로고 라인

pill 내부 패딩 16/20px

푸터 브랜드 로고를 헤더 로고와 같은 세로선에 정렬(좌측 들여쓰기).

우측 가장자리

한 줄 정렬

헤더 · 본문 · 푸터의 우측 끝이 모두 같은 선. 어긋남 금지.

스페이싱 스케일

모든 간격은 4의 배수. Tailwind 스텝과 1:1로 대응합니다.

4px

8px

12px

16px

24px

32px

40px

64px

헤더

최상단 공지 티커 + 떠있는 글래스 pill 헤더. 모든 마케팅 페이지 공통이며 스크롤해도 14px 띄워 고정됩니다.

New·HOT 100 RADAR 주간 예측 업데이트

ServicesA&RBlog

로그인 무료로 시작

sticky top:14 · 62px · glass blur 18

공지 티커

36px

최상단 — bg mist · 하단 border · 라임 도트 · 자동 마키. 모바일 32px.

고정 위치

sticky · top 14px

스크롤해도 14px 띄워 떠있음. 모바일 top 8px.

폭

공통 컨테이너 콘텐츠 폭

pill 외곽선을 본문·푸터 좌우 기준선에 정렬(base 100%−40 · lg 100%−64). 떠있는 pill 스타일은 유지.

높이

62px

내부 그리드 1fr · auto · 1fr. 모바일 56px.

표면

glass · blur 18px

rgba(255,255,255,.82) · radius 16 · shadow 0 8px 30px.

구성

좌 내비 · 중앙 심볼 · 우 CTA

CTA = Dark+Lime pill 40px.

반응형

< 1024 내비 숨김

햄버거(38px) → 풀스크린 메뉴.

하위 헤더

사이트 헤더 아래, 콘텐츠 안의 제목 위계. 페이지 헤더(H1)는 페이지당 하나, 섹션 헤더(H2)는 섹션마다. 둘 다 좌측 정렬.

ds_head() · H1

Foundations

타이포그래피

NanumSquare 기반 타입 스케일과 웨이트 운용.

ds_sec() · H2

타입 스케일

화면 기준 7단계. 모바일에서는 한 단계 작게 운용합니다.

페이지 헤더

ds_head()

아이브로 11px·0.3em · H1 4xl–5xl · 리드 18px · 하단 border-b.

헤더 여백

mb-12 pb-8

본문과 48px · 구분선 위 32px.

섹션 헤더

ds_sec()

H2 text-xl · 설명 13px · 아래 mb-5.

위계

H1 → H2

페이지당 H1 하나, 섹션마다 H2.

사이드바

문서·앱의 좌측 내비게이션 레일. 238px 고정, 활성 항목은 퍼플 틴트 배경 + 퍼플 아이콘. 1024px 미만에서는 상단 가로 스크롤 탭으로 전환됩니다.

파운데이션

레이아웃 타이포그래피 아이콘

238px · sticky top-28 · bg-accent/8

폭

238px

데스크톱 좌측 고정 레일.

고정

sticky · top-28

스크롤해도 따라옴 · 자체 세로 스크롤.

그룹

라벨 10px·0.22em

시작하기 · 파운데이션 · 컴포넌트 · 가이드라인.

항목

.ds-rail-link

13.5px · 아이콘 + 라벨.

활성

bg-accent/8

퍼플 틴트 배경 · 퍼플 아이콘 · 볼드.

모바일

가로 스크롤 탭

< 1024 레일 → 상단 sticky pill 탭.

푸터

옅은 회색 면 위 4-컬럼 — 브랜드 · Services · Company · Get started. 하단에 법인 정보·면책·카피라이트 블록이 구분선으로 분리됩니다.

Services

Smartlinks
Analytics
Insight

Company

About
Contact
Blog

Get started

무료 시작

표면

bg-mist · border-t

본문과 분리되는 옅은 회색 면.

컨테이너

max-w-[1320px] · py-16

셸과 동일 폭. 좌측은 헤더 로고 라인에 들여쓰고, 우측은 본문 가장자리에 정렬.

상단 그리드

4-col · gap-10

브랜드 · Services · Company · Get started.

컬럼 헤드

10px·0.3em uppercase

dim · mb-4 — 메가메뉴·푸터 공통 라벨.

링크

13px · space-y-2.5

dim → ink 호버.

법적 고지

border-t · 11–12px

회사 정보 · 면책 · 카피라이트 블록.

라운드

버튼·뱃지는 pill, 카드는 md(16px), 큰 패널은 lg(24px).

8px

16px

24px

pill

999px

브레이크포인트

모바일 우선. 1024px에서 사이드바 2단 레이아웃으로 전환됩니다.

Mobile

~640px

단일 컬럼 · 헤더 56px · 사이드바→가로 탭

Tablet

640–1024px

2 컬럼 · 데스크톱 내비 숨김(햄버거)

Desktop

1024px~

사이드바 238px + 본문 · max 1320px