[번역] A Look at Flat Design and Why It’s Significant – UX Magazine

어제 WWDC 2013에서 iOS7이 발표가 되었습니다. Flat style로 싹 바뀐 UI design에 대해서 여러 의견이 분분할 것 같은데, 관련해서 예전에 읽었던 글이 있어서 번역을 해봅니다. 처음 글이 올라왔을 때에도 Skeumorphism vs Flat Design에 대한 약간은 감정적인 댓글이 많았는데, 사실 뭐가 맞다라기 보단 왜 Flat UI가 대두되는가에 대한 고민이라고 보는게 맞고, 저자도 그렇게 얘기하고 있습니다.

>원문은 여기서

또한 Skeumorphism이 마우스와 키보드를 벗어나 손과 동작 등 natural interface로 넘어가는 과정에서 왜 중요한 역할을 하는지에 대해서 잘 설명한 글이 있습니다.

>애플 iOS UI의 상징 ‘스큐어모피즘’을 위한 변명

이 글도 같이 읽어보면서 이런 논의들의 의미를 잘 생각해보면 좋을 것 같네요.

.update1 : 슬로우뉴스의 iOS7 디자인에 대한 문제제기에 대해선 어떻게 생각하세요?
>iOS7의 디자인, 진화인가 퇴행인가

————–

A Look at Flat Design and Why It’s Significant

by Luke Clum, May 13 2013, UX Magazine, >View Original 

 

There has been a growing tidal wave of flat designs on the web, and recent trend reports have confirmed that they’re only increasing in popularity.

Of course it’s easy to dismiss flat design as yet another fleeting aesthetic trend.

But further investigation into this new philosophy reveals that flat design is a lot more than “just for looks.”

지금 웹에서는 Flat design의 흐름이 커지고 있고, 최근의 트랜드 리포트들은 이런 흐름이 계속 인기를 얻게 될 것임을 확인했습니다. 물론 flat design을 단지 또 하나의 잠깐 지나가는 미적인 트랜드로 여기기는 쉽습니다. 그러나 이 새로운 생각으로 더 깊이 파고들어가보면 flat design이 단지 ‘외모’만이 아님을 알게 됩니다.

 

What is Flat Design?

Flat design can be seen as the more sophisticated and versatile cousin of minimalism. While flat designs look great when made within the restraints of minimalism, they can also handle a lot more complexity; these designs have a crispness and clarity that can only be achieved by stripping away three dimensional effects. In its essence, flat design has two objectives:

Flat design은 더 세련되고 다재다능한 미니멀리즘의 사촌 정도로 볼 수 있습니다. Flat design은 미니멀리즘을 기반으로 만들어져 미적으로 보기에도 좋으면서도 더 복잡한 것들을 다룰 수 있습니다; 3d 효과를 제거함으로서 얻을 수 있는 상쾌함(crispness)와 명쾌함을 가지고 있습니다. 본질적으로 flat design은 2가지 목적을 가지고 있습니다.

  • Embracing the limits of the screen and working within those parameters rather than trying to disguise them.
  • Using this newfound simplicity as a starting point for streamlining designs, and making websites faster and more functional.
  • 스크린의 제한들을 포용하고, 그런 제한들을 위장하고 숨기기보다 그 안에서 동작합니다.
  • 디자인을 간소화는 시작 포인트로서 새롭게 떠오른 flat design의단순함을 이용하며, 웹사이트들을 더 빠르고 기능적으로 만들어줍니다.

Flat design doesn’t necessarily mean that anything hinting at dimensionality is out of place. For example,this website features an angled illustration with a clear perspective. But the overall trajectory of the trend is towards simplicity and minimalism. The buttons are plain fields of color with sharp corners. There’s not a drop shadow, beveled edge, or gradient to be seen.

Flat design을 입체적인 디자인이 끝났다는 신호로 여길 필요는 없습니다. 예를 들어 위의 Foundation 웹사이트는 그렇지 않다는 것을 명확한 관점에서 보여주는 적절한 사례입니다. 그러나 전반적인 트랜드의 궤도는 단순함과 미니멀리즘으로 가고 있습니다. 버튼들은 각진 모서리들과 단순하게 색칠된 상자들입니다. 그림자 효과도, 입체적인 가장자리도, 그라데이션도 보이지 않습니다.

Flat Design as a Response to the Problems of Skeumorphism

For every action, there is a reaction. And in the world of digital design, flat imagery is cropping up more, in part as a reaction against skeumorphism. But flat design is more than just an artistic treatment; it’s a response to the serious functionality issues that skeuomorphism presents.

