모더나이저

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.

1. 개요
2. 작동 원리
- 2.1. 기능 감지
- 2.2. 기능 감지 테스트 과정
3. 사용 예시
- 3.1. 자바스크립트 예제
- 3.2. CSS 예제
4. 한계
5. 수상 경력
참조

1. 개요

모더나이저는 웹 브라우저의 기능을 감지하기 위해 사용되는 JavaScript 라이브러리이다. Modernizr는 기능 감지 방식을 통해 브라우저의 속성을 직접 확인하는 대신, 특정 기능의 작동 여부를 판단한다. Modernizr는 250개 이상의 기능에 대한 테스트를 제공하며, 각 테스트 결과를 불리언 속성으로 포함하는 JavaScript 객체를 생성하고, HTML 요소에 클래스를 추가한다. Modernizr는 기능 감지 라이브러리이며, 이전 웹 브라우저에 누락된 기능을 추가하는 폴리필의 역할은 하지 않는다.

더 읽어볼만한 페이지

반응형 웹 디자인 - 어도비 뮤즈
어도비 뮤즈는 어도비에서 개발한 웹사이트 제작 소프트웨어이며, 테마와 위젯을 제공하여 정적 HTML 파일을 생성하고, 2012년에 출시되어 2020년에 기술 지원이 종료되었다.
반응형 웹 디자인 - JQuery Mobile
jQuery Mobile은 다양한 모바일 플랫폼과 데스크톱 브라우저를 지원하며 HTML5 기반 UI 구성과 AJAX 기반 탐색을 통해 모바일 웹 페이지 제작을 돕는 jQuery 기반의 사용자 인터페이스 라이브러리이다.
HTML - Alt 속성
`alt` 속성은 HTML의 `img` 및 `area` 태그에서 이미지를 로드할 수 없을 때 대체 텍스트를 지정하며, 스크린 리더 및 SEO에 영향을 미치고, W3C 지침에 따라 이미지의 의미를 전달하거나 장식용 이미지는 빈 문자열로 지정해야 한다.
HTML - 폰트 패밀리 (HTML)
폰트 패밀리(HTML)는 CSS 스타일 시트, 인라인 CSS, HTML `font` 태그를 통해 웹 페이지 글꼴을 지정하는 방법으로, 사용자 기기에 설치된 글꼴에 따라 표현이 달라지며, CSS의 `font-family` 속성은 글꼴 모양을 식별하고 제네릭 폰트와 글꼴 대체 메커니즘을 통해 일관된 글꼴 표현을 가능하게 한다.
웹 디자인 - 웹 접근성
웹 접근성은 장애가 있는 사람들이 웹을 사용할 수 있도록 기술 및 디자인 원칙을 적용하는 것이며, 웹 콘텐츠, 저작 도구, 사용자 에이전트의 접근성 향상을 위한 지침과 법률, 인공지능 기술 활용을 통한 접근성 개선 노력이 이루어지고 있다.
웹 디자인 - 접근성
접근성은 장애인을 포함한 모든 사람이 정보와 서비스에 차별 없이 접근하도록 보장하는 개념으로, 윤리적 책임, 사회적 형평성, 상업적 이익, 공익적 가치 때문에 중요하며, 물리적 환경, 정보 접근, 서비스 접근 등 다양한 영역에서 보조 기술과 적응 기술을 통해 구현되지만, 완전한 확보를 위해서는 지속적인 노력과 정책적 지원이 필요하다.

모더나이저 - [IT 관련 정보]에 관한 문서
기본 정보
유형	자바스크립트 라이브러리
이름	모더나이저
원어 이름	Modernizr
로고
설명	기능 감지 라이브러리
개발자	Faruk Ateş, Paul Irish, Alex Sexton, Ryan Seddon, Patrick Kettner, Stu Cox, Richard Herrera, 기여자들
작성자	Faruk Ateş
안정화 버전	3.13.1
프로그래밍 언어	자바스크립트
라이선스	MIT 라이선스
웹사이트	공식 웹사이트

