[Vue Ionic] 화면 회전 고정, Cordova plugin을 Capacitor에서 실행하기

2019-12 에 작성된 글입니다.

가로 화면으로 고정하는 방법은 여럿이 있겠지만, 저는 아이오닉의 플러그인을 이용하여 고정시켜보도록 하겠습니다. 아래 페이지에 가면 화면 고정에 대한 플러그인을 확인할 수 있습니다.

Screen Orientation - Ionic Documentation
Cordova plugin to set/lock the screen orientation in a common way. Requires Cordova plugin…ionicframework.com

공식 문서에 나온 것처럼, 아이오닉 플러그인을 설치해 보도록 하겠습니다.

$ ionic cordova plugin add cordova-plugin-screen-orientation

웬걸, ionic/vue에서는 Cordova 기능을 사용할 수 없다고 합니다. 글을 더 읽어 보니, Cordova 플러그인을 Capacitor 프로젝트에 추가하고 싶으면 아래 링크를 방문하라고 합니다. 아래 링크에서 캐피시터 문서를 확인해 보겠습니다.

Using Cordova Plugins and Ionic Native
The Native Bridge for Cross-Platform Web Apps. Invoke Native SDKs on iOS, Android, Electron, and the Web with one code…capacitor.ionicframework.com

플러그인을 설치한 후 동기화를 하면 ionic/vue에서도 사용할 수 있다고 나옵니다. 🤭 한번 시도해 보겠습니다.

먼저, 코르도바의 플러그인을 설치한 후 프로젝트를 동기화 시키겠습니다.

$ npm install cordova-plugin-screen-orientation
$ npx cap sync

그런 다음, 프로젝트에서 해당 플러그인을 사용하기 위해 @ionic-native/screen-orientation 를 설치하겠습니다.

$ npm install @ionic-native/screen-orientation

설치가 완료됐다면, App.vue 파일에 가서 해당 플러그인을 import 시키겠습니다.

<script>
import { ScreenOrientation } from "@ionic-native/screen-orientation";
</script>

문제없이 import가 됩니다! 이거 뭔가 순조로운데요? 이제 아이오닉의 공식 문서를 다시 한번 확인해 보겠습니다.

… 사용법이 타입스크립트로 작성되어있네요! 타입스크립트는 모르고, 자바스크립트만 아는 저는, 일단 끌리는 대로 시도해 보도록 하겠습니다.

프로젝트가 생성될 때 ScreenOrientation을 콘솔에 찍어보면 어떻게 될까요? App.vue에 추가해 보겠습니다.

<script>
import { ScreenOrientation } from "@ionic-native/screen-orientation";
export default {
  created(){
    console.log(ScreenOrientation)
  }
};
</script>

성공입니다! 현재 프로젝트가 가로화면으로 되어있다고 리턴이 옵니다. 그렇다면, 고정하는 옵션을 created 부분에 넣어 주면 되겠네요!

App.vue에 해당 내용을 추가하겠습니다.

<script>
import { ScreenOrientation } from "@ionic-native/screen-orientation";
export default {
  created(){
    ScreenOrientation.lock(ScreenOrientation.ORIENTATIONS.LANDSCAPE_PRIMARY)
  }
};
</script>

실행하면, 콘솔창에 screen.orientation.lock() is not available on this device. 라는 에러가 뜹니다. 검색해 보니 이 에러는 플러그인 문제가 아닌, 웹으로 실행하여 발생한 에러입니다. 그럼 이것을 xCode로 실행해 볼까요? xCode로 실행하는 방법은 이전 글에 나와있습니다.

가로 화면 고정이 잘 되어있는 모습을 확인할 수 있습니다!

이외에도 화면이 바뀌었을 때 반응 주는 API, 세로화면 고정 API 등을 사용할 수 있으니, 아래 링크를 통해 확인해 주세요.

apache/cordova-plugin-screen-orientation
AppVeyor Travis CI Cordova plugin to set/lock the screen orientation in a common way for iOS, Android, and windows-uwp…github.com