WWDC20 - Widgets

Design great widgets

6월 22일부터 온라인으로 진행된 애플의 WWDC20(WorldWide Developer Conference)에서 디자인 관련된 섹션을 정리하였습니다. 첫 번째 주제는 iOS14부터 새로운 형태로 지원하는 Widget의 디자인에 관한 내용입니다.

기존의 위젯에 비해 달라진 점

실시간으로 업데이트된 정보가 사용자의 현재 맥락에 맞게 제공됨. drag n drop으로 홈스크린의 원하는 위치에 위젯을 배치할 수 있으며 위젯에 보여줄 내용을 편집할 수 있다. 

같은 위치에 여러 가지 위젯들을 위치시킬 수 있고, 사용자의 앱 사용 패턴을 분석하여 현재 상황에 맞는 위젯들을 자동으로 선택하여 보여주는 Smart stacks 지원한다.

예를 들면 아침에 일어났을 때는 날씨 위젯을, 출근할 때는 음악 위젯, 오후에는 지도 위젯으로 퇴근하는데 걸리는 시간을 보여주고, 저녁에는 뉴스의 top story를 보여준다.

위젯 디자인

위젯 디자인은 Ideation과 Creation의 두 부분으로 나누어서 볼 수 있다.

Ideation

Ideation은 Principles, Editing, Multiples의 관점에서 생각해 볼 수 있다. 위젯은 보여주는 컨텐츠가 가장 중요하다. 위젯을 디자인하기 위해서는 사용자에게 가장 유용한 정보와 경험이 무엇인지 알아야 한다.

Principles

Ideation의 원칙에는 Personal, Informational, Contextual이 있다.

      

Personal
앱이 개인적인 컨텐츠를 보여줄 때 사용자는 앱과 감정적으로 연결되어 있다는 느낌을 받는다.

Informational
위젯은 탑 레벨의 대략적인 정보를 보여줄 수 있는 좋은 방법이다. 사용자에게 필요하고 적절한 정보를 보여주어 앱에서 반복적인 작업을 수행하지 않도록 도와준다.

Contextual
사용자는 디바이스를 하루 종일 사용한다. 사용자의 현재 환경을 파악하여 필요한 순간에 필요한 정보를 보여준다. 

예를 들면 다음의 위젯들과 같다.

캘린더 위젯에서는 오늘 예정된 일정을 보여주어 앱을 열고 해당 정보를 찾아보는 과정을 줄여준다. 저녁에는 더 이상 일정이 없다는 것을 보여주거나 내일 있을 일정을 알려주기도 한다. Personal 한 관점에서 사용자가 살고 있는 지역의 기념일 정보를 보여주기도 하고, 친구의 생일 정보를 보여주기도 한다.

포토 앱에서는 최근 사진 대신 best photo를 보여주기도 하고, 몇 년 전 오늘의 사진을 보여주기도 한다. 

   

날씨 앱에서는 현재 위치한 도시의 이름, 현재 기온, 최고/최저기온과 함께 남은 하루의 날씨를 보여준다. 바람이 많이 불거나 천둥이 치는 등의 특별한 날씨일 때에는 비가 올지 안 올지, 언제 내릴지 등을 알려주고, 비가 내린다면 시간 단위를 세분화하여 언제 비가 그칠지 등에 대한 분단위의 날씨 정보를 보여주기도 한다.

맵 위젯에서는 기본적으로 사용자의 위치와 주변에 무엇이 있는지 보여주고, 어디론가 운전을 해서 갔다면 차를 주차한 위치를 알려준다. 예정된 일정이 있다면 해당 장소로 가는 길을 알려주기도 한다. 집에 있지 않다면 교통정보를 활용해 집으로 가는데 시간이 얼마나 걸리는지 알려준다.

이와 같이 위젯은 유용한 정보를 다이내믹하게 알려준다. 그리고 사용자의 맥락을 자세하게 파악하여 개인이 원하는 정보를 필요할 때 제공해 주어 위젯이 주는 경험을 매우 personal 하게 느끼게 해 준다.

Editing

Editing은 위젯의 새로운 기능 중 하나이고, 하나의 위젯에 어떤 정보를 담을지 결정하는 것이기 때문에 Ideation에서 중요한 부분이다.