2. 작동 원리

모더나이저(Modernizr)는 웹 개발자가 HTML5 및 CSS 3 같은 최신 웹 기술을 사용하고자 할 때, 사용자의 웹 브라우저가 해당 기술을 실제로 지원하는지 여부를 판단하는 데 사용되는 JavaScript 라이브러리이다.^[6]^[7]^[8]^[9]

모더나이저는 브라우저의 종류나 버전을 직접 확인하는 대신, 특정 기능을 브라우저에서 직접 테스트해보는 기능 감지(feature detection) 방식을 사용한다. 이 방식은 브라우저의 사용자 에이전트 문자열을 확인하는 것보다 더 신뢰할 수 있는 방법으로 여겨진다. 기능 감지를 통해 개발자는 브라우저가 특정 기능을 지원하지 않을 경우를 대비하여 대체 기능을 제공하는 등, 다양한 환경에 맞는 웹 페이지를 만들 수 있다.

2. 1. 기능 감지

Modernizr는 브라우저의 속성을 직접 확인하는 대신 기능 감지(feature detection) 방식을 사용하여 특정 웹 브라우저가 특정 기능을 실제로 지원하는지 여부를 판단한다.^[6]^[7]^[8]^[9] 기능 감지는 브라우저의 사용자 에이전트 문자열을 확인하는 것보다 더 신뢰할 수 있는 방법으로 여겨진다. 왜냐하면 같은 렌더링 엔진을 사용하는 브라우저라도 기능 지원 여부가 다를 수 있고, 사용자가 웹사이트의 접근 제한을 우회하기 위해 사용자 에이전트 문자열을 임의로 변경하는 경우도 있기 때문이다.

Modernizr는 HTML5, CSS 3 등 250개 이상의 기능에 대한 테스트를 제공한다. 이 테스트 결과를 바탕으로, 각 기능의 지원 여부를 나타내는 불리언(Boolean) 속성을 가진 `Modernizr`라는 이름의 JavaScript 객체를 생성한다. 또한, 지원되는 기능에 따라 HTML 문서의 최상위 `` 요소에 특정 CSS 클래스를 추가한다. 예를 들어, 웹소켓(WebSocket)을 지원하는 브라우저에는 `websockets` 클래스를, 지원하지 않는 브라우저에는 `no-websockets` 클래스를 추가한다.

이를 통해 개발자는 두 가지 방식으로 기능 지원 여부에 따른 처리를 할 수 있다.

JavaScript: `Modernizr` 객체의 속성값을 확인하여 조건에 따라 다른 스크립트를 실행할 수 있다. 예를 들어 `if (Modernizr.websockets)`와 같은 코드로 웹소켓 지원 여부를 확인할 수 있다.
CSS: `` 요소에 추가된 클래스를 이용하여 특정 기능 지원 여부에 따라 다른 스타일 규칙을 적용할 수 있다. 예를 들어 `.websockets .wsyes { display: block; }` 와 같이 웹소켓을 지원할 때 특정 요소를 보이게 하고, `.no-websockets .wsno { display: block; }` 와 같이 지원하지 않을 때 다른 요소를 보이게 할 수 있다.

Modernizr가 기능 감지 테스트를 수행하는 방식은 종종 특정 HTML 요소를 동적으로 생성하고, 해당 요소에 특정 스타일 규칙을 적용한 뒤, 그 결과를 즉시 확인하는 방식이다. 스타일 규칙을 이해하고 지원하는 브라우저는 유효한 값을 반환하지만, 지원하지 않는 브라우저는 빈 값이나 `undefined`를 반환한다. Modernizr는 이 결과를 분석하여 해당 기능의 지원 여부를 최종적으로 판단한다.

2. 2. 기능 감지 테스트 과정

