웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Webdesign Report
HOME WEBDESK Webdesign Report
스큐모픽 디자인을 플랫 디자인으로 바꾸는 방법
Posted by kimdirector | 2014.05.16 | Hit : 3719
스큐모어픽 플랫 디자인 iOS
목록보기이전보기
본문은 99 Designs의 Peter Vukovic가 작성한 'Turning skeuomorphic design into flat design'을 원작자의 동의하에 번역 및 게시한 글입니다.
 
인정 안 할 수가 없을 것 같습니다. 한 시대를 풍미했던 스큐어모픽(Skeuomorphic) 디자인에도 이제 끝이 도래 한 듯 싶네요. 얼마 전부터 불안한 모습을 보이더니 결국 그 시대를 이끌었던 애플이 iOS7을 발표함으로서 본인들의 손으로 직접 마지막 비수를 꽂아버렸습니다.(참고_ 애플, 그리고 스큐모픽)
 
이제는 전 세계의 여러 디자이너들과 회사들이 너도나도 앞다퉈 스큐어모픽 디자인을 납작한 플랫(Flat) 디자인 형태로 바꾸며 본인들의 실력을 입증하려 하고 있습니다.
 
결론적으로 우리가 이 흐름을 받아들이건 말건, 이 세상은 이미 ‘플랫화’ 되어가고 있습니다. 하지만 무작정 맨땅에 헤딩을 해야만 하는 것은 아닙니다. 여러분이 사용하던 이전의 스큐어모픽 디자인이야말로 플랫 디자인을 시작하기 가장 적합한 곳입니다. 아래는 스큐어모픽 디자인을 플랫화 시키는 바로 그 과정에서 꼭 알아야만 하는 내용들 입니다.
 
 
단순하게, 더 단순하게(Simplify, then some)
 


단순함에서 그 이상의 단순함으로: CloudApp을 단순화한 어느 한 디자이너의 작품
 
플랫 디자인은 중요하지 않은 모든 요소들을 제거하는 것을 의미합니다. 베벨, 텍스쳐, 그림자, 그라디언트 등 여러 다양한 형태의 장식요소들을 말이죠. 멋과 시각적 화려함이 아닌 사용성에 100% 치중 되어야 합니다.
 
이 사실을 숙지하고 레이아웃을 새롭게 배치해보세요. 기능이 없거나 존재 할 이유가 없는 디자인 요소들은 전부 제거해야 합니다. 물론 이런 형태로 디자인을 하다 보면 지나치게 밋밋하고 재미없어 질 수도 있습니다. 하지만 그건 어디까지나 컨텐츠를 어떻게 활용 해야 할지에 대해서 정확히 이해하지 못했기 때문에 발생하는 문제입니다.
 
 
컨텐츠가 최우선(Content is king)
 


iOS 7에 맞추어 새로 디자인 된 Limelight 앱,  이전 3D 책장 형태와는 다르게 영화 표지들이 플랫 디자인에 맞추어 변형된 것을 볼 수 있습니다.
 
스큐어모픽 디자인은 사람들이 그 인터페이스 자체와 사랑에 빠지게 하는데 중점을 두었습니다. 디테일 한 텍스처와 색감, 빛과 엠보싱 효과들이 아주 친근하고 매력적으로 다가왔었죠.
 
그러나 플랫 디자인은 사람들로 하여금 인터페이스를 잊고 컨텐츠와 사랑에 빠지게 하는데 초점을 맞추어야 합니다. 다시 말하자면 깔끔하고 잘빠진 금속 재질의 볼륨 버튼 이미지보다는 가수가 노래하는 사진이 더 중요하다는 것이며, 당신의 3D 책장의 재질보다는 거기에 꽂혀있는 책의 내용이 디자인의 핵심이라는 것을 의미합니다.
 
항상 컨텐츠를 최우선에 두고 아름답게 표현해보세요. 특히 훌륭한 사진, 타이포, 색감은 반드시 큰 도움이 될 겁니다.
 
 
그림문자 사용하기(Think pictograms)
 


상단: iOS7 느낌의 아이콘  / 하단: 국립공원 서비스 그림문자(Pictogram). 둘의 유사성을 눈치 채셨나요?
 
플랫 디자인은 화려하고 디테일 한 아이콘을 사용하지 않습니다. 오히려 옛날 그림문자(Pictogram) 형태의 디자인을 사용하죠.
 
그림문자는 이해하기 쉽고 단순하며 의미전달의 확실 합니다. 그렇기 때문에 추가적인 설명이 필요 없고 주로 공항이나 지하철 및 기타 공공장소에서 사용되죠.
 
아이콘 디자인을 할 때는 반드시 이 내용을 참고하세요. 아이콘 하나하나가 “납작(플랫)”하게 만드는데서 그치는 것이 아니라 그것이 무엇을 의미하는지 확실히 전달 될 수 있도록 해야만 합니다.
 
 
결론(Conclusion)
 
스큐어모픽 디자인을 플랫 디자인으로 바꿀 때는 아무것도 없는 밑바닥부터 시작해야 하는 것이 아닙니다. 대부분의 경우 레이아웃과 전반적인 접근방향은 동일하게 유지한 체 최근의 플랫 디자인 트렌드에 맞게 변형 해주면 됩니다.
 
단순화, 컨텐츠 중심, 그리고 그림문자 사용. 비록 플랫 디자인을 할 때 주의해야 할 사항이 이 세가지가 다는 아닙니다. 그러나 그 이야기는 다음 포스팅에 다루도록 하고 우선 이 세가지를 꼭 명심하시기를 바랍니다.
 
 



 
Posted by kimdirector | 2014.05.16 | Hit : 3719
Origin http://blog.witstudio.net/237
Tags 스큐모어픽 플랫 디자인 iOS
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webdesign&no=384

COMMENT
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
글꼴 이벤트 BIP 코딩 Material Design RIA 웹디자이너 디자인 웹디자인 스마트폰 성형외과 클라우드 에버노트 환경 솔루션 HTML5 로고 삼성전자 성과관리 로고 디자인 일러스트 온라인 서비스 디자인 포토샵 야놀자 IT 브로슈어 웹 기획자 로즈쿼츠 메일폼 오프라인 타블릿 무료이미지 소통 가이드 소셜미디어 패키지디자인 사용성