웹디자이너로서도 주로 어떤 일을 하느냐에 따라서 합성이 업무에서 차지하는 비중이 클 수도 있고, 그렇지 않을 수도 있습니다. 주로 레이아웃을 짜는 일들을 하게 된다면, 합성은 그다지 비중이 크지 않을 수 있지만, 배너 이미지라던지 이벤트페이지 등 시선을 끄는 이미지들을 작업해야할 때는 합성의 비중이 커질 수도 있습니다. 합성할 일이 전혀 없다기보다는, 너무 목매지 않았으면 좋겠다는 이야기를 하는 겁니다.

비전공자로서 이 분야에 뛰어든 제 경험을 이야기한다면 포토샵 합성 기술을 익히기보다 화실에서 정물 소묘를 했던 것이 오히려 합성 기술에 더 큰 도움이 됐다고 말할 수 있습니다. 사물이 빛을 받으면 어느 부분이 밝고, 그림자가 생기며, 앞의 사물과 뒤의 사물이 어떻게 보여지는지 등 다양하게 사물을 관찰하는 방법에 대해서 체계적으로 배울 수 있었기 때문입니다. 단순히 포토샵에서 생기는 기술적인 부분은 블로그나 유튜브 같은 곳에서 자신이 하고자 하는 기술적인 부분을 적용한 사례들을 찾아서 필요한 부분만 익히면 됩니다.

아무리 해도 어색한 부분을 해결할 수 없다고 이야기하는 사람들의 작업을 보면 십중팔구 빛이 다른 소스들을 갖고 섞으려고 애를 쓰는 경우가 많습니다. 그래서 더더욱 빛에 대한 이해가 중요합니다. 빛에 따라 색상도 달라지고 많은 부분에 영향이 갑니다.

그 다음 강조하고 싶은 것은 타이포그래피에 대한 이해입니다. 너무 깊이 있게 공부하지 않아도 좋습니다. 타이포그래피는 최소한 정렬, 대비, 반복, 근접의 원칙만이라도 알고나면 디자인을 바라보는 시선이 달라질 겁니다. 이 내용에 대해서 좋은 책이 있습니다. 저도 공부했던 책인데 로빈 윌리엄스가 – 네 영화배우 그 분의 이름과 같지만 동명이인입니다. – 저술한 “디자인이 뭐야? 타이포그래피가 뭐야” 라는 책입니다. 안타깝게도 이 책은 너무 오래된 탓에 절판되었고, 비교적 최근에 디자이너가 아닌 사람들을 위한 디자인북 이라는 이름으로 약간의 수정을 거쳐 재 출간되었습니다. 무척 반가운 일이지요.

비전공자나 대학생들에게 추천해주었더니, 어떤 학생은 자기 학교 교수님도 이 책을 추천해주었다며 반가워하더군요. “마법의 디자인”이라는 책을 강력히 추천하는 분들도 있는데, 그 책은 사실 어느정도 기본을 익힌 분들에게 추천해줄만한 책이고, 아예 새로 진입하는 경우에는 제가 추천하는 로빈 윌리엄스의 책이 더 좋다고 생각합니다.

그리고나서 그리드 레이아웃에 대해서 공부하면 조금 더 폭 넓은 시각을 갖게 될 것 입니다. 모바일로 들어와서는 사실 기존에 있던 그리드 레이아웃이라는 것이 많이 제한적으로 적용되는 것이 사실입니다만, 그래도 모바일만이 전부는 아니니까 데스크탑이나 인쇄물을 디자인할 경우엔 여전히 그리드 레이아웃에 대한 지식이 유효합니다.

운이 좋아서 주어진 업무가 확실하고 정해진 영역만 전문적으로 깊이를 더할 수 있는 환경에서 일할 수 있게된다면 모를까, 안타깝게도 보통은 시키면 다 해야하는 환경에서 일할 확률이 높습니다. 공부해야할 것들은 많지만, 단기간에 다 익히라는 의미에서 쓴 글은 아닙니다. 적어도 용어라도 알고 있으면 자신의 작업에 벽이 느껴질때 이런 것들을 ‘들여다보고 공부하면 도움이 될 수 있을 것이다’라는 의미에서 쓴 글입니다.

