One UI 가이드라인 정리-Ch.1 구조
Samsung Developer One UI Design System
현재 삼성은 One UI 디자인 시스템을 채택하고 있다. One UI는 삼성 개발자 컨퍼런스에서 2018년부터 출시된 UI 디자인 시스템인데, 기존의 Samsung Experience를 대체하는 UI로 공식적으로 소개된 디자인 시스템이다. 현재 One UI는 갤럭시 S26시리즈와 함께 8.5버전까지 대규모 업데이트를 보여줄 예정이다.
https://developer.samsung.com/one-ui/index.html
해당 포스팅에서는 위 링크의 문서를 토대로 삼성에서 개발한 디자인 시스템인 One UI 디자인 시스템을 구조, 레이아웃, 컴포넌트 등으로 카테고리화하여 재정리하는 것을 목적으로 한다.
One UI는 모든 디자인 시스템의 기본적인 목표인 사용자 편의성을 우선으로 한다는 점이 두드러진다.
기본적으로는 다음과 같은 원칙을 적용한다.
1.Focus on the task at hand
2.Interact naturally
3.Be visibly comfortable
4.Make things reponsive
종합해서 정리하자면 One UI의 목적은 다음과 같다.
1.가능한 간단하고 직관적인 디자인을 사용해서 사용자가 작업에 집중할 수 있도록 한다.
2.자연스러운 동작과 모션으로 사용자가 자연스럽게 상호작용할 수 있도록 한다.
(예 : 화면의 상단을 보기 영역으로 하고, 하단을 상호작용 영역으로 구분한다.)
3.사용자가 눈에 가해지는 피로와 눈부심을 줄여줄 수 있도록 시청 편의성을 향상시킨다.
4.다양한 기기나 화면의 크기여도 상호작용할 수 있도록 반응형으로 조정한다.
One UI는 사용자의 기기 혹은 화면의 크기에 따라 맞춤 조정된다.
One UI 디자인 시스템 가이드라인의 챕터는 꽤 다각화되어 있는데,
그 중에서도 아래 목차와 같이 Structure, Visual depth, Layout, Components 순으로 챕터를 나누고자 한다.
Ch.1 Structure(구조)
Basic Structure(기본 구조)
Lock screen, Home screen, Recents(잠금 화면, 홈 화면, 최근 항목)
Quick panel(퀵 패널)
Edge panel(엣지 패널)
Visual depth(시각적 깊이)
One UI visual depth(One UI 시각적 깊이)
Ch.2 Layout(레이아웃)
Basic Layout(기본 레이아웃)
Grid System(그리드 시스템)
Ch.3 Components(컴포넌트)
App bar(앱 바)
Bottom bar(하단 바)
Bottom navigation(하단 네비게이션)
Buttons(버튼)
Dialog(다이얼로그)
Lists(리스트)
Search(검색)
Toasts(토스트)
해당 포스팅은 위 목차의 세 챕터 중 첫 번째 챕터인 기본적인 구조(Structure)를 정리하는 것을 목적으로 한다.
먼저 Structure 또한 소챕터로 나누어
다음과 같이 기본 구조, 잠금 화면, 홈 화면, 최근 항목, 엣지 패널에 대한 내용으로 구성한다.
Basic Structure(기본 구조)
Lock screen(잠금 화면)
One UI의 잠금 화면은 실수로 화면을 터치해서 발생하는 의도치 않은 동작을 방지하는 것을 목적으로 설계되었다.
이 외로 잠금 해제 과정에서는 생체 인식, PIN 번호, 비밀 번호와 같은 기능으로 한 번에 시스템에 접속하지 않도록 사용자의 정보를 보호하는 절차를 거친다.
또한 잠금 해제 과정을 거치지 않고도 잠금 화면에서 바로 사용할 수 있도록 배치되는 기능형 앱들도 있다. 배치되는 기능형 앱의 대표적인 예시로는 즉시 촬영이 필요할 경우 필요한 카메라 앱, 비상 상황에서 빠르게 연락할 수 있는 긴급 통화 등이 있다.
Home screen(홈 화면)
홈 화면을 통해 사용자는 앱을 원하는대로 이동하여 사용자에게 맞는 최적화된 환경을 구성할 수 있고,
위젯을 추가해서 사용성이 높은 어플을 우선으로 자율적으로 배치할 수도 있다.
홈 화면에서는 좌우로 스와이프하는 방식,
홈 화면에서 앱 서랍 화면으로 넘어가는 과정은 위아래로 스와이프하는 방식으로 전환한다.
Edge panel(엣지 패널)
엣지 패널을 통해 다른 앱이 화면에 이미 표시돼 있어도 간단하게 구성한 패널에 앱을 빠르게 열거나 기능을 사용할 수 있다.
사용자는 자주 사용하는 앱, 연락처 그 외 작업 바로가기 등을 패널 형태로 구성해둘 수 있고, 필요할 때마다 화면 측면을 살짝 당겨서 펼쳐볼 수 있다.
엣지 패널을 통해 사용자는 홈 화면 혹은 앱 서랍을 거치지 않더라도 자주 쓰는 기능을 사용할 수 있고, 사용자 맞춤으로 구성할 수 있다. 또한 사용자가 한 손으로 스마트폰을 들고 있을 때도 무리없이 펼쳐볼 수 있다는 것이 장점이다.
Recents(최신 항목)
최신 항목 화면에는 마지막으로 사용한 앱 순서대로 앱이 축소되어 표시된다. 각 앱 위에 있는 아이콘을 탭하면 앱의 정보, 분할 화면, 팝업 화면 등을 이용할 수 있다.
Visual depth(시각적 깊이)
시각적 깊이를 표현하는 One UI의 대표적인 계층적 구조 표현 방식은 blur, dim, shadow등이 있다. 각각 흐릿하게 하는 효과, 어둡게 하는 효과, 그림자 효과로 볼 수 있다. 해당 효과는 과하게 사용해서는 안되며, 컨텐츠의 가독성에 방해가 되어서는 안된다.
이 효과를 통해 시각적 계층 구조를 표현하기 위해
우선순위가 높은정보는 계층 구조의 상단에 표시되는 것을 원칙으로 한다. (예 : 하단 참고 사진의 경우 텍스트 정보는 계층 구조의 상단, 배경 사진은 계층 구조의 하단에 위치하는 것으로 해석할 수 있다.)
문서에서는 다음과 같이 우선순위를 부여했는데,
blur 및 dim처리를 하는 경우는 다음에 해당한다.
(1)새로운 화면이 이전 화면과 관련이 없는 경우
(2)사용자의 집중력 유지를 한 경우
출처 : https://developer.samsung.com/one-ui/structure/visual-depth.html
블러 효과(blur)
예시에서 다음과 같이 블러 효과가 배경에 전체적으로 적용된 것을 볼 수 있는데, 예시 캡처본은 윗문단의 (2)처럼 새로운 화면이 이전 화면과 관련이 없는 경우 블러 처리를 한 것에 해당한다.
블러 효과를 줌으로써 배경을 흐릿하게 만들어 강조하고자 하는 정보에 대한 시각적 깊이감을 제공한다. 적절한 블러 효과를 사용하면 편안한 느낌을 주고 가독성을 높인다.
여기서 주의할 점은 블러 효과가 약할 경우 정보 구분이 어려워지고, 반대로 블러 효과가 너무 강할 경우 계층 구조가 불분명해진다는 것이다.
One UI 가이드라인에서는 블러 효과를 단독으로 사용하는 것보다 dim 효과를 함께 사용하는 것을 권장하고 있다.
디밍 효과(Dim)
디밍 효과는 화면의 배경 밝기를 낮춰 특정 ui 요소를 강조하는 시각적 처리 기법이다. 해당 가이드라인에서는 한 화면에 여러 단계의 구조를 노출하지 않는 것을 원칙으로 한다.
현재 업데이트 버전으로는 dim 효과보다 블러 효과를 더 적극적으로 차용하고 있는 것으로 보인다.
그림자 효과(Shadow)
그림자 효과를 사용함으로써 계층 구조를 유지하며 정보 간의 연결을 나타낼 수 있도록 한다.
그림자 효과를 사용할 시 주의할 점이 몇 가지 있는데, 다음과 같다.
(1)그림자를 3D처럼 깊이감을 주는 것으로 간주하지 않을 것. 과한 그림자 효과는 대비를 유발할 수 있다. 이는 정보 간의 연결을 목적으로 하는 목적에 어긋난다.
(2)그림자 효과와 디밍 효과를 반복적으로 사용하거나 함께 사용할 경우 시각적 피로감이 증가하므로 그림자 효과와 디밍 효과를 동시에 적용하는 것은 지양하도록 한다.
위와 같이 전체적으로 One UI의 기본 구조와 시각적 깊이를 적용하는 방법에 대한 가이드라인을 정리해보았다. 디자인 시스템에서 시각적 깊이를 정의하는 것은 꽤 중요하다. UI에서 깊이감이 중요한 이유는 사용자가 어떤 요소가 활성화됐는지, 어떤 요소가 상위/하위 레이어에 해당되는지 이해하는 것을 돕기 위해서기 때문이다.
다음 포스팅은 구성 파트의 두 번째 챕터인 레이아웃을 다루고, 그 중에서도 기본 레이아웃과 그리드 시스템을 중심으로 정리할 예정이다. 이어지는 글에서 보다 체계적인 구조 설계 방법을 살펴보기로 하고 이번 포스팅을 마무리하도록 한다.