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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

그렇다면 웹디자이너가 되기 위해서는 무엇을 공부해야할까요? 늘 그렇듯이 사람들이 떠올리는 건 포토샵입니다. 디자인 직군에서 포토샵을 빼놓고 이야기할 수는 없겠죠. 웹에서 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에 대한 간단한 소개도 선보였습니다.

 

HTML 문서에 나오는 많은 태그들 중에 body 영역에 쓰이는 태그들은 크게 두가지 성격으로 나눌 수 있습니다. 바로 블록과 인라인이라는 속성인데, 아래 예시를 한 번 보겠습니다.

See the Pen
블록과 인라인 차이
by 배현기 (@illustudio)
on CodePen.

일부러 눈에 잘띄게 블록 속성의 태그에는 빨간테두리를, 인라인 속성의 태그에는 초록색 테두리를 둘러주었습니다. 별다른 설정을 하지 않아도, 블록(block) 속성을 가진 태그는 무조건 욕심껏 가로로 100%의 공간을 다 차지합니다. 하지만 인라인(inline) 속성을 가진 태그는 딱 내용이 필요한만큼만 영역을 차지하고, 옆 공간을 다른 태그에게 양보해줍니다.

여기서 착각해서는 안되는 점이 있습니다. inline 속성의 태그를 block 속성의 태그 옆에 붙여주면, inline은 양보를 잘하니까 그대로 옆에 붙어있지 않을까? 라고 생각 할 수 있는데, 절대 그렇지 않습니다. block은 욕심껏 무조건 100%를 차지하기때문에 inline을 무시하고 무조건 100% 다 가로폭을 차지합니다.

블록과 인라인은 레이아웃을 구성할때 무척 중요한 개념입니다.

여기서 재미있는 점이 하나 있는데, CSS를 이용하면 Block의 성격을 inline으로 , inline을 Block으로 바꿔줄 수 있습니다. 사람 성격은 쉽게 못 바꿔도, 태그의 성격은 쉽게 바꿀 수 있습니다. 그렇다면 왜 태그를 굳이 성격을 정해놓고 만들었느냐 싶은 생각도 들 수 있을 겁니다.

각 태그들은 이름에서 의미를 찾아볼 수 있습니다. 위의 예시에서 보여준 div, p, span의 이름은 각각 Division, Paragraph, Span에서 유래됐다고 볼 수도 있는데 – 정확한 네이밍에 대해서는 의견이 분분하더군요. 각각 영역을 분할(division)하고, 문단(Paragraph)으로 나누고, 컨텐츠 내용에 따라서 자유롭게 늘어나고 줄어든다(span)는 의미에서 이름을 지어놓은 것들입니다. 그래서 태그 성격상 100% 다 공간을 차지해야하는 태그와 그렇지 않은 태그로 나누었다고 생각해볼 수 있습니다. 어차피 초창기 HTML문서에 대한 규약은 요즘처럼 화려한 레이아웃을 염두에 두고 만든게 아니었기 때문이죠.

과거 html4 시절만해도 이런 태그 이름의 의미에 대해서 크게 주목받지 못했습니다. 오래전에 html을 배우신 분들은 table로 레이아웃을 잡던 것이 익숙할 겁니다. 하지만 검색엔진이 점점 적절한 의미대로 구조를 갖춰 작성된 웹 문서를 선호하는 알고리즘으로 변화하면서 이런 태그들의 이름과 역할대로 쓰여지는 의미론적 접근이 중요해졌지요.

그러면서 레이아웃을 구성하는 header, aside, section, article, footer 태그들이 새로 나오게 됐습니다. 다음 글에서는 이것들에 대해서 대략적으로 흝어보겠습니다.

HTML의 가장 기본적인 시작 구조

HTML은 기본적으로 이런 모양새를 갖고 있습니다. 가장 눈에 띄는 특징은 <html> </html> 이라는 구조인데요. <html>은 여는 부분 </html>은 닫는 부분입니다. html 문서의 요소들은 보통 “태그”라고 불리는데, 태그는 반드시 열었으면 꼭 닫아줘야합니다.

