책소개

Start up 시리즈는 유튜브, 인스타그램, 블로그, 페이스북, 트위터 등 다양한 플랫폼을 통해 누구나 콘텐츠를 제작하여 유통할 수 있는 시대에 맞춰 고객의 니즈를 파악하여 제작한 교재입니다. 더불어 많은 수익창출로 새로운 1인 창업의 기회가 되고, 1인 크리에이터로 제대로 된 기획, 제작, 마케팅, 수익 창출을 위한 내용을 수록하였습니다.

저자소개

IT 및 디자인 분야 유튜브 크리에이터로 활동하고 있으며, 홈페이지, 쇼핑몰 제작 업체를 10여년 넘게 운영해 온 경험을 재능 나눔하고 있습니다. 디자인과 프로그램 두 분야에 모두 관심이 많으며, 콘텐츠 기획 및 콘텐츠 마케팅 관련 일을 하고 있습니다.
• 부산대 정보컴퓨터공학전공
• 포스트웹 대표 : https://postweb.kr
• 아보느 유튜브 : https://youtube.com/aboneu
저자와 소통할 수 있는 채널
• 아보느 홈페이지 : https://aboneu.com
• 아보느 카페 : https://cafe.naver.com/aboneu
• 아보느 포스트 : https://post.naver.com/aboneu

목차

Step 1 ： 네이버 블로그 디자인의 비밀 살펴보기

1 블로그란? 홈페이지란?

2 다양한 블로그 스타일 구경하기(기본 블로그 vs 홈페이지형 블로그)

3 세로 5개의 투명 위젯 가이드라인의 이해하기

4 네이버 블로그 구조 이해하기



Step 2 ： 블로그 기본 정보 입력 및 카테고리 생성하기

1 블로그 생성 및 관리자 로그인하기

여기서잠깐[블로그 쉽게 만들기] 내용 살펴보기

2 블로그 정보 변경하기(블로그명, 별명, 소개글, 프로필 이미지, 모바일앱 커버 이미지)

3 블로그 - 카테고리 관리에서 카테고리 메뉴 생성하기



Step 3 ： 배경 이미지 넣기 & 로고/타이틀 영역 수정하기

1 꾸미기 설정 - 레이아웃 설정 - 메뉴 형태와 타이틀 위치 변경하기

Power Upgrade 배경 이미지 포토샵에서 작업하는 방법(가이드라인, 투명 위젯, 메뉴 위치 고려)

2 꾸미기 설정 - 세부 디자인 설정 - 스킨배경 - 스킨배경 직접 등록하기

3 타이틀 - 블로그명 제목 안 보이게 처리하기

4 타이틀 - 영역 높이 변경하기



Step 4 ： 상단 메뉴 위젯 추가 후 투명 이미지 넣기

1 레이아웃의 구조 설명하기

2 꾸미기 설정 - 레이아웃 설정 - 메뉴 영역 추가하기

3 위젯 개념 알아보기

4 위젯 위치 이동하기

여기서잠깐 투명과 검은색 위젯 가이드 만드는 방법

5 투명 이미지를 원격 공간에 업로드 하기

6 투명 이미지 경로 주소 확인하기

7 위젯코드 입력(html 방식) - 위젯에 투명 이미지 넣기

8 타이틀과 메뉴 사이에 간격을 조절하기

여기서잠깐 세로 5개 가이드라인의 원리



Step 5 ： 투명 위젯 링크 연결하기(이미지맵 사용)

1 상단 메뉴 링크 연결하기

2 전체 메뉴 카테고리별로 주소(URL) 확인하기

3 외부링크 html 작성하기

4 내부링크 html 작성하기

5 black.png 이미지를 transparent.png 투명 이미지로 변경하기



Step 6 ： 공간 만들기 위젯 추가하기(테이블 문법)

1 공간을 주기 위한 br 위젯 5개 추가하기

2 br1~5 위젯 위치 이동하기

3 공간을 주기 위한 html 문법 설명 - 1(br 태그 사용하기)

4 공간을 주기 위한 html 문법 설명 - 2(table 태그 사용하기)



Step 7 ： 블로그 썸네일 디자인 3종(정사각형, 직사각형, 원형) 만들어 보기

1 썸네일 권장 사이즈 확인하기

2 정사각형 썸네일 디자인하기

3 직사각형 썸네일 디자인하기

4 원형 썸네일 디자인하기

5 ‘From 블로그씨’ 안 보이게 하기

6 썸네일 3종 블로그에 글쓰기 후, PC 화면 vs 모바일 화면 썸네일 비교하기



Step 8 ： 한 개 위젯으로 다수 SNS를 링크(이미지맵)시키고 검색 기능 추가하기

1 포토샵에서 SNS 링크 연결 영역 디자인(검색위치, SNS위치) 위치 확인하기

2 SNS 이미지가 포함된 배경 이미지를 불러와서 스킨배경 이미지로 등록하기

3 검색 위젯 추가하기

4 SNS 위젯 추가하기

5 이미지맵 자동 프로그램을 이용해서 좌표 구하기(Online Image Map Editor)

6 한 개의 위젯으로 SNS 다중 링크 연결하기

7 이미지맵 좌표 값 미세 수정하기



Step 9 ： 푸터(footer) 만들기 - 하단 카피라이트 부분 추가하기

1 현 레이아웃에서 footer를 만들기 위한 모듈 선택 및 그 이유?

여기서잠깐 ‘타이틀’ 위젯 모듈의 3가지 특징

2 레이아웃 설정에서 ‘타이틀’ 영역 이동하기

3 mm1~mm5 위젯 코드를 테이블 문법으로 변경하기

4 위젯 변경 후 세부 내용 재수정하기



Step 10 ： 서브메뉴 추가하기

1 서브메뉴를 추가하기 위한 레이아웃 구조 파악하기

여기서잠깐 링크를 연결하기 위한 아보느 공식 3단계

2 포토샵에서 서브메뉴 디자인 위치 확인하기(투명 가이드라인 활용)

3 서브메뉴 부분만 조각 이미지로 저장하기(이미지맵 좌표 용도)

4 작업한 배경 이미지 ‘스킨배경’으로 적용하기

5 메인메뉴 아래에 서브메뉴 3개 추가하기

6 서브메뉴의 url 주소 확인하기

7 br1 위젯에 투명 이미지 넣고 코드 수정하기

8 투명 이미지 height 높이를 강제로 늘이기

9 조각 이미지를 이용해서 이미지맵 좌표 구하고 링크 연결하기

10 이미지맵 좌표 값 미세 수정하기



| 부록 1 | 블로그로 수익 창출하기(네이버 애드포스트로 블로그에 광고 적용하기)

1 애드포스트 회원 가입하기

2 애드포스트에 미디어 등록하기

3 미디어 검수 결과 종류(검수중/보류/정상)

4 애드포스트 공식 가이드라인(NAVER 고객센터)

5 블로그 광고 노출 위치 및 수입 보고서



| 부록 2 | 블로그 제작 시 도움 되는 유용한 정보(팁) & 포토샵 사용법

1 유용한 사이트/정보(팁)

2 포토샵 사용법

한줄 서평