CSS 뷰포트 규칙: 글로벌 웹 경험을 위한 모바일 뷰포트 제어 마스터하기

수십억 명의 사용자가 주로 모바일 장치를 통해 인터넷에 접속하는 오늘날 상호 연결된 세상에서, 수많은 화면 크기와 해상도 전반에 걸쳐 일관되고 최적화된 사용자 경험을 보장하는 것은 단순한 장점이 아니라 절대적인 필수 사항입니다. 모바일 웹은 컴팩트한 스마트폰부터 더 큰 태블릿에 이르기까지 다양한 환경을 제공하며, 각 환경은 디자이너와 개발자에게 고유한 과제를 제시합니다. 진정으로 적응 가능하고 사용자 친화적인 경험을 제공하는 핵심에는 CSS 뷰포트 규칙에 대한 비판적인 이해와 구현이 있습니다. 이 기본 개념은 반응형 웹 디자인의 초석 역할을 하며 모바일 장치에서 웹 콘텐츠가 렌더링되고 확장되는 방식을 결정합니다.

적절한 뷰포트 제어 없이는 웹사이트가 모바일 화면에서 매우 작거나 읽기 어렵거나 탐색하기 어려워 높은 이탈률과 사용자 경험 저하로 이어질 수 있습니다. 도쿄, 베를린, 상파울루에 있는 고객이 해당 휴대기기에 맞게 최적화되지 않은 웹사이트 때문에 제품 이미지를 보거나 거래를 완료하는 데 어려움을 겪는 글로벌 전자 상거래 플랫폼을 상상해 보십시오. 이러한 시나리오는 모바일 뷰포트 제어를 마스터하는 것의 중요성을 강조합니다. 이 포괄적인 가이드에서는 CSS 뷰포트 규칙의 메커니즘을 깊이 파고들어, 속성, 실제 적용 사례, 일반적인 문제 및 모범 사례를 탐구하여 진정으로 강력하고 전역적으로 접근 가능한 웹 애플리케이션을 구축할 수 있도록 지원할 것입니다.

뷰포트 이해하기: 모바일 웹의 캔버스

뷰포트를 효과적으로 제어하기 전에 그것이 실제로 무엇을 나타내는지 이해하는 것이 중요합니다. 데스크톱 컴퓨터에서는 뷰포트가 일반적으로 간단합니다. 즉, 브라우저 창 자체입니다. 그러나 모바일 환경은 전통적인 모니터와 비교하여 물리적 화면 크기 및 해상도의 상당한 차이로 인해 복잡한 계층을 도입합니다.

뷰포트란 무엇인가?

개념적으로 뷰포트는 장치 화면에서 웹 페이지의 보이는 영역입니다. 사용자가 콘텐츠를 보는 "창"입니다. 일반적으로 사용자가 브라우저를 다시 크기 조정하여 제어하는 데스크톱 브라우저와 달리, 모바일 장치에서는 브라우저가 기본적으로 "데스크톱과 같은" 환경을 제공하려고 시도하며, 이는 사용자 경험에 역효과를 낼 수 있습니다. 이를 이해하기 위해 두 가지 중요한 뷰포트 유형인 레이아웃 뷰포트와 시각 뷰포트를 구별해야 합니다.

레이아웃 뷰포트 대 시각 뷰포트

더 큰 데스크톱 화면을 위해 디자인된 웹 사이트를 수용하기 위해 초기 모바일 브라우저는 "레이아웃 뷰포트"( "문서 뷰포트" 또는 "가상 뷰포트"라고도 함)의 개념을 도입했습니다.

• 레이아웃 뷰포트: 이것은 브라우저가 전체 웹 페이지를 렌더링하는 화면 밖의 더 큰 캔버스입니다. 기본적으로 많은 모바일 브라우저는 장치의 실제 물리적 화면 너비에 관계없이 이 레이아웃 뷰포트를 980px 또는 1024px 너비로 설정합니다. 이를 통해 브라우저는 마치 데스크톱에서처럼 페이지를 렌더링한 다음 더 작은 물리적 화면에 맞게 축소할 수 있습니다. 이렇게 하면 콘텐츠가 깨지지 않지만 텍스트가 읽을 수 없을 정도로 작거나 대화형 요소가 매우 작게 표시되어 사용자가 핀치 줌 및 가로 스크롤을 하도록 강요하는 경우가 많습니다.
• 시각 뷰포트: 이것은 레이아웃 뷰포트의 실제 보이는 부분입니다. 장치 화면에서 사용자에게 현재 보이는 직사각형 영역을 나타냅니다. 사용자가 모바일 페이지를 확대하면 레이아웃 뷰포트는 동일한 크기를 유지하지만 시각 뷰포트는 축소되어 레이아웃 뷰포트의 더 작은 부분에 집중합니다. 핀치 줌을 축소하면 시각 뷰포트가 확장되어 레이아웃 뷰포트(또는 최대 줌 수준)와 일치합니다. 여기서 핵심은 width: 100%와 같은 CSS 너비 및 미디어 쿼리가 시각 뷰포트가 아닌 레이아웃 뷰포트를 기반으로 작동한다는 것입니다. 메타 뷰포트 태그를 통해 명시적으로 구성되지 않는 한.

이 두 뷰포트 간의 불일치는 정확히 메타 뷰포트 태그가 해결하려고 하는 것이며, 개발자는 레이아웃 뷰포트를 장치의 실제 너비와 일치시켜 진정한 반응형 디자인을 가능하게 합니다.

메타 뷰포트 태그의 역할

