 |
| iOS7 디자인 공개 |
WWMC2013에서 iOS7의 디자인이 드디도 공개되었습니다. 출시전부터 큰 디자인 변화를 예고해왔었는데, '흑백의 디자인이 될것이다' 라는 말이 나왔었습니다.
그래서 프라다폰의 디자인과 비슷한거 아니냐, 라는 예상을 하시는 분들도 꽤 있었습니다.
 |
| 프라다의 UI디자인 |
이 디자인이 모던하긴하지만, 색이 없어 너무 단조롭다는 문제점과, 또한 아이덴티티가 강하기 때문에 표절이 되는것이 아닌가 하는 의구심도 상당히 들었습니다.
과연 색을 포기할 수 있을까?
라고 생각했는데, 애플은 새로운 방법으로 해결했네요.
바로 흑백으로 UI를 디자인하는대신 배경에 blur를 넣어서 해결했습니다.
 |
| iOS7 디자인 개념 |
 |
| 컬러배경이 없다면 이런 문제가 생긴다 |
배경을 흰색으로 한다면, 아이콘이나 기타 UI를 흰색으로 칠할 수가 없게됩니다. 반대로 배경이 검정색이라면 검정색을 디자인 요소로 사용할 수가 없게 됩니다.
배경에 색을 넣으면 된다는 해결책은 얼핏 쉬워 보이지만, 그렇지가 않습니다. 이유는 가독성, 명시성 때문입니다.
실제로 컬러 배경을 배치한것은, 명도 대비측면에서는 회색배경을 설치한것과 유사한 효과를 가집니다.
이것은, 흰색과 검정색을 모두 디자인 요소로 사용할 수 있게 하지만, 명암의 대비효과는 당연히 떨어질 수밖에 없어, 눈으로 UI요소를 구분하기가 조금 어려워지게 됩니다.
명시성이 떨어지는것은 텍스트에 있어서는 가독성또한 떨어트리는 결과로 나타납니다.
게다가 여기서 끝이 아닙니다.
 |
| blur배경으로 명시성이 더욱 떨어진다 |
iOS7의 경우는, 단조로움을 해결하기 위해 단색 배경을 깔은 것이 아니라 아이콘이 있는 배경을 blur처리하여 명시성은 더욱 떨어집니다.
사실 배경을 blur처리한 예가 이전에도 있긴 있었습니다. 바로 윈도우의 에어로 디자인입니다.
 |
| 배경을 blur처리한 윈도우7 |
윈도우7은 Aero디자인이라고 이름붙인 창의 배경을 투명하게하는 기능을 가지고 있었습니다. MS는 그것이 가져올 수 있는 명시성의 저하를 투명 패널을 어둡게 한 후 흰글씨를 사용하고, 버튼, 아이콘등에는 검은 테두리를 사용하는것으로 해결했었습니다.
 |
| 윈도우7은 흰색에 검은 테두리를 썼다 |
즉 검정 아이콘이나, 검정 글씨는 사용하지 않았습니다. 그래서 급기야 윈도우8에서는 이 에어로 디자인을 포기합니다.
 |
| 윈도우8은 아예 aero를 없애버렸다 |
이렇게 단색의 창색을 사용하는대신, 디자인 요소로 흰색과 검정색을 모두 사용하게 되었습니다. (여전히 검정테두리 처리를 사용하는 안타까움..)
디자인적으로 당연한것이, 흰색과 검정색을 둘다 사용하기로 한 순간 잠재적 명시성이 절반으로 뚝 떨어지기 때문에, 거기서 더 떨어지는 명시성을 감수할 수가 없었던 것입니다.
그런데 애플은 한가지 중요한것을 깨달은 듯 한데, 바로 채색과 무채색의 대비입니다.
보색관계에 있는 색들도 대비를 일으키지만, 색이 있는 것과 없는것 또한 대비를 일으킵니다.
 |
| 색이 있는것은 추가적인 대비를 일으킨다 |
그래서 배경은 채색을 깔고, UI는 무채색을 깔면 배경을 blur 처리해서 떨어지는 명시성에 대한 보전이 일어날 것이라고 생각한듯합니다.
애플은 이 개념을 좀 더 심화하여, 배경과 UI 를 각각의 그룹으로 나누고, 배경은 채색대비만, UI는 명도대비만을 이용함으로서, 두개의 대비 그룹 자체를 또한번 대비시키는 방법으로 그룹 대비효과를 만든듯 합니다.
이 의도는 다른 스크린샷에서도 어느정도 드러납니다.
 |
| 무채색 배경에 색 글씨와 색 아이콘 |
 |
| 흰색(무채색)배경에 색 아이콘 |
 |
