[iOS] WatchKit[4] - Complication 살펴보기

2022년 8월 5일에 작성됨

Complication..?? 이게 뭔데?

네.. 저도 처음에는 몰랐습니다.. 이게 뭔지..

 

워치를 사용하시는 분이라면 이제는 아실 겁니다. 본인이 원하는 정보들을 워치 화면에 많이 표시하죠.

예를 들자면 배터리라던가 날씨, 카카오톡, 유튜브 뮤직 등등 공식문서에서는 Complication을 이렇게 정의합니다. "사람들이 손목을 올릴 때마다 볼 수 있는 시계 페이스에 관련된 정보들을 표시합니다."

 

만약 iOS앱과 함께 워치앱을 출시하고 Complication 관련해서 세팅을 안 해주면 모든 종류가 default로 전부 다 들어가는 것 같습니다. 그리고 아무런 처리를 안 해주었기 때문에 아무런 데이터가 뜨지 않는 상태가 됩니다. 그래서 만약 워치앱을 출시했는데 '나는 Complication 관련해서 지원을 안 할 거야.'라고 하시면 Complication Family를 지원하지 않게 설정하셔야 합니다. 그 방법들은 추후에 설명드리도록 하겠습니다.

CLKComplicationFamily

 

Complication에서 지원하는 Family 종류는 보시다시피 저렇게나 많습니다.. 만약 전부 다 지원하려면 하나씩 따로 세팅을 해줘야합니다. 물론 워치화면이 한정적이다 보니 대부분 아이콘이 많이 들어가긴 합니다. 하나씩 정리해 보며 알아보도록 합시다!

 

circularSmall

작은 이미지나 몇 글자의 텍스트를 표시합니다.

 

템플릿과 크기 가이드는 다음과 같습니다.

 

extraLarge

더 큰 텍스트와 이미지를 표시합니다.

 

템플릿과 크기 가이드는 다음과 같습니다.

 

modularSmall

아이콘과 콘텐츠, 원형 그래프 또는 하나의 큰 항목으로 구성된 두 개의 누적 행을 표시합니다.

 

템플릿과 크기 가이드는 다음과 같습니다.

 

modularLarge

최대 3행의 콘텐츠를 표시할 수 있는 대형 캔버스를 제공합니다.

 

템플릿과 크기 가이드는 다음과 같습니다.

 

utilitarianSmall, utilitarianSmallFlat

크로노그래프 및 단순 시계 모드와 같이 시계 모드 모서리의 직사각형 영역을 차지할 수 있습니다. 콘텐츠에는 이미지, 인터페이스 아이콘 또는 원형 그래프가 포함될 수 있습니다.

 

템플릿과 크기 가이드는 다음과 같습니다.

 

utilitarianLarge

주로 텍스트 기반이지만 텍스트의 앞쪽에 배치된 인터페이스 아이콘도 지원합니다.

 

템플릿과 크기 가이드는 다음과 같습니다.

 

graphicCorner

Infograph와 같은 시계 모드 모서리에 풀 컬러 이미지, 텍스트 및 게이지를 표시할 수 있습니다. 일부 템플릿은 다색 텍스트도 지원합니다.

 

템플릿과 크기 가이드는 다음과 같습니다.

 

graphicCircular

 

Infograph 및 Infograph Modular 시계 화면의 원형 영역에 텍스트, 게이지 및 풀 컬러 이미지가 포함될 수 있습니다.

템플릿과 크기 가이드는 다음과 같습니다.

 

graphicBezel

Infograph와 같은 일부 시계 모드의 베젤을 따라 텍스트를 곡선으로 만드는 디자인을 사용하여 일반 크기의 원형 이미지와 함께 텍스트를 추가할 수도 있습니다. 텍스트는 잘리기 전에 베젤의 거의 180도를 채울 수 있습니다.

 

템플릿과 크기 가이드는 다음과 같습니다.

 

graphicRectangular

큰 직사각형 영역에 풀 컬러 이미지, 텍스트, 게이지 및 선택적 제목을 표시할 수 있습니다. 일부 텍스트 필드는 다중 색상 텍스트를 지원할 수 있습니다.

 

템플릿과 크기 가이드는 다음과 같습니다.

 

graphicExtraLarge

대부분의 X-Large 시계 화면을 채우는 큰 원형 영역에 풀 컬러 이미지, 텍스트 및 게이지를 표시할 수 있습니다. 일부 텍스트 필드는 다중 색상 텍스트를 지원할 수 있습니다.

 

템플릿과 크기 가이드는 다음과 같습니다.

---

종류가 엄청 많죠.. 더 자세한 내용은 CLKComplicationFamily, Complications, Declaring Complications for Your App 문서들을 참고해주세요 ! 다음에는 제 프로젝트의 코드들을 보면서 사용방법을 한번 정리해 보도록 하겠습니다!