Tag Archives: 애플와치

애플와치 Glance 핵심 사항 정리

Leave a reply

watchkit_logo

Glance(흘낏 보다)는 당신의 앱에서 중요한 정보를 사용자에게 보여주기 위한 보조적인 방법입니다. 모든 앱이 Glance를 필요로 하지는 않습니다. Glance를 이용하여 적절한 시점에 관련된 정보를 보여줄 수 있습니다. 예를 들어 캘린더 앱의 Glance는 사용자의 다음 미팅 정보를 보여줄 수 있습니다. 항공사 앱이라면 곧 다가올 비행의 공항 게이트 정보를 보여줄 수 있습니다. 다음 그림은 사용자의 To-do 리스트중에 처리한 일과 남은 일의 갯수를 보여주는 예시 화면입니다.

applewatch_glance_essential_01

Glance는 WatchKit 앱과 WatchKit 익스텐션의 일환으로 제공됩니다. 당신의 Glance 인터페이스에는 WatchKit 앱의 스토리보드 파일에 포함되며 이 인터페이스는 커스텀 WKInterfaceController에 의해 관리됩니다. 하지만 Glance 인터페이스 컨트롤러에서 구현할 수 있는 유일한 작업은 Glance를 위한 컨텐츠를 보여주는것 뿐입니다. Glance는 유저의 상호작용(Interactivity)을 구현할 수 없습니다. Glance 화면을 탭할 경우 자동으로 WatchKit 앱을 실행하게 됩니다.

Glance 생명 주기

Glance 인터페이스 컨트롤러의 생명 주기는 사용자에게 빨리 보여주기 위해 좀 더 일찍 초기화 된다는 점을 제외하면 다른 인터페이스 컨트롤러와 동일합니다. Glance가 초기화 되고 사용자에게 보여지기 까지 적지 않은 시간이 소요될 수 있기 때문에 willActivate 메소드에서 보여줄 정보가 업데이트 될 수 있도록 해야 합니다. 인터페이스 컨트롤러의 생명 주기에 대해 더 알아보고 싶을 경우 WatchKit Extension Life Cycle을 확인하십시오.

Glance 인터페이스 가이드라인

XCode는 앱의 컨텐츠를 정렬하는 방법으로 고정된 레이아웃을 제공합니다. 당신의 컨텐츠를 보여주기 위한 적절한 레이아웃을 선택한 다음에는 다음의 가이드라인을 확인하시기 바랍니다.

  • 정보를 신속하게 전달 할 수 있도록 당신의 Glance를 디자인 하십시오. 많은 텍스트를 보여주려 하지 마십시오. 적절한 디자인, 색상, 애니메이션을 사용하여 정보를 제공하십시오.
  • 가장 중요한 정보에 집중하십시오. Glance는 당신의 WatchKit 앱을 대체하는 역할을 하지 않습니다. iOS의 정제된 버전이 WatchKit 앱이라면 Glance는 WatchKit 앱의 정제된 버전입니다.
  • Glance 인터페이스에 상호작용하는 컨트롤을 포함하지 마십시오. 버튼, 스위치, 슬라이더, 메뉴와 같은 상호작용하는 컨트롤들은 사용할 수 없습니다.
  • 당신의 Glance 인터페이스에 테이블이나 지도를 사용하지 마십시오. 이들은 기능적으로 금지되지는 않지만 공간 제약상 테이블과 지도는 효율적으로 정보를 제공하기 어렵습니다.
  • 시점에 적절한 정보를 보여주십시오. 사용자에게 중요한 시간과 위치 정보를 포함하여 모든 사용가능한 리소스를 사용하십시오. 당신의 인터페이스 컨트롤러가 초기화 되고 사용자에게 보여지기 까지 발생하는 변화를 감안하여 Glance 에 보여질 정보를 업데이트 하는것을 잊지 마십시오.
  • 모든 텍스트에 시스템 폰트를 사용하십시오. 당신의 Glance에 커스텀 폰트를 사용하기 위해서는 반드시 커스텀 폰트를 이미지로 렌더링 한 후에 이미지를 보여주십시오.

하나의 앱은 하나의 Glance 인터페이스 컨트롤러만을 가질 수 있기 때문에 이 컨트롤러에서 당신이 보여주고자 하는 정보를 반드시 보여주어야 합니다.

Glance 인터페이스 관리

당신의 XCode 프로젝트에 WatchKit 앱 타겟을 주가할 때 Glance 인터페이스를 원하는지 여부를 선택할 수 있습니다. 프로젝트 초기화 시점에 이것을 잊고 있었다면 나중에도 추가할 수 있습니다. Glance 인터페이스 컨트롤러는 앱의 스토리보드와는 조금 다른 형태를 띄고 있습니다. Glance의 인터페이스 컨트롤러는 Glance 시작 지점에 붙어있고 자체적으로 기본 레이아웃을 가지고 있습니다.