모든 액션에는 반응이 있습니다. 디지털 디자인의 세계에서 flat한 이미지는 skeumorphism에 대한 반응의 일부로서 나타나고 있는 것입니다. 그러나 flat design은 단지 미적인 대응만이 아닙니다; skeumorphism이 보여준 심각한 기능적인 이슈들에 대한 대응입니다.

What is Skeuomorphism?

If you’re unfamiliar with the term, skeuomorphism is the practice of incorporating the look of an object that was made in another material into a design: what was once functionality becomes ornamentation. The reference is meant to evoke a sense of familiarity when encountering a new concept/tool/app online. This principle of imitation is all around us; a plastic chair that duplicates the shape of its wooden original is a good example how it manifests itself in the real world.

Skeumorphism은 다른 소재로 디자인된 대상의 소재를 가져와서 적용하는 것입니다: 기능성이 장식이 되는 것입니다. 이런 참조는 온라인에서 새로운 컨셉/도구/앱을 만났을 때 친숙함을 불러일으키는 수단입니다. 이런 흉내내기의 원리는 주변에서 쉽게 볼 수 있습니다; 나무 의자의 모양을 복사한 플라스틱 의자는 실제 세상에서 보여지는 좋은 예입니다.

In the digital world, skeuomorphism is often associated with Apple products, which provide a great example of how it often looks in digital design. Just take a look at Apple‘s dashboard design:

디지털 세계에서 skeumorphism은 애플의 제품과 자주 연결되어집니다. 애플은 digital design에서 skeupormphism이 어떻게 보여지는지의 훌륭한 사례들을 제공하고 있습니다. 애플의 dashboard를 보면:

  • The obvious components: The calculator, clock, and calendar are digital illustrations of their real-world counterparts.
  • The subtle details: The drop shadows and beveled buttons, the textured background, and even the shuddering movement of the second hand on the clock are also made to mirror physical products.
  • 분명한 구성요소들 : 계산기, 시계 그리고 달력은 실제 물건들의 모양을 본따서 만들어졌습니다.
  • 섬세한 디테일들 : 그림자들과 튀어나온 버튼들, 질감이 나타나는 배경 그리고 심지어 시계의 초침의 움직임은 실제 시계를 정확히 반영하고 있습니다.
The Problems with Skeuomorphism

While there’s something to be said for the philosophy of skeuomorphism, there are a lot of issues that come with using it in digital design. For example, the analog clock featured in Apple’s dashboard is harder to read than its digital alternative, and it’s much more time-consuming to click the buttons on the calculator then it is to simply key them into the Spotlight function that also comes with Apple products. There are actually quite a few problems that arise with adhering to skeuomorphism:

Skeumorphism의 철학에는 분명히 언급할 만한 점이 있지만, digital design에 사용하기 위해서는 많은 이슈가 따라옵니다. 예를 들어, 애플의 dashboard에 보이는 아날로그 시계는 디지털 시계보다 읽기가 힘듭니다. 그리고 OS X의 Spotlight에서 간단히 입력해서 계산할 수 있는 것이 비하면 dashboard의 계산기는 버튼을 누르는데 시간이 많이 걸립니다.(이 부분은 납득하기 힘들군요. 키 입력도 가능한데 굳이 마우스로 일일이 숫자를 누르는 경우를 예로 들다니) Skeumorphism에는 확실히 몇 가지 문제가 드러나고 있습니다.

  • By sticking to standards that are irrelevant in a digital format, skeuomorphism limits creativity and functionality.
  • Skeuomorphic elements look inconsistent when combined with less dimensional elements, and often the imitations don’t even make logical sense. For example, Apple’s Find My Friends app has a background that’s made to look like stitched leather. But this element has no relation to any real-world reference.
  • Skeuomorphic elements can take up valuable screen space and loading time with functionless embellishments.
  • They also tend to look wrong when combined with anything else that isn’t treated with skeuomorphic effects, limiting the entire design as well as any particular element.
  • digital의 형식에 관계없는 기준에 집착함으로서, skeumorphism은 creativity와 기능성을 제한합니다.
  • Skeumorphism의 요소들은 입체적이지 않은 요소들과 결합되면 일관성을 잃어버립니다. 그리고 그 모조품은 논리적이지 않을 때가 많습니다. 예를 들어 애플의 Find My Friends 앱은 바느질된 가죽의 배경을 갖고 있습니다. 그러나 이것은 왜 그런 것인지 현실적인 근거가 없습니다.
  • Skeumorphic effect가 적용되지 않은 요소와 결합되면 뭔가 잘못된 것으로 보이게 만들어서, 전체적인 디자인과 구체적인 요소들의 디자인을 제한합니다.
