카드뉴스 템플릿 직접 만들기, 부품 조합으로 시안 늘리는 법

카드뉴스를 만들 때마다 디자인 앱에서 처음부터 배치를 짜다 보면, 한 장 만드는 데 한 시간이 훌쩍 가요. 템플릿을 하나 만들어 두면 편하지만, 한 개로는 곧 질리고 서른 개를 손으로 그리자니 엄두가 안 나죠.

이 글은 템플릿을 통째로 그리지 않고 부품으로 쪼개서, 부품을 조합해 시안을 수십 개로 늘리는 방법을 정리해요. 모델을 부르지 않고 코드만으로 만드는 방식이라, 디자이너가 아니어도 따라 할 수 있어요.

혹시 이런 고민 있으신가요?

• 카드뉴스 템플릿을 만들었는데 몇 번 쓰니 다 똑같아 보여요.
• 글자를 조금만 길게 써도 카드 밖으로 넘치거나 잘려요.
• 무료로 쓸 수 있는 그림과 글꼴을 어디까지 써도 되는지 헷갈려요.

이 글을 읽으면

• 템플릿을 배치, 색, 글꼴 같은 부품 목록으로 나누고 조합 표로 관리할 수 있어요.
• 상업적으로 써도 되는 그림과 글꼴만 골라서 모으는 기준을 세울 수 있어요.
• 글자 수 한도를 감으로 정하지 않고, 직접 그려 보고 숫자로 정할 수 있어요.

1단계. 템플릿을 부품 이름의 목록으로 쪼개기

템플릿을 그림이 아니라 선택지의 묶음으로 보는 게 첫걸음이에요. 옷장에서 상의, 하의, 신발을 하나씩 골라 입는 것처럼, 카드 하나는 배치 하나, 색 조합 하나, 글꼴 한 쌍을 고른 결과예요.

저희가 나눈 부품은 이래요.

그리고 템플릿은 이 부품들의 이름만 적은 데이터로 둬요. 코드로 쓰면 이런 모양이에요.

