분야
분야 전체
크레마클럽 허브

아보느의 홈페이지형 블로그 만들기

윤호찬 | 아티오 | 2020년 3월 10일 한줄평 총점 0.0 (17건)정보 더 보기/감추기
  •  종이책 리뷰 (16건)
  •  eBook 리뷰 (1건)
  •  한줄평 (0건)
분야
IT 모바일 > 웹/컴퓨터 입문&활용
파일정보
PDF(DRM) 72.58MB
지원기기
iOS Android PC Mac E-INK

아보느의 홈페이지형 블로그 만들기

이 상품의 태그

책 소개

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

블로그를 여행하다보면 돈 주고 만든 상업적 홈페이지처럼 멋있게 디자인된 블로그를 볼 수 있다. Start up 시리즈 『아보느의 홈페이지형 블로그 만들기』는 네이버에서 제공한 기본 디자인이 아닌 자신만의 색깔을 가진 블로그를 만드는 기법을 담았으며, 책에 나오는 내용은 유튜브 동영상 강좌와 연계되어 학습하면서 궁금한 사항은 저자와 바로 교감을 나눌 수도 있다. 또한, 블로그를 꾸밀 때 필수 프로그램인 포토샵을 모르는 분들을 위한 포토샵 강좌도 유튜브에 있어 병행 학습이 가능하다.
  •  책의 일부 내용을 미리 읽어보실 수 있습니다. 미리보기

목차

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 포토샵 사용법

상세 이미지

상세 이미지

저자 소개 (1명)

저 : 윤호찬 (아보느)
IT 및 디자인 분야 유튜브 크리에이터로 활동하고 있으며, 홈페이지, 쇼핑몰 제작 업체를 10여년 넘게 운영해 온 경험을 재능 나눔하고 있다. 디자인과 프로그램 두 분야에 모두 관심이 많으며, 콘텐츠 기획 및 콘텐츠 마케팅 관련 일을 하고 있다. 부산대 정보컴퓨터공학 전공하였으며 포스트웹 대표이다. IT 및 디자인 분야 유튜브 크리에이터로 활동하고 있으며, 홈페이지, 쇼핑몰 제작 업체를 10여년 넘게 운영해 온 경험을 재능 나눔하고 있다. 디자인과 프로그램 두 분야에 모두 관심이 많으며, 콘텐츠 기획 및 콘텐츠 마케팅 관련 일을 하고 있다. 부산대 정보컴퓨터공학 전공하였으며 포스트웹 대표이다.

종이책 회원 리뷰 (16건)

아보느의 홈페이지형 블로그 만들기
내용 평점4점   편집/디자인 평점4점 | 스타블로거 : 블루스타 n***a | 2020.06.20

서평을 주로 올리는 블로그가 있다. (지금도 서평을 쓰고 있는) 이 블로그를 시작한 건 기록을 위함이었는데 하다보니 여러가지 주제로 폴더를 만들게 되었다. 일기, 여행, 뜨개질, 미싱 등 많은 폴더가 있는데 사실 처음에만 몇 번 올리고 흥미가 떨어져 쉬고 있다. 다행히도 서평은 계속 업데이트를 하는데 블로그를 전반적으로 좀 바꿔보고 싶다는 생각을 하던 중에 이 책을 만나게 되었다.

일단 첫번째는 블로그 정보 변경하기에서 모바일앱 커버 이미지를 변경하는 방법을 해보았다. 모바일로도 블로그를 하는데 처음에 내가 기존 이미지 중에서 하나를 선택해 올린 것이 대문 이미지가 되어 버려서 이걸 어떻게 바꾸나 했는데 방법을 아주 자세하게 써 있다.

두번째는 여러가지 위젯을 확인하고 설정하고 위치를 이동하고 화면 디자인을 하는 것도 해보았다.

세번째는 블로그 썸네일이라는 것도 이 책을 통해서 알게 되었는데 첫 화면에 일반적으로 보이는 갤러리 형태의 이미지를 말한다고 한다. 기본적인 목록이 아니라 이미지가 딱 나오는 건데 블로그를 보다보면 상업적인 블로그에서 많이 보이는 디자인이었다.

조금 아쉬운 건 집 컴퓨터에 포토샵이 없어서. 이 책에서 주로 포토샵으로 진행하는 방법을 알려주는데, 그건 해보지 못했다. 포토샵을 이용하면 다 똑같은 네이버 블로그 대문이 아닌 홈페이지형 블로그 대문이 완성되는데, 매우 특별해 보였다. 또한 썸네일도 포토샵으로 진행한다.

이미 네이버블로그에도 자체적으로 꾸밀 수 있는 기능들이 많은데, 그 이외에 옵션들을 어떻게 사용하는지에 대해서 자세히 잘 나와 있다. 블로그를 다른 사람들보다 조금 색다르게 꾸미고 싶은 사람이나, 상업적으로 이용하는 사람들, 포토샵을 배우고 있는 사람들이 활용해보면 좋을 것 같다.