applewatch_glance_essential_02

구동 시점에 당신의 Glance의 컨텐츠를 설정하기 위해서는 WKInterfaceController를 상속한 커스텀 클래스를 사용해야 합니다. 당신의 WatchKit 앱을 구현하는 것과 동일한 방법으로 상속을 받아 구현하시면 됩니다.

앱에 Glance 인터페이스를 추가하기

WatchKit 앱 타겟을 생성할 때 Glance 인터페이스를 구현을 위한 파일들을 생성할지 묻는 “Include Glance Scene” 옵션을 선택할 수 있습니다. 선택할 경우 XCode는 Glance 스토리보드 씬과 커스텀 Glance 인터페이스 컨트롤러 클래스를 제공합니다. 만약 타겟을 추가할 때 이 옵션을 선택하지 못하였다면 다음과 같은 방법으로 수동으로 추가할 수 있습니다.

  1. 당신의 프로젝트에서 WKInterfaceController 를 상속한 클래스를 생성합니다. 새로운 소스 파일을 추가하고 WatchKit 익스텐션 타겟에 추가합니다. GlanceInterfaceController과 같이 적절한 이름으로 만들어 줍시다.
  2. 당신의 스토리보드 파일에서 Glance 인터페이스 컨트롤러를 드래그하여 추가해 줍니다. 이 씬은 위에서 봤었던 스크린샷처럼 Glance 시작 지점 화살표가 붙어있게 됩니다.
  3. 방금 추가한 Glance 인터페이스 컨트롤러를 선택하고 “Identity Inspector”를 선택합니다.
  4. 위에서 생성한 Glance 인터페이스 컨트롤러 클래스를 설정해 줍니다.

WatchKit 앱은 단 하나의 Glance 인터페이스만을 가질 수 있습니다. 당신 앱의 스토리보드에 두개 이상의 Glance 인터페이스 컨트롤러를 추가하지 않도록 주의하십시오.

Glance 인터페이스 컨트롤러를 구현하고 업데이트 하기

Glance 인터페이스 컨트롤러의 구현은 라벨과 이미지들로 이루어진 컨텐츠들의 세팅이기 때문에 상대적으로 간단합니다.

  • init 과 awakeWithContext: 메소드들을 사용하여 Glance 인터페이스를 초기화 하고 라벨과 이미지들의 초기값을 설정하십시오.
  • willActivate 메소드에서 Glance 인터페이스가 화면에 보여지기 전에 표시되어야 하는 정보를 업데이트 하십시오.

Glance가 화면에 보여지고 난 뒤에 컨텐츠를 업데이트 하기 위해서는 NSTimer 객체를 이용하여 주기적으로 업데이트를 할 수 있습니다. 당신은 스스로 업데이트하는 WKInterfaceDate 와 WKInterfaceTimer 객체를 사용하여 업데이트를 할 필요가 없습니다.

Glance로부터의 앱 구동을 커스터마이징하기

사용자가 Glance 화면을 탭하면 애플 와치는 이 Glance에 대응하는 WatchKit 앱을 구동합니다. 일반적으로 메인 인터페이스 컨트롤러가 구동됩니다. Glance로 부터 앱이 구동될 때 해야 할일을 커스터마이징 하기위해서는 다음을 따르기 바랍니다.

  • Glance 인터페이스 컨트롤러에서
    • Glance의 init과 willActivate 메소드들을 일반적인 방법으로 구현합니다.
    • 원하는 시점에 당신의 앱이 필요로하는 부가적인 정보를 userInfo에 담아 updateUserActivity:userInfo:webpageURL: 메소드를 호출합니다. 구동 시점에 여기서 넘겨받은 데이터를 토대로 다른 인터페이스 컨트롤러를 보여줄 수 있습니다.
  • 앱의 메인 인터페이스 컨트롤러에서
    • handleUserActivity: 메소드를 구현하십시오. userInfo Dictionary를 이용하여 적절한 UI를 설정할 수 있습니다.

updateUserActivity:userInfo:webpageURL: 메소드를 호출하면 WatchKit은 메인 인터페이스 컨트롤러의 handleUserActivity: 메소드를 구동시점에 호출하게 됩니다. 이 handleUserActivity: 메소드의 구현부에서 적절한 UI를 선택할 수 있습니다. 예를 들어 페이지 기반 앱의 경우 가장 처음에 보여줄 페이지가 몇페이지인지를 선택하게 할 수 있습니다.

