홈페이지형 블로그 제작(3) - 위젯 아이콘으로 홈페이지 분위기 만들기

지난 시간에는 캔바로 위젯 아이콘을 만들고 블로그에 등록하는 방법을 알려드렸습니다. 이번 시간에는 타이틀 없이 위젯 아이콘 만으로 홈페이지 분위기를 내는 방법을 설명해 드리겠습니다. 타이틀이 들어가는 대신 그 자리를 위젯 아이콘으로만 채우고 홈페이지 분위기를 연출하면서 연결 링크를 통해 해당 사이트나 블로그로 이동하는 방법입니다. 지난 강의가 어려우셨다면 이번 시간을 활용해 보셔서 간단하게 홈페이지형 블로그를 만들어 보세요.

 

캔바로 위젯 아이콘 제작하기

 

Step1)  네이버 위젯 아이콘 사이즈 - 170*600(개별), 966*600(통합)

• 위젯 아이콘을 개별적으로 만들거나 통합해서 하나의 이미지를 만든 후 필요한 조각으로 자르는 방법이 있습니다. 
• 개별적으로 만드는 것은 "홈페이지형 블로그 제작(2)"와 동일하니 이전 글을 참고하시면 됩니다.
• 여기에서는 통합해서 하나의 이미지를 만들고 필요하는 조각으로 자르는 방법을 살펴 보도록 하겠습니다.  
• 맞춤형 크기에서 966*600을 입력하고 "새로운 디자인 만들기"를 클릭합니다.

새로운 디자인 만들기

966*600 사이즈

 

Step 2) 디테일한 디자인을 위한 가이드 추가

• 디자인 작업을 수월하게 하기 위해서는 가이드 라인을 설정하는 것이 좋습니다. 
• 상단 메뉴의 "파일"을 클릭하고 "설정보기" 탭에서 "가이드 추가"를 클릭합니다. 
• 가이드는 "맞춤형"을 선택하고 넣을 위젯의 수 만큼 열을 추가합니다(위젯 수 최대 5).
• 열(5), 간격(0)으로 입력하고 가이드 추가

파일 - 설정보기 - 가이드 추가

 

가이드 설정

 

Step 3) 블로그 위젯 아이콘 제작

• 요소에서 마음에 드는 배경 이미지를 선택합니다. 

이미지 선택

• 사진 위에서 마우스 오른쪽 버튼을 클릭 메뉴에서 "이미지를 배경으로 설정"을 클릭합니다.

이미지를 배경으로 설정

• 요소에서 도형을 선택하고 연결 링크 설명을 넣을 부분을 작업합니다. 

도형 선택

연결 링크 설명 영역 작업

• 도형을 하나더 추가해 브랜드 네임을 넣을 부분을 작업합니다. 

브랜드 네임 영역 삽입

• 텍스트에서 "제목 추가"를 클릭해서 텍스트 상자를 입력합니다.  
• 연결 링크 설명 텍스트를 입력하고 Ctrl + D로 복제해서 위젯 갯수 만큼 만듭니다. 

연결 링크 설명 텍스트 상자 추가

연결 링크 설명 텍스트 복제

• 텍스트 상자를 모두 선택한다음 마우스 오른쪽 버튼을 클릭하고 메뉴에서 "고르게 띄우기" - "수평으로"를 클릭해서 정렬해 줍니다. 
• 텍스트 상자에 세부 내용을 입력하고 수정합니다. 

텍스트 상자 정렬 - 고르게 띄우기

연결 링크 설명 텍스트 상자 내용 수정

• 요소에서 연결 링크와 맞는 아이콘을 찾아 삽입합니다. 
• 그래픽에서 찾아야 색상을 수정할 수 있습니다. 

요소 - 그래픽 - 해당 아이콘 삽입

연결 링크 설명 아이콘 삽입

• 하단에 로고 + 브랜드 네임을 삽입합니다. 

브랜드 네임

• 작업한 이미지를 다운로드 합니다. 

이미지 다운로드

 

작업한 이미지 위젯 아이콘으로 자르기

 

Step 1) 이미지 분할 사이트에 접속합니다. 

• https://pinetools.com/split-image 

이미지 분할 사이트

 

Step 2) 다운로드 받은 이미지를 업로드 하고 OPTION 설정을 합니다. 

• How to split the image - Horizontally
• Quantity of blocks - 5
• 하단의 "SPLIT IMAGE!" 버튼을 클릭합니다.

이미지 업로드 & 옵션 설정

 

Step 3) 분할된 이미지를 다운로드 합니다. 

• 전체 이미지를 한꺼번에 받을 수 도 있고, 개별적으로 받을 수도 있습니다.
• 한꺼번에 이미지를 받아서 압축을 해제합니다. 

Download.zip file

압축 해제

 

블로그에 위젯 아이콘 등록하기

 

Step 1) 이미지 주소 생성을 위한 블로그 포스팅

