AI로 블로그 헤더 이미지 만들기 — 스킨에 맞는 커버 실전

2026년 10월 · 읽는 시간 약 6분

스킨의 헤더 규격을 먼저 확인한 뒤 3:1 와이드로 만들고, 핵심 요소는 중앙 3분의 1에 배치하면 된다. 이 한 문장이 이 글의 전부다. 나머지는 규격을 어디서 보는지, 모바일에서 왜 잘리는지, 색감을 프롬프트에 어떻게 넣는지를 순서대로 풀어쓴 것이다.

헤더 규격은 어디서 확인하나요?

헤더 규격은 스킨이 정한다. 같은 티스토리라도 스킨마다 헤더 영역의 가로·세로가 다르다. 규격을 모른 채 이미지를 만들면 올리는 순간 잘리거나 늘어나서 깨진다. 확인 경로는 플랫폼마다 정해져 있다. 티스토리 사용자는 관리 → 스킨 편집 → HTML/CSS 편집 화면에서 헤더 관련 코드를 찾는다. 코드가 부담스러우면 스킨 제작 페이지의 설명란에 적힌 권장 사이즈를 본다. 블로거 사용자는 대시보드 → 테마 → 맞춤설정 → 고급 → 헤더로 들어가면 권장 크기가 표시된다. 두 플랫폼 모두 확인에 3분이면 충분하다(기준일 2026-10-21, 작성자 직접 확인).

대표 스킨들의 규격을 작성자가 정리하면 아래 표와 같다. 출처는 각 플랫폼의 스킨 안내와 관리자 화면에 표시된 수치이며, 확인일은 2026-10-21이다. 모바일 안전 영역은 작성자가 직접 계산한 값이다.

플랫폼(기준 스킨)	대표 헤더 규격	가로:세로	모바일 안전 영역
티스토리(대표 스킨)	1920×640px	3:1	중앙 640×640px
블로거(기본 테마)	1200~1600×300~500px	약 3~4:1	중앙 3분의 1

모바일 안전 영역의 산출 방식은 단순하다. 모바일 화면에서는 가로 와이드 헤더의 좌우가 잘리고 세로 기준으로 표시된다. 1920×640 이미지가 세로 640px에 맞춰 표시되면 화면에 보이는 폭도 640px이 되므로, 실제로 노출되는 영역은 정중앙의 640×640px 정사각형이다(1920÷3=640). 즉 전체 헤더의 3분의 1만 모바일 방문자에게 보인다. 「AI 활용법」을 포함한 블로그들의 모바일 유입 비중이 절반을 넘는 현실에서, 이 3분의 1 계산은 헤더 제작의 출발점이다.

이 글에서는 이후 모든 수치를 3:1 기준으로 설명한다. 16:9나 정사각형으로 만들지 않는 이유는 계산이 아니라 설계 때문이다. 대부분의 스킨이 가로형 헤더를 잘라 쓰는 구조로 만들어져 있어서, 3:1로 만들어 두면 위아래가 조금 잘리더라도 핵심 구도가 살아남는다. 다른 비율을 고르면 스킨마다 잘리는 위치가 달라져서 대응이 복잡해진다. 단순한 기준 하나가 스킨 교체 때까지 유효하다.

모바일에서 잘리지 않게 하려면 어떻게 만드나요?

핵심 요소는 중앙 3분의 1 안에 넣는다. 위 표의 계산대로 모바일에서는 중앙 정사각형만 보이므로, 로고 느낌의 오브제나 대표 색감 같은 의도가 담긴 요소는 반드시 그 안에 배치한다. 양 끝 3분의 1씩은 잘려도 되는 여백으로 둔다. 여백이라고 해서 비워두라는 뜻이 아니라, 잘려도 어색하지 않은 단순한 배경·그러데이션을 채우라는 뜻이다.