문서의 섹션에 배치되는 HTML 태그는 모바일 장치에서 뷰포트의 동작을 제어하는 주요 메커니즘입니다. 브라우저에 레이아웃 뷰포트를 설정하는 방법을 지시하고 페이지를 확장하고 렌더링하는 방법에 대한 지침을 제공합니다. 이 단일 코드 줄은 반응형 모바일 경험을 보장하는 데 가장 중요한 구성 요소라고 할 수 있습니다. 가장 일반적이고 권장되는 메타 뷰포트 태그는 다음과 같습니다.

이 중요한 메타 태그 내의 필수 속성을 자세히 살펴보겠습니다.

메타 뷰포트 태그의 주요 속성

메타 뷰포트 태그의 content 속성은 브라우저가 모바일 화면에서 웹 페이지를 해석하고 표시하는 방법을 결정하는 속성의 쉼표로 구분된 목록을 수락합니다. 각 속성을 이해하는 것은 모바일 프레젠테이션을 세밀하게 조정하는 데 필수적입니다.

width

width 속성은 레이아웃 뷰포트의 크기를 제어합니다. 반응형 디자인에서 가장 중요한 속성입니다.

• width=device-width: 이것은 가장 일반적으로 사용되고 강력히 권장되는 값입니다. 브라우저에 레이아웃 뷰포트 너비를 장치 독립 픽셀(DIP) 단위의 장치 너비로 설정하도록 지시합니다. 즉, 물리적 화면 너비가 360px인 장치(실제 픽셀 해상도가 훨씬 높더라도 DIP 단위)는 360px의 레이아웃 뷰포트를 갖게 됩니다. 이렇게 하면 CSS 픽셀 값이 장치의 효과적인 너비에 직접 정렬되어 min-width 또는 max-width를 기반으로 하는 CSS 미디어 쿼리가 장치 크기에 상대적으로 의도한 대로 작동할 수 있습니다. 예를 들어, @media (max-width: 768px) { ... }가 있는 경우 이 쿼리는 device-width가 768px 이하인 장치에서 트리거되어 태블릿 또는 모바일 스타일이 올바르게 적용되도록 합니다.
• width=[value]: 특정 픽셀 값(예: width=980)을 설정할 수도 있습니다. 이렇게 하면 이전 모바일 브라우저의 기본 동작과 유사한 고정 너비 레이아웃 뷰포트가 생성됩니다. 반응형으로 설계되지 않은 레거시 사이트에는 유용할 수 있지만 반응형 디자인의 이점을 무효화하며, 작은 화면에서 가로 스크롤 또는 극심한 확장을 유발할 가능성이 높기 때문에 최신 웹 개발에는 일반적으로 권장되지 않습니다.

initial-scale

initial-scale 속성은 페이지가 처음 로드될 때의 줌 수준을 제어합니다. 레이아웃 뷰포트 너비와 시각 뷰포트 너비 간의 비율을 지정합니다.

• initial-scale=1.0: 이것은 표준이며 권장되는 값입니다. 페이지 로드 시 시각 뷰포트가 레이아웃 뷰포트와 1:1 비율을 갖는다는 것을 의미합니다. width=device-width도 설정된 경우 이는 1 CSS 픽셀이 1 장치 독립 픽셀과 동일하도록 하여 반응형 레이아웃을 방해할 수 있는 초기 확대 또는 축소를 방지합니다. 예를 들어, 모바일 장치에 360px의 장치 너비가 있는 경우 initial-scale=1.0으로 설정하면 브라우저가 초기 확장 없이 시각 뷰포트에 정확히 360 CSS 픽셀이 맞도록 페이지를 렌더링합니다.
• initial-scale=[value]: 1.0보다 큰 값(예: initial-scale=2.0)은 처음에 확대되어 콘텐츠가 더 커 보이게 합니다. 1.0보다 작은 값(예: initial-scale=0.5)은 처음에 축소되어 콘텐츠가 더 작게 보이게 합니다. 처음부터 일관되지 않은 사용자 경험을 유발할 수 있으므로 표준 반응형 디자인에는 거의 사용되지 않습니다.

minimum-scale 및 maximum-scale

이러한 속성은 페이지가 로드된 후 사용자가 페이지에 적용할 수 있는 최소 및 최대 줌 수준을 정의합니다.

• minimum-scale=[value]: 허용되는 가장 낮은 줌 수준을 설정합니다. 예를 들어, minimum-scale=0.5는 사용자가 초기 크기의 절반으로 축소할 수 있도록 합니다.
• maximum-scale=[value]: 허용되는 가장 높은 줌 수준을 설정합니다. 예를 들어, maximum-scale=2.0은 사용자가 초기 크기의 두 배로 확대할 수 있도록 합니다.

이러한 기능은 제어를 제공하지만, 특히 maximum-scale=1.0과 같이 제한적인 최소 또는 최대 확장을 설정하는 것은 접근성에 해로울 수 있습니다. 시각 장애가 있는 사용자는 콘텐츠를 읽기 위해 핀치 투 줌에 의존하는 경우가 많습니다. 이 기능을 방지하면 상당한 글로벌 사용자의 경우 사이트가 사용할 수 없게 될 수 있습니다. 사용자 경험 또는 보안상의 이유로 매우 구체적이고 설득력 있는 경우가 아니라면 사용자 확장성을 제한하지 않는 것이 좋습니다. 이 경우에도 접근성 지침을 신중하게 고려해야 합니다.

user-scalable

user-scalable 속성은 사용자가 페이지를 확대하거나 축소할 수 있는지 여부를 직접 제어합니다.

