[주마의 블로그] 네이버 블로그 홈페이지형 만들기: 스킨 제작

네이버 블로그를 왜 홈페이지형 블로그로 바꿔야 할까?

1. 한 눈에 보이는 카테고리

기존 블로그의 경우, 카테고리가 왼쪽에 글 형태로 있어 이 블로그가 어떤 콘텐츠를 가지고 있는지 한눈에 볼 수 없다. 그러나 홈페이지형 블로그는 카테고리를 최상단에 노출시킴으로서 이용자들로 하여금 원하는 콘텐츠를 쉽게 찾을 수 있도록 도와주고 클릭을 유도할 수 있다. 또한, 링크 하나를 자사 웹사이트와 연결한다면 웹사이트 방문도 자연스럽게 유도할 수 있다.

 

2. 차별화된 첫 인상

홈페이지형 블로그는 네이버에서 제공하는 기본형 구조를 사용하는 것이 아니라, 위젯을 다양한 방법으로 배치하여

내가 원하는 블로그 혹은 우리 기업이 추구하는 이미지를 자연스럽게 보여줄 수 있다.

 

 

 (왼) 블로그 변경 전 / (오) 블로그 변경 후 

 

---

네이버 블로그 홈페이지형으로 바꾸는 법

총 4단계: 1. 스킨 제작 → 2. 스킨 설정 → 3. 위젯 설치하고 크기 조정하기 → 4. 위젯에 링크 달기

* 본 포스팅에서는 스킨 제작까지만 다룰 예정입니다. 네이버 블로그 홈페이지형 만들기 STEP 2도 기대해 주세요 :) 

 

 

1. 스킨 제작

1) 네이버 블로그 홈페이지형 스킨 크기

사실 스킨만 잘 제작한다면 홈페이지형으로 위젯을 설치하고 링크다는 것은 비교적 쉬운 편이다.

포토샵이 어렵고, 스킨 디자인이 힘들다고 걱정 NO! 내 블로그 이미지와 잘 맞는 좋은 퀄리티의 사진을 활용하여 메인 이미지를 만들고, 카테고리를 연결시킬 버튼만 추가해도 문제없다.

→ 상업적 사용이 가능한 무료 이미지 다운 사이트: Pixabay https://pixabay.com/ko/ 

 

이때 중요한 것은 스킨 크기!! 

가로 1,920px~2,000px

세로 700px~800px

 

<모인 블로그>에 설정한 스킨 크기: 1,920px * 780px

물론 모니터 해상도에 따라 달라지겠지만 대부분의 모니터 해상도 가로가 1,920px이기 때문에 가로 크기를 1,920px으로 설정했다. 그리고 세로 크기는 처음 블로그에 들어왔을 때, 하단 글이 보이지 않고 카테고리까지만 보일 수 있는 크기를 원했기 때문에 여러 크기를 조정해보았을 때, 780px이 가장 최적이라고 판단했다.

(세로가 너무 길어지면 스크롤 압박이 올 수 있으니 최적의 크기를 찾는 것이 중요하겠죠?!)

 

(왼) 핸드폰에서 PC버전을 설정했을 때 (오) 웹사이트 크기를 25%까지 줄였을 때 스킨이 반복되는 모습

 

그러나, 사실 세로 크기보다 가로 크기를 1,920px 이상으로 설정하는 것은 매우 중요하다.

그 이유는 네이버 블로그는 반응형 블로그가 아니기 때문이다.

 

네이버 블로그는 PC버전과 모바일 버전이 따로 있을 뿐, 각 해상도에 따라 최적화된 이미지를 제공해주지 않는다.

그래서 만약 갤럭시 탭이나 핸드폰 등의 디바이스에서 PC버전으로 블로그에 접속한다면 옆면이 짤릴 수 있고, 이미지 사이즈를 너무 작게 잡을 경우 배경 이미지가 패턴처럼 반복되어 적용된다.

