7.앱 개발 및 실행 (iOS/iPadOS)

Edit

7.1앱 개발 환경 설정

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

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

  1. 개발자 계정 등록

  2. Xcode, iOS SDK 설치

  3. 배포 시 필요한 작업

7.1.1개발자 계정 등록

Apple 계정만 있으면 개발자 라이선스를 따로 발급받지 않아도 계정 등록만으로 Xcode를 내려받거나 기타 무료로 제공되는 서비스를 사용할 수 있습니다. 그리고 iOS에서는 시뮬레이터를 사용해 테스트를 진행할 수 있습니다.

시뮬레이터를 사용하는 경우에는 별도의 인증 절차를 거치지 않지만, 단말기를 연결하는 경우에는 추가적인 인증 절차가 필요하므로 개발자 라이선스를 발급받아야 합니다.

Apple 계정 생성

개발자 계정을 등록하기 위해서는 먼저 Apple 계정이 있어야 합니다. 개발자 계정을 따로 만드는 것이 아니라 이미 만들어진 Apple 계정을 개발자 계정으로 등록하는 것입니다.

새로운 Apple 계정은 아래 링크에서 만들 수 있으며 등록 시 사용하는 이메일 계정을 ID로 사용합니다. 기존에 사용하고 있는 Apple 계정이 있다면 이 단계는 지나갑니다.

개발자 라이선스 인증

단말기 연결 없이 시뮬레이션으로만 테스트를 진행하고자 한다면 아래 링크에서 Apple 계정을 개발자 계정으로 등록할 수 있습니다.

개발, 테스트, 배포에 필요한 서비스를 받으려면 iOS 개발자 프로그램에 가입해야 합니다. 1년 단위로 등록할 수 있으며 별도의 비용이 발생합니다. 제공되는 서비스에 대해서는 아래 링크를 참고하세요.

화면 상단에 있는 Enroll 버튼을 클릭하면 등록하기 과정이 시작됩니다. 개발자 계정은 개인으로 등록하거나 회사 명의로 등록할 수 있습니다.

그림 7-1apple_developer_program_page

회사 명의로 등록하는 경우에는 DUNS 번호가 필요합니다. DUNS 번호는 전 세계 기업을 관리하는 일종의 코드입니다. 애플 사이트에서 DUNS 번호를 별도 비용 없이 발급받을 수 있습니다. 사이트에서 신청 후 발급 대행사에서 유선으로 필요한 서류를 요청하고 해당 서류까지 전달해야 발급 처리가 완료됩니다.

계정이 등록되면 Apple 담당자가 신청된 내용을 검토하고 유선으로 확인합니다. 다른 문제가 없다면 등록 완료 메일에 포함된 링크로 이동해 라이선스에 동의하고 스토어에서 1년짜리 개발자 계정을 구매할 수 있습니다.

구매 단계까지 마치면 이메일로 활성화 코드(Activation code)가 전달되고 인증 페이지에서 해당 코드를 등록하면 모든 절차가 완료됩니다.

iOS Dev Center에서 화면 오른쪽에 iOS Developer Program 메뉴가 추가된 것을 확인할 수 있습니다.

7.1.2Xcode, iOS SDK 설치

Xcode는 맥에서 사용하는 통합개발환경으로 여러 가지 도구가 포함되어 있습니다. 이미 Xcode가 설치되어 있더라도 연결하려는 장비의 iOS SDK 버전에 따라 지원되는 Xcode 버전이 달라질 수 있으며 필요한 경우 업데이트를 해야 합니다.

내려받을 수 있는 최신 Xcode 버전은 아래 링크에서 확인할 수 있습니다. 링크를 통하지 않고 직접 앱스토어에서 내려받을 수도 있습니다. Xcode 설치 파일에는 iOS SDK와 Mac SDK가 포함되어 있습니다.

그림 7-2xcode_download_page

만일 다른 버전의 Xcode가 필요하다면 아래 링크에서 내려받을 수 있습니다.

7.1.3배포에 필요한 작업

실제 단말기와 연결해 테스트를 진행하기 위해서는 몇 가지 인증 절차가 필요합니다. 이와 관련된 작업을 위해서는 개발자 프로그램에 등록되어 있어야 합니다.

필요한 작업과 관련된 내용은 아래 링크를 참고하세요.

7.2앱 프로젝트 개발

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

7.2.1프로젝트 생성

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

File > New > Project

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

그림 7-3project_new_01

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

그림 7-4project_new_02_01

