Capacitor 앱에서 에지 투 에지 디스플레이 구현하는 방법 You don’t need any hacks, plugins, or workarounds. Capacitor has official support for edge-to-edge display through the adjustMarginsForEdgeToEdge 플러그인, 하이재킹, 또는 다른 방법이 필요하지 않습니다. __CAPGO_KEEP_0__ 에지 투 에지 디스플레이를 위해 공식적으로 지원합니다.
Capacitor 에지 투 에지 레이아웃 구현하는 방법에 어려움을 겪는 개발자들이 많습니다. 특히 안드로이드 15 이상 버전을 대상으로 할 때입니다. 개발자들은 종종 커스텀 플러그인이나 CSS 하이재킹을 사용하여 현대적인 에지 투 에지 디자인을 구현합니다. 하지만 더 나은, 네이티브한 방법이 있습니다.
에지 투 에지 디스플레이란 무엇인가요?
에지 투 에지 디스플레이는 앱 콘텐츠가 시스템 바(상태 바 및 네비게이션 바) 뒤로 확장되도록 허용하여 더 몰입적이고 현대적인 UI 경험을 제공합니다. 안드로이드 15부터, 구글은 모든 앱에 에지 투 에지가 표준이 될 것입니다.
공식적인 해결책: adjustMarginsForEdgeToEdge
Capacitor은 이 목적을 위해 명시적으로 제공하는 구성 옵션입니다. 이 옵션은 공식 Capacitor config 문서에 문서화되어 있습니다. adjustMarginsForEdgeToEdge __CAPGO_KEEP_0__ config 문서 Capacitor, but it’s easy to miss.
설정 방법
Add this to your capacitor.config.ts 또는 capacitor.config.json:
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'My App',
webDir: 'dist',
android: {
adjustMarginsForEdgeToEdge: 'auto' // or 'force' or 'disable'
}
};
export default config;Capacitor live-update alternatives comparison page에서 사용되는 Capgo UI 문자열의 HTML 텍스트 조각 (부모 키 `alternatives_cta_questions`). Page/area: Capacitor live-update alternatives 비교 페이지. 역할: 장기 마케팅 또는 법적 문단. Seen in: page alternatives.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지하십시오. 메시지 키 `alternatives_cta_questions` (Alternatives CTA Questions). | Appflow 비교/이동 마케팅 복사본. 역할: 장기 마케팅 또는 법적 문단. Seen in: page ionic-appflow.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지하십시오. 메시지 키 `appflow_cta_questions` (Appflow CTA Questions). | Capawesome 비교 페이지. 역할: 장기 마케팅 또는 법적 문단. Seen in: page capwesome.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지하십시오. 메시지 키 `capwesome_cta_questions` (Capwesome CTA Questions). | HTML 텍스트 조각. Page/area: Consulting 서비스 페이지. 역할: 섹션 서브 타이틀 또는 태그 라인. Seen in: page consulting.astro. Capgo 제품/브랜드 및 개발자 용어를 정확하게 유지하십시오. 메시지 키 `consulting_faq_subtitle` (Consulting FAQ Subtitle). | Appflow 비교/이동 마케팅 복사본. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. Seen in: page ionic-appflow.astro, page ionic-enterprise-plugins.astro, page solutions/ionic-enterprise-plugins.astro. 메시지 키 `appflow_plugins_or` (Appflow Plugins Or).
{
"appId": "com.example.app",
"appName": "My App",
"webDir": "dist",
"android": {
"adjustMarginsForEdgeToEdge": "auto"
}
}또는 JSON 형식으로:
설정 옵션 adjustMarginsForEdgeToEdge The
1. "auto" 옵션은 세 가지 값을 받습니다:
adjustMarginsForEdgeToEdge: 'auto'(권장) 그것이 무엇을 하는지: windowOptOutEdgeToEdgeEnforcement 자동으로 Android 15+와 설정을 확인하고, 장치 및 설정에 따라 자동으로 여백을 조정합니다.
최적의 선택: 대부분의 프로덕션 앱은 지원되는 기기에서 edge-to-edge를 유지하면서 오래된 안드로이드 버전과 호환성을 유지하고 싶습니다.
2. "force"
adjustMarginsForEdgeToEdge: 'force'이것이 무엇을 하는지: edge-to-edge를 유지하기 위해 안드로이드 버전이나 다른 설정과 관계없이 margin 조정을 강제합니다.
최적의 선택: 모든 지원되는 안드로이드 버전에서 edge-to-edge 동작을 원하는 앱입니다.
3. "disable"
adjustMarginsForEdgeToEdge: 'disable'이것이 무엇을 하는지: 자동 margin 조정 완전히 비활성화합니다.
최적의 선택: edge-to-edge 레이아웃을 수동으로 처리하거나 edge-to-edge 동작을 원하지 않는 앱입니다.
주의: 현재 "disable" 은 기본값이지만 __CAPGO_KEEP_0__ 8에서 변경될 것입니다. "auto" in Capacitor 8.
Why This Matters for Android 15+
Android 15부터 Google은 Edge-to-Edge Display를 기본 동작으로 강제합니다. Edge-to-Edge 레이아웃을 적절하게 처리하지 않는 앱은 다음과 같은 UI 문제를 겪을 수 있습니다.
- 시스템 바 뒤에 콘텐츠가 숨겨짐
- 어색한 간격과 패딩
- 디바이스 간 일관성이 없는 외관
- 사용자 경험의 저하
official adjustMarginsForEdgeToEdge config를 사용하여 이러한 변경 사항을 적절하게 처리할 수 있습니다. custom code 없이.
Complete Example
다음은 현대 Capacitor 앱의 완전한 예제 구성입니다.
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'My Awesome App',
webDir: 'www',
server: {
androidScheme: 'https'
},
android: {
// Enable edge-to-edge automatically on supported devices
adjustMarginsForEdgeToEdge: 'auto',
// Other Android config options...
backgroundColor: '#ffffff'
}
};
export default config;CSS 고려 사항
엣지 투 엣지 디스플레이를 사용할 때, 시스템 바를 처리하는 CSS를 추가해야 할 수 있습니다:
/* Add padding for system bars */
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* Or use viewport-fit */
meta[name="viewport"] {
content: "width=device-width, initial-scale=1, viewport-fit=cover";
}설정 테스트
설정을 완료한 후 adjustMarginsForEdgeToEdge, 앱을 테스트하세요:
- Android 15 이상 기기 - 시스템 바를 올바르게 존중하는지 확인하세요
- 오래된 Android 버전 - 이전 호환성을 보장하세요
- 다양한 화면 크기 - 다양한 기기에서 레이아웃이 작동하는지 확인하세요
- 라이트 및 다크 테마 - 테스트 모드 둘 다
일반적인 실수를 피하는 방법
이것을 위해 플러그인을 사용하지 마세요
Capacitor Edge to Edge Display Native Config capacitor-edge-to-edge Capacitor Edge to Edge Display Native Config adjustMarginsForEdgeToEdge, or similar. Native config이 이 문제를 깨끗하게 처리합니다. 시스템 창 크기를 세밀하게 제어해야 하는 경우 @capgo/capacitor-navigation-bar를 활성화하고 그리고 @capgo/home-indicator complement the native config without replacing it.
이것을 위해 수동 구현과 혼합하지 마세요
Capacitor Edge to Edge Display Native Config adjustMarginsForEdgeToEdge이것을 사용하는 경우 수동 윈도우 인셋 처리 또는 CSS 해킹을 추가한 경우 제거하세요.
안전 영역 CSS를 잊지 마세요
config는 여백 조정을 처리하지만, 올바른 콘텐츠 패딩을 위해 CSS 안전 영역 인셋을 사용해야 합니다.
이동 안내서
현재 에지 투 에지 플러그인 또는 해킹을 사용하고 있다면:
- 플러그인을 제거하세요 의존성에서 제거하세요
- config 옵션을 추가하세요 의
capacitor.config.ts - 프로젝트를 다시 빌드하세요 Android
- 적절한 장치에서 테스트하세요 __CAPGO_KEEP_0__
# Clean the Android project
npx cap sync android
cd android
./gradlew clean
cd ..
# Rebuild
npx cap copy android
npx cap open android미래를 위한 준비
Capacitor 8을 기본값으로 설정하면 "auto" 준비를 위해:
- 테스트를 위해
"auto"현재 이전 버전에서 발생할 수 있는 문제를 미리 발견하기 위해 - 안전한 영역을 처리하는 CSS를 업데이트하세요 엣지 투 엣지 디바이스에서 레이아웃을 검토하세요
- 추가 리소스 공식 __CAPGO_KEEP_0__ 구성 문서
__CAPGO_KEEP_0__
Conclusion
Capacitor의 Edge-to-edge display는 플러그인, 해킹, 복잡한 해결책이 필요하지 않습니다. adjustMarginsForEdgeToEdge __CAPGO_KEEP_0__의 구성 옵션은 공식적으로 지원되고 미래에 안전한 깨끗한 솔루션을 제공합니다.
__CAPGO_KEEP_0__에서 시작하여 "auto" 대부분의 앱에 대해 장치별로 철저히 테스트하고 적절한 안전 영역 CSS를 추가하세요.
__CAPGO_KEEP_0__는 Android 15 이상을 위해 앱을 준비하는 데 최소한의 노력만 필요합니다. The Capacitor community and __CAPGO_KEEP_0__ 커뮤니티와 공식 문서
Capacitor의 Edge-to-Edge Display Without Plugins
Edge-to-Edge Display를 사용하는 경우 플러그인 없이 Capacitor에서 Edge-to-Edge Display를 사용하는 방법 __CAPGO_KEEP_0__와 Edge-to-Edge Display를 연결하는 방법 capgo/capacitor-live-activities를 사용하여 capgo/capacitor-live-activities의 네이티브 기능 capgo/capacitor-live-activities를 사용하여 capgo/capacitor-live-activities의 구현 세부 정보 capgo/capacitor-live-activities capgo/capacitor-live-activities를 사용하여 capgo/capacitor-live-activities의 네이티브 기능 capgo/capacitor-video-player를 사용하여 capgo/capacitor-video-player의 네이티브 기능 capgo/capacitor-video-player를 사용하여 capgo/capacitor-video-player의 구현 세부 정보 capgo/capacitor-video-player capgo/capacitor-video-player를 사용하여 capgo/capacitor-video-player의 구현 세부 정보 capgo/capacitor-native-navigation을 사용하여 capgo/capacitor-native-navigation의 네이티브 기능 native capability in Using @capgo/capacitor-native-navigation.
