[HIG-Widgets] Teams앱 UX 분석을 통한 HIG 정리 - 5주차 스터디

 

MC2 마지막주 이슈로 인해 4주차 스터디는 쉬어가고 5주차 스터디가 진행되었다.

5주차 스터디의 앱은 Teams였고, 평소 아카데미에서 정보를 공유하는 커뮤니티로 모두 해당 앱을 사용한다.

Teams앱을 사용하면서 불편했던 점이나 궁금했던 점에 대해 알아보고, 그에 대한 해결책을 HIG를 통해 찾아보는 시간을 가졌다!

Pain Point

pain point 라기 보단 .. 팀즈의 위젯 기능이 있는지 살펴보다가 오 있네? 근데 약간 이상하다 싶어서 델고 와봤다.

 

다른 어플들처럼 특정 테스크를 보여주거나 액션을 유도하는 것이 아닌 시간과 이모지?를 보여주는 위젯이었다.

참고로 팀즈에서 잠금화면에서의 위젯은 없었다.

다른 앱 위젯 예시

카카오톡 앱 위젯 갤러리

기본 메모 앱 위젯 갤러리

트레블 월렛 앱 위젯 갤러리

크기는 작은 정사각형, 직사각형, 큰 정사각형 3개로 구성되어있었지만 보여주는 컨텐츠 내용은 똑같았다.

내 생각엔 음 ,, 같은 컨텐츠를 보여줄거면 왜 크기가 다른 위젯 3개나 만들어놓은거지?란 생각에 위젯에 대해 탐구해보기로 결정했다.

 

Widgets

위젯은 앱이나 게임에서 적시에 관련 정보를 소량 표시하여 사람들이 추가 상황에서 한 눈에 볼 수 있도록 한다.
A widget elevates and displays a small amount of timely, relevant information from your app or game so people can see it at a glance in additional contexts.

 

위젯은 사람들이 앱을 열지 않고도 콘텐츠를 표시하고 특정 기능을 제공한다.

사람들은 위젯을 사용하여 디바이스를 구성하고 개인화하고 필요한 정보와 기능에 빠르게 액세스할 수 있다.

• iOS 및 iPadOS: 위젯이 홈 화면, Today View 및 잠금 화면에 나타난다.
• macOS: 바탕화면(Desktop)과 알림센터(Notification Center)에 위젯을 배치한다.
• watchOS: watchOS 10부터 사람이 Digital Crown을 돌리면 스마트 스택에 위젯이 나타난다.

위젯을 찾기 위해 사람들은 위젯 갤러리를 사용한다.

갤러리의 편집 모드에서는 날씨 위젯에서 특정 위치를 선택하거나 뉴스 위젯에서 주제를 선택하는 등 편집 가능한 위젯을 변경할 수 있다.

• iOS 및 iPadOS: Today View, 홈 화면 및 잠금 화면 편집 모드에서 위젯 갤러리를 사용할 수 있다.
  • iOS 및 iPadOS: 위젯 갤러리는 스마트 스택을 포함한 위젯 스택(Widget Stack)도 지원한다. 스택에는 동일한 크기의 위젯이 최대 10개 포함된다. 사람들은 스택을 스크롤하여 한 번에 하나의 위젯을 본다. 스마트 스택에서 스택은 위젯을 자동으로 회전하여 현재 컨텍스트와 관련성이 가장 높은 위젯을 표시한다. iPhone 및 iPad의 잠금 화면에서는 스마트 스택을 사용할 수 없다. 추천 위젯은 사람들이 유지하도록 선택하지 않는 한 스마트 스택에 유지되지 않는다.
  • 개발자 지침은 스마트 스택에서 위젯 가시성 향상을 참조하세요 .
    

위젯 스택이 무엇일까요?

위젯 스택 보기

 

위젯 스택 편집

 

• macOS: 바탕화면과 알림 센터 편집 모드에서 위젯 갤러리를 사용할 수 있다. macOS 14부터 macOS의 위젯 갤러리에는 동일한 Apple ID를 사용하는 기기의 iPhone 위젯이 표시된다.
• 위젯 갤러리를 사용할 수 없는 watchOS: 앱이 사전 구성된 위젯을 제공한다. 시스템은 스마트 스택에 최대 10개의 위젯을 표시하며 사용자는 위젯을 스마트 스택의 고정 위치에 고정할 수 있다.

