Qanda WatchOS App 제작기
(feat. 매프 해커톤)
안녕하세요 매스프레소에서 iOS 개발자로 일하고 있는 David 입니다!
이번 포스트에서는 비록 짧은 하루 이틀 정도의 시간이었지만 매스프레소 해커톤에 참여해서 Qanda WatchOS App을 개발했던 경험에 대해 이야기하려고 합니다.
*이번 포스트에서 소개되는 Qanda WatchOS App은 해커톤을 통해 실험적으로 개발된 App으로 프로토타입에 가까워서 실제 출시도 미정이고 출시하게 되더라도 많이 다를 수 있습니다.*
Why Qanda WatchOS App?
이번 매프 해커톤은 다양한 직무의 회사 구성원들이 참여했던 만큼 다양한 아이디어가 나올 수 있었습니다. 저희 팀 역시 이용자의 위치 정보를 사용하는 아이디어부터 앱의 전체적인 콘셉트를 바꾸는 아이디어까지 다양한 아이디어를 고민하며 뭔가 더 획기적이고 실용적인 아이디어를 위해 많은 시간을 할애하였습니다.
많은 아이디어 속에서도 저희 팀에서 Client 개발자는 저 하나였기 때문에 팀원들이 조금 더 제 의견을 긍정적으로 봐주었고 논의 끝에 도달한 아이디어는 바로 Qanda Watch App을 개발하는 것이었습니다. iOS 개발과 WatchOS 개발은 다소 차이가 존재하고 또 많은 시간을 할애할 수 있는 여건이 아니었기 때문에 조금 망설여지는 부분이 있었지만 해보고 싶었던 개발이었기에 도전하기로 마음먹었습니다. (매프 해커톤은 시간 등의 제약으로 실제로 아이디어를 구현하지 못하더라도 아이디어 공유만으로 발표를 구성해도 돼서 더욱 No Risk! )
그렇다면 왜 WatchOS App을 개발하기로 한 것인지? 라는 질문이 있을 수 있습니다. 그에 대한 대답에서 가장 큰 부분은 제가 Apple Watch를 사용하면서 많은 효용을 느끼고 있다는 점일 것입니다. Apple Watch에서 기본적으로 제공하는 어플 외에도 Slack이나 카카오톡, 미세미세, CNN 등 자주 사용하면서 편의를 느끼는 Third Party App들이 많이 있습니다. 따라서 Qanda App을 사용하는 유저에게도 이런 효용을 전달하면 좋겠다는 생각해서 출발하였습니다. 더욱이 Watch App을 제공하는 회사들은 공통적으로 특정 분야를 선도하는 기업이거나 이용자들에게 조금이라도 더 좋은 서비스를 제공하는 기업으로 좋은 평가를 받는 기업들이 대부분입니다. 이용자가 많이 없다고 하더라도 Watch App까지도 제공한다는 것은 분명 더 큰 편의성을 실감하는 이용자들에게 감동으로 다가갈 것입니다.
해커톤 주제가 결정되고 나서도 어려움과 고민은 여전히 존재했습니다. 위에서 언급했던 것처럼 이용자수가 아직 적다는 부분과 두 번째로는 어떤 기능을 넣는 것이 좋을까? 하는 부분이었습니다. 좋은 아이디어로 출발했다고 하더라도 해커톤에서 설득력이 떨어지는 결과물이 나오지 않을까? 하는 고민이었습니다. 이용자 수와 관련해서는 먼저 계속 애플워치의 판매가 증가하고 있고 추가적으로 WatchOS App을 제공하는 업체들이 늘어가는 것에 주목했습니다. 에어팟도 사실 예상보다 빠르게 많은 사람들이 이용하는 제품이 되었고 Apple Watch의 성장세를 보면 현재보다는 미래를 위한 결정이 될 수 있다고 생각했습니다. 두 번째는 시장 관점보다도 Rebuild Education을 외치는 사명감을 가지는 매스프레소라면 좀 더 많은 학생 유저와 선생님 유저가 교육적 효용을 느끼는 서비스를 제공해야 한다는 관점으로 Qanda Watch App을 봐야 한다는 것입니다. 한 명의 학생과 한 명의 선생님을 위한 서비스에서 출발하여 100만명, 1억명을 위한 서비스가 탄생하는 것이기에… 다음으로 어떤 기능을 제공하는 것이 좋을까? 에 대한 고민에 대한 이야기는 개발 과정을 이야기하면서 설명하도록 하겠습니다.
Let’s Make WatchOS App!
기능을 구체적으로 정하기 전에 저희가 만드려고 하는 Watch App은 크게 선생님 Watch App과 학생 Watch App 두가지 였습니다. 작은 화면을 사용하는 Watch App의 경우 디자인적으로 자유도가 떨어져서 디자인은 일단 크게 고민하지 않고 기존 앱들을 참고하고 되도록 간단하게 만들려고 했습니다. 기능을 추가하기 위해 현재 App에서 사용하는 기능을 다시 살펴보고 사용할 수 있는 API를 나열해서 후보군을 좁혀나갔습니다. Apple Watch를 통해 사진 촬영이 가능하지 않고 사진을 불러오는 것도 제한적이라서 일단 가장 중요한 검색 기능이나 질문 기능은 고려하지 않았습니다. 다른 부족한 부분들은 Watch App에서 가장 유용하는 쓰는 기능 중 하나인 Push Notification을 통해 보완될 수 있다고 보았습니다. 그렇게 정해진 후보는 선생님 앱의 경우 현재 풀 수 있는 문제 수, 히스토리 API를 사용하고자 했고 학생앱의 경우 급식 정보, 히스토리, 한 문제 풀기 그리고 나만의 콴다 통계( 예전에 사용하였으나 지금은 사용하지 않는 API ) API를 사용하는 것이 Watch App에서 사용하였을 때 실용성이 있을 것으로 판단했습니다. 추가적으로 2시간 정도 남는 시간을 활용하여 간단한 공부시간 타이머와 필수 수학 공식을 보여주는 기능도 추가하였습니다. 또한 나만의 콴다 통계의 경우 팀원 중 Nutella의 도움으로 JSON을 전달하면 그래프로 그려주는 API를 사용하여 구현하였습니다.
Components In Qanda WatchOS App
WatchOS App을 개발하는 것은 처음이라서 Apple 공식 문서와 Raywenderlich 의 서적을 참고하여 구현하였습니다. UIKit만큼 다양한 UI Component가 있는 것은 아니었지만 작은 화면에 나름 WatchKit 내에서도 다양한 UI Component가 존재하는 것이 놀라웠습니다. 해커톤을 통해 구현한 저희 앱은 비록 게임개발도 아니고 3D Object를 사용하는 부분이 없었지만 Watch App 내에서도 WKInterfaceSKScene, WKInterfaceSCNScene 등 SpriteKit과 SceneKit을 사용할 수 있다는 점은 놀라웠습니다.
다른 앱들도 그렇듯 UI 구성에 필수적인 WKInterfaceButton, WKInterfaceLabel, WKInterfaceImage 를 사용하였고 WatchOS에서 특화된 WKInterfaceTimer, WKInterfaceTable, WKInterfacePicker도 필요에 따라 사용하였습니다. WKInterfaceTimer의 경우 WatchOS 답게 타이머를 쉽게 사용할 수 있어서 좋았습니다. 또한 개인적으로 좋은 UI로 느껴지는 Force touch를 활용한 Menu도 사용하였습니다. WatchOS App 개발에 대한 자세한 이야기를 하는 포스트가 아니라서 모든 부분을 설명할 수는 없지만 모든 UI Components는 WKInterfaceObject를 상속받고 있으며 내부 코드를 따라가면 굳이 문서를 찾아보지 않더라고 내부 Property나 Method가 많지 않아서 추론 가능하거나 쉽게 사용할 수 있는 것이 많았습니다.
Obstacles
먼저 실 기기 사용을 위한 Provisioning 구성과 간단한 테스트까지는 순조로웠습니다. Networking이나 Animation에서 전혀 Cocoapod을 통한 라이브러리 사용이 불가능하고 WatchOS를 위한 Class나 방식을 써야 하는 경우가 많았습니다. 다만 UI 구성의 경우 Group을 사용하는데 처음에는 모든 Component가 마치 StackView에 담겨있는 듯한 구성 방식이라서 당황스러웠는데 생각보다 직관적이고 안드로이드처럼 match parent, wrap contents 같은 layout 구성도 있어서 생각보다 쉽게 구현할 수 있었습니다. TableView의 경우 iOS와 다르게 하나의 Cell이 ViewController가 되는 방식이라서 많은 레퍼런스를 찾아보고 시행착오를 겪어야 했습니다. 또한 아무래도 화면에 한계가 있고 iOS 만큼 세밀한 UI를 구성하는 것은 어려워서 디자이너와 소통하면서 만족할만한 디자인은 구현하는 것은 어려웠습니다. ( 단순하게 WKInterfaceImage에 배경색을 바꾸려고 했는데 fail… 배경 Group의 배경색을 바꿔야 했음..) Autolayout이 아니라서 숫자로 세밀한 조정도 어려웠습니다. 그래도 생각보다 실 기기에서는 단순한 디자인도 깔끔하게 보여서 ( 생애 첫 내가 만든 Watch App이라 마냥 신기방기 했던 것일 수도.. ) 만족스러웠습니다.
추가적으로는 개발 도중 발생하는 에러나 뭔가 심도있는 개발을 하려고 할 때 아직 많은 레퍼런스가 많지 않아서 직접 추론하거나 많은 구글링 결과를 종합해서 개발에 적용해야 했습니다.
This is the Result!
(gif로 더 생생하게 확인하고 싶으시다면, 여기서 봐주세요!)
Where to go from here?
이번에 WatchOS를 공부하면서 시간적 제약으로 해보지 못했지만 몇가지 나중에라도 해보고 싶은 부분들이 존재합니다. 먼저 아직 익숙하지 않지만 SwiftUI를 놀랍게도 watchOS에서도 쓸 수 있다고 해서 ( storyboard만 가능할 줄 알았는데.. ) 다음에는 SwiftUI를 사용하여 개발을 시도해보려고 합니다.
또한 WatchOS 기본적으로 제공되는 Watchface를 일부 Customize 할 수 있는 Complications도 만약 실제로 앱을 출시하게 된다면 꼭 넣고 싶은 기능 중 하나입니다. 앱을 키는 것보다는 Watchface를 보는 경우가 많아서 자주 보는 기능이라면 ( Qanda 선생님앱에서 현재 풀 수 있는 문제수 같은 경우? ) 보다 간편하게 정보 확인을 가능하게 해주는 좋은 기능입니다.
계속해서 다양한 Watchface가 추가되고 있고 따라서 Complications에 대한 수요도 증가할 것으로 예상됩니다. 다만 저만 느끼는 것인지 모르겠지만 Complications의 정보 Refresh가 잘 안되는 경우가 많아서 ( 셀룰러가 아니라서 그런가 흑……) 그런 부분을 잘 고려해서 개발해야 할 것 같습니다. 물론 UI적인 고민도 잘 이뤄져야 기존 Watchface와의 디자인적 조화를 통해 많은 유저의 이용을 이끌어 낼 수 있을 것 같습니다.
See you Again!
+ 사진에 나오지 못한 Noah + Nutella
그럼 지금까지 환상의 팀워크를 자랑했던 해커톤 2조, 조금 더 시간이 주어졌다면 우승각이었지만 기술상에 만족해야했던 해커톤의 2조의 Qanda WatchOS App 제작기 였습니다!