참고 : Glance Essentials, Managing Your Glance Interface

애플와치 인터페이스 네비게이션

1 Reply

watchkit_logo

한개 이상의 컨텐츠 화면을 가진 WatchKit 앱이라면 각 화면간 이동하는 방법을 선택해야 합니다. WatchKit 앱은 서로 다른 두가지 네비게이션 스타일을 제공합니다.

  • 페이지 기반 : 이 스타일은 다른 페이지와 그다지 밀접하지 않은 데이터로 이루어진 단순한 앱에 적합합니다. 페이지 기반 인터페이스는 두개 또는 그 이상의 인터페이스 컨트롤러에 의존성을 가지며 한번에 한 화면씩을 보여주게 됩니다. 실행 시점에 사용자는 화면을 좌우로 스와이핑 하면서 인터페이스 컨트롤러 사이를 오갈 수 있습니다. 화면의 하단에 위치한 점(Dot) 표시를 통해 현재 사용자가 몇번째 페이지를 보고 있는지 확인할 수 있습니다.
  • 계층형 : 이 스타일은 더 복잡한 데이터로 이루어진 앱이나 데이터가 계층형으로 표시되는것이 좋은 경우에 어울립니다. 계층형 인터페이스는 항상 한 최상위(Root) 인터페이스 컨트롤러에서 시작됩니다. 이 인터페이스 컨트롤러에서 탭을 하여 새로운 인터페이스 컨트롤러를 화면에 삽입(Push)할 수 있습니다.

당신은 페이지 기반 및 계층형 네비게이션 스타일을 섞어서 앱을 구현할 수는 없지만 모달(Modal)창을 사용하여 보완할 수 있습니다. 모달창은 현재의 사용자의 이용 플로우를 잠시 중단하고 어떤 값을 입력 받거나 정보를 보여주는 형태로 사용됩니다. 당신은 페이지 기반 또는 계층형 인터페이스 컨트롤러를 모달형태로 보여줄 수 있습니다. 모달창 자신은 하나의 화면이나 또는 페이지기반 레이아웃처럼 다수의 화면으로 구성될 수 있습니다.interface_navigation_02

페이지 기반 인터페이스 구현하기

당신은 앱의 스토리보드의 페이지 기반 인터페이스에서 다음페이지로의 세그웨이(Segue)를 인터페이스 컨트롤러간 연결하도록 만드는 방식으로 구현할 수 있습니다. 인터페이스 컨트롤러들간에 다음 페이지로의 세그웨이를 만드는 방법은 다음과 같습니다.

  1. 당신의 스토리보드에서 각각의 페이지들을 구현하기 위한 인터페이스 컨트롤러를 추가합니다.
  2. 앱의 메인 인터페이스 컨트롤러에서 컨트롤 버튼을 누른채로 다른 인터페이스 컨트롤러 씬으로 드래그를 하여 세그웨이 라인을 연결해 줍니다.
  3. 세그웨이 설정 패널의 관계 설정에서 “next page”를 선택합니다.
  4. 같은 방법으로 각각의 인터페이스 컨트롤러들간에 다음 페이지로 연결되는 세그웨이를 생성합니다. 여기서 연결되는 세그웨이의 순서가 페이지의 순서를 정하게 됩니다.

스토리보드 파일에서 당신이 만든 세그웨이는 당신의 앱이 구동될 때 페이지 기반 인터페이스가 로드되는 순서를 결정합니다. 당신은 reloadRootControllersWithNames:contexts: 메소드를 구동 사이클에서 미리 실행함으로써 당신이 보여주고 싶은 페이지의 세트를 변경할 수 있습니다. 예를 들어 메인 인터페이스 컨트롤러의 init 메소드에서  이 메소드를 호출하여 WatchKit이 다른 페이지 세트를 로드하게 강제할 수 있습니다.

모든 페이지 기반 인터페이스 컨트롤러들은 인터페이스가 보여지기 이전에 생성되고 초기화 되지만 단 하나의 인터페이스 컨트롤러는 보여지는 시점에 초기화됩니다. 일반적으로 WatchKit은 페이지 순서중에 가장 첫번째 인터페이스 컨트롤러를 보여주게 되지만 첫번째 보여질 인터페이스 컨트롤러를 변경하기 위해서 init 또는 awakeWithContext: 메소드 안에서 becomeCurrentPage를 호출하면 됩니다.

