방향 결정
- 구조
- 분위기
- 디테일
서로 다른 근거가 하나의 시각 방향으로 모입니다.
레퍼런스를 역할별로 분리한 뒤, 필요한 결정만 한 방향으로 결합합니다.
AI 코딩에디자인을 더합니다
레퍼런스를 조사해 방향을 정하고, 디자인 토큰부터 반응형 구현과 프리플라이트 검증까지 일관된 절차로 연결합니다.
npx designpaca 정한 기준이 코드와 검사까지 이어집니다
레퍼런스에서 고른 원칙은 결정 기록에 남고, 디자인 토큰과 구현 규칙이 되며, 마지막에는 반복 가능한 검사로 확인됩니다.
설계 예시 보기디자인파카 결과 표본 세 가지
토큰과 조판
- 바탕
- --surface
- 본문
- --ink
- 신호
- --accent
글자, 색의 역할, 간격을 다시 쓸 수 있는 제약으로 정리합니다.
검사 계약
- 제목 줄 수
- 콘텐츠 여백
- 색 대비
- 키보드 경로
완료 전에 같은 기준을 좁은 화면, 중간 화면, 넓은 화면에서 실제 수치로 검사합니다.
일곱 단계로 판단과 구현을 연결합니다
각 단계는 다음 작업에 필요한 결정을 남기고, 구현이 임의의 기본값으로 돌아가는 것을 막습니다.
- 0
브리프 게이트
목표, 사용자, 필수 기능, 언어와 제약을 확정해 흔들리지 않는 출발점을 만듭니다.
- 1
레퍼런스 조사
같은 문제를 푼 실제 사례를 조사해 적용할 원칙과 피해야 할 관습을 구분합니다.
- 2
방향 결정
시각 방향, 정보 위계와 감수할 위험을 정해 한 가지 설계 언어로 좁힙니다.
- 3
디자인 토큰과 예산
색, 서체, 간격, 모션과 성능 한계를 실제 값으로 정의합니다.
- 4
구현
정한 원칙을 반응형 레이아웃, 재질, 상호작용과 접근 가능한 상태로 구현합니다.
- 5
프리플라이트 감사
화면 폭, 대비, 키보드, 메타데이터, 토큰과 성능을 반복 가능한 검사로 확인합니다.
- 6
결정 기록
채택한 결정과 제외한 선택의 근거를 기록해 다음 작업에서도 품질 기준을 이어갑니다.
결과를 검증하고 기록합니다
반응형, 접근성, 토큰 위생과 메타데이터를 같은 기준으로 반복 검사합니다.
- 7 설계 단계
- 브리프부터 결정 기록까지 0부터 6까지의 단계를 순서대로 수행합니다.
- 15 하드 게이트
- 오버플로, 대비, 토큰, SEO와 죽은 코드를 완료 전에 확인합니다.
- KO / EN 동등한 콘텐츠 구조
- 한국어와 영어가 같은 정보 구조와 주요 행동을 공유합니다.
검증 항목 자세히 보기
- 핵심 콘텐츠가 320px 화면에서도 잘리거나 겹치지 않는지 확인합니다.
- 제목, 본문과 버튼의 간격 및 정렬이 토큰 체계를 따르는지 확인합니다.
- 텍스트와 인터페이스 색의 대비를 측정합니다.
- 키보드만으로 내비게이션과 주요 행동을 완료할 수 있는지 확인합니다.
- 이미지가 목적에 맞게 contain 또는 cover로 표시되는지 확인합니다.
- 메타데이터, 언어, 대체 텍스트와 ARIA 라벨이 실제 화면과 일치하는지 확인합니다.
- 죽은 선택자, 정의되지 않은 토큰과 불필요한 스크립트를 찾습니다.