brunch

You can make anything
by writing

C.S.Lewis

by Yunjung Seo Sep 22. 2015

Skeuomorphism

스큐어모피즘

Skeuomorphism (스큐어 모피즘)은 그리스어로 도구를 뜻하는 Skeuos(스큐어)란 단어와 형태를 뜻하는 Morpe란 단어의 합성어로 실제 사물을 있는 그대로 표현하는 것을 말합니다. 다른 말로는 리얼 메타포 디자인이라고 불리기도 합니다.

https://dribbble.com/Ramotion


스큐어모피즘을 활용한 위의 아이콘은 사진과, 동영상을 나타내는 아이콘임을 직관적으로 알 수 있습니다. 이처럼 스큐어모피즘은 있는 그대로의 형태를 표현하기 때문에 부가적인 설명이 따로 필요하지 않다는 것을 장점으로 들 수 있습니다.

http://theultralinx.com/2012/10/20-beautiful-icon-designs-inspiration/


또한 아이콘과 앱의 기능이 자연스럽게 연결되기 때문에 사용자들이 기억하기 쉽기에 편리하게 사용할 수 있습니다.

스큐어모피즘은 아날로그로 경험하던 것들을 디지털에서도 동일하게 경험할 수 있도록 제공합니다. 예를 들어 잡지를 넘기는 행위를 디지털상에서도 똑같이 체험할 수 있기에 디지털과 아날로그의 감성을 동시에 느낄 수 있습니다. 때문에 디지털에 익숙하지 않은 사람도 거부감 없이 즐길 수 있습니다.



 ios6버전까진 애플은 이러한 스큐어모피즘을 앞세운 디자인 철학을 내놓았고, 우리는 이를 적용한 UI를 접하였습니다. 

http://www.theverge.com/2012/9/21/3363060/ios-6-review

쉐도우와 텍스쳐, 엠보스효과를 활용해 아이콘이 입체적으로 보이게 하였고, 기존 도구의 형태를 적용시켜 기능에 대해 한눈에 알 수 있도록 하였습니다.


그러나 ios7을 기점으로 애플은 기존의 스큐어모피즘 디자인을 버리고 플랫디자인을 주축으로 내세웠습니다. 기존 스큐어모피즘은 사용자들에게 사물과 직접 연관되는 형태로 다른 부가적인 설명이 필요 없다는 장점을 가지고 있었지만, 실제 사물과 동일한 아이콘을 제작하다 보니 이를 표현하기 위해 많은 장식적 요소가 필요하게 되었습니다. 따라서 기능에 충실하기 보다는 장식이 중요해 보이기도 한다는 단점을 가지고 있기 때문입니다.


스큐어모피즘 디자인 중 많은 사람들이 기존 ios6 메모 어플을 worst로 뽑는 이유는 수첩의 바느질과 메모꽂이와 같이 메모의 기능과는 상관없는 주변 요소들이 너무 많다는 점을 들고 있습니다. 현실의 메타포를 그대로 반영했다는 장점 이면에는 이 장식이 굳이 있어야 할 요소인가? 하는 생각을 들게 하는 단점도 존재했습니다.

https://www.quora.com/What-are-the-worst-designed-iOS-apps


이외에도 스큐어모피즘은 있는 그대로의 사물을 옮겨왔다는 점에서 디자이너의 창의성이 발현되기 힘들다는 단점 또한 가지고 있습니다. 

마이크와 계산기를 있는 그대로 표현하여 기능에 대한 이해도를 높였지만, 앞서 말했듯이 새로운 것을 시도하기에는 기존의 형태나 재질을  따라 제작해야 하기 때문에 창의적인 결과물이 나오기 어렵기 때문입니다.


다음으로 각 사물의 형태들이 다 제각각이 기 때문에 아이콘에 통일감을 주기에도 역시 부족한 부분이 있습니다. 플랫아이콘의 경우 라인타입, 혹은 면타입을 통해 아이콘들 사이에 통일감과 조화를 중요하게 여긴다면 스큐어모피즘은 통일감보다는 각 사물의 형태를 중요시하기 때문에 통일성 부분에서는 플랫아이콘 보다 부족한 부분이 많다고 생각됩니다. 

https://www.behance.net/gallery/19251019/Realistic-iOS-App-Icons

사각형 프레임안에 있다는 점 외에 아이콘들끼리 통일감을 주기에는 부족한 느낌이 듭니다. 또한 너무 디테일을 살리다 보면 사용자들의 시선을 분산시키고, 시각적인 피로를 느낄 수도 있다는 단점 역시 가지고 있습니다. 이러한 점들 때문에 단순하지만 기능에 충실한 플랫디자인이 점점 강세를 띄게 되었을 것이라 생각됩니다. 



앞서 살펴보았던 스큐어모피즘과 플랫디자인의 차이점을 한눈에 쉽게 알 수 있도록 제작된  웹사이트입니다. 서로의 특징과 장단점들을 만화 형식으로 지루하지 않게 잘 보여주고 있습니다.

 http://www.flatvsrealism.com    플랫디자인과 스큐어모피즘(리얼리즘)에 대해 한눈에 쉽게 알 수 있는 사이트



다음은 ios6의 스큐어모피즘과 ios7의 플랫디자인을 비교해서 보여주는  이미지입니다.

http://www.pinterest.com


플랫디자인 포스팅에서도 말했듯이 한 개의 스타일이 옳고 그르다는 점을 말할 수는 없다고 생각합니다. 때문에 플랫 디자인과 스큐어모피즘을 적절히 활용하여 사용된 디자인 역시 등장하고 있습니다. 


http://www.pinterest.com



스큐어모피즘은 사용자들에게 디지털에서 아날로그의 감성을 느낄 수 있도록 도와주고, 사물의 형태를 있는 그대로 표현했기 때문에 기능에 대한 부가적인 설명을 하지 않아도 된다는 장점을 제공합니다. 이에 반대로 플랫디자인은 단순하고 통일된 아이콘을 통해 사용자들의 시선을 집중시키고 장식적 요소를 제거해 기능에 충실할 수 있다는 장점을 제공합니다. 이렇듯 플랫 디자인과 스큐어모피즘 두 가지 다 각자의 장점을 가지고 있고, 단점 역시 가지고 있습니다. 때문에 어떠한 스타일을 강요하기 보다는 서로의 단점은 보완하고 강점만을 살려 사용자들이 좀 더 직관적으로 기능을 이해하는데 어려움이 없도록 발전해 나가야 한다고 생각합니다.



*참고

http://info3579.blog.me/140204414207

http://blog.naver.com/windfalcon1/220054204544

http://egloos.zum.com/tirips/v/5866697


작가의 이전글 UI Animation
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari