[Jason의 스타트업 디자인 이야기] 디자이너도 HTML/CSS를 배우는 이유

4월 20, 2017

에듀테크 스타트업 바풀의 디자이너 Jason Yoo가 블로그에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.

현시대의 디자이너에게 코드와 친해지는 일은 더 이상 유행이 아닌 미션이다. 이런 흐름에서 HTML/CSS 코딩을 개발자와 디자이너 중 누가 하는지의 문제도 낡은 논의가 되어버렸다. 그래서 요즘 디자이너들은 HTML/CSS에 큰 관심을 둔다. 강의도 많고, 스터디도 많다. 나도 스터디를 진행해본 경험이 여러 번 있다. 그런데 대부분은 HTML/CSS를 ‘왠지 알아야 되니까’, 또는 ‘스펙을 쌓아야 되니까’ 배우고 있었다. 맞는 말이다. 알아야 되고, 알아두면 스펙이 된다. 하지만 무엇이든 이유 없이 배우는 일은 정말 고생스럽다. 특히 < > / : ; 등의 기호를 보고 있자니 시력이 감퇴하는 느낌마저 든다. 그렇다면 왜 HTML/CSS를 배워야 할까 ?

디자인의 과거이자 현재

우리는 보통 글자에 밑줄을 긋기 위해 툴바의 [U]버튼을 클릭한다. 그런데 버튼을 누른 순간 컴퓨터가 실제로 한 일은 밑줄만큼의 픽셀을 칠한 게 아니라 밑줄로 규정한 코드를 입력한 것이다. HTML에서 글자를 <u></u> 코드로 감싼 것과 같은 원리다. 또한, 그래픽 툴의 모든 디자인 작업 과정도 코드로 이루어진다. 따라서 디자이너의 모든 디자인은 코드에서 발현한다. 이 대목에서 HTML이 중요한 이유는 앞서 밑줄을 긋기 위해 코드를 타이핑한 과정 때문이다. HTML에는 어떤 버튼이나 메뉴가 없다. 밑줄을 긋거나, 색을 칠하거나, 크기를 바꾸는 등 모든 작업 과정은 알파벳과 숫자, 기호를 이용한 코드로 이루어진다. 즉, HTML은 포토샵이나 스케치와 다르게 디자이너가 코드로 디자인할 수 있는 유일한 방법이다.

그렇다면 코드로 디자인하는 과정을 왜 배워야 하나. 바로 HTML이 웹디자인과 현시대의 모바일 앱 디자인을 관통하고 있기 때문이다. 예를 들어, iOS나 안드로이드 앱의 설정 페이지에서 흔하게 볼 수 있는 ‘스위치’도 HTML의 <input>을 모양만 다르게 표현한 것뿐이다. 이외에도 모바일 앱에서 볼 수 있는 거의 모든 페이지 구조와 그 안의 UI가 이미 HTML에 존재하고 있으며, HTML만으로도 구현할 수 있다. 그래서 HTML/CSS가 익숙하다면, 구글의 Material Design Guidelines나 애플의 Human Interface Guidelines는 전에 없던 새로운 것이 아니라 이미 알고 있는 것을 조금 개선한 참고 자료에 지나지 않게 된다.

구조로 보는 디자인

이야기는 플롯에서 시작하며, 디자인 역시 구조에서 시작한다. 사용자도 한눈에 보이는 페이지의 구조를 먼저 인지한 다음에 세부 콘텐츠를 소비한다. 그런데 포토샵이나 스케치에서 디자이너가 가장 먼저 하는 일은 아트보드를 만들고, 아트보드에 뭔가를 추가한 뒤 색상과 크기를 조정하는 일이다. 이런 과정에서 디자이너는 무엇보다 시각에 의존하게 되고, 시간이 갈수록 구조에 대해 고민하기 어렵게 된다.

하지만 HTML은 다르다. HTML에서 가장 먼저 하는 일은 코드를 이용해 눈에 보이지 않는 구조를 만드는 것이다. <div> 또는 <nav>, <header>, <section> 등을 이용해 페이지의 구획을 나누고 각 구획의 가변적 상황을 고려하며, 구획 내의 콘텐츠 그룹을 설정한 다음에야 뭔가를 추가하고 스타일링할 수 있게 된다. 특히 HTML에서 만든 구조는 그래픽툴과 다르게 바꾸기가 쉽지 않다. 심지어 코드를 처음부터 다시 짜게 되는 경우도 빈번하다. 이렇게 디자이너는 HTML을 통해 구조를 만들었다가 허물고 다시 고치는 훈련을 반복하게 된다. 그리고 이런 훈련은 HTML에서 나아가 리서치 과정에서 구조를 보는 습관, 실제 포토샵이나 스케치의 작업 과정에서 구조에 대해 고민하는 습관을 갖게 한다.

내 옆의 클라이언트 개발자가 내 디자인을 구현하면서 가장 먼저 하는 일은 구조를 만드는 것이다. 그런데 디자인 단계에서 가변적 상황을 최대한 고려하고 각 콘텐츠 그룹이 되도록 명확한 구조를 만들었을 때, 개발자는 구조에 대한 고민이나 충돌 없이 바로 다음 작업을 시작할 수 있다. 또한, 한 장의 이미지 파일이라도 명확한 구조가 보인다면, 따로 복잡한 프로토타입을 만드는 수고를 덜 수 있다. 결국, 구조에 대한 훈련은 디자인 적용을 포함한 개발 일정을 단축하는 효과도 있다.

Design → Production

디자이너가 HTML을 배우는 이유는 단지 무기 하나를 더 갖기 위함이 아니다. HTML은 이미 내가 가진 무기를 더 강하고 빠르게 만들어 준다. 디자이너는 HTML을 통해 웹과 모바일, IT디자인의 과거와 현재를 지배하는 규칙을 알게 되고, 나의 디자인을 보다 구조적인 관점에서 볼 수 있게 된다. 즉, HTML은 디자이너가 Design을 보다 Production의 관점에서 고민하고, 문제를 찾아 해결할 수 있는 훈련 과정이다. 이 훈련을 통해 디자이너는 실무 과정에서 더 이른 시간에 더 나은 결과물을 만들 수 있게 된다.

나는 언제부턴가 웹사이트를 디자인할 때 그래픽 툴을 거의 사용하지 않게 되었다. 물론 컨셉에 대한 논의를 위해 한두 페이지 정도를 이미지로 만들어 팀원들과 공유하지만, 이후의 모든 작업 과정은 HTML/CSS로 진행한다. 이런 과정을 통해 페이지의 구조와 각 페이지 간의 연결을 비주얼과 동시에 고민하며 일할 수 있게 되었다.

이제 내 디자인을 HTML로 구현하는 연습을 해보자. 웹표준, HTML5, jQuery 등은 당장 몰라도 된다. 각 HTML 태그의 기본적인 특성을 파악한 뒤, 코드를 통해 페이지의 구조를 만들고, 기본적인 CSS를 만져보는 것으로도 충분하다. 그리고 HTML/CSS는 ‘소스 보기’라는 최고의 선생님이 항시 대기하고 있다.