본문은 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)

스큐모픽 디자인을 플랫 디자인으로 바꿀 때는 아무것도 없는 밑바닥부터 시작해야 하는 것이 아닙니다. 대부분의 경우 레이아웃과 전반적인 접근방향은 동일하게 유지한 체 최근의 플랫 디자인 트렌드에 맞게 변형 해주면 됩니다.

단순화, 컨텐츠 중심, 그리고 그림문자 사용. 비록 플랫 디자인을 할 때 주의해야 할 사항이 이 세가지가 다는 아닙니다. 그러나 그 이야기는 다음 포스팅에 다루도록 하고 우선 이 세가지를 꼭 명심하시기를 바랍니다.


원문: Turning skeuomorphic design into flat design By Peter Vukovic

(퍼가시는건 좋지만 출처는 반드시 밝혀주세요. 위트 블로그까지는 아니더라도 해외 원문만큼은 꼭 명시 해주시면 감사하겠습니다. 원작자랑 약속했거든요.  _ 옮긴이)



블로그 추천글

GUI 디자이너가 저지르기 쉬운 실수

절대 지켜져야만 하는 UI 디자인의 7가지 법칙


신고


본문은 99 Designs의 Peter Vukovic가 작성한 '7 unbreakable laws of user interface design'을 원작자의 동의하에 번역 및 게시한 글입니다.


당신은 웹 디자이너인가요? 만약 그러하다면 당신은 UI 디자이너라는 말이기도 합니다. 그리고 미래에는 오히려 그 UI 디자이너라는 호칭이 웹 디자이너라는 이름보다 더욱 중요해질지도 모릅니다.

오늘날의 웹페이지들이 네비게이션과 메뉴 정도 만을 남긴 간단한 인터페이스라면, 기술의 발전으로 인해 우리가 앞으로 겪게 될 인터페이스는 아마 지금보다 더 유동적이고 개인에 최적화된 것들을 요구하게 될 것입니다.

피할 수 없이 받아들여야만 하는 이 흐름은, 우리가 UI 작업을 더욱더 세밀하게 해야 한다는 것을 의미합니다. 

자, 그럼 우리가 정확히 어떤 것들을 기억해야 하는지 살펴보도록 하겠습니다.


1. 명확성의 법칙(Law of clarity)

유저는 확실한 의미전달이 되지 않는다면 그 인터페이스를 사용하려 하지 않습니다.

혹시 지메일(Gmail)을 사용하고 계신가요? 저는 사용한지 좀 되었는데요. 최근 업데이트 이전까지만 하더라도 페이지 상단에 굉장히 명확한 텍스트 형식의 네비게이션 바를 달았었죠. 구글 캘린더, 드라이브, 시트 등 여러 구글 서비스들을 버튼 클릭 한번으로 사용 할 수 있게 되어 있었습니다.

그런데 구글은 갑자기 애매모호한 아이콘 하나로 모든 것을 ‘단순화’ 하고자 하였습니다. 결과적으로는 대부분의 사람들이 그 아이콘을 알아보지 못했고, 지메일은 결국 유저들의 원성을 들어야만 했죠.

사람들은 자신들이 이해하지 못하는 것들은 대부분 바로 지나쳐버립니다. 그건 인간의 자연적인 본능이죠. 어떤 기능인지 추측할 수 없는 인터페이스는 피하세요. 다들 그게 무엇인지 굳이 알고 싶어하지 않을 겁니다.


2. 우선순위의 법칙(Law of preferred action)

작업의 우선순위가 무엇인지 알 수 있다면 유저로서는 훨씬 더 수월해집니다.

위의 트위터(Twitter) 화면을 보세요. 새로운 유저가 이 화면을 본다면 무엇부터 해야 한다고 생각할까요?

