새로운 안드로이드 UI
Google I/O에서 발표한 Android 12 디자인
애플에 WWDC가 있다면 구글에는 Google I/O라는 콘퍼런스가 있는데 코로나 때문에 2년 만에 Google I/O가 개최되면서 구글은 드디어 Android 12 버전을 출시하며 기존에 Material Design을 Material You라고 새롭게 명칭 하며 새로워진 안드로이드 디자인을 발표하였습니다.
사실 우리나라에서 안드로이드 기기를 사용하시는 분들은 자체 인터페이스 'One UI'가 적용된 갤럭시를 많이 사용하기 때문에 Android 순정 인터페이스에 대해서는 많이 생소하실 수 있습니다. 삼성은 사용자들이 쉽고 편리하게 스마트폰을 사용할 수 있도록, 2018년에 One UI를 공개하였으며 2년여간 진화를 거듭해 2020년에 디자인과 효율성, 다양한 기기 간의 경험까지 대폭 개선된 One UI 3을 발표하였습니다.
갤럭시는 One UI를 적용하였지만 Android UI에 스크롤 애니메이션이나 설정 화면 등 안드로이드 UI에 기반을 둔 디자인이 많이 적용되어있습니다. 제가 작년 iOS14에 대한 글을 작성할 때도 말씀드렸다시피 구글이나 애플의 훌륭한 디자이너들이 만든 인터페이스를 뜯어보고 살펴보는 것만으로도 훌륭한 레퍼런스가 될 수 있습니다. 그래서 오늘은 새로워진 Android UI에 대해서 몇 가지 키워드로 정리해보려 합니다.
디자인의 개인화
구글은 기존의 Material Design의 차세대 버전인 Material You를 발표하며 새로운 디자인 언어를 발표하였습니다. 왜 Design이 아닌 You라는 단어로 발표를 하였을까요? 이것은 구글 i/o 영상을 보면 Personal이라는 단어가 많이 나오는데 이번 디자인 변화의 핵심은 바로 사용자의 자유로운 커스텀이 핵심 키워드였기 때문입니다.
그동안 사용자는 기껏해야 글자의 두께 또는 라이트 모드와 다크 모드를 선택할 수 있었습니다. 이러한 일관된 설계 시스템에는 분명한 장점이 있습니다. 디자인의 일관성을 가져다주며 디자인적 오류를 제어할 수 있었습니다.
Material You는 배경화면 사진을 기반으로 위의 이미지와 같이 색상 팔레트를 자동으로 생성 한 다음 주요 색상과 보색을 결정한 다음 시스템 전체에 해당 색상을 자동으로 적용합니다. 예를 들어 녹색이 많이 포함된 배경을 설정하면 계산기 및 캘린더와 같은 앱이 녹색을 기본 컬러로 인식하여 이에 맞게 표시되는 방식을 조정합니다.
사람마다 성향은 모두 다르고 그에따라 선호하는 디자인 즉 미의 기준이 다릅니다. 그래서 구글은 '공동 창조'라는 키워드를 사용하여 사용자와 같이 자신만의 디자인을 창작하도록 개선하였습니다. 자동 생성된 색상 팔레트는 라이트, 다크 모드를 지원하도록 설계되어 라이트 모드이든 다크 모드이든 상관없이 색상 선택에 따라서 텍스트 및 구성요소를 읽을 수 있도록 고려하여 설정됩니다.
일반적인 사람에게 자유로운 제어권을 부여하면 디자인이 엉망이 될 가능성이 높으며 사용자들은 왜 대비되는 컬러를 사용해야 되는지 모를 수 있습니다. 그래서 자유도를 주는 대신 조정할 수 있는 몇 가지 매개 변수를 시스템이 제어하여 사용자 정의로 텍스트가 안보이거나 색상의 대비가 낮아 색상이 잘 보이지 않는 사태를 방지하는 조치를 취하였습니다.
One UI와 iOS
이번 Android 12의 인터페이스는 사실 삼성의 One UI에서 힌트를 많이 찾았다고 생각합니다. 삼성의 One UI에서는 한 손 접근성에 대한 중요성을 많이 강조한 UI가 보입니다. 예를 들어 One UI 내의 설정 페이지에 제목을 상담에 크게 배치하고 페이지의 중앙에 선택할 수 있는 정보들을 배치하여 한 손으로 도달하기 어려운 상단이 아닌 디스플레이 중앙에 더 많이 표시될 수 있습니다.
구글은 이 장점에 대해서 긍정적으로 생각해 Android 12의 설정화면 상단에 큰 타이틀을 배치하고 위로 스크롤하면 제목이 축소되어 작은 공간을 차지하여서 화면에 더 많은 요소들이 배치되도록 개선하였습니다. (GIF로 보여드리고 싶은데 GIF도 적용이 안되고 갤럭시폰밖에 없어서 유튜브스크린샷으로...)
이전 iOS14에 대한 디자인의 글에서 말씀드렸던 더욱 둥그러진 모서리를 이번 Android 12에서도 적용되었으며 그보다 더욱 둥그러진 모서리를 사용하고 있습니다. 둥근 모서리는 날카로운 모서리보다 더 잘 보이며 카드 모서리의 눈에 띄는 가장자리가 시각적 차이를 인식하도록 눈을 안내하기 때문입니다.
또한 둥근 모서리는 각진 모서리보다 여백이 더 넓어보이며 래퍼 머쉬베놈이 말한 여백의 미가 적용됩니다. 여백을 충분히 확보하는 것은 매우 중요하며 여백이 없는 레이아웃은 답답해 보이고 정보의 분류를 어지럽히는 단점이 존재합니다.
이번 업데이트에서 제 기준에서 가장 눈에 띄는 변화는 알림창입니다. 알림창과 전원 메뉴는 디자인의 통일성을 높이며 새로운 Quick Tiles는 원형 아이콘을 대신해 둥근 사격형으로 배치하여 단순히 아이콘만으로 배치되는 것과는 다르게 텍스트도 같이 배치하여 정보성을 높였습니다.
특이한 부분은 밝기 조절 슬라이더인데 전체 영역을 알려주는 Track부분은 얇은 라인으로 배치되어있고 따로 Knob부분 없이 Fill이 적용된 사각형 전체를 Knob으로 적용하여 터치영역을 충분히 확보하고 밝기가 어느정도인지 눈에 더 잘들어오게 디자인되어 iOS와 다르게 좀 더 시원한 느낌이 드는 것 같습니다.
저는 안드로이드폰을 회사 업무 때문에 처음 사용해봤었는데 저는 Quick Tiles가 하단으로 스크롤되는지 전혀 알지 못했습니다. 위의 유튜브 비교 영상에서도 확인 가능하듯이 기존의 안드로이드에서는 컨트롤바의 색상 대비가 너무 낮으며 무언가 아래 있구나라는 디자인적 요소가 부족하였습니다.
하지만 이번 안드로이드 배타 버전에서는 컨트롤바의 명확한 색상대비와 충분한 여백으로 컨트롤바를 움직이면 무언가 있구나라는 힌트를 얻을 수 있게 디자인이 개선되어 사용성을 높였습니다.
유기적인 도형의 위젯
작년 애플이 iOS에 위젯 기능을 추가하였고 토스, 네이버, 카카오와 같은 기업들은 발 빠르게 iOS용 위젯을 선보이며 사용자의 편의성을 높였습니다. 그동안 구글에서 위젯은 사후 고려사항으로 취급하였지만 iOS에서 큰 인기를 얻자 구글은 먼저 선보인 위젯 기능 강화에 노력을 기울인 것이 느껴졌습니다.
iOS위젯은 3가지 사이즈와 통일된 모서리 두께로 일관된 위젯 디자인을 선보인 반면 구글의 위젯은 조금 더 자유롭고 트렌드한 도형들을 적용하였습니다. 특히 대각선 모양의 날씨 위젯과 규칙적인 왜곡이 있는 시계 위젯은 유기적인 도형이 적용된 것은 매우 재미있는 디자인 요소라고 생각합니다.
iOS와 Android는 점점 비슷해진다는 평이 많은데 위젯에 대한 방향성은 분명히 갈리는 것 같습니다. 통일성과 기능성을 강조한 iOS와 유기적인 도형과 자유도를 강조하는 Android의 위젯은 과연 추후에 누구의 위젯이 더 각광를 받는지 지켜보는 것도 굉장히 재미있는 구경거리가 될 것 같습니다.
유동적인 애니메이션
애니메이션의 장점은 지금 무슨 일이 일어나고 있는지 사용자가 인식하며 다음을 예측할 수 있다는 것입니다. 예를 들어 잠금 화면에서 지문인식이나 페이스 아이디 모션이 없다면 사용자는 어떤 일이 일어나고 있는지 예측할 수 없으며 아무런 피드백이 없으면 오류로 인식할 수 있습니다. 그렇기 때문에 명확한 피드백과 애니메이션의 적용은 매우 중요한 요소들 중 하나입니다.
이번 Android 12에서는 탭과 스와이프 및 스크롤 모션 등 전반적인 모션 효과들을 부드럽게 개선하여 생동감 있는 디자인을 선보였습니다. 앱 보관함을 열 때 마치 젤리 같은 느낌의 바운스를 주며 설정 목록의 맨 끝에 도달하면 약간의 바운스를 주는 등의 생동감 있는 효과가 많이 적용되었습니다. 하지만 이러한 애니메이션 효과들은 흡사 MIUI와 거의 비슷하다는 평을 받고 있습니다.
가장 눈에 띄었던 애니메이션은 바로 잠금화면에서 알림창 애니메이션이었습니다. 2개의 알림창이 존재할 때 모서리를 다르게 주어서 하나의 묶음처럼 보이게 디자인하였습니다. 그리고 하나의 알림창을 스와이프 할 때 위의 이미지와 같이 서서히 모서리가 줄어는 모습을 볼 수 있는데 이것도 iOS와는 다른 디자인 요소가 적용되어 매우 재미있는 애니메이션 중 하나인 것 같습니다.
이와 같은 여러 가지 개선사항들은 제가 말로 설명드리는 것보다 눈으로 직접 확인해보시는 게 좋은 것 같아서 Android 12 소개 영상을 첨부하였니 참고하시길 바랍니다.
긍정적인 방향성
미국 드라마 뉴스룸에는 이러한 대사가 나옵니다. '문제를 해결하는 가장 첫 번째 방법은 문제가 있다고 인식하는 것'이라고요. 구글의 디자인 부사장 Matias Duarte도 기존의 머티리얼 디자인은 훌륭하지만 인터페이스를 지배하여 상상력과 창의성을 저해한다는 말을 하며 문제점을 인식하는 발언을 하며 그동안의 머티리얼 디자인이 트렌드에 뒤쳐져 있다는 것을 어느정도 인정하였습니다.
구글 같은 인재들이 모여있는 회사라면 문제점을 인식하는 순간 그것을 올바르게 해결해나 갈 것이라는 것을 의심하는 사람은 별로 없을 것입니다. 저는 구글이 그동안의 머티리얼 디자인의 문제점을 인식하고 발전해나가려는 모습을 보이는 순간 안드로이드의 경쟁력은 매우 높아질 것이라 생각하였습니다.
아직까지는 Material You라는 새로운 UI를 사용해본 디자이너나 개발자들은 오류에 대해서 많이 이야기를 합니다. 아이콘과 레이블의 정렬이 맞지 않는 부분이나 알림창의 경우 안쪽의 테두리와 바깥의 테두리가 같은 값으로 적용되어 일치하지 않는 점, 도형에 비해 아이콘 크기가 매우 작다는 점 등등 아직 완성도가 높지 않다는 이야기가 나오고 있습니다.
하지만 아직 베타버전일뿐이며 완성도 높은 디자인에는 수많은 시행착오가 따릅니다. 이러한 오류는 완성도 높은 디자인을 위해 필연적인 과정이라고 생각합니다. 올 가을 구글의 스마트폰인 Pixel에 먼저 적용되며 점차 모든 안드로이드폰에 업데이트할 예정이라고 발표하였으며 새로 나올 안드로이드 디자인에 대해서 기대해보려 합니다.
https://events.google.com/io/?lng=en
