[디자인스토리] 일상에 더 가까이, One UI 4

“우리가 속한 사회와 주변 환경이 끊임없이 변화함에 따라 사용자가 원하는 경험도 더욱 다양해졌고, 진보된 기술력을 바탕으로 혁신적인 제품이 지속해서 출시되며 오늘날 우리 일상이 바뀌고 있습니다. 이러한 변화의 흐름 속에서도 사용자가 언제나 편안하고 즐거운 모바일 경험을 할 수 있도록, One UI는 고객의 목소리에 귀 기울이며 발전해 나갈 것입니다.”

– 홍유진 부사장 / 삼성전자 MX사업부 UX팀장

One UI 4의 깔끔한 디자인과 짜임새 있는 구조는 누구에게나 자연스러운 사용 경험을 선사한다. 개개인에 따라 섬세하게 맞춤 설정을 할 수 있는 인터페이스로 사용자는 자신의 개성과 스타일을 자유롭게 표현할 수 있고, 편리한 사용과 강력한 보안을 바탕으로 한 차원 높은 모바일 경험을 누릴 수 있다. One UI 4 디자이너들에게 한층 업그레이드된 UI에 관해 들어 봤다.

* 본 콘텐츠 이미지는 이해를 돕기 위해 연출된 이미지입니다. 실제 제품은 차이가 있을 수 있고, 세부 사양은 국가, 지역, 모델, 통신사별로 다를 수 있습니다.

중요한 정보에 집중할 수 있게… 더욱 명확하고 깔끔해진 UI

One UI 4는 불필요한 요소를 걷어내어 중요한 내용부터 먼저 눈에 들어오도록 구성했다. 정보의 배열과 디자인을 깔끔하게 정리해서 한 눈에 우선순위를 파악할 수 있게 했으며, 정보를 직관적으로 이해할 수 있게 컬러와 텍스트도 정돈했다. 또한, 정보를 레이어로 구분하고 시각적 방해 요소들을 과감히 없애, 더욱더 깔끔한 앱 화면을 구현했다.

Q. 컬러 시스템을 개편한 이유는 무엇이고 어떤 부분을 중점적으로 작업했나.

이번 컬러 시스템 개편의 키워드는 ‘정제(Clean-up)’다. 가장 중요한 정보에 컬러를 우선 적용하고, 상대적으로 덜 중요한 정보를 모노톤으로 바꾸는 방식으로 작업을 진행했다.

Q. 유사한 의미를 가진 기능적 색상(Functional Color)을 레드와 그린 중심으로 통일한 작업에 관해 설명해달라.

레드 색상은 중지(Stop), 삭제(Delete), 제거(Remove), 거절(Reject), 감소(Decrease) 등의 의미를 표현한다. One UI 4 이전에는 유사한 의미를 가진 요소들의 색이 조금씩 달랐으나 이번에는 하나의 레드로 통일해 사용자들이 각 기능의 맥락을 명확히 이해할 수 있도록 하는 데 중점을 뒀다. 또한 레드와 그린으로 통일하면서도 명도와 채도를 살짝 높여 기존보다 시인성을 높였다.

Q. 전체적인 폰트 정돈을 위해 조정한 자간과 볼드체에 관해 설명해달라.

정보의 우선순위에 따라 시각 대비를 조정함으로써 기존에 비해 정보의 강약이 두드러지게 작업했다. 콘텐츠의 중요도에 따라 폰트 사이즈와 굵기를 조정하며 최적의 네거티브 스페이스(Negative Space)를 완성했다.

Q. 새로운 날씨 아이콘과 함께 전체적으로 깔끔하고 세련되게 바뀐 ‘날씨’ 앱에 대해 설명해달라.

정보의 중요도는 사용자에 따라 다르다. 현재 날씨가 중요한 사람도 있고, 하루 동안의 날씨 변화에 더 관심 두는 사람도 있다. 기존에는 이런 정보들이 상단 메인 카드 안에 혼재했지만, One UI 4에서는 ‘현재의 날씨’와 ‘오늘의 날씨’로 분리해서 보인다. 현재 온도, 위치, 날씨 아이콘과 같이 중요한 정보들을 세련된 비주얼로 상단에 배치해서 가독성을 높였다.

