전에 쓰던 블로그가 폐허로 변한 상황이라 옮겨옵니다.

본 포스팅은 저작자의 허락을 받아 번역한 글입니다. 링크를 제외하고, 일부 혹은 전부를 전재할 시에는 출처를 표기해 주시면 감사하겠습니다.

원문링크

Dear Web Designer

꽤 오래전부터 웹 디자인이란 무엇인가, 웹 디자이너란 어떠해야 하는가에 대해 생각해 왔습니다.

우선 제가 어떤 이력을 갖게 있는지 말씀드린 후 이것에 대해 이야기해보도록 하겠습니다. 저는 DTP 디자이너로서 1년 반 정도를 지냈고, 그 후 웹 디자이너, 마크업 엔지니어를 거쳐 프론트엔드 엔지니어가 되었습니다. 코드 작성에 흥미를 갖기 시작한 후 포지션을 바꿔가며 일 해온지 벌써 10년이는 세월이 흘렀군요. 최근에는 프리랜서로 모 스타트업 웹 서비스의 디자인과 HTML, CSS, Javascript 영역에서 분투중입니다.

여기서 말씀드리는 내용은 ‘웹 서비스에서의 디자인’에 편중된 이야기입니다만, 기업의 사이트나 랜딩 페이지 등에도 적용될 수 있는 내용일 것이라 생각합니다.

타이포그라피는 웹 디자인에 필요한가?

곧잘 웹 디자인에서는 타이포그라피를 자유롭게 적용하기 힘들다는 의견을 듣곤 합니다. 이런 불편함은 장래에 브라우저의 진화에 따라 충분히 개선될 여지가 있습니다. 하지만 DTP 디자인에서의 타이포그라피와 웹 디자인에서의 타이포그라피는 탄생한 시기도, 기대되는 역할도 완전히 다르기 때문에 DTP 디자인의 타이포그라피와 같은 방향성을 갖진 않을 것입니다.

활판인쇄의 역사에서 태어난 타이포그라피가 완전히 다른 세상인 웹에서 그대로 적용될 수 있을리 없습니다. 디자인의 기초는 오랜 역사를 갖는 DTP 디자인에 있다는 것은 충분히 알고 있습니다만, 어디까지나 기초를 두고 있을 뿐이기 때문에 웹에서의 타이포그라피의 의의에 대해서는 별도로 논의할 여지가 많다고 봅니다.

DTP 디자인

• 유저에게 어떤 시각적 도구를 통해 전달될 지 정해져 있다.
• 폰트의 종류와 크기가 유동적이지 않다
• 어떤 인쇄물이냐에 따라 다르지만 유저는 다양한 환경에서 이를 확인한다.

웹 디자인

• 유저에게 어떤 시각적 도구를 통해 전달될 지 정해져 있지 않다.
• 폰트의 종류나 크기가 환경에 따라 유동적으로 변한다.
• 유저는 다양한 환경에서 이를 확인한다.

좀더 예를 들수도 있지만 가장 큰 차이점으로 알아두시면 될 것은 이런 부분입니다. 문자의 간격이나 개행위치가 디바이스나 유저 환경에 의해 변화하기 때문에 고정된 디자인을 보증하기 어려운데, 문자들의 위치와 크기를 통제하기 위해 주력해야 할까요? 그것을 구현하기 위해 엔지니어의 공수를 투입한 만큼의 효과가 있을까요? 유저에게는 어떤 메리트가 있을까요? 무엇을 가지고 아름다운 타이포그라피라고 해야하는 걸까요?

저는 웹에서의 아름다운 타이포그라피란 다양한 환경에서 일정한 틀의 외양을 보증해 주는 것이라고 생각합니다. 다만 개행위치를 어떤 디바이스에서 보아도 같은 곳에서 하는 것이 아니라, 어디서 개행을 해야 그 디바이스에서 가장 읽기 쉬운가를 고려하는 것이 가장 중요합니다. 이런 것이 웹이 필요로하는 타이포그라피의 의의라고 생각합니다.

‘인쇄 디자인은 타이포그라피에 신경쓸 수 있으니까 좋아요’. 두번다시 이런 의견이나, 그럴때마다 보이는 자신감있는 표정은 보기 싫습니다. 애초에 그런식으로 비교하는 것이 잘못되었고, 부끄러운 일이라는 것을 하루빨리 깨닳았으면 합니다.

The New Typography

웹의 타이포그라피에 대해 재미있는 고찰이 있어서 소개해 봅니다. 웹 디자이너 중에서 타이포그라피가 좋아서 공부하시는 분들은 많습니다만, 그 차이와 한계에 대해서 깊이 생각하고 계시는 분들은 많지 않은것 같습니다.

범용성있는(재이용 가능한) 디자인이 왜 필요한가?

범용성 있는 디자인을 어려워하는 웹 디자이너가 많습니다. 실재로 프론트엔드 엔지니어를 하면서 범용성 있는 디자인 데이터를 받아본 적은 손에 꼽을 정도록 적습니다. 개성을 표현하기 힘들다느니, 심심한 디자인이 된다느니 듣고 있는 이쪽이 부끄러워 질것 같은 의견을 표명 하시는 분들이 계십니다만, 자신의 능력 없음을 그렇게 자랑스럽게 말씀하지 않으셔도 됩니다. 그 개성이라는 것은 유저에게 도움이 되는 것인가요? 무엇을 위해서 디자인을 하는 걸까요? 세상이 자신의 예술 세계를 이해하지 못한다며 열폭하고 있는 아티스트같은 발언은 안하느니만 못합니다.