Modernizr는 웹 브라우저의 특정 속성을 확인하는 대신, 해당 브라우저가 실제로 어떤 기능을 지원하는지 직접 테스트하는 '기능 감지' 방식을 사용한다. 이 방식은 더 신뢰할 수 있는 것으로 여겨지는데, 그 이유는 동일한 렌더링 엔진을 사용하는 두 개의 다른 웹 브라우저라고 할지라도 지원하는 기능이 반드시 같지는 않기 때문이다. 또한, 일부 사용자는 특정 웹사이트가 특정 사용자 에이전트 설정을 가진 브라우저의 접근을 막는 것을 우회하기 위해 사용자 에이전트 문자열을 변경하기도 하는데, 기능 감지는 이러한 경우에도 브라우저가 실제로 필요한 기능을 가지고 있는지 정확히 파악할 수 있다.

Modernizr는 250가지가 넘는 기능에 대한 테스트를 수행하고, 그 결과를 'Modernizr'라는 이름의 JavaScript 객체에 불리언(참/거짓) 값으로 저장한다. 또한, 브라우저가 기본적으로 지원하는 기능에 따라 HTML 요소에 해당 기능과 관련된 클래스 이름을 자동으로 추가해준다.

기능 감지 테스트를 수행하기 위해 Modernizr는 종종 다음과 같은 과정을 거친다.

# 임시로 HTML 요소를 생성한다.

# 해당 요소에 특정 CSS 스타일 규칙을 적용한다.

# 즉시 해당 스타일 설정 값을 다시 읽어온다.

만약 웹 브라우저가 해당 스타일 규칙을 이해하고 지원한다면, 올바른 설정 값을 반환할 것이다. 반면, 지원하지 않는 브라우저는 아무런 값도 반환하지 않거나 'undefined^eng'이라는 값을 반환한다. Modernizr는 이 결과를 바탕으로 해당 기능의 지원 여부를 판단한다.

Modernizr가 제공하는 많은 테스트 설명 문서에는 해당 테스트를 실제 웹 개발 작업흐름에서 어떻게 활용할 수 있는지 보여주는 간단한 코드 예제가 함께 제공된다.

3. 사용 예시

Modernizr는 웹 개발자가 사용자의 웹 브라우저가 특정 HTML5, CSS3, 기타 웹 기술 기능을 지원하는지 여부를 쉽게 감지하도록 돕는 자바스크립트 라이브러리이다. 이를 통해 개발자는 기능 감지(feature detection)에 기반하여 웹사이트를 구축할 수 있다. 즉, 특정 기능의 지원 여부에 따라 다른 자바스크립트 코드를 실행하거나 다른 CSS 스타일을 적용하는 방식으로, 모든 사용자에게 기본적인 기능을 제공하면서 최신 기술을 지원하는 브라우저 사용자에게는 향상된 경험을 제공하는 점진적 향상(Progressive Enhancement) 전략이나, 반대로 최신 기능을 우선 적용하되 미지원 브라우저에서도 기본적인 기능이 동작하도록 하는 우아한 성능 저하(Graceful Degradation) 전략을 효과적으로 구현할 수 있다.

주요 활용 방식은 다음과 같다.

자바스크립트를 통한 활용: Modernizr는 감지된 기능의 지원 여부를 불리언(boolean) 값으로 가지는 전역 `Modernizr` 객체를 생성한다. 개발자는 이 객체의 속성을 확인하여 특정 기능(예: 캔버스 API, 웹소켓)의 지원 여부에 따라 조건부로 다른 자바스크립트 로직을 실행할 수 있다.
CSS를 통한 활용: Modernizr는 감지된 기능의 지원 여부에 따라 HTML 문서의 `` 태그에 특정 CSS 클래스(예: `canvas`, `no-websockets`)를 추가한다. 개발자는 이 클래스들을 CSS 선택자로 사용하여, 기능 지원 여부에 따라 다른 스타일 규칙을 적용할 수 있다.

