가이드라인

06. 가이드라인

Figma Make를 팀에서 효과적으로 사용하기 위한 운영 가이드라인입니다.

•

명확한 역할/맥락 부여: "B2B 대시보드의 사용자 관리 페이지"

•

디자인 토큰 명시: "Primary는 #2563EB, 폰트는 Pretendard"

•

컴포넌트 단위 요청: 페이지 통째 요청보다 섹션별 분할

•

반복 개선: 한 번에 완성하려 하지 말고, 채팅으로 점진적 다듬기

"Tailwind 기반으로 Card 컴포넌트를 만들어줘. Props는 title, description, footer slot, variant(default/elevated/outlined). 다크모드 지원."

"예쁜 카드 만들어줘"

•

항상 토큰 우선: HEX/px 직접 사용 금지

•

기존 컴포넌트 재사용 명시: "기존 Button 컴포넌트 사용해서 ..."

•

네이밍 일관성: Figma Design  Make  Code 동일 이름

역할	활동
기획자	Make로 빠른 와이어프레임 → 검증
디자이너	Make 결과를 Figma Design으로 가져와 폴리싱 → 라이브러리화
개발자	GitHub 연동된 Make 코드 → 본격 개발 환경으로 이관

•

Make 생성 코드는 항상 코드 리뷰 후 메인 브랜치 병합

•

의미 없는 div 중첩, 인라인 스타일 남발 등을 정리

•

접근성(a11y): aria 속성, 시맨틱 태그 검증

•

성능: 불필요한 리렌더, 큰 이미지 등 점검

•

환경 변수에 민감 정보 저장 (코드 직접 하드코딩 금지)

•

Supabase 등 외부 서비스 키는 anon/public 키만 클라이언트 노출

•

게시(Publish) 전 console.log, 디버그 코드 제거

•

중요 마일스톤마다 GitHub Push로 버전 보존

•

Make 자체 버전 기록도 활용 (Publish 단위 스냅샷)

•

디자인 키트는 SemVer로 별도 관리

•

고도로 커스텀한 인터랙션 (3D, 캔버스 게임 등) — 직접 코딩 권장

•

엄격한 접근성 요구사항 — 수동 검증 필수

•

민감/규제 데이터 처리 — 검증된 백엔드 환경 사용

디자인 키트 토큰을 정의해본다

Make → Figma Design 복사를 실습한다

GitHub 연동 후 PR을 1회 생성한다

Supabase 연동으로 CRUD 페이지 1개를 만든다

게시한 URL을 팀에 공유한다