설치된 Xcode 버전에 따라 프로젝트 생성 방법이 조금씩 달라질 수 있습니다.

iPhone X 디바이스를 사용하는 경우에 위쪽과 아래쪽에 여백이 생기는 현상을 방지하기 위해서는 프로젝트에 LaunchScreen 스토리 보드를 추가해야 합니다.

자세한 내용은 아래 링크를 참고해주세요.

https://developer.apple.com/ios/update-apps-for-iphone-x/

https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/launch-screen/

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

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

그림 7-5project_new_03_01

하단에 있는 + 버튼을 클릭해 아래와 같이 19개 항목을 추가합니다.

AddressBookUI.fremawork

AddressBook.fremawork

AudioToolbox.framework

AVFoundation.fremawork

CFNetwork.fremawork

CoreLocation.fremawork

MediaPlayer.fremawork

QuartzCore.fremawork

MobileCoreServices.framework

CoreMedia.framework

Security.framework

SystemConfiguration.framework

MessageUI.fremawork

CoreBluetooth.framework

UIKit.framework

libc++.tbd

libxml2.tbd

libz.1.2.5.tbd

libsqlite3.0.tbd

최초로 라이브러리나 프레임워크를 추가하면 Xcode의 프로젝트 네비게이터에 자동으로 Frameworks 그룹이 생성됩니다. 논리적으로 구성된 그룹이므로 실제 프로젝트 폴더에서는 보이지 않습니다.

간혹 추가한 라이브러리와 프레임워크가 왼쪽의 프로젝트 네비게이터에만 보이고 'Linked Frameworks and Libraries'에는 안 보이는 경우가 있는데 이 때는 누락된 라이브러리와 프레임워크를 Project Navigator에서 'Linked Frameworks and Libraries'로 드래그 앤 드롭으로 추가해 주십시오. 그렇지 않으면 빌드시 에러가 발생합니다.

7.2.3넥사크로플랫폼 라이브러리 설정

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

넥사크로플랫폼 라이브러리는 압축 파일 형태로 제공되며 nexacro17.ios.framework.zip이라는 파일명으로 제공됩니다. 제공되는 파일은 압축을 풀어 생성된 프로젝트의 Frameworks 그룹으로 끌어다 놓습니다.

그림 7-6nexacro_library_추가_자름

7.2.4리소스 설정

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

이미지 설정

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

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

이미지 설정시 반드시 해당 iOS 단말기에 맞게 제작된 이미지를 사용해야 합니다. 단말기에 맞지 않는 크기의 이미지 혹은 사양과 맞지 않는 속성을 갖는 이미지를 설정하면 앱 빌드시 에러가 발생하거나 정상적으로 동작하지 않습니다.


아이콘 및 이미지 설정과 관련된 자세한 내용은 애플 개발자 사이트를 참고하세요.

https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/image-size-and-resolution/

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

그림 7-7appicon_launch_image_설정_01

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

그림 7-8appicon_launch_image_설정_02

'Launch Images Source' 항목 옆의 'Use Asset Catalog...'를 클릭하면 다음과 같이 팝업이 오픈됩니다. 템플릿으로 프로젝트를 생성했다면 기본 애셋 카탈로그가 이미 생성되어 있으므로 Assets를 선택한 후 Migrate 버튼을 클릭합니다.

그림 7-9appicon_launch_image_설정_03

Migration이 수행되면 애셋 카탈로그에 새로 생성된 LaunchImage 항목이 보이고 그 옆으로 단말기와 용도에 맞게 설정할 수 있는 화면을 확인할 수 있습니다. 미리 제작한 런치 이미지를 알맞은 위치에 드래그 앤 드롭합니다.

그림 7-10appicon_launch_image_설정_05

메시지 설정

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

새로운 파일을 생성하려면 프로젝트 폴더를 선택 후 컨텍스트 메뉴에서 'New File'을 선택합니다.

그림 7-11project_new_07

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

그림 7-12project_new_08

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

그림 7-13project_new_09

생성된 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...' 버튼을 클릭하고 언어를 선택합니다. 사전에 프로젝트 설정에서 언어를 추가하지 않은 경우에는 기본으로 영어가 선택됩니다.

그림 7-14Localization_01

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

그림 7-15Localization_02

Localization에 관련된 자세한 내용은 애플 개발자 사이트를 참고하세요.

https://developer.apple.com/library/content/documentation/MacOSX/Conceptual/BPInternational/Introduction/Introduction.html

7.2.5Config 설정

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

