iOS 실행 스토리보드

실행 스토리보드 는 iOS 애플리케이션용 실행 화면입니다. 정적 이미지인 기존의 실행 화면과 달리, 스토리보드는 애니메이션을 지원하고 사용자 디바이스의 해상도와 DPI에 맞춰 스케일링이 가능합니다. 개발자는 이를 사용하여 다양한 디바이스 화면에 손쉽게 적용할 수 있는 잘 다듬어진 실행 화면을 만들 수 있습니다. 이 하우투에서는 언리얼 엔진(UE) 프로젝트에서 스토리보드를 구현하는 단계를 설명합니다.

스토리보드는 App Store와 Apple Arcade에 있는 모든 앱에 반드시 필요합니다. Apple은 더 이상 정적 실행 화면 제출을 허용하지 않습니다.

간단한 실행 스토리보드

아래 섹션을 사용하여 완벽한 기능을 갖춘 커스텀 스토리보드를 만드는 것이 좋습니다. UE는 언제든 유효한 iOS 프로젝트를 패키징할 수 있도록 자리표시자에 대한 간단한 단일 이미지 스토리보드를 만들고 테스트하는 방법을 제공합니다. 이 워크플로는 C++ 프로젝트 생성 여부에 관계없이 모든 운영체제에서 사용할 수 있습니다.

간단한 스토리보드를 구성하려면 프로젝트 세팅(Project Settings) 을 열고 플랫폼(Platforms) > iOS > 실행 화면(Launch Screen) 섹션으로 이동합니다.

커스텀 실행 스토리보드(Custom Launch Storyboard) 를 체크하지 않으면 실행 화면 이미지(Launch Screen Image) 에 제공된 이미지가 프로젝트를 빌드할 때 스토리보드로 변환됩니다. 기본적으로 언리얼 엔진 로고가 포함된 이미지가 예비로 제공됩니다.

이미지 가이드라인

실행 화면 이미지는 알파 채널이 없는 PNG 파일이어야 합니다. 최대한 많은 디바이스에 맞춰 스케일링과 크롭이 가능하도록 정사각형 치수(예: 2048x2048)로 만드는 것이 좋습니다.

Xcode에서 커스텀 실행 스토리보드 생성

커스텀 스토리보드를 생성하려면 Xcode가 설치되어 있는 Mac이 필요합니다. 이 단계를 따르기 위해 언리얼에서 C++ 프로젝트를 만들 필요는 없지만 스토리보드를 생성하려면 Xcode가 필요합니다.

Xcode 프로젝트 구성

C++ 프로젝트를 만드는 경우 UE 게임에 대한 Xcode 프로젝트에서 실행 화면을 직접 생성할 수 있습니다. 또는 UE 프로젝트 외부의 유효한 Xcode 프로젝트에서 실행 화면을 생성하고 나중에 이를 UE로 이동합니다. 구조상의 이유로 스토리보드 프로젝트를 별도로 유지하고자 하는 경우나 블루프린트 프로젝트를 만드는 경우에 유용합니다.

다음 단계를 따라 독립형 Xcode 프로젝트를 생성합니다.

1. Xcode 를 열고 File > New > Project 를 클릭합니다.

   이미지를 클릭하면 확대됩니다.

2. 템플릿 메뉴에서 iOS 프로젝트를 생성하는지 확인하고, Single View App 을 클릭한 다음 Next 를 클릭합니다.

   이미지를 클릭하면 확대됩니다.

3. 옵션 메뉴에서 제품 이름, 조직 이름, 조직 식별자를 입력합니다. 이 예시에서는 com.EpicGames.TestLaunchStoryboard 라는 번들 식별자 가 입력됩니다.

4. User Interface 드롭다운에서 스토리보드(Storyboard) 를 클릭합니다. 필요한 정보를 모두 입력하고 Next 를 클릭합니다.

   이미지를 클릭하면 확대됩니다.

5. 사용하고자 하는 폴더에 새 프로젝트를 배치합니다. 이 예시에서는 Users/UserName/Xcode Projects 에 배치됩니다.

이 프로젝트를 컴파일할 필요는 없습니다. UE 프로젝트에 수동으로 이동시킬 스토리보드를 만들기 위해 이 프로젝트를 생성하는 것입니다.

실행 스토리보드 생성

프로젝트가 구성되었으므로 다음 단계를 따라 실행 화면에 사용할 스토리보드를 생성합니다.

1. Project Navigator 에서 프로젝트 를 우클릭하고 New Group 을 클릭한 다음 Storyboard 라는 새 그룹을 생성합니다.

   

2. File > New File... 을 클릭합니다.

   이미지를 클릭하면 확대됩니다.

3. 파일 템플릿 메뉴에서 User Interface 섹션으로 이동하여, Launch Screen 을 선택한 다음 Next 를 클릭합니다.

   이미지를 클릭하면 확대됩니다.

4. 프롬프트가 표시되면 파일을 저장합니다. Storyboard 폴더에 파일을 배치하고, 동일한 이름의 그룹에 있는지 확인한 다음 파일의 이름을 공백 없이 LaunchScreen 으로 변경합니다.

   이미지를 클릭하면 확대됩니다.

5. Create 버튼을 클릭하여 스토리보드 생성을 완료합니다. LaunchScreen.storyboard라는 이름의 파일이 Storyboard 그룹 에 표시되며, 여기에는 간단한 텍스트 라벨과 저작권 고지가 포함되어 있습니다.

   이미지를 클릭하면 확대됩니다.