Q. 어떤 방식으로 캘린더 앱을 한눈에 보기 쉽게 정리했나.

대부분의 사용자가 하루에 1~3개 정도의 일정을 등록한다는 데이터를 기반으로, 일정이 없는 빈 화면도 어색해 보이지 않도록 디자인했다. 또 기존의 회색 배경을 깨끗한 흰색으로 변경해 월, 일, 일정 등 주요 정보에 대한 주목도를 높였다. 텍스트는 안정적으로 가운데 정렬하고, 주별 정보를 쉽게 파악할 수 있도록 가로선을 추가했다.

Q. 삼성 헬스 앱은 다양한 수치를 효과적으로 배치하면서도 복잡해 보이지 않기 위해 어떤 노력을 했나.

삼성 헬스 앱은 크게 3가지 타입으로 보이게 만들었다. 걸음 수, 심박 수, 스트레스, 혈당과 같이 범위, 진척도, 상태 정보가 중요한 경우엔 바(Bar) 타입이 보기 편하다. 음식 섭취량, 수면 상태, 물 섭취량 등의 정보는 진척도보다 누적 데이터가 중요하기 때문에 심볼(Symbol) 타입으로 표현한다. 그 외 단순히 숫자 자체가 중요한 경우에는 그래프 없이 텍스트로 보여주는 텍스트 온리(Text Only) 타입으로 표현한다.

Q. 이번에 새롭게 선보인 삼성 월렛은 사용자의 중요한 정보가 하나의 앱에 담겨 있기 때문에 간결하면서도 정확한 정보 전달이 중요할 것 같다. 이를 위해 어떤 작업 과정을 거쳤나.

삼성 월렛의 첫 화면인 빠른 실행(Quick Access) 탭은 카드가 쌓여 있는 형태(Stacked View)와 펼쳐진 형태(Expanded View)로 구분이 된다. 쌓여 있는 형태에서는 35%의 비율로 카드의 정보가 보이기 때문에 왼쪽 상단에 로고, 오른쪽 상단에 카드 속성을 보여주는 텍스트를 배치했다. 또 각 카드의 상세 화면에서 성격이 비슷한 정보들은 하나로 묶어 찾기 쉽게 했고, 이용 내역, 작업 실행과 같이 성격이 다른 정보와 기능들은 시각적으로 분리했다.

One UI 4로 언제 어디서나 안심하고 편리하게…

하루 24시간을 함께하는 스마트 기기에서 개인정보가 유출될 수 있다는 불안함은 누구에게나 있다. One UI 4는 사용자가 걱정이나 불편 없이 언제 어디서나 안심하고 사용하는 것을 중요한 가치로 삼는다. 이를 위해 개인정보 보호에 대해 사용자들의 높아진 기준에 맞춰 다양한 보안 장치를 적용했다.

또한, 사용자들이 스마트 기기를 편리하게 사용할 수 있도록 디테일한 부분도 놓치지 않았다. 다크 모드는 세심한 디테일을 살려 사용자의 시각적 피로도를 줄였다. 다양한 폼팩터에 적용한 일관된 비주얼 디자인은 여러 기기를 넘나들며 사용해도 변함없이 편안한 사용감을 제공한다.

Q. 카메라와 마이크가 켜지면 상단 아이콘으로 확인할 수 있다. 이는 어디에서 아이디어를 얻었나.

최근 수년간 프라이버시와 개인정보 보호에 대한 사용자의 관심이 크게 높아졌다. 우리도 이에 대한 필요성을 충분히 공감하던 중 안드로이드 12 OS에 새로 추가된 기능을 동일하게 적용했다.

Q. 카메라, 마이크, 위치 정보 등의 사용 내역을 확인할 수 있는 퍼미션 대시보드(Permission Dashboard)에 관해 설명해달라.

개인 정보 권한을 획득한 후 각종 센서와 데이터에 접근하고 악용하는 악성 앱이 최근 문제가 되고 있다. 퍼미션 대시보드(Permission dashboard)는 이처럼 불필요한 개인 정보 권한을 요구하는 앱이나, 앱을 사용하지 않을 때도 개인 정보에 접근하는 앱을 확인하고 차단할 수 있다.

