754 ／ 754
HTML Anything의 포스터·소셜 카드 템플릿, 코딩 에이전트로 공유 이미지 만들기
학교 행사 포스터, 학급 SNS에 올릴 카드, 학부모에게 보낼 안내 이미지. 교사는 매주 무언가를 보기 좋게 만들어야 하지만 디자인 도구를 익힐 시간은 늘 모자라다. HTML Anything은 이 일을 코딩 에이전트에게 맡기는 오픈소스 편집기다. 내용을 넣으면 내 컴퓨터에 설치된 Claude Code, Codex, Gemini CLI 같은 코딩 에이전트가 결과물을 HTML로 짜고, 그 화면을 PNG로 내려받을 수 있다. 도구 전반은 앞선 글에서 다뤘으니, 이번에는 75개 템플릿 가운데 포스터와 소셜 공유 카드 계열만 골라 살펴본다.
포스터 템플릿 두 가지
포스터 계열은 성격이 뚜렷이 다른 두 템플릿으로 나뉜다.
| 템플릿 | 크기 | 생김새 | 어울리는 쓰임 |
|---|---|---|---|
magazine-poster |
세로로 긴 이미지(README 표기 1080×1920) | 따뜻한 크림색 바탕에 잔 점무늬, 큰 세리프 제목(일부 단어 취소선과 이탤릭 강조), 두 단 본문, 소제목·인용구가 붙은 번호 섹션 6개 | 수업 내용 정리, 선언문, 한 장짜리 읽을거리 |
poster-hero |
1080×1920 세로 | 화면 가득한 그라디언트 배경, 위쪽 30% 여백에 큰 이모지나 도형, 가운데 굵은 제목과 한 줄 부제, 아래 핵심 요점 3~5개, 오른쪽 아래 브랜드·QR 코드 자리 | 행사 안내, 모집 공고, 신청 링크가 필요한 홍보물 |
magazine-poster는 웹페이지가 아니라 인쇄된 신문 지면처럼 읽히도록 설계했다. 맨 위에 발행처와 날짜를 적는 머리띠(dateline)를 두고, 맨 아래에 서명과 작은 장식을 단다. 글꼴은 Playfair Display, IBM Plex Serif, JetBrains Mono를 쓴다. poster-hero는 반대로 시각적 충격을 노린다. 보라에서 자홍, 남색으로 이어지는 그라디언트를 예로 들며 대담한 색 위에 흰 글자와 강조색 하나를 얹으라고 한다. 위챗 모멘트(朋友圈)에 올리는 공유 이미지를 염두에 둔 템플릿이라 오른쪽 아래에 브랜드 표시나 QR 코드를 넣을 자리를 둔다.
소셜 카드 템플릿
소셜 공유 카드는 플랫폼마다 따로 있다.
| 템플릿 | 크기 | 특징 |
|---|---|---|
social-x-post-card |
1280×720 또는 1080×1080 | 실제 X 게시물처럼 보이는 카드. 프로필, 인증 배지, 답글·재게시·좋아요·조회수까지 재현한다 |
card-twitter |
1600×900(16:9) | 한 문장 인용구를 크게 앉힌 카드. 왼쪽 위에 Insight·Data·Quote 같은 꼬리표, 오른쪽 아래에 워터마크 |
social-carousel |
1080×1080 정사각형 3장 | 세 장의 제목을 이어 읽으면 한 문장이 된다. 마지막 장에 행동 유도 문구를 둔다 |
card-xiaohongshu |
1080×1440(3:4) 여러 장 | 샤오홍슈(小红书)식 정보 카드. 표지, 핵심을 하나씩 담은 본문 카드, 요약과 행동 유도 카드 순서. 채도를 낮춘 모란디 색이나 분홍 계열, 큰 글씨와 넓은 줄 간격 |
social-spotify-card |
1280×720 또는 600×200 | 스포티파이의 지금 재생 중 화면을 본뜬 카드. 앨범 표지 자리, 진행 막대, 재생 버튼 |
social-reddit-card |
1280×720 또는 800×600 | 레딧 게시물을 본뜬 카드. 추천·비추천 막대와 댓글 수가 붙는다 |
교실에서 바로 쓸 만한 것은 social-carousel과 card-xiaohongshu다. 샤오홍슈 템플릿은 카드 한 장에 핵심 하나만 싣고, 휴대폰에서도 읽히도록 글씨를 크게 쓰라고 못 박는다. 카드 장수는 내용 분량에 맞춰 정하되 짧은 내용은 3~6장에서 시작한다. 학습 팁이나 학급 소식을 정리해 올리는 카드뉴스 형식과 그대로 겹친다. card-twitter는 수업에서 건진 한 문장을 강조해 공유하기 좋다.
실물처럼 보이는 카드는 조심해서 쓴다
X·레딧·스포티파이 카드는 실제 화면과 구분이 어려울 만큼 정교하게 본뜬다. 바로 그 점 때문에 교육 현장에서는 조심해서 써야 한다. 레딧 카드 템플릿은 사용자가 내용만 주면 그럴듯한 게시판 이름, 사용자 이름, 추천 수를 자동으로 지어 넣도록 되어 있다. 반면 X 카드 템플릿은 내용이 반드시 사용자 입력에서 와야 하고 게시물을 지어내면 안 된다고 적는다. 지어낸 숫자가 붙은 가짜 게시물은 미디어 리터러시 교육과 정면으로 부딪힌다. 이런 카드를 수업에 쓴다면 실제 게시물이 아니라는 표시를 붙이는 편이 안전하다.
README도 비슷한 선을 긋는다. 실제 트윗을 근거로 카드를 만들 때는 별도 도구로 원문, 작성자, 반응 수를 수집한 뒤 그 자료를 템플릿에 넣고, HTML Anything에는 화면을 그리고 내보내는 일만 맡기라고 권한다. 수집, 승인, 게시는 각자의 작업 흐름에 남겨 두라는 것이다.
README가 내건 디자인 규칙
README에 따르면 결과물이 들쭉날쭉하지 않도록 모든 템플릿에 강제 규칙이 들어 있다.
- CJK 우선 글꼴 스택: 중국어는 Noto Sans/Serif SC, 라틴 문자는 Inter나 Manrope를 쓴다
- 8px 기준 격자: 모든 간격, 줄 높이, 글자 크기를 8의 배수로 맞춘다
- 둥근 모서리와 부드러운 그림자를 쓰고, 순수한 검정과 흰색은 쓰지 않는다
- 글자와 배경의 명도 대비를 4.5 이상으로 유지하고, 상호작용 요소마다 실제
:focus상태를 둔다 - 로렘 입숨 같은 더미 텍스트 대신 사용자가 준 실제 데이터를 쓴다
이 규칙은 alchaincyf/huashu-design의 주니어 디자이너 모드와 AI 슬롭 방지 체크리스트에서 가져왔다. 다만 개별 템플릿 정의를 열어 보면 이 규칙과 어긋나는 대목도 있다. X 카드는 어두운 배경으로 순수한 검정(#000)을 권하고, 글자 크기에도 17px처럼 8의 배수가 아닌 값이 적혀 있다. 글꼴 스택도 중국어 중심이다. 규칙은 출발점으로 보고, 한국어 포스터라면 글꼴과 색이 의도대로 나오는지 미리보기에서 직접 확인하는 편이 좋다.
만들고 내보내기
완성한 카드는 한 번에 내보낸다. X, 웨이보, 샤오홍슈용으로는 미리보기 화면을 2배 해상도 PNG로 렌더링해 클립보드에 복사하므로 게시물 작성 창에 바로 붙여 넣으면 된다. 고해상도 .png나 단일 .html 파일로 내려받을 수도 있다. 별도 API 키가 필요 없고, 이미 로그인해 둔 코딩 에이전트의 구독을 그대로 쓰므로 추가 비용이 들지 않는다는 것이 프로젝트의 설명이다.
인류학의 분산 인지로 보면
인류학과 인지과학의 분산 인지(Distributed Cognition) 개념은 지식이 한 사람의 머릿속에만 있지 않고 도구와 환경, 다른 사람과의 상호작용 속에 흩어져 작동한다고 본다. HTML Anything의 템플릿과 강제 규칙이 좋은 예다. 숙련된 디자이너가 몸으로 아는 감각과 좋은 디자인에 대한 합의가 템플릿 문서 안에 규칙으로 옮겨져 있다. 덕분에 디자인 전문가가 아닌 사람도 일정 수준의 결과물을 낸다. 다만 규칙에 담긴 것은 특정 공동체의 취향이기도 하다. 도구 안에 어떤 감각이 들어 있는지 알고 쓰는 사람과 모르고 쓰는 사람의 결과물은 결국 달라진다.
출처
- nexu-io, HTML Anything, GitHub 저장소. https://github.com/nexu-io/html-anything
- 템플릿 정의: 저장소
next/src/lib/templates/skills/폴더의 각SKILL.md(magazine-poster, poster-hero, social-x-post-card, card-twitter, social-carousel, card-xiaohongshu, social-spotify-card, social-reddit-card)