인포그랩design-skills

handoff-to-dev 가이드

디자인을 토큰, 상태 행렬, 예외까지 담은 개발 명세로 넘길 때

한 줄 결과물: 토큰 대응 표, 상태 행렬 9칸, 극단 데이터, 접근성 수용 조건, 열린 항목([open], [drift])을 담은 개발 인수 명세.

스킬 본문: ../../handoff-to-dev/SKILL.md · 템플릿: ../../handoff-to-dev/templates/handoff.md

언제 쓰나

  • 새 화면이나 컴포넌트를 개발에 넘기기 전
  • 구현 결과를 디자인 의도와 대조할 때(구현 후 검수는 ui-review)
  • 쓰지 않을 때: 코드 작성 자체, 일정 협의

샘플

개발 인수 명세: 토큰 대응, 상태 행렬, 열린 항목

입력값
대상알림 설정 카드
토큰 대응제목 글자는 text-primary(#14213d/#ffffff 15.97:1), 행동 버튼은 color-action(#328523/#ffffff 4.65:1), 여백은 space-4(16px)
토큰 없음"토큰 없음, 제안" 칸에 따로 적는다
상태 행렬기본, 호버, 포커스, 눌림, 비활성, 로딩, 빈 상태, 오류, 성공 아홉 칸
열린 항목[open] 오류 문구(결정 주체: 카피 담당), [drift] 간격(정본: 디자인 파일)
이 명세에 없는 것다크 모드, 알림 이력 화면

토큰 이름은 모양을 보여 주는 예시다. 실제로는 제품의 토큰 정본에서 찾은 이름만 쓴다. 대비 15.97:1과 4.65:1은 contrast.py로 계산한 값이다.

따라하기

  1. 템플릿을 복사한다.
    cp handoff-to-dev/templates/handoff.md ./handoff-알림설정.md
  2. 범위를 한 문단으로 쓴다. 무엇을, 누구를 위해, 어디까지. "이 명세에 없는 것"을 한 줄 이상 넣는다.
    handoff-to-dev 스킬로 <시안 링크 또는 파일> 의 인수 명세를 만들어 줘.
토큰 정본: <경로>. 정본에 없는 값은 만들지 말고 "토큰 없음, 제안"으로 적어 줘.
  3. 시안 값을 토큰 이름으로 바꾼다. 글자와 바탕 쌍에는 대비 비율을 함께 적는다.
    python3 a11y-audit/scripts/contrast.py '#328523' '#ffffff'
# -  #328523 on #ffffff  =  4.65:1  | 일반 글자 4.5 통과 | 큰 글자·UI 3.0 통과
  4. 상태 행렬을 채운다. 해당 없는 상태는 "해당 없음(이유)"로 적는다. 비워 두지 않는다.
  5. 극단 데이터를 쓴다. 아주 긴 글, 값 없음, 수천 개, 느린 네트워크, 좁은 폭. 각각 기대 동작을 적는다.
  6. 열린 항목을 분리한다. [open]은 미정과 결정 주체, [drift]는 문서와 구현이 다른 곳과 정본.
  7. 완성 점검. 다른 사람이 이 문서만 읽고 구현해도 질문이 남지 않는지 본다. 남을 질문은 열린 항목으로 올린다.

흔한 실패

  • 시안의 색, 크기 값을 그대로 복사한다. 토큰 이름이 정본이다. 본문에서 리터럴을 검색해 토큰 표 밖에서 0건이어야 한다.
  • "상황에 맞게", "자연스럽게"처럼 명세가 아닌 표현을 쓴다. 기준 값이나 예시로 바꾼다.
  • 열린 항목을 본문에 숨긴다.
  • 개발이 고를 구현 방식(라이브러리)을 요청 없이 정한다.

다음 스킬