네이버 블로그 스킨 만들기, 클로드로 움직이는 타이틀과 카테고리 버튼 넣는 법

※ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

네이버 블로그 스킨의 타이틀에는 HTML 같은 코드를 넣을 수 없지만 GIF는 올릴 수 있어요. 그래서 클로드가 HTML·CSS로 애니메이션을 만들고, 프레임을 캡처해 GIF로 묶어 타이틀에 등록하면 움직이는 배너가 돼요. 클릭되는 카테고리 버튼은 이미지 안에 넣을 수 없어서 위젯 직접 등록으로 따로 만들고, 휴대폰 화면은 모바일앱 커버 이미지로 별도로 맞춰야 해요.

네이버 블로그 스킨은 타이틀에 코드를 넣을 수 없지만, GIF 이미지는 올릴 수 있어요. 이 점을 이용해 제 네이버 블로그의 PC 첫 화면과 휴대폰 커버를 클로드에게 맡겨 바꿨어요.

실제로 작업한 순서 그대로 백업, 움직이는 타이틀 GIF, 클릭되는 카테고리 버튼, 휴대폰 커버까지 정리했어요. 해 보다가 안 된 시도와 네이버에서 막혀 있는 것도 함께 적었어요.

네이버 블로그 스킨을 클로드로 바꾸면 어떻게 달라지나요?

클로드로 바꾼 PC 첫 화면 (메뉴 → 배너 → 버튼 5개 → 썸네일)

제 네이버 블로그는 스킨을 베이직 그대로 두고, 움직이는 타이틀 GIF와 위젯 버튼으로 첫 화면을 바꿨어요. 위에서 아래로 이렇게 구성돼요.

