ReScienceLab/super-prototyping

브랜드 키트

캔버스 폴더에는 HTML 아트보드인 보드들이 저장되어 있습니다. 이 스킬은 동일한 폴더에 두 번째 종류의 행(row)을 추가합니다 — 회사가 게시한 그림들을 보드 대신 이미지 형태로 배치합니다. 로고, 폰트 샘플, 스토어 스크린샷, 소셜 게시물, 광고 크리에이티브, 보도 사진.

핵심은 열을 기준으로 비교하는 것입니다. 행은 **표면(surface)**이지 자산 유형이 아니므로, X의 아바타가 Instagram의 아바타 위에, 그 위에 TikTok의 아바타가 놓이며, 다른 것과 일치하지 않는 아바타는 일일이 찾아야 하는 것이 아니라 열에서 끊어진 부분으로 나타납니다.

수집을 시작하기 전에 references/sources.md를 읽으십시오. 이 문서는 수확 순서와 호출 방법을 담은 표면별 플레이북입니다. 매니페스트를 작성하고 생성기를 연결할 때는 references/manifest.md를 읽으십시오. 여기에는 스키마, 검증 스크립트, gen.py 규칙이 포함되어 있습니다.

제작할 항목

canvases/<slug>/
  assets/brand/
    manifest.json          레코드의 원천: 정규 순서의 행들
    identity/  social/  stores/  ads/  press/
  gen.py                   매니페스트를 읽고 layout.json에 행을 추가합니다
  layout.json              캔버스와 브랜드 페이지가 실제로 렌더링하는 내용

assets/brand/는 캔버스가 URL을 제공하는 assets/의 유일한 부분입니다. 생성기는 assets/의 다른 모든 항목을 data: URI로 보드에 인라인 처리하므로, 자체 형태가 필요한 그림은 여기에 있어야 합니다.

일곱 단계

절대 매니페스트를 먼저 작성하지 마십시오. 매니페스트의 모든 파일은 이미 검증을 통과해야 합니다. 검증에 실패한 파일은 삭제되며, 매니페스트 항목에 주석이 달리지 않습니다.

