디자인 핸드오프 체크리스트: 개발 전에 전달할 것

디자인 핸드오프의 기준은 개발자가 화면을 보며 의도를 추측하지 않아도 되는 상태입니다. 사용자 목표, 컴포넌트 규칙, 상태, 에셋, 검수 조건을 하나의 구현 준비 파일에 정리하세요.

먼저 Pixso 프로토타입으로 핵심 경로를 보여 주고, 화면만으로 전달되지 않는 결정은 프레임 옆에 기록합니다.

1. 범위와 사용자 목표 정하기

화면이 지원하는 작업, 진입점, 성공으로 판단할 결과를 먼저 씁니다. 제외 범위도 함께 적으면 완성된 목업이 모든 예외를 포함한 사양으로 오해되지 않습니다.

2. 컴포넌트와 변형 규칙 기록하기

재사용 컴포넌트마다 목적, 필수 속성, 허용된 변형, 텍스트 제한을 적습니다. 기본값과 의도적으로 선택한 값을 구분하고 비활성, 포커스, 선택, 권한 제한 상태도 보여 주세요.

3. 상태·반응형·접근성 보여 주기

로딩, 빈 화면, 오류, 성공, 부분 결과를 같은 흐름에 연결합니다. 화면이 좁아지거나 문장이 줄바꿈될 때, 키보드로 이동할 때의 동작도 확인하세요. 짧은 임시 문구만 사용하면 오버플로와 번역 문제를 놓치기 쉽습니다.

4. 에셋·토큰·내보내기 정보 준비하기

에셋 이름, 출처, 사용처, 형식을 사용하는 프레임 옆에 적습니다. 색상·타이포그래피·간격·그림자는 원시 값을 반복하지 말고 토큰을 참조하세요. 자르기, 대체 이미지, 다크 모드 버전이 필요하면 조건을 명확히 합니다.

5. 검수 근거와 담당자 정하기

미해결 질문을 확인 조건, 기대 결과, 승인자로 바꿉니다. 결정이 바꾸는 프레임이나 프로토타입 전환도 연결하세요. 아직 가정인 내용은 승인된 요구사항처럼 표현하지 않는 것이 중요합니다.

파일 전달로 리뷰를 끝내지 않기

개발 전에 제품·개발 팀과 핵심 경로를 함께 확인하고 위험이 큰 미확정 사항부터 해결하세요. 구현으로 화면이 바뀌면 영향을 받는 결정과 체크 항목도 업데이트합니다.

Pixso에서 핸드오프 준비하기 →