어떤 산업에서든 특수한 용어jargon를 사용한다. 때에 따라서는 자체 고유의 언어가 있을 때도 있다. 웹 디자인계에서도 매우 많은 특수 용어를 쓴다. 절반 정도는 겉만 그럴 듯한 별 의미 없는 업무 용어를 뜻하지만 말이다. 이렇게 고유한 언어를 만드는 과정이 어이없을 때도 있지만, 특수 용어는 나름 중요한 역할을 한다. 디자이너나 개발자들과 효율적으로 의사소통을 할 수 있는 것이다.
어떤 개념을 처음 떠올린 사람이 이를 지칭하는 용어를 만든다. 반응형 웹 디자인Responsive Web Design도 그렇게 만들어졌다(아닌 게 아니라 이단 마콧Ethan Marcotte만 생각하면 지금도 머리가 지끈거린다. 반응형 웹 디자인은 좋다고 생각한다. 하지만 한동안 나에게는 골칫거리였다). 그리고 때로는 이미 오래 전부터 잘 사용하고 있던 것에 누군가 이름을 붙이는 경우도 있다. 웹 2.0이 그런 경우다.
본질의 웹 디자인Intrinsic Web Design은 후자에 속한다(고맙게도 젠 시몬스Jen Simmons가 만든 용어다). 이미 이 방식으로 웹 디자인을 하고 있었지만 이제서야 이름을 붙이게 됐다. 본질의 웹 디자인은 향후 웹 디자인계의 주요 논제가 될 것이라서 이 개념을 간단히 소개해보려고 한다.
본질의 웹 디자인이란
본질의 웹 디자인은 플렉스박스flexbox, CSS 그리드CSS Grid 모듈과 함께 시작됐다. 테이블을 사용해 레이아웃을 만드는 것이 그다지 효율적이지 않음을 알게 된 후에는 float 속성에 absolute나 fixed 위치를 적절히 섞어서 여러 요소를 원하는 위치에 자유롭게 배치했다. 잘 동작하긴 했지만 따지고 보면 편법에 가까웠다.
사실 그것만이 아니다. 나중에는 여러 편법을 모아서 CSS 프레임워크도 만들었다. 그 다음에는 몇몇 매우 나쁜 사람들이 자바스크립트를 사용해서 편법으로 가득한 CSS를 작성했다. 거의 모든 웹은 그렇게 편법 덩어리 프론트엔드 코드로 만들어졌다. 한마디로 엉망진창이 된 것이다.
기존 작업자들이 이룬 결과물을 비판하려는 게 아니다. 당시 원하는 레이아웃을 만들기 위해서는 편법을 사용할 수밖에 없었다. 다른 선택지가 없었다. 하지만 지금은 다르다. 이제 CSS에는 플렉스박스와 CSS 그리드라는 레이아웃 제작 방식이 포함됐다. 그러니까 매개체인 CSS에 플렉스박스와 CSS 그리드가 ‘탑재intrinsic‘돼 있다는 말이다.
이해했는가? 앞서 언급한 CSS 모듈은 시작일 뿐이다. CSS는 그 어떤 편법도 사용하지 않고 자바스크립트 도움 없이도 우리가 원하는 디자인을 정확하게 만들고 배치할 수 있는 도구로 진화하고 있다. 편법과 속임수, 외부 라이브러리 의존성을 최대한 줄이면서 우리가 원하는 디자인을 만들 수 있는 것은 본질의 웹 디자인의 핵심이다.
이 용어를 만든 젠 시몬스 의견을 인용해본다.
저는 지금 레이아웃, 그러니까 레이아웃 그 자체와 그래픽 디자인 그 자체가 너무 많이 바뀌어서 ‘아, 그래. 그거 새로운 개념이지’라고 부를 수 있는 새로운 용어가 필요하다고 말하는 거예요. 그 새로운 개념에 CSS 그리드가 포함되긴 하지만 CSS 그리드가 전부는 아닙니다. 사용 중인 플렉스박스에 대해서도 만들어진 목적을 다시 생각해보자는 의미도 담고 있습니다.
그뿐 아니라 float, CSS shape, object-fit, 콘텐츠 흐름, 다중 칼럼과 같은 요소도 일부 포함합니다. 이중 몇몇은 오래된 기술이고 오랫동안 사용해왔습니다. 하지만 레이아웃 전체 시스템은 물론 이 모든 기술의 새로운 조합 방식도 생각해보자는 겁니다.
이에 대해 다르게 표현하면, 예전에는 CSS 때문에 못하는 일이 많았지만 이제 CSS 덕분에 할 수 있는 일이 많아졌다는 것을 말하는 것이다. 이전에는 보지 못했던 새로운 가능성의 문이 열린 것이다.
누가 창안한 용어인가
젠 시몬스다. 그녀는 CERN, W3C, 구글, 드루팔, 그 외 작은 기업에서 일한 디자이너이자 프론트엔드 개발자다. 현재 모질라재단에서 디자이너 대변자Designer Advocate로 활동하며 여러 컨퍼런스에서 강연하고 있다. 웹 어헤드The Web Ahead라는 인터넷의 미래를 주제로 하는 팟캐스트 제작과 진행도 맡고 있다. 유튜브에는 레이아웃 랜드Layout Land라는 채널을 운영하고 있다. 플렉스박스, CSS 그리드를 비롯한 본질의 웹 디자인의 다른 구성 요소에 대해 배우고 싶다면 유용할 것이다. 앞서 인용한 젠 시몬스의 인터뷰도 볼 수 있다. 이 인터뷰에서 젠 시몬스는 제프리 젤드먼Jeffrey Zeldman과 함께 본질적 웹 디자인을 비롯한 다양한 주제에 관해 의견을 나눈다.
새 시대가 시작된다Entering a New Era
분위기는 점점 더 달아오를 것이다. 디자이너들이 이런 개념에 열광하며 기존 레이아웃 제작 방식에 플렉스박스와 CSS 그리드를 결합하여 만들 수 있는 것을 고민하기 시작했기 때문이다. 레이아웃에 관한 새로운 아이디어가 폭발적으로 증가할 건 분명하다. 적어도 정제된 아이디어가 많이 쏟아져 나올 것이다. 이후 자바스크립트 진영까지 참여하게 된다면 웹 디자인계는 정말 흥미진진해지리라 생각한다.
특히 코더가 아니라면 본질적 웹 디자인의 추이에 주의를 기울여야 한다. 본질적 웹 디자인은 지금도 그렇듯이 앞으로도 웹의 가능성에 변화를 가져올 것이다. 이미지 도구를 사용하는 UI 디자이너든 아트 디렉터든 본질적 웹 디자인 기술이 어떤 일을 할 수 있는지 반드시 살펴봐야 한다. 동료 중에 프론트엔드 개발자가 무엇을 할 수 있는지 알아두면 본인의 일을 더 쉽게 해결하는 데 도움이 될 것이다. 프론트엔드 개발자들은 앞으로 말도 안 되는 작업을 요청할 텐데, 그것이 무엇인지 여러분도 알아야 할 것이다.
레이철 앤드루의 신간 『새로운 CSS 레이아웃』
그리드를 사용한 레이아웃을 기존 레이아웃과 비교해서 살펴볼 수 있습니다. 예제를 통해 그리드 레이아웃이 어떻게 활용되는지 확인해보세요. 레이아웃만을 다룬 ‘그리드 레이아웃’ 전문서 『새로운 CSS 레이아웃』입니다. 새로운 웹 디자인 시대 흐름에 뒤처지지 않으려면 이 책을 꼭 읽어야 합니다!!
books@webactually.com