사용자가 페이지간에 이동을 함에 따라 WatchKit은 인터페이스 컨트롤러를 활성화 하고 비활성화 하게 됩니다. 전환이 이루어지는 동안 현재 보여지고 있던 인터페이스 컨트롤러의 didDeactivate 메소드가 호출되고 뒤이어 보여지게 될 인터페이스 컨트롤러의 willActivate 메소드가 호출됩니다. willActivate 메소드를 사용하여 당신의 인터페이스 컨트롤러의 최근 몇분간의 변화를 컨텐츠에 업데이트 하시기 바랍니다.

계층형 인터페이스 구현하기

계층형 인터페이스에서 당신은 세그웨이(Segue)를 이용하거나 현재 인터페이스 컨트롤러에서 pushControllerWithName:context: 메소드를 호출하여  WatchKit이 새로운 화면으로 전환하도록 할 수 있습니다. 당신의 스토리보드에서 버튼, 그룹 또는 테이블 로우들을 활용하여 또다른 인터페이스 컨트롤러로의 세그웨이를 만들 수 있습니다. 코드를 통해 전환을 구현하는것을 선호한다면 pushControllerWithName:context: 메소드를 호출하십시오.

새로운 인터페이스 컨트롤을 화면에 추가할 때 pushControllerWithName:context: 메소드를 호출하게 되는데 이때에 context 파라미터를 통해 원하는 데이터 객체를 함께 넘기는것을 추천합니다. 이 컨텍스트 객체는 새로운 인터페이스 컨트롤러가 화면에 보여지기 전에 필요한 상태 정보들일 수 있습니다. 이 객체를 이용하여 새로운 인터페이스가 화면에 어떤 정보를 보여줄지를 알려줄 수 있습니다.

interface_navigation_01

새로 추가된 인터페이스 컨트롤러의 왼쪽 상단에는 사용자가 뒤로 돌아갈 수 있다는것을 알려주는 화살표가 표시됩니다. 사용자가 이 왼쪽 상단을 탭하거나 왼쪽에서 오른쪽으로 스와이프를 하게 되면 WatchKit은 최상단에 보여지고 있는 인터페이스 컨트롤러를 자동으로 제거합니다(Dismiss). 마찬가지로 코드상에 popController 메소드를 호출함으로 써 인터페이스 컨트롤러를 닫을 수 있습니다.

인터페이스 컨트롤러를 모달형태로 보여주기

모달 인터페이스는 현재 앱을 이용중인 플로우를 임시적으로 중단하고 사용자에게 무엇가를 묻거나 정보를 보여주는 방법에 사용됩니다. 당신은 당신앱의 네비게이션 스타일에 상관없이 모든 인터페이스 컨트롤러에서 모달 인터페이스를 보여줄 수 있습니다. 다음중에 한가지 방법을 사용하여 인터페이스 컨트롤러를 모달창 형태로 보여줄 수 있습니다.

  1. 당신의 스토리보드 파일에서 모달 세그웨이(Modal Segue)를 생성합니다.
  2. 한개의 인터페이스 컨트롤러를 모달 형태로 띄우기 위해 presentControllerWithName:context: 메소드를 호출합니다.
  3. 페이지 기반의 레이아웃을 가진 두개 이상의 인터페이스 컨트롤러들을 모달 형태로 띄우기 위해 presentControllerWithNames:contexts: 메소드를 호출합니다.

모달 세그웨이를 만들 때 당신이 보여주고자 하는 인터페이스 컨트롤러로의 세그웨이를 연결하시면 됩니다. 세그궤이를 통해 다수의 인터페이스 컨트롤러들을 보여줄때는 페이지 기반 인터페이스 컨트롤러들을 연결하는것과 동일한 방법으로 “next page” 세그웨이로 연결된 인터페이스 컨트롤러들에게 연결해 주시면 됩니다. 당신의 모달 세그웨이는 이 그룹의 첫번째 인터페이스 컨트롤러에 연결해야 합니다. 만약에 이 그룹의 중간에 위치한 인터페이스 컨트롤러와 연결하게 된다면 그 앞의 인터페이스 컨트롤러는 보여지지 않습니다.

모달 인터페이스의 왼쪽 상단에는 인터페이스 컨트롤러의 타이틀 문자열이 표시됩니다. 사용자가 이 문자열을 탭하게 되면 WatchKit 은 모달 인터페이스를 닫게됩니다. 타이틀 문자열은 이 모달 인터페이스가 닫힘을 의미하도록 설정해 주십시오. 예를 들어 특정 정보가 보여질 때 이 문자열을 Done 또는 Close 로 설정할 수 있습니다. 만약 당신이 이 문자열을 설정하지 않을 경우 WatchKit은 기본적으로 Cancel 로 표시하게 됩니다.

참고 : Interface Navigation