2018. 7. 5. 07:50ㆍUI 가벼운 이야기
어느 날, 저희 블로그 구독자분이 다음과 같은 방명록을 남겨 주셨습니다.
모자이크 브라우저(마크 안드리슨)를 보면서 생각이 들었습니다. '왜, 이런 486 시대에나 볼 수 있는 브라우저 디자인이 먼저 탄생했어야 했는가?
최근, 구글이나 기타 웹사이트 들을 보면 둥글둥글하고 매끄럽고 아기자기한 디자인이 사용된다는 느낌을 받습니다(개인적인생각). 앞서 말씀드린 모자이크 브라우저 같은것을 보면 뭔가 무뚝뚝하고 딱딱하고 투박한 느낌을 먼저 받습니다. 여기서, 왜 이런 순서로 디자인이 변해온것인지 궁금해집니다. 오히려 오늘날의 디자인이 옛것이고 시간이 지나면서 모자이크 브라우저같은 스타일이 오늘날로 업그레이드 될 수는 없었는지 괜한 생각이 들었습니다...ㅠ
물론, 이런 생각조차 이미 과거의 영향을 받았기 때문이라 생각이 듭니다.
왜 디자인은 과거의 것이 더 투박하고 더 딱딱하게 느껴질 수 밖에 없는것일까요; 아니면 이건 저만 느끼는 저만의 착각인걸까요...ㅠ? (디자인에 편견을 갖지 않는 안목을 가지고 싶습니다.)
To. 위 질문을 남겨 주신 '노트테이커' 님께
안녕하세요. 저희 피엑스디는 독자분이 남겨주신 방명록과 댓글에 최대한 답변을 드리려 노력하고 있습니다.
지난 6월, 이 질문을 보았을 때는 곧바로 답변을 드릴 수가 없었습니다. 과거의 투박해 보이는 디자인이 오늘날 둥글둥글하고 매끄러운 모습으로 변한 이유와 그러한 순서로 변한 이유에 대해서 딱 한 마디로 정리하기가 쉽지 않았기 때문입니다.
질문해 주신 포인트를 다시 곱씹어 보았습니다. '자연스러운 현상이 아닌가?' 또는, '일반화하기 어려운 주장이다.'와 같은 편견을 버리고 '왜 그런 느낌을 받게 되는가?'라는 점에서 다시 출발하여 다음과 같이 두 가지 주제로 정리해 보았습니다.
왜, 과거의 웹 디자인은 더 투박하고 딱딱해 보일까?
왜, 시간이 지나 둥글둥글하고 매끄러운 디자인으로 변해온 것일까?
마크 안드리슨의 모자이크 브라우저를 언급하셨기에 디스플레이를 매개로 삼는 웹/그래픽 디자인으로 범위를 좁혔습니다. 과거의 디자인은 투박하고 요즘은 매끄럽다는 점은 영역과 관점에 따라 전혀 다르게 주장할 수도 있겠지만, 질문자가 지적한 포인트 역시 충분히 공감됩니다. 그래서일까요? 이 질문에 대해 저희 피엑스디의 많은 분이 의견을 주었습니다. 그중에 몇 가지를 원문 그대로 소개해 드립니다.
1. 기술적 표현의 한계 때문이다
제 머릿속에 떠오르는 건 '기술적 표현의 한계' 때문인데요.
1. 디스플레이 해상도
90년대~2000년대 초반까지만해도 많이 사용되던 모니터 해상도가 800x600 ~ 1024x768 였는데 (...) 해상도가 낮으니 당연히 섬세한 표현이 어려웠던 것 같아요.
2. 드로잉툴의 불완전성
과거에 픽셀 찍어가며 이미지를 만들었던 건 픽셀작업이 재밌고 멋져서가 아니라 우선 툴이 그렇게 생겼기 때문인데요. 지금이야 포토샵에서 붓으로 찍은 점 가장자리 픽셀들이 투명+조정된 색상으로 표현돼 부드럽게 보이는 게 당연해보이지만 아래 포토샵 초기 인터페이스를 보면......
3. 과거 디스플레이들에서 출력 가능한 색상 / 웹 안전색상(216개)의 한계
웹에서의 이미지 표현이 안전색상(216개)에서 벗어난 건 생각보다 오래되지 않았는데, 이 안전색상이 별 의미가 없었다...는 기사도 본 기억이 나지만 어쨌든 2000년대 초반까지만해도 웹에서 사용할 수 있는 컬러는 대단히 제한적이라고 알려져있었고 지금은 당연하게 여겨지는 부드러운 곡선/곡면 표현이나 그라데이션 또한 색이 "모자라니까" 제대로 그려내기 어려웠을 거고요.
*사족으로...
웹브라우저 인터페이스와 웹페이지 디자인은 구분되어야할 것 같고요.
웹브라우저 윈도우에서는 상단 메뉴키나 하단 프로그레스, 경로, 파일명, 파일크기 등 정보 표시 영역이 필수적으로 존재하는데 콘텐츠(웹페이지)가 보여지는 영역을 최대치로 사용해야하는 한계가 있어 표현이 간소화되는 건 필연이라고 봅니다. 위의 표현적 한계와 제한된 인터페이스 영역, 과거 "버튼"이라고 인지되는 요소의 표준 형태 등을 고려했을 때 모자이크 브라우저는 당시로서는 표현의 최대치였을 것 같아요.
2. 시간을 그런 방식으로 경험했기 때문이다
참 어려운 질문이네요…
어떤 디자인은 시간이 지남에 따라 옛 것으로 느껴지기도 하고, 어떤 디자인은 오랜 시간이 지나도 여전히 현대적인 느낌이 드는데, 일부는 기술의 발전에 따른 것도 있지만, 대부분의 경우는 우리가 시간을 그런 방식으로 경험했기 때문일 것 같아요.
디자인 역사를 전공하신 교수님께 질문해 보시는 것이 좋을 것 같아요.
3. 더 좋아 보이는 것으로 대체된 것이다
과거의 디자인에서 표현 및 형태를 규정지었던 방식이 이후 시간이 흐르면서 더 좋아보이는 방식 혹은 다수가 받아들이는 새로운 방식으로 대체 되었을 때 ‘유행이 지났다’거나 ‘촌스럽다’고 느끼는 것 같아요. 그런데 어떤 디자인은 시간이 흘러서 일부가 바뀌었어도 여전히 그 표현 방식의 핵심이 유지되고 있는 것들이 있는데요, 우리는 이를 두고 ‘여전히 현대적이다’ 라고 느끼게 되는 것 같습니다. 시대가 지나도 유효한 표현방식을 취하고 있으니 이를 높이 평가하는 것이죠. (이런면에선 ‘모던디자인’은 여전히 ‘모던’ 한 것 같습니다)
이런 관점에서 보면 이 질문은 다분히 미학적인 질문이라고 생각되는데요, 미학과 교수님이나 진중권 선생에게 트윗을 해보면 어떨까 싶네요.
4. 클라이언트 퍼포먼스, CSS 때문이다
정답은 없고 주관적인 견해만 있을 질문이네요! 늦었지만 저도 답변 드립니다.
기술적 표현의 한계라는 큰 꼭지는 저도 같습니다. 웹 디자인은 클라이언트측 퍼포먼스와 밀접한 관계가 있는데 시간의 흐름에 맞춰 자연스럽게 디바이스 퍼포먼스는 좋아지고 전보다 높은 연산을 필요로 하는 표현법을 '공식적으로' 지원하기 시작하면 디자이너나 개발자는 새로운 기술을 비로소 적용하기 시작하는거죠.
Border radius는 옛날부터 어떤 방식으로든 구현 해 왔지만, 공식적으로 css3에서 지원하기 시작한건 그리 오래 되지 않았어요. 비슷한 예로 컬러모듈이나 미디어쿼리가 있죠. behance 2018 디자인 트렌드의 그라데이션도, 같은 이유에요.
CSS standard 를 보면, 트렌드라고 부르는 그 시점과 동일한것을 알 수 있어요. 또 웹과 앱 디자인은 트렌드를 공유하며 서로 영향을 받는 관계기 때문에 한쪽에서의 새로운 기술은 굉장히 쉽게 적용되고, 금새 트렌드가 되어진다고 생각해요. 회사에서도 한번 비슷한 주제로 얘기를 길게 한적이 있었는데 (누구였죠? 등판하세요!), 결국에 웹 디자인 트렌드는 CSS3에 큰 영향을 받는다고 생각해요.
5. 스큐어모피즘에서 플랫 디자인으로의 변화다
먼저 질문을 저희 식(?)으로 재해석 해보면...
과거: 투박하고 딱딱 -> 현재: 둥글둥글 매끄러운 디자인
=> 스큐어모피즘 -> 플랫 디자인으로의 변화로 바꿀 수 있을 것 같습니다.
하지만 스큐어모피즘이 투박하고 딱딱해 보인다(=촌스럽다)는 건 편향적이고 잘못된 시각입니다. 단지 요즘 트렌드가 아닐 뿐이죠.
과거에는 왜 스큐어모피즘으로 디자인 되었는가? 라는 더 나은 질문으로 바꿔서 생각해봅시다. 이에 대해서는 크게 두 가지 이유가 있다고 봅니다.
1. 어포던스
스큐어모피즘은 플랫디자인보다 현실 세계의 메타포를 적극적으로 표현하기 때문에 사용자에게 있어 러닝커브를 매우 크게 줄여줍니다.
과거엔 컴퓨터 보급률도 낮았고 디지털 기기의 경험치도 낮았습니다. 때문에 사용자가 현실세계에서 겪었던 개념을 그대로 반영하는 것이 사용성을 높일 수 있는 방안이었습니다. 시각적으로도 더 친숙하게 느낄 수 있기 때문에 진입장벽도 낮출 수 있는 유용한 방법이었을 테고요.
즉, 플랫 디자인보다는 어포던스가 높은 스큐어모피즘이 디자인적으로 더 효과적이었고 그래서 널리 사용되었습니다. 하지만 세살배기도 아이패드를 잡고 유튜브로 뽀로로를 보는 디지털 세대가 주류가 되면서, 이런 어포던스를 제공하는 것에 목맬 필요가 적어졌습니다. 많은 디지털 기기들을 접하면서 대충 어느 것은 버튼이고 어떤 것은 리스트고, 어떤 건 메뉴라는 것들이 이미 디지털 세대들에게는 체화되었기 때문이죠. 거기에 20여년 간 디지털 인터페이스들이 패턴화 된 것도 한 몫 하고 있고요. 그래서 플랫디자인이 사용될 수 있는 여건이 마련되었습니다.
2. 기술적인 한계
플랫 디자인은 위에서 말한 대로 어포던스가 비교적 떨어집니다. 하지만 기술의 발전이 이를 보완해줍니다. 바로 모션(트랜지션)의 등장입니다.
플랫 디자인은 모든 것을 형태와 색 정도로만 표현하기에 정적인 상태로만 표현되면 시각적으로 이해하기 어렵습니다. 하지만 어떻게 등장해서 사라지는지, 손을 댔을 때 어떻게 움직이는지 실제 물체처럼 표현한다면 (=매터리얼 디자인) 동작에 대한 예상(어포던스)을 더 쉽게 할 수 있게 됩니다.
과거에는 컴퓨팅 사양이 낮았기 때문에 모션을 제대로 표현하기가 어려웠습니다. 잘 표현하려면 많은 메모리, 뛰어난 그래픽 연산장치가 필요한데 예전 기술로는 정적인 이미지를 잘 표현하는 것도 힘들었거든요. 지금은 일반적인 웹브라우저에서도 실제와 가까운 모션을 자유롭게 표현할 수 있을 정도로 기술이 발달했고요.
결국 이렇게 모션을 통해 어포던스의 부족함을 채울 수 있게 되면서 플랫 디자인이 큰 문제없이 받아들여지게 됩니다. 재미있는 건, 모션이 얼마나 실제적이냐가 관건이 되면서 스큐어모피즘이 대체된 것이 아니라 오히려 모션 속에서 살아있다는 점입니다. 다시말해 시각적 스큐어모피즘에서 모션의 스큐어모피즘화라고 할 수 있겠습니다.
왜 플랫 디자인으로 바뀌는 걸까?
그냥 스큐어모피즘에 모션만 끼얹는 정도로 발전할 수도 있는 것 아닐까요?
이에 대한 답은 명확하지는 않습니다만, 미술 역사와 비교해 보면 약간의 힌트를 얻을 수 있습니다. 과거 미술도 회화중심의 그림이 위주였지만, 산업혁명 때 사진기가 대중화 되면서 현실을 사진보다 더 똑같이 표현하는 게 힘들어지자 추상적 표현 중심으로 바뀌었죠.
마찬가지로 디지털 세대가 주류가 되면서 더 이상 현실세계의 메타포를 사용하지 않아도 되게 되었고, 스큐어모피즘도 추상적인 표현인 플랫 디자인으로 바뀌어 가는 것이 아닌가 생각합니다.
그리고 스큐어모피즘은 제한된 디스플레이 크기에서는 현실 메타포를 표현하기 위해서 쓸데없이 많은 픽셀들을 소모한다는 단점이 있는데요. 이는 모바일 기기와 같이 작은 디스플레이에서는 매우 치명적인 단점이 됩니다. 때문에 모바일 퍼스트 시기와 맞물리면서 더 픽셀을 적게 소비하는 플랫 디자인으로의 변화는 필연적인 것 같기도 합니다.
마치며
지금까지 소개해 드린 총 다섯 분의 의견은 기술과 시대가 변하면서 그럴 수밖에 없었던 개연성을 말하고 있습니다. 이 글을 읽고 계신 여러분의 생각은 어떠하신가요? 또, 하나의 질문에서 이렇게 다양한 접근과 의견이 나오는 것을 보면서, UX 디자이너에게 '왜?'라는 질문의 중요성을 다시금 생각해 볼 수 있었습니다. 당연하게 쓰이고 있는 디자인 규칙과 인터페이스. 현재 이러한 모습을 보이게 된 기원은 무엇이었는지, 그 과정에 어떠한 일들이 있었는지를 곰곰이 생각해 본다면 근미래의 모습도 예상해 볼 수 있지 않을까요?
*이 글은 브런치에서도 볼 수 있습니다. @uxstar