Threads Brand Card

Threads 브랜드 카드

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

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

---

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

표시 이름, 한 줄 소개, 핸들, 링크, 마크 이미지 경로는 이 폴더의 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 고정이다.

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

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)"

---

절차

1. scripts/fill_brand.py로 브랜드 바가 채워진 HTML을 만든다.
2. 그 HTML의 .rows, 헤드라인, 결론 부분을 이번 글 내용으로 바꾼다. 브랜드 바는 건드리지 않는다.
3. 실사진과 같이 올린다면 사진 비율을 먼저 재고 카드 높이를 맞춘다.
4. 렌더한다:

python3 scripts/render_brand_card.py card.html card.png --width 1080 --height 1440

1. 렌더한 PNG를 눈으로 본다. 한국어 글자 잘림, 겹침, 브랜드 바가 본문 패널에 눌리는 것을 찾는다. 깨졌으면 HTML을 고쳐 다시 렌더한다.
2. alt를 쓴다. 카드는 글자가 정보이므로 이미지 안의 글자를 그대로 옮긴다(alt-text-generator 스킬).

---

내용 규칙

• 첫 화면에서 읽히는 것은 하나다. 헤드라인 하나, 숫자 하나.
• 숫자는 2~3개까지. 문단으로 설명하지 않는다.
• 카드는 본문의 요약이 아니라 본문이 말하지 않는 수치를 맡는다. 본문을 그대로 옮기면 alt와 본문이 겹쳐 스크린리더 사용자가 같은 말을 두 번 듣는다.
• 한국어는 letter-spacing: 0.
• 화살표는 ->로 쓴다. 유니코드 화살표는 폰트에 따라 자리가 흔들린다.
• 이모지를 넣지 않는다.
• 고정 크기 export에서 vw 같은 뷰포트 단위를 쓰지 않는다.

---

브랜드 바를 빼는 경우

• 남의 화면을 그대로 보여주는 스크린샷 (내 브랜드를 얹으면 출처가 흐려진다)
• 인용카드로 붙는 이미지 (Threads가 원글 정보를 이미 붙인다)
• 카드가 본문 첫 장이 아니라 보조 설명일 때는 마크와 핸들만 남기고 소개 문구를 뺀다

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Tygb99
• Source: Tygb99/threads-writing-skills
• License: MIT

Install and usage instructions live in the source repository linked above.