[Widget] Widget HIG 문서 간단 정리

HIG 문서 중, 기록하고 싶은 것들만 기록-!!

(이건 제 기준으로 선별된 목록이니까 문서를 쭉 다 읽는 것을 추천드립니다)

 

[1] 위젯의 목적

사용자가 앱을 열지 않고도 볼 수 있는 적은 양의 정보를 timely, personally (적시에, 개인맞춤화하여,,?) 보여주기 위함입니다. 

그리고 사용자가 iOS Home screen 또는 macOS Notification Center 에서 앱의 콘텐츠에 즉시 액세스할 수 있도록 해줍니다. (iOS는 14부터, macOS는 Big Sur 부터)

[2] 위젯의 컨셉

앱의 메인 아이디어 하나에 딱! 집중해서 위젯을 만드세요 

위젯에 대한 single idea를 정하고 표시할 정보의 범위를 정하는 것은 위젯 만들기 스텝 중 중요한 첫번째 단계라고 말하고 있습니다. 

 

ex) 

날씨 앱 = 현재 위치에 대한 날씨를 보여준다

칼로리 트래킹 앱 = 오늘 소모한 칼로리 양을 보여준다

뉴스 앱 = trending 스토리들을 보여준다. 

게임 앱 = 캐릭터의 상태를 보여준다

그림그리기 앱 = favorite 스케치를 보여준다. 

 

 

https://developer.apple.com/videos/play/wwdc2020/10028/

 

 

[3] 위젯의 사이즈 

small, medium. large 사이즈가 있습니다.

 

 

 

 

 

 

 

사이즈표 

 

 

 

 

 

[4] 애플의 당부

 

1) 앱을 실행만 하는 위젯은 만들지 마세요

 

사람들은 의미 있는 콘텐츠에 대한 즉각적인 접근을 제공하기때문에 위젯을 높이 평가합니다. 앱을 열 수 있는 다른 방법으로서 위젯을 사용하는 것은 NO NO.

 

2) 위젯을 다양한 크기로 제공할 경우 가치를 추가하세요

 

일반적으로 더 큰 영역을 채우기 위해 더 작은 위젯의 내용을 단순히 확장하지 마십시오. 위젯을 모든 크기로 제공하는 것보다 자신의 아이디어를 완벽하게 나타내는 크기의 위젯 하나를 만드는 것이 더 중요합니다.

 

3) 하루 종일 변화하는 동적 정보를 선호하십시오 (Prefer dynamic information that changes throughout the day)

 

위젯의 내용이 변경되지 않는 경우, 사람들은 위젯을 중요한 위치에 보관하지 않을 수 있습니다. 비록 위젯이 시시각각으로 업데이트되지는 않지만, 자주 볼 수 있도록 콘텐츠를 신선하게 유지할 수 있는 방법을 찾는 것이 중요합니다.

 

4) 사용자를 놀라게 하고 기쁘게 할 기회를 찾으세요

 

예를 들어, 생일이나 공휴일과 같은 의미 있는 날에 표시할 수 있도록 달력 위젯에 대해 특별한 시각적 처리를 할 수 있습니다. 

(파란 네모의 선물 아이콘을 봐주세요-!)

 

 

 

 

5) 인증(authentication) 이 가치를 더하는 경우 사용자에게 알리십시오

 

만약에 너의 위젯이 사용자가 로그인할때 더 많은 정보를 제공할 수 잇는 위젯이라면 사용자에게 알리십시오

예를 들어, 예정된 예약을 보여주는 앱은 사람들이 로그인하지 않았을 때 "예약을 보기 위해 로그인"과 같은 메시지를 포함할 수 있습니다.

 

6) 다크모드를 지원하세요

 

위젯은 라이트모드와 다크모드에서 모두 훌륭하게 보여야합니다.

 

 

 

 

7) SF Pro 폰트를 사용하는 것을 고려해주세요

 

시스템 폰트를 사용하면 너의 위젯이 어느 플랫폼이든 홈에 보이며 (???? 폰트랑 무슨상관인거지..?!?)

다양한 weight, style, size로  멋진 텍스트를 쉽게 표시할 수 있습니다.

위젯의 큰 텍스트에 사용자 정의 글꼴을 사용하고 작은 텍스트에는 SF Pro를 사용하는 것이 종종 효과적일 수 있습니다. 

 

 Typography (iOS) and Typography (macOS) 를 참고해주세요

 

8) 데이터가 로드되는 동안 사용자가 인식할 수 있도록 content placeholder 를 만드십시오

 

데이터가 로드 되는 동안 placeholder를 보여주세요 예를들어 rectangle, circle, square들을 사용할 수 있습니다.

 

 

 

 

9) 위젯 갤러리에 뜨는 위젯에 대한 설명은 간결하게 쓰세요

 

위젯 갤러리는 사용자가 이해할 수 있도록 각각 위젯이 뭐하는 건지에 대한 설명을 보여줍니다. 

이런 플로우로 들어가면 나오는 것을 위젯 갤러리라고 하나봐요..!!

저 연두색 네모박스에 들어가는 설명을 간결하고 쓰라고 말하고 있는 것이에요

 

 

 

 

간결하고 좋은 문장은 아래와 같습니다.

 

"See the current weather conditions and forecast for a location"

"Keep track of your upcoming events and meetings."

 

불필요한 문구는 피하세요..!!!

예를 들어

"This widget shows...,"

"Use this widget to...,"

"Add this widget."

 

이런 문구 넣지말고 핵심만 간결하게 말하세요

 

 

10) 가장 큰 사이즈의 위젯에 맞도록 백그라운드 이미지를 맞추세요

 

이미지가 가장 큰 위젯 사이즈에서 잘 나타나는지 확인하고 더 작은 위젯사이즈에는 이미지를 scale down시키세요

아래 사이즈 표를 참고하세요

 

 

 

 

11) 위젯의 corner radius에 content의 corner radius를 잘 맞추십시오

 

content가 위젯의 rounded corner에 잘 맞게 나오는 것을 보장하고 싶으면 SwiftUI의 container를 써서 corner radius를 적용하세요

ContainerRelativeShape 문서를 참고하세요 

 

 

12) 일반적으로 표준 마진(standard margin)을 사용하여 content(내용)을 읽기 쉽게 만드세요

 

standard margin은 16 points 입니다. 

 

한편 background shape를 사용해서 content groupings를 만들거나 button의 backgroun를 표시하려고 할때는 tight margin이 필요할 것입니다. tight margin은 8 points 입니다.