각 OS별 사용 가능한 위젯 사이즈 및 위치

 

Best Practices

1. 앱의 주요 목적과 명확하게 관련된 간단한 아이디어를 찾아라.

• 디자인 과정의 첫 번째 단계는 위젯에 대한 단 하나의 아이디어를 선택하는 것이다. 프로세스 전반에 걸쳐 이 아이디어를 활용하여 가장 관련성이 높은 콘텐츠와 기능만 위젯에 포함할 수 있다.
• ex) 날씨 앱: 사용자는 현재의 최고 기온과 최저 기온, 기상 조건에 가장 관심이 있는 경우가 많으므로 날씨 위젯은 이 정보를 우선시한다.

2. 각 크기마다 위젯의 주요 목적과 직접적으로 관련된 정보만 표시한다.

• 더 큰 위젯에서는 더 많은 데이터 또는 데이터의 더 자세한 시각화를 표시할 수 있지만 위젯의 주요 목적을 간과하고 싶지는 않아야 한다.
• ex) 모든 캘린더 위젯은 개인의 예정된 이벤트를 표시한다. 각 크기에서 위젯은 이벤트 중심에 유지되며 크기가 커질수록 정보의 범위가 확장된다.

캘린더 앱 살펴보기!

 

 

3. 다양한 크기로 위젯을 제공하면 가치가 더해진다.

• 일반적으로 더 큰 영역을 채우기 위해 단순히 작은 위젯의 콘텐츠를 확장하는 것은 피해라. 모든 크기의 위젯을 제공하는 것보다 표시하려는 콘텐츠에 가장 적합한 크기로 하나의 위젯을 만드는 것이 더 중요하다.

4. 사람들이 원하는 콘텐츠에 빠르게 액세스할 수 있는 위젯을 만드는 것을 목표로 하라.

• 사람들은 의미 있는 콘텐츠를 표시하고 유용한 작업과 앱의 주요 영역에 대한 딥 링크를 제공하는 위젯을 높이 평가한다. 위젯이 단순히 앱 아이콘처럼 작동하는 경우 추가 가치가 거의 없으며 사람들이 위젯을 화면에 표시할 가능성이 낮아질 수 있다.

 

Configuring Widgets

어떤 경우에는 사람들이 자신에게 가장 유용한 정보를 표시하도록 위젯을 편집해야 한다.
ex) 사람들은 주식 위젯에 대해 주식 기호를 선택한다. 반면, 팟캐스트 위젯과 같은 일부 위젯은 최신 콘텐츠를 자동으로 표시하므로 사용자가 맞춤 설정할 필요가 없다.

 

사람들이 쉽게 사용자 정의할 수 있도록 편집 가능한 위젯을 만들어라.

• 위젯이 편집 가능한 경우 너무 많은 설정을 요구하거나 사람들이 찾기 어려울 수 있는 정보를 요청하지 말아라. 시스템이 위젯을 자동으로 생성하므로 위젯에 대한 편집 모드 사용자 인터페이스를 디자인할 필요가 없다.
• 개발자 지침은 구성 가능한 위젯 만들기 를 참조하세요 .

Adding interactivity to widgets (위젯에 상호작용 추가하기)

사람들은 위젯을 탭하거나 클릭하여 해당 앱을 시작한다. iOS 17, iPadOS 17 및 macOS 14부터 위젯에는 앱을 실행하지 않고도 추가 기능을 제공하는 버튼과 토글도 포함될 수 있다.
ex) 미리 알림 위젯: 사람들이 작업을 완료한 것으로 표시하는 데 도움이 되며 사람들이 일일 카페인 섭취량을 기록하는 데 사용하는 앱의 위젯에는 그날의 카페인 총량을 늘리는 버튼이 포함될 수 있다.

 

위젯에서 간단하고 관련성이 높은 기능을 제공하고 앱의 복잡한 기능을 남겨둬라.

• 유용한 위젯은 콘텐츠와 직접적으로 관련된 작업이나 작업을 완료하는 쉬운 방법을 제공한다.

위젯 상호작용이 올바른 위치에서 앱을 여는지 확인하라.

