이전 회사에서 있던 일이다.

🧑‍💼 : 누리님, 클라이언트가 네이버 블로그를 만들고 싶다고 하는데요.

🤨 : 네이버 블로그요? 그냥 디자인하고 카테고리 만들어서 드리면 되나요?

🧑‍💼 : 홈페이지형 블로그를 하고 싶다고 하시거든요.

🤨 : 아… 그건 외주 써야겠는데. 제가 가격 알아볼게요.

그리고, 외주 업체는 당시 홈페이지형 블로그 디자인 및 세팅에 2n만원을 불렀다. 디자인 금액과 블로그 썸네일 레이아웃이 포함된 금액이었지만, 비용도 비용이거니와 촉박한 기간 안에 원하는 디자인을 뽑기 어려울 것 같았다.

그렇게 홈페이지형 블로그 개설에 도전하게 됐다.

홈페이지형 블로그란?

대개 한국 사람들은 ‘블로그’와 ‘개인 사이트’를 별도로 여기는 경향이 있다. 네이버 블로그가 부흥할 당시 한 번씩 블로그를 해본 만큼 친숙해서 그런 생각을 하기 쉽지 않은가 싶다.

하지만, 네이버도 HTML 기능을 제공한다! 이런 HTML 기능을 적극적으로 사용한 블로그를 바로 홈페이지형 블로그라고 한다.

(링크)

대부분의 홈페이지형 블로그는 이렇게 이미지와 버튼을 사용한다. 여기까지 보면 ‘그냥 평범한 블로그네?’ 라고 생각하겠지만…

(링크:국민연금 블로그)

(링크:서울시 블로그)

한정된 기능 내에서 어떻게든 차력 쇼를 하는 사람은 어디에나 있다.

저런 기능은 어떻게 구현하는 걸까? HTML과 CSS 지식으로 구성하는 걸까? F12로 개발자 모드에 들어가 ‘Debugger-Disable JavaScript’로 오른쪽 마우스 금지를 해제한 후, 마우스로 한 번 화면을 끌어보면 답이 나온다.

네이버 블로그는 가로 5개의 블록을 유저가 커스텀 할 수 있는 기능을 제공한다. 즉, 모든 블로그에 들어간 버튼과 꾸밈 요소는 이 블록 안에서 동작하는 셈이다.

"그럼 이걸로 진짜 개인 홈페이지처럼 꾸밀 수 있는 거 아닌가요?"

안타깝게도 아니다. 네이버 블로그의 html은 기능 제약이 매우 크다. 지정된 영역을 벗어나기 어렵고, 적용 가능한 코드도 제한되어 있다. 사용자가 여기서 쓸 수 있는 기능은 원하는 영역에 투명 버튼을 넣고, 특정 사이트로 랜딩하는 것 뿐이라고 보면 된다.

앞서 소개한, 잘 꾸며진 것처럼 보이는 홈페이지형 블로그도 실제로 구조를 뜯어보면 버튼처럼 보이는 부분을 포함하여 하나의 이미지로 구성되어 있다.

아쉬운 점은 한 가지 더 있다. 이렇게 만든 사이트 디자인은 PC 환경에서만 적용되며, 모바일 환경에서는 네이버가 제공되는 레이아웃만 사용 가능하다. PC와 모바일 양쪽에서 예쁘게 나오는 홈페이지를 원한다면 네이버 블로그는 그중 반쪽만 제공하는 셈이다.

PC와 모바일, 양쪽 디자인을 잡으면서 네이버 블로그만큼 블로그 제작/콘텐츠 작성이 모두 쉬운 플랫폼을 원한다면 어떻게 해야 할까? 이 경우, 추천하는 건 ++티스토리++이다. 이 부분은 다음 회차에 다룰 예정이니, 우선 본론으로 돌아와 이 ‘홈페이지형 블로그’를 만들어 보자.

홈페이지형 네이버 블로그 만들기

만드는 과정은 다음과 같다.

1. 스킨과 버튼이 통합된 이미지를 만든다.

2. 블로그 관리 > 꾸미기 설정 > 세부 디자인 설정 > 스킨배경 > 직접 등록에서 이미지를 등록한다.

3. 블로그 관리 > 꾸미기 설정 > 레이아웃·위젯 설정으로 들어간다.

‘위젯직접등록’을 누르면 한 블록당 가로 최대 170px, 세로 최대 600px 영역 내에 적용할 HTML 코드를 입력하는 기능이 제공된다. 한 줄에 최대 5개 블록이 들어가며, 세로 길이는 가장 긴 블록 기준으로 맞춰지므로, 같은 줄에 들어가는 블록은 모두 동일한 높이를 사용해야 한다.

4-1. 최상단 블록 설정

대부분의 홈페이지형 블로그는 최상단에 공백을 두고 있다. 이 경우 위젯직접등록 후 아래 코드를 입력한다.

<table><tbody><tr><td width="170px" height="(세로 높이)px"> </td></tr></tbody></table>

개인적으로 여기서 임의의 세로 높이를 입력한 후, 다시 블로그 창에서 돌아와 필요한 높이가 어느 정도인지 확인하는 걸 권장한다.

직접 운영하는 블로그라면 마우스로 드래그했을 때 위젯 영역이 드러나므로, 이걸 기반으로 계산하면 된다.

