닮은 웹사이트가 양산된 듯 나타나는 이유는 무엇인가?
인터넷은 상상력 부재로 몸살을 앓고 있고
*출처 및 작품 보기(클릭)
Boris Müller
Oct 30
오늘날의 인터넷은 김빠진 콜라와 같다. 모든 것이 동일하게 보인다: 평범한 폰트, 무언가를 전함이 없는 레이아웃, 어떤 메뉴에 집어넣어도 튀지 않는 페이지들(interchangeable pages), 그리고 표정이 보이는 시각적 언어의 부재. 심지어 마이크로 타이포그래피(micro-typography; 단어 혹은 문자 수준의 타이포그래피) 조차 난잡(mess) 하다.
오늘날의 웹 디자인은 창의성과 아이디어보다 오히려 기술적이고 이데올로기적 한계에 의해 주도되는 것처럼 보인다. 모든 페이지가 컨테이너 안의 컨테이너 안의 컨테이너로 구성되어 있다. 때때로 텍스트와 이미지로 구성되기도 한다. 진실되게 디자인된 것은 없고 단지 디자인된 것처럼 꾸미고 있을 뿐이다.
아이러니한 것은, 오늘날의 웹 기술은 엄청난 디자인 능력을 보유하고 있다. 우리는 상상할 수 있는 거의 모든 아이디어 및 레이아웃을 구현할 능력을 보유하고 있다. 우리는 급진적이고, 놀라우며, 기억을 떠올리게 하는 웹 사이트를 창조할 수 있다. 우리는 실험적인 타이포그래피를 생성력 있는 이미지(generative images) 및 상호작용의 경험(interactive experience)과 결합할 수 있다.
그럼에도 불구하고, 디자이너용 웹 사이트조차 컨테이너 안의 컨테이너 안의 컨테이너에 기반을 두고 있다. 웹상의 창조성에 있어서 Dribbble과 Bechance 같은 대부분의 유명 포털은 근본적으로 지루한 디자인을 가지고 있으며, 기본적으로 그 포털은 대체 가능하다.
어떻게 이렇게 된 것인가?
여기엔 몇 가지 원인이 있다. CMS(Contents Management system) 같은 기술 기반 프레임웍과 WordPress 같은 블로깅 플랫폼은 템플릿을 기반으로 작동한다. 이런 프레임웍에 기반을 둔 웹 페이지들은 개별적으로 제작되지 못하지만, 이미지, 헤드라인, 본문 텍스트, 그리고 영상 같은 다양한 유형의 미디어를 한꺼번에 꾀어 상황에 맞게 페이지를 생성한다. 템플릿에 찍어내는 것을 디자인이라 할 수 없다. 오히려 규칙이라 할 것이다. 관련 데이터 유형들을 결합하는 규칙. 이들 플랫폼은 대부분 템플릿의 범위를 넘어 페이지의 시각적 외관에 영향을 줄 방법을 사용자에게 제공하지 못한다. 우리가 보는 것은 템플릿이란 거푸집 안에 컨텐츠를 부어 넣어 찍어낸 것이다.
다시 말해서, 템플릿이란, 컨텐츠 불가지론자(content agnostic)이라 하겠다. 그리고 그것이 문제의 핵심이다.
디자인 근본 원칙 중 하나는 형태와 내용의 깊이 있고 의미 있는 연결이다. 형태는 내용을 반영하고 모양을 형성해야 한다. 내용과 형태를 분리하는 것은 이 원칙을 깨는 것이고 통칭 컨텐츠 컨테이너를 생성 시킨다. 디자인적 감각에서 템플릿은 의미하는 바가 없음(meaningless)을 가리킨다. 형태가 내용에 아무것도 추가하지 않음을 의미한다.
웹 디자이너에게 창의력이 없는 데는 다른 이유들도 있다. 그들 대부분이 경제적이며 실용주의적이다. 예를 들면, 페이지를 각각 디자인하는 것은 시간 소비적이라는 사고방식이다. 온라인 뉴스의 속도와 새로운 기사의 발생 빈도를 고려하면, 거대 웹 사이트에는 바닥부터 페이지를 디자인할 자원을 없다. 게다가, 웹 디자인은 여전히 기술 전문가의 영역이다. HTML, 자바 스크립트, 그리고 CSS는 디자이너에게 도전해야 할 도구들로 남아 있다. 데스크탑 퍼블리싱 애플리케이션의 직접적이고 협력적 웍플로우와 동일한 웹 디자인 작업은 없다.
디자이너의 창의적이고 지적인 게으름도 책임이 있다 생각한다. 모바일 우선의, 널리 사용될 수 있는, 프레임웍 주도적 개발의 시대에서, 웹 페이지의 시각적이고 맥락적인 무결성에 신경 쓰는 사람은 없어 보인다.
이러한 문제와 어떻게 싸울 수 있을까? 오늘날 생각과 감정을 표현하고 아방가르드적인 웹 사이트는 무엇처럼 보일까? 때때로, 미래를 디자인하고자 한다면, 당신은 과거를 재발견해야 할 것이다.
레트로 웹 디자인
내가 처음 웹 사이트를 디자인한 것은 23년 전 독일 브레멘에 소재한 예술 대학의 R&D 그룹에서였다. 웹 페이지를 창작하는 일은 당시만 해도 핫한 분야였다. 웹은 젊었고 페이지 위에서 나의 상상력은 불꽃을 발했다.
90년대 중반, 우리는 HTML의 한계에 부딪혀 있었다. 우리는 오직 Arial, Times, 혹은 Verdana 같이 웹에서 문제를 일으키지 않을 폰트만 사용할 수 있었다. 우리는 흥분되는 것을 행하고자 할 경우 테이블 레이아웃, 각 문자의 간격이 동일한 폰트, 혹은 GIF를 활용해야 했다. HTML은 초기에 순수하게 컨텐트 중심이었고, 우리는 페이지 디자인을 위해 기술에 반하도록 작업해야 했다.
이러는 와중에 실험적 타이포그래피가 폭발적으로 증가했다. 1920년대의 Jan Tschichold의 Die Neue Typographie부터 1980년대 April Greiman의 컴퓨터 중심의 레이아웃에 이르기까지, 디자이너들은 현 상황에 머물지 않고 아이디어와 자신의 시대의 혁명을 표현하는 시각적 언어를 찾으려고 노력했다. 1990년대 중반까지, 기술 진보와 문화 진보의 비 상식적 결합이 매우 급진적 유형의 그래픽 디자인을 낳았다. 당신은 Irma Boom, David Carson, Paula Scher, Neville Brody 등 많은 사람들의 작품에서 이것을 볼 수 있었을 것이다.
하지만, 그래픽 디자인계의 눈에 보이는 폭발적 발전에 비해, 초기 웹 페이지는 여전히 변변히 않았다. (웹 디자인 박물관이 이러한 상황을 매우 잘 문서화하고 있다.)
우리는 브라우저에서 볼 수 있는 그래픽 디자인을 하고 싶었지만, 누구도 그 방법 혹은 어떤 실수가 있었는지 알지 못했다, 웹 페이지가 어떻게 보여야 할지에 관한 기대는 없었다. 표준도 없었다. CMS(거의 비슷한 수준), CSS, JS, 영상, 그리고 애니메이션도 없었다.
세월은 빨라 2018년에 도달하니, 우리가 브라우저 안에서 모든 것을 할 수 있게 됐다. 대규모 레이아웃부터 마이크로 타이포그래피, 애니메이션, 그리고 영상까지. 이렇게 놀라운 가능성들을 사용해 우리는 무엇을 하고 있나? 컨테이너 안의 컨테이너 안의 컨테이너. 기가바이트급 단조로운 모바일 우선 페이지들은 자바 스크립트로 오염됐다. 동일한 시각적 규칙을 따르는 범용적 템플릿. 어린 내가 23년이 지난 지금 지금의 웹 디자인 상태를 보았다면, 매우 실망했을 것이다.
웹 디자인의 문제는 기술의 한계에 있지 않고 상상의 한계에 있다. 시각적 관습에의 순응, 경제적 실행가능성, 그리고 상정된 기대치에 너무 복종해 왔다.
하지만 위기가 기회를 만든다. 이제는 인터넷의 시각적 관습에의 순응에 반기를 들 때이다. 아 슬프다. 나는 너무 늙었고, 너무 속물적이라, 급격히 흐르고, 실험적이며, 첨단의 웹 디자인 접근법을 만들어낼 수 없다. 하지만 난 그 실현을 나의 학생들에게 요청할 수는 있다.
2017년, 나는 독일 포츠담에 소재한 Interface Design Programme에서 웹 디자인 수업을 하고 있었다. 각 팀에 기존 웹 사이트를 재 디자인하여 제시하라고 요청했다. 과제는 매우 명확했다: 웹 브라우저를 비어 있는 캔버스라 생각하고 인상적이고 상상력 있는 시각적 경험을 참조한다. 창조성의 한 채널로서 현행 웹 기술의 기술적 가능성을 활용한다. 사용성, 가독성, 그리고 유연성이 있는지에 제약받지 않는다. 불평은 용납 못한다. 사용자 기대에 부합한다는 생각은 버린다.
난 학생들이 내놓은 결과를 보고 너무 행복했다. (당신도 이 페이지에서 모든 결과를 볼 수 있다.) 여기 남다른 접근법을 보여준 4 가지 작품을 소개한다.
1. Frederic Haase와 Jonas Köpfer 작 ZKM
Frederic과 Jonas는 자신의 실험과 탐험의 출발점으로 ZKM(the Zentrum für Kunst und Medien)의 웹 사이트를 선택했다. ZKM에 적합한 선택인 것은, 이곳이 독일의 미디어 아트를 위한 가장 유명한 전시 공간 중 하나라는 점이지만, ZKM의 웹 사이트는 매우 틀에 박힌 모습을 하고 있다. 이 사이트는 기능성이 있지만 전시회의 예술작품을 전달하는 아방가르드적 주장이 부족하다.
Frederic과 Jonas의 목표는 박물관의 전위적 접근법을 표현하는 ZKM 사이트를 만들기 위해 컨셉, 시각적 언어, 그리고 기술적 설정을 디자인하는 것이었다. 그들이 내세운 컨셉의 핵심에는 생성적 디자인 엔진(generative design engine)이 위치하고 있다: 페이지가 로드될 때마다, 새로운 레이아웃이 생성된다는 것이다.
2. Daria Thies, Bela Kurek, 그리고 Lucas Vogel 작 Streem
Stream은 예술과 거리를 다루는 잡지이다. 이 잡지는 떠오르는 예술가들의 무대이자 사회 문제의 플랫폼 역할을 하고 있다. Stream에는 일러스트레이션, 회화, 사진, 디자인, 저술, 그리고 저널리즘의 작품들이 수록된다. Daria, Bela, 그리고 Lucas는 이 다양한 분야를 결합하였고, 개념적 도시 구조를 디자인 기반으로 삼았다. 프로토타입을 만들기 위해, 그들은 이 잡지의 각 섹션을 표현하는 4가지 서로 다른 구역을 만들었다. 가독성 있는 도시를 창조하기 위해 공간 타이포그래피를 강력한 일러스트적 스타일과 결합하는 것이 그들의 접근법이다.
3. Amelie Kirchmeyer와 Fabian Schulz 작 Medium
Amelie와 Fabian의 접근법은 매우 구조적 접근법이었다. 특정 스토리에 맞는 형태를 찾는 대신, 웹 페이지를 분해하여 그것을 의미론적이고, 구문론적이고 통계적 속성에 따라 쪼개는 것이 그들의 목표였다. 그들의 아이디어는, HTML의 유동성과 내재적 유연성을 눈으로 보여주는 것이었다. 그들은 Medium 포스트들을 해체하고, 독자들이 텍스트의 긴 블럭을 실험적 타이포그래피 공간으로 분해할 수 있게 하는 환경을 창조했다.
4. Fabian Dinklage와 Florian Zia 작 Hacker
Fabian과 Florian은 Hacker News를 상호작용적 시각화 사이트로 변화 시켰다. 이 소셜 미디어 사이트는 뉴스 애그리게이터로, 컴퓨터 공학과 정보 기술에 초점을 맞추고 있다. 이 사이트는 디자인된 웹 사이트라 할 것도 없지만, 투표 및 토론에 맞는 복잡한 기능성을 가지고 있다. Fabian과 Florian은 기존 구조를 취해서 그것을 타임라인과 네트워크의 타이포그래피 공간으로 전환 시켰다. 이러한 시각적 표현은 뉴스 및 댓글의 순서(sequence)와 연결하는 것에 기반을 두고 있다. 또한 그들은 자신의 디자인을 Hackers News API에 연결해 놓아서, 사이트 내용을 읽는데 사용자가 그것을 사용할 수 있도록 했다.
David Carson은 언젠가 “커뮤니케이션과 가독성을 혼동하지 말라”라고 말했다. 우리는 이 조언을 오늘날의 웹 디자인에 적용해야 한다. 가독성, 가용성, 반응성, 그리고 특히 접근성은 현대 웹의 필수적 품질요소이다. 하지만 이러한 요소들이 시각적 표현을 정의하거나 제한해서는 안 된다. 만일 당신이 틀에 박힌 형태와 가용성을 동일시하고 있다면, 당신은 시각 디자인도 인간 중심의 디자인도 이해하고 있지 못하고 있다.
나 자신은 보다 급진적이고, 생성력 있으며, 연상력이 있고(evocative), 사려 깊으며, 적절하고, 컨텐트 중심적인, 지능적 웹 디자인을 보고 싶다. 나는 디자인 실험을 위한 장으로서 웹을 재발견하고 싶다. 나는 보다 자주 놀라고 싶다. 나는 앞으로 23년 후 웹이 어떤 모습이 될지 알지 못하지만, 오늘날과 같은 웹은 아닐 것이라 바라고 싶다.