위젯을 누르고 있으면 흔들리는 모드로 전환되고, 해당 모드에서 위젯을 한 번 더 누르면 위젯은 위젯을 편집할 수 있는 뒷면으로 뒤집힌다. 날씨 위젯은 날씨를 보여줄 위치를 변경할 수 있다. 기본적으로 현재 위치를 보여주기 때문에 위젯을 처음 추가했을 때에는 위치를 편집할 필요가 없다.

Multiples

iOS14에서는 위젯을 원하는 수만큼 추가할 수 있다. 그리고 각각의 위젯을 편집하면 위젯마다 다른 종류의 정보를 볼 수가 있다. 

Creation

Creation의 요소는 Size and Interactions, Content and Personality, Patterns가 있다.

Size and Interactions

위젯은 small, medium, large의 세 가지 사이즈를 지원한다.

small 사이즈는 앱의 가장 유용한 컨텐츠를 전달할 수 있다. 크기에 따라 적용할 수 있는 컨텐츠의 양이 달라진다. small 위젯은 하나의 tap target을 가지며, tap target은 앱의 위젯에 나타나 있던 컨텐츠와 링크되어 있다.

Small size widget

Medium과 Large 위젯은 친숙한 형태를 하고 있다. 더 많은 컨텐츠를 담을 수 있고 여러 개의 tap target을 가지고 있다. 위젯의 컨텐츠를 tap 하면 tap 한 컨텐츠에 해당하는 화면을 앱에서 보여준다.

Medium size widget

위젯 시스템에는 세 가지 tap 스타일이 있다. Fill style은 하나의 컨텐츠에 링크를 걸 때 유용하다. tap target을 하나만 가지고 있는 small 위젯은 fill style을 사용한다.

Fill sytle widget

Cell style은 Files 위젯처럼 고유의 형태를 가지고 있는 컨텐츠를 가지고 있는 위젯에 적합하다.

Cell style widget - files widget

Content 스타일 위젯은 특정한 형태가 없이 적용된 컨텐츠로 구성된 위젯에 유용하다.

Content style widget

Content and Personality

위젯을 실제로 쓸모 있게 만들기 위해서는 어떤 컨텐츠를 담고 있는지가 중요하다. 그리고 위젯을 만들 때 컨텐츠와 개성(Personality)을 같이 생각해야 한다. 사용자가 당신의 앱을 실행시킬 때 무엇을 찾으려고 하는지 생각해 보아라. 그리고 앱에서 유용하다고 생각할만한 아이템이 무엇이 있을지 찾아보아라.

다음은 컨텐츠와 개성을 같이 생각하여 디자인한 위젯의 예이다.

위젯을 디자인할 때 앱의 시각적인 개성을 찾아서 적용한다. 날씨 위젯은 앱에서 친숙하게 나타나는 날씨 상태를 표현한 배경과 동일한 아이콘을 적용하였다.

Weather widget and app

뉴스 위젯은 새로운 기사 화면에서 볼 수 있는 표제 기사의 이미지를 적용하였다.

News widget and app

캘린더 앱은 심플한 형태와 붉은색 틴트 컬러를 공통으로 적용하였다. 

Calendar widget and app

위젯 디자인에서 개성을 찾는 또 다른 방법은 앱 아이콘을 이용하는 것이다. 노트 위젯 디자인에는 아이콘의 노트패드 일러스트레이션 스타일을 적용하였다.

Note icon and widget

팟캐스트 위젯에는 아이콘의 보라색 그라데이션을 적용하였다.

Podcast icon and widget

Tips 위젯에는 아이콘의 노란색 그라데이션을 적용하였다.

Tips icon and widget

컨텐츠의 레이아웃을 구성하는 방법에는 두 가지 패턴이 있다.

첫 번째는 날씨 위젯처럼 세 가지 사이즈에 동일한 레이아웃을 적용하면서 정보를 추가로 보여주는 방식이다.

Weather widget

두 번째는 뉴스 위젯처럼 사이즈별로 완전히 다른 레이아웃을 적용하는 것이다. small 위젯에는 주요 컨텐츠가 전체 공간을 차지하고 있고, medium 위젯에서는 더 많은 뉴스 스토리를 보여주고 있다.

News widget

작은 크기의 위젯을 단순히 확대해서 큰 사이즈의 위젯에 적용하지 않도록 해야 한다. 