물론 순서대로라면 트위터에 글부터 써야 하겠죠. 하지만 오른쪽 상단에 ‘새 트위터 작성하기’ 버튼은 상당히 명확하지 않습니다(1번 명확성의 법칙을 보세요). 그리고 왼쪽 사이드바에 있는 ‘새 글 입력창’은 또렷하게 드러나지 않고 배경색에 묻혀 버리기까지 하죠.

온전히 디자인적 시각으로만 바라보았을 때, 트위터에서는 아무래도 유저들이 검색을 하기를 바라거나 왼쪽 상단의 네비게이션 메뉴를 사용하기를 바라는 것 같습니다. 저 요소들이 가장 유명하니까요.

유저들로 하여금 다음에 무엇을 해야 할지 고민하게 만들어서는 안 됩니다. 우선순위는 반드시 확실해야만 합니다.


3. 문맥의 법칙(Law of context)

유저는 자신이 수정하고 싶은 내용의 설정 인터페이스(버튼)가 문맥상 그 내용 가까이에 있기를 원합니다.

여러분은 페이스북(Facebook)에서 이름을 어떻게 수정하시나요? 오른쪽 상단의 설정에 들어간 후, 계정 설정에 들어가서, 이름을 찾아서 클릭하고, 수정 버튼을 누를 겁니다. 링크드인(LinkedIn)에서는 어떻게 이름을 수정할 까요? 이름 옆에 연필 모양 버튼을 클릭하면 끝입니다.

유저들은 항상 인터페이스가 자신들이 수정하고 싶은 내용 옆에 있기를 원합니다. 이것은 실생활에서도 마찬가지로 적용되죠. 옥수수로 팝콘을 해먹고 싶다면, 전자레인지로 가서 전자레인지에 달려있는 버튼을 누르겠죠.

만약 전자레인지가 당신에게 계단을 내려가서, 지하실 문을 열고, 전기통을 열어서, 그 안에 있는 G-35버튼을 클릭하여 팝콘 프로그램을 가동해야 한다고 한다면(페이스북의 이름 바꾸는 작업과 비슷하다고 할 수 있죠) 상당히 편리하지 않을 겁니다.

유저들을 위해 간단하게 배치하세요. 무언가가 수정, 변경, 혹은 설정이 가능한 요소라면 그 설정 버튼을 문맥상 바로 그 옆에다가 둘 수 있도록 하세요.


4. 기본 설정의 법칙(Law of defaults)

유저는 거의 대부분 기본설정을 바꾸지 않을 겁니다.

)

이 전화 벨소리에 익숙하신가요? 당연히 익숙하실 겁니다. 한때 지구상에서 가장 유명했던 벨소리이니까요. 왜냐구요? 그건 이 벨소리가 핸드폰에 기본으로 설정된 벨소리였고 대부분의 사람들이 바꾸지 않았기 때문이죠.

기본 설정이 얼마나 강력한지는 아래 예시만 보아도 알 수 있습니다.

- 대부분의 사람들은 기본으로 설정된 배경화면과 벨소리를 그대로 사용한다.

- 대부분의 사람들은(당신을 포함하여) 집 TV 세트의 기본설정을 수정하여 사용하지 않는다.

- 대부분의 사람들은 기본 설정된 냉장고 온도를 바꾸지 않는다.

기본 설정은 눈에 크게 띄지는 않지만 이미 우리 세상을 지배하고 있습니다. 그러니 반드시 기본 설정이 최대한 간편하고 효율적일 수 있도록 해주세요. 아마 대부분의 사람들은 그것을 바꾸지 않을 테니까요.


5. 유도의 법칙(Law of guided action)

유저는 당신이 어떠한 행동을 유도한다면 아마 그렇게 할 겁니다.

유저가 무언가 하기를 ‘기대’하는 것과 실제로 그것을 ‘요청’하는 것은 다릅니다.

예를 들어 처음 링크드인에서 추천(endorsement) 기능을 만들었을 때, 이 기능이 무엇인지에 대해서 유저들 스스로 알아내기를 바라지는 않았습니다.