범용성 있는 디자인을 하지 못하는 것은 아무것도 생각하고 있지 않기 때문입니다. 왜 필요한지에 대해 생각해 봅시다.

범용성이란?

Atomic Design by Brad Frost

상기한 링크는 우선 범용성에 대해서 좋은 자침이 될 것이라고 생각합니다. 컴포넌트의 원자화에 대한 가이드라인을 제시하는 내용입니다.

공통화된 부분을 조합해서 페이지를 구성하는 웹에서 필수라고 할 수 있는 디자인의 기초 지식입니다. 이러한 사고를 바탕으로 디자인이 된 후에야 비로서 코딩 가이드라인이라는 것을 만들 수 있습니다. 종종 휘황찬란한 디자인을 가지고와서 코딩가이드 라인을 만들어 달라고 하는 경우가 있는데 무리에요, 못합니다.

사이트를 제작하는데 있어서의 지침의 필요성

Atomic Design 에서도 언급하고 있습니다만 정보설계, 정보정리, 각 컨텐츠의 의미부여나 규칙제정 등 지침이라는 것이 필요합니다. 이것을 선정하는 것은 디자이너만의 일은 아닙니다만 디자이너가 중요한 역할을 담당하고 있는 것이 사실입니다. 애초에 디자인이라는 것은 이러한 것이 가능해야 탄생합니다. 이런저것 너무 어렵나요? 일 안하세요?

웹은 디자인하고 끝이 아니라 그 뒤에 기다리고 있는 사람이 있습니다

물론 DTP 디자인에도 인쇄회사에서 디자인 이후의 작업을 담당하는 사람들이 있습니다만, 웹과 비교하면 디자인이 그 뒤의 작업에 영향을 미치는 정도는 적습니다. 웹의 경우 코드를 작성하는 사람에 대해 고려하지 않거나, 의식조차 하지 않는 분들이 많은 것 같습니다. 그런 의식이 있다면 범용성을 갖춘 디자인이 올라올테니까요.

• 디자인에 범용성이 없다
• 코드에도 범용성이 없어 코드의 양이 증가한다
• 페이지에 표시속도가 느려지고 버그가 많아진다
• 범용성이 없이 때문에 이후 유지보수에 들어가는 코스트가 증가한다

디자인에 범용성이 없다면 기술적 부채가 시작부터 발생하며 이후 개발에도 악순환을 일으킵니다. 자신의 디자인이 이후 공수나 팀의 모티베이션에 큰 영향을 준다는 것을 명확하게 인식해 주셨으면 합니다. 버튼이나 리스트 디자인에 정합성이 있어야 기술적으로도 최적화가 가능하고, 유저도 사이트를 조작하는데 있어 학습 코스트가 낮아집니다. 모든 것이 좋아집니다. 그래도 어렵다고 어물쩡 넘어갈 수 있다고 생각하시나요?

DTP 디자인을 할 수 있다면 웹 디자인을 할 수 있다?

이것이야 말로 어리석음의 정점입니다. 디자인 툴을 잘 다룬다는 점에서는 긍정할 수 있을지 모르겠습다. 또 종종 웹 디자인이라는 분야를 낮게 보는 분들도 있습니다. 그런 분들을 디자이너라고 부를 수 있을까를 따지기 이전에 인간으로서 됨됨이부터 챙겨야 할 것입니다. 그런분들과는 친구는 둘째치고 같은 공간에 있고 싶지 않습니다. 공기 아까우니 숨쉬는 것도 자제바랍니다.

몇번이고 말씀드리지만 완전히 별개의 물건입니다. 각각 디자인의 의의가 다르고 필요로하는 능력도 대부분 다릅니다. 이게 같은 것이라고 생각하는 사람은 DTP와 WEB 모두 제대로 알지 못하고 있다는 사실을 자각하세요. 부탁합니다.

@jacob_usability | Twitter

웹 디자인이라고 하면 야곱 박사입니다만, 이분의 Twitter Bot을 개인적으로 좋아하기 때문에 소개해봅니다.

그외

이야기가 많이 샜습니다만 어려운 디자인을 마크업하는 것이 즐겁다고 하시는 분들도 있습니다. 이것도 이해하기 힘들군요. 노력해야할 대상을 잘못 찾고 계십니다. 프로로서 어려워도 마크업할 수 있는 능력을 갖주는 것은 당연한 일입니다. 이런분들에게는 어떤 말씀을 드려야 할지 아직도 결론을 내리지 못하고 있습니다.

정리

새로운 웹 디자인의 가능성을 모색할 수 없는 디자니어를 WWW는 필요로 하지 않는다.

이 한문장이 결론입니다.

저 자신의 이력을 적고 시작한 시점에서 이미 훌륭한 꼰대질을 한 것 같기도 합니다. 저 자신의 생각을 정리한 것이므로 다른 분들의 의견도 대환영합니다.