# 디바이스 모드 설정(앱 화면 전환)

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FyTh2CmnTl00xHKyCALLQ%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media&#x26;token=5646a291-52ee-41b3-af1a-5a8303039007" alt=""><figcaption></figcaption></figure>

**앱 디바이스 모드 설정하기**

**+디바이스 모드란 핸드폰 화면 전환을 말하는데요.**

**+앱 화면을 세로 전용으로 만들 것인지, 가로 전용으로 만들 것인지 선택하여 제작할 수 있어요.**

스윙투앱에서 제작되는 앱 기본 셋팅은 \[가로-세로 복합]으로 되어 있기 때문에, 앱 화면을 자유롭게 회전하여 볼 수 있는데요.

만약 앱에 따라서 가로 모드로만 봐야 하거나 세로 모드로만 봐야 하는 앱이라면! 고급설정- 디바이스모드에서 앱 화면을 가로 or 세로 모드로 변경할 수 있습니다.

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FyTh2CmnTl00xHKyCALLQ%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media&#x26;token=5646a291-52ee-41b3-af1a-5a8303039007" alt=""><figcaption></figcaption></figure>

## 가로 화면으로 제작한 앱제작 사례

![](https://wp.swing2app.co.kr/wp-content/uploads/2019/02/%EC%95%84%EB%AC%B4%EC%8A%A42.png)

![](https://wp.swing2app.co.kr/wp-content/uploads/2019/02/%EC%9C%A0%EB%9F%BD%EC%A7%80%ED%95%98%EC%B2%A04.png)

사용자가 직접 제작한 앱을 보시면, 가로 모드로 제작된 앱은 앱을 실행하자마자 앱 화면이 가로모드로 실행됩니다.

자동으로 화면이 가로로 전환되어서 보여져요!!

가로 화면 모드는 별도 개발을 한게 아니구요.

스윙투앱에서 제공하는 고급설정 옵션 기능으로 가로 모드형 앱을 제작할 수 있습니다.

앱 화면을 전환하여 앱을 제작하는 방법을 확인해주세요!

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FyTh2CmnTl00xHKyCALLQ%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media&#x26;token=5646a291-52ee-41b3-af1a-5a8303039007" alt=""><figcaption></figcaption></figure>

## 1.디바이스 모드 변경하기

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2Fj4oqAM7Ra2u7Aid2bAu6%2F%EB%94%94%EB%B0%94%EC%9D%B4%EC%8A%A4%EB%AA%A8%EB%93%9C.png?alt=media&#x26;token=c4b1e883-3a09-4381-b083-d4cdfa6bf5a8" alt=""><figcaption></figcaption></figure>

**앱제작 화면으로 이동합니다.**&#x20;

1\)\[고급설정] 메뉴 선택

2\)\[설정: 앱제작 설정]으로 선택해주세요. (화살표 모양 마우스 커서로 클릭시 확인가능)

3\)스크롤하여 아래로 내려보시면, 디바이스 모드 확인 가능합니다.&#x20;

디바이스 모드 \[EDIT] 버튼을 선택해주세요.

4\)설정값을 선택해주세요 (앱 기본셋팅은  portrait+landscape 가로-세로 복합으로 설정되어 있어요.)

5\)\[UPDATE] 버튼 선택

6\)\[저장]버튼 선택

7\)\[앱 업데이트] 버튼을 눌러서, 새로 제작된 앱 버전으로 확인해주시기 바랍니다.

아직 앱제작 전 이라면, \[앱 제작하기] 버튼으로 표시됩니다. 제작하기 눌러서 안드로이폰으로 앱 다운 받아 확인해주세요.

{% hint style="info" %}
**용어 설명**

-portrait+landscape (가로+세로 복합)

-portrait (세로)

-landscape (가로)
{% endhint %}

{% hint style="warning" %}
**\*가로-세로 복합: 화면이 세로, 가로 자유롭게 회전이 가능합니다.**

**\*세로 : 화면 가로 전환이 되지 않고, 세로 화면으로만 앱이 운영됩니다.**

**\*가로: 화면 세로 전환이 되지 않고, 가로화면으로만 앱이 운영됩니다.**

<mark style="color:red;">\*스윙투앱에서 제작하는 앱은 \[가로-세로 복합]으로 기본 셋팅되어 제작됩니다.</mark>

<mark style="color:red;">만약 디바이스 모드를 가로전용 혹은 세로 전용으로 수정해서 제작해야 할 경우는 위의 방법대로 모드를 설정해서 새로 제작해주세요.</mark>
{% endhint %}

<figure><img src="https://684031119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmsJj00k8mj8AcVpnn9Xs%2Fuploads%2FyTh2CmnTl00xHKyCALLQ%2F%EA%B5%AC%EB%B6%84%EC%84%A0.PNG?alt=media&#x26;token=5646a291-52ee-41b3-af1a-5a8303039007" alt=""><figcaption></figcaption></figure>

## 2.앱 실행화면

### <mark style="color:blue;">**1)세로 모드**</mark>

<div align="left"><img src="https://wp.swing2app.co.kr/wp-content/uploads/2019/02/%EB%94%94%EB%B0%94%EC%9D%B4%EC%8A%A4%EB%AA%A8%EB%93%9C4.png" alt="" width="375"></div>

세로 모드 혹은 가로-세로 복합 앱은, 앱 실행시 세로 화면으로 보여집니다.

### <mark style="color:blue;">**2)가로 모드**</mark>

![](https://wp.swing2app.co.kr/wp-content/uploads/2019/02/%EB%94%94%EB%B0%94%EC%9D%B4%EC%8A%A4%EB%AA%A8%EB%93%9C6.png)

가로 모드로 제작한 앱은 앱 실행시 화면이 가로로 전환되어서 보여져요.

\[가로-세로 복합]으로 제작한 앱 역시 가로로 회전하면 앱 화면이가로로 전환됩니다.

### &#x20;<mark style="color:blue;">3)</mark><mark style="color:blue;">**핸드폰 설정- 자동 회전(자동화면전환) 체크**</mark>

<div align="left"><img src="https://wp.swing2app.co.kr/wp-content/uploads/2019/02/%EB%94%94%EB%B0%94%EC%9D%B4%EC%8A%A4%EB%AA%A8%EB%93%9C3.png" alt="" width="375"></div>

가로-세로 복합은 핸드폰에서 자동 화면 회전이 선택되어 있어야 자유롭게 화면을 가로로, 세로로 전환하여 볼 수 있어요.

핸드폰 설정에서 화면전환에 체크해주시기 바랍니다.

{% hint style="success" %} <mark style="color:green;">**디바이스모드 이용 정리**</mark>

앱은 기본 디바이스가: 가로-세로 복합 모드로 제작됩니다. 만약 화면을 가로 혹은 세로 모드로 변경하실 때에는

\*스윙 앱제작 페이지 → 고급설정 메뉴 → 앱 제작설정 → 디바이스모드 ‘EDIT’ 선택 → <mark style="color:red;">‘portrait (세로) 전용‘ or ‘landscape (가로) 전용’</mark> 선택 하고

앱을 재 제작하시면 핸드폰 앱 실행시 설정된 모드로 앱 화면이 전환됩니다.
{% endhint %}