이 블로그는?

안녕하세요. 니힐입니다. 이 블로그는 제 관심사들을 담아놓은 제 일상의 영역입니다. 볼 것이 많지는 않습니다만 천천히 구경하시다 가시면 되겠습니다. 아래는 이 블로그에 대한 몇가지의 안내사항입니다. 즐거운 하루 되시고, 좋은 일만 가득하시길 기원합니다.

1.이 블로그는 PC에서 볼 때 더 쾌적한 환경으로 즐길 수 있습니다.
2.이 블로그의 주제는 애니메이션, 게임, 일본어, 그림으로 크게 4가지입니다. 다른 것들을 다루기도 합니다.
3.다양한 정보를 공유하기도 합니다. 많은 분들의 편리함을 위해 좋은 포스트를 작성하는 것이 이 블로그의 일차적인 목표입니다.

감사합니다
이 블로그가 조금이나마 여러분들의 여흥과 심심함을 해소해드렸다면 좋겠습니다. 다양한 재미를 만들어드리기 위해 노력하고 또 노력하겠습니다. 남은 하루 좋은 하루 되셨으면 좋겠습니다. 감사합니다.
포스트 검색하기
포스트
작성된 시간 2018.08.27 09:00

니힐의 포토샵 주저리 - 네이버 홈페이지형 스킨 만들기 1편

업로드 시간 : 2018 0827 - 09 : 00

니힐입니다. 드디어 사회복지사 자격증의 1학기가 끝났습니다. 일곱가지 과목을 어제 마치고 이제 어느정도는 쉬는 시간이 왔습니다. 그래서 포스팅을 남겨봅니다. 이번 글은 네이버 블로그에 관련된 것입니다. 그 중에서도 스킨에 대한 것이고, 그 많은 스킨 중에서도 바로 홈페이지형 스킨에 대해서 이야기해보려고 합니다. 그래서 이번 글에서는 홈페이지형 스킨을 만드는 방법에 대해서 다뤄보려고 합니다. 썸네일을 만드는 것과는 다르게 스킨은 중요한 부분이기 때문에 레이아웃이 중요할 겁니다. 제가 디자인을 잘하는 편은 아닙니다. 못하는 편이죠. 그러나 여기서는 만드는 과정에 대해서만 다룰 것이기 때문에 괜찮을 겁니다.

티스토리 블로그에서 웬 네이버 블로그 이야기냐! 그건 제가 심심해서 입니다. 별 다른 이유는 없습니다. 정보 공유는 이 블로그의 목적이기도 하고 말입니다. 그래서 진행을 해보려고 합니다. 디자인의 일종이니까 해둬도 나쁘지 않을 것 같습니다.

네이버 블로그에서 홈페이지형 스킨은 1단 스킨을 말합니다. 지금 이 티스토리 블로그처럼 1단 스킨입니다. 본문도 메뉴도 하나의 라인에 존재하게 됩니다. 2단 스킨을 고집하시는 분들은 과감하게 홈페이지형 스킨을 포기하셔야 합니다. 만들지 못하거든요. 그 이유는 위젯의 활용 방법 때문입니다. 여하튼 그래서 어떻게 만드는가를 본격적으로 다루기 전에 준비물에 대해서 이야기를 해봐야겠죠? 준비물은 일단 포토샵입니다. 포토샵이 우선적으로 있으면 되고, 이미지. 그리고 스킨에 대한 구상만 있으면 됩니다. 그럼 본격적으로 만드는 방법에 대해서 알아봅시다. 천천히 잘 따라오시면 됩니다.

시작하기 전에! 일단 여러분의 모니터 화면의 해상도에 따라서 디자인이 크게 달라질 겁니다. 가로 픽셀이 1280인 분들도 계실거고 1920인 분들이 대다수일 겁니다. 혹은 이보다 더 큰 해상도를 사용하고 계실 수도 있습니다. 이 해상도를 기억을 해두시기 바랍니다.

두번째! 네이버 블로그에 접속해서 1단 스킨으로 바꿔줍니다. 거짓말 안하고 이러면 30%는 작업이 완료된 겁니다. 네이버 블로그 스킨 작업은 꽤 간단한 편에 속합니다. 홈페이지형 스킨은 블로그의 배경을 적극적으로 활용합니다. 즉, 실질적으로 우리가 만들어야 할 것은 블로그의 배경인 셈이죠.

세번째! 홈페이지형 스킨의 생명은 블로그의 상단. 타이틀이 위치하는 부분의 면적이 넓은 겁니다. 그렇게 넓게 만드는 방법은 바로 위젯을 사용하는 겁니다. 바로 위의 스크린샷을 보시면 붉은 사각형들이 있죠? 이게 위젯으로 만든겁니다. 이런식으로 만드는데, 어떻게? 투명하게! 만드는 겁니다. 투명한 게 제일 중요합니다.

