기본 콘텐츠로 건너뛰기

iOS7, 고정관념을 깬 놀라운 디자인 해결법



iOS7 디자인 공개


WWMC2013에서 iOS7의 디자인이 드디도 공개되었습니다. 출시전부터 큰 디자인 변화를 예고해왔었는데, '흑백의 디자인이 될것이다' 라는 말이 나왔었습니다.

그래서 프라다폰의 디자인과 비슷한거 아니냐, 라는 예상을 하시는 분들도 꽤 있었습니다.

프라다의 UI디자인

이 디자인이 모던하긴하지만, 색이 없어 너무 단조롭다는 문제점과, 또한 아이덴티티가 강하기 때문에 표절이 되는것이 아닌가 하는 의구심도 상당히 들었습니다.

과연 색을 포기할 수 있을까?
라고 생각했는데, 애플은 새로운 방법으로 해결했네요.

바로 흑백으로 UI를 디자인하는대신 배경에 blur를 넣어서 해결했습니다.


iOS7 디자인 개념
이 디자인이 놀라운 점은, 기존 프라다의 UI가 가졌던 한계를 극복했다는 것입니다. 단지 색이 들어가서 이쁘게 보인다는 점 외에도, 디자인 요소로서 검정색과 흰색을 모두 사용할수 있게 했다는 묘수가 있습니다.

컬러배경이 없다면 이런 문제가 생긴다

배경을 흰색으로 한다면, 아이콘이나 기타 UI를 흰색으로 칠할 수가 없게됩니다. 반대로 배경이 검정색이라면 검정색을 디자인 요소로 사용할 수가 없게 됩니다.

배경에 색을 넣으면 된다는 해결책은 얼핏 쉬워 보이지만, 그렇지가 않습니다. 이유는 가독성, 명시성 때문입니다.

실제로 컬러 배경을 배치한것은, 명도 대비측면에서는 회색배경을 설치한것과 유사한 효과를 가집니다.


이것은, 흰색과 검정색을 모두 디자인 요소로 사용할 수 있게 하지만, 명암의 대비효과는 당연히 떨어질 수밖에 없어, 눈으로 UI요소를 구분하기가 조금 어려워지게 됩니다.




명시성이 떨어지는것은 텍스트에 있어서는 가독성또한 떨어트리는 결과로 나타납니다.

게다가 여기서 끝이 아닙니다.

blur배경으로 명시성이 더욱 떨어진다

iOS7의 경우는, 단조로움을 해결하기 위해 단색 배경을 깔은 것이 아니라 아이콘이 있는 배경을 blur처리하여 명시성은 더욱 떨어집니다.

사실 배경을 blur처리한 예가 이전에도 있긴 있었습니다. 바로 윈도우의 에어로 디자인입니다.

배경을 blur처리한 윈도우7

윈도우7은 Aero디자인이라고 이름붙인 창의 배경을 투명하게하는 기능을 가지고 있었습니다. MS는 그것이 가져올 수 있는 명시성의 저하를 투명 패널을 어둡게 한 후 흰글씨를 사용하고, 버튼, 아이콘등에는 검은 테두리를 사용하는것으로 해결했었습니다.

윈도우7은 흰색에 검은 테두리를 썼다

즉 검정 아이콘이나, 검정 글씨는 사용하지 않았습니다. 그래서 급기야 윈도우8에서는 이 에어로 디자인을 포기합니다.

윈도우8은 아예 aero를 없애버렸다

이렇게 단색의 창색을 사용하는대신, 디자인 요소로 흰색과 검정색을 모두 사용하게 되었습니다. (여전히 검정테두리 처리를 사용하는 안타까움..)

디자인적으로 당연한것이, 흰색과 검정색을 둘다 사용하기로 한 순간 잠재적 명시성이 절반으로 뚝 떨어지기 때문에, 거기서 더 떨어지는 명시성을 감수할 수가 없었던 것입니다.

그런데 애플은 한가지 중요한것을 깨달은 듯 한데, 바로 채색과 무채색의 대비입니다.
보색관계에 있는 색들도 대비를 일으키지만, 색이 있는 것과 없는것 또한 대비를 일으킵니다.

색이 있는것은 추가적인 대비를 일으킨다


