따라해 볼 수 있는 튜토리얼과 간단한 팁에 대해서 다루고 있습니다.

네이버 블로그

네이버 블로그 스킨 제작에 대해서

네이버 블로그 스킨에서 제공하는 기능을 활용하면 배너를 삽입하는것은 물론이고 약간의 트릭을 이용해서 홈페이지처럼 보이게 만드는 것도 가능합니다. 기본적으로 HTML과 CSS에 대한 선행지식이 필요한 관계로 전혀 경험이 없다면, 따라하시는데 다소 생소한 표현때문에 어려움을 느낄 수도 있습니다. 그렇지만 최대한 설명을 덧붙여서 어려움을 덜어드리도록 노력해보겠습니다.

위젯 기능 활용

네이버 블로그 스킨은 위젯이라는 기능을 수 년 전부터 지원하고 있습니다. 하지만 여전히 베타상태로 놔두고 있는 이유는 보안이나 관리상의 이유가 크지 않나 싶은데요. 너무 많은 자유도를 허용하다 자바스크립트 범벅으로 난장판이 됐던 다음 카페의 선례가 있기 때문인가 싶습니다. 지금은 보안상의 이유로 대부분의 커뮤니티에서 스크립트 입력을 허용하지 않고 있습니다.

CSS 활용

네이버 블로그 스킨에서는 CSS도 무조건 인라인 형태로 서술되야합니다. 때문에 반복적으로 같은 내용을 필요로 할때 반복작업으로 인한 피로감이 좀 있습니다. 그리고 일부 태그들은 또 여전히 적용되지 않고 있는 문제도 있고, 네이버에서 임의로 다른 태그로 대체해서 적용하는 경우도 있기때문에, 약간의 시행착오를 감수해야합니다.

홈페이지 처럼 보이게 만드는 트릭

일단 네이버 블로그 스킨을 홈페이지 형태로 만드는 방식에 대해서 간단한 개요를 이야기하자면, 네이버 블로그 상단 부분에 배경이미지를 깔고, 그 위에 투명한 위젯을 올려서 원하는 형태로 버튼이나 배너 같은 요소들을 삽입합니다. 엄연히 이야기하자면, 위젯을 이용해서 레이아웃을 구성한다고 볼 수 있습니다.

테이블 태그 사용 지양

덧붙여서 아직도 테이블 태그를 활용하는 방법을 고수하는 네이버 블로그 스킨 강좌들이 있는데, 테이블 태그를 사용하는 것 자체는 크게 상관 없으나 만드는 사람 입장에서 불필요한 코드를 많이 사용해야합니다. 그리고 버튼이 한 두 개라면 모르겠지만, 많은 양의 버튼을 테이블 태그로 생성하게 되면 그만큼 많은 로딩 시간이 소요됩니다.

테이블 태그로 박스를 만들 경우와 div 태그로 각각 폭 170픽셀, 높이 600픽셀의 박스를 만들 경우를 각각 아래 예시에서 보여드리도록 하겠습니다.

같은 결과물을 보여주지만, 내부에서 돌아가는 모양새는 다릅니다. 한 눈에 보아도 태그의 양이 확연히 차이가 납니다. 테이블 태그는 브라우저가 해석할때 구조적으로 먼저 table을 찾고, tr로 행을 찾고, td로 열을 찾고 그 안에 내용을 불러오는 식이라 3번에 걸친 과정이 필요합니다. 그와 반대로 div 태그는 그냥 한 번에 내용을 불러올 수 있습니다. 버튼 하나 쯤이라면 큰 차이가 안느껴지겠지만, 버튼을 많이 만들수록 이 문제는 더 크게 다가올 수 있습니다.

때문에 위지윅 wyswyg 방식의 나모웹에디터,드림위버를 사용해서 웹사이트를 만들어봤던 분들은 다소 생소할 수 있습니다만, 따라 해보시다보면 어느 정도 이해가 갈 겁니다.

본 튜토리얼은 아래와 같은 과정을 걸쳐서 진행됩니다.

  1. 구상단계
  2. 디자인(포토샵)
  3. 디자인을 스킨에 적용하기(네이버 블로그 관리자 기능, HTML/CSS)
  4. 버튼을 클릭할 때마다 새창으로 뜨는 문제 해결하기
  5. 프롤로그 기능 활용
  6. 포스팅 영역을 활용해서 조금 더 홈페이지처럼 보이게 만들어보자
  7. 에필로그