프롬프트에 구도를 직접 지시한다. "핵심 피사체를 화면 정중앙에 배치하고, 좌우 양 끝은 잘려도 되는 단순한 배경으로 처리"라는 문장 하나가 모바일 대응의 90%다. 이미지 생성기는 지시하지 않으면 화면 가득 피사체를 채우는 경향이 있어서, 여백 지시를 빼먹으면 양 끝이 잘릴 때 얼굴이나 텍스트가 반토막 난다. 생성된 이미지를 받았다면 스마트폰으로 직접 열어보며 중앙 정사각형만 가려서 확인하는 습관을 들인다. 이 확인에 걸리는 시간은 30초, 헤더를 잘못 올려서 교체하는 데 드는 시간은 30분이다.

스킨 톤에 맞는 색감은 프롬프트에 어떻게 넣나요?

헤더는 단독 이미지가 아니라 스킨과 한 세트다. 스킨의 배경색·강조색·분위기를 먼저 메모한 뒤 프롬프트에 색감 키워드로 넣는다. 스킨이 따뜻한 베이지 톤이라면 프롬프트에 "따뜻한 베이지 톤, 미니멀"을, 다크 스킨이라면 "딥 네이비 배경, 은은한 조명"을 지정한다. 색감이 어긋나면 헤더만 따로 노는 느낌이 난다. 색상 코드는 몰라도 된다. "따뜻하다", "차분하다", "싱그럽다" 같은 일상 언어로도 생성기는 충분히 톤을 맞춘다.

블로그 주제를 설명하는 대표 오브제는 1~2개로 제한한다. 요리 블로그라면 식탁 위 재료, IT 블로그라면 책상 위 기기, 여행 블로그라면 창밖 풍경처럼 주제를 한눈에 설명하는 사물 하나를 고른다. 오브제가 3개를 넘어가면 헤더가 복잡해져서 첫인상이 흐려진다. 아래 복붙 프롬프트 2종은 [주제 오브제]와 [색감 키워드]만 바꾸면 바로 쓸 수 있게 만들어뒀다.

복붙 프롬프트 ① 가로 와이드 커버용

"블로그 헤더용 와이드 이미지. 1920×640, 가로로 긴 파노라마 구도. [주제 오브제]를 화면 왼쪽 3분의 1에 배치하고, 오른쪽 3분의 2는 [색감 키워드]의 부드러운 여백으로. 포토리얼리스틱, 은은한 자연광, 미니멀한 분위기. 텍스트 공간 확보를 위해 중앙은 비워 둘 것."

복붙 프롬프트 ② 모바일 대응 중앙 집중형

"블로그 헤더용 이미지. 1920×640. 핵심 피사체 [주제 오브제]를 화면 정중앙에 크게 배치하고, 좌우 양 끝은 잘려도 되는 단순한 배경으로 처리. [색감 키워드] 톤, 포토리얼리스틱, 부드러운 그러데이션 배경, 여백이 넉넉한 구도."

[주제 오브제]에는 "따뜻한 나무 식탁 위의 커피잔과 노트북"처럼 구체적인 장면을 적는다. [색감 키워드]에는 "따뜻한 베이지 톤", "차분한 그레이 톤"처럼 스킨에 맞는 말을 넣는다. 조합 예시를 들면, 요리 블로그는 "따뜻한 나무 식탁 위의 커피잔과 노트북 + 따뜻한 베이지 톤", IT 블로그는 "창가에 놓인 노트북과 다육식물 + 차분한 그레이 톤", 여행 블로그는 "창밖으로 보이는 산 능선 + 싱그러운 그린 톤"이 된다. 오브제와 색감의 조합이 정해지면 계절이 바뀌어도 같은 틀을 재활용할 수 있다. 가을에는 "단풍잎이 놓인 나무 식탁"으로 오브제만 바꾸는 식이다.

