By John Gruber

The Trend Against Skeuomorphic Textures and Effects in User Interface Design

Friday, 18 January 2013

데이브 위스커스(Dave Wiskus)가 맥월드에서 “Apple and the Future of Design”라는 깊이 있는 기사를 작성했다. 인용한다.

애플의 하드웨어와 소프트웨어가 어떻게 서로 다른 경로를 가게 됐는지 호기심이 난다면 iOS 하드웨어와 소프트웨어를 분리해서 보면 된다. 그러면 아예 다른 회사가 각자 만든 것이 아닐까 생각하실 것이다. iOS의 그림자와 질감은 애플 하드웨어의 깔끔한 선과 보이지 않는 이음매와 완전한 대비를 이룬다. 아이폰이나 아이패드 라인이라는 두 주요 모델을 비교해 보면, 조니 아이브의 산업디자인 팀은 마치 마술같은 돌 하나 가지고 깎아 내린듯한 제품을 만들어내고 있는 것으로 보인다. 그렇다면 애플은 어째서 아이폰이나 아이패드의 소프트웨어에 깊은 그림자와 눈에 보이는 바늘땀을 부착시킨 채 내보낸단 말인가?

최근 이 문제에 대해 상당히 많은 생각을 해 봤고, 마침내 뭐가 뭔지 알아낸 것 같다.

스타일면에서, 변화가 진행중인 것이다. 아마 애플의 iOS와 오에스텐, 아이클라우드의 달력 앱에 있는 풍부한 질감의 코린토식 가죽때문에 불거진 가짜 질감 스타일의 전환이 일어나고 있다는 의미다. 이런 반대 방향은 새로운 것이 전혀 아니다. 10년 전, 브러시드 메탈에 발끈한 사람들도(나도 그랬다) 분명 있었다. 하지만 오늘 일어나고 있는 일은 단순히 과장된 스큐어몰픽 질감의 퇴출이 아닌 그 이상의 것이다. 반대 방향으로의 대단히 강력한 변동이 일어나고 있다는 얘기다. 브러쉬드 메탈 시대의 비판점은 "너무 과도하다"였다. 오늘날의 트렌드는 "반대 방향으로 가 보자"이다.

위스커스는 이런 경향을 Letterpress가 제일 잘 드러내고 있다는 로렌 브릭터(Loren Brichter)의 말을 바르게 인용했다.¹ Letterpress는 과장된 질감을 몰아냈을 뿐만 아니라, 가짜 장식용 텍스쳐마저도 몰아냈다. 더 나은 단어가 없는 모양인지, 이 현상을 “flat” 인터페이스 디자인이라 부르는 이들이 많다. 영 틀린 설명은 아니지만 꼭 적절한 묘사도 아니다. 다시 말하지만 다른 대부분의 iOS 게임과 앱의 시각적 미학과 비교해 보면 Letterpress는 완벽한 사례이며 정말로 flat 디자인이라 할 수 있다. 하지만 Letterpress는 실제로 Z-축을 가지고 있으며, 글자 타일을 드래그하면 놓을 때까지 드롭 섀도가 뜬다. "플랫"하고는 전혀 관계가 없다. Letterpress가 나타내지 않는 것은 깊이가 아니라, 장식적인 목적의 깊이이다. 사용자가 움직이면서 나타나는 타일의 시각적인 상승(raising) 효과는 자연스러운 시각적 신호(cue)로서, 움직이고 있는 것을 강조하는 하나의 방식이다.

내가 보기에 이러한 경향의 타이밍, 그리고 특히 iOS와 아이폰이 이끌고 있는 이러한 경향은 우연이 아니다. 레티나 디스플레이 때문이다.

전체적인 iOS의 기본 외양(텍스쳐와 그림자, 미묘한(미묘하지 않을 때도 종종 있다) 3D 효과)은 비-레티나 디스플레이용으로 최적화 돼 있다. 오리지날 아이폰 이전보다야 그 무슨 폰보다 좋기는 하지만 인치당 163 픽셀용이라는 얘기다. 아직 이 해상도가 전체적으로 원래 해상도이다. 하지만 레티나 디스플레이는 그런 방식으로 해상도가 제한적이지 않으며, 아름다운 인터페이스를 만들기 위해 가짜 효과를 나타낼 필요가 없다.²

1년 전, 에릭 슈피커만(Erik Spiekermann)의 트위트를 보자.

레티나 디스플레이상에서 좋은 활자를 원한다면, 힌팅(글자의 외곽선 보정) 논의는 그만 두기 바란다. 좋았던 지난날처럼 멋져 보이는 자면(face)만 찾으면 된다.

