01 · Getting Started
개발자 가이드For Developers
주님의교회 PCL 디자인 시스템을 프로젝트에 연결하는 네 단계. 새 프로젝트는 30분, 기존 프로젝트에 이식하는 경우 반나절이 목표입니다.
네 단계 셋업
- 01
저장소 포크 혹은 생성
기존 Next.js 앱에 주님의교회 PCL 디자인 시스템을 이식하는 경우와, 새 프로젝트를 이 저장소를 클론해 시작하는 경우 두 갈래입니다. 클론이 업데이트 병합이 쉽습니다.
저장소 링크 - 02
토큰 · 폰트 복사
app/globals.css의 --color-* · --text-* · --radius-* 토큰 블록을 프로젝트에 가져옵니다. Pretendard Variable은 CSS import 한 줄로 끝납니다.
디자인 토큰 - 03
컴포넌트 이식
필요한 컴포넌트만 components/ui/*에서 복사합니다. 각 컴포넌트 페이지의 ‘코드’ 탭에 의존성과 usage가 정리되어 있습니다.
Button 예시로 보기 - 04
접근성 기본값 확인
키보드 포커스 · aria 속성 · prefers-reduced-motion은 컴포넌트에 내장돼 있습니다. 오버라이드 시 반드시 동등한 대체 수단을 제공하세요.
디지털 포용
최소 설치 명령
기존 Next.js 앱에 토큰 · 폰트 · 기본 컴포넌트만 얹는 가장 짧은 경로입니다.
# 1. 저장소 클론 (참고용)
git clone https://github.com/designloversko-ctrl/foundry.git
# 2. 필수 의존성
npm install pretendard lucide-react
# 3. 토큰 · 폰트 import
# app/globals.css 상단에 추가
@import "pretendard/dist/web/variable/pretendardvariable.css";
# 그리고 주님의교회 PCL의 @theme 블록을 복사
# 4. 개발 서버
npm run dev권장 스택
- Next.js 16 (App Router)정적 프리렌더 기본. 서버 컴포넌트 경계 유지.
- Tailwind CSS v4--color-* CSS 변수 기반. @theme 블록으로 토큰 확장.
- Pretendard Variable한글 + Latin 포함. font-weight 다이내믹 대응.
- Lucide React아이콘 트리셰이킹 기본. size · strokeWidth 일관.
- TypeScript strict컴포넌트 props 타입은 명시적 export 권장.
코드 컨벤션
- 컴포넌트 파일은 PascalCase, 훅 · 유틸은 kebab-case.
- inline className에서 컬러는
text-[color:var(--color-text)]패턴으로 CSS 변수를 참조합니다. Tailwind 기본 팔레트는 쓰지 않습니다. - 서버 컴포넌트를 기본. 이벤트 핸들러가 있는 컴포넌트만
"use client". - 접근성 속성(aria-label · role)은 협상하지 않습니다. 디자인이 방해하면 디자인을 고칩니다.