1. 완성된 예제를 살펴보십시오. 앱에는 12개의 예제가 포함되어 있습니다. 목록을 확인하고 하나의 행을 출력하십시오:

   KIT="$(sp root)"
   ls "$KIT"/canvases/*/assets/brand/manifest.json
   python3 -c 'import json,sys
   for r in json.load(open(sys.argv[1])): print(len(r["images"]), r["title"])' \
     "$KIT/canvases/claude-ios/assets/brand/manifest.json"
   

   sp 명령어가 없습니까? sh <sp-canvas skill dir>/scripts/install.sh (Windows: install.ps1)를 실행하고 해당 스킬의 references/install.md를 따르십시오. stderr의 [super-prototyping:notice] 줄에는 자체 규칙이 포함되어 있습니다: 단계를 완료한 후 해당 지시를 따르십시오.
2. 회사의 공식 브랜드 키트 또는 보도 자료 키트. 고해상도 로고, 서체 및 색상 값은 여기에서 가져오므로 먼저 확인하십시오. references/sources.md를 참조하십시오.
3. 스토어 목록. 가장 신뢰할 수 있는 대량 소스이며, API가 모든 스크린샷을 한 번에 반환합니다.
4. 소셜 미디어. 아바타, 배너, 플랫폼당 4–8개의 게시된 비주얼. 먼저 모든 핸들을 검증하십시오 — 아래의 "계정을 확인하세요, 핸들이 아닙니다"를 참조하십시오.
5. 마케팅 사이트 및 뉴스룸. 히어로 아트, 기능 페이지 일러스트레이션, og:image 카드, 보도 사진.
6. 모든 파일을 검증하십시오. 바이트, 확장자, 크기, 중복. references/manifest.md에 스크립트가 있습니다. NO PROBLEMS를 출력해야 합니다.
7. 매니페스트를 작성하고, gen.py를 연결하고, 재생성한 후 브라우저에서 확인하십시오.

행은 고정된 어휘입니다

행 제목은 이 목록에서 가져오며, 작성하는 행은 이 순서의 부분 수열(subsequence)로 나타나야 합니다: 이 순서를 유지하고, 해당되지 않는 행은 건너뜁니다.

로고 및 워드마크 · 서체 · 아트 디렉션 · 적용된 아이덴티티 ·
X · Instagram · TikTok · YouTube · LinkedIn ·
App Store · Google Play · Microsoft Store ·
발표 카드 · 유료 광고 · 보도 사진

아이덴티티가 먼저, 그 다음 플랫폼별로 하나의 행. 두 가지 제목은 자명하지 않으므로, 배송된 폴더와 일치시키려면:

• 아트 디렉션은 회사 자체가 게시하는 이미지 스타일: 일러스트레이션 시스템, 히어로 아트, 사진 처리, 캐릭터 연구, 가이드라인 아트.
• 적용된 아이덴티티는 제품 UI, 포스터, 간판, 이벤트 무대, 상품 등에 적용된 아이덴티티.

행 제목을 임의로 만들지 마십시오. 이 제품에 해당 표면이 존재하지 않으면 생략하십시오: 없는 행은 정확하지만, 빈 행은 버그이며, 다른 제품의 자료로 채운 행은 거짓입니다.

얼마나 많은 자산을 수집해야 하나요

배송된 12개의 폴더는 50144개의 자산을 포함하며, 대부분 70120개입니다. 표면의 폭이 핵심이므로, 소셜 플랫폼당 48개의 게시된 비주얼이 하나의 스토어에서 40개의 스크린샷보다 낫습니다. 그러나 스토어 행은 해당 스토어가 가진 모든 것을 포함하며, 해당 폴더에서는 420개입니다.

포함 여부를 결정하는 다섯 가지 규칙

출처는 이분법적이며 추측이 아닙니다

"theirs"는 회사가 게시했음을 의미합니다. "archive"는 큐레이팅된 브랜드 아카이브가 게시했음을 의미하며, 아카이브는 각 항목의 원본 출처와 날짜를 명시한 경우에만 인정됩니다. 둘 다 확인할 수 없다면 해당 자산은 포함되지 않습니다. 이것이 시트가 존재하는 이유입니다: 사진은 출처를 명시하며, 제3자가 큐레이팅한 것은 회사가 배포한 것으로 간주되지 않습니다.

계정을 확인하세요, 핸들이 아닙니다

전달받은 핸들을 신뢰하지 마십시오(사양에 적힌 것도 포함). 핸들이 실제로 존재하는지, 확인(verification)이 가능한 플랫폼에서 확인되었는지, 올바른 회사인지 확인하십시오. 스쿼팅(squatting)되거나 유휴 상태인 유사 계정은 흔합니다: 한 사례에서 X의 @tiktok은 관련 없는 지역 혜택 계정이었고, 실제 회사는 @tiktok_us였습니다.

사용한 핸들과 스토어 ID, 그리고 잘못된 것으로 판명된 것을 보고서에 명시하십시오.

HTTP 200이 페이지의 존재를 증명하지 않습니다

마케팅 사이트와 뉴스룸은 일반적으로 단일 페이지 앱(SPA)으로, 존재하지 않는 경로에도 HTTP 200을 반환합니다. 대신 렌더링된 <title>을 확인하십시오. 실제 기사는 고유한 제목을 가지며, 존재하지 않는 슬러그(slug)는 사이트의 일반 제목을 반환합니다:

curl -sL "$URL" | grep -o '<title>[^<]*</title>'

동일 사이트에서 의도적으로 잘못된 슬러그에 대해 먼저 실행하여 일반 제목이 어떻게 생겼는지 확인하십시오. 일반 제목을 반환하는 슬러그는 존재하지 않습니다: 해당 슬러그와 그곳에서 가져온 모든 것을 폐기하십시오.

동일한 바이트는 하나의 자산입니다

다운로드 배치가 끝날 때마다 캔버스 폴더에서:

find assets/brand -type f -exec md5 -r {} \; | sort | awk '{print $1}' | uniq -d

아무것도 출력되지 않아야 합니다. 해시가 충돌하면 새 복사본을 삭제하십시오. 한 이미지의 자르기 및 크기 조정은 바이트 단위로 동일하지 않으며, 여기서는 이를 감지하는 도구가 없습니다 — 이는 육안으로 확인하며, 더 큰 파일을 유지하십시오.

확장자는 바이트와 일치해야 합니다

file <path>가 권위자이며, 다운로드한 URL이 아닙니다. PNG가 .jpg로 저장되거나, WebP가 .png로 저장되거나, HTML 챌린지 페이지가 .jpg로 저장된 사례가 모두 있었습니다. 일치하도록 이름을 바꾸십시오. HEIF는 이름을 바꾸는 대신 변환합니다. 여기서 어떤 브라우저도 이를 그릴 수 없기 때문입니다:

sips -s format jpeg in.heic --out out.jpg

파일 저장 위치

그룹	내용
identity	로고, 워드마크, 서체 샘플, 색상, 아트 디렉션, 적용된 아이덴티티
social	X, Instagram, TikTok, YouTube, LinkedIn
stores	App Store, Google Play, Microsoft Store
ads	유료 광고 크리에이티브, 발표 카드
press	보도 사진

이 다섯 가지 이름을 사용하십시오. 유사한 이름을 만들지 마십시오. 파일 이름은 내용을 나타내도록 지정하십시오 (x-avatar.jpg, appstore-iphone-03.jpg, wordmark-black.svg).

일부 폴더에는 이미 assets/brand/ 아래에 생성기가 보드에 인라인 처리하지만 행으로 그리지 않는 그림이 저장되어 있습니다 — 예를 들어 목업에서 사용하는 프로필 사진 등. 이는 브랜드 자료가 아닙니다. 그대로 두고 매니페스트에서 제외하십시오. 시작하기 전에 찾으십시오:

git ls-files assets/brand/

출력된 모든 경로는 검증 스크립트의 IGNORE 세트에 추가되며, 캔버스 폴더에 상대적으로 지정됩니다(스크립트가 비교하는 방식).

연결하기

폴더의 다른 디렉토리 상수 옆에 하나의 상수:

BRAND_DIR = OUT / "assets" / "brand"

해당 폴더가 행 목록을 완성하는 곳에 한 줄을 추가합니다. 여기서 생성기는 두 가지 형태로 제공되므로, 현재 보고 있는 것과 일치시키십시오:

    rows += json.loads((BRAND_DIR / "manifest.json").read_text())        # layout() 내부
LAYOUT["rows"] += json.loads((BRAND_DIR / "manifest.json").read_text())  # 모듈 수준 LAYOUT

브랜드 행은 모든 보드 행 뒤에 추가되며, 읽기는 조건 없이 수행됩니다. if BRAND_DIR.exists() 없이. 매니페스트가 존재할 때만 이 줄을 추가하십시오. 그렇지 않으면 python3 gen.py가 읽기 중 FileNotFoundError를 발생시킵니다.

그런 다음 python3 gen.py를 실행하고 layout.json의 차이가 순수한 추가인지 확인하십시오. 행을 삭제하면 중지하고 references/manifest.md의 "gen.py는 no-op이어야 합니다" 섹션을 읽으십시오. 실제 버그를 발견한 것이며, 재생성하면 손상이 커밋됩니다.

캔버스는 추가 변경 없이 폴더를 인식합니다: 행이 렌더링되고, 도구 모음에 "Brand kit" 버튼이 나타나며, 폴더가 브랜드 페이지의 스위처에 추가됩니다.

보고하기 전에 브라우저에서 확인하십시오

개발 서버에서 폴더의 두 페이지를 모두 여십시오:

http://127.0.0.1:<port>/?canvas=<slug>            캔버스
http://127.0.0.1:<port>/brand.html?canvas=<slug>  브랜드 키트

브랜드 키트에서 실행하십시오. 캔버스가 아닙니다. 지연 로딩(lazy loading)으로 인해 화면에 스크롤되지 않은 이미지는 로드 실패도 발생하지 않으므로, 강제로 로드하고 개수를 세십시오:

const imgs = [...document.querySelectorAll("main img")];
for (const i of imgs) i.loading = "eager";
await Promise.allSettled(imgs.map((i) => i.decode()));
imgs.filter((i) => i.naturalWidth === 0).length;  // 반드시 0이어야 함

캔버스는 브랜드 행을 tldraw 모양으로 그리고 화면 밖의 행은 제거하므로, 동일한 개수는 아무것도 증명하지 않습니다. 대신 화면에 맞게 확대하여 살펴보십시오.

보고서

• 검증 스크립트의 전체 출력(행 테이블 포함).
• 회사가 공식 브랜드 키트 또는 보도 자료 키트를 게시하는지 여부와 해당 URL.
• 사용하고 검증한 계정, 핸들 및 스토어 ID, 그리고 잘못되었거나, 유휴 상태이거나, 스쿼팅되었거나, 다른 회사로 판명된 것.
• 거부한 모든 후보와 그 이유: 404, 차단, 자사 자료 아님, 너무 작음, 중복, 잘못된 회사.
• 도달할 수 없었던 항목을 "존재하지 않음"과 "존재하지만 차단됨"으로 나누어서.

명확하게 밝힌 공백은 부풀려진 매니페스트보다 낫습니다. 정직한 "이 제품에는 Microsoft Store 목록이 없습니다"는 다른 회사의 스크린샷 행보다 가치가 있습니다.