더 나아가 보겠다. 이 원칙은 레티나 디스플레이의 모든 디자인에 적용되는 원칙이다. 단순히 자면에만 해당되는 이야기가 아니다. 좋아 보이는 걸 하라. 그것이 진실이다. 인쇄할 때처럼 말이다.

하지만 슈피커만은 훌륭한 지적을 해냈다. 서체야 말로 고해상도 화면으로 가능해진 디자인의 변화를 상징하기 때문이다. 옛날에는 Chicago나 Geneva, Monaco 등등 픽셀별(pixel-by-pixel)로 만들어진 화면용 서체를 사용(해야)했다. 그것이 맥오에스텐이 나오면서 안티-앨리아싱과 중간 범위 해상도 디스플레이로 이주하면서, 화면상에서 (픽셀과 반대되는) 벡터를 사용할 수 있게 됐다. 그러나 제일 좋아 보이는 서체는 여전히 프린트라기보다는 화면상에 최적화된 서체이다. Lucida Grande나 Verdana, Georgia와 같은 서체 말이다. 이들 서체는 레티나가 아닌 디스플레이 상에서 최고로 아름다워 보이지만 고해상도 출력으로 들어가면 싸구려 서체처럼 보인다.(Ikea, 당신네 회사의 방향을 보고 하는 말이다.) 레티나 디스플레이 상에서는 원하는 서체를 사용하지 말아야 할 이유가 없다. 레티나 디스플레이 상에서는 모든 서체를 멋지게 렌더링하기 때문이다.

사용자 인터페이스 디자인에서 스큐어몰픽 특수 효과에서 빠져 나오는 경향은 레티나-해상도 디자인 시대의 개막을 의미한다. 우리의 디자인은 더 이상 순수 픽셀에 제한을 받을 필요가 사라졌다. 매끄러운(gloss)/유리같은(glassy) 표면, 서투르게 처리한 투명함, 빛나는 드롭 섀도, 양각을 시킨 텍스트, 질감이 있는 물체의 표면 등은 현대 사용자 인터페이스 그래픽 디자인 스타일의 특징이지만, 출력용 그래픽 디자인에서는 (거의) 절대로 쓰이지 않는 스타일이기도 하다. 출력에는 그런 디자인이 불필요하다. 출력 품질이 높아질수록 그런 기법은 더 우습게 보일 따름이다. Lucida Grande와 Verdana와 같은 화면용 서체와 미학적으로 동급이라는 의미다. 비-레티나 디스플레이 시절에서야 대강 보이는 디스플레이이니 괜찮았다. 그러나 레티나 디스플레이에서는 출력의 품질도 높아지기에 이런 기법은 자신의 가치를 있는 그대로 드러낸다. 그래픽 디자인을 진정 그대로 드러낼 사양이 안 되는, 그러니까 기술적으로 열등한 디스플레이에서 뭔가 좋아 보이게 만드는 기만술의 총합이 이전의 디자인 경향이었다.

Letterpress와 같은 것이 비-레티나 디스플레이에서 나쁘게 보이진 않는다. (내 아이패드 미니에서 자주 갖고 논다.) 물론 와우!의 수준까지는 아니다. 그냥 거기에 자기 자신 그대로, 디스플레이의 수준에 맞게 있을 뿐이다. 그러나 레티나 디스플레이에서는 Letterpress처럼 단순하고 순수하며 진정한 디자인은 뜨거운 날의 차가운 음료를 처음 마실 때의 그 느낌과 같다.

소프트웨어 사용자 인터페이스의 미래를 보고 싶으시다면, 과거 출력 디자인의 역사를 보시라.

---

1. 좋은 사례가 하나 더 있다. iOS용 Twitterrific 5이다. 하지만 Letterpress가 이런 방향을 이끈 최초의 앱이라고 주장하고자 함이 아니다. (특히 아이패드용 Instapaper 또한 또다른 좋은 사례이다.) 탈-스큐어몰픽 경향의 상징이라는 의미다.  ↩

2. 스큐어몰픽 효과가 없고 거의 극단적으로 "플랫"한 "현대적인" 윈도 8 인터페이스는 괄목상대할 정도로 선도적인 구상이다. 윈도 8의 인터페이스는 레티나-사양의 디스플레이에서 최고로 보이지만, (윈도 폰 7.x와 같은) 비-레티나 디스플레이나 전형적인 오늘날 PC 화면에서는 별로 대단해 보이지 않는다. 메트로 인터페이스가 윈도 8의 인기를 막는 존재일 수 있다는 생각이다. "플랫" 디자인의 완벽한 본보기이지만 훌륭한 디자인까지는 아니라는 의미다.
    ↩

Daring Fireball: The Trend Against Skeuomorphic Textures and Effects in User Interface Design