생성된 이미지는 2~3장을 뽑아 스킨에 직접 올려 보고 고른다. 모니터에서 따로 볼 때와 스킨에 얹었을 때의 느낌이 다르기 때문이다. 특히 헤더 텍스트(블로그 제목)와의 겹침, 메뉴바와의 색 조화는 실제 화면에서만 확인된다. 마음에 드는 버전이 나오면 프롬프트를 메모장에 저장해둔다. 계절이 바뀌어 헤더를 교체할 때 같은 톤으로 다시 만들 수 있다.

헤더의 한글 텍스트는 왜 AI에게 맡기면 안 되나요?

AI의 한글 텍스트 렌더링은 2026년 10월 현재도 오타가 잦다. 헤더에 블로그 이름을 직접 넣고 싶다면 이미지 생성 단계에서는 텍스트를 빼고, 생성된 이미지 위에 캔바 같은 도구에서 직접 타이핑하는 것이 정확하다. "중앙은 비워 두고 좌우 또는 상하에 여백을 둔 구도"를 프롬프트에 명시하면 제목 텍스트가 이미지와 겹쳐서 안 읽히는 사고를 막을 수 있다. 블로그 제목이나 메뉴가 헤더 위에 겹치는 스킨이 많기 때문에, 텍스트 공간 확보 지시는 색감 지시만큼 중요하다.

텍스트를 이미지 안에 직접 그리지 말고 스킨의 헤더 텍스트 기능을 이용해 얹는 방법도 있다. 이렇게 하면 나중에 블로그 이름을 바꿀 때 이미지를 다시 만들 필요가 없다. 헤더 오른쪽 여백에 블로그의 핵심 키워드 3개("요리 · 살림 · 일상")를 작은 텍스트로 올리면 방문자가 블로그 정체성을 3초 만에 파악한다. 키워드를 이미지로 구워버리면 수정할 때마다 재생성해야 하지만, 스킨 텍스트로 얹으면 1분 만에 바뀐다.

스킨에 올린 뒤에는 무엇을 확인하나요?

적용 경로는 플랫폼별로 정해져 있다. 블로거는 대시보드 → 테마 → 맞춤설정 → 헤더에서 "이미지 업로드"를 선택한다. "헤더 뒤에 표시"를 켜면 블로그 제목이 이미지 위에 겹치고, 끄면 이미지만 보인다. "축소해서 맞추기" 옵션을 켜면 규격이 조금 달라도 화면에 맞게 들어간다. 티스토리는 관리 → 스킨 편집 → 헤더 이미지 변경에서 교체하거나, 스킨에 따라 CSS의 background-image를 교체하는 방식이다. 변경 후에는 시크릿 창으로 블로그를 열어 캐시 문제를 피하고 확인한다(경로 확인일 2026-10-21).

확인 항목은 여섯 가지다. 헤더 규격(가로×세로)과 일치하는가. 파일 용량이 500KB 이하인가. 핵심 피사체가 중앙 3분의 1에 있는가. 블로그 제목·메뉴와 겹쳐도 읽히는가. 모바일에서 중앙 부분만 봐도 어색하지 않은가. 스킨 배경색·강조색과 색감이 맞는가. 용량 기준 500KB의 근거는 로딩 속도다. 헤더는 블로그 모든 페이지에서 로드되는 이미지라 용량이 크면 전체 속도에 영향을 준다. 1920×640 JPG 기준으로 300~500KB 이하를 목표로 무료 압축 도구를 거치면 화질 저하 없이 용량을 절반 이하로 줄일 수 있다.

AI 헤더가 어울리지 않는 블로그도 있나요?