• 사람들이 버튼이나 토글이 아닌 영역에서 위젯과 상호 작용하면 상호 작용으로 인해 앱이 실행된다. 사람들이 앱의 관련 영역으로 이동하도록 하는 것을 피하고, 대신 위젯의 콘텐츠와 직접 관련된 세부 정보 및 작업을 제공하는 장소로 딥 링크를 연결하라.
• Ex) 사람들이 medium 사이즈의 주식 위젯을 클릭하거나 탭하면 주식 앱에서 해당 종목에 대한 정보를 표시하는 페이지가 열린다.

하루 종일 변화하는 동적 정보를 선호한다.

• 위젯의 콘텐츠가 전혀 변경되지 않는 것처럼 보이면 사람들은 위젯을 눈에 띄는 위치에 유지하지 않을 수 있다. 위젯은 매분 업데이트되지 않지만 자주 볼 수 있도록 콘텐츠를 최신 상태로 유지하는 방법을 찾는 것이 중요하다.

한 눈에 알아볼 수 있고 깔끔하게 유지하면서 상호작용을 위한 옵션을 제공하라.

• iOS, iPadOS 및 macOS: 위젯은 앱을 여는 여러 딥 링크를 제공할 수 있으며 앱을 실행하지 않고도 앱 기능을 수행하는 컨트롤을 포함할 수 있다. SwiftUI 링크, 버튼 및 토글과 같은 여러 상호 작용 대상이 콘텐츠에 적합할 수 있지만 위젯에 앱과 유사한 레이아웃을 만드는 것은 피하라. 대상의 크기에 주의를 기울이고 사람들이 실수로 의도하지 않은 상호 작용을 수행하지 않고 자신감을 갖고 탭하거나 클릭할 수 있는지 확인하라.
• watchOS: 스마트 스택의 인라인 액세서리 위젯과 위젯은 탭 대상을 하나만 제공한다.

 

Updating Widget Contents

관련성과 유용성을 유지하기 위해 위젯은 주기적으로 정보를 새로 고친다.
위젯은 지속적인 실시간 업데이트를 지원하지 않으며 시스템은 다양한 요인에 따라 업데이트 제한을 조정할 수 있다.

 

위젯을 최신 상태로 유지하라.

• 위젯에 대한 적절한 업데이트 빈도를 찾는 것은 데이터가 얼마나 자주 변경되는지 파악하고 사람들이 새 데이터를 확인해야 하는 시기를 예측하는 데 달려 있다.
• ex) 사람들이 해변에서 조수를 추적하는 데 도움이 되는 위젯은 조수 조건이 끊임없이 변하더라도 시간 단위로 유용한 정보를 제공할 수 있다. 사람들이 위젯을 업데이트할 수 있는 것보다 더 자주 확인할 가능성이 높으면 데이터가 마지막으로 업데이트된 시기를 설명하는 텍스트를 표시하는 것도 좋다.

시스템 기능을 사용하여 위젯의 날짜와 시간을 새로 고친다.

• 위젯 업데이트 빈도는 제한되어 있으며 시스템이 날짜 및 시간 정보를 새로 고치도록 하여 일부 업데이트 기회를 보존할 수 있다.

콘텐츠를 빠르게 표시하라.

• 표시하는 데이터에 맞는 업데이트 빈도를 결정할 때 placeholder contents 뒤에 stale data(캐시가 만료된 오래된 데이터)를 숨길 필요가 없다.

애니메이션 전환을 사용하여 데이터 업데이트에 주의를 집중시켜라.

• 기본적으로 많은 SwiftUI View는 콘텐츠 업데이트에 애니메이션을 적용한다. 최대 2초 길이의 표준 및 사용자 정의 애니메이션을 사용하여 새로운 정보가 제공되거나 콘텐츠가 다르게 표시되는 경우를 사람들에게 알린다.

실시간 업데이트를 표시하는 Live Activity을 제공한다.

• 위젯은 실시간 정보를 표시하지 않는다. 앱에서 사람들이 빈번한 업데이트를 통해 제한된 시간 동안 작업이나 이벤트의 진행 상황을 추적할 수 있다면 앱에서 Live Activities을 제공하는 것을 고려해라. 위젯과 Live Activities은 동일한 기본 프레임워크를 사용하고 디자인 유사성을 공유한다. 결과적으로 위젯과 Live Activities을 동시에 개발하고 두 기능에 대한 코드와 디자인 구성 요소를 재사용하는 것이 좋다.
• 라이브 활동에 대한 디자인 지침은 라이브 활동을 참조하세요 .
• 개발자 지침은 ActivityKit 을 참조하세요.

 