• user-scalable=yes (또는 user-scalable=1): 사용자가 확대/축소할 수 있도록 허용합니다. 속성이 생략된 경우 이는 브라우저의 기본 동작이며 일반적으로 접근성을 위해 권장됩니다.
• user-scalable=no (또는 user-scalable=0): 사용자가 확대/축소하는 것을 방지합니다. 이 설정은 종종 maximum-scale=1.0과 함께 사용되어 접근성을 심각하게 저해할 수 있습니다. 시각 장애가 있는 사용자는 더 큰 텍스트 크기 또는 확대된 콘텐츠가 필요할 수 있습니다. 확대/축소로 인한 레이아웃 문제를 방지할 수는 있지만 접근성 영향은 상당하며 일반적으로 인지된 이점보다 큽니다. WCAG(웹 콘텐츠 접근성 지침)와 같이 사용자가 콘텐츠 확장을 제어하는 것을 지원하는 전역 접근성 표준을 준수하면서 대부분의 프로덕션 환경에서는 이 설정을 사용하지 않는 것이 좋습니다.

height

width와 유사하게 height 속성은 레이아웃 뷰포트의 높이를 설정할 수 있도록 합니다. 그러나 브라우저 크롬, 동적 도구 모음 및 모바일 장치의 가상 키보드 모양으로 인해 브라우저의 시각 영역 높이가 크게 달라질 수 있으므로 device-height와 함께 이 속성이 사용되는 경우는 드뭅니다. 고정 높이 또는 device-height에 의존하면 일관되지 않은 레이아웃과 예기치 않은 스크롤이 발생할 수 있습니다. 대부분의 반응형 디자인은 고정 높이 뷰포트가 아닌 콘텐츠 흐름과 스크롤 가능성을 통해 세로 레이아웃을 관리합니다.

권장 메타 뷰포트 태그 요약:

이 한 줄은 반응형 디자인에 대한 최적의 기반을 제공하며, 브라우저에 레이아웃 뷰포트 너비를 장치 너비와 일치시키도록 지시하고 확장되지 않은 초기 보기를 설정하며, 결정적으로 사용자가 접근성을 위해 자유롭게 확대/축소할 수 있도록 합니다.

뷰포트 단위: 동적 크기 조정을 위한 픽셀 너머

픽셀(px), em, rem과 같은 전통적인 CSS 단위는 강력하지만 뷰포트 단위는 뷰포트 자체의 치수에 상대적인 요소 크기 조정에 대한 고유한 방법을 제공합니다. 이러한 단위는 모든 비례 조정에 대해 미디어 쿼리에만 의존하지 않고 동적이고 유동적인 레이아웃을 만드는 데 특히 유용합니다. 레이아웃 뷰포트 치수의 백분율을 나타내며, 보이는 화면 영역에 상대적인 요소 크기에 대한 보다 직접적인 제어를 제공합니다.

vw (뷰포트 너비)

• 정의: 1vw는 레이아웃 뷰포트 너비의 1%와 같습니다.
• 예시: 레이아웃 뷰포트가 360px 너비인 경우( width=device-width가 있는 일반적인 모바일 장치와 같이), 10vw는 36px(360px의 10%)이 됩니다. 태블릿에서 뷰포트가 1024px로 확장되면 10vw는 102.4px이 됩니다.
• 사용 사례: 모든 중단점에 대한 지속적인 미디어 쿼리 조정 없이 광범위한 화면 크기에 걸쳐 텍스트가 읽을 수 있도록 보장하는 글꼴 크기, 이미지 크기 또는 컨테이너 너비에 이상적입니다. 예를 들어, vw를 사용하여 글꼴 크기를 설정하면 뷰포트 너비에 따라 글꼴 크기가 아름답게 조정되면서도 읽기 쉽게 유지할 수 있습니다.
• 코드 예시:
  

  h1 { font-size: 8vw; }

  .hero-image { width: 100vw; height: auto; }

vh (뷰포트 높이)

• 정의: 1vh는 레이아웃 뷰포트 높이의 1%와 같습니다.
• 예시: 레이아웃 뷰포트가 640px 높이인 경우 50vh는 320px(640px의 50%)이 됩니다.
• 사용 사례: 전체 화면 섹션, 히어로 배너 또는 보이는 화면 높이의 특정 백분율을 차지해야 하는 요소를 만드는 데 적합합니다. 일반적인 응용 프로그램은 장치 방향이나 크기에 관계없이 항상 화면을 채우는 히어로 섹션을 만드는 것입니다.
• 코드 예시:
  

  .full-screen-section { height: 100vh; }

vmin (뷰포트 최소) 및 vmax (뷰포트 최대)

이러한 단위는 덜 일반적이지만 뷰포트의 더 작은 또는 더 큰 치수를 기반으로 반응성을 보장하는 강력한 기능을 제공합니다.

• vmin 정의: 1vmin은 레이아웃 뷰포트의 더 작은 치수(너비 또는 높이)의 1%와 같습니다.
• vmin 예시: 뷰포트가 너비 360px이고 높이 640px인 경우 1vmin은 3.6px(360px의 1%)이 됩니다. 사용자가 장치를 가로 모드(예: 너비 640px, 높이 360px)로 회전하면 1vmin은 여전히 3.6px(360px의 1%)이 됩니다.
• vmin 사용 사례: 너비 또는 높이 치수 중 더 제한적인 치수에 상대적으로 너무 커지지 않고 너무 작아지지도 않는 요소를 조정하는 데 유용합니다. 이를 통해 특히 정사각형 요소나 세로 및 가로 모드 모두에 적절하게 맞는 아이콘을 처리할 때 치수 중 더 제한적인 치수에 상대적으로 요소를 확장하는 데 도움이 됩니다.
• 코드 예시:
  

  .square-icon { width: 10vmin; height: 10vmin; }

