λ€μν κΈ°κΈ°μμ λ°μν μΉ κ°λ°κ³Ό ν₯μλ μ¬μ©μ κ²½νμ μν΄ λ μ΄μμ λ·°ν¬νΈ μ 보μ μ κ·Όνκ³ νμ©νλ λ° μ€μ μ λ Visual Viewport API μ’ ν© κ°μ΄λμ λλ€.
Visual Viewport API μμ μ 볡: λ μ΄μμ λ·°ν¬νΈ μ 보 νν€μΉκΈ°
Visual Viewport APIλ μ§μ μΌλ‘ λ°μνκ³ μ μ κ°λ₯ν μΉ κ²½νμ λ§λ€κ³ μ νλ μΉ κ°λ°μμκ² κ°λ ₯ν λꡬμ λλ€. μ΄ APIλ₯Ό μ¬μ©νλ©΄ νμ¬ μ¬μ©μμκ² λ³΄μ΄λ μΉ νμ΄μ§ λΆλΆμΈ μκ°μ λ·°ν¬νΈμ νλ‘κ·Έλλ° λ°©μμΌλ‘ μ κ·Όνκ³ μ‘°μν μ μμ΅λλ€. μκ°μ λ·°ν¬νΈ μ체λ μ§μ 보μ΄λ μμμ΄μ§λ§, μ΄ APIλ νμ¬ νλ©΄ λ°μ μλ μμμ ν¬ν¨νμ¬ μ 체 μΉ νμ΄μ§λ₯Ό λνλ΄λ λ μ΄μμ λ·°ν¬νΈμ λν μ€μν μ 보λ μ 곡ν©λλ€. λ μ΄μμ λ·°ν¬νΈλ₯Ό μ΄ν΄νλ κ²μ λ§μ κ³ κΈ μΉ κ°λ° κΈ°μ , νΉν λͺ¨λ°μΌ κΈ°κΈ° λ° λ€μν νλ©΄ ν¬κΈ°λ₯Ό λ€λ£° λ νμμ μ λλ€.
λ μ΄μμ λ·°ν¬νΈλ 무μμΈκ°?
λ μ΄μμ λ·°ν¬νΈλ κ°λ μ μΌλ‘ μΉ νμ΄μ§κ° λ λλ§λλ μ 체 μΊλ²μ€μ λλ€. νΉν λͺ¨λ°μΌ κΈ°κΈ°μμλ μΌλ°μ μΌλ‘ μκ°μ λ·°ν¬νΈλ³΄λ€ ν½λλ€. λΈλΌμ°μ λ λ μ΄μμ λ·°ν¬νΈλ₯Ό μ¬μ©νμ¬ νμ΄μ§μ μ΄κΈ° ν¬κΈ°μ λ°°μ¨μ κ²°μ ν©λλ€. νλ/μΆμλ μ€ν¬λ‘€μ΄ μ μ©λκΈ° μ μ κΈ°λ³Έ λ¬Έμ ν¬κΈ°λΌκ³ μκ°νλ©΄ λ©λλ€. λ°λ©΄μ μκ°μ λ·°ν¬νΈλ μ¬μ©μκ° λ μ΄μμ λ·°ν¬νΈλ₯Ό 보λ μ°½μ λλ€.
μκ°μ λ·°ν¬νΈμ λ μ΄μμ λ·°ν¬νΈμ κ΄κ³λ HTMLμ λ·°ν¬νΈ λ©ν νκ·Έμ μν΄ μ μλ©λλ€. μ¬λ°λ₯΄κ² ꡬμ±λ λ·°ν¬νΈ λ©ν νκ·Έκ° μμΌλ©΄ λͺ¨λ°μΌ λΈλΌμ°μ λ μΉμ¬μ΄νΈλ₯Ό ν¨μ¬ μμ νλ©΄μ©μΌλ‘ μ€κ³λ κ²μ²λΌ λ λλ§νμ¬ μ¬μ©μκ° μ½ν μΈ λ₯Ό μ½κΈ° μν΄ νλν΄μΌ ν μ μμ΅λλ€. μ΄λ μ’μ§ μμ μ¬μ©μ κ²½νμΌλ‘ μ΄μ΄μ§λλ€.
μλ₯Ό λ€μ΄, λ μ΄μμ λ·°ν¬νΈ λλΉκ° 980ν½μ λ‘ μ€κ³λ μΉμ¬μ΄νΈλ₯Ό μκ°ν΄ 보μΈμ. 물리μ νλ©΄ λλΉκ° 375ν½μ μΈ λͺ¨λ°μΌ κΈ°κΈ°μμ λΈλΌμ°μ λ μ΄κΈ°μ νμ΄μ§λ₯Ό 980ν½μ λλΉ νλ©΄μμ 보λ κ²μ²λΌ λ λλ§ν μ μμ΅λλ€. κ·Έλ¬λ©΄ μ¬μ©μλ μ½ν μΈ λ₯Ό λͺ ννκ² λ³΄κΈ° μν΄ νλν΄μΌ ν©λλ€. Visual Viewport APIλ₯Ό μ¬μ©νλ©΄ λ λ·°ν¬νΈμ ν¬κΈ°μ μμΉμ μ κ·Όν μ μμΌλ―λ‘, μ¬μ©μ κΈ°κΈ°μ μ΅μ νλλλ‘ λ μ΄μμκ³Ό μ€νμΌμ λμ μΌλ‘ μ‘°μ ν μ μμ΅λλ€.
Visual Viewport APIλ‘ λ μ΄μμ λ·°ν¬νΈ μ 보 μ κ·ΌνκΈ°
Visual Viewport APIλ λ μ΄μμ λ·°ν¬νΈμ λν μ 보λ₯Ό κ²μν μ μλ μ¬λ¬ μμ±μ μ 곡ν©λλ€. μ΄ μμ±λ€μ window.visualViewport κ°μ²΄λ₯Ό ν΅ν΄ μ¬μ©ν μ μμ΅λλ€(μ¬μ©νκΈ° μ μ λΈλΌμ°μ μ§μ μ¬λΆλ₯Ό νμΈνμΈμ):
offsetLeft: λ μ΄μμ λ·°ν¬νΈμ μΌμͺ½ κ°μ₯μ리μμ μκ°μ λ·°ν¬νΈμ μΌμͺ½ κ°μ₯μ리κΉμ§μ 거리(CSS ν½μ λ¨μ).offsetTop: λ μ΄μμ λ·°ν¬νΈμ μμͺ½ κ°μ₯μ리μμ μκ°μ λ·°ν¬νΈμ μμͺ½ κ°μ₯μ리κΉμ§μ 거리(CSS ν½μ λ¨μ).pageLeft: νμ΄μ§ μμ μ κΈ°μ€μΌλ‘ ν μκ°μ λ·°ν¬νΈ μΌμͺ½ κ°μ₯μ리μ x μ’ν(CSS ν½μ λ¨μ). μ°Έκ³ : μ΄ κ°μλ μ€ν¬λ‘€μ΄ ν¬ν¨λ μ μμ΅λλ€.pageTop: νμ΄μ§ μμ μ κΈ°μ€μΌλ‘ ν μκ°μ λ·°ν¬νΈ μμͺ½ κ°μ₯μ리μ y μ’ν(CSS ν½μ λ¨μ). μ°Έκ³ : μ΄ κ°μλ μ€ν¬λ‘€μ΄ ν¬ν¨λ μ μμ΅λλ€.width: μκ°μ λ·°ν¬νΈμ λλΉ(CSS ν½μ λ¨μ).height: μκ°μ λ·°ν¬νΈμ λμ΄(CSS ν½μ λ¨μ).scale: νμ¬ νλ/μΆμ λΉμ¨. κ°μ΄ 1μ΄λ©΄ νλ/μΆμ μμμ λνλ λλ€. 1λ³΄λ€ ν° κ°μ νλ, 1λ³΄λ€ μμ κ°μ μΆμλ₯Ό λνλ λλ€.
μ΄λ¬ν μμ±λ€μ *μκ°μ * λ·°ν¬νΈμ μ§μ μ μΌλ‘ κ΄λ ¨μ΄ μμ§λ§, μκ°μ λ·°ν¬νΈμ λ μ΄μμ λ·°ν¬νΈ κ°μ κ΄κ³λ₯Ό μ΄ν΄νλ λ° λ§€μ° μ€μν©λλ€. scale, offsetLeft, offsetTopμ μλ©΄ μκ°μ λ·°ν¬νΈμ λν λ μ΄μμ λ·°ν¬νΈμ μ 체 ν¬κΈ°μ μμΉμ λν μ 보λ₯Ό μΆλ‘ ν μ μμ΅λλ€. μλ₯Ό λ€μ΄, λ€μ 곡μμ μ¬μ©νμ¬ λ μ΄μμ λ·°ν¬νΈμ ν¬κΈ°λ₯Ό κ³μ°ν μ μμ΅λλ€(λ¨, μ΄λ *κ·Όμ¬μΉ*μμ μ μνμΈμ):
layoutViewportWidth = visualViewport.width / visualViewport.scale;
layoutViewportHeight = visualViewport.height / visualViewport.scale;
μ΄ κ³μ°μ κ·Όμ¬μΉμ΄λ©° λΈλΌμ°μ ꡬν λ° κΈ°ν μμΈμΌλ‘ μΈν΄ μλ²½νκ² μ ννμ§ μμ μ μμμ λͺ
μ¬νμΈμ. λ μ΄μμ λ·°ν¬νΈμ μ νν ν¬κΈ°λ₯Ό μν΄μλ `document.documentElement.clientWidth` λ° `document.documentElement.clientHeight`λ₯Ό μ¬μ©νμΈμ.
μ€μ©μ μΈ μμ λ° μ¬μ© μ¬λ‘
λ μ΄μμ λ·°ν¬νΈ μ 보λ₯Ό μ΄ν΄νλ κ²μ΄ λ§€μ° μ μ©ν λͺ κ°μ§ μ€μ μλ리μ€λ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€:
1. λμ μ½ν μΈ μ€μΌμΌλ§ λ° μ μ
ν° μ΄λ―Έμ§λ λνν μ§λλ₯Ό νμν΄μΌ νλ μΉ μ ν리μΌμ΄μ
μ ꡬμΆνλ€κ³ μμν΄ λ³΄μΈμ. κΈ°κΈ°λ νλ/μΆμ μμ€μ κ΄κ³μμ΄ μ½ν
μΈ κ° νμ 보μ΄λ νλ©΄ μμμ λ§λλ‘ νκ³ μΆμ κ²μ
λλ€. μκ°μ λ·°ν¬νΈμ width, height, scale μμ±μ μ κ·Όνμ¬ μ½ν
μΈ μ ν¬κΈ°μ μμΉλ₯Ό λμ μΌλ‘ μ‘°μ νμ¬ μ€λ²νλ‘λ μλ¦Όμ λ°©μ§ν μ μμ΅λλ€. μ΄λ λ λλ§μ JavaScriptλ₯Ό λ§μ΄ μ¬μ©νλ λ¨μΌ νμ΄μ§ μ ν리μΌμ΄μ
(SPA)μ νΉν μ€μν©λλ€.
μμ :
function adjustContent() {
if (!window.visualViewport) return;
const visualViewportWidth = window.visualViewport.width;
const visualViewportHeight = window.visualViewport.height;
const visualViewportScale = window.visualViewport.scale;
const contentElement = document.getElementById('myContent');
// μκ°μ λ·°ν¬νΈλ₯Ό κΈ°λ°μΌλ‘ μνλ λλΉμ λμ΄ κ³μ°
const desiredWidth = visualViewportWidth / visualViewportScale;
const desiredHeight = visualViewportHeight / visualViewportScale;
// μ€νμΌ μ μ©
contentElement.style.width = desiredWidth + 'px';
contentElement.style.height = desiredHeight + 'px';
}
// μ΄κΈ° λ‘λ μ λ° μκ°μ λ·°ν¬νΈ λ³κ²½ μ adjustContent νΈμΆ
adjustContent();
window.visualViewport.addEventListener('resize', adjustContent);
μ΄ μ½λ μ€λν«μ μκ°μ λ·°ν¬νΈμ ν¬κΈ°μ λ°°μ¨μ κ²μνκ³ μ΄λ₯Ό μ¬μ©νμ¬ μ½ν
μΈ μμμ μνλ λλΉμ λμ΄λ₯Ό κ³μ°ν©λλ€. κ·Έλ° λ€μ μ΄ μ€νμΌμ μμμ μ μ©νμ¬ νμ 보μ΄λ νλ©΄ μμμ λ§λλ‘ ν©λλ€. resize μ΄λ²€νΈ 리μ€λλ μκ°μ λ·°ν¬νΈκ° λ³κ²½λ λλ§λ€(μ: νλ/μΆμ λλ λ°©ν₯ λ³κ²½μΌλ‘ μΈν΄) μ½ν
μΈ κ° λ€μ μ‘°μ λλλ‘ ν©λλ€.
2. μ¬μ©μ μ§μ νλ/μΆμ κΈ°λ₯ ꡬν
λΈλΌμ°μ λ λ΄μ₯λ νλ/μΆμ κΈ°λ₯μ μ 곡νμ§λ§, λ³΄λ€ λ§μΆ€νλ μ¬μ©μ κ²½νμ μν΄ μ¬μ©μ μ§μ νλ/μΆμ 컨νΈλ‘€μ ꡬννκ³ μΆμ μ μμ΅λλ€. μλ₯Ό λ€μ΄, νΉμ μ¦λΆμΌλ‘ νλλλ νλ/μΆμ λ²νΌμ λ§λ€κ±°λ νλ/μΆμ μ¬λΌμ΄λλ₯Ό ꡬνν μ μμ΅λλ€. Visual Viewport APIλ₯Ό μ¬μ©νλ©΄ νλ/μΆμ μμ€(scale)μ νλ‘κ·Έλλ° λ°©μμΌλ‘ μ κ·Όνκ³ μ‘°μν μ μμ΅λλ€.
μμ :
function zoomIn() {
if (!window.visualViewport) return;
const currentScale = window.visualViewport.scale;
const newScale = currentScale + 0.2; // 20% νλ
// μ΅λ νλ μμ€ μ ν
if (newScale <= 5) {
window.visualViewport.scale = newScale;
}
}
function zoomOut() {
if (!window.visualViewport) return;
const currentScale = window.visualViewport.scale;
const newScale = currentScale - 0.2; // 20% μΆμ
// μ΅μ μΆμ μμ€ μ ν
if (newScale >= 0.2) {
window.visualViewport.scale = newScale;
}
}
// νλ/μΆμ λ²νΌμ μ΄ ν¨μλ€ μ°κ²°
document.getElementById('zoomInButton').addEventListener('click', zoomIn);
document.getElementById('zoomOutButton').addEventListener('click', zoomOut);
μ΄ μ½λ μ€λν«μ νλ/μΆμ μμ€μ κ³ μ λ μλ§νΌ λ리거λ μ€μ΄λ λ ν¨μ zoomInκ³Ό zoomOutμ μ μν©λλ€. λν μ¬μ©μκ° λ무 λ§μ΄ νλνκ±°λ μΆμνλ κ²μ λ°©μ§νκΈ° μν μ νλ ν¬ν¨ν©λλ€. μ΄ ν¨μλ€μ λ²νΌμ μ°κ²°λμ΄ μ¬μ©μκ° μ¬μ©μ μ§μ 컨νΈλ‘€μ ν΅ν΄ νλ/μΆμ μμ€μ μ μ΄ν μ μλλ‘ ν©λλ€.
3. μ§λ λ° κ²μμ μν λͺ°μ ν κ²½ν μ μ
μΉ κΈ°λ° μ§λ λ° κ²μμ μ’ μ’ λ·°ν¬νΈ λ° μ€μΌμΌλ§μ λν μ λ°ν μ μ΄κ° νμν©λλ€. Visual Viewport APIλ μ¬μ©μ μνΈ μμ©μ λ°λΌ λ·°ν¬νΈλ₯Ό λμ μΌλ‘ μ‘°μ ν μ μλλ‘ νμ¬ λͺ°μ ν κ²½νμ λ§λλ λ° νμν λꡬλ₯Ό μ 곡ν©λλ€. μλ₯Ό λ€μ΄, μ§λ μ ν리μΌμ΄μ μμλ μ¬μ©μκ° νλ©΄μ μ€ν¬λ‘€νκ±°λ νμΉν λ APIλ₯Ό μ¬μ©νμ¬ μ§λλ₯Ό λΆλλ½κ² νλ λ° μΆμν μ μμ΅λλ€.
4. κ³ μ μμΉ μμ κ΄λ¦¬
position: fixedμΈ μμλ λ·°ν¬νΈλ₯Ό κΈ°μ€μΌλ‘ μμΉν©λλ€. μ¬μ©μκ° νλνλ©΄ μκ°μ λ·°ν¬νΈλ μ€μ΄λ€μ§λ§, CSSλ§ μ¬μ©νλ κ²½μ° κ³ μ λ μμκ° μ¬λ°λ₯΄κ² μ‘°μ λμ§ μμ μ μμ΅λλ€. Visual Viewport APIλ κ³ μ λ μμμ μμΉμ ν¬κΈ°λ₯Ό μ‘°μ νμ¬ μκ°μ λ·°ν¬νΈμ μΌκ΄μ±μ μ μ§νλλ‘ λμΈ μ μμ΅λλ€.
5. λͺ¨λ°μΌ κΈ°κΈ°μμμ ν€λ³΄λ λ¬Έμ ν΄κ²°
λͺ¨λ°μΌ κΈ°κΈ°μμλ ν€λ³΄λλ₯Ό μ¬λ¦¬λ©΄ μ’
μ’
μκ°μ λ·°ν¬νΈμ ν¬κΈ°κ° μ‘°μ λμ΄ μ
λ ₯ νλλ λ€λ₯Έ μ€μν UI μμλ₯Ό κ°λ¦΄ μ μμ΅λλ€. μκ°μ λ·°ν¬νΈμ resize μ΄λ²€νΈλ₯Ό μμ νμ¬ ν€λ³΄λκ° νμλ λλ₯Ό κ°μ§νκ³ κ·Έμ λ°λΌ λ μ΄μμμ μ‘°μ νμ¬ μ
λ ₯ νλκ° κ³μ 보μ΄λλ‘ ν μ μμ΅λλ€. μ΄λ λͺ¨λ°μΌ κΈ°κΈ°μμ μννκ³ μ¬μ©μ μΉνμ μΈ κ²½νμ μ 곡νλ λ° λ§€μ° μ€μν©λλ€. μ΄λ λν WCAG κ°μ΄λλΌμΈμ μ€μνλ λ° νμμ μ
λλ€.
μμ :
window.visualViewport.addEventListener('resize', () => {
const keyboardVisible = window.visualViewport.height < window.innerHeight;
if (keyboardVisible) {
// μ
λ ₯ νλκ° λ³΄μ΄λλ‘ λ μ΄μμ μ‘°μ
document.getElementById('myInputField').scrollIntoView();
} else {
// λ μ΄μμ μ‘°μ λλ리기
}
});
μ΄ μμ λ μκ°μ λ·°ν¬νΈ λμ΄κ° μ°½ λμ΄λ³΄λ€ μμμ§ νμΈνμ¬ ν€λ³΄λκ° νμλ κ°λ₯μ±μ΄ μλμ§ νμΈν©λλ€. κ·Έλ° λ€μ scrollIntoView() λ©μλλ₯Ό μ¬μ©νμ¬ μ
λ ₯ νλλ₯Ό λ·°λ‘ μ€ν¬λ‘€νμ¬ ν€λ³΄λμ κ°λ €μ§μ§ μλλ‘ ν©λλ€. ν€λ³΄λκ° μ¬λΌμ§λ©΄ λ μ΄μμ μ‘°μ μ λλ릴 μ μμ΅λλ€.
λΈλΌμ°μ μ§μ λ° κ³ λ € μ¬ν
Visual Viewport APIλ μ΅μ λΈλΌμ°μ μμ μ μ§μλ©λλ€. κ·Έλ¬λ μ½λμμ μ¬μ©νκΈ° μ μ λΈλΌμ°μ μ§μ μ¬λΆλ₯Ό νμΈνλ κ²μ΄ μ€μν©λλ€. window.visualViewport κ°μ²΄κ° μ‘΄μ¬νλμ§ νμΈνμ¬ μ΄λ₯Ό μνν μ μμ΅λλ€. APIκ° μ§μλμ§ μλ κ²½μ°, λ―Έλμ΄ μΏΌλ¦¬λ window.innerWidth λ° window.innerHeightμ κ°μ λ체 κΈ°μ μ μ¬μ©νμ¬ λΉμ·ν κ²°κ³Όλ₯Ό μ»μ μ μμ§λ§, μ΄λ¬ν λ°©λ²μ μ λ°νμ§ μμ μ μμ΅λλ€.
μμ :
if (window.visualViewport) {
// Visual Viewport API μ¬μ©
} else {
// λ체 κΈ°μ μ¬μ©
}
λν Visual Viewport API μ¬μ©μ μ μ¬μ μΈ μ±λ₯ μν₯μ μΈμ§νλ κ²μ΄ μ€μν©λλ€. λ·°ν¬νΈ μμ±μ μ κ·Όνκ³ λ·°ν¬νΈ λ³κ²½μ λ°μνλ©΄ λ μ΄μμ 리νλ‘μ°κ° λ°μν μ μμΌλ©°, μ΄λ νΉν λͺ¨λ°μΌ κΈ°κΈ°μμ μ±λ₯μ μν₯μ μ€ μ μμ΅λλ€. λΆνμν 리νλ‘μ°λ₯Ό μ΅μννκ³ μνν μ¬μ©μ κ²½νμ 보μ₯νλλ‘ μ½λλ₯Ό μ΅μ ννμΈμ. λλ°μ΄μ±μ΄λ μ€λ‘νλ§κ³Ό κ°μ κΈ°μ μ μ¬μ©νμ¬ μ λ°μ΄νΈ λΉλλ₯Ό μ ννλ κ²μ κ³ λ €νμΈμ.
μ κ·Όμ± κ³ λ € μ¬ν
Visual Viewport APIλ₯Ό μ¬μ©ν λ μ κ·Όμ±μ κ³ λ €νλ κ²μ΄ νμμ μ λλ€. κΈ°κΈ°λ νλ/μΆμ μμ€μ κ΄κ³μμ΄ μ₯μ κ° μλ μ¬μ©μκ° μΉμ¬μ΄νΈλ₯Ό κ³μ μ¬μ©νκ³ μ κ·Όν μ μλλ‘ νμΈμ. μκ°μ λ¨μμλ§ μμ‘΄νμ§ λ§κ³ μ¬μ©μκ° μ½ν μΈ μ μνΈ μμ©ν μ μλ λ체 λ°©λ²μ μ 곡νμΈμ. μλ₯Ό λ€μ΄, μ¬μ©μ μ§μ νλ/μΆμ 컨νΈλ‘€μ μ¬μ©νλ κ²½μ°, λ§μ°μ€λ₯Ό μ¬μ©ν μ μλ μ¬μ©μκ° μ κ·Όν μ μλλ‘ ν€λ³΄λ λ¨μΆν€λ ARIA μμ±μ μ 곡νμΈμ. λ·°ν¬νΈ λ©ν νκ·Έμ Visual Viewport APIλ₯Ό μ¬λ°λ₯΄κ² μ¬μ©νλ©΄ μ μλ ₯ μ¬μ©μκ° λ μ΄μμμ κΉ¨μ§ μκ³ νλν μ μλλ‘ νμ¬ κ°λ μ±μ ν₯μμν¬ μ μμ΅λλ€.
κ΅μ ν λ° νμ§ν
λ€μν μΈμ΄μ λ‘μΌμΌμ΄ μΉμ¬μ΄νΈμ λ μ΄μμκ³Ό λ°μμ±μ λ―ΈμΉλ μν₯μ κ³ λ €νμΈμ. ν μ€νΈ κΈΈμ΄λ μΈμ΄λ§λ€ ν¬κ² λ€λ₯Ό μ μμΌλ©°, μ΄λ νμ΄μ§ μμμ ν¬κΈ°μ μμΉμ μν₯μ μ€ μ μμ΅λλ€. μ μ°ν λ μ΄μμκ³Ό λ°μν λμμΈ κΈ°μ μ μ¬μ©νμ¬ μΉμ¬μ΄νΈκ° λ€μν μΈμ΄μ λ§κ² μ μ ν μ‘°μ λλλ‘ νμΈμ. Visual Viewport APIλ μΈμ΄λ³ ν μ€νΈ λ λλ§μΌλ‘ μΈν λ·°ν¬νΈ ν¬κΈ° λ³κ²½μ κ°μ§νκ³ κ·Έμ λ°λΌ λ μ΄μμμ μ‘°μ νλ λ° μ¬μ©ν μ μμ΅λλ€.
μλ₯Ό λ€μ΄, λ μΌμ΄μ κ°μ μΈμ΄μμλ λ¨μ΄κ° λ κΈ΄ κ²½ν₯μ΄ μμ΄ μ¬λ°λ₯΄κ² μ²λ¦¬νμ§ μμΌλ©΄ λ μ΄μμ λ¬Έμ λ₯Ό μΌμΌν¬ μ μμ΅λλ€. μλμ΄λ νλΈλ¦¬μ΄μ κ°μ μ€λ₯Έμͺ½μμ μΌμͺ½(RTL) μΈμ΄μμλ μ 체 λ μ΄μμμ λ―Έλ¬λ§ν΄μΌ ν©λλ€. μ½λκ° μ μΈκ³ μ¬μ©μλ₯Ό μ§μν μ μλλ‘ μ μ νκ² κ΅μ ν λ° νμ§νλμλμ§ νμΈνμΈμ.
λͺ¨λ² μ¬λ‘ λ° ν
- λΈλΌμ°μ μ§μ νμΈ: Visual Viewport APIλ₯Ό μ¬μ©νκΈ° μ μ νμ μ§μ μ¬λΆλ₯Ό νμΈνμΈμ.
- μ±λ₯ μ΅μ ν: μ±λ₯ λ¬Έμ λ₯Ό νΌνκΈ° μν΄ λΆνμν λ μ΄μμ 리νλ‘μ°λ₯Ό μ΅μννμΈμ.
- μ κ·Όμ± κ³ λ €: μ₯μ κ° μλ μ¬μ©μκ° μΉμ¬μ΄νΈμ κ³μ μ κ·Όν μ μλλ‘ νμΈμ.
- λ€μν κΈ°κΈ°μμ ν μ€νΈ: λ€μν κΈ°κΈ°μ νλ©΄ ν¬κΈ°μμ μΉμ¬μ΄νΈλ₯Ό ν μ€νΈνμ¬ μ§μ μΌλ‘ λ°μνμΈμ§ νμΈνμΈμ.
- λλ°μ΄μ± λ° μ€λ‘νλ§ μ¬μ©: μ±λ₯ ν₯μμ μν΄ μ λ°μ΄νΈ λΉλλ₯Ό μ ννμΈμ.
- μ¬μ©μ κ²½ν μ°μ : Visual Viewport APIλ₯Ό μ¬μ©ν λ νμ μ¬μ©μ κ²½νμ μΌλμ λμΈμ.
κ²°λ‘
Visual Viewport APIλ λ°μν λ° μ μν μΉ κ²½νμ ꡬμΆνκΈ° μν κ°λ ₯ν λꡬ λͺ¨μμ μ 곡ν©λλ€. λ μ΄μμ λ·°ν¬νΈλ₯Ό μ΄ν΄νκ³ APIμ μμ±μ νμ©ν¨μΌλ‘μ¨ λͺ¨λ κΈ°κΈ°μμ λ©μ§κ² 보μ΄κ³ μλ²½νκ² μλνλ μΉμ¬μ΄νΈλ₯Ό λ§λ€ μ μμ΅λλ€. APIλ₯Ό μ¬μ©ν λ λΈλΌμ°μ μ§μ, μ±λ₯, μ κ·Όμ± λ° κ΅μ νλ₯Ό κ³ λ €νμ¬ μΉμ¬μ΄νΈκ° μ μΈκ³ λͺ¨λ μ¬μ©μμκ² κΈμ μ μΈ κ²½νμ μ 곡νλλ‘ νμΈμ. APIλ₯Ό μ€ννκ³ , κ·Έ κΈ°λ₯μ νμνλ©°, λ§€λ ₯μ μ΄κ³ λͺ°μ κ° μλ μΉ μ ν리μΌμ΄μ μ λ§λ€κΈ° μν μλ‘μ΄ κ°λ₯μ±μ μ΄μ΄λ³΄μΈμ.
μΆκ° νꡬ: μ€ν¬λ‘€ μ΄λ²€νΈ, ν°μΉ μ΄λ²€νΈ, λ€λ₯Έ μΉ APIμμ ν΅ν©κ³Ό κ°μ λ€λ₯Έ λ·°ν¬νΈ API κΈ°λ₯μ νμν΄ λ³΄μΈμ.