nexacro_config.xml 파일이 없으면 기본 설정이 적용되므로 앱 실행에는 아무런 지장이 없습니다.

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"/>
  <xpush-server request-missing-message="true" />
</nexacro-config>

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

기능

속성

설정 값

설명

application

dialog-position

"top" | "center" | "bottom"

앱 업데이트 진행 정보를 표시할 팝업 위치를 설정합니다.

file-logging

"true" | "false"

로딩 에러 정보를 파일로 저장할지 설정합니다.

iTunes를 통해서 로그 파일을 확인할 수 있습니다.

updator

force

"true" | "false"

start_ios.json에 업데이트 파일 정보 존재시 팝업으로 표시할지 설정합니다.

"true"로 설정시 팝업 알림없이 강제로 업데이트를 진행합니다.

cancelable

"true" | "false"

업데이트 파일 존재시 팝업에 업데이트 취소 버튼을 표시할지 설정합니다.

취소 버튼을 클릭하면 업데이트를 진행하지 않고 앱을 종료합니다.

errormsg

"true" | "false"

앱 로딩에 실패했을 때 에러 정보를 팝업으로 표시할지 설정합니다.

quiet

"true" | "false"

업데이트 팝업을 표시할지 설정합니다.

"true"로 설정해도 업데이트 파일 존재시 진행 단계는 표시됩니다.

xpush-server

request-missing-message

"true" | "false"

xpush 서버 사용시 수신하지 못한 신뢰성 메시지를 자동으로 요청할지 설정합니다.

notification

enable

"true" | "false"

알림 기능을 사용할지 설정합니다.

handler

"[클래스 이름]"

알림 수신시 처리할 핸들러를 구현한 클래스를 설정합니다.

기본 값은 “DefaultNotificationManagerHandler” 입니다.

7.2.6빌드 환경 설정

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

AppDelegate.h

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

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

#import <UIKit/UIKit.h>
#import <nexacro17/NexacroAppDelegate.h>
#import <nexacro17/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"

@implementation AppViewController
-(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return [super shouldAutorotateToInterfaceOrientation:interfaceOrientation];
}
@end

@implementation AppDelegate
- (NexacroMainViewController*)initializeMainViewController
{
    NSString *bootstrapUrl = @"http://[URL]/start_ios.json";
    
    [[NexacroResourceManager sharedResourceManager] setBootstrapURL:bootstrapUrl isDirect:NO];
    AppViewController* controller = [[AppViewController alloc] initWithFullScreen:NO];
    
    return controller;
}
@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' 항목에서 일부 설정을 수정해주어야 합니다.

Build Settings > Architectures > Build Active Architecture Only

Debug: No
Release: No
Build Settings > Apple LLVM 9.0 - Language - Object C > Objective-C Automatic Reference Counting

Yes

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

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

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

넥사크로 스튜디오에서 Packing(Archive&Update)시 Update Type을 Local로 설정한 때도 Xcode 프로젝트의 AppDelegate.m에서 부트스트랩 URL은 반드시 설정해야 합니다.

예를 들면, 다음과 같이 가상의 주소나 실제 사용하지 않는 임의의 주소로 설정해도 무방합니다.

NSString *bootstrapUrl = @"http://192.168.0.1/_ios_/start_ios.json";

1

Finder에서 archive 폴더를 생성하고 모듈, 소스, 리소스 파일을 복사합니다.

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

그림 7-1601_Finder에_폴더생성및파일복사

2

Xcode 프로젝트에 archive 폴더를 추가합니다.

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

그림 7-1702_Xcode_파일추가

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

그림 7-1803_Xcode_파일추가2

3

폴더 및 파일이 프로젝트에 정상적으로 추가되었는지 확인합니다.

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

그림 7-1904_Xcode_확인

Xcode의 프로젝트 탐색기에 표시되는 폴더는 노란색과 파란색의 두 가지로 표시됩니다. 노란색 폴더는 Xcode에서 프로젝트 구성을 표시하기 위해 존재하는 논리적인 그룹을 표시하며 실제로는 존재하지 않습니다. 파란색 폴더는 실재하는 물리적인 폴더를 표시합니다. 빌드 수행시 노란색 폴더의 파일은 앱의 루트 디렉터리에 포함되며 파란색 폴더의 파일은 폴더 구조를 유지한 채 포함됩니다.

7.3앱 테스트

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

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

그림 7-20select_device_01

그림 7-21select_device_02_01

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

그림 7-22select_device_01

Product > Run

그림 7-23project_new_13_resize