The Solution Found in Flat Design

The response of flat design makes is to embrace the real limitations of the digital experience, and to do away with the imposed limitations of skeuomorphism. Anything on a screen will never truly look three dimensional, so why not embrace the beauty (and accompanying increase in functionality) that comes from stripping away illusory decoration?

Flat design은 디지털 경험의 제한들을 포용할 수 있게 하였고, skeumorphism이 부과한 제한들을 벗어날 수 있게 했습니다. 화면의 어떤 것도 절대 진짜 3d처럼 보이지 않습니다. 그러니 가상의 장식들을 제거해서 얻어지는 아름다움(그리고 기능성의 증진도)을 환영하지 않을 이유가 없습니다.

Example #1:

Example #2:

Take the above examples of LayerVault’s website: example #1, the older design, shows a very detailed and elaborate illustration in the skeuomorphic style, which as previously mentioned, looks wrong in combination with the flat, clean appearance of the rest of the site. Compare it with the flat illustrative style of the new design, example #2, and there’s no contest as to which is more compelling and functional. The original illustration is distracting without being informative, while the modified one guides the eye to important information without eclipsing it.

LayerVault 웹사이트의 예를 보면: 첫번째 샘플 – 이전 디자인 – 은 앞에서 언급한 skeumorphism 스타일의 디테일하고 정교한 일러스트레이션과 flat하고 깔끔한 배경의 조합을 보여줍니다. flat한 일러스트 스타일의 새로운 디자인과 비교해보면, 두번째 샘플에는 어떤 것이 더 눈에 띄고 기능적인지의 경쟁이 없습니다. 이전의 일러스트레이션은 어떤 의미를 제공하지 못하고 산만하다면, 수정된 두번째 디자인은 시선을 분산시키지 않고 중요한 정보로 인도합니다.

Flat Design Harmonizes and Builds on the Goals of Skeuomorphism and Minimalism

The elements that bring flat design beyond a passing trend into a lasting and comprehensive strategy are twofold:

Flat design이 트랜드를 넘어 지속적이고 포괄적인 전략이 되게 한 요소는 두 가지입니다.

  • Flat design is tailored to fit an on-screen experience, as opposed to earlier styles which were made to mimic a physical experience.
  • That tailoring lends itself perfectly to enhancing the user experience in a number of ways.
  • Flat design은 이전에 물리적인 경험을 흉내낸 스타일과 대조적으로 다양한 스크린 상의 경험에 맞춰져 있습니다.
  • 그렇게 적절한 맞춤들이 다양한 방법으로 사용자 경험을 개선할 수 있도록 해줍니다.

Flat design takes the best aspects of minimalism and skeuomorphism and makes them work together. Like skeuomorphism, flat design looks friendly and approachable to users. But it does this by presenting a clear and engaging interface, rather than disguising and warping that interface to mimic something familiar. Like minimalism, flat design strips down visual elements to expose their essential functionality. But it’s not as restrictive in the way it does this; as demonstrated above, the importance of ornamentation is recognized and utilized.

Flat design은 미니멀리즘과 skeumorphism의 좋은 면들을 취해서 조화시켰습니다. Skeumorphism처럼 Flat design은 익숙한 모양새로 유저들에게 다가갈 수 있습니다. 그러나 익숙한 어떤 물건을 따라서 흉내내고 포장하기보다, 깔끔하고 매력적인 인터페이스를 제공합니다. 미니멀리즘처럼, Flat design은 비주얼 요소들을 줄여서 가장 본질적인 기능성을 강조합니다. 그러나 그런 방식에 제한받지 않습니다; 위의 이미지에서 보여주는 것처럼, 장식적인 디자인 요소의 중요함은 인식되어 있고 활용되고 있습니다.

Flat Design is the Perfect Style for Great UX

Flat design not only reconciles the goals of minimalism and skeuomorphism, it also is uniquely adaptable to usability considerations. By shedding unnecessary styling, it makes for speedier pages, cleaner code, and easy adaptability. It also lends itself beautifully to every type of application; whether viewed on a desktop or a mobile screen, flat design is always legible and adaptable.

Flat design은 미니멀리즘과 Skeumorphism의 목적을 조화시킬 뿐만 아니라 사용성을 위한 고려들을 특색있게 받아들일 수 있습니다. 불필요한 디자인 요소들을 제거함으로서 웹페이지들을 더 가볍게 만들고, 코드를 깔끔하게 하고, 쉽게 적용할 수 있습니다. 또한 모든 형태의 어플리케이션에 아름답게 적용될 수 있습니다; 보여지는 스크린이 데스크탑이든 모바일이든, flat design은 항상 알기 쉽고 적용하기 쉽습니다.

