앱 개발 환경 설정

iOS용 앱은 Xcode, iOS SDK를 이용해 개발합니다. Xcode, iOS SDK는 Windows 계열의 PC에서는 사용할 수 없으며 Mac에서만 구동합니다. 그리고 Xcode를 내려받고 앱을 만들고 테스트를 하기 위해서는 Apple 개발자 계정이 필요합니다.

iOS 앱 개발 환경은 기본적으로 다음과 같은 절차에 의해 구성되며 세부 내용은 개발자 사이트 업데이트에 따라 변경될 수 있습니다.

1. 개발자 계정 등록

2. Xcode, iOS SDK 설치

3. 배포 시 필요한 작업

앱 프로젝트 개발

Xcode에서 아래와 같은 절차에 따라 iOS용 앱 프로젝트를 개발합니다. 앱 프로젝트를 진행하기 전에 넥사크로 스튜디오에서 만든 아카이브 파일은 지정된 경로에 위치해야 합니다.

프로젝트 생성

넥사크로로 개발된 앱을 담을 iOS 프로젝트를 생성하고 기본 환경을 설정해야 합니다. 새로운 프로젝트는 아래 메뉴에서 생성할 수 있습니다.

File > New > Project

프로젝트 생성을 위한 템플릿 화면에서 'App' 항목을 선택합니다.

Product Name과 필요한 항목을 지정한 후 Next 버튼을 클릭합니다. 오픈된 팝업 창에서 프로젝트를 생성할 위치를 지정한 후 'Create' 버튼을 클릭하면 새로운 프로젝트가 생성됩니다.

iOS 라이브러리 및 프레임워크 설정

iOS에서 제공하는 API를 사용하는 데 필요한 라이브러리와 프레임워크를 설정합니다. 프로젝트를 선택하고 TARGETS 항목을 선택하면 화면 상단에 'General'이라는 탭을 확인할 수 있습니다. 해당 탭을 선택하면 'Frameworks, Libraries, and Embedded Content' 항목이 보이는데 이 곳에서 라이브러리와 프레임워크를 추가합니다.

하단에 있는 + 버튼을 클릭해 "libc++.tbd" 항목을 추가합니다.

넥사크로 라이브러리 설정

iOS 프로젝트에서 넥사크로에 최적화된 환경을 만들기 위해 추가로 제공되는 넥사크로 라이브러리 파일을 설정합니다.

넥사크로 라이브러리는 압축 파일 형태로 제공되며 nexacro.framework.zip이라는 파일명으로 제공됩니다. 'Frameworks, Libraries, and Embedded Content' 항목에서 [+] 버튼을 클릭하고 Add Files 항목을 선택해서 nexacro.framework.zip 파일을 선택합니다.

리소스 설정

앱에서 사용할 로딩 이미지, 아이콘, 메시지, 레이아웃 등을 설정하는 단계입니다. 진행하는 프로젝트에 따라 변경해 적용할 수 있습니다.

이미지 설정

Xcode의 템플릿으로 생성한 프로젝트에는 리소스를 관리하는데 필요한 빈 애셋 카탈로그(Asset Catalog)가 포함됩니다. 사용자는 필요에 따라 앱 아이콘, 런처 이미지 등을 애셋 카탈로그에 등록하여 사용할 수 있습니다.

iOS 앱에서 사용하는 앱 아이콘과 런치 스크린 이미지는 개별적으로 설정할 수 있으며 미리 만들어진 이미지를 연결할 수 있습니다.

아이콘 및 이미지 설정은 프로젝트 설정에서 할 수 있습니다. 프로젝트를 선택하고 TARGETS 항목을 선택하면 화면 상단에 'General'이라는 탭을 확인할 수 있습니다. 해당 탭을 선택하고 'App Icons and Launch Images' 항목을 확인합니다.

• 앱 아이콘 설정

'App Icons Source' 항목 옆의 화살표를 클릭하면 다음과 같이 애셋 카탈로그에서 앱 아이콘을 설정할 수 있습니다. 미리 제작한 아이콘 이미지를 단말기와 용도에 맞는 위치에 드래그 앤 드롭합니다.

메시지 설정

앱에서 사용할 메시지를 별도의 파일로 저장했다가 앱 실행 시 이용할 수 있습니다.

새로운 파일을 생성하려면 프로젝트 폴더를 선택 후 메뉴에서 [File > New > File] 항목을 선택합니다.

화면에 보이는 템플릿 중에서 'Strings File'을 선택합니다.

"Save As"에 파일명을 'Localizable'로 입력합니다.