각각의 사이즈에서 정보를 어떤 레이아웃으로 보여주는 것이 좋을지 고려해야 한다. 스크린 타임의 large 위젯에서는 더 많은 공간에서 유용한 정보를 더 많이 보여줄 수 있다. large 위젯에서는 차트의 범위를 넓히고, 카테고리와 앱의 상세 내용을 추가하였다.

큰 크기의 위젯에서 보여줄 만한 정보가 없다면 특정 크기의 위젯만 지원해도 관계없다. 모든 사이즈의 위젯을 지원할 필요는 없다.

Small 위젯에는 정보를 네 가지 이하로 보여주는 것을 권장한다.

Patterns

위젯에는 여러 가지 공통적인 레이아웃 패턴이 있다. 다음은 small, medium, large size에서의 레이아웃 패턴들이다. 디자인을 시작할 때 이 패턴들을 이용해도 좋을 것이다. 그리고 효과가 입증된 레이아웃을 이용해 아이디어를 표현하는 것도 좋은 방법이다.

다른 위젯들과 나란히 놓였을 때 디자인이 일관적으로 보이도록 모든 위젯 사이즈에서 사방으로 기본 16pt의 마진을 적용해야 한다.

둥근 형태의 컨텐츠는 11pt의 마진을 적용한다.

사각형의 컨텐츠가 위젯의 모서리에 가까이 있다면 corner radius를 위젯의 모서리와 비례하여 축소되게 만들어야 한다.

위젯의 corner radius가 디바이스 크기에 따라 달라지기 때문에 위젯 안의 둥근 모서리를 가진 shape의 corner radius를 위젯의 corner radius와 자동으로 맞춰주는 SwiftUI container가 제공된다.

폰트는 SF Pro나 SF Mono와 SF Pro Rounded와 같은 SF계열의  사용해야 한다. 브랜드나 디자인의 개성을 표현하기 위해 custom font를 사용해야 한다면 다른 위젯들과 같이 놓였을 때 이질감이 없는지 확인해 보아야 한다.

위젯은 라이트 모드와 다크 모드에서 모두 잘 보여야 한다. 캘린더 위젯은 앱과 동일하게 라이트와 다크 모드에서 전체적인 색상이 변한다. 팟캐스트 위젯은 그라데이션으로 이루어진 전체 색상이 라이트 모드와 다크 모드에서 모두 잘 보인다. 노트 위젯은 선명한 노랑과 흰색의 조합으로 다크 모드에서는 앱과 동일하게 컨텐츠 부분의 색상을 어둡게 적용하였다.

모든 위젯은 시스템이 위젯의 데이터를 보여줄 수 없는 상태에서 나타나는 placeholder를 제공해야 한다. 기본적인 그래픽 요소를 사용해서 정보가 나타나는 영역을 표현해주면 된다.

이러한 방법으로 placeholder가 실제 데이터로 바뀔 때 레이아웃이나 색상이 변하지 않고 실제 컨텐츠로 변경될 수 있다.

Tips

위젯을 디자인할 때 참고할 만한 유용한 팁이다.

위젯이 서로 다른 소스에서 컨텐츠를 모아서 보여주는 역할을 한다면 아래와 같이 소스에 관한 로고를 보여줄 수 있다.

로고를 보여줄 때는 항상 우측 상단에 배치하여 모든 위젯에서 일관적인 위치에 로고가 보여야 한다. 이 위치에 워드마크를 적용하면 안 되며, 위젯의 어느 곳에도 워드마크는 적용해서는 안된다.

위젯에 앱 아이콘을 적용해서도 안된다.

앱 이름을 위젯에 적용하면 안 된다. 홈스크린의 위젯 아래에 앱 레이블이 이미 있기 때문에 과도하게 표현된 듯한 느낌이 든다.

사용자에게 설명하거나 대화를 하는 텍스트를 적용하지 말아라. 대신 중요한 것을 커뮤니케이션해야 한다면 그래픽으로 표현해라.

위젯에 업데이트된 시점과 관련된 정보를 표현해야 한다면 "last updated"나 "last checked"와 같은 문장은 사용하지 말아라.

Source : https://developer.apple.com/videos/play/wwdc2020/10103/

Design great widgets - WWDC 2020 - Videos - Apple Developer