제가 비전공자로 처음 이 일을 시작할때 사수도 없고 홀로 모든걸 감당해야하는 상황에서 그때는 유튜브도 없고, 인터넷에 이런 전공 관련된 내용들이 나오지도 않을 뿐더러, 오로지 잡지나 책 같은 전통적인 매체를 통해서만 접할 수 있었기때문에 무척 힘들게 많은 돈을 들여가면서 익혀야했던 것들이었습니다. 그런 면에서 요즘은 참 많은 면에서 공부하기에 좋은 환경이 되어있습니다.

하지만 초보자들은 무엇을 공부해야할지도 모르는게 보통이지요. 그래서 그런 분들을 위해서 조금이나마 도움이 될 만한 글을 써봤습니다.

 

사실 이런 글을 쓴다는게 조심스럽기도 한 것이, 저는 디자인을 전공한 사람도 아니고 유명한 회사에서 일해본 경력이 있는 것도 아닙니다. 주로 작은 중소기업, 소규모 쇼핑몰들에서 일했던 것이 경력의 전부인지라 내놓을만한 것도 없습니다. 다만 생존(?)을 위해 발버둥 치면서 이 바닥에서 주욱 버틸려고 발악했던 경험만 쌓여 있는 상태입니다.

따라서 ‘가볍게 이런 이야기도 있구나’ 하면서 읽을만한 그런 글입니다.

각설하고 웹디자이너라는 직업에 대해서 먼저 이야기하고 싶은 것은, 웹디자인도 처음엔 편집디자인과 공통분모를 갖고 시작하는 부분이 있습니다. 제가 언제나 웹에 대해서 이야기할때 강조 하는 ‘웹 문서’라는 부분도 이런 생각에서 비롯되는거죠. 지면에서 컨텐츠를 배치하고 나타내던 것들을 웹브라우저로 옮겨가며 그에 맞게 새로운 규칙과 방식들이 나타났을뿐, 타이포그래피, 그리드 레이아웃 등 편집디자인에서 갖고 있던 기초적인 가치들은 웹에서도 어느정도 적용되고 있습니다.

그래서 편집디자인 하시던 분들이 웹이라는 매체를 이해하고나면 생각보다 쉽게 결과물을 얻어내는 것 같습니다. 그러다보니 생각보다 많은 사람들이 웹디자인에 대해 쉽게 접근할 수 있었고, 인력 공급이 지나치게 많아지면서 전반적인 인건비 하락으로 이어졌습니다. 그래서 웹디자이너는 ‘박봉’이다라는 부분에 대해서 공감대가 폭넓게 형성될 정도가 됐습니다.

하지만 여전히 웹디자이너라는 직업에 대해서 많은 사람들이 도전하는 것을 보면, 직업적인 단점은 둘째치고 웹을 디자인하는 일 자체가 매력적으로 느껴진다는 이야기가 아닐까 싶습니다. 다양한 서비스들의 등장으로 누구나 쉽게 웹 문서를 만들 수 있는 세상이 됐음에도 불구하고 조금 더 자유롭게 표현하고 싶어하는 것이 사람들의 욕구가 아닌가 싶습니다. 웹 서비스들은 어디까지나 편의를 제공할 뿐 자유도는 무척 떨어지니까요.

그렇다면 웹디자이너가 되기 위해서는 무엇을 공부해야할까요? 늘 그렇듯이 사람들이 떠올리는 건 포토샵입니다. 디자인 직군에서 포토샵을 빼놓고 이야기할 수는 없겠죠. 웹에서 SVG 포맷을 활용하는 경우도 있으니 벡터 이미지를 제작해야할 일러스트레이터도 배워야할 것이고, 스케치나 Adobe XD 같은 UI 디자인 프로그램도 익힌다면 좋겠지요. 이런식으로 익히면 좋다고 이야기할 수 있는 것들은 일일이 꼽자면 한도 끝도 없습니다. 지금도 수없이 많은 프로그램들이 개발되고 있으니까요.

이 프로그램들을 모두 배울 필요도 없고 – 물론 포토샵, 일러스트레이터는 필수입니다 – 모두 배우는데까지 꽤 많은 시간이 필요합니다. 일단 필수적으로 익혀야할 포토샵과 일러스트레이터에 대해서도 볼까요? 보통 포토샵을 배우고 싶어하는 사람들에게 무엇을 배우고 싶냐고 물어보면 거의 십중팔구 합성하는 방법을 배우고 싶어합니다.