Flat Design is Endlessly Adaptable

Example #1:

Example #2:

To see how simply and beautifully these applications can be integrated with each other, take a look at the design of Windows Phone, in examples #1 and #2 above. The company has chosen to be a key player in the movement away from a look that has been closely associated with Apple, and its decision is paying off in a great interface; bright color blocking is used in both to designate sections, and all the typography and imagery looks elegant and integrated.

이런 어플리케이션들이 얼마나 단순하고 아름답게 서로 통합될 수 있는지를 보려면 윈도우 폰의 디자인을 보면 됩니다. MS는 애플과 밀접하게 연관된 비주얼 스타일에서 벗어나는데 주요한 역할을 하기로 선택했고, 그 결정을 좋은 인터페이스를 만들어냈습니다; 밝은 색상의 상자들은 섹션들을 나타내는데 사용되었고, 모든 타이포그래피와 이미지는 세련되고 조화롭게 보입니다.

Conclusion

Flat design has all the key attributes that make a site as functional as it is beautiful. It recognizes that a sense of familiarity is important to the user experience, but it creates this sense in a way that fits with the medium. At the same time, it’s able to adapt to new discoveries, trends, and ideas. Flat design brings us a step closer to a new paradigm of digital design, where the functionality and aesthetic are in complete harmony.

Flat design은 웹사이트를 기능적이면서도 아름답게 만드는 핵심 요소입니다. 익숙함이 사용자 경험에서 중요하다는 것은 인식하면서, 그런 느낌을 해당 미디어에 적절한 방식으로 만들어냅니다. 동시에 flat design은 새로운 환경,트랜드와 아이디어에 적용하기 쉽습니다. Flat design은 기능성과 심미성이 조화를 이루는 새로운 디지털 디자인의 패러다임에 우리를 더 가까이 데려다 줄 것입니다.

 

————–

다양한 댓글에 대한 저자의 Comment. May 24, 2013

Flat Design is by no means a complete rejection of skeuomorphism – that would be ludicrous. Nor is flat design the sole future of digital design. Instead, its a step forward for the medium of digital design by trying to embrace its non-physical form. Will gradients, bevels or complex skeuomorphs go away? Absolutely not. And honestly, they shouldn’t. They are tools in the designer’s tool box.Ultimately, flat design is trying to challenge us to look at digital design not as a model of the physical world, but as a new world in and of itself. Its significant not because it’s a new all-consuming style, but because it’s challenging designers to embrace the constraints of the medium.  We don’t always need to mimic the past to make something “useable.” Nor do we need to always pursue familiarity for the sake of usability. Part of our job as designers is to showcase new ways of doing things.So does that mean that you need to drop off every single hint of skeuomorphism in your design, no. Instead, it’s worth a look at what flat design is trying to accomplish and why it’s trying to do so.

Flat design은 skeumorphism를 완전히 거부한다는 의미가 아닙니다. 그것은 말도 안됩니다. Flat design은 디지털 디자인의 유일한 미래도 아닙니다. 다만, 물리적이지 않은 형태를 포용하려는 시도를 통해 디지털 디자인의 미디어에 한 걸음 더 나아가는 것입니다. 그라디언트나 베벨, 복잡한 skeumorph가 사라질까요? 그렇지 않습니다. 그리고 솔직히, 그래서는 안됩니다. 그것들은 디자이너들의 도구상자 안의 한 도구입니다. Flat design은 우리에게 디지털 디자인을 물리적인 세계의 모델로 보지 않고 그 자체로 새로운 세계로 보도록 합니다. 새로운 디자인 스타일이어서 중요한 것이 아니라 디자이너에게 미디어의 제한들을 포용할 수 있도록 하기 때문에 중요한 것입니다. 우리가 어떤 것을 유용하게 만들기 위해서 항상 과거의 물건을 흉내내야 할 필요는 없습니다. 사용성을 위해서 익숙함만을 항상 추구할 필요도 없습니다. 디자이너로서 우리 일의 일부는 작업을 하는 새로운 방식을 만들어내는 것입니다. 그것이 당신의 디자인에서 skeumorphism의 모든 단서를 없애버려야 한다는 의미일까요? 아닙니다. 다만, flat design이 성취하려는 것과 왜 그런 일을 하는지를 이해하는 것은 가치가 있을 것입니다.

3 thoughts on “[번역] A Look at Flat Design and Why It’s Significant – UX Magazine

Leave a Reply

Your email address will not be published. Required fields are marked *