5. 놀라움과 즐거움을 선사할 기회를 찾아라.

• ex) 생일이나 공휴일과 같은 의미 있는 행사에 표시되도록 달력 위젯에 대한 고유한 시각적 처리를 디자인할 수 있습니다.

6. 인증이 가치를 더하면 사람들에게 알려라.

• 누군가가 앱에 로그인했을 때 위젯이 추가 기능을 제공한다면 사람들에게 그 사실을 알려라.
• ex) 예정된 예약을 표시하는 앱에는 사람들이 로그아웃할 때 '예약을 보려면 로그인하세요'와 같은 메시지가 포함될 수 있다.

 

Widget Interface Design

위젯은 선명한 색상, 풍부한 이미지, 한 눈에 쉽게 읽을 수 있는 명확하고 선명한 텍스트를 사용한다. 독특하고 아름다운 위젯은 유용한 정보를 제공할 뿐만 아니라 사람들이 자신의 기기에 이 위젯을 추가하도록 유도할 수 있다.

 

브랜드 아이덴티티와 연결된 디자인 요소를 포함하여 사람들이 귀하의 위젯을 알아볼 수 있도록 도와라.

• 브랜드 색상, 서체, 스타일화된 글리프와 같은 디자인 요소를 사용하면 위젯을 즉시 알아볼 수 있다. 브랜드 관련 디자인 요소가 유용한 정보를 가리거나 위젯이 해당 맥락에서 부적절하게 보이지 않도록 주의하라.
• macOS의 알림 센터 또는 iOS의 홈 화면에 위젯이 나타나면 시스템은 그 아래에 앱 이름을 표시한다. Today View, iOS의 잠금 화면, iPadOS 홈 화면에서는 앱 이름이 위젯 아래에 표시되지 않는다.

위젯에 로고, 워드마크, 앱 아이콘을 표시하기 전에 신중하게 고려하라.

• 색상, 글꼴 등 브랜드 관련 디자인 요소를 이미 포함했다면, 사람들이 위젯을 인식하는 데 로고나 앱 아이콘이 필요한 경우가 거의 없다.
• 또한 위젯 갤러리에는 귀하가 제공하는 다양한 유형과 크기의 위젯이 나열될 때 앱 이름과 아이콘이 표시된다. 여러 소스의 콘텐츠를 표시하는 위젯과 같은 일부 위젯에서는 위젯을 제공하는 앱을 미묘하게 식별하기 위해 오른쪽 상단에 작은 로고를 포함하는 것이 합리적일 수 있다.

편안한 정보 밀도를 목표로 하라.

• 콘텐츠가 드물게 나타나면 위젯이 불필요해 보일 수 있다.
• 콘텐츠가 너무 조밀하면 위젯을 한눈에 볼 수 없다. 포함할 정보가 많은 경우 위젯을 구문 분석하기 어려운 항목의 콜라주로 만들지 마라. 사람들이 핵심적인 부분을 즉각적으로 파악하고 관련 내용을 더 오랫동안 볼 수 있도록 콘텐츠를 큐레이팅하는 방법을 모색해라. 더 큰 위젯을 만들고 명확성을 잃지 않으면서 텍스트를 그래픽으로 바꿀 수 있는 위치를 찾는 것도 고려해 볼 수 있다.

색상을 신중하게 사용하라.

• 아름다운 색상은 시선을 끌지만 사람들이 위젯의 정보를 한 눈에 흡수하는 데 방해가 되지 않아야 한다. 콘텐츠와 경쟁하지 않고 위젯의 모양을 향상하려면 색상을 사용하라. asset catalog에서 시스템이 위젯의 편집 모드 사용자 인터페이스를 생성할 때 사용할 색상을 지정할 수도 있다.

앱 내에서 위젯의 모양을 미러링하지 마라.

