인포그랩design-skills

deck-qa 가이드

슬라이드를 1920×1080으로 렌더해 글자, 대비, 여백을 잴 때

한 줄 결과물: 1920x1080으로 렌더해 잰 장별 표(가장 작은 글자, 대비 미달, 하단 y, 빈 면 비율)와 문제 목록. 덱은 고치지 않는다.

스킬 본문: ../../deck-qa/SKILL.md

언제 쓰나

  • 고객이나 내부에 내보내기 전에 덱의 여백, 글자 크기, 대비, 잘림, 빈 면을 점검할 때
  • 테마 문제인지 덱 문제인지 원인을 가를 때
  • 쓰지 않을 때: 문구와 사실 검수, PDF 내보내기 품질

샘플

덱 검수: 측정 표시가 얹힌 슬라이드와 장별 표

입력값
렌더 조건뷰포트 1920x1080, 배율 1
옵션{"minFont": 14, "bodyFont": 16, "bottomLimit": 1000}
보이는 것기준 미만 글자 11px(빨강), 하단 한계선, 두 열 바닥 어긋남 24px(파랑)
요약 한 줄"3장 먼저 수정, 문구 변경 없이 해결 가능"

표의 숫자는 모양을 보여 주는 예시다. 실제 검수에서는 모든 숫자에 단위와 "측정/환산/미확인"을 붙인다.

따라하기

  1. 렌더 조건을 고정한다. 브라우저 자동화 도구로 덱을 1920x1080, 배율 1로 연다. 단계별로 나타나는 장은 첫 단계와 마지막 단계를 따로 렌더한다.
    deck-qa 스킬로 <덱 HTML 경로>를 검수해 줘.
테마 규칙: 본문 16px 이상, 하단 한계선 y=1000. 덱과 테마는 고치지 마.
  2. 장마다 측정한다. deck-qa/scripts/measure.js는 page.evaluate에 넘기는 함수 식이다.
    옵션 예: {"minFont": 14, "bodyFont": 16, "panelSelector": ".panel", "bottomLimit": 1000, "contentMinX": 120, "contentMaxX": 1800}
  3. 사진·그라데이션 위 글자는 픽셀로 잰다.
    python3 deck-qa/scripts/png_region_contrast.py slide01.png --bbox 120,980,1680,60 --fg '#FFFFFF'
    --bbox는 x,y,w,h(화면 픽셀), --fg는 글자색, --need는 기준 대비(기본 4.5)다.하위 5%와 중앙값을 함께 보고하고, 같은 조합이 반복되면 문제 수가 아니라 조합 수로 센다.
  4. 원인을 가른다. 테마가 만든 문제, 덱이 테마를 어긴 문제, 문서끼리 어긋난 문제로 나눈다.
  5. 보고서를 쓴다. 요약, 핵심 숫자, 문제, 장별 표, 사람이 결정할 것, 확인하지 못한 것 순서. 문구 변경이 필요한 해결책은 따로 표시한다.

흔한 실패

  • 서로 다른 단위의 개수를 합친다(문제 행 수, 장 수, 요소 수). 단위를 적고 따로 둔다.
  • 최종 단계만 보고 빈 면 비율을 판정한다. 첫 단계를 본다.
  • 이미지 속 글자를 실측이라고 쓴다. 원본 글자 크기 x 배율로 환산하고 "환산치"로 표시한다.
  • 검수하면서 덱을 고친다. 이 스킬은 읽기 전용이다.

다음 스킬