그래서 배경은 채색을 깔고, UI는 무채색을 깔면 배경을 blur 처리해서 떨어지는 명시성에 대한 보전이 일어날 것이라고 생각한듯합니다.

애플은 이 개념을 좀 더 심화하여, 배경과 UI 를 각각의 그룹으로 나누고, 배경은 채색대비만, UI는 명도대비만을 이용함으로서,  두개의 대비 그룹 자체를 또한번 대비시키는 방법으로 그룹 대비효과를 만든듯 합니다.


이 의도는 다른 스크린샷에서도 어느정도 드러납니다.

무채색 배경에 색 글씨와 색 아이콘

흰색(무채색)배경에 색 아이콘

iOS7 달력
물론 이런 식의 흰배경에 색 텍스트와 아이콘을 넣는 것은 많이 쓰는 방법이지만, iOS7을 유심히 보면 OK, Cancel같은 버튼의 텍스트에만 컬러를 넣는등 원근의 표현을 채색과 무채색의 대비로 표현하려는 의도가 많이 엿보입니다.

결과적으로 미니멀함과 다채로움, 명시성을 다잡은 훌륭한 디자인이 아닌가 합니다.

ms의 윈도우8의 디자인도 상당히 비슷한 개념을 가지고 있는데, 애플이 좀더 전위적인 결과물을 내놓은것 같고, 더 최신의 것처럼 보입니다. 또한 MS의 디자인은 너무 차가운 느낌이 있는데, 애플은 그것도 해결한 것같습니다.

다른 회사들은 조금 난감하게 된게 아닌가 합니다. 사탕모양의 아이콘은 누구나 따라할 수 있었지만, iOS7의 디자인은 좀더 복잡한 디자인적 감각이 없으면 밸런스를 맞추기가 어려워보이기 때문입니다.



