조나단 이브 이후의 애플 아이콘 디자인의 변화


사실감있는 스큐어모피즘의 복귀?

아이폰을 맥북의 파인더로 연결했다가 끊은 후 갑자기 파인더에서 나타나는 저장장치들이 보였다.
애플의 플랫 디자인 정책을 따른 구글 드라이브 아이콘만 촌스럽게 평평하게 보이고, 유독 하드디스크는 진짜 하드디스크 처럼 사실적이다.
조나단 이브 이후의 애플 아이콘 디자인의 변화
사실은 하드디스크가 아니라 SSD인데 마침 저장 버튼을 3.5인치 디스켓으로 한 것과 비슷하다.
 
빅서를 처음 깔고 나서 아이콘을 보고 받은 인상이 기억났다.
빅서의 아이콘은 평평하고 그림 같은 이미지에서  볼륨감 있고 사실적으로 변했다. 아직은 플랫 디자인의 색감을 완전히 버리지 못한 과도기 같은 느낌이다.
애플의 OS UI (보통 사람들은 겉에 보이는 것만 생각하겠지만) 에 대한 총 책임을 지고 있던 엔지니어가 애플 지도 문책으로 나갔다. 그 후 만질 수 있는 외양을 디자인하던 조나단 이브가 UI 책임을 맡으면서 UI를 진짜로 겉에 보이는 것으로 만 아는지 그냥 이쁜 색깔에 세상의 물건이나 상징을 하던 모양을 모두 평평하게 만들었다.  그게 iOS 7 부터이다.
iOS는 바로 플랫 디자인으로 바뀌었고 음영이 있고 실제 물건 모습의 아이콘이나 디자인은 촌스럽게 보였다. 역시 OS 디자인이 앱에 지대한 영향을 주고 플랫 디자인이 이쁜건 사실이다. iOS 7 에서책 관리 앱의 실제 책장이 촌스럽게 보여서 결국 책장을 없앴다. 내 손안에 서재를 만들고싶어서 실제 책장 선반을 찍어서 만든 것인데 말이다.
 
이상하게 맥의 아이콘은 2D로 바뀌는게 느렸고 스큐어모피점을 완전히 버리지 않고 천천히 바뀌어갔다. 조나단 이브가 맥에 관심이 없었거나 맥 디자이너들이 말을 듣지 않았던지 모르겠다.
이상하게 하드 디스크의 아이콘은 3D 입체감에 실제감을 유지했다.
 
조나단 이브 이후의 애플 아이콘 디자인의 변화
 
주요 아이콘은 플랫 디자인을 버린 것 같고, 조금씩 더 사실적으로 되는 것 같다.
Xcode 의 망치는 정말 단단할 것 같은 모습이다.
조나단 이브 이후의 애플 아이콘 디자인의 변화
 
 

플랫 디자인에 스큐어모피즘이 가미된

캘린더 아이콘은 플랫 디자인이 메인이고 거기에 스큐어모피즘의 종이질감이 들어갔다.  확대해보면 알 수있다.
조나단 이브 이후의 애플 아이콘 디자인의 변화
 
사진앱도 비슷하다. 플랫 디자인일때의 기본 모양에 색이 겹치지는 부분은 볼륨감이 있어 이전 처럼 평평하지 않다.
조나단 이브 이후의 애플 아이콘 디자인의 변화
 
iMessage 나 페이스타임 아이콘은 예전과 같은 모양인데 플랫이 아니라 입체감을 느끼게 그림자가 있다.
조나단 이브 이후의 애플 아이콘 디자인의 변화
조나단 이브 이후의 애플 아이콘 디자인의 변화
키 체인앱 아이콘인데 고리가 진짜같다.
 
조나단 이브 이후의 애플 아이콘 디자인의 변화
미리보기앱 아이콘인데 파도의 흰 물거품이 진짜 파도같다.
 
조나단 이브 이후의 애플 아이콘 디자인의 변화
 