대신 그들은 눈에 명확하게 띄는 추천 배너를 오른쪽 상단에 나타나도록 하였죠. 여기에 ‘사람은 기본적으로 서로 추천하는 것을 좋아한다’는 사실이 더해져서 결국 이 기능을 큰 성공으로 이끌었습니다.

여기서 우리가 배울 수 있는 것은, 만약 유저가 무엇인가를 하기를 바란다면 주저하지 않고 ‘물어봐야 한다’는 것입니다.


6. 피드백의 법칙(Law of feedback)

유저는 당신이 명확하고 지속적인 피드백을 줄 때 더욱 확신을 가지게 됩니다.

이것은 아주 간단한 규칙입니다. 인터페이스가 유저에게 더 지속적으로 커뮤니케이션 할 수록, 유저는 더욱 확신을 가질 수 있습니다.

지메일은 좋은 피드백 기능을 가진 서비스의 훌륭한 예입니다. 여러분이 하는 모든 행위에서 지속적인 피드백을 받을 수 있습니다. 더 알아보기(Learn more), 되돌리기(undo), 기능을 통해서는 더 깊이 배울 수도 있죠. 이것은 유저 자기 자신이 인터페이스를 통제하고 있다는 느낌을 주고 더불어 제품을 다시 사용하고 싶다는 확신을 줍니다.


7. 간편함의 법칙(Law of easing)

유저는 복잡한 과제라 하더라도 단계별로 나누어 간편하게 주어진다면 그것을 실행 할 확률이 높습니다.

왼쪽과 오른쪽의 양식을 비교해보세요. 둘 다 비슷한 양의 항목이 있지만 오른쪽이 훨씬 더 작성하기가 편하죠.

우리 모두는 길고 복잡한 형태의 양식은 지겹고 번거롭기 때문에 싫어합니다. 하지만 그것을 상단의 메뉴에 둘로 나누어 놓는다면, 훨씬 더 관리하기가 쉬워지죠.

이것이 바로 간편함의 법칙입니다. 사람들은 차라리 하나의 큰 과제보다는 10개의 작은 과제를 해결하려 합니다. 작은 과제들은 우리가 힘들다고 느끼지 않게 해 줄 뿐더러, 과제를 해결 할 때마다 성취감을 주기도 하죠.


과연 이것들은 ‘유의사항’일까요, 아니면 반드시 지켜야 할 ‘법칙’일까요?

제가 위에서 단호하게 ‘법칙’이라는 단어를 사용한 이유가 있습니다. 이 법칙들을 위반 했을 시 단 한번도 좋은 결과가 나오는 것을 보지 못했기 때문이죠.

반 농담이지만, 이 법칙들을 어길 시에는 항상 나쁜 결과가 따릅니다. 그것은 주로 이 불쾌한 인터페이스에 대해 성난 유저들이죠.

UI 디자인은 아주 세밀하고 책임이 막중한 작업입니다. 위의 법칙들은 그 역할을 수행하는데 있어 조금이라도 도움이 될 겁니다.

만약 이 7가지 UI 디자인 법칙들을 어기고자 한다면, 반드시 그에 합당한 이유가 있기를 바랍니다.


원문: 7 unbreakable laws of user interface design by Peter Vukovic

(퍼가시는건 좋지만 출처는 반드시 남겨주시기 바랍니다. 위트 블로그까지는 아니더라도 해외 원문만큼은 꼭 명시해주세요. 원작자랑 약속했거든요. _ 옮긴이)


블로그 추천글

GUI 디자이너가 저지르기 쉬운 실수 3가지

사용자의 편리성을 고려한 모바일 어플리케이션 디자인 -`버튼` 편


신고


GUI 디자인 작업의 끝판왕. 바로 '디자인 가이드' 작업입니다.

원활한 UI 개발 작업을 위해, 디자인된 각 요소의 크기, 좌표 등을 정확히 작성하여 넘겨줘야 하는 부분이죠. 

