덕분에 호흡곤란이 ㅜㅜ 청바지 허리가 꽉껴요.. 터질 것 같네요.
오늘 알아볼 내용은 최근 플랫디자인의 트렌드입니다.
바로 어제! 애플에서 아이폰6, 아이폰6플러스와 아이워치를 발표했죠.
애플이 추구하는 바 역시 플랫디자인! 바로 홈페이지를 들어가봤습니다.
홈페이지도 눈여겨 보아야 하지만 무엇보다 어플 목록의 어플버튼 UI를 지켜보시죠.
글자는 'Tue'라는 단어밖에 보이지 않고 나머지는 직관적으로 알아보기 쉬운 버튼 UI를 사용하고 있습니다.
누가 보더라도 이 버튼은 인터넷, 이 버튼은 메세지, 이 버튼은 설정, 이 버튼은 사진첩이라는걸 연상 할 수 있죠.
이는 iOS 6 버전까지 쓰였던 '스큐어모피즘'의 종말을 알리며 완전히 새롭게 도입된 iOS 이후의 플랫 UI의 결과물입니다.
스큐어모피즘을 안정화하는데까지 얼마나 많은 공을 들였을지 생각하면
이를 갈아엎는것도 애플 입장에선 피눈물이 났을텐데
그럼에도 최신 트렌드를 쫓아가고 또 유행시키는 애플 디자이너들은 정말 백번 존경해도 모자랄 정도입니다.
아이워치 웹페이지의 특징을 설명하자면..
1. 제품과 텍스트, 그 외엔 들어간 것이 전혀 없지만 고급스러운 분위기
2. 세리프(Serif)가 아닌 산 세리프(Sans-Serif) 글씨체를 사용해 읽기 쉽고 깔끔하게 연출
3. 그레이&화이트의 통일된 색감에 블랙 폰트로 통일감과 안정감을 제공
4. 제품을 보고 텍스트에 바로 집중할 수 있는 우상단 제품컷 - 좌하단 텍스트의 레이아웃 구조정도를 꼽을 수 있습니다.
정말 많은 연구 끝에 나온 디자인이라고 생각되네요.
이토록 플랫 디자인이라고 뿅~ 하면 쓩~ 하고 나타나는 결과물이 아닙니다.
무엇보다 중요한건 '색감' 그리고 '폰트', '배치구조', 마지막으로 '플랫함으로도 충분히 사용자에게 각인이 되는가?' 라고 생각합니다.
전세계적으로 적용되는 진리입니다.
- 좋지 않은(위험한) 플랫 디자인 5가지
1. 유도하는 행위를 잊게 만드는 것 : 심플하면서도 본분을 잊지 말아야 한다. 사용자들에게 직관적이어야 한다.
2. 깔끔하지 못한 문자의 사용 : 이정도로 번역하는게 좋겠네요. 산쉐리프 떡칠은 That's no-no.
3. 색상과 대비(대조)의 오용 : 사실 색감이 반쯤은 먹고 들어가죠. 맨 아래에서 다시 설명하겠습니다.
4. 시각적으로 보기가 좋지 않음 : Hierarchy가 '체계'정도로 번역되는데 어느곳에 눈을 둬야하는지 복잡할 때 이런 표현이 가능하겠네요.
5. 간단을 넘어서 없어 보임
이제 플랫 디자인들을 살펴보도록 할까요?
디자인이 잘된 예도 있고 안된 예도 있습니다. 메일, 카메라, 게임, 사진첩, 인터넷, 마켓, 유튜브, 음악, 캘린더, 계산기 등은
꽤나 직관적이지만 두번째 아이콘이나 열네번째 아이콘 같은 경우는 해당 제품에 익숙하지 않은 사용자라면 헷갈리기 쉬워 보입니다.
보기엔 깔끔하지만 사실 아이콘만으로는 정확한 설명이 어렵습니다.
그 아래에 볼드스타일(굵은) 폰트의 제목을 붙여 해당 서비스에 대한 납득을 시키고 있습니다.
제품을 사는데 필요한 버튼은 단 두가지입니다. 'LIKE'와 'BUY'. 나머지는 그 이후의 문제입니다.
다만 대규모 쇼핑몰에선 좀 더 많은 정보들이 필요하겠죠. 하지만 중소규모 쇼핑몰에서는 충분히 도입될만하다 생각됩니다.
아래에는 SNS로 이 제품에 대한 정보를 전송할 수 있습니다. 역시 아이콘만으로 디자인 되었습니다. 심플합니다.
'당신의 웹사이트에 비디오를 추가하세요!'이 목적에 부합하는 디자인에 충실한 완벽한 웹페이지라고 봅니다.
아래 메뉴는 생략되도 상관 없어보입니다. 'Create a free account'라는 버튼만 사라지지 않는다면 말이죠.
색상이 겹치는것이 많아 보이지만 배열의 변화로 지루하지 않게끔 영리하게 배치되었습니다.
Dreamstime이라는 곳에서 제작했나 보군요. 사실 눈에 쉽게 들어오는 구조는 아닙니다.
다만 플랫디자인으로 이런식으로 마인드맵을 정립할 수 있다는 것을 보여주고 싶어서 골라봤습니다.
텍스트로 심심하다면 플랫아이콘을 함께 사용한다면 어떨까요? 좋아 보이는군요.
플랫디자인의 정석을 보여주는 웹페이지들입니다.
간결한 산 세리프 폰트들과 심플한 아이콘, 파스텔톤의 은은한 컬러를 사용하여 단정함을 더해줍니다.
3차원은 커녕 포토샵을 만진적도 없더라도 그대로 따라그릴 수 있는 아이콘들이 주를 이룹니다.
군더더기 없고 간소화된 설명과 메뉴도 눈에 띄이네요.
적응하는데 단 1초도 걸리지 않는,언제 어디서라도 쉽게 viewing 할 수 있는 구조입니다.
클릭만 하세요. GET IT NOW FOR #20!
이렇듯 2013년부터 구체화된 플랫디자인을 간단하게 설명해주는 이미지입니다.
광원 효과, 입체감, 3차원 배경 들을 모두 무시하고 왼쪽이 강조하는 플랫디자인이 대세가 되었습니다.
당신이 왼쪽의 아이콘을 촘촘하게 설계하고 있을 때, 플랫디자이너들은 오른쪽 아이콘들을 완성하고 커피에 담배를 태우고 있겠죠.
물론 사용자들은 오른쪽 아이콘들에 박수를 칠 것입니다. '이게 바로 내가 원하던 디자인이었어! Simple is Best!'
UI를 구성하면 이런식으로 펼쳐지겠죠. 2문장이 단 1구절, 그나마도 1문장이 아닌 단어들의 나열의 연속입니다.
그러나 오히려 사용자는 선택하기가 편해집니다. eye seaching 한 번으로 이 페이지를 순식간에 훑어볼 수 있거든요.
역시 마찬가지겠지요. 딱딱한 흰바탕 입력창은 부드러운 EMAIL 한 마디로 녹아버리네요.
혹시 메인화면에서 안보이는 메뉴가 있나요? 세부 페이지에서 당신을 안내하게 될 것입니다.
이 모든것들이 마음에 든다면, 당신은 이 색상표를 유심히 보았다가 저장해 놓을 필요가 있습니다.
플랫디자인을 위한 컬러코드 색상표입니다. 적절하게 섞기만 한다면 반쯤은 이미 완성이 됩니다.
이렇게 플랫디자인은 어떤 것인지 훌륭한 예제들로 눈정화를 하는 시간을 가져보았습니다.
또 어떤 디자인이 우리에게 다가올지는 모릅니다. 그렇다면 우린 지금 가장 먼저 무엇을 해야 할까요?
DO IT.
지금 당장 '시작'해 보세요.
글쓰기