덧붙여서 말씀드리자면, 본 튜토리얼을 통해 네이버 블로그에 대한 기능적 이해를 돕는데만 활용하시고, 가능하면 홈페이지형 블로그는 만들지 않으셨으면 좋겠습니다. 그 이유는 에필로그에서 설명드리겠습니다.

워드프레스 블로그 운영에 대하여

워드프레스 블로그 – wordpress는 저에게 일종의 실험입니다. 국내에서 네이버라는 서비스가 얼마나 큰 영향력을 가지고 있는지 다들 잘 아실겁니다. 처음에는 검색 서비스로 시작했던 것이 지식인 서비스로 도약하고 블로그와 카페로 자리매김했습니다. 네이버보다 앞서거나 비슷하게 시작했던 서비스들은 전부 사라졌고, 지금은 다음과 네이버가 국내 시장을 양분하고 있습니다.

무엇보다 검색서비스에 대해서 논하는 이유는 단연 홍보가 중요하기 때문입니다. 사람들은 검색하는걸 넘어서 이제는 자신의 컨텐츠,서비스,상품에 대해서 홍보하기 위해서 열을 올리는 세상이 됐습니다. 어찌보면 참 서글픈 일이죠. 그만큼 자영업에 뛰어드는 사람이 많다는 이야기이기도 하니까요.

이러한 검색 서비스에서 워드프레스로 만든 블로그도 네이버 검색에 나올 수 있을까? 내가 만든 컨텐츠가 유통이 되지 않으면 어떡하나? 그런 의문에 대한 실험이 되는거죠.

컨텐츠 유통을 해줄 곳들은 어떤 곳이 있나

어찌되었건 네이버와 다음으로 양분되어있던 국내 시장에 난데없이 조용히 있던 구글이 제법 영향력있는 검색서비스로 등장합니다. 모바일이라는 새로운 매체의 등장으로 많은 사람들이 구글을 통해서 검색을 하기 시작했죠. 국내에서 많은 사용자를 확보하고 있는 안드로이드는 당연하게도 구글 친화적입니다.

어디 그뿐인가요. SNS가 발달하면서 트위터도 한 물 가고 이제는 페이스북,인스타그램 등 진화하는 서비스들에 발맞춰 가야하는 판이 됐습니다. 이제 정말 사람들은 홍보해야할 곳이 어딘지 모를정도로 많아져서 정신이 없어졌습니다. 그만큼 해야할 일이 많아졌다는 이야기죠.

워드프레스 설치하고 사서 고생하기

워드프레스는 크게 네이버 블로그와 마찬가지로 가입만하면 바로 사용할 수 있는 가입형 – wordpress.com 과 설치형 – wordpress.org 로 나누입니다. 가입형은 맞춤제작에 한계가 있고, 설치형은 마음껏 변형이 가능하다는 점이 가장 큰 차이점입니다. 그래서 설치형 워드프레스 블로그 운영이라는건 엎친데 덮친 격으로 비용도 들이고, 일도 하나 더 만드는 셈입니다.

  • 웹호스팅 업체에 월간/연간 사용 비용을 지불해서 웹사이트를 설치할 공간을 임대해야하고,
  • 접속할 수 있는 도메인 주소 연간 계약해야하고,
  • 글을 쓰고 관리할 수 있는 시스템인 워드프레스 설치하고,
  • 워드프레스 테마가 내 구미에는 맞지 않으니 디자인 입맛대로 고쳐가야하고,
  • 스팸 댓글 안달리게 막아주는 기능, 여태껏 만든 컨텐츠 날아가면 복구할 수 있도록 주기적으로 별도로 저장해주는 백업 기능 등등 플러그인 설치하고

이러다보면 정말 ‘내가 이 짓을 왜 사서 하나’ 싶을 정도로 시간과 비용이 많이 들어갑니다.

테마에도 유료와 무료가 있는데, 이 또한 장단점이 있습니다. 저는 기본 제공되는 무료 테마인 Twenty Seventeen 테마를 활용하고 있습니다. 지난번에 만든 사이트는 테마를 잘못 골라서 – 제법 판매량이 높은 테마여서 믿고 구매했는데 저랑은 안맞더군요. 사이트를 한바탕 갈아엎어야했습니다. 컨텐츠를 쌓아가다보니 다이내믹하고 편의성도 있어보였지만, 점점 한계가 드러나는 기능적인 문제들이 있었습니다. 사이트도 너무 무거워져서, 편리함과 속도를 맞바꾼 느낌이었습니다.

그러다보니 돈이 자꾸 들어가니 약간의 운영비용이라도 건져볼려고 광고도 붙이게 되고, 이래저래 컨텐츠 유통 그 자체가 현재로서는 수입이 되어주질 못하는 상황이니 운영에 대한 고민을 많이 하게 됩니다.