이 리뷰가 도움이 되었나요? 접어보기
[서평] Start up 아보느의 홈페이지형 블로그 만들기
내용 평점5점   편집/디자인 평점5점 | 스타블로거 : 블루스타 G*******r | 2020.06.18




아보느의 홈페이지형 블로그 만들기(Start up)

작가
윤호찬
출판
아티오
발매
2020.03.10.
평점

리뷰보기


 블로그를 단순히 여는 것하고 꾸미는 건 천지차이다. 나는 주로 서평을 쓰고, 흔적을 남기느라 블로그를 사용한다. 항상 블로그가 너무 빈약해서 스트레스였다. 어떻게든 꾸며야하는데, 꾸밀줄을 모르니, 글 작성 수만 많지, 진짜 없어보였다. 다른 블로거들의 블로그를 보면 있어보였고, 심지어 부러울 정도였다. 부러우면 지는 거지만 말이다. 돈이 되는 것까지는 바라지도 않고, 깔끔하고 볼만한 블로그의 느낌을 원했다.


 솔직히 처음에는 윤호찬 선생님에 대해서는 잘 몰랐다. 그런데 선생님께서는 홈페이지도 따로 가지고 계시고, 유토브, 카페등 여러 링크들을 운영중이시다. 이런 전문가가 직접 책을 쓰시니 공신력도 있었고, 배우는데 믿고 들어가보자는 마음가짐도 생겼다. 한 번 궁금해서 아보느 카페에 들어가보았는데, 진짜 무언가 달랐다. 여윽시 전문가는 달라도 무언가가 다른가보다. 그런데 단순히 블로그만을 꾸미는 것이 아닌, 홈페이지의 요소와 접목해서 꾸미는 방식을 사용하고있다. 뭐라고 할까? 홈페이지같은 느낌이 나는 블로그라고 해야 무방할 것 같다.




 

이 책의 목차를 보면, 내용과 흐름을 알 수가 있다. 블로그 디자인, 카테고리, 배경이미지, 로고, 타이틀, 위젯 등등 보기만해도 머리가 아플정도였다.



대표적인 블로그 사이트를 예시로 설명을 하고있다. 무언가 깔끔한 이미지였다. 각 대표적인 블로그 사이트를 분석적으로 강의를 해주시는 거 같아서, '아, 이렇게 활용을 하면 나쁘지 않겠구나...? 하는 인상을 심어주셨다. 내가봐도 좋은 평점을 주고 싶을 정도였다. 블로그도 쉽게 쉽게 만드는 줄 알았는데, 아주 쉬운건 아니었나보다...

 

 마치 홈페이지를 꾸미는 듯한 서식이 있어서 꼽아보았다. 나는 이런쪽은 완전히 문외한이라서, 직접 해보아도 왜인지 엉터리일 것 같은 느낌이 팍팍든다. 그럼에도 불구하고 당장 블로그를 바꿔보고 싶은 욕구는 가득하다. 이해가 안가는 부분도 있었지만, 그만큼 상세하게 설명을 해주기에 그런 것이라고 생각하고 싶다. 그리고 책 마지막에는 블로그에 수익형 광고를 넣을 수 있는 애드포스트도 설명을 해주고 있다. 혹시나 수익형 블로거를 꿈꾸시는 분들도 큰 도움이 될 것이라고 여겨진다. 그리고 유용한 팁도 꼭 참고하길 바라면서 마치겠다. 

이 리뷰가 도움이 되었나요? 접어보기
아보느의 홈페이지형 블로그 만들기
내용 평점5점   편집/디자인 평점5점 | g******a | 2020.06.17

