트렌드를 이끌어가는 애플 디자인
WWDC 21을 통해 변화된 디자인에 대해서
구글에 이어 이번에는 애플이 WWDC 21을 통해서 iOS 15, iPadOS 15, watchOS 8, tvOS 15 및 macOS Monterey와 같은 새로운 운영체제들을 발표하였습니다. 맥북이나 애플 워치 같은 새로운 하드웨어의 발표는 나오지 않았지만 WWDC는 'worldwide developer conference'의 약자로 주로 소프트웨어를 발표하는 자리인걸 감안하면 실망할 부분은 아니라고 생각합니다.
작년에는 WWDC에 대해서 기능과 디자인을 나누어서 글을 작성하였는데 이번 글에서는 기능적인 면보다는 새롭게 바뀐 디자인들에 대해서 중점적으로 이야기를 하도록 하며 기능적인 부분들은 글 하단에 링크를 통해서 확인하시면 됩니다.
새롭게 설계된 Safari
이번에 새롭게 바뀐 사파리는 모바일에서 사용자가 한 손으로 쉽게 제어할 수 있도록 브라우저 인터페이스를 개선하고 콘텐츠 공간을 충분히 확보하는 새로운 탭 디자인을 선보였습니다. 또한 기존의 여러 탭 간의 이동을 좌우 스와이프로 이동하는 새로운 인터렉션으로 제시하였습니다.
애플이 왜 이렇게 디자인하였는지를 생각해보면 기존의 모바일 브라우저는 상하단 탭 바가 화면의 너무 많은 공간을 차지하여 콘텐츠 공간이 충분히 확보되지 않았습니다. 하단에 위치한 북마크나 내보내기 같은 버튼은 대부분의 사람들은 잘 이용하지 않으며 iOS를 사용하는 대부분의 사용자들은 뒤로 가기나 앞으로 가기 버튼이 좌우 스와이프로 대체된다는 점을 오랜 경험을 통해 충분히 인지하고 있습니다.
애플은 이와 같은 문제점들을 해결하기 위해 기존의 상단에 주소 탭이 존재해야 한다는 고정관념을 버리고 주소, 탭 모아보기, 더보기 버튼만으로 새로운 탭을 구성하고 많이 사용하지 않는 나머지 버튼들은 위의 오른쪽 이미지와 같이 더보기 버튼을 클릭하면 나오는 Action Sheet에 들어가 있는 새로운 브라우저 인터페이스를 제시하였습니다.
GIF 로딩이 안되면 클릭해서 봐주세요만약에 여러 가지의 탭들이 있다면 그것을 인식시켜주기 위하여 활성화된 탭 양옆에 비활성화된 탭이 모서리가 걸치게 배치되어 좌우에 다른 탭 바가 존재한다는 것을 알려주기 위한 공간배치를 하였습니다. 그리고 화면을 스크롤하면 하단에 작게 주소만 위치하여 콘텐츠 공간을 더욱더 넓게 활용할 수 있게 하였습니다.
새로운 macOS Monterey에서도 사파리는 더욱 많은 콘텐츠 공간에 확보를 할 수 있도록 디자인되었습니다. 새로운 플로팅 탭 디자인을 통해서 검색바와 탭 그룹을 크롬과 비슷하게 배치하고 현재 사이트의 색상이 자동으로 탭 영역에 적용되어 웹 페이지를 창 가장자리까지 웹사이트의 영역처럼 보이게 하여 웹사이트 영역이 넓어 보이도록 디자인하였습니다.
애플이 이번 사파리에서 가장 신경 쓴 부분은 바로 사용자가 좀 더 웹서핑을 원활하게 할 수 있도록 충분한 콘텐츠 공간을 확보하는 게 디자인의 주요 키포인트였습니다. 사용자가 웹 서핑하는 방식에 맞게 재 설계된 새로운 탭 막대는 화면 공간을 최대화하고 스크롤하여 탐색할 때 방해가 되지 않으며 하단에서 쉽게 접근할 수 있으므로 엄지 손가락만으로 탭을 탐색하고 이동할 수 있는 새로운 사파리 인터페이스는 새로운 브라우저 경험을 제시하는 좋은 예시인 것 같습니다.
메시지 앱
이번 메시지 앱은 디자인이 크게 바뀐 점은 없고 주로 공유 기능에 업데이트가 주를 이루었지만 제가 메시지 앱에 대해서 소개해드리는 이유는 좌우로 스와이프가 가능한 새로운 이미지 스택을 선보였는데 그동안에 다른 메신저 앱들에서 제시된 적 없었던 디자인이 굉장히 신선하게 다가왔기 때문입니다.
카톡이나 라인 등 기존의 많은 메신저 앱들은 이미지를 여러 장 전달하면 최대 크기의 네모 박스 안에 이미지들이 리사이징 되어 격자모양으로 전달이 되었는데 이번 메신저 앱에서는 이미지를 사선으로 여러 장이 겹쳐있으며 좌우로 스와이프 하여서 이미지들을 볼 수 있도록 구성하였습니다.
만약 사진을 간단히 확인만 하고 싶다면 위의 영상처럼 작은 모바일 화면 안에서 더욱 작게 리사이징 된 이미지 모음을 보는 것보다 큰 이미지를 스와이프 하여 가볍게 보는 방법은 매우 효과적인 디자인이라고 생각합니다. 하지만 카톡처럼 묶어 보내기와 그냥 보내기를 구분할 수 없다는 점은 아쉬운 부분이었던 것 같습니다.
3D 애플 지도
이번 애플 지도는 최대로 멀리 확대하면 구글어스처럼 지구본 모양까지 볼 수 있는데 구글어스와 거의 흡사한 퀄리티를 자랑합니다. 아직 소수의 도시에서만 진행되고 있으며 이전에 소개된 거리의 경사도 그래프가 아직도 적용되지 않은걸 보면 우리나라의 도시들에 적용되기까지는 어느 정도 시간이 걸릴 것 같습니다.
지도에는 각 도시의 랜드마크들이 3D 그래픽으로 표현되어 있으며 나머지 건물들은 입체적인 회색 건물로 표현하고 나무나 도로 등이 더욱 섬세하게 표현되었습니다. 다른 지도 앱들에서는 기존의 위성사진들에 입체감만 주어서 매우 부자연스럽게 느껴졌는데 이처럼 3D로 표현되니 위성사진보다 오히려 더 자연스러운 느낌을 줍니다.
이번 지도에서는 다크 모드까지 지원되었습니다. 낮과 밤에 차이점을 단순히 어둠으로 주는 게 아닌 건물 아래에서 비추는 조명으로 밤을 좀 더 생생하게 표현한 점은 기존에 색만 바꾸는 다크 모드보다 더욱 디테일한 느낌입니다.
이번 애플 지도의 3D 기술의 정점은 내비게이션 기능에 있었습니다. 복잡한 교차로가 3차원으로 표현되어 기존의 2D보다 더욱 쉽게 길을 찾을 수 있도록 표현되었습니다. 몇 년 전부터 꾸준히 애플 카에 대한 루머들이 나오고 있는데 이와 같은 지도 앱의 업데이트가 애플 카의 큰 그림 중 하나이지 않을까 하는 개인적인 생각입니다.
더욱 그룹화된 설정 화면
이번 WWDC영상에서는 확인할 수 없었지만 베타 테스트를 참여하면서 가장 먼저 눈에 들어온 부분은 바로 설정 화면이었습니다. 기존의 설정 화면과는 다른 박스 형태로 이루어진 메뉴 그룹을 확인할 수 있었습니다.
저는 이것은 애플이 묶여있는 그룹들의 그룹화를 더욱 강화시키기 위한 디자인 변화라고 생각합니다. 제가 이전에 시각의 심리학적 이론인 게슈탈트 이론에 대해서 설명드린 적이 있는데 설정 디자인에 게슈탈트 이론을 대입해보면 왜 더 그룹화되어 보이는지 이해할 수 있습니다.
기존의 iOS14.5에는 게슈탈트 이론 중 '연속성'이라는 규칙이 적용되어 연속적으로 배치된 구성요소들을 그룹으로 인식하게 배치하였지만 새로운 iOS15에서는 '연속성'과 더불어 '공통성'이라는 '닫힌 공간에 존재하는 요소들을 그룹으로 인식한다'라는 규칙이 추가적으로 적용하여 더욱 그룹화되어 보이는 느낌을 받습니다.
하지만 이런 설정 영역들에서는 그룹의 타이틀이나 하단에 디스크립션이 들어가는 정보영역들이 존재하는 경우가 많이 있습니다. 이러한 정보영역들은 박스의 시작 부분에 맞추거나 텍스트 시작 부분에 맞추는데 아마도 모서리가 둥근 박스가 적용되어 텍스트 라인에 맞추는 선택을 하지 않았을까 생각합니다.
개인적인 의견 차이가 있겠지만 텍스트와 그리드 라인을 맞춰서 배치하는 부분은 텍스트들이 하나의 그리드 라인에 배치되어 매우 안정적으로 보이지만 위의 이미지처럼 두 개의 안전 영역이 생겨 콘텐츠의 가로폭이 매우 좁아지기 때문에 콘텐츠 영역이 기존보다 좁아 보이는 느낌을 받아 큰 화면을 가진 디바이스에서는 상관없겠지만 아이폰 6s 같은 작은 화면에서는 조금 답답한 느낌을 받았습니다.
애플은 좋은 교과서
이번 사파리 디자인을 보고 디자이너들의 호불호가 크게 나뉘고 있습니다. 사용자에게 익숙한 디자인이 아닌 애플이 새롭게 제안하는 디자인이기 때문입니다. 하지만 저는 이 디자인에 대해서 매우 긍정적으로 생각합니다. 사용자들이 초반에 적응하는 게 어려울 수 있지만 익숙해진다면 기존보다 더 좋은 방법이라는 생각이 들었기 때문입니다.
애플은 이처럼 기존의 고정관념에서 벗어난 새로운 인터페이스를 자주 제시합니다. 애플의 디자인을 보면 기존의 문제점을 인식하고 사용자의 익숙함이라는 틀에서 벗어나 어떻게 더 좋은 디자인을 해볼지 고민해보게 되는 것 같습니다.
새로운 사파리, 3D 지도 이외에도 이번 WWDC에는 AI를 기반으로 사진에서 텍스트를 번역할 수 있는 기능이나 코로나 시대에 맞춰 여러 명과의 동시 화상통화 기능과 웹사이트를 통해서도 가능한 페이스타임 등 많은 기능과 새로운 디자인들이 나왔으니 공식 홈페이지나 WWDC 2021 영상을 통해서 미리 확인해보시는 것을 추천드립니다.
https://www.apple.com/ios/ios-15-preview/