• vmax 정의: 1vmax는 레이아웃 뷰포트의 더 큰 치수(너비 또는 높이)의 1%와 같습니다.
• vmax 예시: 뷰포트가 너비 360px이고 높이 640px인 경우 1vmax는 6.4px(640px의 1%)이 됩니다. 사용자가 장치를 가로 모드(예: 너비 640px, 높이 360px)로 회전하면 1vmax는 여전히 6.4px(640px의 1%)이 됩니다.
• vmax 사용 사례: 항상 표시되고 화면의 가장 큰 치수와 함께 성장하여 읽거나 상호 작용하기에 너무 작아지지 않도록 해야 하는 요소에 이상적입니다. 예를 들어, 큰 배경 이미지 또는 화면의 상당한 부분을 항상 차지해야 하는 중요한 텍스트 블록입니다.
• 코드 예시:
  

  .background-text { font-size: 5vmax; }

뷰포트 단위의 실제 적용 및 고려 사항

뷰포트 단위는 강력하지만 신중한 구현이 필요합니다.

• 타이포그래피: vw와 rem 또는 em 단위를 결합하면 ( calc() 사용) 뷰포트 너비에 따라 약간 조정되지만 강력한 기준선을 제공하는 유동적인 타이포그래피를 만들 수 있습니다. 예를 들어, font-size: calc(1rem + 0.5vw);를 설정하면 글꼴 크기가 뷰포트 너비에 따라 약간 조정되면서도 강력한 기준선을 제공합니다.
• 레이아웃: 측면 바 또는 유동 격자의 콘텐츠 열과 같이 화면의 특정 부분에 있어야 하는 요소의 경우 뷰포트 단위가 직접적인 솔루션을 제공합니다.
• 이미지 크기 조정: max-width: 100%는 반응형 이미지에 표준이지만, 특정 디자인 요소에 뷰포트 너비의 백분율을 정확하게 채워야 하는 경우 vw를 이미지 치수에 사용하는 것이 유용할 수 있습니다.
• 브라우저 호환성: 뷰포트 단위는 모바일 브라우저를 포함한 대부분의 최신 브라우저에서 널리 지원됩니다. 그러나 특히 모바일의 vh 단위와 관련하여 특정 브라우저의 특이점에 주의하십시오. 이는 나중 섹션에서 설명됩니다.
• 과도한 확장: 뷰포트 단위를 매우 작거나 매우 큰 요소에 사용할 때는 주의하십시오. 1vw의 글꼴 크기는 매우 작은 휴대폰에서 읽을 수 없을 정도로 작아질 수 있고, 50vw는 넓은 데스크톱 모니터에서 지나치게 커질 수 있습니다. min() 및 max() CSS 함수와 결합하면 범위를 제한할 수 있습니다.

반응형 디자인 및 뷰포트 제어: 강력한 동맹

메타 뷰포트 태그를 통한 뷰포트 제어는 현대 반응형 웹 디자인의 기반입니다. 그것 없이는 CSS 미디어 쿼리가 모바일 장치에서 대부분 비효과적일 것입니다. 이 두 기술이 조화롭게 작동하여 웹 사이트가 전 세계의 모든 화면 크기, 방향 및 해상도에 우아하게 적응할 수 있도록 할 때 진정한 힘이 나타납니다.

CSS 미디어 쿼리와의 시너지

CSS 미디어 쿼리를 사용하면 화면 너비, 높이, 방향 및 해상도와 같은 다양한 장치 특성에 따라 다른 스타일을 적용할 수 있습니다. 과 결합하면 미디어 쿼리가 매우 정확하고 안정적으로 됩니다.

• 작동 방식:
  • 메타 뷰포트 태그는 width=device-width가 레이아웃 뷰포트를 CSS 픽셀의 장치 실제 너비로 정확하게 설정하도록 보장합니다.
  • 미디어 쿼리는 이 정확한 레이아웃 뷰포트 너비를 사용하여 스타일을 적용합니다. 예를 들어, @media (max-width: 600px) { ... }와 같은 쿼리는 기본 "데스크톱과 같은" 레이아웃 뷰포트 설정에 관계없이 유효 너비가 600px 이하인 장치를 올바르게 대상으로 합니다.
• 일반적인 중단점 (글로벌 관점): 특정 중단점 값은 콘텐츠 및 디자인에 따라 다를 수 있지만, 일반적인 전략은 일반적인 장치 범주를 대상으로 하는 것입니다.
  • 소형 모바일: @media (max-width: 375px) { ... } (매우 작은 휴대폰 타겟팅)
  • 모바일: @media (max-width: 767px) { ... } (일반 스마트폰, 세로 모드)
  • 태블릿: @media (min-width: 768px) and (max-width: 1023px) { ... } (태블릿, 소형 노트북)
  • 데스크톱: @media (min-width: 1024px) { ... } (더 큰 화면)
• 미디어 쿼리 코드 예시:
  

  /* 더 큰 화면에 대한 기본 스타일 */

  body { font-size: 18px; }

  .container { max-width: 1200px; margin: 0 auto; }

  /* 최대 767px 너비 화면에 대한 스타일 (예: 대부분의 스마트폰) */

  @media (max-width: 767px) {

    body { font-size: 16px; }

    .container { width: 95%; padding: 0 10px; }

    .navigation { flex-direction: column; }

  }

모바일 우선 개발 전략

"모바일 우선" 개념은 반응형 웹 디자인에서 강력한 패러다임으로, 뷰포트 제어를 직접적으로 활용합니다. 데스크톱을 위해 디자인한 다음 모바일로 조정하는 대신, 모바일 우선은 가장 작은 화면을 위해 핵심 경험을 구축한 다음 더 큰 뷰포트에 대해 점진적으로 개선하는 것을 옹호합니다.

