iOS 위젯 만들기 (Today Extension) 준비 과정.

작년부터 아이폰의 위젯에 대해 궁금증이 생기기 시작했었다. 회사에 은근 건의를 해보고 싶은 마음도 있었고 정체되어 있는 앱에 대한 관념을 깨어 보자 색다른 시도를 제시하고 싶었으나, 워낙 고인 물이라 결단이 쉽지 않은 조직이었다. 인터넷 검색을 통해 여러 자료들을 찾아두었지만 그 자료들이 실제 내가 원하는 자료인지 사뭇 의구심이 들기도 했었다. 해보기 전에는 잘 이해하지 못하는 스타일이고 한번 시작하는 것도 쉽지 않은 스타일이다. 

인터넷을 통해 찾아본 자료들은 부분 부분 정리가 된 자료이고 나같은 전체 그림을 이해하지 못하는 사람에게는 많은 수고스럽게 했다. 하나씩 찾아가며 위젯을 만들면서 재미를 느꼈던 부분과 진행 절차를 자세하게 정리를 해보려고 화면 캡처를 받고 준비를 했다. 

오늘은 아이폰(iOS)에서 Today Extension 을 이용한 위젯을 만들기 위해 우선 애플 개발자 계정과 Xcode 프로젝트에서 설정해야 하는 항목에 대해 다루고, 다음 포스팅에서 실제 코딩하는 부분과 HOST APP(메인 앱)과 데이터를 공유하는 내용을 정리해서 올려 둘 예정이다. 

단, 상용앱을 기준으로 개발했기 때문에 유료(년 100$) 애플 개발자 계정을 사용하였다. 

1. Apple Developer사이트 접속 후 개발자 로그인 과정을 거친다.

2. Certificates, Identifiers & Profiles 메뉴에 들어간다. 

3. Identifiers > App IDs 메뉴로 들어간다. 

4. 상단 + 버튼을 눌러 App ID를 추가하고 App Group정보를 설정한다. 

그림은 이미 만들어둔 모습인데, 일반적인 App ID를 만드는 과정과 동일하며 다른점은 App Services항목에서 'App Groups' 항목을 체크 해주어야 한다는 점이다. 

그리고 만들어진 다음에는 해당 App ID 의 편집 화면에서 ID의 그룹을 설정해주면 된다. 

이때 HOST APP(메인앱)의 App ID도 함께 편집을 해주어야 한다.  다음 그림은 App Services항목과 그룹(group)을 설정하는 내용들이다. 

편집 화면에서 App Groups를 선택하게 되면 다음과 같은 화면을 볼 수 있고, Edit메뉴를 통해 group명을 지정해서 추가할 수 있다. 이는 HOST APP(메인 앱) 과 위젯 간에 데이터를 공유하거나 자원을 공유하기 위해서 설정하는 개념인 듯 하다. 

나의 경우는 com.myapp.iphone.korea.today App ID에 group.myapp.me 라는 App Group Assignment를 생성한 뒤 Assign했다. 

5. 새로 만들어진 App ID에 대한 Group설정이 끝나면, HOST APP(메인 앱)의 App ID에도 Edit 메뉴를 통해 Group을 설정해 주어야 한다. 

6. 그렇게 작업을 하고 나면 기존의 Provisionsing Profiles에서 Invaild된 앱들이 보이게 되는데 해당 앱의 설정이 변경된 부분이므로 Edit메뉴를 통해 수정화면에서 다시 Generate해 주면 Active로 변경된다. 또, 새로운 App ID를 생성했기때문에(Today Extension, 위젯) 새로운 Provisioning을 해주어야 한다. 

Provisioning 된 모습을 보면 별 다른게 없다, 일반적인 앱 프로비저닝과 동일하고 App ID 선택화면에서 조금전 만들어준 Today Extension ID를 선택해주면 끝 ^^; 

7. 그런 다음 각각의 프로비저닝(HOST APP, Today Extention)을 다운로드 받아 더블 클릭해서 Xcode가 인식할 수 있도록 한다. 

8. 그다음 이제 HOST APP프로젝트을 연 다음, Target을 추가해서 Today Extention을 추가해준다. 

Xcode > File > New > Target을 선택한 화면. 

새로운 Target의 이름을 입력하고, Embed In Application은 HOST APP(메인 앱)을 선택하면 된다. 기본적으로 선택되어 있기 때문에 손 댈 항목은 없다. 

위젯 관련 이것 저것 하다 보니 하나의 HOST APP(메인 앱)에 여러개의 위젯을 만들수 있다는 사실을 다 아는데 나만 모르고 있었던 것이다. 헛웃음이 나기도 했던 대목인데 이래서 고정관념이 무섭다. 다른 여러 앱들디 대부분 하나의 위젯만 제공하고 있길래 그런가보다 했지만, 다른 대형 브랜드 앱들은 다양한 앱 위젯을 제공하고 있다. 관리 포인트가 무섭긴 하지만 실험적인 측면에서 다양한 위젯을 만들어서 서비스 해보는 것도 나쁘지는 않을 것 같다. 

9. 이렇게 위젯이 만들어지고 나면 다음 화면을 볼 수 있다. 

today Target Folder가 생성되고 Project의 TARGETS에도 today 항목이 추가된다. 

