태블릿 & 화면 방향

한눈에 보기

Unveily SDK는 모든 플랜(Basic · Standard · Pro) 공통으로 태블릿 레이아웃 최적화와 화면 회전(가로/세로) 처리를 기본 지원합니다. 별도 설정 없이 빌드하면 자동으로 적용됩니다.

화면 회전 처리

동작 방식

AndroidManifest.xml에 android:configChanges 속성이 선언되어 있으므로, 기기가 회전해도 Activity가 재생성되지 않습니다.

<!-- AndroidManifest.xml — 자동 처리됨, 수정 불필요 -->
<activity
    android:name=".MainActivity"
    android:configChanges="orientation|screenSize|keyboardHidden|screenLayout|smallestScreenSize"
    ... />

이 덕분에 회전 시에도:

WebView 로드 상태(URL, 스크롤 위치)가 유지됩니다.
JavaScript 실행 맥락이 초기화되지 않습니다.
로그인 세션, 폼 입력 등이 그대로 보존됩니다.

회전 시 자동 처리

회전이 발생하면 SDK 내부에서 다음을 자동으로 수행합니다:

열려 있는 모든 패널(사이드 드로어, 탑다운 메뉴 등)을 닫습니다.
시스템 바 여백(inset)을 새 방향에 맞게 재적용합니다.
웹에 onOrientationChanged 이벤트를 전달합니다.

웹 ↔ 앱 방향 API

현재 방향 조회 (동기)

// "portrait" 또는 "landscape" 반환
const dir = window.unveilyBridge.app.orientation();
console.log(dir); // "portrait"

회전 이벤트 수신

회전이 발생할 때마다 네이티브가 자동으로 호출합니다.

function onOrientationChanged(info) {
  // info.orientation  — "portrait" | "landscape"
  // info.isLandscape  — boolean
  console.log('방향 변경:', info.orientation);

  if (info.isLandscape) {
    // 가로 모드 레이아웃 처리
    document.body.classList.add('landscape');
  } else {
    document.body.classList.remove('landscape');
  }
}

onOrientationChanged 함수는 페이지 로드 이후에만 호출됩니다. 초기 방향은 window.unveilyBridge.app.orientation()으로 직접 확인하세요.

태블릿 대응

드로어 너비 자동 조정

사이드 드로어 너비가 화면 크기에 따라 자동으로 달라집니다.

기기 유형	최소 너비 기준	드로어 너비
스마트폰	< 600dp	280dp
7" 태블릿	≥ 600dp	320dp
10" 태블릿	≥ 720dp	380dp

이는 Android의 values-sw600dp / values-sw720dp 리소스 시스템으로 구현되어 있으며, 자동으로 선택됩니다.

태블릿 여부 확인 (동기)

const tablet = window.unveilyBridge.app.isTablet();
// smallestWidth ≥ 600dp 이면 true

if (tablet) {
  // 태블릿 전용 레이아웃 적용
  document.documentElement.setAttribute('data-device', 'tablet');
} else {
  document.documentElement.setAttribute('data-device', 'phone');
}

앱 정보 콜백에서 확인

getInfo 콜백에도 포함되어 있습니다:

window.unveilyBridge.app.getInfo(function(info) {
  console.log(info.isTablet);    // true | false
  console.log(info.orientation); // "portrait" | "landscape"
});

초기화 패턴 (권장)

페이지 로드 시 한 번에 방향·기기 유형을 읽고 적용하는 패턴을 권장합니다.

document.addEventListener('DOMContentLoaded', function () {
  if (!window.unveilyBridge) return;

  const isTablet = window.unveilyBridge.app.isTablet();
  const orientation = window.unveilyBridge.app.orientation();

  applyLayout(isTablet, orientation);
});

function onOrientationChanged(info) {
  const isTablet = window.unveilyBridge.app.isTablet();
  applyLayout(isTablet, info.orientation);
}

function applyLayout(isTablet, orientation) {
  const root = document.documentElement;
  root.dataset.device = isTablet ? 'tablet' : 'phone';
  root.dataset.orientation = orientation;
}

/* CSS 예시 */
[data-device="tablet"] .sidebar { width: 280px; }
[data-device="phone"]  .sidebar { display: none; }

[data-orientation="landscape"] .hero { height: 50vh; }
[data-orientation="portrait"]  .hero { height: 70vh; }

QR 스캔과 회전

QR 스캔 화면(QRScanActivity)은 스캔 안정성을 위해 세로 고정으로 동작합니다. QR 스캔 중 기기를 회전해도 스캔 화면 자체는 세로로 유지되며, 스캔 완료 후 메인 화면으로 돌아오면 현재 기기 방향이 적용됩니다.

API	반환 타입	설명
`unveilyBridge.app.isTablet()`	`boolean`	태블릿(sw ≥ 600dp) 여부
`unveilyBridge.app.orientation()`	`"portrait" \| "landscape"`	현재 방향
`onOrientationChanged(info)`	콜백 함수	회전 시 네이티브가 호출
`info.isLandscape`	`boolean`	가로 방향 여부
`info.orientation`	`string`	`"portrait"` 또는 `"landscape"`