내 컨텐츠가 검색은 되고 있는건가?

이런 고민끝에 작성한 컨텐츠들이라고 해도 유통 – 검색이 되지 않으면 아무 의미가 없습니다. 그런 이유로 또 해줘야하는 작업들이 있습니다. ‘검색엔진최적화(SEO)’라는 작업이 바로 그것입니다. 그렇게 ‘검색엔진최적화(SEO)’ 작업까지 해주고 나서 실제로 검색이 되나 봤더니 처음엔 안되더군요.

네이버 블로그는 등록하자마자 바로 검색엔진에서 포스팅 검색이 됐습니다만, 워드프레스로 만든 컨텐츠는 사이트 등록을 했어도, 실제로 검색에 반영되기까지 데이터 수집과 처리과정을 통틀어서 최소 하루 이상의 시간이 필요 했습니다.

그만큼 검색 결과에 반영되는게 네이버가 자체내에서 생산되는 컨텐츠에 검색 우선순위를 매기고 있고, 네이버 블로그에서 글을 쓸때보다는 늦는다는 이야기죠. 그래도 일단 검색은 성공적으로 되고 있다는걸 확인 했습니다. 키워드 유입을 역추적해서 들어가보면 페이지가 넘어가지 않고 첫 화면에 노출되고 있는 컨텐츠들도 있더군요.

여기서 눈여겨 볼 점은, 네이버 블로그는 “검색엔진최적화” 요건을 충족시키기에 제한적이고, 문자그대로 보자면 “검색엔진최적화”를 한다는게 불가능합니다. 오로지 네이버에서 키워드 유입만을 의존하고, 구글에서 정보를 수집해갈때까지 막연하게 언제 가져가나 모르지만 무조건 기다려야합니다. 빨리 수집해달라고 요청할 방법도 없습니다.

검색엔진최적화는 바로 이런 이유로 필요한겁니다. 내 컨텐츠를 빨리 퍼가라고, 1등이 아니어도 좋으니 뒷페이지 검색결과에라도 일단 반영이나 해달라는겁니다. 그다음에 검색엔진에서 질 좋은 컨텐츠라고 판단하는 기준에 부합해서 검색결과에 노출 순위를 매기게 되는거죠.

모바일 환경에서는 구글에서 검색되는 결과도 무척 중요하기때문에 지금같이 모바일 사용자가 많은 상황에서 네이버만 바라보고 간다는 것도 사실 좀 안타깝긴 합니다. 상위 노출은 고사하고 일단 검색은 되야 사람들이 뒤져보면서, 자신의 컨텐츠가 발견될 가능성이 더 커지겠죠?

 

 

일러스트레이터 여섯번째 레슨

일러스트레이터 illustrator 여섯번째 튜토리얼은 바로 나무 그리기입니다. 지금까지 동영상을 꾸준히 보아오신 분들이라면 충분히 앞의 내용과 연계해서 공부할 수 있도록 구성하고 있습니다. 이번에도 역시 실무에서 정말 핵심적으로 쓰이는 스킬이 공개됩니다. 이 부분도 빼먹지말고 충분히 잘 활용할 수 있도록 연습이 필요합니다.

동영상을 보다가 궁금한 점이 생기면 댓글 달아주세요 🙂

일러스트레이터 다섯번째 레슨

일러스트레이터 illustrator 다섯번째 레슨은 바로 구름 그리기 입니다. 동그라미를 이용해서 아주 간단한 구름을 그려볼건데요. 오늘은 역시 일러스트레이터에서 무척이나 자주 쓰이는 pathfinder 패스파인더 윈도우에 대해서 일부 알아보도록 할 겁니다. 역시 마찬가지로 실무에서 굉장히 빈번한 사용도를 보이는 기능입니다.

동영상을 보다가 궁금한 점 있으면 댓글 남겨주세요 🙂

일러스트레이터 레슨 네번째 시간

일러스트레이터 illustrator로 드디어 무언가 실질적인걸 그려보기 시작할겁니다. 먼저 톱니바퀴를 그리게 될건데요. 톱니바퀴를 통해서 회전툴에 대해서 한 번 자세히 알아보도록 하겠습니다. 실무에서 충분히 자주 활용되는 기법이기때문에 얼마던지 다양한 응용이 가능한 기능입니다. 일러스트레이터에서 꽤 자주 쓰이는 기능이니 꼭 익혀두시길 바랍니다.

동영상을 보다가 질문이 생기거나 궁금한 점이 있으면 댓글 남겨주세요 🙂