블로그꾸미기 – 네이버 블로그 스킨 만들기
11:44 pm
오늘은 네이버 블로그 스킨을 예쁘게 만들어볼 수 있도록 블로그꾸미기 가이드를 작성하려고 해요.
저는 피그마라는 도구를 사용합니다! 무료거든요!
ㅍ..ㅣ 그 마 ?
몰라도 걱정하지 마세요! 피그마를 사용하는 방법부터 차근차근 말씀드리겠습니다!
피그마 로그인
피그마 홈페이지 들어가자마자 상단에 Log in 이라는 버튼을 눌러서 로그인을 해 줍니다.
피그마 실행하기
로그인을 하면 아래와 같은 화면이 보여질 겁니다. Team project를 누른 후, 오른쪽에 나와있는 카드를 더블클릭 해 줍니다.
피그마가 실행되면, 안에 있는 페이지를 모두 지워줍니다. 지우는 방법은 왼쪽 사이드바에 있는 항목을 모두 선택한 후, [Backspace] 또는 [Ctrl + X] 키를 입력하시면 됩니다.
이제 블로그꾸미기를 위한 준비가 되었습니다!
블로그꾸미기를 하기 전에, 블로그를 구성하는 영역부터 먼저 알아보도록 할게요!
블로그를 구성하는 영역
블로그꾸미기를 위해 알아야하는 영역은 스킨배경 영역과 타이틀 영역 총 두가지 입니다.
또한, 스킨배경 영역은 상단/하단 2개의 영역으로 나뉘어 있습니다.
이어서 조금 더 자세하게 알아보겠습니다.
– 스킨배경 영역
스킨배경 영역이란 무엇일까요?
블로그 전체 영역에 대한 배경을 의미하며, 가로 사이즈만 최대 3000픽셀로 제한하고 있습니다. 따라서, 내가 높이를 100픽셀인 이미지를 넣었다고 한다면, 100 픽셀 아래에는 모두 흰색 바탕으로 보여지게 됩니다.
그래서 네이버 블로그에서는 하단 영역을 패턴 이미지로 덮을 수 있도록 따로 이미지를 등록할 수 있게 되어있습니다.
일반적으로 네이버 블로그에서는 하단까지 다 덮어버리는 형태의 스킨은 잘 사용하지 않는 것 같습니다. 상단을 최대한 예쁘게 꾸미고, 하단은 흰색으로 하는게 유행인 듯 해요!
– 타이틀 영역
타이틀 영역이란 무엇일까요?
[네이버 블로그 관리 -> 꾸미기 설정 -> 세부 디자인 설정] 메뉴를 눌러보면 타이틀 영역을 수정하는 도구를 확인해 볼 수 있어요! 가로 사이즈는 최대 966px로 제한하고 있으며, 높이는 꾸미기 설정에서 미리 조절을 한 다음, 스킨을 등록해야만 짤리지 않고 잘 들어갈 수 있습니다.
아래의 그림과 같이 노란색으로 표시된 영역이 타이틀 영역이며, 50 ~ 600 까지 조절이 가능합니다.
따라서, 우리가 만들 수 있는 타이틀 영역의 이미지의 높이 역시 50 ~ 600 이라고 생각하시면 됩니다!
블로그 스킨 만들기
블로그꾸미기를 진행하기 위해서는 우선 스킨배경 영역을 나타낼 프레임을 그려야합니다. 가로는 3000픽셀, 세로는 원하는 높이로 그려줍니다. 저는 450픽셀로 그려보겠습니다.
850픽셀 까지는 웹페이지에서 항상 보여지는 영역이기 때문에, 그 외에 남는 영역보다 더 확실히 디자인을 입혀주어야 모두에게 예쁜 블로그를 만들 수 있습니다.
그래서 저는 850픽셀 영역 내에서만 블로그 스킨을 만드는 것을 추천합니다.
저는 이 노란 영역에 토끼 얼굴을 그려넣겠습니다.
짠! 완성입니다! 이제 이미지를 추출 해야합니다. 그린 영역을 모두 그룹으로 묶고, 플러스버튼을 누른 후, 익스포트 버튼을 눌러주세요.
이어서 하단에 메뉴 5개를 만들어보려고 합니다. 최대 한 줄에 5개까지 넣을 수 있습니다. 그래서 저는 딱 5개의 카테고리를 정해 보았습니다. 제가 포스팅 할 카테고리는 다음 5개입니다.
- 여행
- 맛집
- 리뷰
- 요리
- 일기
이렇게 하단의 메뉴를 나타낼 수 있는 요소를 블로그에서는 “위젯” 이라고 합니다. 이 위젯은 가로의 길이를 170픽셀로 제안하고 있기 때문에 가로의 길이가 170픽셀인 메뉴 다섯개를 그려보도록 하겠습니다.
저는 이렇게 당근 아이콘을 앞에 넣고 오른쪽에 카테고리 이름을 작성해서 메뉴 이미지를 만들었습니다.
이 메뉴 이미지는 각각 1개씩 그룹을 지정해서 위와 동일하게 익스포트를 해 줍니다.
이렇게 5개의 이미지가 잘 다운로드 된 것을 확인할 수 있습니다!
이제 바로 블로그에 적용하러 가보겠습니다.
[블로그 관리 -> 꾸미기 설정 -> 세부 디자인] 설정에 들어갑니다.
그리고 우리가 직접 만든 스킨배경 이미지를 업로드 하고, 타이틀 영역의 높이를 이미지가 딱 맞게 보여지도록 조절합니다.
왼쪽에 미리보기를 통해서 바로바로 확인하실 수 있습니다.
저는 550정도로 하면 딱 맞는 것 같았습니다.
바로 이어서 위젯을 추가해 줄 겁니다. [블로그 관리 -> 꾸미기 설정 -> 레이아웃 위젯 설정] 메뉴로 들어갑니다.
아래 그림을 참고해서 구조를 선택해 주셔야 합니다.
이어서 아래 코드를 가지고 위젯을 만들어 볼 예정입니다.
<a href="[카테고리 주소]">
<img src="[이미지 주소]" />
</a>카테고리 주소는 네이버 블로그에 들어가서 해당 카테고리를 눌러보시면 인터넷 주소창에 쓰여진 주소를 그대로 복사해서 넣어주시면 됩니다.
이미지 주소는! 우선 네이버 블로그에 아까 만들었던 5개의 카테고리 위젯 이미지를 다 업로드합니다!
업로드 후, 그 글을 확인해서 오른쪽 마우스 버튼을 누르면 이미지 주소를 복사할 수 있습니다!
이제 이 값을 바탕으로 위젯을 만들어보겠습니다.
이제 이렇게 위젯 추가 버튼을 통해서 총 5개의 위젯을 추가합니다. 물론 비어있는 주소는 위에서 말한 방법으로 복사 붙여넣기를 해 주셔야겠죠?
저는 이런식으로 작성해서 넣었습니다.
이제 등록한 5개의 위젯을 모두 체크한 후, 다음과 같이 배치하시고 적용을 누르면!
예쁜 위젯을 확인하실 수 있습니다.
블로그꾸미기 글이 도움이 되셨으면 좋겠습니다.
예쁘고 귀여운 블로그가 많아졌으면 좋겠어요!