07 · 시스템 소개
디자인 원칙Design Principles
주님의교회 PCL 디자인 시스템이 판단을 내리는 6가지 기준. 새 컴포넌트를 설계할 때 · 기존 컴포넌트를 변경할 때 · 패턴을 새로 정의할 때 — 이 원칙을 기준으로 토론합니다.
6가지 원칙
- 01
에디토리얼 밀도
정보는 잡지처럼 위계가 있어야 합니다. 한 화면에 같은 굵기의 텍스트만 쌓지 않습니다. 제목 · 리드 · 본문 · 캡션의 네 층을 유지합니다.
밀도가 낮으면 스크롤이 길어지고, 밀도가 높으면 눈길이 길을 잃습니다. 적정 밀도는 시선의 리듬에서 나옵니다.
- 02
접근성 기본값
AA 수준의 대비와 키보드 내비게이션은 기본 컴포넌트에 내장합니다. 개발자가 옵션을 켜야 동작하는 접근성은 곧 꺼지는 접근성입니다.
접근성은 후보정이 아니라 구조 선택입니다. 기본값이 옳으면 대부분의 화면이 자동으로 안전해집니다.
- 03
타이포 우선
화려한 그래픽보다 정돈된 글자를 먼저 봅니다. Pretendard · Instrument Serif · JetBrains Mono 세 패밀리로 한글 · 숫자 · 영문의 리듬을 만듭니다.
UI는 결국 글자의 배치입니다. 타이포가 흔들리면 어떤 색 보정으로도 회복되지 않습니다.
- 04
절제된 색
강조색은 한 번에 하나. 페이지 안에 다섯 개의 빨강이 있다면 어느 것도 강조가 아닙니다. 무채색 70% · 브랜드 20% · 시맨틱 10% 비율을 기본으로 합니다.
색을 아껴 쓸수록 클릭해야 할 지점이 분명해집니다. 색은 장식이 아니라 길잡이입니다.
- 05
여백은 구조
간격은 감각이 아니라 체계입니다. 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 px 스케일 안에서만 고릅니다. 변칙은 반드시 토큰으로 남깁니다.
여백이 규칙을 따르면 서로 다른 사람이 만든 화면도 한 사이트처럼 보입니다.
- 06
복잡함은 레이어로
한 컴포넌트에 옵션을 10개 쌓기보다, 단순한 컴포넌트를 조립합니다. Modal 안에 Form을, Form 안에 Field를 — 구성 요소의 수직 조립을 우선합니다.
플래그가 많아지면 컴포넌트는 곧 블랙박스가 됩니다. 조립은 읽기 쉽고 수정 범위도 좁습니다.
원칙이 충돌할 때
두 원칙이 부딪히면 접근성 기본값이 가장 우선입니다. 그 다음은 에디토리얼 밀도, 그리고 타이포 우선. 나머지 셋은 상황에 따라 조정할 수 있습니다. 이 순서는 “사용자가 읽고 쓸 수 있어야 한다”는 명제에서 나옵니다.
원칙을 깨야 할 이유가 있다면, 그 이유를 변경 사유에 남깁니다. 원칙은 금기가 아니라 기본 선택지입니다.