• 모바일 우선 이유:
  • 성능: 모바일 사용자(종종 더 느린 네트워크와 덜 강력한 장치를 사용하는)만 필수 스타일과 자산을 받도록 보장하여 로드 시간을 단축합니다.
  • 콘텐츠 우선순위 지정: 화면 공간이 제한되어 있으므로 개발자가 콘텐츠와 기능의 우선순위를 정하도록 강제합니다.
  • 점진적 향상: 화면이 커짐에 따라 min-width 미디어 쿼리를 사용하여 스타일(예: 더 복잡한 레이아웃, 더 큰 이미지)을 "추가"합니다. 이렇게 하면 기본 경험이 항상 모바일에 최적화됩니다.
  • 글로벌 접근성: 많은 지역, 특히 신흥 시장은 모바일 전용입니다. 모바일 우선 접근 방식은 본질적으로 전 세계 인터넷 사용자의 대다수를 충족합니다.
• 구현:
  1. 모든 화면 크기(주로 모바일)에 적용되는 기본 CSS로 시작합니다.
  2. min-width 미디어 쿼리를 사용하여 점진적으로 더 큰 화면에 대한 스타일을 추가합니다.

     /* 기본 스타일 (모바일 우선) */

     .element { width: 100%; padding: 10px; }

     /* 태블릿 및 더 큰 화면에 대해 더 넓은 너비 적용 */

     @media (min-width: 768px) {

       .element { width: 50%; float: left; }

     }

     /* 데스크톱에 대해 더 넓은 너비 적용 */

     @media (min-width: 1024px) {

       .element { width: 33%; }

     }

다양한 장치 픽셀 비율 (DPR) 처리

최신 모바일 장치, 특히 고급 스마트폰 및 태블릿은 종종 매우 높은 픽셀 밀도를 가지며, 이는 1보다 큰 장치 픽셀 비율(DPR)로 이어집니다. DPR이 2라는 것은 1 CSS 픽셀이 2개의 물리적 장치 픽셀에 해당한다는 것을 의미합니다. 뷰포트 메타 태그는 레이아웃 뷰포트의 크기를 장치 독립 픽셀에 상대적으로 조정하지만, 이미지 및 기타 미디어 자산은 고밀도 DPR 화면(종종 "Retina" 디스플레이라고 함)에서 선명하게 보이도록 특별한 고려가 필요합니다.

• 왜 중요한가: DPR이 2인 장치에 100px x 100px 이미지를 제공하면 브라우저가 효과적으로 200 픽셀 영역을 채우도록 확장하기 때문에 흐리게 표시됩니다.
• 솔루션:
  • 반응형 이미지 (srcset 및 sizes): HTML 태그의 srcset 속성을 사용하면 다른 픽셀 비율 및 뷰포트 크기에 대해 여러 이미지 소스를 지정할 수 있습니다. 그런 다음 브라우저는 가장 적합한 이미지를 선택합니다.
    이것은 브라우저에 표준 디스플레이의 경우 `image-lowres.jpg`를, 고밀도 DPR 디스플레이의 경우 `image-highres.jpg`를 사용하도록 지시합니다. 반응형 너비에 대해 `sizes`와 결합할 수도 있습니다.

    

  • CSS 미디어 쿼리 (해상도용): 이미지에는 덜 일반적이지만 미디어 쿼리를 사용하여 해상도에 따라 다른 배경 이미지 또는 스타일을 제공할 수 있습니다.

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {   body { background-image: url('high-res-background.jpg'); } }

  • SVG 및 아이콘 글꼴: 벡터 그래픽 및 아이콘의 경우 SVG(확장 가능한 벡터 그래픽) 및 아이콘 글꼴(Font Awesome과 같은)은 해상도에 독립적이고 품질 손실 없이 모든 DPR로 완벽하게 확장되므로 이상적입니다.

일반적인 뷰포트 문제 및 해결책

뷰포트 제어의 강력한 기능에도 불구하고 개발자는 종종 모바일 사용자 경험을 방해할 수 있는 특정 문제에 직면합니다. 이러한 일반적인 문제와 해결책을 이해하는 것은 전 세계를 위한 강력한 웹 애플리케이션을 구축하는 데 중요합니다.

모바일 브라우저의 "100vh" 문제

프런트엔드 개발자에게 가장 지속적이고 좌절스러운 문제 중 하나는 모바일 브라우저에서 100vh 단위의 일관되지 않은 동작입니다. 100vh는 이론적으로 "뷰포트 높이의 100%"를 의미하지만, 모바일에서는 브라우저의 동적 도구 모음(주소 표시줄, 탐색 모음)이 종종 화면의 일부를 가려 100vh가 이러한 도구 모음이 없는 뷰포트 높이를 참조하게 합니다. 사용자가 스크롤하면 이러한 도구 모음이 숨겨져 시각 뷰포트가 확장되지만 100vh 값은 동적으로 업데이트되지 않아 요소가 너무 크거나 예기치 않은 스크롤을 유발합니다.

• 문제: 전체 화면 히어로 섹션에 height: 100vh;를 설정하면 페이지 로드 시 동적 도구 모음이 숨겨져 있을 때 100vh가 높이를 참조하므로 초기에는 표시되더라도 스크롤 폴드 아래로 확장될 수 있습니다.
• 솔루션:
  • 새 뷰포트 단위 사용 (CSS 작업 초안): 최신 CSS는 이를 해결하기 위해 특별히 고안된 새로운 단위를 도입합니다.
    • svh (Small Viewport Height): 동적 도구 모음이 보일 때 뷰포트 높이의 1%.
    • lvh (Large Viewport Height): 동적 도구 모음이 숨겨져 있을 때 뷰포트 높이의 1%.
    • dvh (Dynamic Viewport Height): 뷰포트 높이의 1%, 도구 모음이 나타나거나 사라질 때 동적으로 조정됩니다.

    이러한 단위는 가장 강력하고 우아한 솔루션을 제공하지만 브라우저 지원은 아직 발전 중입니다. 폴백과 함께 사용할 수 있습니다.

    .hero-section {   height: 100vh; /* 이전 브라우저용 폴백 */   height: 100dvh; /* 동적 뷰포트 높이 사용 */ }

  • JavaScript 해결 방법: 일반적이고 널리 지원되는 해결 방법은 JavaScript를 사용하여 창의 실제 내부 높이를 계산하고 CSS 변수 또는 인라인 스타일로 적용하는 것입니다.

    // JavaScript에서:

    function setDocHeight() {

      document.documentElement.style.setProperty('--doc-height', `${window.innerHeight}px`);

    }

    window.addEventListener('resize', setDocHeight);

    setDocHeight();

    /* CSS에서: */

    .hero-section { height: var(--doc-height); }

    이 접근 방식은 실제 보이는 높이에 일관되게 적응합니다.