태그는 마지막에  닫아 주는게 중요합니다.

html문서는 저렇게 <html>로 열어서 </html>로 닫아주는 것이 일반적입니다.  그리고 html 안에는 꼭 들어가야하는 두가지 요소가 또 있습니다.

바로 head와 body인데요. head는 문서의 정보들이 들어갑니다. 누가 작성했으며, 어떤 규칙들을 적용할 것인지 미리 적어주는 곳입니다. SEO(검색엔진최적화)에 필요한 내용들도 대부분 head부분에서 작성되는 것들이 많습니다.

HEAD 태그는 이 문서가 어떤 문서인지 소개합니다

head는 주로 브라우저 화면상에서는 보이지 않지만 이 문서가 동작하거나 수행해야할 역할에 대해서 명시합니다. 그리고 body는 본격적으로 눈에 띄는 부분들을 작성해줍니다.

<!DOCTYPE html>이란 부분은 이 문서가  html5로 작성되었다는 것을 알려주는 부분입니다. html4 문법을 사용할때는 좀 더 많은 내용이 필요하지만 최근은 거의 대부분 html5를 사용하기 때문에 여기서는 가볍게 넘어가겠습니다.

태그에는 속성이란게 존재합니다

다른 태그들과 다르게 html 태그를 보면 lang=”ko”라는 부분이 보입니다. 이것을 속성이라고 부르는데, html 태그 속성 중에는 lang이라는 속성이 있습니다. 이름에서도 유추할 수 있듯이 language(언어) 속성인데, 이 문서가 “ko” 즉 한국어로 작성되었다는 이야기입니다. 영어권 문서로 작성할 경우엔 “en”이라고 작성해줍니다.

태그는 중복해서 여러번 쓰일 수 있습니다

이번엔 head부분에 더 많은 내용이 들어가 있죠? 먼저 meta 태그를 보겠습니다. 현재는 3번에 걸쳐서 쓰이고 있습니다만 더 내용이 필요하면 반복해서 쓸 수 있습니다. 그리고 다른 태그와 달리 meta 태그의 특징은 닫는 태그가 없습니다! 아까 강조하기를 반드시 태그는 닫는 태그가 필요하다고해놓고 처음 소개하는 태그부터 닫질 않는 태그를 소개하게 됐네요. 세상엔 항상 이렇게 예외라는게 존재합니다.

하지만 반드시 꼭 지켜줘야하는 것은 html, head, body 이 세가지 태그는 딱 한번씩만 쓰여야합니다. 중복해서 쓰면 안되요!

meta 태그에 대한 것은 처음 익히는 현재는 중요하지 않으니 그냥 넘어가도 되는 부분입니다. 나중에 알아도 되는 부분들이니 차츰 다음에 알아보도록 하죠.

title 태그는 문서의 타이틀을 알려줍니다

title 태그는 말 그대로 문서의 타이틀이 보여지는 부분입니다.

title 태그에 입력한 내용은 위의 이미지에서 보이듯 탭에 쓰여집니다. 문서 자체에는 아무 내용이 보이지 않지만, 맨 상단에 쓰여진 “Document”라는 내용이 바로 title에 입력된 내용입니다.

이렇게 title 태그 안에 내용을 문서 타이틀이라고 바꿔 적으면 브라우저에서도 아래와 같이 변합니다.

사실 title 태그는 사용자 입장에서 눈에 잘 띄는 곳이 아니다보니 보통 상호명을 적는 경우가 많은데, html 문서가 “웹문서”라는 것을 생각해보면 문서의 제목이 달려야하는 것이 맞습니다. title은 문서의 타이틀이 이런거다 하고 알려주는 역할을 합니다. 누구에게? 바로 검색엔진입니다.

검색엔진이 문서를 수집해갈 때 문서의 제목을 바로 이 부분에서 가져가기 때문이죠. 그렇다고 너무 욕심내서 많은 내용을 넣어선 안됩니다. 대략 40자 이하로 작성하는 것이 가장 좋습니다.

오늘은 이쯤 하고 다음엔 body 태그에 들어갈 내용들을 본격적으로 작성해보겠습니다.

관련글