• 앱이 위젯처럼 보이지만 위젯처럼 작동하지 않는 요소를 표시하는 경우 요소와 상호작용할 때 요소가 다르게 반응하면 사람들이 혼란스러워할 수 있다. 또한 사람들은 앱에서 해당 요소가 위젯처럼 작동할 것으로 기대하기 때문에 이러한 요소와 상호 작용하는 다른 방법을 시도할 가능성이 낮을 수 있다.

 

Scaling content and using margins and padding

위젯은 다양한 장치 및 화면 영역의 화면 크기에 맞게 크기가 조정된다. 적절한 크기로 콘텐츠를 제공하여 위젯이 모든 장치에서 멋지게 보이도록 하라.

 

시스템이 필요에 따라 콘텐츠의 크기를 조정하거나 확장할 수 있도록 하여 모든 상황에서 멋지게 보이도록 콘텐츠를 디자인하라.

• iOS: 시스템은 대형 장치에 맞게 디자인한 콘텐츠의 크기를 조정하여 위젯이 작은 장치에서도 잘 보이도록 보장한다.
• iPadOS: 시스템은 위젯을 홈 화면에 표시하기 위해 축소하기 전에 큰 크기로 렌더링한다. 다양한 장치 및 축척 비율에 대한 설계 종합을 생성할 때 지침으로 사양 에 나열된 값을 사용하라.
• 프로덕션 위젯의 경우 SwiftUI를 사용하여 유연성을 보장하세요.

콘텐츠의 모서리 반경(corner radius)을 위젯의 모서리 반경(corner radius)과 조정하라.

• 위젯의 둥근 모서리 내에서 콘텐츠가 보기 좋게 보이도록 하려면 SwiftUI 컨테이너를 사용하여 올바른 모서리 반경을 적용하라.
• 개발자 지침은 ContainerRelativeShape을 참조하세요.

일반적으로 콘텐츠를 편안하게 읽을 수 있도록 표준 여백을 사용하라.

• 위젯의 가장자리가 혼잡해지고 모양이 어수선해지는 것을 방지하려면 위젯의 표준 여백 너비(대부분의 위젯의 경우 16pt)를 사용하라.
• ex) 그래픽이나 버튼을 배치하거나 배경 모양을 사용하여 시각적 콘텐츠 그룹을 만들 때 더 좁은 사용자 정의 여백을 사용해야 할 수도 있다. 이러한 경우에는 11pt의 좁은 여백을 설정하는 것이 효과적일 수 있습니다.
• 또한 위젯은 Mac 데스크탑과 잠금 화면(StandBy 포함)에서 더 작은 여백을 사용한다는 점에 유의하라.
• 개발자 지침은 padding(::)을 참조하세요 .

 

Displaying text in widgets

시스템 글꼴, 텍스트 스타일, SF 기호 사용을 고려해라.

• 시스템 글꼴을 사용하면 모든 플랫폼에서 위젯이 보기 좋게 표시되는 동시에 다양한 두께, 스타일 및 크기로 멋진 텍스트를 표시하기가 더 쉬워진다.
• SF 기호를 사용하여 시스템 글꼴을 사용하는 텍스트에 기호를 정렬하고 크기를 조정한다. 사용자 정의 글꼴을 사용해야 하는 경우에는 사용을 자제하고 사람들이 한 눈에 쉽게 읽을 수 있는지 확인하라.
• 위젯의 큰 텍스트에는 사용자 정의 글꼴을 사용하고 작은 텍스트에는 SF Pro를 사용하는 것이 효과적인 경우가 많습니다. 지침은 타이포그래피 및 SF 기호를 참조하세요 .

매우 작은 글꼴 크기를 사용하지 마라.

• 일반적으로 11pt 이상의 글꼴을 사용하여 텍스트를 표시한다. 11pt보다 작은 글꼴로 된 텍스트는 많은 사람들이 읽기에 너무 어려울 수 있다.

텍스트 크기가 잘 조정되도록 하려면 항상 위젯에서 텍스트 요소를 사용하라.

• 특히 텍스트를 래스터화하지 마십시오.(don’t rasterize text.) 그렇게 하면 VoiceOver가 콘텐츠를 말하는 것을 막을 수 있다.
• Rasterize: 오브젝트를 이미지화하여 본래 속성을 없애는 것.

 

Supporting different appearances and modes