• 블로그에 위젯 아이콘을 등록하려면 이미지 주소가 있어야 합니다. 
• 간단하게 이미지 주소를 얻는 방밥은 블로그에 만들어진 이미지를 포스팅하는 방법입니다. 
• 글쓰기를 클릭하고 사진 추가를 선택해 모든 이미지를 업로드 합니다.
• 사진 첨부 방식은 개별 사진 선택합니다. 
• 간단하게 블로그 제목을 입력하고 비공개 발행을 합니다. 

블로그 포스팅 - 사진 추가

개별 사진 첨부

비공개 발행

 

Step 2) 이미지 주소 복사 및 메모

• 포스팅된 블로그에서 이미지 위로 마우스를 가져가 오른쪽 버튼을 클릭하면 이미지 주소를 복사할 수 있습니다.
• 주소를 복사한 후 메모장에 차례대로 주소를 메모해 두면 됩니다.

이미지 주소 복사

이미지 주소 메모

 

Step 3) 위젯 아이콘 연결 링크 준비

• 위젯 아이콘에 맞는 연결 링크를 메모장에 메모해 둡니다. 
• 위젯을 등록하면서 직접 찾아서 해도 되지만 미리 준비해 두면 작업을 편하게 할 수 있습니다. 
• 위젯 아이콘을 클릭 했을때 어디로 이동하면 좋을 지를 미리 생각해보고 정확한 주소를 가져옵니다. 

연결 링크 준비

 

Step 4) 레이아웃·위젯 설정

• 프로필의 "관리"를 클릭하거나 "내 메뉴 - 세부 디자인 설정"을 클릭해 꾸미기 설정을 들어갑니다. 
• 레이아웃은 뒤에서 2번째 것으로 선택합니다.
• 타이틀을 사용하지 않고 위젯만 사용할 것이기 때문에 타이틀 체크 박스를 해제합니다. 

세부 디자인 설정

레이아웃 선택

타이틀 체크 박스 해제

• 오른쪽 하단의 "위젯 직접 등록" 버튼을 클릭해 위젯 아이콘을 등록합니다.
• 위젯명을 입력합니다. 실제 보여지는 부분이 아니기 때문에 간단하게 작성해도 됩니다.
• 위젯 코드를 붙여 넣기 하고 "연결 링크" 부분에는 연결할 사이트 주소를 "이미지 링크 주소"에는 이미지의 주소를 붙여넣기 하면 됩니다. 
• 이미지가 잘 보여지는 지 확인하고 등록합니다.

위젯 코드
<a target="_blank" href="연결 링크">
<img src="이미지 링크 주소" width: “170px”></a>

 

위젯 코드 입력

이미지 등록

• 동일한 작업을 반복해 원하는 갯수 의 위젯을 생성합니다.
• 만들어진 위젯을 드래그해서 상단에 순서대로 배치합니다. 
• 위젯을 블로그에 적용합니다.

5개 위젯 생성

 

상단 위젯 배치

위젯 블로그 적용

 

Step 5) 위젯 아이콘 작동 확인

• 블로그에서 위젯 아이콘을 눌러 각각의 연결 상태를 확인합니다. 
• 연동이 잘 되지 않는 다면 위젯 직접 등록으로 다시 돌아와 "edit" 버튼을 클릭하고 연결 링크를 수정해 줍니다.
• 아이콘 이미지가 잘 보이지 않을 경우나 변경시에도 동일하게 적용할 수 있습니다.

위젯 아이콘 작동 확인

 

Step 6) 위젯 아이콘이 중간 정렬이 되지 않았을 때

• 위젯 직접 등록으로 다시 돌아와 "edit" 버튼을 클릭하고 위젯 코드를 수정해 줍니다.
• "width=width"로 설정되어 있다면 "width=170"으로 변경해 줍니다.
• 이미지가 정상적으로 보이는 지 확인하고 등록합니다. 

위젯코드 수정

 

이미지 정상 출력 확인

홈페이지형 블로그 제작 완료

 

Step 7) 정확한 좌표를 설정해서 연결 링크 정교화하기

• 위의 방식으로 하면 아이콘 전체가 링크 설정이 되어 있는 상태라 아이콘의 어떤 부분을 누르던지 연결 링크가 작동 됩니다. 하나가 커다란 아이콘으로 작동되는 방식이라 볼 수 있습니다. 
• 자세하게 세부 좌표를 찍는 방법은 다음에 스킨을 적용해 홈페이지형 블로그를 만드는 방법에서 설명해 드리도록 하겠습니다. 

지금까지 캔바로 간단하게 위젯 아이콘을 만들고 블로그에 적용하는 방법을 살펴 보았습니다. 다음에는 스킨을 적용해 제대로된 홈페이지 느낌을 주는 홈페이지형 블로그를 만들어 보도록 하겠습니다. 갈수록 내용은 어려워집니다. 틈틈히 연습하시면서 잘 따라오세요~~^^