07 · 시스템 소개
UI/UX 가이드라인 소개Guideline Overview
이 디자인 시스템의 문서는 다섯 겹으로 쌓여 있습니다. 아래로 내려갈수록 구체적이고, 위로 올라갈수록 보편적입니다. 역할과 필요에 따라 진입 지점을 다르게 잡으세요.
5겹 구조
- 01
시작하기
저장소 구조 · 토큰 · 기본 셸 · 개편 참여자 역할. 이 시스템 위에 바로 화면을 쌓기 위한 첫걸음.
- 02
디자인 스타일
색 · 타이포 · 아이콘 · 모양 · 간격 · 엘리베이션 · 고대비 · 토큰. 시각 언어의 기초.
- 03
컴포넌트
55개의 재사용 UI 부품. 각 페이지에 개요 · 접근성 · 코드 탭.
- 04
기본 패턴
컴포넌트를 조립해 반복되는 UI 시나리오를 정리. 폼 · 필터 · 오류 등 12개.
- 05
서비스 패턴
여정 단위의 조합(방문 · 로그인 · 헌금 안내 등 12개). 새 프로젝트의 화면 단위 청사진.
역할별 진입 지점
- 디자이너 — 2. 디자인 스타일 → 3. 컴포넌트의 ‘개요’ 탭.
- 프론트엔드 개발자 — 1. 시작하기 → 3. 컴포넌트의 ‘코드’ 탭.
- TF 전문위원 · 기획 담당 — 5. 서비스 패턴 → 4. 기본 패턴. 어떤 화면 구성이 가능한지 먼저.
- 접근성 담당 — 각 컴포넌트의 ‘접근성’ 탭 + 2. 디자인 스타일 > 고대비 · 색.
다루지 않는 것
- 도메인 로직 — 교적 연동 · 지도 API 등 구체적 통합은 별도 문서로.
- 데이터베이스 · 백엔드 — UI에 집중합니다.
- 외부 브랜드 · 타 교회의 시각 자산 — 이 시스템은 주님의교회 PCL 전용으로 커스터마이즈되어 있습니다.