brunch

Flat Design

플랫디자인

by Yunjung Seo

플랫디자인은 말 그대로 그림자나 엠보싱, 그라데이션과 같은 효과를 제거한 평평한 디자인 형태를 말합니다. 애플의 ios7을 기점으로 전 세계적으로 플랫디자인이 유행하게 되었는데요, 플랫디자인은 간결하고 단순하지만 한눈에 들어오게 해준다는 장점을 가지고 있습니다.



LINE

라인타입의 플랫 한 아이콘은 배경색이 강할 때 많이 활용되는 아이콘의 형태입니다. 얇은 선의 형태로 되어있기 때문에 복잡한 배경일지라도 한눈에 잘 인식할 수 있다는 장점이 있습니다. 더하여 요즘 다양한 디바이스에 맞는 반응형 라인 아이콘 역시 유행하고 있습니다. 각 디바이스에 맞게 굵기와 디테일에 차이를 두어 제공하고 있습니다.

https://dribbble.com/shots/1842984-Anicons-Practice
스크린샷 2015-09-16 오후 1.51.43.png http://pixelbuddha.net/freebie/100-free-responsive-line-icons



PLANE

앞서 아이콘이 라인으로만 아이콘을 표현했다면, 면을 색으로 채워 보여주는 아이콘 형태입니다. 라인타입보다는 좀 더 무게감을 느낄 수 있습니다.

http://www.freepik.com/free-vector/free-flat-icons-set_713117.htm
_______2.jpg
cccc.jpg https://www.pinterest.com/pin/184788390937464423/



COLOR

면타입 아이콘에 컬러를 넣어 생동감을 주고, 어떤 아이콘인지 한눈에 파악할 수 있도록 깔끔한 느낌을 주고 있습니다. 형태자체가 단순하기 때문에 다양한 컬러를 섞어 사용하거나, 여러 소재를 함께 놓아도 복잡해 보이지 않는 것이 플랫디자인의 특징이라고 할 수 있습니다.

스크린샷 2015-09-16 오후 4.46.49.png https://www.pinterest.com/pin/576038608564449512/


cc.jpg https://www.pinterest.com/pin/443886106999211357/



Long Shadow

플랫디자인은 그림자와 엠보스 같은 입체적인 효과의 사용을 자제했지만, 오브제를 더욱 잘 보이게 하기 위해 long shdow를 사용하고 있습니다. 롱쉐도우는 해가지는 오후 또는 새벽에 물체를 보는 듯이 긴 그림자 현상을 통해 드라마틱한 효과와 느낌을 선사해 줍니다. 보통 오브제에서 멀어질수록 흐려지거나, 같은 톤의 그림자가 끝까지 유지되는 그림자의 형태로 사용되고 있습니다. 롱쉐도우를 사용하여 자칫 단조롭게 느껴질 수 있는 플랫디자인의 단점을 보완해주는 역할을 하고 있습니다.

스크린샷 2015-09-16 오후 5.06.20.png https://www.pinterest.com/pin/351703052128071228/
b952fdb611379b4f775a17a10a916712.jpg http://segrami.tistory.com/16
스크린샷 2015-09-16 오후 5.09.21.png http://segrami.tistory.com/16



Half Shadow

플랫디자인 중 오브제의 절반에 음영을 주어 표현하는 것을 찾아볼 수 있습니다. 이런 쉐도우 효과를 통해 플랫 하지만 종이를 접은 듯 입체적인 느낌을 받을 수 있습니다. 이것 역시 롱 쉐도우와 마찬가지로 단순한 플랫디자인의 단점을 보완하고 완성도를 높여주는 효과를 줍니다.

e07b840def94432d921600ddd7332ff2.jpg https://www.pinterest.com/pin/390546598910767500/
super.png https://dribbble.com/shots/1642990-Super-Hero-Avatars




Skeuomorphism + Flat Design

실제 존재하는 사물과 가장 비슷한 형태를 유지하는 디자인이었던 스큐어모피즘은 플랫디자인이 나오면서 잘 사용되지 않고 있습니다. 단순하고 직관적인 플랫디자인은 실제를 나타내는 스큐어모피즘을 대신하였습니다. 그러나 점점 시간이 지나면서 플랫 하지만 좀 더 디테일을 살리고, 플랫 하지만 입체적인 느낌을 동시에 주는 스타일 역시 유행하고 있습니다. 이러한 스타일은 스큐어모피즘과 플랫디자인의 장점을 적절히 잘 섞어 활용했다는 생각이 듭니다. 그림자로 사물의 공간감을 나타내는 구글의 머터리얼 디자인 역시 플랫디자인에 입체를 섞어 표현했다는 느낌을 받을 수 있습니다.

6c8f634e26ae2c883ce1f95858af249f.jpg https://www.pinterest.com/pin/36099234489682194/
5239ccfd3ae1ecd38a1bbc198679a3fc.jpg https://www.pinterest.com/pin/533887730802965952/



ios7의 등장으로 강세를 보이고 있는 플랫디자인은 앞으로 한동안 계속 트렌드를 유지할 것이라 생각됩니다. 완전한 플랫디자인, 완전한 스큐어모피즘의 디자인 보다는 두 가지 트렌드를 적절히 섞어 사용자에게 한눈에 이해기 쉬운, 직관적인 디자인을 하는 것이 강점이 될 것이라고 생각합니다.


*참고 http://segrami.tistory.com/16

작가의 이전글Evolving the google Identity