독특하고 아름다운 위젯은 모든 디자인에 유용한 정보를 제공할 뿐만 아니라 사람들이 자신의 기기에 위젯을 추가하도록 유도할 수 있다. 위젯이 나타나는 상황에 따라 위젯이 다르게 보일 수 있다.

 

• iPhone 및 iPad: 홈 화면에서 위젯은 라이트 모드와 다크 모드를 지원하는 풍부한 풀 컬러로 나타난다.
• iPad: 잠금 화면에서 위젯은 생생한 모습을 보인다.
• StandBy 상태의 iPhone: 잠금 화면에서 위젯은 크기가 확대되어 나타나며 생동감 넘치는 모습을 사용한다. 주변 조명이 임계값 아래로 떨어지면 야간 모드의 StandBy는 위젯 콘텐츠를 단색의 빨간색 색조로 렌더링한다.

 

 

Previews and placeholders

위젯 갤러리에 표시할 사실적인 미리보기를 디자인하라.

• 위젯의 기능을 강조하고 각 위젯 유형이나 크기가 제공할 수 있는 경험을 명확하게 나타내면 사람들이 정보에 입각한 결정을 내리는 데 도움이 된다. 위젯 미리보기에 실제 데이터를 표시할 수 있지만, 데이터를 생성하거나 로드하는 데 시간이 너무 오래 걸리는 경우 현실적인 시뮬레이션 데이터를 대신 표시하라.

사람들이 위젯을 인식하는 데 도움이 되는 placeHolder 콘텐츠를 디자인하라.

• 설치된 위젯은 데이터가 로드되는 동안 placeHolder 콘텐츠를 표시한다. 정적 인터페이스 구성 요소와 동적 콘텐츠를 나타내는 반투명 모양을 결합하여 효과적인 플레이스홀더 모양을 만들 수 있다.
• ex) 다양한 너비의 직사각형을 사용하여 텍스트 선을 제안하고 글리프와 이미지 대신 원 또는 정사각형을 사용할 수 있다.

 

위젯에 대한 간결한 설명을 작성하라.

• 위젯 갤러리에는 사람들이 각 위젯의 기능을 이해하는 데 도움이 되는 설명이 표시된다. 일반적으로 동작 동사로 설명을 시작하는 것이 효과적이다.
• ex) "현재 기상 조건 및 해당 지역의 일기예보를 확인하세요" 또는 "다가오는 이벤트 및 회의를 계속 추적하세요"와 같이 설명을 시작하는 것이 좋다. "이 위젯은...을 보여줍니다.", "이 위젯을 사용하려면...", "이 위젯 추가"와 같이 위젯 자체를 참조하는 불필요한 문구를 포함하지 마라.
• 친근한 언어와 문장 스타일의 대문자를 사용하세요 .
• 주식 앱 예시

 

 

위젯의 크기를 그룹화하고 단일 설명을 제공한다.

• 위젯이 다양한 크기로 제공되는 경우 사람들이 각 크기가 다른 위젯이라고 생각하지 않도록 크기를 그룹화하라.
• 제공하는 크기 수에 관계없이 위젯에 대한 단일 설명을 제공하여 반복을 방지하고 각 크기가 동일한 콘텐츠와 기능에 대해 약간 다른 관점을 제공하는 방법을 사람들이 이해할 수 있도록 돕는다.

추가 버튼에 색상을 지정해 봐라.

• 사람들이 위젯 갤러리에서 앱을 선택하면 제공하는 위젯 그룹 아래에 추가 버튼이 나타난다. 사람들에게 브랜드를 상기시키는 데 도움이 되도록 이 버튼의 색상을 지정할 수 있다.

 

Solution

아직 팀즈 앱의 위젯이 제대로 기능이 나오지 않은 것 같다.

그렇다면 위젯을 만들면 안됐던 것 아님? 왜 저렇게 대충 만들고 위젯을 냈을까? 참 의문 ….. ^^ 하루빨리 팀즈의 위젯이 나오길 바래봅니다.

 

사실 전부터 Widget을 개발해보고 싶었기 때문에 Widget에 대해 오랫동안 공부해봤다.

생각보다 HIG에서 너무너무 상세하게 설명해주고 있어서 재미있었고, 오늘 배운 내용을 통해 꼭 앞으로 있을 챌린지에 적용해보고 싶다!