예기치 않은 확대/축소 문제

메타 뷰포트 태그와 initial-scale=1.0이 일반적으로 초기 확대/축소를 방지하지만, 다른 요소, 특히 iOS 장치에서는 원치 않는 배율을 유발할 수 있습니다.

• iOS에서 포커스 시 입력 필드 확대/축소: iOS에서 입력 필드(, </b>, <b><select></b>)를 탭하면 브라우저가 자동으로 확대되어 콘텐츠를 읽기 어렵게 만들거나 레이아웃 변경을 유발할 수 있습니다. 이것은 입력이 상호 작용하기에 충분히 크게 하려는 "접근성 기능"이지만 반응형 디자인을 방해할 수 있습니다. <ul> <li><b>솔루션:</b> 입력 필드에 최소 <b>16px</b>의 글꼴 크기를 설정하면 종종 iOS에서 이러한 자동 확대/축소 동작을 방지할 수 있습니다. <b><p><code>input, textarea, select { font-size: 16px; }</code></p></b> </li> </ul> </li> <li><b>CSS 변환 및 확대/축소:</b> 특정 CSS 변환(예: <b>transform: scale()</b>) 또는 <b>zoom</b>과 같은 속성은 특히 반응형 컨텍스트 내에서 신중하게 제어되지 않으면 뷰포트와 예측할 수 없이 상호 작용할 수 있습니다.</li> </ul> <h3>키보드 표시 중 뷰포트 크기 조정</h3> <p>모바일 장치에서 가상 키보드가 나타나면 일반적으로 시각 뷰포트의 높이가 줄어듭니다. 이렇게 하면 레이아웃 변경이 심각하게 발생하여 콘텐츠가 위로 밀려나거나, 필드를 가리거나, 예기치 않은 스크롤을 유발할 수 있습니다.</p> <ul> <li><b>문제:</b> 화면 하단에 양식이 있고 키보드가 나타나면 입력 필드가 가려질 수 있습니다. 브라우저는 초점이 맞춰진 요소를 보기 위해 페이지를 스크롤하려고 시도하지만, 여전히 눈에 거슬릴 수 있습니다.</li> <li><b>동작 차이:</b> <ul> <li><b>iOS:</b> 일반적으로 키보드가 나타날 때 레이아웃 뷰포트의 치수는 변경되지 않습니다. 브라우저는 초점이 맞춰진 입력 필드를 시각 뷰포트 내에 가져오기 위해 페이지를 스크롤합니다.</li> <li><b>Android:</b> 동작은 더 다양할 수 있습니다. 일부 Android 브라우저는 레이아웃 뷰포트 크기를 조정하는 반면, 다른 브라우저는 iOS와 더 유사하게 작동합니다.</li> </ul> </li> <li><b>솔루션:</b> <ul> <li><b>`resize` 메타 태그 값 사용 (주의!):</b> <b><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content"></b>. `interactive-widget` 속성은 이 동작을 제어하기 위한 새로운 표준이지만 지원이 보편적이지는 않습니다.</li> <li><b>JavaScript로 요소로 스크롤:</b> 중요한 입력 필드의 경우 JavaScript를 사용하여 초점이 맞춰질 때 프로그래밍 방식으로 보기 좋게 스크롤할 수 있으며, 주변 컨텍스트가 보이도록 작은 오프셋을 포함할 수 있습니다.</li> <li><b>레이아웃 디자인:</b> 양식 및 대화형 요소를 화면 상단 부분 내에 배치하도록 디자인하거나, 키보드 모양을 우아하게 처리하기 위해 스크롤 가능한 컨테이너에 래핑하십시오. 스크롤되지 않아야 하는 중요한 정보나 버튼을 화면 맨 아래에 배치하지 마십시오.</li> <li><b>`visualViewport` API:</b> 고급 시나리오의 경우 JavaScript `window.visualViewport` API는 시각 뷰포트의 크기와 위치에 대한 정보를 제공하여 키보드를 고려하기 위한 더 정확한 조정을 가능하게 합니다. <b><p><code>window.visualViewport.addEventListener('resize', () => {</code></p> <p><code>  console.log('Visual viewport height:', window.visualViewport.height);</code></p> <p><code>});</code></p></b> </li> </ul> </li> </ul> <h2>고급 뷰포트 고려 사항</h2> <p>기본 속성 및 일반적인 문제를 넘어, 몇 가지 고급 고려 사항을 통해 모바일 뷰포트 제어를 더욱 세밀하게 조정하여 보다 세련되고 성능이 뛰어난 사용자 경험을 제공할 수 있습니다.</p> <h3>방향 변경</h3> <p>모바일 장치는 세로 또는 가로 방향으로 잡을 수 있으며, 이는 가용 화면 치수를 크게 변경합니다. 디자인은 이러한 변화를 우아하게 수용해야 합니다.</p> <ul> <li><b>방향용 CSS 미디어 쿼리:</b> <b>orientation</b> 미디어 기능은 장치의 방향에 따라 특정 스타일을 적용할 수 있도록 합니다. <b><p><code>/* 세로 모드 스타일 */</code></p> <p><code>@media (orientation: portrait) {   .some-element { width: 90%; } }</code></p> <p><code>/* 가로 모드 스타일 */</code></p> <p><code>@media (orientation: landscape) {   .some-element { width: 60%; } }</code></p></b> </li> <li><b>유연한 레이아웃:</b> Flexbox(Flexbox) 및 Grid(CSS Grid) 레이아웃을 우선적으로 사용하십시오. 이러한 레이아웃 모듈은 본질적으로 사용 가능한 공간에 적응하므로 이전의 고정 너비 또는 위치 기반 레이아웃보다 다양한 화면 크기 및 방향 변화에 훨씬 더 탄력적입니다.</li> <li><b>콘텐츠 가독성:</b> 세로 모드에서 큰 태블릿의 텍스트 줄이 지나치게 길어지거나, 매우 작은 전화기의 세로 모드에서 너무 짧아지지 않도록 하십시오. 방향에 대한 미디어 쿼리 내에서 글꼴 크기 및 줄 높이를 조정하면 도움이 될 수 있습니다.</li> </ul> <h3>접근성 및 사용자 제어</h3> <p>이것을 반복할 가치가 있지만 다시 강조할 가치가 있습니다. 접근성은 결코 나중에 생각해서는 안 됩니다. 뷰포트 제어는 웹 콘텐츠를 모든 사용자가 능력이나 장치에 관계없이 접근할 수 있도록 만드는 데 중요한 역할을 합니다.</p> <ul> <li><b>확대/축소 비활성화 금지:</b> 이전에 강조한 것처럼 <b>user-scalable=no</b> 또는 <b>maximum-scale=1.0</b>을 설정하면 브라우저 확대/축소에 의존하는 시각 장애가 있는 사용자에게 심각하게 방해가 될 수 있습니다. 항상 콘텐츠 확장성 제어에 대해 사용자 제어를 우선시하십시오. 이는 WCAG 2.1 성공 기준 1.4.4(텍스트 크기 조정) 및 1.4.10(흐름)과 일치하며, 콘텐츠는 200%까지 확대하거나 가로 스크롤 없이 단일 열에 표시될 때 사용 가능해야 함을 강조합니다.</li> <li><b>충분한 탭 대상:</b> 상호 작용 요소(버튼, 링크)가 터치스크린에서 확대/축소할 때도 쉽게 탭할 수 있을 만큼 충분히 크고 간격이 충분한지 확인하십시오. 최소 44x44 CSS 픽셀 크기는 일반적인 권장 사항입니다.</li> <li><b>대비 및 가독성:</b> 충분한 색상 대비를 유지하고 뷰포트와 함께 잘 확장되는 읽기 쉬운 글꼴 크기를 사용하십시오.</li> </ul> <h3>성능 영향</h3> <p>효과적인 뷰포트 관리는 모바일 장치에서 웹 애플리케이션의 전반적인 성능에도 기여합니다.</p> <ul> <li><b>효율적인 리소스 로딩:</b> 메타 뷰포트 설정을 올바르게 하고 반응형 이미지 기술( <b>srcset</b>, <b>sizes</b>)을 사용하면 모바일 장치가 해당 화면 크기 및 DPR에 적합한 이미지 및 자산만 다운로드하도록 하여 불필요한 대역폭 소비를 줄이고 로드 시간을 개선합니다. 이는 특히 종량제 데이터 요금제를 사용하거나 인터넷 인프라가 덜 발달된 지역의 사용자에게 중요합니다.</li> <li><b>리플로우 및 리페인트 감소:</b> 미디어 쿼리 및 유동 단위(예: 뷰포트 단위 또는 백분율)를 통해 우아하게 적응하는 잘 구성된 반응형 레이아웃은 고정 너비 레이아웃에 비해 복잡한 확장 알고리즘을 트리거하거나 지속적인 JavaScript 조정을 요구하는 것보다 비용이 많이 드는 레이아웃 재계산(리플로우) 및 리페인트가 적습니다.</li> <li><b>가로 스크롤 방지:</b> 모바일에서 가장 큰 성능 및 UX 방해 요인 중 하나는 우발적인 가로 스크롤입니다. 올바르게 구성된 뷰포트와 반응형 디자인은 콘텐츠가 화면에 맞도록 하여 가로 스크롤을 제거합니다. 이는 사용자에게 좌절감을 줄 뿐만 아니라 브라우저에 계산적으로 부담을 줄 수도 있습니다.</li> <li><b>최적화된 중요 렌더링 경로:</b> 메타 뷰포트 태그를 <b><head></b> 섹션 내에 가능한 한 빨리 배치하면 브라우저가 처음부터 페이지를 올바르게 렌더링하는 방법을 알게 되어 "스타일이 없는 콘텐츠의 깜박임" 또는 수정해야 하는 초기 잘못된 확대/축소 수준을 방지합니다.</li> </ul> <h2>뷰포트 관리를 위한 모범 사례</h2> <p>효과적인 뷰포트 제어를 구현하는 것은 디자인, 개발 및 테스트의 지속적인 프로세스입니다. 이러한 모범 사례를 준수하면 보편적으로 접근 가능하고 성능이 뛰어난 모바일 웹 경험을 만드는 데 도움이 됩니다.</p> <ul> <li><b>항상 표준 메타 뷰포트 태그 포함:</b> 이것은 모든 반응형 웹 사이트의 필수적인 첫 번째 단계입니다. <b><p><code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code></p></b> 이것은 현대 반응형 웹 개발을 위한 최적의 시작점을 제공합니다.</li> <li><b>유연한 레이아웃 채택:</b> 레이아웃 구성을 위해 CSS Flexbox 및 Grid를 우선적으로 사용하십시오. 이러한 도구는 본질적으로 반응형으로 설계되었으며 이전의 고정 너비 레이아웃 기술보다 다양한 화면 크기와 방향 변화에 훨씬 더 잘 적응합니다.</li> <li><b>모바일 우선 접근 방식 채택:</b> 가장 작은 화면을 먼저 구축한 다음 <b>min-width</b> 미디어 쿼리를 사용하여 더 큰 뷰포트에 대해 점진적으로 개선하십시오. 이렇게 하면 콘텐츠 우선순위가 강제되고 전 세계 모바일 사용자의 대다수를 위해 성능이 최적화됩니다.</li> <li><b>다양한 장치 및 브라우저에서 엄격하게 테스트:</b> 에뮬레이터와 개발자 도구는 유용하지만 실제 장치 테스트는 매우 중요합니다. 다양한 실제 장치(구형 및 신형 스마트폰, 태블릿, 다양한 운영 체제(iOS, Android)) 및 다양한 브라우저(Chrome, Safari, Firefox, Edge, Samsung Internet, UC Browser 등)에서 테스트하여 뷰포트 동작 또는 렌더링의 미묘한 불일치를 포착하십시오. 서비스에 특정 시장 초점이 있는 경우 다른 지역에서 웹 사이트가 작동하는 방식에 주의를 기울이십시오.</li> <li><b>다양한 해상도에 대해 이미지 최적화:</b> 이미지에 대해 <b>srcset</b> 및 <b>sizes</b> 속성을 활용하거나 SVG를 벡터 그래픽에 사용하면 표준 디스플레이에 불필요하게 큰 파일을 제공하지 않고도 고밀도 DPR 화면에서 선명한 비주얼을 보장할 수 있습니다.</li> <li><b>접근성 우선:</b> 사용자 확대/축소를 절대 비활성화하지 마십시오. 충분히 큰 탭 대상과 함께 디자인하고 확대할 때 콘텐츠가 잘 흐르는지 확인하십시오. 접근 가능한 디자인은 모두에게 좋은 디자인이며 다양한 글로벌 사용자 기반을 충족합니다.</li> <li><b>100vh 문제 우아하게 처리:</b> 모바일에서 `100vh` 버그를 인지하고 새 뷰포트 단위(`dvh`, `svh`, `lvh`)를 폴백과 함께 구현하거나 필요한 경우 JavaScript 해결 방법을 사용하여 전체 높이 요소가 예측 가능하게 작동하도록 하십시오.</li> <li><b>지속적으로 모니터링 및 적응:</b> 모바일 환경은 끊임없이 진화하고 있습니다. 새로운 장치, 화면 크기, 브라우저 업데이트 및 새로운 표준(새 뷰포트 단위 또는 `interactive-widget`과 같은)은 뷰포트 전략을 주기적으로 검토하고 조정해야 함을 의미합니다. 최신 웹 개발 모범 사례 및 브라우저 기능에 대한 정보를 얻으십시오.</li> </ul> <h2>결론</h2> <p>메타 뷰포트 태그로 구동되고 반응형 디자인 원칙으로 강화된 CSS 뷰포트 규칙은 전 세계 모바일 장치에서 탁월하고 포괄적인 웹 경험을 제공하는 관문일 뿐입니다. 모바일 인터넷 액세스가 점점 더 지배적인 세상에서 적절한 뷰포트 제어를 무시하는 것은 잠재 고객의 상당 부분을 소외시키는 것을 의미합니다. 번화한 도시 중심지에서든 외딴 마을에서든 콘텐츠에 액세스하는지 여부에 관계없이 말입니다.</p> <p>권장 메타 뷰포트 설정의 신중한 적용, 뷰포트 단위의 유연성 활용, 모바일 우선 패러다임에서 CSS 미디어 쿼리와의 지능적인 결합, 일반적인 문제의 사전 예방적 해결을 통해 개발자는 반응형 디자인의 잠재력을 최대한 발휘할 수 있습니다. 목표는 "모바일에 친숙한" 사이트가 아니라 진정으로 "모바일 네이티브"인 웹 사이트를 만드는 것입니다. 즉, 모든 장치에 원활하게 적응하고, 사용자가 콘텐츠와 쉽게 상호 작용할 수 있도록 하며, 화면 크기나 지리적 위치에 관계없이 디지털 존재가 보편적으로 접근 가능하고 즐거울 수 있도록 보장하는 것입니다. 뷰포트를 마스터하는 것은 글로벌 디지털 환경을 구축하는 모든 현대 웹 개발자에게 필수적인 기술입니다.</p> </div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">CSS 뷰포트 규칙</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">모바일 뷰포트 제어</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">반응형 디자인</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">웹 개발</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">프론트엔드 개발</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">메타 뷰포트 태그</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">뷰포트 단위</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">기기 너비</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">초기 배율</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">사용자 확장성</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">픽셀 밀도</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">DPR</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">레이아웃 뷰포트</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">시각 뷰포트</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">고정 뷰포트</span><template id="P:4"></template><template id="P:5"></template><template id="P:6"></template><template id="P:7"></template><template id="P:8"></template><template id="P:9"></template><template id="P:a"></template></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><div hidden id="S:4"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">적응형 디자인</span></div><script>$RS("S:4","P:4")</script><div hidden id="S:5"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">미디어 쿼리</span></div><script>$RS("S:5","P:5")</script><div hidden id="S:6"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">브라우저 호환성</span></div><script>$RS("S:6","P:6")</script><div hidden id="S:7"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">성능 최적화</span></div><script>$RS("S:7","P:7")</script><div hidden id="S:8"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">사용자 경험</span></div><script>$RS("S:8","P:8")</script><div hidden id="S:9"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">글로벌 웹</span></div><script>$RS("S:9","P:9")</script><div hidden id="S:a"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">크로스 브라우저 개발</span></div><script>$RS("S:a","P:a")</script><script>$RC("B:1","S:1")</script></body></html>