워드프레스 블로그를 운영하면서 썸네일 때문에 낭패를 본 적이 몇 번 있습니다. 모바일 카드형 레이아웃에서 양옆 글자가 잘리거나, 페이스북 미리보기에서 상단이 눌려 보이는 문제 말이죠. 포토샵 없이 무료 이미지 편집 방법을 해결하려고 Photopea를 쓰기 시작했는데, 브라우저에서 돌아가고 단축키까지 거의 똑같아서 금방 손에 익었습니다. 지금은 글을 올릴 때마다 1200×630 규격 썸네일을 Photopea로 5분 안에 뚝딱 만듭니다. 아래는 제가 실제로 쓰는 루틴을 그대로 옮긴 것입니다. CTR이 낮은 카테고리를 이 방식으로 고치고 나서 2주 동안 같은 키워드에서 0.6%→0.9%로 올라간 경험이 있습니다(같은 기간, 게시물 12개 기준).
1) 무료 이미지 편집 Photopea로 1200×630 캔버스 만들기와 안전 영역 설정
- Photopea 접속 > File > New Project(Ctrl+N)
- Width 1200, Height 630, Background: White(또는 Transparent), Color Profile: sRGB 추천
- View > Rulers 체크 후, 상단·좌측 눈금자에서 드래그해 가이드 추가
모바일과 SNS에서 텍스트가 잘리지 않게 “안전 영역”을 꼭 잡습니다. 저는 가장자리에서 60px씩 안쪽으로 가이드를 두릅니다. 숫자로 찍고 싶으면 View > New Guide에서 Left 60, Right 1140, Top 60, Bottom 570로 입력하세요. 이렇게 하면 실제 디자인 영역(안전 영역)이 1080×510이 됩니다. 텍스트와 로고는 이 사각형 안에만 배치하는 원칙을 지키면, 페이스북/카카오 미리보기, 카드형 목록에서도 거의 안 잘립니다.
팁:
- View > Snap 켜두면 요소가 가이드에 착 달라붙습니다.
- 자주 쓰면 PSD 템플릿으로 File > Save as PSD 해 두고, 다음부터는 그 파일만 열어 복제(Ctrl+J)해서 시작하면 빨라집니다.
2) 무료 상업용 한글 폰트 적용과 글자 선명도 높이기
상업용 무료 한글 폰트 중, 썸네일에서 가독성이 좋은 조합은 다음이 안정적이었습니다.
- 본문형: Noto Sans KR, Pretendard, SUIT
- 강조형: Gmarket Sans, Noto Serif KR(짧은 키워드에만)
Photopea에서 글꼴 불러오기:
- T(텍스트) 도구 선택 후 상단의 폰트 드롭다운에서 원하는 폰트를 고릅니다.
- 없는 폰트는 OTF/TTF 파일을 로컬에서 불러올 수 있습니다. 드래그&드롭하거나 File > Open으로 폰트 파일을 연 뒤, 폰트 목록에서 “My Fonts”로 표시되는 항목을 선택하세요.
선명도 세팅은 작은 차이가 큽니다.
- 글자 크기: 72~96px로 크게, 행간은 딱 붙이지 말고 1.1배 정도
- 자간: -10~-20 사이로 살짝 당기면 뭉개짐이 덜하고 힘이 생깁니다
- 안티앨리어싱: 상단 바의 AA 옵션에서 “Sharp/크리스프” 계열을 선택(모니터에서 가장 또렷해 보이는 쪽으로)
- 색 대비: 배경 대비비 4.5:1 이상(예: 짙은 남색 배경 #0D1B2A + 흰색 텍스트 #FFFFFF)
제 경험상 Pretendard SemiBold 84px, 자간 -15, 줄간 1.1로 맞추면 1200×630에서 거의 모든 배경 위에 또렷했습니다. 폰트 라이선스는 반드시 확인하시고(대부분 상업적 사용 가능), 폰트 저작권 페이지 링크를 북마크해 두면 팀과 공유하기 좋습니다.
3) 레이어 스타일 없이 만드는 테두리·그림자 강조법
레이어 스타일을 쓰지 않고도 가볍고 깔끔한 강조가 가능합니다. 파일 용량도 덜 불어납니다.
- 배경 스트립 방식: 텍스트 뒤에 검은색(또는 브랜드 컬러) 사각형을 깔고 Opacity를 20~30%로 낮춥니다. 모서리 Radius 8~12px로 둥글리면 요즘 느낌이 납니다. 이 방식이 가장 안전합니다. 크롤링 이미지에서도 깔끔합니다.
- 텍스트 복제 그림자: 텍스트 레이어를 Ctrl+J로 복제 > 아래 레이어 색을 검정으로 변경 > 약간 아래/오른쪽으로 3~4px 이동 > Filter > Blur > Gaussian Blur 2~3px. 거친 배경에서도 글자가 올라옵니다.
- 아웃라인(테두리) 만들기: 텍스트를 레스터화한 후(레이어 우클릭 > Rasterize), 텍스트 선택(레이어 썸네일 Ctrl+클릭) > Select > Modify > Expand 3~4px > 새 레이어에 흰색 채우기(Paint Bucket). 원본 텍스트 아래로 내려 테두리처럼 쓰면 됩니다.
실무에서 썸네일 10장을 이렇게 바꾸니 파일 하나당 평균 8~12% 용량이 줄면서도, 모바일에서 가독성이 확 올라갔습니다. 특히 배경이 사진일 때는 “배경 스트립 + 약한 그림자” 조합이 실패가 거의 없습니다.
4) 웹용 내보내기: WebP/PNG 선택과 150KB 이하로 줄이기
워드프레스 속도를 살리려면 1200×630 기준 150KB 아래로 맞추는 것을 목표로 삼습니다.
- 사진·텍스처가 많은 경우: File > Export As > WebP, Quality 70~80에서 미리보기로 깨짐 없는 최저점을 찾습니다. Metadata(또는 EXIF) 포함 옵션은 꺼서 용량을 줄입니다. sRGB 프로파일은 유지하세요.
- 단색·도형 위주의 그래픽: WebP 품질을 60~70으로 내려도 깨짐이 거의 없습니다. 투명이 꼭 필요하면 PNG-24를 쓰되 200KB를 넘기지 않도록 요소를 단순화합니다.
- OG 이미지 호환: 사이트 속도용으로 WebP를 쓰되, SNS 스크랩 안정성을 중시한다면 동일 파일을 JPG(품질 75)로도 저장해 OG 이미지 플러그인(예: Yoast/RankMath)에서 JPG를 지정하는 방법이 안전합니다.
파일명은 소문자-하이픈 규칙으로 키워드를 포함하세요. 예) photopea-wordpress-thumbnail-1200×630.webp. 워드프레스 업로드 전 미리보기에서 100% 확대로 확인해 가장자리 계단 현상이 없는지 마지막 점검을 합니다. 제 블로그(GeneratePress + 이미지 프리로드)에서는 WebP Q=72, 110~140KB 구간이 LCP에 가장 안정적이었습니다.
5) 썸네일 색상·대비 A/B 버전 빠르게 복제하는 방법
한 번 만든 레이아웃으로 색감만 바꿔 CTR 테스트를 돌리면 효율이 정말 좋습니다. 저는 이렇게 합니다.
- 모든 요소를 그룹으로 묶기(Ctrl+G) > 그룹을 Ctrl+J로 복제해 A/B 두 벌 만들기
- 각 그룹 상단에 Layer > New Adjustment Layer > Hue/Saturation(또는 Color Balance)를 추가해 전체 톤을 바꿉니다. 배경만 바꾸려면 배경 레이어만 선택해 조정
- A안: 따뜻한 오렌지(#FF6B00) 계열 배경 + 흰 텍스트, B안: 시원한 파랑(#1E90FF) 계열 배경 + 흰 텍스트
- 상단 키워드만 색 반전(예: 흰 텍스트에 검은 스트립)해 대비를 더 주는 변형 C안까지 만들어도 작업 시간은 거의 동일
내보내기는 그룹 눈 표시로 하나씩 켠 뒤 Export As를 두 번 실행하면 끝입니다. 저는 카테고리 카드에 A안을, 본문 상단 OG 이미지엔 B안을 넣어 2주씩 번갈아 노출합니다. Search Console과 SNS 클릭 데이터를 함께 보니, 기술 카테고리는 파랑 계열이, 라이프 카테고리는 오렌지·옐로 계열이 더 잘 먹혔습니다. 중요한 건 색상 하나만 바꾸는 “단일 변수” 테스트라는 점입니다.
현실 조언을 덧붙이면, 저작권은 처음부터 안전하게 가야 마음이 편합니다. 배경 사진은 CC0(예: Unsplash, Pexels)만 사용하고, 폰트는 상업적 사용 허가를 문서로 보관하세요. 썸네일 하단 모서리에 아주 작게 출처 텍스트를 반복 삽입하는 템플릿을 만들어 두면, 표기 실수를 줄일 수 있습니다. 이렇게 만든 1200×630 썸네일은 속도, 가독성, 정책 모두에서 안정적이어서, 애드센스 심사에서도 좋은 인상을 줍니다.