마치 포토샵이 마법의 도구처럼 보이는데 큰 역할을 한 것이 합성이긴 하죠. 하지만 이 합성을 자연스럽게 하는데는 생각보다 알아야할 것들이 많습니다. 예를 들어 어떤 환경에 사람을 합성한다 치면 우선 빛에 대한 이해가 있어야 합니다. 좌상단에서 빛을 받은 인물 사진을 우상단에서 빛이 내리쬐는 배경에 합성하는 실수는 초보들에게서 아주 빈번히 나타나는 실수 중 하나입니다. 그뿐 아니라 전체적인 색 온도라던지 더 나아가 구도와 독특한 아이디어 등 여러가지 요소가 갖쳐줘야 비로소 그럴듯한 완성물이 나오겠죠.

타이슨의 명언을 인용하자면, 사람들은 누구나 그럴싸한 계획을 갖고 포토샵을 잡습니다. 엉망이 된 결과물을 얻기 전까지는…

글이 길어지는 관계로 다음 글에서 이어서 써볼까 합니다.

지난 글에서도 이야기했듯이 이번에는 레이아웃에 대한 태그 – header, aside, footer, section, article에 대해서 살펴보겠습니다. 백문이 불여일견이니 일단 아래에 있는 코드를 봅시다.

좌측은 html 소스 내용이고, 우측은 브라우저에 보여지는 모습입니다. 태그가 들어가고 내용이 들어가니 조금 복잡해보일 수 있지만, 이것을 계층 구조로 정리하면 아래와 같은 모습입니다.

  • header
  • div
    • section
      • h1
      • p
    • article
      • h2
      • p
  • aside
  • footer

꼭 문서 개요를 짜놓은것 같죠? 지난 번에도 이야기했지만 다시 한 번 강조하자면, html은 ‘웹 문서’를 작성하는 마크업 언어입니다. 브라우저에서 읽기 좋도록 문서를 작성하는 방법이죠.

재미있는 점은 h1이나 h2 태그는 글자가 다른 글자보다 굵고 크게 써있다는걸 알 수 있습니다. 기본적으로 제목으로 쓰이는 태그이기 때문이죠. 이렇게 태그마다 기본적으로 설정되어 있는 값들이 있지만, 우리는 이걸 CSS(Cascading Style Sheet)라는 것을 이용해서 변경해줄 수 있습니다.

이제는 CSS를 추가한 모습을 보여드리겠습니다. CSS에 h1 태그에 대해서 빨간색으로 칠하라고 써놓은 것 보이시나요? h1 { color: red; } 이런 식으로 대괄호로 묶은 곳 안에다가 color는 red(빨간색)이야 하고 정의해주는겁니다. 서술한 내용이 한줄이거나 여러줄로 작성할 경우 마지막 내용에는 ;(세미콜론)을 생략해도 되지만, 개인적으로는 가능하면 모두 적어주는 습관이 좋다고 생각합니다.

See the Pen
layout
by 배현기 (@illustudio)
on CodePen.

위의 태그는 header, section, article, aside, footer 태그를 각각 백그라운드 컬러를 지정해서 구분이 되도록 나눠준 상태입니다. 지난 번에 이야기했던 것처럼 위의 태그들 모두 block 속성을 기본적으로 갖고 있기때문에 가로폭을 100%씩 차지하고 있습니다.

그래서 층층히 쌓인 상태로 웹브라우저에 보여지는 것입니다. 우리가 원하는 웹 사이트의 모습은 컨텐츠가 무조건 아래로 나열되야할 경우도 있지만, 좌우로 나열되야 하는 경우도 있습니다. 이럴때도 역시 CSS를 이용해서 배치를 해줄 수 있는데, 이럴때는 좀 복잡한 문제들이 발생합니다. 보통 float를 이용해서 배치하는 경우가 많았지만, 요즘은 flex도 구형브라우저가 아니라면 사용할 수 있기때문에 점차 사용이 늘어나고 있습니다.