생각할 부분을 크게 요구하지는 않지만 굉장히 반복적이고 번거롭기 때문에 스트레스를 받기 쉬운 작업입니다. 


이번 글에서는 디자인 가이드 작업중에서도 이미지를 잘못 적용하여 실패한 사례를 살펴보겠습니다.

그 주인공은 LOL(리그오브레전드)애플 입니다. 그럼, 바로 아래 그림을 보시죠. :)



  • 먼저 LOL(리그오브레전드)입니다. 저도 참 좋아하는데요, 주력 챔피언은 베이가 입니다.
    윗 부분의 메뉴 버튼은 롤오버를 하여도 문제가 없어 보입니다. 성공적으로 이미지를 적용하였네요.
    하지만 아랫 부분은 롤오버를 하였더니 순간적으로 이미지가 좌측으로 밀립니다. 아마 실수로 이미지의 크기를 다르게 잘랐거나 좌표를 잘못 입력한 것 같습니다.



  • 그리고 애플입니다. (iOS 6.1.3 기준)
    아이폰에서 웹브라우저 사파리를 이용하다가 발견하였는데 탭 하는 순간을 주목해 주세요. 탭의 성공을 알리는 화이트 이미지의 윗 부분이 잘려 있는 것을 볼 수 있습니다. 완벽을 추구하는 것으로 유명한 애플도 이런 실수를 하는 것을 보니 그들도 사람인가 봅니다. 아마도 디자이너가 이미지를 잘못 자른 것 같아요. :( 아니면 다른 이유가 있는지 궁금하네요.




이미지 슬라이스 작업을 하다보면 여러 이유로 이런저런 실수를 하게 되는데, 대표적으로 다음과 같은 상황이 있습니다.


보이는 것처럼 그림자가 적용된 디자인의 경우, 그림자가 어디에서 끝나는지 자세히 보고 잘라야 하지만 경계가 애매하여 잘못 자르는 경우가 종종 있습니다. 사실 이를 해결할 다른 방법은 딱히 없습니다. 단지 두눈을 부릅뜨고 다시 한번 더 정확히 잘라내는 수 밖에...

(물론 그림자 등은 개발에서 처리하는 경우도 있습니다. :D)


 



디자인 가이드 작업을 하다보면 당연히 이런저런 실수를 하게 됩니다. 하지만 최소한으로 줄이는 것이 최선이겠죠. UI 의 전체적인 완성도에 영향을 미치는 아주 중요한 부분이기 때문입니다.

 

 


 

 

만약 이런 실수를 줄이고자 한다면 어시스터 PS의 기능을 추천합니다. 선택된 레이어의 실제 크기를 인식하고(레이어 스타일 포함) 잘라주기 때문에 훨씬 빠르고 정확하게 이미지 슬라이스 작업을 할 수 있습니다. 아래 그림을 보시죠.

 

레이어를 선택하고 어시스터 PS의 'Layer Snips'를 클릭하면 레이어에 적용된 그림자를 인식하고 실제 크기 그대로 곧바로 슬라이스가 됩니다. 물론 여러개의 레이어를 동시에 처리할 수도 있습니다. :)  훨씬 정확하고 간편한 디자인 가이드 작업을 하고 싶다면 한번 http://assistor.net/ 를 방문해 보세요. 신세계가 열릴 수 도 있습니다.

 

 

저작자 표시 비영리 변경 금지
신고

안녕하세요. 가람유입니다! 오랜만에 인사드립니다. :)


아이폰 모바일 어플리케이션을 디자인을 할때 가장 고민 되는 것은 네비게이션 스타일링과 버튼 스타일링입니다.

작은 요소로 보이지만, 그 두가지 요소가 어플리케이션의 전체 분위기와 색상을 좌우하는 만큼 UI 스타일링시 크게 고려되어야 할 부분인데요.


포토샵으로는 원하는 텍스쳐를 통해 스타일링을 하기가 쉽지 않지요. 

