포토샵 과외

휴일에 포토샵 1:1 과외를 진행했습니다. 교육을 받게 되신 분은 취미로 사진 촬영을 하시고, 직장에서는 프리젠테이션 자료를 만들면서 포토샵이 필요해서 배우게 되셨다고 합니다. 첫 시간이라 대략적인 인터페이스와 디지털 이미지를 다루는데 필요한 기본적인 이론들에 대한 교육과 더불어 직접 실습하면서 툴을 익혀보는 시간을 가졌습니다.

이처럼 포토샵은 전문가의 전유물이 아닌 대중적인 툴이 되어가고 있습니다. 하지만 처음 접하는 사람 입장에서는 복잡한 인터페이스와 수 많은 기능에 압도되어 섣불리 다가가기 어려운 것도 사실입니다.

인터넷에 아무리 많은 자료들이 공개되어 있다한들 초보자 입장에서는 무엇을 찾아서 익혀야할지도 막연하게 어려운 것이 현실입니다. 그야말로 구슬이 서말이라도 꿰어야 보배라는 말이 실감 나는 상황입니다.

그래서 초보자 입장에서 포토샵을 가르쳐 드리기 위해 많이 고민해보았습니다. 툴을 다루는데 이미 익숙해진 숙련된 전문가들 입장에서 초보자의 막연함을 이해하기에는 이미 잊혀져버린 개구리 올챙이적 시절 이야기가 되어버렸습니다.

그래서 초보자들과 많은 대화를 나눠 보았습니다. 무엇이 막연한지, 그들이 왜 이해하기 어려워하는지, 이론적인 접근을 어떻게 해야 수월하게 이해하고 받아들이는지 살펴보고 다양한 방법으로 설명해보았습니다.

딱딱한 이론적인 내용도 이해하기 쉽게 예를 들어서 그림과 곁들여 설명해드립니다. 이러한 부분들을 공부하고나면 그동안 이유없이 답답하게 느껴졌던 부분들을 해소하고 더 나아가 스스로 학습할 수 있는 능력이 생깁니다. 물고기를 잡아주기보다 스스로 물고기를 잡게 만들어 드리는 것이 바로 제가 지향하는 목표입니다.

네이버 블로그

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

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

위젯 기능 활용

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

CSS 활용

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

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

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

테이블 태그 사용 지양

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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