01 · Getting Started
디자이너 가이드For Designers
수행사 디자이너가 이 문서를 참고해 주님의교회 PCL 홈페이지 시안을 작업하는 네 단계. 이 사이트는 지시서이며, Figma 라이브러리와 시안은 수행사가 자체 환경에서 직접 제작합니다.
네 단계 워크플로우
- 01
디자인 스타일 숙지
색 · 타이포 · 간격 · 엘리베이션 — 토큰 이름과 쓰임새를 먼저 익힙니다. 교회가 정한 시각 언어의 기초이며, 시안 전반이 이 위에 얹힙니다.
디자인 스타일 보기 - 02
자체 Figma에 토큰 옮기기
문서의 토큰 값을 팀 Figma의 컬러 스타일 · 텍스트 스타일 · 이펙트로 옮깁니다. 이 사이트에서 Figma 라이브러리를 내려주지 않으므로 수행사가 자체 환경에 직접 구축하는 것이 기본입니다.
디자인 토큰 - 03
컴포넌트 규격 확인
각 컴포넌트 페이지의 ‘개요’ 탭에서 쓰임새 · 크기 · 상태 · 접근성 규격을 확인합니다. 수행사는 이 규격을 기준으로 Figma 컴포넌트를 제작합니다.
컴포넌트 목록 - 04
서비스 패턴으로 화면 시안
방문 · 회원가입 · 헌금 안내 등 여정 단위 청사진이 있습니다. 새 화면을 맨바닥에서 그리지 말고 가장 가까운 패턴부터 참고하세요.
서비스 패턴
시작 전 체크리스트
- 01Pretendard Variable을 로컬에 설치했다.
- 02팀 Figma에 문서의 컬러 · 타이포 · 간격 토큰을 스타일로 옮겼다.
- 03컬러는 원시 팔레트(navy-700, blue-500) 대신 시맨틱 이름(brand, accent) 기준으로 스타일을 구성한다.
- 04새 화면을 그릴 때 가장 가까운 서비스 패턴을 먼저 찾아본다.
- 05접근성 대비(AA 4.5:1)는 문서의 시맨틱 색 조합이 충족하므로 임의 컬러를 쓰지 않는다.