1. 블로그 메뉴 줄: 남색(#0E1A38) 바탕에 현재 메뉴만 민트(#3DDBB0)로 표시돼요. 레이아웃 설정에서 제가 직접 배너 위로 옮겼어요.
2. 움직이는 타이틀 배너: 966×280 GIF예요. 왼쪽에는 슬로건과 큰 로고, 한 줄 소개가 있고 오른쪽에는 클로드 작업 창이 있어요. 요청 문장이 입력되면 ✓ 결과가 한 줄씩 나타나요.
3. 카테고리 버튼 5개: 진짜로 클릭되는 위젯이에요. 클로드 사용법, 클로드 업무활용, AI 요금·무료 비교, AI 도구·용어, 전체 글 보기로 이어져요.
4. 홈(프롤로그) 썸네일: 한 줄에 5개씩 3줄이에요.

작업은 클로드에게 맡기고, 메뉴 위치를 옮기는 것처럼 화면에서 직접 끌어야 하는 부분만 제가 했어요.

네이버 블로그 스킨이란? 시작 전에 무엇을 준비하나요?

작업 전 PC 첫 화면 — 정지된 타이틀과 흰 바탕 메뉴 줄

네이버 블로그 스킨은 타이틀, 메뉴, 배경, 레이아웃처럼 블로그의 겉모양을 묶어 부르는 말이에요. 이 글에서는 스킨을 통째로 바꾸지 않고, 기본 스킨 위에서 세부 디자인 설정으로 겉모양을 바꾸는 방법을 다뤄요. 시작 전에는 PC 브라우저, 클로드, 정리된 카테고리, 되돌릴 저장본 네 가지를 준비하면 돼요.

• PC 브라우저: 꾸미기 설정은 PC에서 내 블로그 관리 화면으로 들어가서 해요.
• 클로드: HTML을 만들고 브라우저 화면을 캡처해 GIF로 묶는 작업까지 시킬 수 있는 환경이 필요해요. 저는 브라우저를 직접 움직이는 Aside에 클로드를 연결해서, 설정 화면을 여는 일까지 맡겼어요. 쓰는 환경에서 파일 만들기와 브라우저 작업이 되는지 먼저 확인해 보세요.
• 정리된 카테고리: 버튼으로 연결할 카테고리가 먼저 정해져 있어야 해요.
• 되돌릴 방법: 바로 다음 섹션에서 설명하는 '내가 만든 스킨' 저장이에요.

바꾸기 전에 무엇부터 해야 하나요?

꾸미기 설정 → 내 스킨 관리 — 단계마다 저장한 '내가 만든 스킨' 5개

디자인을 만지기 전에 벤치마킹, 카테고리 정리, 지금 디자인 백업을 먼저 했어요.

1. 벤치마킹: 네이버의 AI·IT 블로그 10곳의 PC 첫 화면을 나란히 비교했어요. 공통점은 큰 타이틀 이미지 1장, 메뉴 5개 안팎, 색 1~2개, 1단의 넓은 본문이었어요.
2. 카테고리 정리: 카테고리 3개를 4개로 나눠 총 52편을 옮겼어요. 클로드 사용법 16편, 클로드 업무활용 9편, AI 요금·무료 비교 15편, AI 도구·용어 12편이에요.
3. 백업: 지금 디자인을 '내가 만든 스킨'으로 저장해요.

세부 디자인을 적용할 때 '세부 디자인 적용' 창에서 "내가 만든 스킨에 저장합니다"를 체크하면 이름을 붙여 저장돼요. 저는 단계마다 이름 끝에 날짜를 붙여 저장해서 작업 전부터 최종본까지 되돌릴 지점을 5개 남겼어요. 저장본은 꾸미기 설정 → 스킨 → 내 스킨 관리의 '내가 만든 스킨' 탭에서 골라 다시 적용할 수 있어요.

스킨을 교체하지 않고 메뉴 줄 색만 바꾸려면?

리모콘 → 블로그 메뉴 → 컬러: 배경 #0E1A38 입력

PC에서 내 블로그 관리 → 꾸미기 설정 → 디자인 설정의 '세부 디자인 설정'을 누르면 오른쪽에 리모콘이 열려요. 리모콘 왼쪽 목록에서 '블로그 메뉴'를 고르고 디자인의 '컬러' 탭에서 색 코드 칸에 #0E1A38처럼 코드를 넣고 [입력]을 누르면 메뉴 줄 색이 바뀌어요. 스킨을 다른 것으로 바꾸지 않아도 되고, 저는 스킨을 베이직 그대로 두고 값만 바꿨어요. 마지막에 [적용]을 눌러야 반영돼요.

제가 바꾼 값을 한곳에 모으면 이래요. 레이아웃은 레이아웃·위젯 설정, 프롤로그는 메뉴·글·동영상 관리 → 프롤로그, 나머지는 리모콘에서 바꿨어요.

네이버 블로그 스킨 사이즈는 어떻게 되나요?

리모콘 → 타이틀 → 직접등록: 영역 높이 280, 블로그 제목 '표시' 끔, 규격 안내 966px·50~600px

타이틀 이미지는 가로 966px, 세로 50~600px이에요. 리모콘의 타이틀 → 직접등록 화면 아래에도 같은 규격이 적혀 있어요.

영역별 규격은 아래 표로 한눈에 볼 수 있어요. 타이틀과 위젯 수치는 네이버 고객센터의 '타이틀 등록 방법', '위젯 직접 등록 방법' 도움말에서 가져왔고, 모바일 커버 칸 크기는 폭 390px 모바일 화면으로 띄워서 잰 값이에요.

클로드로 움직이는 타이틀 GIF는 어떻게 만드나요?

실제로 올린 타이틀 배너(966×280) — 요청이 입력되고 ✓ 결과가 한 줄씩 나타나요

클로드에게 HTML·CSS 애니메이션을 만들게 하고, 브라우저에서 프레임을 캡처해 GIF 한 개로 묶으면 돼요. 타이틀은 코드를 받지 않지만 GIF는 받기 때문에 이 방법이 통해요.

먼저 클로드에게 이렇게 요청했어요. 대괄호 부분만 내 블로그에 맞게 바꿔서 쓰세요.

네이버 블로그 타이틀에 올릴 움직이는 배너를 만들어 줘.
- 크기: 가로 966px, 세로 280px
- 분위기: 배경은 진한 남색([배경색 코드]), 강조색은 민트([강조색 코드]), 글꼴은 Pretendard
- 왼쪽: 작은 문구 "[한 줄 슬로건]", 큰 로고 "[블로그 이름]", 그 아래 한 줄 소개 "[한 줄 소개]"
- 오른쪽: 클로드 작업 창 모양. "[입력될 요청 문장]"이 타자 치듯 입력되고, 그 아래에 ✓ 결과가 한 줄씩 나타나게 해 줘
- 방식: HTML과 CSS로 만들고, 시각 t(초)를 넣으면 그 순간의 화면을 그리는 render(t) 함수를 둬 줘
- 만든 뒤: 0~6초를 0.1초 간격으로 캡처해서 GIF 한 개로 묶어 줘. 마지막 장면은 4초 멈췄다가 반복되게 해 줘
- 조건: 256색 공유 팔레트, 디더링 없음, 파일 크기 20MB 미만, 파일명은 영문·숫자만 (예: title01.gif)
- 주의: 창 위쪽의 빨강·노랑·초록 점 색이 GIF에서 회색으로 변하지 않게 그 색을 팔레트에 포함해 줘

클로드가 한 작업의 흐름은 이래요.

1. 배경 #0B1530, 민트 #3DDBB0, Pretendard 글꼴로 점 격자와 은은한 빛, 오른쪽 가짜 터미널 창이 있는 HTML 페이지를 만들어요.
2. 페이지 안의 render(t) 함수로 0~6초를 0.1초 간격으로 61장 캡처해요.
3. 파이썬 Pillow로 256색 공유 팔레트, 디더링 없이 GIF로 묶어요. 마지막 장면은 4초 멈췄다가 처음부터 반복되게 했고, 완성된 파일은 84KB였어요.
4. 세부 디자인 설정(리모콘) → 타이틀 → 디자인의 '직접등록' 탭에서 [파일 등록]으로 GIF를 올리고, 영역 높이를 280으로 맞춘 뒤 [적용]을 눌러요.

등록한 뒤에는 라이브 화면을 몇 초 간격으로 세 번 찍어서 입력 전, 입력 중, 완료로 바뀌는지 확인했어요. PC 화면 기준으로 확인했어요.

GIF 타이틀을 올릴 때 겪은 문제는 뭔가요?

제가 겪은 문제는 창 위쪽 점 색이 바뀐 것, 배너 아래가 잘린 것, 블로그 제목 글자가 함께 보이는 것 세 가지였어요. 점 색은 GIF 팔레트로, 나머지 둘은 리모콘 설정으로 해결했어요.

• 창 위쪽 점이 회색으로 변함: GIF로 바꾸는 과정에서 빨강·노랑·초록 점이 회색이 됐어요. 팔레트를 만들 때 필요한 색 견본 줄을 함께 넣어서 해결했어요.
• 배너 아래가 잘림: 리모콘 → 타이틀 → 영역 높이를 이미지 높이(280)와 똑같이 맞춰야 잘리지 않아요.
• 블로그 제목 글자 표시: 이미지에 블로그 이름이 이미 있어서 블로그 제목 글자 표시는 껐어요.

파일명은 영문·숫자만 쓸 수 있다는 점도 기억해 두세요. 한글 파일명은 등록할 수 없어요.

클릭되는 카테고리 버튼은 어떻게 넣나요?

위젯 수정 창 — 위젯명과 버튼 코드, 네이버가 앞에 붙인 target="_blank"도 보여요

위젯 직접 등록으로 만들어요. 스킨에 링크를 넣는 방법 중 실제로 눌러지는 건 이 방법뿐이었어요. 경로는 내 블로그 관리 → 꾸미기 설정 → 레이아웃·위젯 설정이고, '위젯 사용 설정' 아래의 '위젯 직접 등록'에서 위젯명과 위젯 코드를 입력하고 [다음]을 눌러 미리 보기를 확인한 뒤 등록해요.

클로드에게는 이렇게 요청했어요.

네이버 블로그 위젯 직접 등록에 붙여 넣을 카테고리 버튼 HTML을 만들어 줘.
- 칸 안에서 버튼 폭 140px, 높이 62px, 왼쪽 여백 30px
- 배경 [배경색 코드], 테두리 [테두리색 코드], 오른쪽 작은 원형 아이콘은 [강조색 코드]
- 위쪽 굵은 글자는 "[버튼 이름]", 아래쪽 작은 글자는 "[짧은 설명]"
- 링크 주소는 https://blog.naver.com/PostList.naver?blogId=[내 블로그 아이디]&categoryNo=[카테고리 번호]&from=postList
- position:absolute 는 쓰지 말고 float 로 배치해 줘. 스타일은 전부 태그 안 style 속성에 넣어 줘
- 전체 코드는 한글 기준 1천 자 안쪽으로 맞춰 줘

실제로 쓴 버튼 1개의 코드는 아래 형태예요. 블로그 아이디, 카테고리 번호, 버튼 이름과 설명만 바꿔 쓰세요.

<a href="https://blog.naver.com/PostList.naver?blogId=[내 블로그 아이디]&amp;categoryNo=[카테고리 번호]&amp;from=postList" target="_top" style="display:block;margin-left:30px;width:140px;height:62px;box-sizing:border-box;padding:11px 10px 0 12px;border-radius:10px;background:#0E1A38;border:1px solid #2C3D6B;text-decoration:none;font-family:'Apple SD Gothic Neo','Malgun Gothic',sans-serif;"><span style="display:block;color:#ffffff;font-size:13px;font-weight:700;letter-spacing:-0.4px;white-space:nowrap;">[버튼 이름]</span><span style="display:block;margin-top:6px;color:#9AA6C6;font-size:11px;letter-spacing:-0.2px;white-space:nowrap;"><span style="float:right;width:18px;height:18px;margin-top:-2px;border-radius:9px;background:#3DDBB0;color:#0B1530;font-size:13px;font-weight:900;text-align:center;line-height:17px;">&rsaquo;</span>[짧은 설명]</span></a>

전체 글 보기 버튼은 카테고리 번호를 0으로 넣었어요. 나머지 카테고리는 각각의 번호를 넣으면 되고, 번호는 카테고리를 열었을 때 주소에 붙는 categoryNo 값이에요.

버튼이 안 눌리거나 오른쪽이 비면 어떻게 하나요?

위: 4칸은 오른쪽이 비어요 / 아래: 5칸으로 늘려 줄 폭을 채움

배너 안에 버튼을 그리지 말고 위젯으로 따로 만든 뒤, 칸 수를 5개로 맞추면 해결돼요. 제가 겪은 순서대로 적어 볼게요.

1. 배너 안 작은 칩(v1): 카테고리 칩을 배너 안에 넣었더니 크기가 작아서 무슨 버튼인지 알아보기 어렵고 눌러도 아무 일이 없었어요.
2. 배너 안 큰 버튼(v2): 버튼을 키워 배너 안에 다시 넣어 봤지만, 이미지 속 그림이라 클릭이 안 되는 건 같았어요.
3. 투명 링크 겹치기는 불가: 위젯은 자기만의 작은 창(iframe) 안에서 보이기 때문에 배너 위에 투명 링크를 겹치는 방법도 쓸 수 없었어요.
4. 위젯으로 4칸: 배너에서 버튼을 빼고 위젯 4개를 메뉴 아래 줄에 놓았어요. 그런데 위젯 칸 폭 170px에 칸 사이 16px가 고정이라 966px 폭에서 오른쪽 1/4이 비었어요.
5. 5칸으로 확장: 버튼을 5개로 늘리니 줄 폭이 거의 꽉 찼어요. 각 칸 안에서는 버튼 폭 140px, 왼쪽 여백 30px로 좌우 균형을 맞췄어요.

위젯 코드에서 알게 된 제약도 있어요.

• position:absolute 스타일은 저장할 때 지워져서 float로 배치했어요.
• 네이버가 링크에 target="_blank"를 붙여서 버튼을 누르면 새 탭으로 열려요.

1단 레이아웃에서 위젯을 '글 영역 위' 줄에 두려면 이렇게 했어요.

1. 편집 화면에서 위젯이 위에 오는 1단 레이아웃을 한 번 눌러요.
2. 다시 원래 1단 레이아웃으로 돌아오면 위쪽에 위젯 줄이 생겨요.
3. 버튼 위젯을 그 줄로 끌어 옮기고, 나머지 위젯은 아래로 내려요.

메뉴 위치와 홈 화면 레이아웃은 어떻게 맞췄나요?

레이아웃·위젯 설정 — 타이틀 아래 줄에 버튼 위젯 5개, 1단·글 영역 '넓게'

레이아웃은 1단 '넓게'로 두고, 메뉴를 배너 위로 옮기고, 홈 썸네일을 5×2에서 5×3으로 늘렸어요. 메뉴 줄 위치는 레이아웃·위젯 설정의 편집 화면에서 끌어서 옮기는데, 메뉴는 배너 위나 아래 둘 중 한 곳에만 둘 수 있었어요. 저는 배너 위로 옮겼어요.

홈(프롤로그)은 관리 → 메뉴·글·동영상 관리 → 프롤로그에서 이미지 강조형으로 하고 메인 이미지목록을 3줄로 바꿨어요. 한 줄에 5개가 고정이라 줄 수만 바꿀 수 있어요. 본문 글 색은 기본 #666666에서 #222222로 진하게 바꿔서 읽기 편하게 했어요.

네이버 블로그 모바일 스킨은 어떻게 바꾸나요?

휴대폰 첫 화면 — 왼쪽: 바꾸기 전 / 오른쪽: 클로드 작업 창 커버로 바꾼 뒤

휴대폰은 PC 스킨과 따로 모바일앱 커버 이미지를 올려서 맞춰요. 제 블로그의 휴대폰 홈은 커버, 소개, 대표글, 글 목록으로 구성돼서 PC 위젯 버튼과 타이틀 GIF는 나오지 않았어요.

등록 경로는 내 블로그 관리 → 기본 설정 → 블로그 정보 → 모바일앱 커버 이미지 [등록]이에요. '이미지 첨부' 팝업에서 10MB 미만 파일을 올리고 확인을 누른 뒤, 블로그 정보에서도 [확인]을 눌러야 저장돼요.

이미지는 이렇게 만들었어요.

• 휴대폰 첫 화면의 커버 칸은 390×430(가로 기준)이고, 정사각 이미지를 칸에 꽉 채워 보여 줘요.
• 아래쪽 절반은 방문자 수, 블로그 이름, 프로필, 버튼이 덮어요. 그래서 그림은 위쪽 띠(1080 기준 세로 약 180~470px)에만 뒀어요.
• PC 타이틀과 같은 남색 바탕에 클로드 작업 창(요청 1줄과 ✓ 2줄)을 담은 1080×1080 PNG 정지 이미지로 만들었어요.

클로드에게 한 요청은 이래요.

네이버 블로그 모바일앱 커버 이미지를 만들어 줘.
- 크기: 1080×1080px 정사각 PNG, 10MB 미만
- 배경은 PC 타이틀과 같은 남색([배경색 코드])
- 아래쪽 절반은 네이버가 방문자 수·블로그 이름·프로필·버튼으로 덮으니 비워 두고, 위쪽 세로 약 180~470px 띠 안에만 내용을 넣어 줘
- 띠 안에는 클로드 작업 창 모양으로 요청 한 줄 "[요청 문장]"과 ✓ 결과 두 줄을 넣어 줘

올리기 전에는 Aside에게 휴대폰 폭(390px) 화면에 제 모바일 블로그를 띄우고 커버 칸만 새 이미지로 바꿔 보여 달라고 해서 미리 확인했어요.

네이버 블로그 스킨, 직접 만들기와 다른 방법은 어떻게 다른가요?

제가 직접 해 본 방법은 클로드로 만드는 방법뿐이에요. 다른 방법은 해 보지 않아서, 각 방법을 고를 때 확인할 점만 표로 정리했어요.

네이버 블로그 스킨에서 안 되는 것과 적용 후 점검할 것은?

아래는 제가 해 보고 안 된다고 확인한 것들이에요.

• PC 본문 폭을 966px보다 넓히기: 고정이라 안 돼요. 글 영역은 이미 '넓게'로 되어 있어요.
• 타이틀 이미지 안의 버튼 클릭: 이미지에는 링크를 걸 수 없고, 위젯을 겹치는 것도 안 돼요.
• 위젯 줄을 메뉴 위로, 메뉴를 위젯 아래로: 편집 화면에서 끌어도 그 자리로 들어가지 않았어요. 메뉴는 배너 위나 아래만 가능해요.
• 홈 썸네일 한 줄 4개: 홈은 5개로 고정이고 줄 수만 1~6줄이에요. 한 줄 4개는 카테고리 앨범형에서만 되는데, '전체보기'는 앨범형으로 바꿀 수 없었어요.
• 맨 위 검은 네이버 메뉴 줄 색: 스킨 배경 전체를 바꿔야 해서 그대로 뒀어요.

적용을 마친 뒤에는 이 두 가지를 확인했어요.

1. PC 첫 화면에서 타이틀 GIF가 움직이는지 확인해요.
2. 모바일 화면(저는 폭 390px 미리보기)에서 커버 위쪽 띠의 내용이 가려지지 않는지 확인해요.

자주 묻는 질문

마무리

네이버 블로그 스킨은 코드를 넣을 수 없어도, 타이틀에 GIF를 올리고 위젯 직접 등록으로 버튼을 따로 만들면 움직이는 첫 화면을 꾸밀 수 있어요. 순서는 벤치마킹과 카테고리 정리, '내가 만든 스킨' 백업, 메뉴 색, GIF 배너, 위젯 버튼, 레이아웃, 모바일 커버였어요.

클로드를 처음 쓴다면 '클로드 사용법, 가입부터 기본 활용까지 순서대로 정리' 글에서 기본 사용법부터 이어서 보세요.

작성·검수: 지원포유최종 업데이트: 2026년 11월 2일