댓글

  1. 잘 봤습니다. 잘 모르는 부분을 알게되었네요. 고맙습니다.

    답글삭제
  2. 아이폰 사용한지 3년된 사람입니다. 하지만 디자인을 이렇게 해석하는건 정말 처음 보네요. 정말 글 잘 읽었습니다. 새로운 부분의 시야가 트이는 느낌입니다. 디자인에 굉장히 무감각한데요. 오묘한 디자인과 색의 미학을 처음 맛봤네요. 대단합니다. 디자인을 한다는게 정말 쉬운게 아니었군요. 감각이 굉장히 중요하네요. 잘 봤습니다.

    답글삭제
  3. 대단하십니다. 그저 스큐어모픽을 버리고 2D로의 변혁인것으로만 봤는데 이러한 분석이 가능하군요. 전체적인 컨셉트가 심플함이기 때문인지 배경들이 온통 화이트 일색이라는 의견들이 많이 보이더군요.

    답글삭제
    답글
    1. 네 그냥 2d로의 변화인것도 맞는 말씀인것 같습니다. 다만 그 과정에서 생기는 부작용을 해결하려고 여러가지 기법들이 쓰인것으로 생각하면 되지 않을까 합니다.

      삭제
    2. 수고하십니다. 예전에 옵티머스 G 포스팅으로 한 번 찾아와 댓글 쓴 적이있는데 우연찮게 다시 찾아왔네요. 즐겨찾기 등록하고 자주 들르겠습니다. 좋은 글 많이 써주세요^^

      삭제
    3. 네 반갑습니다^^ 더 열심히 써야겠네요ㅎ 감사합니다.

      삭제
  4. 무지한 저의 뇌에 신선한 충격을 주셨습니다.
    감사합니다.

    답글삭제
    답글
    1. 네 저도 부족한글 좋게 봐주셔서 감사합니다.

      삭제
  5. 제 주변에 디자이너가 한명 있는데, 그 친구는 이 디자인이나 직관성을 보고 굉장히 놀라더라구요.
    어떻게 저런 생각을 했냐면서 말이죠,

    맥신님의 설명을 들으니 그 친구가 감탄한 이유가 있었군요.

    다만 저는 프로그래머 입장이라.... 저거 보고나서 디자인팀 닥달해야 겠다는 생각밖에 안 들었습니다... 거의 전부 다시 다 설계라서요................OTL

    말이 좋아 디자인이 바뀐거지, 일종의 통일 된 제스쳐 방향(뒤로가기, 삭제 등)을 고려하고 짜려면... 뒤집어 업어야 겠더라구요....

    기간 좀 넉넉히 주지 9월 공개라니 ㅠㅜ 두달만에 다하라니 ㅠㅜㅠㅜㅠㅜㅜㅠㅜㅠㅜㅠㅜㅠㅜㅠㅜㅠㅜㅠㅜㅠㅜㅠㅜㅠㅜㅜㅠㅜㅠㅜㅠㅜㅠ

    답글삭제
    답글
    1. 고생이 많으시네요. 그래도 바쁘게 일할 수 있는게 좋은거죠~ 힘내세요^^

      삭제
  6. 잘 읽었습니다 ^_^

    답글삭제
  7. 레이어 개념을 명확히 하기 위해 블러처리 한거 아닌가요?
    발표회때도 그렇게 설명을 했던거 같은데. 이전에는 블러처리가 없었기 때문에
    가리고 있는 부분이 뭐가 있는지 명확하지 않았는데 그걸 블러처리 하면서
    레이어개념이 명확해졌다 이렇게 알고 있습니다.

    답글삭제
    답글
    1. 네 애초에 이런 디자인을 하게된 원인은 그게 맞는것 같습니다. 제가 거꾸로 설명한꼴이 됬네요. 블러처리를 했을때 발생하는 문제점을 어떻게 해결했는지에 대한 얘기로 이해해두시면 될것 같습니다.

      삭제
  8. 전반적으로 답답함에서 벗어나고 시원해졌는데 호불호는 뭐 언제나 갈리죠. 일단 여론조사에서 사용자의 2/3는 7이 더 좋다고 하네요.

    답글삭제
    답글
    1. 네. 트랜드에 부합하는, 혹은 앞서가는 디자인이기 때문에 iOS7에 결국 다들 적응하게 될 듯 합니다.

      삭제
  9. 미니멀하고 직관적인 디자인에 역동적인 모션을 부여함으로
    전체적인 퀄리티가 엄청 높아졌다고 생각해요-
    iOS 7을 직접 쓰면서 우와- 우와 하면서, 너무나 멋지고 좋게 보였는데
    그 구체적인 이유를 포스팅을 보면서 알 수 있었던 것 같습니다.
    멋진 분석이네요 ^^ㅋ

    답글삭제
  10. 인터넷 기자들보다 글 잘 쓰십니다.

    답글삭제
    답글
    1. 좋게 봐주셔서 감사합니다. 기자분들은 이런저런 현실적인 문제로 자유롭게 쓰지 못하셔서 내용면에서 안좋게 보일수도 있을것 같습니다만 실은 글을 쓸수록 그분들이 잘쓰신다는걸 자주 느끼게 되는것 같습니다. 부끄럽네요~!

      삭제

댓글 쓰기

이 블로그의 인기 게시물

Blurred lines의 뜻?

얼마전 Robin Thicke의 Blurred lines라는 노래가 빌보드 1위를 차지하며 큰 인기를 끌었습니다. 그 뜻이 궁금하여 찾아보니, 이런 정도로 검색이 되네요.  Come on people "Blurred Lines" says it all. He says "I know you want it" and "But you're a good girl". If you go to any club or party whatever the messages that women give out are confusing. As in blurred lines..... Dirty dancing, dressing like a stripper and being as seductive as hell but men can see that they are young and appear to be hesitant when the time comes to follow through on their actions. Therefore it is hard to know what they really want. I see a lot of girls acting out on the dance floor then the lights come on and they flee. Blurred lines....   출처 :   http://songmeanings.com/songs/view/3530822107859454162/ The term "blurred lines" generally refers to a lack of boundary or distinction between two or more things. In the case of the song, Thicke is referring to the small boundary between love and hate, like and dislike. It

수액(Swag) 의 참뜻 ㅋ