type CardTemplate = {  id: string            // 한 번 내보내면 바꾸지 않아요  layout: "stack" | "art-bottom" | "art-top" | "peep-right" | "hero-sticker" | "framed"  palette: "cream" | "mint" | "lilac" | "navy" | "pink" | "sky" | "lemon" | "mono" | "kraft"  titleFont: FontId  bodyFont: FontId  background: "solid" | "dots" | "grid" | "stripes" /* ... */  emphasis: "highlight" | "burst" | "underline" /* ... */  kicker: "bubble" | "pill" | "tape" | "line"  art: { set: "sticker" | "doodle" | "peep"; name: string; slot: string }[]}

핵심은 그리는 코드가 부품 하나하나를 어떤 크기의 카드에서도 그릴 줄 안다는 점이에요. 그러면 새 템플릿은 코드를 새로 쓰지 않고, 부품 이름 몇 개를 적은 한 덩어리만 더하면 끝나요.

부품을 고르면 템플릿이 되고, 같은 템플릿이 다섯 규격으로 그려져요

2단계. 라이선스가 확실한 부품만 모으기

부품을 모을 때 가장 먼저 볼 것은 예쁜 정도가 아니라 라이선스예요. 라이선스는 "이 그림이나 글꼴을 이런 조건으로 써도 된다"는 작성자의 허락 문서예요. 카드뉴스는 상업적으로 쓰이기 쉬운 결과물이라, 조건이 불분명한 부품은 처음부터 넣지 않는 게 안전해요.

저희가 고른 기준과 이유는 이래요.

뺀 것도 있어요. 이모지 모음 중 OpenMoji 는 같은 조건을 결과물에도 이어 붙이는 조항이 있을 수 있어서 뺐어요. 나눔 글꼴은 이름을 예약하는 조항 때문에 글꼴 파일을 가공해서 배포하기 어려워서 뺐고요. 글꼴 이모지 대신 SVG 파일을 쓴 것은 기기마다 이모지 모양이 달라서예요.

각 라이선스의 정확한 조건은 배포처에서 직접 읽어 보세요. 회사 로고와 상표는 라이선스와 상관없이 넣지 않았어요. 저희의 판단이 법률 검토를 거친 것은 아니에요.

3단계. 조합은 무작위가 아니라 사람이 고르기

부품이 모이면 서로 곱해서 조합을 자동으로 뽑고 싶어져요. 하지만 무작위로 섞으면 어울리지 않는 조합이 꼭 나와요. 어두운 남색 배경에 검은 선 그림이 올라가면 그림이 보이지 않고, 두꺼운 글꼴에 촘촘한 줄무늬 배경이 겹치면 글이 읽히지 않아요.

그래서 저희는 사람이 직접 어울린다고 고른 조합만 템플릿으로 두었어요. 처음 서른 개를 이렇게 만들었고, 쓰는 사람이 어떤 시안을 고르는지 본 뒤에 더 늘리기로 했어요. 지킨 규칙은 셋이에요.

1. 순서는 다섯 개씩 끊어서 봤을 때 배치와 색이 서로 다르게 정해요. 화면에서 시안을 다섯 개씩 보여 주는데, 첫 화면의 다섯 개가 비슷해 보이면 서른 개가 있어도 한두 개처럼 느껴지기 때문이에요.
2. 어두운 색 조합에는 선으로 그린 그림을 쓰지 않아요. 선 그림은 짙은 잉크 색이라 어두운 배경에서 사라져요. 이 규칙은 테스트로 걸어 두었어요.
3. 한 번 내보낸 템플릿의 이름표는 바꾸지 않아요. 사용자가 고른 시안을 이름표로 기억하기 때문에, 바꾸면 기록과 결과가 어긋나요. 늘릴 때는 목록 뒤에 덧붙여요.

규칙 2를 테스트로 쓰면 이런 모양이에요.

it("어두운 색 조합에는 선 그림을 두지 않아요", () => {  const dark = CARD_TEMPLATES.filter((t) => t.palette === "navy")  expect(dark.flatMap((t) => t.art).filter((a) => a.set !== "sticker")).toEqual([])})

4단계. 글을 쓰는 규칙을 단순하게 정하기

템플릿이 늘어도 사용자가 적는 글은 단순해야 해요. 저희는 사용자가 적는 칸을 머리글(선택), 제목, 부제(선택) 세 개로만 했어요. 칸이 많을수록 글자가 넘칠 곳도 늘어나기 때문이에요.

제목의 강조는 별표 하나로 해결했어요. 강조하고 싶은 말을 별표로 감싸면 돼요.

이 습관이 *월급*을 지켜요        -> 월급만 강조해요5가지 실수만 알아도 절반은 끝      -> 별표가 없으면 숫자가 든 말(5가지)을 강조해요

줄바꿈은 한글에서 특히 신경 쓸 부분이에요. 저희는 세 가지를 정했어요.

• 띄어쓰기에서 줄을 나눠요.
• 강조한 말은 한 덩어리로 두어 중간에서 끊지 않아요. 그 말 하나가 한 줄보다 길 때만 띄어쓰기에서 나눠요.
• 띄어쓰기 없이 한 줄보다 긴 단어는 혼자 한 줄에 둬요.

5단계. 글자 수 한도는 그려 보고 정하기

가장 많이 터지는 문제가 글자 넘침이에요. 그리는 도구는 글자가 넘쳐도 알아서 줄여 주지 않고 잘라 내거나 카드 밖으로 내보내요. 그래서 한도를 정하고, 그 한도의 글을 실제로 그려서 확인해야 해요.

저희가 쓴 순서는 이래요.

1. 시험 글을 최악으로 만들어요. 가장 폭이 넓은 한글을 다섯에서 일곱 글자 단어로 이어 붙이면 줄 끝이 가장 많이 낭비돼서 가장 넘치기 쉬워요.
2. 모든 템플릿을 모든 규격으로 그려요. 저희 규격은 인스타 게시물(1080x1350), 정사각(1080x1080), 쇼츠(1080x1920), 가로(1920x1080), A4(2480x3508) 다섯 개예요.
3. 두 가지를 확인해요. 글이 카드 안에 다 들어가는지, 그리고 본문 글자가 읽을 만한 크기로 그려지는지예요.

읽을 만한 크기의 기준은 숫자로 못 박았어요. 게시물 규격에서 본문 글자가 카드 짧은 변의 4.2퍼센트, 즉 1080px 기준 45px 이상이면 폭 390pt 휴대폰에서 16pt 정도로 보여요.

처음 정한 값은 틀렸어요. 표지 제목 32자로 그렸더니 네 줄로 넘쳤고, 28자로 줄이고서야 들어갔어요. 본문 장은 60자에서 96자까지 6자 간격으로 그려 봤어요. 84자까지는 기준을 지켰고, 90자부터 게시물 규격의 글자가 4.0퍼센트로 줄어 기준에 못 미쳤어요. 그래서 본문은 84자, 세 줄까지로 정했어요.

이걸 테스트로 두면 템플릿을 하나 더할 때마다 자동으로 확인돼요.

for (const template of CARD_TEMPLATES) {  for (const [name, [width, height]] of Object.entries(SIZES)) {    const measured = measurePage(ctx, width, height, template, worstCasePage)    expect(measured.heading.fits, `${template.id} ${name} 제목`).toBe(true)    expect(measured.body.fits, `${template.id} ${name} 본문`).toBe(true)  }}

새 템플릿이 한도 글자를 못 담으면 테스트가 어느 템플릿의 어느 규격인지 알려 줘요.

여러분의 경우에 바꿀 곳은 둘이에요. 하나는 규격 목록이에요. 인스타그램만 쓴다면 게시물 규격 하나로 줄여도 되고, 유튜브 썸네일을 만든다면 그 크기를 더하세요. 다른 하나는 읽을 만한 크기의 기준이에요. 어른이 보는 화면이라면 조금 작아도 되지만, 휴대폰에서 훑어보는 카드라면 기준을 높게 잡는 편이 좋아요.

한 가지 알아 둘 점이 있어요. 이 한도는 한글 시험 글로 정한 값이라 영문과 숫자가 많은 글은 따로 시험해 보지 않았어요. 영어 카드를 만든다면 처음부터 다시 재세요.

자주 묻는 질문

Q1. 브라우저와 서버에서 같은 카드가 나오나요?

같은 그리기 코드를 두 곳에서 써서 맞췄어요. 그리기 코드는 2차원 캔버스 하나만 받도록 만들었고, 환경마다 다른 건 글꼴과 그림 파일을 불러오는 부분뿐이에요. 서버에서는 서버용 캔버스 라이브러리로 그려서 JPEG 로 저장해요.

Q2. 여러 장짜리 카드뉴스도 같은 템플릿으로 되나요?

표지는 템플릿의 배치를 그대로 쓰고, 본문 장과 마무리 장은 같은 색, 글꼴, 배경, 강조, 장식에 글 배치만 하나 더 둬요. 그러면 열 장이 한 벌처럼 보여요. 본문과 마무리의 글자 수 한도도 템플릿을 모두 그려서 따로 정해요.

정리

• 템플릿을 그림이 아닌 부품 이름의 목록으로 쪼개면 코드 변경 없이 시안을 늘릴 수 있어요.
• 부품은 라이선스가 분명한 것만 모으고, 불분명한 것은 처음부터 빼요.
• 조합은 무작위로 뽑지 않고 사람이 골라서, 어울리지 않는 규칙은 테스트로 걸어요.
• 글자 수 한도는 최악의 글을 모든 템플릿과 규격으로 그려 보고 정해요.
• 한 번 내보낸 템플릿 이름표는 바꾸지 않고, 늘릴 때는 뒤에 덧붙여요.

글만 적으면 이렇게 만든 시안 중에서 골라 카드뉴스를 내려받을 수 있는 서비스가 있어서, 직접 만들기 전에 어떤 모양인지 써 보셔도 좋아요.