당신의 앱 구현의 시작점은 스토리보드 씬을 정의하는 것입니다. 각 씬은 앱의 유저 인터페이스 부분을 담당합니다. 당신은 다른 애플 와치 사이즈에 맞추어 씬을 커스터마이징 하고 다른 관점의 인터페이스를 설정할 수 있습니다.
스토리보드 씬들을 조립
WatchKit 앱은 iOS 앱들과 같은 레이아웃 모델을 사용할 수 없습니다. WatchKit 앱 인터페이스의 씬이 조립될 때는 빈공간에 원하는데로 임의의 배치를 하는방식으로 뷰 계층을 생성할 수 없습니다. 대신에 XCode가 라인단위로 세로로 쌓는 형태로 아이템을 적절히 정렬해주며 사용자는 엘리먼트를 당신의 씬에 추가할 수 있습니다. 앱이 실행되는 시점에 애플와치는 이러한 엘리먼트들을 사용가능한 공간에 적절히 배치를 하게됩니다.
비록 XCode가 당신의 인터페이스의 전반적인 레이아웃을 조작하긴 하지만 WatchKit은 씬의 아이템들이 적당한 위치에 놓이도록 방법을 제공합니다. 대부분의 아이템의 크기나 위치는 속성 인스펙터를 이용해 설정할 수 있습니다. 아이템의 위치를 변경하는것은 엘리먼트 스택의 현재 위치에서의 가로, 세로 정렬을 결정하게 합니다. 크기 설정은 아이템의 고정된 가로 길이는 정의하거나 사용가능한 공간에 맞추어 리사이즈 되도록 설정할 수 있습니다.
그룹 객체는 당신의 인터페이스의 다른 엘리먼트들을 정렬하기 위한 또다른 중요한 기능을 제공합니다. 그룹 엘리먼트들은 그룹내에서 가로 또는 세로로 엘리먼트들을 정렬할 수 있는 설정을 제공하는 다른 엘리먼트들을 위한 컨테이너 역할을 합니다. 다른 그룹들간에 중첩된 그룹을 구성할 수 있으며 그룹간에 간격이나 삽입된 아이템들의 크기나 위치를 설정할 수 있습니다. 그룹은 기본적으로 보여지는 부분이 없지만 원한다면 배경 색상이나 이미지를 넣을 수 있습니다.
위의 그림은 당신의 스토리보드 파일에서 다른 엘리먼트들을 어떻게 배치하는지를 보여주는 그림입니다. 첫 3개의 엘리먼트들은 인터페이스 컨트롤러 영역안에서 다른 정렬값을 가진 라벨입니다. 라벨들의 바로 밑에는가로로 배치된 두개의 그림을 가지고 있는 그룹 객체입니다. 그룹 밑으로는 구분선과 버튼이 세로로 쌓여있게 됩니다.
XCode에서 인터페이스를 생성하게 되면 각 객체들은 가능한한 사용가능한 공간에 맞추어 리사이즈됩니다. 앱 인터페이스는 애플와치의 두가지 사이즈에 동일하게 실행될 수 있어야 합니다. 시스템에 화면 크기에 맞추어 객체들의 리사이즈를 맡기는것은 각각의 디바이스에 대응하기 위한 별도의 코드를 작성하는 수고를 덜어 줄 수 있습니다.
다른 디스플레이 크기를 수용
XCode는 애플와치의 다른 사이즈들의 인터페이스를 커스터마이징 할 수 있는 기능을 제공합니다. 기본적으로 모든 사이즈의 애플와치에 공통적으로 적용될 수 있는 형태로 사이즈를 설정하도록 되어있지만 다른 디바이스에 특별히 다른 사이즈가 필요로 한다면 거기에 맞추어 커스터마이징 할 수 있습니다. 예를 들어 아이템들의 레이아웃이나 여백의 미세조정이나 크기에 따라 다른 이미지를 선택하도록 할 수 있습니다.
아이템이 디바이스별로 다른 사이즈를 지원하도록 커스터마이징 하기 위해서는 속성 인스펙터에서 + 버튼을 눌러 디바이스에 기본적으로 주어진 값을 변경할 수 있습니다. + 버튼을 눌러 새로운 디바이스에 특화된 속성을 설정할 수 있습니다. 여기에 설정한 값은 선택한 디바이스에만 적용되는 값입니다.
위의 그림은 애플와치 42mm 크기의 스크린에 맞추어 어떻게 텍스트 크기를 조정하는지를 나타낸 그림입니다.
사용자들로 하여금 다른 크기의 애플와치들 사이에 앱 인터페이스의 차이점이 확연히 느껴지지 않도록 해야 합니다. 그렇기 때문에 디바이스 크기별로 커스터마이징 하는것을 최소화해야 합니다. 가능한한 간격과 여백은 인터페이스가 레이아웃을 기반하여 작동하도록 제한하십시오. 다른 레이아웃들간에 모든 인터페이스 객체들을 제거할 수 있지만 이 방법은 추천하지 않습니다. 모든 크기의 애플와치에서 동일한 인터페이스 오브젝트가 보여지도록 해주시기 바랍니다.
디바이스 크기별로 다른 커스터마이징이 정상적으로 적용되었는지를 확인하기 위해서는 스토리보드 에디터 하단에 있는 컨트롤을 이용하여 디바이스 크기를 변경할 수 있습니다. 스토리보드 에디터는 기본적으로 “Any Screen Size” 모드를 제공하며 모든 크기의 애플와치의 스크린 크기를 선택할 수 있습니다. 특정한 스크린 크기 모드로 설정을 변경하면 거기서 변경된 설정은 현재 선택된 디바이스 크기에서만 적용됩니다.
실행 시점에 인터페이스 변경하기
실행 시점에 인터페이스 컨트롤러는 스토리보드 씬의 객체들에 대해 다음과 같은 변경을 할 수 있습니다.
- 데이터 값을 설정하거나 변경
- 수정가능한 객체의 외관을 변경
- 객체의 크기를 변경
- 객체의 투명도를 변경
- 객체를 감추거나 보여지도록 변경
당신은 인터페이스에 새로운 객체를 추가하거나 이미 위치한 객체들의 순서를 변경할 수 없습니다. 마찬가지로 객체를 제거하는것도 불가능하지만 일시적으로 레이아웃에서 감추는 방식으로 제거하는 효과를 얻을 수 있습니다. 아이템이 감춰지면 다른 객체가 이 아이템이 차지했던 공간을 채우게 됩니다. 빈 공간을 채우지 않도록 하기위해서는 제거하려는 아이템의 알파(Alpha)값을 0으로 변경하면 됩니다. 씬에서 객체를 감추는 방법에 대해 더 알아보려면 Hiding Interface Objects 를 보시기 바랍니다.
앱의 주요 색상 설정
모든 WatchKit 앱은 다음의 UI 엘리먼트들에 적용되는 주요 색상을 가집니다.
- 상태바의 타이틀 문자열
- 짧게 보여지는 노티피케이션의 앱 이름
앱의 주요 색상은 스토리보드의 Global Tint 속성에 저장됩니다. 이 속성에 접근하기 위해서는 당신의 스토리보드는 선택하고 파일 인스펙터(File Inspector)에 들어갑니다. 여기서 이미 지정되어있는 색상을 선택하여 팝업 메뉴로부터 원하는 색상을 선택할 수 있습니다.
인터페이스의 국제화
WatchKit 앱의 스토리보드는 기본적으로 국제화를 지원하도록 되어있습니다. 이 기능은 당신의 프로젝트에 Localizable.strings 파일을 추가함으로써 자동으로 지원하게 됩니다. 간단하게 이 파일안에서 각 언어별 타겟별로 번역된 문자열을 입력하고 당신의 앱에 추가해주시면 됩니다. 앱이 실행되는 시점에 스토리보드 씬이 생성되면 XCode는 적절한 언어를 선택하여 보여주게 됩니다.
당신의 라벨이나 컨트롤들이 가지고 있는 텍스트가 충분한 공간을 가질 수 있도록 확장하여 배치해 주십시오. 여러 버튼을 하나의 라인에 배치하기 보다는 버튼의 타이틀이 충분히 보여질 수 있도록 가로로 배치하시기 바랍니다.
텍스트나 이미지를 프로그램적으로 설정하기 위해서는 iOS 또는 OS X와 같은 방식으로 다국어 지원을 해주시면 됩니다.
- NSLocalizedString 매크로를 사용하여 리소스 파일로부터 문자열을 로드합니다.
- 양식이 적용된 숫자값을 위해 NSNumberFormatter 객체를 사용합니다.
- 날짜와 시간에 양식을 적용하기 위해 NSDateFormatter 객체를 사용합니다.
WatchKit 익스텐션을 사용할 때 NSLocale 객체는 사용자의 애플 와치에 설정된 언어 설정을 반환합니다. 이 클래스를 사용하여 사용자가 선호하는 언어와 다른 언어 정보를 가져올 수 있습니다. 당신의 앱을 국제화 하는것에 관심이 있다면 Internationalization and Localization Guide 를 확인하시기 바랍니다.