그러므로 가로는 웬만하면 1,920px 이상 설정하되, 이러한 부분을 감안하여 글이나 어지러운 이미지로 꽉꽉 채우는 것이 아닌 자연스러운 이미지로 오른쪽과 왼쪽에 여백을 주는 것을 추천!

 

 

2) 홈페이지 버튼 크기

버튼은 위젯 크기에 맞춰서 제작해야 위젯에 링크를 걸어 나중에 버튼의 역할을 할 수 있게 된다.

네이버에서 지원하는 위젯 크기는 가로 170px, 세로 600px, 한 줄에 5개까지 설정 가능하다.

드래그했을 때 보이는 위젯의 모습

네이버에서 지원하는 위젯 크기

 

그렇다고 버튼 크기를 가로 170px으로 딱 맞게 제작하는 것이 좋을까?

NO! 드래그했을 때, 보이는 것과 같이 위젯과 위젯 사이 중간에 비는 공간이 있다.

그래서 170픽셀에 맞춰 버튼을 따닥 따닥 붙여 제작할 경우, 저 빈 공간에 마우스를 갖다대면 링크 영역이 끊기는 불상사가 발생할 수 있다. 그래서 이러한 위젯 사이의 공간을 감안하여 아래 5개의 버튼을 만들 경우, 가로는 꼭 180px로 제작하고 세로 크기는 600px 이하 원하는 크기로 제작해주면 된다.

 

---

그렇다면, 이제 본격적으로 스킨 제작 START

초보가 홈페이지형 블로그를 제작한다는 전제 하에, 버튼은 하단에 5개를 놓고 배경은 사진으로 대신한 아주 간단한 홈페이지형 블로그 스킨을 만들어보자!

 

 

1- 먼저 포토샵에서 새로운 캔버스를 배경 사이즈와 맞게 만들어준다. (1,920px * 780px)

 

 

2- 새로운 캔버스 위에 버튼의 위치를 먼저 잡아준다.

① 사각형 도구로 사각형을 만들어준 뒤, 레이어 이름을 중간 버튼이라고 작성해줍니다.

② 모양 속성에서 사각형의 높이와 넓이를 정확하게 입력해줍니다. (180px * 130px) 

③ 배경과 중간 버튼의 레이어를 동시에 선택한 후, 중간 정렬합니다.

④ 배경과 중간 버튼의 레이어를 동시에 선택한 후, 아래 정렬합니다.

⑤ 중간 버튼 레이어를 마우스 왼쪽으로 클릭하고 Ctrl+Shift+Alt를 함께 눌러 오른쪽과 왼쪽에 각각 2개씩 복사해 준뒤, 각 버튼에 레이어명을 오른쪽1,2 왼쪽 1,2로 이름을 붙여줍니다.

 

 

3- 배경을 먼저 깔아주고, 그 위에 하얀색 네모로 버튼 배경을 만들어 준다.

* 본 사진은 픽사베이에서 가져온 무료 이미지입니다. 이미지 선택 시, 가로가 긴 이미지로 선택하는 것이 크기 조정에 용이합니다.

 

 

4- 블로그 이름을 수평 문자 도구로 중간에 넣어주고, 각 버튼에 들어갈 버튼 이름을 작성해준다.

* 전 버튼에 이름을 붙인 다음, 뒤에 있는 네모 상자를 삭제했습니다. 이렇듯 자신의 블로그 컨셉에 따라 버튼을 예쁘게 꾸며주세요.

 

 

5- 스킨 제작 완료

Ctrl+Shift+Alt+S를 눌러 웹용으로 저장한다. 

완성

 

만약 여기까지 따라왔다면, 이미 홈페이지형 블로그 제작의 40%는 완료했다고 볼 수 있다.

참 잘했어요💪

 

 

 

<다음 포스트>

본격적으로 스킨을 블로그에 설정하고, 위젯을 설치하고, 위젯 크기를 스킨에 맞게 조정하는 작업을 할 예정 

[주마의 블로그] 네이버 블로그 홈페이지형 만들기: 스킨 설정 & 위젯 설치

[주마의 블로그] 네이버 블로그 홈페이지형 만들기: 스킨 설정 & 위젯 설치