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

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

중국 북경에서 택시앱 ‘콰이디다처’ 이용 후기

사실 저는 중국 시장에 이해도 별로 없었고 첫 중국 출장 전날에도 기대보다는 알수없는 두려움(?)속에 출국 했던 기억이 납니다. 중국의 IT 시장은 한국보다 뒤쳐져 있고 이런 IT 발전의 결과물을 누리는 사람들도 별로 없을것이라고 생각했습니다. 하지만 멍청하게도 중국에서 제가 경험한것들은 한국이 중국보다 낫다고 당연히 여기고 있는 수많은것들이 실제로는 아닌것이 많을지도 모른다는 경험을 하였습니다.

가령 중국 출장가면 많이 이용하는 택시도 의례 디디다처(嘀嘀打车)라는 앱을 이용하게 되는데 이 이름은 차동차/택시를 타다라는 의미의 다처(打车) 자동차 경적 소리 띠띠빵빵(?)을 나타내는 디디(嘀嘀)의 합성어입니다. 중국 베이징의 경우 차가 굉장히 많지만 한국에 비하면 택시의 수는 굉장히 적은 편입니다.

중국의 이태원이라 불리는 싼리툰(三里屯)에서 새벽에 택시를 잡으려고 기다리다가 한국과 비슷하면서 다른 광경을 목격했는데. 길거리에서 택시를 타려고 수많은 사람들이 서있고 택시들이 하나둘 도착합니다. 한국의 경우에는 승객들이 목적지를 외치고 택시는 그냥 지나치는 것을 많이 볼 수 있는데 중국에서도 비슷한듯 하지만 승객들이 휴대폰을 흔들면서 택시에 타는것을 볼 수 있었습니다.

나중에 알게 된것이지만 중국의 콜택시앱을 이용해서 택시를 호출하고 자신의 택시가 도착하면 그것을 타고 가는것이었죠. 중국어를 할 수 없어 택시앱을 이용할 수 없었던 저희 일행은 결국 흑차(黑茶 : 불법택시, 한국의 과거 나라시라고 불리던 그것)와 흥정하여 집에갔던적이 있습니다.

快的打车_title

중국에서는 이 콜택시앱이 너무나도 당연스럽게 사용되고 있고 (아마) 모든 택시는 이 콜을 받게 됩니다. 새벽 유흥가의 택시를 잡는 승객들은 승차거부를 경험할것 없이 콜택시앱을 이용하여 택시를 불러 타고 떠나는것을 보며 한국보다 IT가 실생활에 잘 융합이 되어있는게 아닌가 하는 생각이 들었습니다.

최근의 중국 출장에서는 디디다처보다 콰이디다처(快的打车)가 더 보편적으로 이용되는것 같았습니다. 실제로 중국지인에게 물어봤는데 요즘은 디디다처보다 콰이디다처가 더 많이 이용된다고 합니다. 콰이디(快的)는 “빠른/영민한”이라는 뜻을 가지고 있으며 디디다처가 “띠띠빵빵을 탄다” 정도의 귀여운 네이밍이라면 콰이디다처는 “빨리 탄다”정도의 공격적(?)인 이름이라고 생각됩니다.

이런 택시앱이 얼마나 편리한지 와닫지 않을 수 있으니 기왕 블로깅을 하는김에 콰이디다처를 이용하여 택시를 이용하는 방법에 대해 정리를 해보았습니다.

experience_china_taxi_app_01

먼저 앱을 실행하고 하단의 콜 버튼을 누르고 목적지를 말합니다. 그러면 승객의 현재위치(출발지)와 목적지가 택시들에게 전달이됩니다. 여기서 재밌는점은 목적지를 타이핑 하지 않고 직접 말한다는것인데요. 중국의 언어가 한자이기 때문에 스마트폰에서 빠른 문자 입력에 어려움이 있어서인지 모바일앱들이 직접 음성 입력을 받는 경우가 흔합니다. 심지의 중국인이 위챗(微信 : 웨이신)을 이용하는 모습을 보고 있으면 직접 타이핑 하는 경우는 거의 없고 단문 음성 메시지를 주고 받는것을 주로 사용합니다. 마치 워키토키 처럼요.

여기서 또 재미있는건 목적지를 말하면 정확하게 택시기사에게 목적지가 전달되는데 택시에서 드라이버용 앱을 보고 있으면 출발지와 목적지가 정확하게 텍스트와 음성(TTS)로 표시됩니다. 즉 승객이 말하는게 텍스트로 바뀌어 드라이버에게 전달이 되었다는것인데 실제로 반대쪽에서 음성을 듣는 콜센터(?) 스러운것이 있다고 하는군요. 앱을 시작하면 누군가가 직접 듣고 그걸 텍스트로 전환하여 택시에 전달해 줍니다.

홍콩에서 경험했던건데 택시 이용자가 너무 사투리가 심해서(같은 광둥어인데도 못알아들을정도의 말들이 있나보더군요) 청취자가 텍스트 전환이 어려운 경우 택시앱에서 직접 해당 음성을 플레이를 해주더군요. 제가 광둥어를 알지는 못하지만 대충 이런 느낌이었습니다. “침사추이에서 고객 호출 : (고객 요청 음성 플레이~)”

experience_china_taxi_app_02