저것들이 없으면 아래 이미지와 같은 모양이 되어버립니다. 메인이 되어야 하는 부분에 프로필과 카테고리가 위치해버립니다. 그래서 투명한 위젯이 있어야 하는겁니다. 우리는 이제 중요한 걸 알아야 합니다. 이걸 어떻게 설정을 하느냐 하는 것이죠. 그럼, 이제부터 잘 따라와주시기 바랍니다. 일단 설정에 들어갑니다. 레이아웃 위젯 설정으로 들어가시면 됩니다. 그러면 아래와 같은 페이지가 나오게 됩니다.

여기서 조금만 스크롤을 내려주시면 이런 버튼이 나오게 됩니다. 이 버튼을 눌러주세요. 그럼 창이 하나 뜹니다.

여기에 코드를 넣으시면 됩니다. 여기서는 아주 조금 어려울 수가 있습니다. 위젯을 만드는데 HTML 코드가 필요합니다. 웹디자인을 조금 하셨던 분들이거나 배우셨다면 알고 계실테지만 모르신다면 그냥 아래의 코드를 넣으시면 됩니다. 그냥 따라 넣으시고 숫자만 기억하시면 됩니다. 170은 가로입니다. 이거는 그냥 고정이라고 생각하시면 됩니다. 600은 세로입니다. 숫자 뒤에 px은 반드시 붙어야 합니다.

1
2
3
4
<!-- 이거를 복사하면 됩니다. 4번 줄만 복사하세요. -->
<!-- width는 가로입니다. 170은 고정입니다. -->
<!-- height는 세로입니다. 1부터 600까지 자유롭게 설정 가능합니다. -->
<div style="width: 170px; height: 600px;" />
cs

위젯은 한 줄에 다섯개만 들어갈 수가 있습니다. 가로 170 픽셀. 세로 600 픽셀까지 설정이 가능합니다. 세로는 자유롭게 조절이 가능하다는 이야기죠. 이미지를 불러와서 위젯에 이미지를 띄울 수도 있습니다. 그건 지금 할 것이 아니니까 나중에 알아보도록 합시다. 중요한 것을 알았으니까 여러분들 나름대로 레이아웃을 구상해보시면 됩니다. 약간 웃긴건 아래 이미지처럼 위젯들은 서로 16픽셀 띄어져 있고 다섯번째 위젯은 오른쪽 부분이 비게 된다는 겁니다. 좌우 대칭을 좋아하는 저로서는 너무.. 견딜 수가 없습니다.

여하튼 여러분의 블로그는 이런 레이아웃으로 구성이 되어 있고 저것 자체는 바꿀 수가 없습니다. 그러나 시스템을 바꿀 수가 없음에도 불구하고 위젯에 대해 어느정도 알았다면 또 다시 30% 정도 진전이 있는 겁니다. 가장 중요한 건 1단 스킨이어야 하고, 위젯을 활용한다는 것입니다. 이제 마지막 40%를 채워줄 것은 바로 배경 이미지가 되겠습니다.

네번째! 이제 포토샵을 한 번 켜봅시다. 우리가 만들 것은 스킨 배경 이미지입니다. 새로운 캔버스를 만드는데, 여러분들의 화면에 맞게 만들 것이면 여러분들이 기억했던 해상도대로 만들면 되고, 다른 컴퓨터에서도 잘 보이고 싶다라고 생각을 하고 계시다면 가로 픽셀 1920으로 설정해주시면 됩니다. 아마 더 넓어도 될 겁니다. 어차피 보이는 건 똑같을거에요. 짧으면 스킨 배경 이미지가 좌우로 반복 되겠지만요.

저는 1920 픽셀로 작업을 합니다. 제가 1920을 쓰고 있기도 하고 1920이 제일 흔할 겁니다. 물론 더 큰 해상도를 사용하시는 분들은 아마.. 제 블로그에 들어오시면 배경 이미지가 반복되어 보일 겁니다. ㅋㅋ... 뭐 어쩔 수 없습니다. 더 넓은 해상도는 제가 어떻게 테스트를 해볼 수가 없기 때문에..

여러분도 생각해두신 레이아웃 정도는 있을 겁니다. 그 레이아웃을 포토샵으로 직접 구현해봅시다. 저도 생각해둔 것이 있습니다. 기존에 사용하던 것은 너무 허전합니다. 어느정도의 요소는 가만히 두고 조금 개조가 필요할 것 같다는 생각이 듭니다. 물론 생각을 해둔 것과, 그것을 직접 구현하는 것은 좀 다른 문제긴 합니다. 구상했던 것이 이상할 수도 있거든요. 그럴 때에는 계속해서 마음에 들 때까지! 수정하고 또 수정하면 됩니다.

이게 지금 제가 사용하고 있는 스킨입니다. 이거를 개조를 해줄 겁니다. PSD 파일은 있으니까 따로 저장을 해둬야겠습니다. 자 그러면 레이아웃의 기본적인 토대를 마련해봅시다. 여기서부터는 과정이라기보다는 이렇게 할 수도 있다라는 것을 보여드리려고 합니다. 제가 만드는 것이 마음에 안드실 수도 있습니다. 뭐 그건 개인 차이니까 어쩔 수 없습니다. 여러분들도 보고 만들어 보시기 바랍니다. 여러분만의 블로그입니다. 여러분이 직접 생각하고 만드는 스킨이라는 점에서 매우 값질 겁니다.