디스크유틸리티 앱 아이콘인데 하드디스크의 광택이며 고무가 진짜 같다.
조나단 이브 이후의 애플 아이콘 디자인의 변화
 
 
맥에서 라인과 카카오톡 아이콘은 플랫인데 애플 메시지만 혼자 그림자로 줘서 바꼈다.  애플이 하라는대로 했는 애플 혼자 음영을 줘버렸다.  라인과 카카오가 바꿀까? 눈치는 챘을까?
내 맥북의 독을 캡처해봤다.
조나단 이브 이후의 애플 아이콘 디자인의 변화
 
 
맥 빅서는 아이콘 이외에 UI는 크게 바뀐것은 없다.
그러나 아이콘은 UI 의 일부로 메뉴에 대한 상징이지만 룩앤필은 윈도우 테두리 등에 비해 모양과 색과 면을 쓸 수 있어 시각적인 룩앤필에서 중요한 역할을 한다.
맥 빅서의 아이콘은 이 곳에서 다운로드할 수 있다. 아이콘을 보면 “진짜 같다” 이런 표현이 나온다.  스큐어모피즘이란게 사람들이 컴퓨터를 익숙하게 하기 위해 실제 세상의 것을 컴퓨터에서 보이고 동작하는 것 처럼 느끼게 하는 것이니 말이다.
빅서를 보면 아직은 플랫 디자인에서 완전히 탈피한 것은 아니다. 어쩌면 플랫 디자인 덕분에 좀 더 세련된 스큐어모피즘인 것도 있고,  외장 하드 디스크 아이콘 처럼 쭈욱 스큐어모피즘인 것도 있다.
 
게을러서 블로깅이 많이 못했지만 그대로 몇개 한 것 중에 메타포의 활용, iOS 6의 passbook 에 보면 진짜 지갑이 아이폰안에 들어 있는 것 같은 애플 패스포트앱이 있다.  최고는 카드를 삭제할때 그냥 컴퓨터의 삭제가 아니라 종이를 가는 것처럼 카드를 갈아버린다.
솔직히 플랫 디자인이 이뻐서 실제 모습이 오히려 촌스러워보이는데, 난 여전히 이게 좋다.  엔지니어가 UI의 총 책임자인 시절이다.  요즘 UI 의 용어 의미가 많이 변해서 포토샵을 사용하는 시각디자너가 UI 디자이너인 경우를 많이 보는데, 조나던 이브 이전의 애플은 엔지니어였다.

 
내가 학부 때 한 텀 프로젝트에서 소프트웨어가 실제 처럼 보이게 하기 위해 윈도우가 나오기전임에도 MS-DOS 에 256칼라 그래픽 화면을 올리고 윈도우창을 만들고 마우스 에뮬을 해서 클릭하면 pcx 사진이 보이게 하는 이른바 윈도우의 WIMP 와 포인트 앤 실행을 구현했었다.  나중에 HCI를 공부하면서 제록사 파크의 스타오피스에서 나온 것이고 이게 애플과 마이크로소프트의 맥과 윈도우의 GUI 였던 것을 알았다.
세상에 편리한 도구를 만드는 사람으로서 컴퓨터에서 실제 세상의 일을 하게 하고 그런 것을 자연스럽게 하는 것에 대한 고민을 많이 한다.  그러면서 자연스럽게 UI에 고민을 많이 하고 자연스럽게 메타포에 대한 고민도 많이 한 것 같다.  김진우 교수의 HCI 개론의 메타포 챕터의 초안을 내가 쓴 것도 우연이 아니다. 이 글을 쓰면서 깨달았는데 내가 제품이나 서비스를 만들 때 오랫동안 관심 있게 보고 있는 것 중에 메타포도 있는 것 같다.
 







제휴 링크로 구매 시 제휴마케팅 활동의 일환으로 일정액의 수수료를 지급받아 콘텐츠를 제작하는데 큰 도움이 됩니다.



도움이 되셨다면, 댓글이나 소중한 커피 한 잔 부탁드려도 될까요?

커피 사주기
























당신이 좋아할 만한 글







플랭크스타: 플랭크 타이머

목표 시간, 세트 등 다양한 방식을 지원하는 플랭크 타이머, 음성 안내, 일별/월별/연도별 운동 기록 관리









Add a Comment

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다