제 블로그 구독하시는 분이 있으신지 모르겠지만 좀 다른 느낌의 포스트를 해보려고 합니다. 일단 IT블로그로 정해놓은건 아니니까요. ㅎ 최근 지드래곤의 신곡 크레용에 쓰인 단어 SWAG. 무한도전에서 박명수씨가 이걸 개그로 승화시키면서 무슨 뜻인지 궁금해하시는 분들이 좀 계시는 듯 합니다. 수액~ 수액~! 보통 간지 라고들 설명하시는데, 실제 뜻은 그것보다는 조금 더 구체적입니다. 디자이너의 멋진 옷을 차려입은 슈퍼 모델을 보면 간지는 나지만 SWAG이라고는 하지 않거든요. 일단 Swag의 뜻을 이해하려면 Swaggin' (Swagging)을 먼저 아는게 빠를 듯 합니다. 일단 위 영상은 크리스 브라운이 더기(dougie) 댄스를 추는 동영상입니다. 보시면 흑인 특유의 몸놀림이 느껴지시죠? Swagging이란것은 더기뿐 아니라 어떤 춤이든지, 혹은 춤이 아닌 다른 어떤 것이든  "여유있게 강약을 섬세하게 컨트롤 할 수 있음을 동물적으로 뽐내는것" 이라고 할 수 있습니다.  특히 몸으로 표현하는것을 스웨깅이라고 하고 그걸 할 수 있는 사람에게  "He got swag~!" 이라고 표현해줍니다. 리듬을 아주 자연스럽게 잘 탈 뿐만 아니라, 그것을 자랑하는 허세까지 담아내야 Swag 이라 할 수 있습니다.  여유와, 섬세함과, 약간의 허세까지 느껴지는것이 필수요소입니다. YG의 가수들은 이 세가지를 다 갖춤과 동시에 표정 연기력까지 갖추었으니 최고인건 당연하겠죠? ㅎ 

아이폰5C, 아이폰5S발표 - 애플 최악의, 최대의 실수.

오늘 아이폰5c와 5s가 시원하게 발표되었습니다. 일단 제품 자체는 두가지 제품 다 루머의 내용과 크게 다르지 않게 나온듯 합니다. 이전부터 줄줄이 나왔던 두 제품에 대한 루머와 소식을 듣는동안 이번 애플의 전략 변화가 어떤 결과를 가져올지에 대해 짬짬히 생각을 해보았지만 모든것이 확정되지 않은 상태에서는 결과를 예측하기가 좀 어렵더군요. 그래서 이번 키노트를 관심있게 보게 되었는데, 키노트를 보던중 애플이 실수했구나. 하는 생각이 굳어지는 시점이 있었습니다. 바로 아이폰5의 단종 이야기가 나왔을때입니다. 애플은 아이폰5를 단종시키고, 아이폰5c를 아이폰5의 스펙정도로 설정했습니다. 이것은 결국 아이폰5를 아이폰5c로 대체하겠다는 이야기였습니다. 그럴 수도 있겠거니 하고 넘어갈 수도 있는 부분이지만, 의도를 깊게 생각해볼 수록 이게 작은 실수가 아니라는 생각이 들었습니다. 포지셔닝의 문제 어느것을 고를까요? 아예 안고를지도.. 5c의 자기잠식의 문제는 많이들 이야기하는 부분입니다. 휴대폰은 1인이 1대씩만 구입하는것이 대부분이기 때문에 5c를 사는 사람은 5s를 사지 않을것을 상식적으로 쉽게 알 수 있습니다. 그런데 마케팅 전략에서의 포지셔닝은 이것보다 좀 더 깊은 문제를 이야기합니다. 자기잠식의 문제는 그 제품을 구입했을때의 이야기입니다. 하지만 포지셔닝 전략은 구입 전의 구매자의 심리 상태를 중요하게 여깁니다. 한번 그림을 그려봅시다. 휴대폰을 사러 마켓에 갔다고 가정합시다. 진열대에 아이폰5c와 아이폰5s 두가지가 있습니다. 두 제품의 생김새는 비슷해보이고 역할도 비슷해 보입니다. 그 중 하나는 성능이 낮고 재질이 플라스틱인 대신 저렴합니다. 나머지 하나는 성능이 높고 재질이 좋고 비쌉니다. 이 때 구매자는 어떤 생각을 하게될까요? 구매자는 상대적인 생각을 하기 시작합니다. 즉 아이폰5c를 볼때 아이폰5s를 떠올리고, 아이폰5s를 볼때 아이폰5c를 떠올리게 됩니다. 아이폰5c를 보면 이런 생각이 듭니다