Q. 다크 모드의 디자인 디테일은 어떻게 완성되었나.

앱 아이콘의 심미성과 주목도를 해치지 않으면서 시각적 편안함을 높이는 적정 수준의 어둡기를 찾으려 노력했다. 그 결과, 전체 앱 아이콘 컬러를 자연스럽고 균일하게 톤다운 했고, 백색 영역으로 인한 눈부심을 방지하면서도 홈 스크린 요소와의 시각적 균형감까지 모두 만족시킬 수 있는 현재의 어둡기를 최종적으로 적용했다.

Q. 삼성의 다양한 기기를 복합적으로 사용하는 데 불편함이 없도록 신경 쓴 부분이 있다면 무엇인가.

One UI 4는 스마트폰, 태블릿, 스마트워치, PC 등 다양한 제품에 일관된 비주얼을 적용한다. 아이콘, 라운드 처리된 모서리, 구성 요소, 메뉴 스타일과 배치 등을 통일해서 기기를 바꿔도 친숙하고 편리하게 사용할 수 있다.

폭넓은 표현 방식으로 세상 하나밖에 없는 나만의 스마트 기기를…

스마트 기기는 개인의 감정과 개성을 표현하는 도구다. One UI 4는 사용자 개인의 생활과 취향에 맞는 기기 사용을 위해 선택과 변화의 폭을 넓혔다.

기기의 비주얼 테마를 바꾸는 컬러 팔레트 기능을 통해 사용자는 본인의 개성과 취향을 맘껏 드러낼 수 있다. 이모지 페어 기능으로 두 가지 이모지를 조합해 애니메이션을 더할 수 있고, AR 이모지로 나만의 개성이 담긴 아바타를 활용할 수도 있다. 다양한 옵션의 워치페이스로 본인의 취향과 라이프스타일에 맞는 스마트 워치를 꾸밀 수 있으며, 통일감을 주는 비주얼의 위젯들을 더욱 편리하게 사용할 수 있다.

Q. 배경화면의 파티클(Particle) 컨셉은 어떻게 나오게 되었나.

다양한 제품에 두루 적용되면서도 자유로운 표현이 가능한 디자인 요소를 연구했다. 그 과정에서 파티클(Particle)이라는 소재가 가진 잠재력과 확장성을 발견했다.

갤럭시 Z로 예를 들자면, 폴더블 구조를 유지하면서도 제품이 지닌 함축적인 메시지를 담고자 고민하던 중 폴딩 아트에서 영감을 찾았다. 폴딩 아트의 다양성, 강인함, 연속성과 확장성이 갤럭시 Z 폴드의 특징과 닮았다고 생각했다. 갤럭시 Z 플립 또한 유사한 맥락으로 작업하되, 보다 패셔너블하고 독보적인 제품 이미지를 부각하는 방향으로 진행했다.

Q. 배경화면에서 다섯 가지 색을 추출해서 기기의 비주얼 테마를 바꾸는 컬러 팔레트(Color Palette)는 어떤 과정을 거쳐 구현되었나.

컬러 팔레트는 안드로이드 12 Material You – Dynamic Color를 One UI에 맞춰 내재화한 기능이다. 구글과 다른 앱 사용을 지원하기 위해 배경화면에서 추출한 다섯 가지 컬러를 사용한다.

다양한 연구 결과를 검토하던 중, 이미지에서 컬러를 추출하는 방법을 연구하는 디자이너들과 협업하게 되었다. 원본 이미지를 분석해서 컬러 그룹을 나누고, 추출한 컬러의 분포도를 파악할 수 있는 프로토타입을 지원해준 덕분에 최적의 컬러 추출 방식을 찾을 수 있었다.

Q. 초기 단계의 작업에 비해 컬러가 더 차분해졌다고 들었다. 어떤 과정을 거쳤나.

