threads-brand-card

Threads 브랜드 카드

Threads에 올리는 카드 이미지는 매번 다시 디자인하지 않는다. 브랜드 바와 크기를 고정하고 안쪽 내용만 바꾼다. 피드에서 스크롤로 지나가는 이미지라, 같은 계정의 카드가 매번 다르게 생기면 누가 만든 것인지 읽히지 않는다.

이미지 생성 모델을 쓰지 않는다. 한국어 글자와 숫자가 들어가는 카드는 HTML로 만들고 브라우저로 렌더해야 글자가 깨지지 않고 재현된다. 상세 렌더 절차는 threads-html-image 스킬을 쓴다.

---

브랜드 값은 로컬 파일에 있다

표시 이름, 한 줄 소개, 핸들, 링크, 마크 이미지 경로는 이 폴더의 **brand.local.md**에서 읽는다. 그 파일은 .gitignore에 있어 공개 저장소에 올라가지 않는다. 개인 식별 정보를 공개 이력에 남기지 않기 위한 분리다.

값을 직접 옮겨 적지 않는다. scripts/fill_brand.py가 brand.local.md를 파싱해 템플릿의 플레이스홀더를 채운다:

python3 scripts/fill_brand.py /path/to/card.html

치환되지 않은 BRAND_* 토큰이 남으면 실패로 끝내고, 마크 이미지가 실제로 없으면 그것도 실패로 끝낸다. 렌더 후에 빈 칸을 발견하는 것보다 낫다.

brand.local.md가 없으면 스크립트가 무엇을 물어야 하는지 알려주며 멈춘다. 그때는 사용자에게 값을 물어 그 파일을 먼저 만든다. 값을 추측해 채우지 않는다.

브랜드 마크

마크는 계정 프로필 사진이다. 원형(border-radius: 50%), object-fit: cover, 강조색 3px 테두리로 넣는다. 카드 크기와 무관하게 74px 고정이다.

마크 파일은 사람 얼굴이 화면 중앙에 오게 정사각으로 크롭해 두고 재사용한다. 원본 사진을 그대로 <img>에 넣으면 배경만 보인다:

python3 -c "
from PIL import Image, ImageOps
im = ImageOps.exif_transpose(Image.open('profile.jpeg'))
im.crop((left, top, right, bottom)).resize((296, 296), Image.LANCZOS).save('brand-mark.png')"

템플릿의 BRAND_MARK_ABSOLUTE_PATH.png를 그 파일의 절대 경로로 바꾼다. 상대 경로는 headless Chrome이 file:// 기준으로 해석해 빈 칸이 된다. 마크에는 alt=""를 준다. 카드 전체 alt가 이미 브랜드를 설명하므로 스크린리더가 두 번 읽을 필요가 없다.

크롭한 마크 파일은 저장소가 아니라 작업 워크스페이스의 미디어 폴더에 둔다.

색

배경    #0f1115
패널    #171b22
본문    #e9edf4
보조    #97a0b1   흐린 설명
더 흐림 #5b6478   링크·구분선급
강조    #6ee7a8   숫자, 브랜드 마크, 결론
경고    #f2708a   실패·불가 항목의 왼쪽 띠
구분선  #232a35

강조색은 한 카드에서 3곳을 넘기지 않는다. 전부 강조하면 아무것도 강조되지 않는다.

---

크기 — 같이 올리는 사진에 맞춘다

Threads는 한 칸에 여러 장을 올리면 비율이 다른 쪽을 잘라낸다. 그래서 카드 크기는 카드 혼자 결정하지 않는다.

상황	크기
카드 한 장만 올린다	1080x1350 (기본)
실사진과 같이 올린다	사진 비율에 맞춘다. 아이폰·갤럭시 세로 사진이면 3:4이므로 1080x1440
정사각 카드뉴스	1080x1080

사진 비율은 EXIF 회전을 반영해서 재야 한다. sips의 pixelWidth/pixelHeight는 회전 전 값을 주므로, 세로로 찍은 사진이 가로로 보인다. 판정은 회전 태그까지 본다:

python3 -c "
from PIL import Image, ImageOps
im = ImageOps.exif_transpose(Image.open('photo.jpeg'))
print(im.size)"