UX Design Pattern#4_List view_Flat GUI에서 경계 만들기

iOS7으로 업데이트 후 가장 실망한 부분이 Title Bar와 List view 사이를 가로지르는 흉물스런 선이었다. 내 눈엔 그 선이 너무 도드라져보여 Flat이 전혀 Flat해 보이지 않았기 때문이다. 

이 선이 꼴보기 싫은건 정말 나 뿐인가?

사실난 iOS7에 적잖이 실망했다. 애플 특유의, 자신의 스타일을 극단으로 밀어붙이는 오만함이 보이지 않았기 때문이다. iOS7의 GUI는 어딘지 모르게 만들다 만 느낌이 든다. 이것이 비단 나만의 생각일까?

진짜 해볼 마음이었다면

적어도 이 정도까지는 밀어붙어야 하지 않았을까? VSCO에서 경계를 짓는 건 선이 아니라 면, 즉 색이다. VSCO는 몇 안되는 색을 절묘하게 조합해 끔찍할 정도로 세련된 자기 스타일을 완성한다. 선은 단 한줄도 보이지 않지만 경계는 완벽하다.

  

VSCO와 iOS7을 보고 있으면 회화의 본질이 '윤곽(선, 형태)인지 색(면)'인지를 놓고 치열하게 다퉜던 미술사의 한 장면이 떠오른다. 스타일에 시비는 없으니 iOS7을 저열하다고 말할 수는 없다. 하지만 내가 불만인 건 iOS7이 알록달록 색으로 뭔가를 할려고 하다가도 결국엔 어색한 선으로 회귀해 도무지 섞이지 않는 두 스타일을 한 바구니 안에 담는다는 점이다. iOS7은 확실히 갈팡질팡한다. 리더의 부재 어쩌고 하는 얘기가 괜히 나오는 게 아니다.

요령있게, 적당히, 적당히

세상에는 언제나요령을 부리는 사람이 있기 마련이다. 사실 극단에 치우치기 보단 적당히 중간 자리에 서는 게 사는 데는 더 편하지 않은가. rdio는 선대신 그림자로 경계를 만든다. 스큐어모피즘(skeuomorphism) 시대만큼은 아니지만 적절한 그림자로 입체감을 만들어 Flat 디자인의 밋밋함을 줄이고 은근한 경계를 만든다. 

좌측의 경우 Title Bar 위, 아래에 반사광과 그림자가 들어가 있고 우측의 경우 하단의 그림자가 Layer를 표현한다

  

폰에서 확인해 보면 그림자의 유무가 만드는 차이가 확연히 느껴질 것이다

사실 그림자는 사용하는 순간 Layer를 암시하기 때문에 Flat theme의 일관성을 저해하는 치명적 요소다. 애플이 어색한 선을 사용한 것도 어쩌면 그림자만큼은 죽어도 허용할 수 없었기 때문일 수도 있다. 

This is REAL

사실 완벽한 Flat Design은 iOS7이 나오기 1년도 전에 이미 다른 App이 선보인 바 있다. 그 주인공은 바로 iOS Only 게임 LetterPress.

LetterPress의 List view에는 선도 그림자도 없다. 오로지 Typeface의 종류, 색, 굵기만을 이용해 서로를 구분할 뿐이다. 진짜 Flat이라고 말할 수 있으려면 적어도 이 정도는 되야 하지 않을까? 자신의 스타일을 극단으로 밀어붙이는 자신감이 그저 존경스러울 따름이다.