| iOS7 달력 |
결과적으로 미니멀함과 다채로움, 명시성을 다잡은 훌륭한 디자인이 아닌가 합니다.
ms의 윈도우8의 디자인도 상당히 비슷한 개념을 가지고 있는데, 애플이 좀더 전위적인 결과물을 내놓은것 같고, 더 최신의 것처럼 보입니다. 또한 MS의 디자인은 너무 차가운 느낌이 있는데, 애플은 그것도 해결한 것같습니다.
다른 회사들은 조금 난감하게 된게 아닌가 합니다. 사탕모양의 아이콘은 누구나 따라할 수 있었지만, iOS7의 디자인은 좀더 복잡한 디자인적 감각이 없으면 밸런스를 맞추기가 어려워보이기 때문입니다.
잘 봤습니다. 잘 모르는 부분을 알게되었네요. 고맙습니다.
답글삭제네 저도 감사합니다~
삭제아이폰 사용한지 3년된 사람입니다. 하지만 디자인을 이렇게 해석하는건 정말 처음 보네요. 정말 글 잘 읽었습니다. 새로운 부분의 시야가 트이는 느낌입니다. 디자인에 굉장히 무감각한데요. 오묘한 디자인과 색의 미학을 처음 맛봤네요. 대단합니다. 디자인을 한다는게 정말 쉬운게 아니었군요. 감각이 굉장히 중요하네요. 잘 봤습니다.
답글삭제네 좋게 봐주셔서 감사합니다.
삭제대단하십니다. 그저 스큐어모픽을 버리고 2D로의 변혁인것으로만 봤는데 이러한 분석이 가능하군요. 전체적인 컨셉트가 심플함이기 때문인지 배경들이 온통 화이트 일색이라는 의견들이 많이 보이더군요.
답글삭제네 그냥 2d로의 변화인것도 맞는 말씀인것 같습니다. 다만 그 과정에서 생기는 부작용을 해결하려고 여러가지 기법들이 쓰인것으로 생각하면 되지 않을까 합니다.
삭제수고하십니다. 예전에 옵티머스 G 포스팅으로 한 번 찾아와 댓글 쓴 적이있는데 우연찮게 다시 찾아왔네요. 즐겨찾기 등록하고 자주 들르겠습니다. 좋은 글 많이 써주세요^^
삭제네 반갑습니다^^ 더 열심히 써야겠네요ㅎ 감사합니다.
삭제무지한 저의 뇌에 신선한 충격을 주셨습니다.
답글삭제감사합니다.
네 저도 부족한글 좋게 봐주셔서 감사합니다.
삭제제 주변에 디자이너가 한명 있는데, 그 친구는 이 디자인이나 직관성을 보고 굉장히 놀라더라구요.
답글삭제어떻게 저런 생각을 했냐면서 말이죠,
맥신님의 설명을 들으니 그 친구가 감탄한 이유가 있었군요.
다만 저는 프로그래머 입장이라.... 저거 보고나서 디자인팀 닥달해야 겠다는 생각밖에 안 들었습니다... 거의 전부 다시 다 설계라서요................OTL
말이 좋아 디자인이 바뀐거지, 일종의 통일 된 제스쳐 방향(뒤로가기, 삭제 등)을 고려하고 짜려면... 뒤집어 업어야 겠더라구요....
기간 좀 넉넉히 주지 9월 공개라니 ㅠㅜ 두달만에 다하라니 ㅠㅜㅠㅜㅠㅜㅜㅠㅜㅠㅜㅠㅜㅠㅜㅠㅜㅠㅜㅠㅜㅠㅜㅠㅜㅠㅜㅜㅠㅜㅠㅜㅠㅜㅠ
고생이 많으시네요. 그래도 바쁘게 일할 수 있는게 좋은거죠~ 힘내세요^^
삭제잘 읽었습니다 ^_^
답글삭제네 감사합니다~
삭제레이어 개념을 명확히 하기 위해 블러처리 한거 아닌가요?
답글삭제발표회때도 그렇게 설명을 했던거 같은데. 이전에는 블러처리가 없었기 때문에
가리고 있는 부분이 뭐가 있는지 명확하지 않았는데 그걸 블러처리 하면서
레이어개념이 명확해졌다 이렇게 알고 있습니다.
네 애초에 이런 디자인을 하게된 원인은 그게 맞는것 같습니다. 제가 거꾸로 설명한꼴이 됬네요. 블러처리를 했을때 발생하는 문제점을 어떻게 해결했는지에 대한 얘기로 이해해두시면 될것 같습니다.
삭제전반적으로 답답함에서 벗어나고 시원해졌는데 호불호는 뭐 언제나 갈리죠. 일단 여론조사에서 사용자의 2/3는 7이 더 좋다고 하네요.
답글삭제네. 트랜드에 부합하는, 혹은 앞서가는 디자인이기 때문에 iOS7에 결국 다들 적응하게 될 듯 합니다.
삭제미니멀하고 직관적인 디자인에 역동적인 모션을 부여함으로
답글삭제전체적인 퀄리티가 엄청 높아졌다고 생각해요-
iOS 7을 직접 쓰면서 우와- 우와 하면서, 너무나 멋지고 좋게 보였는데
그 구체적인 이유를 포스팅을 보면서 알 수 있었던 것 같습니다.
멋진 분석이네요 ^^ㅋ
네 감사합니다~!
답글삭제좋게 봐주셔서 감사합니다. 기자분들은 이런저런 현실적인 문제로 자유롭게 쓰지 못하셔서 내용면에서 안좋게 보일수도 있을것 같습니다만 실은 글을 쓸수록 그분들이 잘쓰신다는걸 자주 느끼게 되는것 같습니다. 부끄럽네요~!
답글삭제네 저도 감사합니다~^^
답글삭제