네이버 홈페이지형 블로그 응용편 03.위젯버튼 및 레이아웃 구성
홈페이지형 블로그 만들기 저번 글에 이어서 계속 진행해보도록 하겠습니다. 네이버 블로그 응용 3편에서는 위젯 버튼 및 레이아웃 구성에 대해 알아보도록 하겠습니다. 저번 시간에는 투명 위젯의 영역을 눈금자로 가이드라인을 만들어 큰 틀을 디자인하기 전에 영역 안에 들어가야 하는 사이즈를 알아봤습니다.
홈페이지형블로그 응용3편 목차
Appendix
-여행하는 디자이너의 스킨 시안
-여러 블로그의 위젯 영역
1. 모든 위젯 영역 가이드라인 설정
2. 응용하기 (인천광역시 공식 블로그)
3. 인천광역시 블로그의 위젯 구성
4. 홈페이지형 블로그 디자인
5. 위젯 등록 시 문제점 발생
6. 다른 구성으로 위젯
보충 설명으로 다른 블로그를 활용해서 그 영역 안에만 디자인을 해야 하는지 비교도 해보겠습니다. 유튜브 영상 강의는 응용 1~4편으로 제작되었습니다.
*영상의 캡처 화면을 사용하여 글이 작성되었기 때문에 이미지의 화질이 다소 좋지 못한 점 양해 부탁드립니다. 유튜브 영상을 먼저 촬영하고 글을 작성하게 되었습니다.
유튜브 강의홈페이지형 네이버 블로그 만들기01 / 02편
여행하는 디자이너 트래블러의 블로그 시안
응용 편으로 작업한 디자인 시안입니다. 네이버 블로그 메뉴 구성입니다. 우선 레이아웃을 살펴보면 좌측으로 로고+카테고리+SNS으로 구성을 해봤습니다. 처음 응용 편을 설명할 때도 언급했던 대로 블로그를 운영하는 목적과 주제가 저와 다를 수 있고 모두 다양하기 때문에 디자인 부분은 참고만 해주시면 됩니다.
하지만 이미지맵을 활용하여 좌표값을 얻어 링크를 거는 방법은 동일하기 때문에 디자인은 달라도 응용해서 충분히 다양한 디자인에 적용이 가능합니다. 나만의 홈페이지형 블로그를 제작할 수 있다는 점을 참조해주세요.
좌측으로 모든 메뉴들이 들어가 있기 때문에 위젯으로 적용을 한다면 아래와 같은 구성으로 위젯이 들어갑니다. 좌측 메뉴들은 모두 링크 버튼 위젯으로 우측에 들어가는 모든 버튼은 링크가 걸리지 않는 투명 위젯으로 등록할 예정입니다.
여기서 중요한 부분은 위젯과 위젯 사이의 간격이 생기는데 그 부분만 만큼은 공간의 오차 범위를 계산을 하면서 나한테 맞는 디자인을 작업하면 됩니다. 저의 경우 아래 위젯과 위의 위젯의 공간 세로 사이즈는 11px정도였습니다. 그래서 카테고리 디자인 작업을 할 때 그 공간을 고려하여 위와 같은 디자인 시안이 나왔습니다.
다른 블로그의 위젯 영역도 모두 동일
저번 시간에도 잠시 설명을 했던 부분이지만 좀 더 구체적으로 왜 위젯 영역을 미리 잡고 디자인 작업을 해야 하는지 설명을 해보겠습니다. 앞서 봤던 응용된 블로그에 하나를 프린트 스크린을 해서 확인해 보도록 하겠습니다.
인천광역시 공식 블로그 같은 경우는 홈페이지형 블로그를 만들 때 위젯을 하나로만 작업한 것이 아니라 1번째 줄에 5개 위젯 아래로 2,3번째 줄을 더 추가하여 작업한 경우입니다. 아래로 위젯을 더 추가하여 높이 값을 조절한 경우입니다. 세로 값은 위젯을 추가하여 조절이 가능 하지만 가로 값은 위젯의 전체 가로 영역에서 절대로 벗어나지 않는 것을 알 수 있습니다.
듀오백 공식 블로그의 경우도 이렇게 겹쳐서 확인해 보면 가로 값이 위젯의 전체 가로 영역에서 벗어나지 않게 메뉴들이 배치되어 있는 걸 알 수 있습니다. 홈페이지형 블로그를 만들기 위해서는 네이버의 위젯을 사용해야 하는데 위젯의 전체 가로 값만 잘 잡고 디자인 작업을 하게 되면 링크를 걸어야 하는 메뉴들의 배치가 쉽고 버튼의 링크 위치가 문제없이 들어갈 수 있습니다.
그래서 처음 디자인을 할 때 미리 투명 위젯으로 공간을 확보하고 그 확보한 공간을 프린트 스크린을 해와서 눈금자로 체크를 한 다음에 디자인을 작업하는 것이 중요합니다.
1. 눈금자로 모든 위젯 영역 가이드라인 설정
저번 글에 이어서 계속 이어 나가겠습니다. 이제 위젯의 전체 영역을 크게 전체 사이즈를 알아봤으니 눈금자를 드래드 하여 모든 위젯의 선을 만들어 보도록 하겠습니다.
방법1) 눈금자의 단축키는 Ctrl+R 또는 포토샵 메뉴바에 있는 View(보기)→Rulers(눈금자) 메뉴를 눌러주시면 됩니다. 눈금자로 선을 만들 때는 이미지를 확대하여 정확하게 맞춰주는 게 좋습니다. 눈금자 위에서 원하는 위치에 드래드 하여 모든 위젯의 라인을 만들어 줍니다.
방법2) 이미지를 확대해서 보면 위젯 사이사이에 빈 공간이 있습니다. 이 공간 값은 추후 디자인 작업 시 계산을 해야 하는 부분이지만 미리 이렇게 가이드라인을 만들어 놓으면 그 값을 계산하지 않고 그 위에다가 디자인을 할 수 있습니다. 우선 아래 화면과 같이 모든 위젯의 가이드라인을 만들어 주시면 됩니다.
방법3) 가이드라인이 위젯 5개 모두 잘 표시되어 있는 것을 확인했다면 포토샵 우측에 있는 레이어 팔레트에서 가장 위에 있는 레이어1의 눈 모양의 아이콘을 클릭하여 비활성화(눈 끄기) 해줍니다. 그러면 아래 화면과 안내선 표시는 그대로 남아 있는 것을 확인할 수 있습니다.
방법4) 눈금자로 만든 라인을 확인하면서 디자인 작업을 해주면 됩니다. 이때 캡처해서 옮겨온 이미지의 레이어의 눈은 꺼놓은 상태에서 작업을 하고 투명도를 조절하고 디자인 작업을 하면서 중간중간 눈을 켜서 비교하면서 작업을 하는 것이 좋습니다.
방법5) 아래 캔서스 창에서 눈금자로 만든 가이드라인을 보면서 디자인을 작업하면 됩니다. 링크를 걸어야 하는 링크 버튼 위젯은 가이드라인 안쪽으로 큰 틀에서 가로 값이 벗어나지 않게 작업을 하고 사이사이에 있는 공간만 신경 써 주시면 됩니다.
다른 디자인으로 작업하고 있다면 사이즈 때문에 고민을 하실 수 있는 부분이라 조금 구체적인 설명을 위해 다른 블로그로 예시를 들어 설명을 한번 더 하고 넘어가도록 하겠습니다.
2. 응용하기 (인천광역시 공식 블로그)
블로그의 스킨의 높이를 조금 더 길게 하고 싶다면 어떻게 해야 할까요? 만약에 인천광역시 공식 블로그처럼 세로 사이즈를 길게 디자인하고 싶다면 세로 사이즈를 디자인 작업 단계에서 세로 사이즈를 늘려서 디자인 작업을 하면 됩니다.
방법1) 만들어본 위젯의 크기는 1개당 가로가 170px*600px 사이즈로 투명 위젯을 1줄에 5개를 만들었다면 인천광역시 블로그의 경우 위젯을 두줄로 하나를 더 추가하여 작업한 것입니다. 그래서 이런 경우는 캔버스 사이즈의 세로 값을 늘려서 위젯을 배치시키면 됩니다.
방법2) 캔버스 크기 조절하기: 포토샵 상단 메뉴바에서 [Image]-[Canvas Size] 메뉴를 선택합니다. 단축키는 Ctrl+Alt+C입니다.
방법3) [Canvas Size] 대화 상자가 나타나면 [Relative] 옵션에서 중심에 찍혀있는 점을 아래 화면과 같이 위쪽으로 마우스로 클릭하여 찍어주면 됩니다. 그러면 아래로만 사이즈를 늘릴 수 있습니다. 세로 길이를 960px로 입력한 후 OK 버튼을 눌러줍니다. 작업창의 크기가 아래로 길어진 걸 확인할 수 있습니다. 인천광역시 공식 블로그처럼 세로 길이로 작업을 하려면 중간에 캔버스 크기를 조절하여 세로 길이만 늘리는 방법을 알아봤습니다. (처음부터 세로를 조금 길게 할 거면 디자인 작업을 할 때 세로 값을 길게 캔버스 창을 조절하고 하는 게 가장 좋습니다.)
3. 인천광역시 블로그의 위젯 구성
캔버스 작업창의 세로 값을 조절했다면 인천광역시 공식 블로그의 위젯이 어떻게 들어가 있는지 레이아웃을 살펴보겠습니다. 세로 값을 조절한 캔버스 창에 인천광역시 공식 블로그의 메인 화면을 프린트 스트린을 해서 아래 화면과 붙여 넣기 합니다.
처음 가이드라인을 만들어 놓은 부분이 위에 표시가 되기 때문에 이 블로그가 어떻게 만들어졌는지 이제 쉽게 알 수가 있습니다. 인천광역시 공식 블로그의 경우 첫 번째 줄 1개의 위젯 크기는 가로와 세로가 170px* 600px로 두 번째 줄의 경우 1개의 위젯 크기가 가로와 세로가 170px*267px로 2단으로 들어간 것을 알 수 있습니다. 블로그 디자인의 경우 주제가 다 다르고 운영하고자 하는 목적이 모두 다르기 때문에 디자인도 다양하게 나올 수밖에 없습니다. 그래서 이와 같이 세로 값이 더 길어질 수도 있고 메뉴의 구성이 달라질 수 있습니다.
그러나 이미지맵을 활용하여 좌표값만 찾아내는 방법을 할 줄 알고, 가로 영역만 잘 지켜서 작업을 한다면 디자인은 어느 디자인으로 제작을 하든 크게 상관이 없습니다. 앞으로 기본만 튼튼하게 배워서 다음에 응용을 해서 계속 활용할 수 있기 때문에 이번에 같이 해보는 블로그 디자인도 예시로 참고만 하시면 좋을 것 같습니다.
4. 홈페이지형 블로그 디자인하는 방법
유튜브 영상을 위해 디자인을 미리 만들어 놓았기 때문에 디자인 작업하는 부분은 넣지 않았지만 홈페이지형 블로그 디자인하는 방법을 정리는 해보도록 하겠습니다.
방법1) 이제 다시 가이드라인을 만들어 놓은 여러분들의 캔버스 창으로 돌아와서 디자인을 작업해 주시면 되는데, 이때 위젯의 전체 영역 가로 사이즈가 910px에서 벗어나지 않게 링크 위젯을 넣는 부분만 유념하여 디자인 작업을 해주시면 됩니다. 뒷배경이 되는 스킨 영역 백그라운드 부분은 캔버스에 맞게 2000px로 이미지 작업을 해주면 됩니다.
방법2) 캔버스를 확대하여 눈금자로 표시한 가이드라인을 보면 위젯 사이사이의 공백이 있는 것을 볼 수 있습니다. 이 부분도 링크가 걸리지 않는 부분이므로 메뉴 버튼이 텍스트로 글자로 디자인 작업 시 들어간다면 공백 부분을 피해서 유념해서 디자인 작업을 해주시면 됩니다.
방법3) 위젯 영역 캡처 화면을 버리지 않고 작업을 하고 있는 레이어 위로 투명도를 조절하여 눈을 끄고 켜서 확인하며 작업을 해도 되고, 가이드라인으로 이미 다 선을 만들어 놓았기 때문에 불편한 분들은 캡처한 레이어는 삭제를 하고 진행하셔도 됩니다. 작업하는 하는 스타일은 모두 다르기 때문에 저처럼 하셔도 되고 본인이 편하게 작업을 하셔도 됩니다.
디자인 작업한 부분과 캡처해 두었던 위젯 영역을 레이어의 위와 아래로 얹혀서 확인해 보면서 설명을 좀 더 해보겠습니다. 위에서도 설명을 처음에 드렸던 부분입니다. 저의 경우 디자인의 레이아웃을 좌측에 모든 카테고리가 위치해 있습니다.
5. 위젯 등록 시 문제점 발생
◎첫 번째 문제점
1개 만의 위젯을 사용하지 못하는 몇 가지 문제점이 있습니다. 위젯 등록 시 중요한 것은 위젯 1개당 코드 소스의 위젯 용량이 제한되어 있기 때문입니다. 1개의 위젯에 들어갈 수 있는 용량은 2000byte까지 입력이 가능하기 때문입니다. 여기서 위젯 2000byte는 글자 수로 1000자 정도 됩니다. 디자인상 1개의 위젯에 여러 개의 메뉴가 들어가 있기 때문에 1000자가 훌쩍 넘어가기 때문에 위젯이 등록이 안됩니다. 위젯 1개로는 제가 원하는 홈페이지형 블로그를 만들 수 없었습니다.
◎두 번째 문제점
위젯 1개당 세로 최댓값이 600px인 게 문제가 됩니다. 위 화면에서 보는 것과 같이 SNS 부분은 위젯의 영역에 다 들어오지 못합니다. 그래서 이러한 경우는 위젯을 두줄로 만들어서 사용하거나 여러 개의 위젯을 세로 값의 사이즈를 조절하여 세줄 이상을 더 추가하여 나눠서 등록을 해줘야 했습니다.
문제점을 해결하기 위해서는 레이아웃을 구상할 때 위와 같은 방법으로 미리 박스를 만들어 나누어 보는 것도 좋은 방법입니다. 처음에 만들어 놓았던 영역에서는 벗어나지 않게 위젯을 여려 개로 나눈 상태입니다. 내가 위젯을 넣는 다면 이렇게 넣어야겠다 미리 박스로 위젯을 만들어보고 가이드라인으로 공간을 세분화해 표시를 까지 해두었습니다. 이때 위젯과 위젯의 사이에 있는 공간들도 체크하여 세분화했습니다.
6. 다른 구성으로 위젯을 넣고 싶다면 참고
예시로 만든 위젯의 구성입니다. 다른 디자인의 레이아웃을 보면 위와 같은 구성도 있을 수 있습니다. 파란색 박스는 링크 버튼 위젯입니다. 링크를 넣어서 클릭 시 해당 페이지로 이동하게 해야 하는 위젯입니다. 이런 경우도 기본 편에서와 마찬가지로 노란색 박스처럼 퍼즐처럼 다 들어가 있어야 합니다.
1번째 줄의 위젯 5개가 들어가야 다음 2번째 줄 위젯이 들어갈 수 있기 때문입니다. 1번째 줄 보면 투명 위젯(노란색 박스) 1, 투명 위젯(노란색 박스) 1, 링크 버튼 위젯 (파란색 박스), 투명 위젯(노란색 박스) 1, 투명 위젯(노란색 박스) 1 순서로 1번째 줄이 5개의 위젯으로 채워진 걸 알 수 있습니다. 한 줄이 다 채워지면 다음 줄에 위젯을 등록하면 되는 것입니다. 위와 같은 방법으로 위젯의 영역을 전체 선택한 블로그의 메인화면을 프린트 스크린을 한 후에 캡처 화면을 보면서 여러 디자인의 레이아웃으로 구성을 해볼 수 있습니다.
네이버 홈페이지형 블로그 만들기 디자인 부분은 이 정도면 마무리가 된 것 같습니다. 디자인 시안 작업을 할 때 위젯의 영역 위치를 고려하여 작업해주시면 됩니다. 이 부분이 중요한 이유는 위젯의 위치하고 디자인하고 맞지 않게 되면 전부 재수정을 해야 하는 경우가 생기기 때문에 기초 부분이지만 위젯의 위치와 위젯의 영역을 나누는 부분을 한번 더 설명을 드렸습니다.
또한 여러 방법을 테스트해보고 위젯의 전체 가로 값 영역의 맞게 디자인을 하는 부분을 쉽게 할 수 있는 방법이 무엇일까 고민하다가 나름 초보 블로거에게 조금은 쉽게 할 수 있는 부분일 것 같아서 영상을 제작하고 블로그에 글로 정리하게 되었습니다. 다음 글에서는 오늘 작업한 부분을 분할하여 저장하고 위젯 등록하는 방법들로 이어가 보도록 하겠습니다.
댓글