정보를 얻기 위해 혹은 내 생각이나 책을 읽고 난 후의 생각 등을 기록하는 용도로 쓰이고 있고 다른 분들께도 유용하게 사용되고 도움되고 있는 것 중 하나가 블로그라고 생각한다. 사실 내 블로그는 일기장이나 혼자 보는 기록장에 가깝지만 검색을 하면서 봐왔던 깔끔하고도 눈에 확 띄는 홈페이지 형태를 띈 블로그는 어떻게 제작되는지 궁금했다. 무엇보다 이 블로그도 약간의 변화를 주고 싶어 오랜만에 블로그 설정? 에 들어갔더니 무슨 소리인지 도통 모르겠어 금방 포기한 전적이 있기에 방법을 알고 싶었다. 아보느의 홈페이지형 블로그 만들기라는 책을 통해 접한 건 내가 봐왔던 블로그뿐 아니라 관공서 블로그 등까지 확장해 볼 수 있었다. 잘 정리되었다는 느낌의 블로그들이 5가지 내지 6가지의 메뉴를 가지고 그를 링크로 연결해두는 등의 형식을 사용중이었다. 이 책이 아니었다면 메뉴를 세어볼 생각은 하지 못했을 건데 앞으로는 괜찮은 블로그를 보면 메뉴 개수를 체크해보지 않을까 싶다. 가장 궁금했던 레이아웃에 메뉴까지 더해져 기분이 좋아졌을 무렵 다시 블로그를 정리하고 싶어 들어갔던 설정 칸을 상세히 설명해준 내용을 볼 수 있었다. 확실히 누가 하나 하나 알려주니 조금 더 명확하게 사용할 수 있는 기분이었다. 로고나 요즘 많은 분들이 이용하시는 둥근 사진에 글씨를 얹는 것도 궁금했지만 포토샵이라 막상 도전할 수 없었는데 포토샵은 없어도 하는 법은 얼추 안 듯하다. 아예 몰랐었다가 과정을 보니 또 새로운 재미 포인트였다. 본문 아래로 영역을 내리는 방법도 코드를 적어주신 덕에 조금 더 원활하게 시도해볼 수 있겠다는 생각이 들었다.

*출판사로부터 도서를 제공받았습니다.

이 리뷰가 도움이 되었나요? 접어보기
  •  종이책 상품상세 페이지에서 더 많은 리뷰를 확인하실 수 있습니다. 바로가기

eBook 회원 리뷰 (1건)

구매 [서평] 홈페이지를 뚝딱 만들 수 있을까?
내용 평점5점   편집/디자인 평점5점 | D****N | 2021.02.28

0. 책을 읽게 된 계기


 - 기록하는 습관 만들고 싶었다. 내 일상/경험은 소중하니까

 - 코로나로 비대면으로 소통하는 방법이 중요해졌다. 기록과 동시에 부모님과 소통할 수 있는 공간을 만들고 싶었다.

 - 이왕 만들꺼 이쁘게 만들고 싶었다. 그래서 유투브를 둘러봤다.

 - '아보느' 님의 유투브를 접했고, 영상 14개를 2시간 동안 앉은자리에서 쭉 봐 버렸다.

 - 무엇에 홀린 듯, Ebook 결재했다.

 

1. 책이 나에게 준 인사이트


- 의외로 꾸미는 방법이 간단해서 놀랐다.

- '아보느' 카페에 구독자분들이 작업한 홈페이지들을 보면서 나도 할 수 있겠다는 자신감이 들었다.

- HTML & CSS 라는 Backend 개발영역에 대해서 관심을 갖게 되었다.

 → Do it HTML5+CSS3 웹 표준의 정석 이라는 책을 중고로 구매하는 계기가 되었다.

- 유투브 영상을 보면, 군더더기 없이 짜임세 있게 내용을 전개하는 능력이 부러웠다.

- 글이든 영상이든 만들기 전에, 큰 틀을 먼저 생각해봐야 겠다는 생각이 들었다. 

 ( 실제로, T스토리 블로그 홈페이지형으로 만드는 강의는 14편을 4편으로 압축하셨는데, 책의 목차 구성을 염두해 둔 내용 구성이라는게 확 느껴졌다.)

 

2. 책을 통해 기대하는 변화


- 기록하는 습관 만들기
- 부모님과 소통할 수 있는 공간을 만들기

- 커리어 발전/어필하는 공간으로 사용하기

- 소액의 Passive income 만들기 ( 21년도 버킷 )

 

3. 기대를 현실화 시키기 위한 다짐


코로나로 무기력함에 눌려서 2020년을 보냈다. 대학졸업하고, 학생 신분을 벗은지 4년 됐는데, 회사에서는 산 더미 같은 일을 처리해야하는 3년차 대리, 가정에서는 환갑을 앞둔 부모님들의 건강이 걱정되는 막내아들 사회에서는 내 집마련/가정꾸리기/커리어 관리 등 배우고 실행해야 할 것들 산더미.

계속 반복되는 권태로우면서 정신없이 바쁜 일상속에서 소중한 사람/기회들을 놓치고 있는 것은 아닌지, 잘 살고 있는 것인지 마냥 우려스럽다.

그래서 올해부터는 하루하루를 최선을 다해서 살고, 그 순간의 경험들을 빠짐없이 기록으로 남기려고 다짐했다.

 

4. 단기 계획 (시작이 반, 당장 안하면 평생 못한다.)


 - 2月 : 블로그 개설/홈페이지 형식으로 꾸미기

 - 3月 : 블로그 연재

  ㆍ중국 출장 격리기

  ㆍ HTML5+CSS3 웹 표준의 정석 학습내용

 

-이상-

1명이 이 리뷰를 추천합니다. 접어보기
  •  eBook 상품상세 페이지에서 더 많은 리뷰를 확인하실 수 있습니다. 바로가기

한줄평 (0건)

0/50
맨위로