사용자가 콘텐츠에 집중해서 더 편안하게 볼 수 있도록 배경화면의 전반적인 무드만 느껴질 수 있도록 디자인을 수정했다. 초기와 비교해 최종 버전의 배경 컬러 채도는 낮아졌고, 버튼은 눈에 피로를 주지 않으면서도 돋보이는 컬러로 조정했다.

Q. 서로 다른 두 가지 이모지를 다양한 애니메이션으로 표현할 수 있는 이모지 페어(Emoji Pair)에 관해 설명해달라.

‘웃프다’, ‘웃는 게 웃는 게 아니다’처럼 복합적인 감정을 표현하는 이모지는 여태껏 없었다. 다양한 사용자의 목소리를 통해 복합적인 감정 표현에 대한 니즈를 확인했고, 여러 번의 아이디어 회의를 거쳐 이모지 페어가 탄생했다.

Q. 복합적인 감정을 나타내는 이모지 페어로 컨셉이 확장된 이유는 무엇인가.

사용자가 만드는 이모지 조합을 강제할 수 없기 때문에 서로 대립되지 않는 유사한 감정의 이모지를 조합하는 상황도 고려해야 한다고 판단했다. 따라서, 감정 표현의 범위를 양면성에서 복합성으로 확장하게 되었다.

Q. AR 이모지의 세련된 움직임, 위트 있는 제스처가 눈에 띈다. 이러한 모션은 어떻게 만들어지나.

생동감 있는 모션을 위해 애니메이터들이 간단한 동작이나 표정은 키프레임(Key Frame) 방식으로 하나씩 정성스럽게 작업한다. 또한 유명 아티스트와 협업해 전문적인 댄스 동작 등 퀄리티 높은 모션을 만들기도 한다.

Q. 국가나 연령별로 선호하는 AR이모지 스티커는 어떻게 다른가.

한국, 브라질, 미국, 영국 4개국에서 스티커 모션 선호도 조사를 거쳐 AR 이모지 스티커를 제작했다. 국가 간 선호도는 큰 차이가 없었지만 연령대에 따라 약간의 차이가 있었다. 전반적으로 20대가 30대보다 더 우스꽝스럽고 과장된 스티커를 선호했고, 사용자 대부분이 스티커를 사용할 때 진지한 느낌보다 재미있고 유쾌한 인상을 주길 원했다. 따라서, 웃음은 더욱 과장되게 표현하고, 슬픔은 너무 진지하지 않게 표현하고자 했다.

Q. 이번 One UI 4 워치페이스는 어떤 부분에 중점을 뒀는가.

갤럭시 워치 4를 출시할 때 익스프레시브 타입의 스펙트럼을 확장하는데 주력했다. 건강한 식습관을 위한 채소 캐릭터나 챌린지를 위한 곰 캐릭터와 같이 다양한 스타일의 캐릭터를 워치페이스에 적용해 입체적인 라인업을 완성했다.

Q. 다양한 워치페이스를 디자인할 때 어떤 기준을 적용했는가.

워치페이스 간 일관성을 위해 실제 아날로그 시계의 인덱스(Index), 핸드(Hands), 서브 다이얼(Sub Dial)의 종류와 디자인을 참고해서 디자인 시스템을 구축했다. 컬러는 갤럭시 워치 스트랩과 어울릴 수 있도록 스트랩 컬러와 그 주변 색을 1차로 지정하고, 나머지 컬러들은 국제 표색계를 기준으로 구성했다.

Q. 이번 One UI 4 위젯은 전반적으로 단정하고 깔끔한 인상을 준다. 어떤 과정을 거쳤나.

지속적인 협의와 노력 끝에 안드로이드 환경에서 일괄적으로 위젯의 형태를 변경할 수 있게 만들었다. 덕분에 삼성 위젯뿐 아니라 써드 파티(3rd Party) 위젯에도 One UI 비주얼 언어를 적용해 시각적 완성도를 높였다.

위젯은 제공하는 정보 대비 화면 내 사용하는 면적이 넓지 않으므로 시각적 대비를 통해 정보가 한눈에 보이면서도 강조되어야 하는 부분에 시선이 더 쏠리도록 설계했다. 또한, 100% 화이트 배경으로 심플함과 콘텐츠 주목도를 높였다.