좀 더 진화한 방식의 grid라는 속성도 생겼지만, 익스플로러에서 지원하지 않는 문제로 우리나라에서는 모바일웹이 아니고서야 사용할 방법이 없습니다.  좋은 기능이 나와도 쓸 수 없다는건  무척 아쉬운 부분이죠.

이번 글에서는 대략적으로 레이아웃에 대한 태그 – main이라던지 nav와 같은 태그들도 있지만, 문서의 얼개를 구현해 줄 수 있는 태그들을 이야기하며 css에 대한 간단한 소개도 선보였습니다.

 

최근 아이패드에서도 포토샵이 구동되도록 변하면서 소소한 변화가 있네요. 오늘 새롭게 버전업된 포토샵 CC 2019 (V.20)으로 갈아타고 작업하면서 가장 황당했던 상황이 바로 자유변형툴이었습니다. 상당히 자주 쓰는 툴인데, 보통 단축키 CTRL + T를 누른다음 Shift(고정된 비율로 제어하기)를 누르고 제어하는게 통상적인 패턴입니다. 그런데 이게 shift를 누르고 조작하니 막 이미지가 고정비율이 아닌 자유로운 비율로 막  찌그러지는겁니다(?)

뭔 일인가해서 검색해보니 위의 링크와 같이 이슈로 기록되어있네요. 이제는 기본적으로 Shift를 누르지 않고 제어해야 고정비율로 움직이고, shift를 누르면 자유로운 비율로 제어가 되도록 바뀌었습니다. 일일이 shift를 누르지않아도 된다는 생각으로 바꾼 모양인데, 저 처럼 오랜세월 동안 포토샵을 사용해 온 사람들에게는 습관을 뜯어고치라는 이야기라, 굉장히 불만스러운 내용이 아닐 수 없네요.

대부분 정비율로 움직이는 작업이 많으니 나름 합리적인 변화이긴합니다만, 그래도 영 달갑지 않은 이유는 몸에 밴 것들을 뜯어고쳐야한다는 부담감때문이겠죠? ㅎㅎ

포토샵

포토샵은 이미 많은 분들에게 알려진대로 사진 편집 및 보정, 디자인, 일러스트레이션, 합성 등 다양한 분야에서 활용되고 있는 그래픽 소프트웨어입니다.

포토샵은 그래픽에 대한 만능도구처럼 다양한 기능이 존재합니다. 하지만 전문가들도 포토샵에 있는 모든 기능을 모두 활용하지는 않습니다. 본인의 업무에 필요한 도구들 이외에는 거의 사용할 일이 없기 때문이죠.

포토샵

그래서 포토샵을 막연하게 잘 하고 싶다고 하면 더 없이 어려워질 수 밖에 없습니다. 합성, 사진, 디자인, 일러스트레이션 등 모든 분야를 다룰 것이라는 이야기와 마찬가지이기 때문입니다.

실제로 그렇게 일하는 사람은 없다고 봐도 무방합니다. 한 분야에서 전문성을 인정받기도 어려운 세상에 모든 분야를 다 잘한다는것은 불가능에 가깝죠.

그래서 일단 당장 필요한 것을 익히면서 포토샵이라는 도구에 겁을 내지 않도록 친해지는 것이 가장 중요합니다. 나머지 기능은 필요없거나, 필요하면 나중에 배워도 무방한 것들이기 때문이죠.

지금도 어도비에서는 소소한 업데이트를 통해서 포토샵에 기능을 추가하고 있습니다. 이 모든 기능을 모두 마스터한 다음 포토샵을 사용하겠다고 하면, 아무래도 무척 오랜 시간이 필요할 겁니다.

시작은 가벼울 수록 좋습니다. 모든걸 다 짊어지고 가려고 마음먹으면 한 걸음도 딛을 수 없기 때문입니다. 쉬운  것부터 – 따라할 수 있는 것 부터- 시작하면 됩니다.

포토샵 버전도 크게 개의치마세요. 기초적인 기능의 대부분은 CS3 이후로 크게 변하지 않았습니다. 물론 가능하면 최신버전일 수록 좋습니다. 최신 버전은 번거러운 일을 쉽게 해결할 수 있도록 기능을 개선하고 있기 때문입니다.

앞으로 짬짬히 포토샵에 대한 내용을 포스팅할 예정입니다.