있다. 텍스트 중심의 정보형 블로그, 공식 문서·약관을 다루는 블로그처럼 신뢰의 근거가 정확성인 곳에서는 화려한 AI 헤더가 오히려 방해가 된다. 이런 블로그에는 단색 배경에 스킨 텍스트만 얹은 미니멀 헤더가 낫다. 또한 라이선스 확인이 필요한 경우도 있다. AI 생성기로 만든 이미지는 대부분 생성기의 약관에 따라 상업적 이용이 가능하지만, 블로그 헤더처럼 대표 이미지로 쓸 때는 사용 중인 플랜의 라이선스 조항을 한 번 더 읽는다. 확인 순서는 정해져 있다. ① 생성기의 이용약관에서 '상업적 이용' 조항을 찾는다. ② 무료 플랜과 유료 플랜의 범위가 다른지 확인한다. ③ 헤더로 쓰는 용도가 허용 범위에 드는지 대조한다. 무료 플랜에서 만든 이미지의 이용 범위가 유료 플랜과 다를 수 있다. 확인한 약관 내용은 프롬프트와 함께 메모해두면 분쟁 소지를 줄일 수 있다.

헤더 교체 주기는 분기에 한 번 점검하는 것을 기준으로 삼는다. 계절이 바뀌거나 블로그 방향이 달라지면 교체하는 것이 좋다. 교체할 때는 기존 헤더의 프롬프트를 재활용한다. 색감 키워드와 오브제만 바꾸면 같은 톤의 새 헤더가 나와서 블로그 정체성이 유지된다. 헤더 원본 파일은 "blog-header-2026-10.png"처럼 날짜 규칙으로 보관한다. 이전 헤더로 되돌리거나 같은 톤으로 SNS 프로필 이미지를 만들 때 원본이 있으면 작업이 빠르다. 헤더와 파비콘, SNS 프로필 이미지를 같은 톤으로 맞추면 브랜딩 완성도가 올라간다.

자주 묻는 질문

Q. 블로그 헤더 이미지 사이즈는 몇으로 만들어야 하나요?
A. 쓰는 스킨의 규격을 먼저 확인하는 것이 정답이다. 스킨 규격을 모를 때의 안전값은 1920×640(3:1)이다. 대부분의 스킨이 가로형 헤더를 잘라 쓰는 구조라서, 3:1로 만들어 두면 위아래가 조금 잘려도 핵심 구도가 살아남는다.

Q. AI로 만든 블로그 헤더를 상업적으로 써도 되나요?
A. 대부분 생성기의 약관은 상업적 이용을 허용하지만, 플랜별로 범위가 다르다. 무료 플랜과 유료 플랜의 이용 범위가 다를 수 있으니 헤더를 확정하기 전에 사용 중인 플랜의 라이선스 조항을 직접 읽는다. 확인일 2026-10-21 기준으로 약관은 수시로 바뀌므로 확정 시점에 재확인한다.

Q. 티스토리 헤더 이미지는 어디서 바꾸나요?
A. 관리 → 스킨 편집 → 헤더 이미지 변경에서 교체한다. 업로드 메뉴가 없는 스킨은 HTML/CSS 편집에서 background-image를 교체하는 방식이다. 변경 후에는 시크릿 창으로 확인해 브라우저 캐시 때문에 이전 헤더가 보이는 경우를 피한다.

오늘 저녁에 할 수 있는 순서는 다섯 단계다. ① 쓰는 스킨의 헤더 규격을 관리자 화면에서 확인한다. ② 스킨의 배경색·강조색을 메모한다. ③ 위 복붙 프롬프트 2종에 오브제와 색감을 넣어 2~3장을 생성한다. ④ 스킨에 올려 PC와 모바일에서 직접 본다. 모바일 확인은 스마트폰으로 블로그를 직접 열어 헤더의 중앙 정사각형만 보이는 상태에서 어색하지 않은지를 보는 것이다. ⑤ 마음에 드는 버전의 프롬프트와 원본 파일을 날짜 규칙으로 보관한다. 헤더는 블로그의 얼굴이다. 규격·톤·라이선스를 함께 챙긴 커버 하나가 글 열 편보다 먼저 독자의 신뢰를 만든다.

이 글은 AI의 도움을 받아 작성되었습니다. 규격·경로 정보는 2026년 10월 기준이며 스킨과 버전에 따라 다를 수 있습니다.

이 글의 이미지는 AI로 생성된 참고 이미지입니다.