Codelier · Style Guide
화면이 아니라
기준을 넘깁니다
제작이 끝나면 화면만 넘기지 않습니다. 색과 글자, 간격의 기준과 컴포넌트 상태까지 함께 정리해 드립니다.
새로 짓는 일도, 이미 있는 것을 고치고 더하는 일도 합니다. 이 문서는 두 경우 모두에 그대로 적용됩니다.
Color
색은 계산해서 고릅니다
감으로 고르지 않습니다. 배경 위 대비를 직접 계산해 WCAG AA 통과 여부를 배지로 표시합니다.
계산기 자체 확인 — 흰 배경 위 검정 글자 #000000 / #FFFFFF = 21.00:1
Type
글자도 단위가 있습니다
히어로부터 캡션까지 열 단계로 나눴습니다. 크기·행간·자간을 화면 그대로 보여 드립니다.
Foundations
간격은 4px 단위로 뜁니다
간격 여덟 단계, 모서리 반경 다섯 단계, 그림자 네 단계입니다.
간격 스케일
모서리 반경
그림자 단계
Components
컴포넌트는 상태까지 만듭니다
버튼과 입력창은 실제로 눌러 보고 포커스를 옮겨 확인할 수 있습니다.
버튼 · 5상태
기본 · 호버 · 포커스 · 비활성 · 로딩
입력 필드 · 4상태
정상 · 포커스 · 오류 · 비활성
올바른 전화번호 형식이 아닙니다.
ERROR배지
기본 · 성공 · 경고 · 위험 · 정보
알림 · 4종
정보 · 성공 · 경고 · 오류. 닫으면 사라지고 다시 볼 수 있습니다.
이 페이지에 쓰인 색과 간격은 전부 실제 토큰입니다.
변경한 내용이 방금 반영됐습니다.
muted 색은 대비가 낮아 본문에는 쓰지 않습니다.
필수 항목을 채우지 않으면 저장되지 않습니다.
모든 알림을 닫았습니다.
표
브레이크포인트 기준. 넓은 표는 자체 스크롤 컨테이너를 씁니다.
| 이름 | 최소 너비 | 본문 최대 폭 | 용도 |
|---|---|---|---|
| Mobile | 0px | 100% | 기본값. 1열 배치. |
| Tablet | 768px | 720px | 2열 그리드가 시작됩니다. |
| Desktop | 1024px | 960px | 내비게이션 전체가 드러납니다. |
| Wide | 1280px | 1200px | 최대 컨테이너 폭입니다. |
탭
방향키로 이동합니다 — 클릭 없이 Tab, ←/→, Home/End만으로도 됩니다.
이 문서에 있는 값과 컴포넌트는 실제 제작에 쓰는 것을 그대로 옮겼습니다. 색은 대비를 계산해 배지로 표시하고, 각 항목은 복사해 바로 쓸 수 있습니다.
- 본문 텍스트는 배경과 4.5:1 이상을 기본으로 합니다.
- 테두리처럼 의미를 가진 요소는 3:1 이상을 확인합니다.
- 모든 상호작용 요소는 :focus-visible로 키보드 포커스를 표시합니다.
- prefers-reduced-motion을 존중해 움직임을 줄입니다.
.btn {
background: var(--color-brand);
border-radius: var(--radius-md);
}툴팁
호버·포커스로 열리고, 탭에서는 눌러서 엽니다.
Voice
말투도 규격입니다
일 잘하는 사람이 담담하게 설명하는 말투를 씁니다. 사이트마다 톤이 달라도 목소리는 하나입니다.
쓰지 않는 말:
| 이렇게 쓰지 않습니다 | 이렇게 씁니다 |
|---|---|
| 최고의 퀄리티로 제작해 드립니다 | 하나하나 직접 만듭니다 |
| 고객님의 니즈에 맞춘 맞춤형 솔루션 | 원하는 것을 원하는 모양으로 |
| 합리적인 가격으로 | 4단계만 고르면 개략 범위가 나옵니다 |
| 지금 바로 문의하세요! | 이야기부터 시작해요 |