크롬을 사용할 경우, chrome 웹 스토어에 ‘Measure Pixel’을 검색해 확장 프로그램을 설치하는 것도 방법 중 하나이다. 웹페이지에서 바로 픽셀을 잴 수 있도록 나온 프로그램으로, 몇 픽셀 정도 크고 작은지, 얼마나 조정해야 할지 확인할 때 유용하다.

4-2. 기본 버튼 설정

네이버 블로그에 버튼을 적용하려면 위젯과 동일한 사이즈의 투명 이미지를 만들어야 한다.

(1) 투명 이미지 만들기

포토샵이 있으면 편리하지만, 윈도우 11이라면 그림판에서도 투명한 이미지를 만들 수 있다. 파일-이미지 속성에서 원하는 이미지 크기를 지정하고, 작업 창의 ‘레이어’에서 배경에 해당하는 레이어의 눈 버튼을 눌러 투명하게 바꿔주면 된다.

(2) 이미지 주소 따오기

이미지는 대체로 네이버 블로그에 ++비공개 게시글++을 올린 후 이미지를 오른쪽 마우스로 클릭-이미지 주소 복사로 가져와 사용한다. 비공개 게시글을 올리기 어려운 경우, ++imgbb나 Imgur 등의 이미지 호스팅 사이트++를 이용하는 방법도 있다.

다만, 대부분의 무료 이미지 호스팅 사이트는 트래픽이 불안정할 때가 많아 상황에 따라 정상적으로 로드되지 않을 수 있다.

(3) 버튼 세팅하기

버튼이 들어갈 부분에 위젯을 넣고, 해당 위젯에 아래 코드를 입력한다.

<img src="(투명버튼 이미지 주소)" usemap="#center" />
<map name="center">
<area shape="rect" coords="0, 0, 170, 150" href="(버튼을 눌렀을 때 열릴 페이지 주소)" target="_blank" />
</map>

(4) 좌표 잡기

여기서 **coords="0, 0, 170, 150"**은 버튼을 생성할 좌표이다. 예시의 경우 가로 0px에서 시작해서 가로 170px까지, 세로 0px에서 시작해서 세로 150px까지에 해당하는 버튼을 만드는 것이다. 이것을 응용하면, 후술할 4-3처럼 여러 버튼을 넣는 것도 가능하다.

(5) Link 태그 사용하기

target="_top” 부분을 바꾸면 링크를 어떻게 열지도 설정할 수 있다.

• _blank : 새 창이나 새 탭에서 열기
• _self : 지금 창에서 열기
• _parent : 부모 창에서 열기(팝업창에서 버튼을 눌렀을 경우, 팝업이 아닌 메인 화면에 나오도록)
• _top : 화면이 여러 개의 프레임(iframe)으로 복잡하게 쪼개져 있을 때, 모든 프레임을 다 없애고 브라우저 전체 화면(맨 바깥쪽 부모 창)에 링크 페이지 열기

네이버 블로그에서 사용한다면 버튼을 눌렀을 때 **새 창에서 열 것인가(_blank), 지금 창에서 열 것인가(_self)**만 보면 된다.

4-3. 한 위젯 안에 여러 버튼 설정

만든 버튼이 한 위젯 당 하나만 들어갈 경우 4-2처럼 진행할 수 있지만, 디자인 구조상 위젯 하나에 여러 버튼이 들어갈 때가 있다.

예시 이미지의 메뉴 6과 메뉴 7의 경우, 한 위젯 안에 걸쳐져 있다. 이 경우, area shape를 각 영역에 맞춰 여러 개 넣어주면 된다.

<img src="(투명버튼 이미지 주소)" usemap="#center" />
<map name="center">
<area shape="rect" coords="0, 0, 105, 60" href="(메뉴 6 주소)" target="_blank" />
<area shape="rect" coords="120, 0, 170, 60" href="(메뉴 7 주소) " target="_blank" />
</map>

9, 10, 11처럼 한 위젯 안에 세 개가 걸쳐질 때도 동일하다.

<img src="(투명버튼 이미지 주소)" usemap="#center" />
<map name="center">
<area shape="rect" coords="0, 0, 15, 60" href="(버튼 7 주소)" target="_blank" />
<area shape="rect" coords="30, 0, 90, 60" href="(버튼 8 주소)" target="_blank" />
<area shape="rect" coords="105, 0, 170, 60" href="(버튼 9 주소) " target="_blank" />
</map>

그 외의 꾸미기 기능은 방금 위젯을 넣은 레이아웃·위젯 설정이나, 꾸미기 설정 – 디자인 설정 – 세부 디자인 설정에서 조정한다.

디자인 설정에서 제목 색, 내용 색, 박스 색 등을 고치는 기능도 제공되므로 잘 손보면 개인 사이트와 유사한 분위기를 낼 수 있다.

5. 작업 예시

예시 스킨을 만들 때는 위와 같은 여백과 공간이 들어갔다. 각 줄 사이의 갭 높이는 일정하지 않은 편이니, 우선 위젯부터 만들어 적용한 후 직접 측정하는 걸 권장한다.

네이버 블로그는 여러모로 개인 사이트라고 보기 애매한 영역이지만, 검색 유입을 최대화하되 쉽게 꾸미고, 운영할 수 있는 플랫폼으로서 이점을 가지고 있다. 추후에 설명할 티스토리, 그누보드, 워드프레스에 비해 html 난도가 압도적으로 낮은 점 또한 장점이다.

개인 사이트를 만들고 싶지만, 손이 많이 가는 건 피하고 싶을 경우, 네이버 블로그에 도전해 보는 건 어떨까?