GUI에 특화된 wit studio의 Codinator를 쓴다면 이러한 스타일링쯤이야 10초면 뚝딱 완성할 수 있을텐데 말이예요. ;_;


몇 가지 스타일링 된 네비게이션과 버튼 PSD를 준비해 보았습니다. 원하는 색상을 넣어 무궁무진한 스타일로 사용하실 수 있어요.

영리 목적, 비영리 목적의 사용이 모두 가능합니다~



navigation (all).psd


저작자 표시
신고

안녕하세요. 가람유입니다.
경험이 없을 초창기에는 모바일 어플리케이션을 디자인 하면서 난항을 겪는 부분이 있기 마련입니다.
그 중 한가지가 바로 '버튼의 크기'인데요. :)

iOS에서 기본으로 제공하는 버튼을 사용하는 경우는 예외지만, 대체로 디자인을 하다보면 새로 버튼을 디자인 하기 마련입니다.
하지만, 막상 예상치 못하게 크기가 너무 크거나 작은 경우가 있지요.
과연 사용자가 편리하게 사용할 수 있는 버튼의 크기는 어떻게 고려해야 할까요?
몇 가지 어플리케이션으로 살펴봅시다 (!) 

* 버튼의 크기는 모두 직접 측정하였으며, Shadow나 기타 Stroke에 외부 요인을 일부 배제하고 실질적인 버튼 영역만 계산하고자 하였습니다.
   실질적인 개발과정을 고려해 치수를 대부분 짝수로 맞추고자 하였습니다. (!) 
   + dpi 72의 640x960 기준입니다. 


 
 - 아이폰 어플리케이션 디자인을 하시는 분 들은 실제로 비교해 보시면서 감을 잡으시면 될 것 같네요. :)





'다음' 어플리케이션입니다. 실제 기기로 보시면 텍스트로 이루어진 버튼들은 작은 편 입니다.


그린 몬스터의 Flava 앱입니다. Flava는 대체로 아기자기 하기 보다는 큼직큼직한 버튼들이 눈에 확 들어옵니다. :)


개인적으로 SNS 앱 중 디자인이 가장 예쁘다고 생각하는 Path 입니다. 아기자기함이 바로 매력이라고 생각하는데요.
기기에서는 마냥 아기자기 해보였는데 , 예상외로 수치상으로는 작지 않은 편이네요. 최소한 이 정도 선은 고려하여 디자인 해야하지 않을까 합니다. 


이건 아마 거의 모르실 텐데, VoteSpot 이라는 미국 앱스토어의 어플리케이션입니다.
기기로 보면 버튼이 굉장히 작게만 느껴집니다. (수치상으로 옮겨보니 평균 이네요.)
예전에 이 앱을 써보고 나서 대체 버튼 크기는 어떻게 고려 해야 할까? 라는 의문점이 들었지요. :)

 

좀 감이 오시나요? 

갑자기 이러한 분석을 하게 된 이유는, 어플리케이션 디자인을 하다가 문득 막상 버튼을 만들었는데 "너무 작아서 누르지도 못하면 어떡하지?"
라는 생각이 문득 들었기 때문인데요. 그 해답을 다른 어플리케이션들은 어떻게 해결 했는지 알아보기 위함이였습니다.

참 신기한점은, 막상 수치상으로는 비교적 작지만 구조상으로 조화를 이루며 사람들이 편하게 사용하는 버튼들도 많다는 거예요.
 

결국 결론적으로, 가장 중요한 것은 바로 요 두가지가 아닐까 합니다.
버튼을 버튼답게 스타일링 하는 것과 최소한의 크기는 고려 하는 것(가로, 세로 30 pixel 이상) - 단지 제 소견일 뿐입니다. :)


+ 추가
애플의 iOS 휴먼 인터페이스 가이드 라인 문서가 있더군요. !
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html 

저작자 표시
신고