음성인식이 제대로 되었다면 이제 주변의 택시가 지도상에 보여지면서 몇대의 택시에게 콜이 전달되었는지 보여줍니다.

experience_china_taxi_app_03

점점 전달되는 택시의 숫자가 올라갑니다. 저 숫자 올라가는것을 쳐다보고 있는 묘미가 있더군요. 실제일지 아닐지는 모르겠지만 내 콜요청이 전달되고 있음을 느낄 수 있게 해줍니다.

experience_china_taxi_app_04

320대(!?)까지 전달되었습니다. 이렇게 수많은 택시에 전달되었다는것을 느낄수 있었지만 이때까지 가겠다는 택시가 없다는 슬픈 결과물이기도 합니다. 실제로 중국의 콜택시앱은 출발지와 목적지가 택시 드라이버에게 전달되는 구조를 가지고 있어 가까운 거리를 이동할 경우 콜을 받는 택시가 없는 경우가 발생합니다. 스크린샷을 보시면 주변에 택시들이 꽤 있음에도 아무도 우릴 태워주려 하지 않는걸 볼 수 있습니다.

experience_china_taxi_app_05

하지만 결국 택시가 잡혔고 우리를 태우려는 택시의 위치가 나타납니다. 그리고 택시와의 거리와 도착까지 남은 시간이 표시됩니다. 여기서 바로 택시와 통화를 하거나 메시지를 주고 받는것도 가능합니다. 택시가 도착하게 되면 전화가 오게 되며 전화를 통해 호출한 승객을 직접 확인하여 택시를 태우게 됩니다.

experience_china_taxi_app_07

드디어 무사히 택시를 탔습니다. 잘 보이지는 않지만 드라이버용 앱의 UI는 승객용 앱과 당연하지만 다릅니다. 주변의 콜들이 끊임없이 보여지고 음성으로 읽어줍니다. 제가 내리지도 않았지만;; 내릴때가 다 되어가면 계속 저걸 주시하며 다음에 또 누굴태울지 확인하시더군요.

experience_china_taxi_app_08

추가로 디디다처의 택시 호출 뷰는 다음과 같습니다. 마찬가지로 몇대의 택시에게 호출이 전달되었는지 표시가 되고 숫자가 계속 올라가며 멋진 연출을 보여주지만 왠지 콰이디다처에 비하면 답답해보이는 느낌이 있습니다. 단순 숫자 표기보다는 내 위치와 주변 택시가 보여지는게 좀 더 내가 택시를 탈 수 있을것만 같은 느낌을 주지 않나 생각됩니다.

하지만 디디다처의 경우 제생각엔 굉장히 멋진 시스템이 있는데 하단에 보면 0, 3, 5가 보여지는데요. 내가 얼마를 팁으로 더 주겠다는 설정을 하는 부분입니다. 3 또는 5위안을 팁으로 줄 수 있네요. 택시가 잘 잡히지 않는다면 내가 임의로 팁을 설정하여 택시들을 유혹(?) 할 수 있습니다.

이제 곧 한국에서도 카카오택시가 나올것 같습니다. 중국의 콜택시앱들이 이정도까지 오기까지 수많은 출혈경쟁과 유저들(드라이버/승객)에게 큰 규모의 투자를 해왔던것 같습니다. 중국과는 달리 한국의 경우 택시들이 부족하지 않기 때문에 유저입장에서는 택시앱을 이용해야 할 인센티브를 분명히 해야 할 것 같고 택시들의 경우 왜 승객을 태우지 않는지를 분석하여 태우지 않을 경우에 대한 인센티브를 분명히 준비해야 할것 같습니다.

가령 다음과 같은 방식의 인센티브는 어떨까 상상해 봅니다.

  • 지금 내 눈앞에 택시가 많은데 굳이 콜을 호출할 필요를 못느낄 승객를 위해 – 콜을 호출하면 500원 지급, 콜을 10번 이용하면 콜1번 무료, 안전을 위해 내 택시 이동경로를 남자친구에게 실시간 전송
  • 택시들이 싫어할 위치/거리를 이동하기에 콜이 안잡히는 승객을 위해 – 최대 두배(더블)까지 팁 설정 가능. 팁의 50%는 콜택시앱이 부담(?)
  • 단거리 승객을 싫어하는 택시기사를 위해 – 5키로 미만 500원 지급, 10키로 미만 300원 지급, 20키로 미만 100원 지급
  • 시/도를 넘어가는 이동을 싫어하는 택시기사를 위해 – 시도를 넘어가서 손님을 내려준 직 후 반대로 돌아오는 택시 콜 이용자의 우선 연결, 연결 해줄 승객이 없어 빈차로 시도를 다시 넘어올 경우 GPS 기준으로 3000원 지급
  • 콜을 받아 원하는 위치에 도착했는데 승객이 바로 승차하지 않고 그제서야 건물(술집등)에서 밍기적 거리면서 나오는걸 손해로 여길 택시기사를 위해 – 승객과 GPS상 100미터이내일때 승차가 5분이상 연기되면 5분당 500원 지급

하지만 역시 우선순위를 생각하면 승객이 앱을 이용할 니즈를 강화하는게 우선이겠네요. 도로에 나가면 널린게 택시인데 왜 앱을 사용해야 할까. 고민해봐야겠네요.