생성된 Localizable.strings 파일은 아래와 같이 수정합니다.

/* 
  Localizable.strings
  HelloiOS
*/
"needupdate" = "It needs an update.";
"loadingFail" = "First loading fails.  \r\nPlease restart.";
"updateFail" = "Update fails.  \r\nPlease restart.";
"notexist" = "Start file does NOT exist.  \r\nPlease restart.";
"BeingUpdated" = "Being updated.";
"wantreplace" = "There is a file of the same name. Do you want to replace? ";
"ok" = "OK";
"cancel" = "Cancel";
"move" = "Move";
"upper" = "Upper";
"filter" = "Filter";
"home" = "Home";
"nofilename" = "No File Name.";
"checkforupdates" = "Check for update.";
"installforupdates" = "Install update.";
"downloadingforupdates" = "Downloading update.";
"force_close" = "Update is Completed.";

Xcode 화면 오른쪽에 있는 Utilities 창에서 'Localize...' 버튼을 클릭하고 언어를 선택합니다. 사전에 프로젝트 설정에서 언어를 추가하지 않은 경우에는 기본으로 영어가 선택됩니다.

영어 이외의 언어를 지원하려면 [프로젝트 > Info > Localizations]에서 + 버튼을 눌러 다른 언어를 추가할 수 있습니다.

Config 설정

넥사크로에서 제공하는 기능을 앱에서 사용할 수 있도록 nexacro_config.xml 파일을 설정합니다. 앱 업데이트, Notification, 에러 정보 처리 등의 기능을 활성화 할 수 있습니다. nexacro_config.xml 파일은 사용자가 직접 생성해야 하며 [{Asset} > data] 폴더 아래에 배치합니다. 이 파일은 Xcode에서 앱 빌드시 프로젝트에 포함되어 있어야 합니다.

nexacro_config.xml 파일은 XML 형식이며 다음 예와 같이 작성합니다.

<?xml version="1.0" encoding="utf-8"?>
<nexacro-config>
  <application dialog-position="top" use-wkwebview="true" file-logging="true" />
  <notification enable="true" handler="DefaultNotificationManagerHandler"/>
  <updator force="false" cancelable="false" quiet="true" errormsg="true" failpass="true"/>
  <xpush-server request-missing-message="true" />
</nexacro-config>

nexacro_config.xml에 설정할 수 있는 기능은 다음과 같습니다.

빌드 환경 설정

iOS 프로젝트를 생성하면서 기본으로 만들어진 AppDelegate.h, AppDelegate.m 파일과 main.m 파일을 넥사크로 환경에 맞게 수정합니다.

AppDelegate.h

생성된 앱 델리게이트가 넥사크로 AppDelegate를 상속받도록 수정합니다. 파일을 다음과 같이 수정하여 nexacro.framework가 동작할 수 있도록 합니다.

//
//  AppDelegate.h
//  HelloiOS
//

#import <UIKit/UIKit.h>
#import <nexacro/NexacroAppDelegate.h>
#import <nexacro/NexacroMainViewController.h>

@interface AppViewController : NexacroMainViewController
-(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation;
@end

@interface AppDelegate : NexacroAppDelegate <UIApplicationDelegate>
-(NexacroMainViewController*)initializeMainViewController;
@end

AppDelegate.m

AppDelegate.m 파일에서는 넥사크로 스튜디오에서 만든 start_ios.json 파일이 배치된 서버 URL 주소를 지정합니다. 아래 코드에서 굵게 표시된 부분을 사용자의 환경에 맞게 수정합니다.

//
//  AppDelegate.m
//  HelloiOS
//

#import "AppDelegate.h"
#import <nexacro/NexacroWKWebViewDelegate.h>

@interface WebViewDelegate : NexacroWKWebViewDelegate
@end

@implementation AppViewController

// 자동 회전 지원 여부 (return: YES|NO)
- (BOOL)shouldAutorotate
{
    return YES;
}

// 회전방향 지원 여부 확인 (return: 회전 방향의 비트값이 설정된 플러그)
- (UIInterfaceOrientationMask)supportedInterfaceOrientations
{
    return UIInterfaceOrientationMaskAll;
}

@end

@implementation AppDelegate
    
- (NexacroMainViewController*)initializeMainViewController
{
    NSString *bootstrapUrl = @"http://[URL]/start_ios.json";

    [[NexacroResourceManager sharedResourceManager] setBootstrapURL:bootstrapUrl isDirect:NO];
    
    // WKWebView에서 발생하는 delegate 이벤트가 필요 없는 경우 초기화
    // AppViewController* controller = [[AppViewController alloc] initWithFullScreen:NO];
    
    // WKWebView에서 발생하는 delegate 이벤트를 받아야 할 경우 초기화
    WebViewDelegate* webviewDelegate = [[WebViewDelegate alloc] init];
    AppViewController* controller = [[AppViewController alloc] initWithFullScreen:NO
                                                               andWebviewDelegate:webviewDelegate];

    return controller;
}
    
@end

// WKWebView의 delegate 이벤트를 받기 위해 AppViewController를 초기화할 때 전달하는 구현체
@implementation WebViewDelegate

#pragma mark - WKWebView - WKNavigationDelegate
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
    [super webView:webView didFinishNavigation:navigation];
    
    // 콘텐츠 데이터 로딩이 완료되는 시점
}
@end