아래 하위 섹션에서는 이러한 자바스크립트 및 CSS 활용 예시를 더 자세히 살펴본다.

3. 1. 자바스크립트 예제

Modernizr는 실행될 때 `Modernizr`라는 자바스크립트 전역 객체를 생성한다. 이 객체는 Modernizr가 감지할 수 있는 각 기능의 지원 여부를 나타내는 불리언(boolean) 속성들을 포함한다. 예를 들어, 사용자의 웹 브라우저가 HTML5의 캔버스 API를 지원한다면 `Modernizr.canvas` 속성 값은 `true`가 되고, 지원하지 않는다면 `false`가 된다.^[1]

이러한 속성 값을 확인하여 특정 기능의 지원 여부에 따라 다른 자바스크립트 코드를 실행할 수 있다. 예를 들어, 캔버스 API 지원 여부에 따라 다음과 같이 분기 처리가 가능하다.^[1]

if (Modernizr.canvas) {

// 캔버스 API를 지원하는 경우 실행할 코드 (예: 도형 그리기)

} else {

// 캔버스 API를 지원하지 않는 경우 실행할 대체 코드

}

아래는 웹소켓(WebSockets) 지원 여부를 확인하는 HTML 및 자바스크립트 예제 코드이다.^[1]

Modernizr - 자바스크립트 예제

자바스크립트가 활성화되지 않으면 Modernizr가 실행되지 않습니다.

위 예제 코드에서는 먼저 HTML 문서의 `` 섹션에서 Modernizr 자바스크립트 파일을 불러온다. 그 후, `` 섹션에 포함된 자바스크립트 코드가 실행된다. 이 코드는 `result`라는 ID를 가진 `

` 태그 요소를 선택하고, `Modernizr.websockets` 속성 값을 확인하여 브라우저의 웹소켓 지원 여부에 따라 해당 요소의 내용을 적절한 메시지로 변경한다.^[1]

3. 2. CSS 예제

Modernizr는 웹 브라우저가 특정 HTML5, CSS3, 기타 웹 기술 기능을 지원하는지 감지하여 HTML 문서의 최상위 요소인 `` 태그에 해당 기능 지원 여부를 나타내는 CSS 클래스를 추가한다. 개발자는 이 클래스들을 CSS 선택자로 활용하여, 특정 기능의 사용 가능 여부에 따라 사용자에게 다른 스타일이나 콘텐츠를 제공할 수 있다. 이는 기능 감지(feature detection)에 기반한 점진적 향상 기법에 유용하게 사용된다.

아래는 WebSockets 기능 지원 여부에 따라 사용자에게 다른 안내 메시지를 보여주는 CSS 예제이다.

먼저, HTML 문서 구조는 다음과 같다. `` 섹션에서 Modernizr 스크립트 파일을 불러오고, `` 태그에는 기본적으로 `no-js` 클래스를 지정한다. 이 클래스는 자바스크립트가 비활성화된 경우를 대비하기 위한 것이다. Modernizr가 성공적으로 실행되면 이 `no-js` 클래스는 제거된다.

모더나이저 - CSS 예시

브라우저가 WebSockets를 지원하지 않습니다.

브라우저가 WebSockets를 지원합니다.

자바스크립트가 활성화되지 않으면 모더나이저는 실행되지 않습니다.

작동 방식:1. 페이지가 로드되면 Modernizr 스크립트(`modernizr.js`)가 실행된다.

2. Modernizr는 브라우저의 WebSockets 지원 여부를 확인한다.

3. 결과에 따라 `` 태그에 `websockets` (지원 시) 또는 `no-websockets` (미지원 시) 클래스를 추가한다. 동시에, 스크립트가 성공적으로 실행되었음을 나타내기 위해 기존의 `no-js` 클래스를 제거하고 `js` 클래스를 추가한다.