Project에서 Capabilities 항목에서 App Groups항목을 ON으로 변경하면 App Groups항목이 보이는데 아직 추가 전이므로 추가하면 된다. 이 추가 방식은 Xcode에서 Apple 계정을 등록한 경우 새로고침을 누를 경우 리스트가 나올 수 있으며, 없는 경우 위에서(4번 항목) 추가한 그룹명을 그대로 적용해주면 된다. 

<그룹 추가 화면> 

프로비저닝과 그룹 설정이 제대로 되었다면 Steps항목이 모두 체크로 변경되며, 그렇지 않은 경우, 오류 느낌표를 볼 수 있을 것이다. 만약 해결되지 않는다면 위에서 제시한 순서대로 차근차근 따라해보고 Xcode를 종료했다가 다시 시작해보는 것도 한 방법이다. 

10. 제대로 준비가 된 화면에 대한 설명을 끝으로 이번 포스팅을 마무리한다. 

today이라는 target이 만들어졌으며 folder 하위에는 기본적으로 TodayViewController와 MainInterface.storyboard가 존재하며, View 하나가 Hello World를 보여주고 있을 텐데, 저 화면은 어제까지 내가 작업을 하고 있는 화면이라 좀 다르다. 

기본적으로 스토리보드와 오토레이아웃을 지원하고 있으며 iOS9.0 이상에서 부터 사용이 가능하다고 보면 된다. 대부분 iOS9.0에서 deprecate 된 함수 들이 많아서  iOS Target이 10.0부터 지원되는 앱에서 사용하길 추천, 단, 나의 경우는 HOST APP(메인 앱)의  iOS Target이 9.0이라 어쩔 수 없이 iOS 9.0으로 타겟을 설정했다. 

기본적인 씬이 추가 되어 있고 View Base로 작업을 하면 되는데 자세한 개발가이드는 아직 모르는 상태, 여러 사이트에서 검색해서 찾은 결과 

제약사항이 많이 있는 위젯이라 HOST APP(메인앱)으로 유도하기 위한 기능으로 활용하면 좋을 것 같다. 

기본적인 Target의 설정들은 일반 앱과 비슷하다. 몇 몇 제약이 되는 항목들도 있지만 낯선 화면은 아닐 것 같다. 

위의 사진에서 Display Name 이라고 하는 부분에 적는 이름이 실제 앱의 위젯 항목에 나타나기 때문에 기발하게 이름을 지어 톡톡 눈에 띄게 할 수도 있을 것 같다. 내가 만든 위젯은 사용자가 설정한 나라의 환율 정보를 실시간으로 보여주기 위한 위젯이라 실시간 환율 위젯이라고 지었다. 

이쯤 되면 실제 개발을 진행하기 위한 준비가 거진 다 된 상태인데 HOST APP(메인앱) 에서 사용하는 공통 모듈이나, 클래스들을 가져다가 사용하고 싶을텐데 이 역시 인터넷에 찾아보니 있긴 했지만 난 사용을 포기했다. 메인앱은 아직 ARC를 사용하지 않고 있어 가져다가 사용하려고 했더니 많은 문제가 발생되어 재빠르게 포기하고 일부 꼭 필요한 함수들은 직접 복사해서 사용했고 네트워크 통신도 개별적으로 NSURLSession을 이용해 직접 구현을 했고 데이터 파싱도 직접 하는 것으로 처리, 정신건강에 훨씬 좋았다. 

메인앱의 코드를 공유하기 위해서는 다음과 같이 추가해주면 된다. 

Xcode > TARGETS > today > Build Phases 항목의 Compile Source 에 메인앱의 클래스를 추가해주면 위젯앱에서도 사용할 수 있다. (난 추가해서 컴파일 하니 온통 에러를 내뱉는 바람에 포기) 

서로 다른 앱으로 인식되고 구동되는 위젯이지만, Group이라는 개념으로 묶여 설치와 삭제가 동시에 일어나는 만큼 메인앱의 자원도 공유가 가능한 매커니즘을 가지고 있다. 

현재까지 진행된 사항은 위젯 스스로 화면이 나타날 때마다 실시간 환율정보를 가져와 갱신해주는 작업이 된 상태이며, 하단의 메뉴를 통해 메인 앱을 구동, 특정 메뉴로 이동하는 것 까지 구현이 완료된 상태이다. 

오늘은 메인앱에 위젯설정 화면을 만들고 설정된 정보를 위젯과 공유하는 코드를 작성하고 변경된 설정에 따라 위젯의 컨텐츠가 변경되도록 구현할 계획이다. 

iOS 위젯(Today Extension)을 만들면서 참고 했던 URL. 많은 분들의 깨알같은 정보들이 있으니 개념과 제약조건들은 찾아서 읽어보면 도움이 될 것 같다. 

MacOS 10.10 & iOS 8 새기능 익스텐션(Extensions) 개념 잡기 (https://www.letmecompile.com/extensions-for-macos-10-10-ios-8/)

ios-swift-투데이-익스텐션 http://avilos.codes/mobile/ios-swift/ios-swift-%ED%88%AC%EB%8D%B0%EC%9D%B4-%EC%9D%B5%EC%8A%A4%ED%85%90%EC%85%98today-extension/

[iOS8] Today Extension (Widget) 개념 및 제약사항, 앱과의 데이터 공유 http://beankhan.tistory.com/26