main.m

UIApplicationMain 함수는 UIKit 프레임워크에서 제공하는 기본 함수로 앱의 시작점입니다. 앱의 구동에 필요한 사전 준비를 하고 메인 루프를 시작해 사용자의 입력을 받을 준비를 합니다.

main.m 파일을 아래와 같은지 확인하고 다르면 수정합니다.

//
//  main.m
//  HelloiOS
//

#import <UIKit/UIKit.h>
#import "AppDelegate.h"

int main(int argc, char * argv[]) {
    @autoreleasepool {
        return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
    }
}

기타 설정

'Build Settings' 항목에서 일부 설정을 수정해주어야 합니다.

• 'Architectures' 항목에서 'Build Active Architecture Only' 항목을 아래와 같이 수정합니다.

Build Settings > Architectures > Build Active Architecture Only

Debug: No
Release: No

• 'Apple LLVM 9.0 - Language - Object C' 항목에서 'Objective-C Automatic Reference Counting' 항목을 아래와 같이 수정합니다.

Build Settings > Apple LLVM 9.0 - Language - Object C > Objective-C Automatic Reference Counting

Yes

• Info.plist 파일을 선택하고 속성 목록에서 'View controller-based status bar appearance' 항목을 추가하고 값을 'NO'로 설정합니다.

네트워크 연결 없는 앱 실행 설정

넥사크로 스튜디오에서 앱을 패킹할 때 Update Type을 Local이나 Update(Local+Server)으로 설정하면 네트워크 연결 없이도 앱을 실행 할 수 있습니다. 일반적으로 네트워크 연결이 필요 없는 경우에는 Local 타입을 사용하고, 네트워크가 연결된 상태에서 앱 실행 후 로컬 파일로 앱을 동작해야 할 경우에는 Update(Local+Server) 타입을 사용할 수 있습니다. 이처럼 네트워크 연결이 필요 없거나 문제 발생 시 앱 단독으로 실행이 가능하게 하려면 앱 빌드 시 실행에 필요한 파일을 적재하여 배포해야 합니다.

앱 실행에 필요한 파일은 모듈, 소스, 리소스 그리고 Run.zip과 start_ios.json으로 넥사크로 스튜디오에서 Packing(Archive&Update)을 수행하여 얻을 수 있습니다. 이 파일을 Xcode 프로젝트에서 archive 폴더에 적재한 후 앱을 빌드하면 네트워크 연결 없이도 앱을 실행할 수 있습니다.

Finder를 실행한 후 Xcode 프로젝트 경로의 하위에 archive 폴더를 생성합니다. 그리고 넥사크로 스튜디오에서 [Packing (Archive&Update)]으로 생성한 파일들을 다음과 같이 archive 폴더로 복사합니다.

Xcode의 프로젝트 탐색기 하단의 + 버튼을 클릭하여 [Add Files to "프로젝트명"]을 선택합니다.

archive 폴더를 선택하고 폴더 추가 옵션에서 "Create folder references"을 선택 후 Add 버튼을 클릭합니다.

Xcode의 프로젝트 탐색기에서 archive 폴더 및 파일이 정상적으로 추가되었는지 확인합니다.

앱 테스트

iOS 단말기를 PC에 USB로 연결해 바로 테스트하거나 시뮬레이터에 연결해 테스트할 수 있습니다. 단말기를 직접 연결하는 경우에는 단말기에 적절한 프로파일이 설치되어 있어야 합니다.

1. Xcode 상단의 Target Name을 클릭하여 다음과 같이 앱을 구동시킬 iOS 단말기 혹은 시뮬레이터를 선택합니다.

2. Run 기능을 수행합니다. 화면 상단의 아이콘을 직접 클릭하거나 Xcode 메뉴에서 실행할 수 있습니다.

Product > Run