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