이 블로그는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다.
📰 카드뉴스카드뉴스 만들 때 자주 하는 실수 5가지, 이것만 피해도 완성도 달라진다
카드뉴스를 만들어 봤는데 PNG로 변환하고 나면 뭔가 어긋나 있는 경험, 한 번쯤 있으셨나요? 레이아웃이 흐트러지거나, 폰트가 네모로 깨지거나, 이미지가 뿌옇게 나오거나. 원인을 모르면 계속 같은 실수를 반복하게 됩니다. 카드뉴스 변환기를 수백 번 써본 사람들이 가장 많이 걸리는 함정 5가지를 골랐습니다. 이것만 피하면 완성도가 눈에 띄게 달라집니다.
실수 1 — 페이지 구분 없이 HTML을 작성한다
카드뉴스는 한 장이 아닙니다. 여러 장을 이어 붙인 콘텐츠입니다. 그런데 HTML을 한 덩어리로 작성하면 변환기가 페이지를 구분하지 못합니다. 카드뉴스 변환기(cardnews-down)는 HTML 구조를 자동으로 읽어서 각 페이지를 PNG 이미지로 따로 저장합니다. 페이지 단위로 나눌 때는 해결법: 각 카드 페이지를 디자인할 때 구글 폰트나 눈누 폰트를 해결법: 폰트 파일을 직접 카드 안에 사진이나 로고를 넣을 때 해결법: 이미지를 웹 페이지 작업을 많이 해본 분들은 해결법: HTML 페이지 크기를 1080×1080px(정사각형) 또는 1080×1920px(세로형)으로 설정합니다. 텍스트 크기도 이 기준에 맞게 조정합니다. 카드뉴스 변환기는 지정한 HTML 크기 그대로 PNG를 출력하므로, 처음부터 실제 업로드 사이즈로 설계하는 것이 맞습니다. 카드 한 장에 텍스트를 너무 많이 넣었을 때, 브라우저에서는 스크롤로 볼 수 있어서 문제를 모릅니다. 그런데 PNG 변환 결과물을 열어보면 다음 페이지 내용이 현재 페이지 아래로 삐져나와 있거나, 원래 카드 영역 밖까지 텍스트가 출력됩니다. 페이지 구분 div에 해결법: 각 페이지 위 5가지 실수를 다 피하려면 HTML 구조 설계부터 꼼꼼하게 해야 합니다. 처음에는 번거롭게 느껴지지만 한 번 제대로 세팅해두면 이후 작업이 훨씬 빠릅니다. 카드뉴스 변환기(cardnews-down)는 HTML 파일 하나를 업로드하면 페이지 구성을 자동으로 감지해 각 페이지를 PNG로 변환하고, 변환된 이미지를 이어붙인 영상까지 한 번에 만들어 줍니다. 가입 없이 무료로 쓸 수 있어서 처음 테스트하기에도 부담이 없습니다. 위에서 설명한 실수들을 피한 HTML 파일을 준비했다면, 지금 바로 카드뉴스 변환기에서 무료로 변환해보세요 → PPT나 포토샵 없이 HTML 코드 한 장으로 카드뉴스 7장 + 영상을 만드는 방법이 궁금하다면 카드뉴스 만들기 기본 가이드도 함께 확인해보세요. Q. 카드뉴스를 몇 장까지 만들 수 있나요? Q. 폰트 깨짐 없이 한글을 예쁘게 넣으려면 어떻게 해야 하나요? Q. 변환된 PNG 파일의 해상도는 어떻게 되나요? 태그나 태그로 감싸고, 동일한 크기(예: width: 1080px; height: 1080px)를 고정으로 지정합니다. 카드뉴스 변환기는 이 구조를 인식해 장수를 자동으로 맞춥니다.실수 2 — 웹 폰트를 CDN 링크로만 불러온다
@import로 불러오는 경우가 많습니다. 브라우저에서 볼 때는 멀쩡한데, PNG로 변환하면 폰트가 네모 박스로 깨져 나오는 이유가 여기 있습니다. 변환 과정에서 외부 폰트 로딩이 완료되기 전에 캡처가 이루어지거나, 네트워크 환경에 따라 CDN 요청이 실패하면 폰트를 불러오지 못합니다.base64로 인코딩해 HTML 안에 인라인으로 넣거나, CSS font-face에 로컬 폰트 경로를 함께 지정합니다. 또는 시스템 기본 폰트(Noto Sans KR, Apple SD Gothic Neo 등)를 우선 순위에 넣어 두면 CDN 실패 시에도 깨짐 없이 렌더링됩니다.실수 3 — 이미지를 URL 링크로만 넣는다
base64로 변환해서 src="data:image/png;base64,..." 형태로 HTML에 직접 삽입합니다. 파일 크기가 커지는 단점이 있지만, 변환 오류를 막는 가장 확실한 방법입니다. 용량이 걱정된다면 해상도를 적절히 줄인 뒤 삽입합니다.실수 4 — 해상도를 72dpi 기준으로 설계한다
1px = 1px이라는 감각에 익숙합니다. 그런데 카드뉴스는 인스타그램, 블로그, 유튜브 커뮤니티 등 여러 플랫폼에 올라가는 이미지입니다. 인스타그램 정사각형 기준 권장 해상도는 최소 1080×1080px이고, 레티나 기기에서는 2배까지 고려해야 합니다. HTML을 500px 기준으로 설계하고 그대로 변환하면 업로드 후 흐릿하게 보이는 이유입니다.실수 5 — CSS
overflow: hidden을 빠뜨린다overflow: hidden이 없기 때문입니다. 또는 overflow: hidden을 추가합니다. 그리고 텍스트 분량이 고정 높이를 초과하지 않도록 실제 변환 전에 확인하는 습관이 필요합니다. 카드 한 장에 내용이 많으면 두 장으로 나누는 것이 완성도 면에서 훨씬 낫습니다.완성도 높은 카드뉴스를 더 빠르게 만드는 방법
A. 카드뉴스 변환기는 HTML 구조에서 페이지를 자동으로 감지합니다. 장수 제한 없이 입력 HTML의 페이지 수만큼 PNG를 생성합니다. 인스타그램 카드뉴스는 보통 5~10장 내외가 읽기에 적당합니다. 무료로 바로 테스트해보기 →
A. Noto Sans KR 또는 Apple SD Gothic Neo를 CSS font-family 첫 번째에 지정하면 대부분의 환경에서 깨지지 않습니다. 특정 디자인 폰트를 고집한다면 base64 인라인 방식으로 HTML에 직접 넣는 것이 가장 안정적입니다.
A. 변환 결과 해상도는 HTML에서 설정한 페이지 크기를 그대로 따릅니다. 인스타그램 업로드용이라면 HTML 페이지를 1080×1080px 또는 1080×1920px로 작성하는 것을 권장합니다.