마지막! 저는 대충 이런 과정으로 만들었습니다. 저는 심플한 디자인을 좋아하기 때문에 역시나.. 이런 디자인이 나오는군요. 디자인의 토대를 마련하고, 그 위에 디테일을 잡아갑니다. 이렇게 완성된 배경은 두가지 부분으로 저장을 합니다. 상단 부분과 반복되는 하단 부분입니다. 물론 디자인을 저처럼 하면 하단이 필요한거고, 그냥 상단에서 끝낼 수도 있습니다. 여러분의 몫입니다. 저는 이렇게 두가지를 저장해뒀습니다. 이제 이거를 적용만 하시면 됩니다. 스킨도 만들다보면 노하우가 생기고 다양한 디자인패턴이 생깁니다. 디자인적인 감각이 늘어나는 겁니다. 적용한 모습을 보려면 링크 클릭하시면 됩니다.https://blog.naver.com/nihil_ncunia제 블로그 주소입니다. 아무것도 없습니다. ㅋㅋㅋ..ㅋㅋㅋㅋㅋ

아, 저장하실 때에 jpg로 저장을 하셔야 됩니다. 저도 png로만 저장을 했다가 귀찮았던 적이 많죠.

물론 여기서 끝난 것은 아닙니다. 배경 이미지를 만들었다면, 링크를 추가해서 방문자들이 블로그와 상호작용을 할 수 있도록 만들어야 합니다. 이 홈페이지형 스킨 만들기는 원래 두개의 파트로 구상했습니다. 우리는 다음 파트에서 만든 스킨에 링크를 추가할 겁니다. 그리고 그 링크를 추가하는 방법은 역시 위젯을 수정하는 것으로 해결할 수 있습니다.

+

제가 이 글에서 보여드린 방법은 그저 공간을 확보하기 위해서 div 태그를 이용해 공간을 만든 것입니다. 거기에는 링크를 처리할 수가 없습니다. 홈페이지형 스킨이지만 기본적인 형태만을 만들었다고 보면 되는거죠. 다음에 할 작업을 위해서 투명한 이미지를 만들고 네이버 블로그의 메모 게시판에 올려주세요.

투명한 이미지는 그냥 포토샵으로 빈 이미지를 위젯의 크기에 맞게 저장하면 됩니다. png로 저장을 하고 우리는 다섯개가 필요하니까 (혹은 위젯을 더 설치하신 분은 더 많이 필요하겠죠. 사이즈별로 말입니다.) 다섯개를 올려줍니다. 같은 파일 다섯 번 올려주면 됩니다. 그러면 이렇게 아래처럼 올라갑니다.

올린 파일의 이미지 주소를 복사해둡니다. 그리고 우리가 만든 위젯을 수정해서 하나 하나 넣어주면 됩니다. 그때, 아래의 코드를 사용하시면 됩니다. 그러면 투명한 이미지 위젯이 완성됩니다. 이걸 다섯번 하시면 됩니다. 이것은 투명한 이미지니까 여기에는 링크를 처리할 수 있습니다. 링크를 처리하는 방법은 약간 복잡합니다. map 이라는 html을 사용할 겁니다. 그래서 아래에 있는 코드에 usemap이라는 속성이 붙어 있습니다. 지금 이렇게 말해도 모르실겁니다. 그러니 이건 다음 글에서 알아보는 것이 좋겠습니다.

아래 마지막이미지에서 usemap에 #를 안적었는데, 이걸 적어야 합니다.

1
<img src="투명 이미지 주소" usemap="#아무거나 적어줍시다." />
cs


미리 다음 파트에서 작업을 하기 위해 필요한 것을 이야기해드렸으니 그럼 저는 다음 글을 준비하러 가겠습니다. 밤을 샜더니 정신이 혼미해졌습니다. 다음 파트는 HTML을 더 많이 사용합니다. 이번 글은 여기서 마치도록 하겠습니다. 다음 파트가 언제 올라올지는 모르겠지만 다음글에서 봅시다.


연락처

이 아래는 SNS 연락처들입니다. 하고 싶은 말이 있으시거나 질문 사항이 있으시면 연락 주시면 되겠습니다. 빠르게 답변드리도록 하겠습니다.

트위터 : @NIHIL_ILLUST
인스타그램 : nihil_illust
이메일 : nihil_ncunia@naver.com
디스코드 : 니힐 NIHIL#3841

포토샵, 포샵, 네이버 블로그 스킨, 네이버 블로그, 블로그, 네이버, 홈페이지형 스킨, 네이버 블로그 홈페이지형 스킨, 홈페이지 블로그


이 글은 CC BY-SA 2.0 KR를 따릅니다.
페이지 탐색
공지사항
방문자

오늘 72 어제 276 전체 1,067,632

메뉴
카테고리
기간별 포스트 현황