asset-size-matrix은(는) 무엇을 하나요?
하나의 마스터로, 모든 슬롯에, 중요한 것은 절대 잘리지 않게, 그리고 각 파일에 대한 영수증까지.
이 스킬이 하는 일
런칭에는 하나의 이미지만 필요한 경우가 거의 없습니다. 링크 프리뷰, 비디오 썸네일, 정사각형 게시물, 세로형 게시물, 3:4 커버, 세로 스토리, 프로필 배너, 앱 아이콘, 레포지토리 프리뷰, 가끔은 세로형 비디오까지 필요합니다. 각각은 고유한 픽셀 크기, 파일 규칙, 그리고 인터페이스 오버레이를 가지고 있습니다. 세로 피드의 오른쪽 '좋아요' 열, 썸네일 모서리의 재생 시간 배지, 배너 위에 겹쳐지는 아바타, 아이콘의 둥근 마스크 등이 그 예시입니다.
사람들은 보통 이 작업을 크롭 박스를 열 번 정도 드래그해서 처리합니다. 그 결과는 익숙합니다: 9:16 버전에서 헤드라인이 반으로 잘리고, 로고가 아바타 아래에 숨고, 4K 마스터에서는 읽을 수 있었던 텍스트가 피드에서는 세 픽셀 높이가 되고, 2.3MB라는 이유로 썸네일이 거절되고, 주변 콘텐츠보다 8dB 더 조용한 쇼츠가 만들어집니다.
이 스킬은 작업을 하나의 표로 만듭니다. 모든 목적지는 숫자와 날짜가 있는 슬롯 카드가 됩니다. 마스터는 한 번 표시됩니다. 어떤 박스가 반드시 살아남아야 하는지. 작은 플래너가 각 슬롯에 대해 해당 박스들이 슬롯의 안전 영역 안에 있게 하는 가장 넓은 크롭을 계산하고, 어떤 크롭도 불가능할 때는 명확히 알려줍니다. 그런 다음 내보낸 모든 파일이 해당 카드와 일치하는지 검사됩니다.
해결하는 문제
- 크롭이 눈대중으로 하나씩 결정되어 일관성이 없고, 왜 특정 크롭이 선택되었는지 아무도 설명할 수 없습니다.
- 안전 영역은 게시물이 라이브가 되고 클릭 유도 문구가 버튼 아래에 가려진 후에야 잊혀집니다.
- "그냥 크롭해"라는 말이 크롭이 통하지 않는 슬롯(넓은 레이아웃을 9:16에 강제로 넣는 경우)에 적용되어, 결과물이 잘리거나 읽을 수 없을 정도로 축소됩니다.
- 텍스트 크기는 마스터에서 판단되며, 슬롯이 실제로 표시되는 크기에서는 판단되지 않습니다.
- 파일 규칙(형식, 용량, 코덱, 프레임 속도, 음량)은 업로드 오류를 통해 발견됩니다.
- 플랫폼 숫자는 날짜나 출처 없이 오래된 블로그 게시물에서 복사됩니다.
사용 시기
다음과 같은 경우에 사용하세요:
- 하나의 디자인을 여러 크기 또는 여러 플랫폼에 제공해야 할 때;
- 누군가 "런칭 킷", "소셜 팩", "모든 사이즈", "배너 세트"를 요청할 때;
- 커버나 썸네일이 업로드 후 계속 잘리거나 흐려질 때;
- 짧은 영상을 세로, 정사각형, 와이드 버전으로도 만들어야 할 때;
- 일괄 내보내기를 앞두고 모든 파일이 사양을 충족한다는 증거를 원할 때.
디자인을 처음부터 새로 만들거나(먼저 마스터를 만드세요), 비디오 콘텐츠를 편집하거나(컷, 자막, 색보정), 게시하는 용도로는 사용하지 마세요. 이 스킬은 슬롯에 새 레이아웃이 필요하다고 알려줄 수 있습니다. 새 레이아웃을 만드는 것은 디자인 작업입니다.
필요한 것
- 마스터: 이상적으로는 편집 가능한 원본(Figma/PSD/HTML/SVG/프로젝트 파일)과 함께 사용 가능한 가장 큰 크기의 플랫 내보내기 파일. 크롭 전용 슬롯에는 픽셀 데이터만으로 충분합니다.
- 목적지 목록 또는 목표("X, 인스타그램 및 블로그에 런칭합니다").
- 비디오 슬롯의 경우: 비디오 파일과, 자동 검사를 원한다면
ffmpeg/ffprobe설치. - 도우미
scripts/matrix.py를 위한 Python 3.8+ (표준 라이브러리만 필요).
단계별 가이드
1. 마스터 파악하기
다음을 master.json에 기록하세요 (examples/master.json 참조):
- 픽셀 너비와 높이, 그리고 정지 이미지인지 비디오인지;
- 편집 가능한 원본이 있는지 여부 (이는 REFLOW의 비용을 결정합니다);
- 사용 가능한 가장 큰 버전. 채팅에서 누군가 붙여넣은 축소된 복사본을 기준으로 계획하지 마세요.
마스터가 가장 큰 슬롯보다 작으면 지금 알려주세요. 나중에 UPSCALE로 표시됩니다.
2. 날짜와 함께 슬롯 목록 작성하기
slots.json을 만드세요 (examples/slots.json에서 시작). 슬롯당 하나의 카드:
| 필드 | 의미 |
|---|---|
id | 내보내기 파일의 이름 스템, 예: video-thumb → video-thumb.jpg |
w, h | 제공되는 픽셀 크기; exact: false는 "최소 이 크기, 동일한 종횡비"를 의미 |
safe | 슬롯 픽셀 단위로 플랫폼 UI가 덮는 위, 오른쪽, 아래, 왼쪽 여백 |
drop | 이 슬롯에 나타나지 않아야 하는 이름이 지정된 박스 (예: 아이콘 위의 헤드라인) |
fit | wide (기본값, 최대한 많은 컨텍스트 유지) 또는 tight (안전 영역 채움) |
display_w | 슬롯이 실제로 표시되는 너비 (CSS px 단위, 예: 그리드 속 썸네일) |
min_text_px | display_w에서 여전히 읽을 수 있는 최소 대문자 높이 |
formats, max_kb | 허용되는 파일 형식 및 용량 제한 |
| 비디오 필드 | video_codec, audio_codec, pix_fmt, fps 범위, min_s/max_s, sample_rate, lufs (+lufs_tol), true_peak_max |
source | 숫자의 출처 |
목록 규칙:
- 맨 위에
as_of(오늘 날짜)를 넣으세요. 크기와 오버레이는 변경됩니다. 날짜가 없는 카드는 소문입니다. - 각 카드를 플랫폼 자체의 현재 도움말 페이지 또는 다운로드 가능한 템플릿과 대조하여 확인하세요.
숫자를 확인할 수 없으면 유지하되
"source": "unverified"라고 쓰고 전달 시 그렇게 알리세요. - 목적지가 명확하지 않을 때만 슬롯에 대해 질문하세요. 한 번에 묶어서 질문하는 것이 다섯 번 따로 질문하는 것보다 낫습니다: "링크 카드, 썸네일, 정사각형, 9:16 스토리, 배너를 만들게요. 추가하거나 빼실 것이 있나요?"
3. 마스터 표시하기
계속 master.json에 박스를 마스터 픽셀 단위의 [x, y, w, h]로 나열하세요:
keep: 해당 박스를 드롭하지 않는 모든 슬롯에서 반드시 보여야 하는 것 (제품, 얼굴, 핵심 아트);text: 마스터에서cap_px(대문자 높이)가 포함된 각 텍스트 블록;logo: 마크;focus: 아무것도 표시되지 않았을 때 중앙에 맞출 점.
디자인 도구에서 측정하거나, 소스 파일에서 레이어 경계를 읽거나, 이미지를 열고 조심스럽게 추정하여 박스를 얻으세요. 각 박스에 몇 퍼센트의 여유를 두세요. 얼굴에 딱 붙은 박스는 실제로 턱을 자르게 됩니다.
4. 모든 슬롯 계획하기
python3 scripts/matrix.py plan --master master.json --slots slots.json
각 슬롯에 대해 다음과 같은 결과를 얻습니다:
- CROP: 크롭 + 스케일로 필요한 모든 것이 안전 영역 안에 들어갑니다. 행에는 크롭 사각형과
바로 사용 가능한
ffmpeg필터(crop=w:h:x:y,scale=W:H)가 포함됩니다. - UPSCALE: 크롭은 작동하지만 마스터를 확대합니다. 행에 필요한 마스터 크기가 표시됩니다. 부드럽지 않은 이미지를 제공하는 대신 더 큰 내보내기 또는 벡터 로고를 요청하세요.
- REFLOW: 어떤 크롭도 작동하지 않거나, 표시 크기에서 텍스트를 읽을 수 없습니다. 행에
art_only가 포함되면 아트워크는 여전히 깔끔하게 크롭되고, 나열된 텍스트/로고만 이 형태에 맞게 다시 설정하면 됩니다. 그렇지 않으면 구성 자체를 변경해야 합니다.
무엇이든 내보내기 전에 사용자에게 표를 보여주세요. 마음을 바꾸기에 가장 저렴한 시점입니다.
5. 각 REFLOW 해결하기
작동하는 가장 가벼운 수정을 선택하세요. 순서대로:
- 타이틀 재설정:
art_only사각형으로 아트를 크롭한 다음, 헤드라인과 로고를 슬롯의 안전 영역 안에min_text_px를 통과하는 크기로 다시 배치하세요. - 재구성(restack): 넓은 레이아웃(텍스트 왼쪽, 아트 오른쪽)을 긴 레이아웃(아트 위, 텍스트 아래)으로 편집 가능한 소스에서 동일한 글꼴, 색상 및 간격 비율을 유지하며 변경하세요.
- 캔버스 확장: 소스 파일에서 배경을 넓히거나(또는 단순한 브랜드 색상으로) 아트가 안전 영역에 맞도록 아트를 축소하는 대신 확장하세요.
- 작은 슬롯용 단축: 아이콘과 아바타는 마크만 담습니다. 2열 그리드의 3:4 커버는 더 짧은 헤드라인이 필요할 수 있습니다. 절대 스스로 카피를 다시 작성하지 마세요. 짧은 줄을 제안하고 소유자가 승인하게 하세요.
모든 슬롯이 CROP이거나 의도적이고 설명된 예외가 될 때까지 각 변경 후 plan을 다시 실행하세요.
6. 내보내기
- 크롭 전용 슬롯: 정지 이미지나 비디오 모두 계획된 필터를 적용하세요:
ffmpeg -i master.png -vf "crop=...,scale=..." link-card.png. - REFLOW 슬롯: 정확한 슬롯 크기로 편집 가능한 소스에서 내보내세요.
- 모든 파일을 한 폴더에
<slot id>.<ext>형식으로 이름을 지정하여 검사기가 찾을 수 있게 하세요. - 정지 이미지: sRGB, 플랫폼이 알 수 없는 색상 위에 평탄화하는 곳에서는 투명도 없음,
max_kb를 충족할 때까지 품질을 단계적으로 낮추기. - 비디오: 짝수 너비와 높이,
yuv420p, 카드에 별도로 명시되지 않는 한 소스의 프레임 속도, 카드의 목표에 맞게 음량 정규화. 크기 제한의 경우 비트레이트 계산:python3 scripts/matrix.py budget --seconds 58 --max-mb 50. - 더 많은 레시피는
references/export-recipes.md참조.
7. 모든 파일 검사하기
python3 scripts/matrix.py check --slots slots.json --dir out/ --loudness
각 슬롯은 PASS, FAIL, CHECK(측정할 수 없는 항목) 또는 MISSING을 반환합니다. 기계적 오류(잘못된 크기, 형식, 용량, 픽셀 형식, 샘플 속도)는 자유롭게 수정하세요. 내용을 변경하는 실패(더 짧은 재생 시간, 더 타이트한 크롭, 배경 잡음을 올리는 더 큰 오디오)는 소유자의 선택이 필요합니다. 옵션과 그 비용을 명시하세요.
8. 실제 크기로 보기
검사기는 볼 수 없습니다. 각 슬롯을 display_w로 안전 영역이 강조 표시된 콘택트 시트를 만들고 열어보세요:
python3 scripts/matrix.py sheet --slots slots.json --dir out/ # out/contact-sheet.html 생성
다음 사항을 확인하세요: 안전선을 넘는 텍스트, 관절에서 잘린 얼굴(턱, 정수리, 손), 복잡한 배경 위의 로고, 서로 다른 브랜드처럼 보이는 두 개의 슬롯.
9. 전달하기
폴더와 짧은 매니페스트를 함께 전달하세요:
Kit: Tidepool launch, as_of 2026-10-24 (2 cards unverified: note-cover, article-cover)
link-card.png 1200x630 184 KB PASS crop
video-thumb.jpg 1280x720 402 KB PASS reflow: headline re-set at 96 px cap
story-vertical.png 1080x1920 1.1 MB PASS reflow: restacked, canvas extended
app-icon.png 1024x1024 61 KB PASS from vector logo (raster was 1.6x too small)
vertical-video.mp4 1080x1920 21 MB PASS -14.2 LUFS, -1.3 dBTP, 30 fps, 41.0 s
Check: contact-sheet.html (all slots at display size)
예시
"이 런칭 배너를 모든 곳에서 사용할 수 있게 해주세요."
마스터 4000x2250, 헤드라인 왼쪽, 전화기 목업 오른쪽. 계획: 링크 카드와 레포지토리 프리뷰는 CROP;
썸네일은 REFLOW(헤드라인이 그리드 크기에서 13.5px 높이에 불과, 14 필요); 정사각형, 세로형, 3:4는
art_only 크롭으로 REFLOW(전화기 아래에 헤드라인 재설정); 9:16은 art-only 없이 REFLOW(목업이
안전 열에 비해 너무 넓어서 캔버스 확장 및 재구성 필요); 앱 아이콘은 UPSCALE(벡터 로고 사용).
examples/plan.output.md 참조.
"YouTube가 제 썸네일을 계속 거부해요." 슬롯 하나. 검사 결과 2 MB 제한에 2.4MB, 1280x721입니다. 1280x720으로 재내보내기, JPEG 품질을 95에서 88로 낮춤: 1.3MB, PASS.
"Reels, Shorts 및 와이드 YouTube 컷용 동일한 쇼츠."
세 개의 비디오 슬롯. 세로 슬롯은 화자가 중앙에 있기 때문에 16:9 마스터에서 CROP됩니다.
와이드 컷은 마스터 그대로. 검사 결과 44.1kHz 오디오(WARN) 및 -21.9 LUFS(-14 대비 FAIL);
정규화 후 재내보내기, 재검사. examples/check.output.txt 참조.
팁
- 마스터를 한 번 표시하고
master.json을 디자인 파일과 함께 보관하세요. 다음 캠페인에서 재사용됩니다. - 두 플랫폼이 동일한 형태를 공유하더라도 오버레이가 다르면 별도의 카드를 부여하세요.
- 하나의 내보내기가 여러 피드에 제공되어야 한다면 세로 비디오에 대해 보수적인 안전 박스 하나를 선호하세요.
- 숫자는 통과하지만 사람의 관절을 자르는 크롭은 여전히 실패입니다. 최종 확인 단계를 신뢰하세요.
fit: tight는 마크와 아이콘용입니다. 다른 모든 것은 컨텍스트를 유지해야 합니다(wide).- 확인되지 않은 숫자는 조용히 신뢰하는 대신 매니페스트에 표시된 상태로 유지하세요.
- 변경한 파일뿐만 아니라 모든 재내보내기 후에 다시 검사하세요. 배치 도구는 이웃 파일을 덮어씁니다.
이 스킬은 AI 보조에 최적화되어 있습니다. 마스터를 준비하고, 슬롯을 정의하고, 검증하세요. 디자인 결정과 게시는 항상 인간의 몫입니다.