6. View Controller 를 선택합니다. Identity Inspector에서 Storyboard ID 를 'LaunchScreen'으로 설정합니다. Restoration ID 섹션에서 Use Storyboard ID 체크 박스를 체크합니다.

   이미지를 클릭하면 확대됩니다.

시작할 때 스토리보드가 인식되게 하려면 View Controller에 대해 Storyboard와 Restoration ID를 설정해야 합니다. 이 단계를 건너뛰는 경우, 스토리보드가 표시되기 전에 애플리케이션에 검은색 화면이 표시됩니다.

실행 스토리보드에 이미지 추가

이전 섹션에서 생성된 스토리보드는 그대로 프로젝트에서 사용할 수 있는 정도로 잘 작동합니다. 이 섹션에서는 Xcode 프로젝트에 외부 에셋을 통합하는 방법을 익힐 수 있도록 스토리보드에 이미지를 추가합니다.

1. 스토리보드의 배경으로 사용할 이미지를 생성합니다. 투명하지 않은 PNG여야 합니다.

2. Project Navigator 에서 Storyboard 그룹을 우클릭하고 New Group 을 클릭한 다음 Assets 라는 새 그룹을 생성합니다.

3. Finder 에서 Assets 폴더가 Storyboard 폴더 내부에 있는지 확인한 다음 Assets 폴더에 PNG를 배치합니다.

   이미지를 클릭하면 확대됩니다.

4. PNG를 Project Navigator 의 Assets 그룹으로 드래그하여 Xcode 프로젝트에 추가합니다.

   

5. Xcode 창 상단에 있는 + (더하기) 버튼을 클릭하여 라이브러리 를 엽니다.

   이미지를 클릭하면 확대됩니다.

6. 라이브러리 에서 Image View 오브젝트를 찾은 다음 스토리보드 에 드래그합니다. 오브젝트가 기본 View 와 이를 이루는 모든 텍스트를 대체합니다.

   이미지를 클릭하면 확대됩니다.

7. Image View 를 선택하고 Attributes 패널 에서 소스 이미지(Image) 드롭다운을 클릭한 다음 PNG를 선택합니다. Attributes 패널이 표시되지 않는 경우, 자 모양 아이콘 옆의 선이 있는 V자 모양의 아이콘을 클릭합니다.

   이미지를 클릭하면 확대됩니다.

8. Attributes 패널 에서 Content Mode 를 Aspect Fill 로 설정합니다.

   

9. 자 모양 아이콘을 클릭하여 Size inspector 를 선택합니다. Autoresizing 섹션에서 컨스트레인트 4개를 모두 클릭합니다. 그러면 Image View의 크기가 4개 방향으로 조정됩니다.

   이미지를 클릭하면 확대됩니다.

이미지가 Xcode 프로젝트의 다른 위치에 있으면 Image View에서 활용할 수 없습니다. 하지만 다음 섹션에서 언리얼 프로젝트에 추가하기 위해 Assets 폴더에 이미지를 유지하는 것이 좋습니다.

이미지 가이드라인

다양한 종횡비와의 호환성을 극대화하기 위해 실행 스토리보드에 정사각형 이미지를 사용하는 것이 좋습니다. 하지만 특정 디바이스나 종횡비를 타깃으로 하는 경우, 해당 종횡비에 안전하게 들어맞도록 이미지를 조정할 수 있습니다.

커스텀 스토리보드 추가

UE 프로젝트에 스토리보드를 추가하려면 다음 단계를 따릅니다.

1. 엔진 설치 디렉터리에 Project/Build/IOS/Resources/Interface 라는 폴더를 생성합니다.

2. Finder 에서 Xcode 프로젝트에 대한 Storyboard 폴더를 찾습니다.

3. LaunchScreen.storyboard 와 동반되는 Assets 폴더를 Project/Build/IOS/Resources/Interface 로 복사합니다.

   이미지를 클릭하면 확대됩니다.

   Project 폴더에 필요한 파일이 없는 경우, 시스템이 Engine 디렉터리로 예비 전환되어 대신 파일을 찾습니다.

4. 언리얼 에디터 에서 프로젝트 세팅(Project Settings) 을 열고 플랫폼(Platforms) > iOS > 실행 화면(Launch Screen) 으로 이동합니다.

5. 커스텀 실행 스토리보드(Custom Launch Storyboard) 체크 박스를 활성화합니다.

   

이전 iOS 프로젝트를 패키징할 때 기본 실행 스토리보드를 사용하는 대신 프로젝트에서 IOS/Resources/Graphics 폴더에 배치한 커스텀 스토리보드를 사용합니다. Xcode 프로젝트에서 이미지 파일 참조에 특정 폴더 구조가 필요하지 않은 반면, UE 프로젝트에서는 이미지 파일이 LaunchScreen.storyboard 파일과 함께 Assets 폴더에 위치해야 합니다.

추가 자료

이 가이드를 마치고 나면 UE 프로젝트에 기본 실행 스토리보드를 구현하는 데 필요한 모든 것이 갖춰진 상태일 것입니다. iOS용 스토리보드 구성 및 편집에 관한 추가 정보는 Apple의 실행 화면 및 스토리보드 관련 문서를 참조하세요.