4. CSS 규칙은 `` 태그에 추가된 클래스를 기반으로 특정 `

` 요소의 `display` 속성을 변경한다.

`` 태그에 `websockets` 클래스가 있으면 `.websockets .wsyes` 선택자가 일치하여 "브라우저가 WebSockets를 지원합니다." 메시지가 `display: block;`으로 설정되어 화면에 나타난다.
`` 태그에 `no-websockets` 클래스가 있으면 `.no-websockets .wsno` 선택자가 일치하여 "브라우저가 WebSockets를 지원하지 않습니다." 메시지가 `display: block;`으로 설정되어 화면에 나타난다.

5. 만약 사용자의 브라우저에서 자바스크립트가 비활성화되어 Modernizr 스크립트가 실행되지 않으면, `` 태그에는 초기의 `no-js` 클래스가 그대로 남게 된다. 이 경우, CSS 규칙 중 `.js .no-js { display: none; }`는 `` 태그에 `js` 클래스가 없으므로 적용되지 않는다. 따라서 `

` 요소("자바스크립트가 활성화되지 않으면...")가 기본 `display` 속성(일반적으로 `block`)에 따라 화면에 보이게 된다. 이때 `.wsno`와 `.wsyes` 요소는 여전히 `display: none;` 상태를 유지한다.

이처럼 Modernizr를 사용하면 CSS만으로도 브라우저의 기능 지원 여부에 따라 웹 페이지의 표현을 조건부로 다르게 할 수 있어, 점진적 향상(Progressive Enhancement) 및 우아한 성능 저하(Graceful Degradation) 전략을 효과적으로 구현하는 데 도움을 준다.

4. 한계

이 라이브러리는 단순히 기능 감지 방법일 뿐이므로 이전 웹 브라우저에 누락된 기능을 추가하지 않는다.^[11]

5. 수상 경력

모더나이저는 2010년과 2011년 모두 .net Award에서 '올해의 오픈 소스 앱'으로 선정되었다.^[10] 2011년에는 주요 개발자 중 한 명인 폴 아이리쉬가 같은 시상식에서 '올해의 개발자' 상을 수상했다.^[10]

참조

_[1] 웹사이트 Proudly Announcing Modernizr http://farukat.es/jo[...] 2009-07-01
_[2] 웹사이트 Releases · Modernizr/Modernizr https://github.com/M[...] 2024-12-06
_[3] 웹사이트 Modernizr 1.5: new features, unit tests added http://modernizr.com[...] Modernizr 2013-07-30
_[4] 웹사이트 Remove BSD license and improve readme https://github.com/M[...] GitHub 2013-07-30
_[5] 웹사이트 What is Modernizr https://modernizr.co[...] 2019-12-25
_[6] 웹사이트 Taking Advantage of HTML5 and CSS3 with Modernizr http://www.alistapar[...] 2010-06-22
_[7] 웹사이트 Detecting HTML5 Features Using Modernizr http://www.codeproje[...] 2011-01-10
_[8] 웹사이트 Using Modernizr to Determine HTML5 CSS3 Support http://danielsellerg[...] 2011-02
_[9] 웹사이트 Using Modernizr to detect HTML5 and CSS3 browser support http://www.adobe.com[...]
_[10] 뉴스 ".net Awards 2011:#7. Open Source App of the Year: Modernizr 2.0, #16. Developer of the Year: Paul Irish" http://www.netmagazi[...]
_[11] 웹사이트 HTML 5 elements in IE http://modernizr.com[...] 2012-06-14
_[12] 웹인용 Proudly Announcing Modernizr http://farukat.es/jo[...] 2019-05-27
_[13] 웹인용 Releases · Modernizr/Modernizr https://github.com/M[...]
_[14] 웹인용 Modernizr 1.5: new features, unit tests added http://modernizr.com[...] Modernizr 2013-07-30
_[15] 웹인용 Remove BSD license and improve readme https://github.com/M[...] GitHub 2013-07-30

본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com