쿼크 모드(Quirks mode)와 표준 모드(Standards mode) 이해하기
초창기 웹 시절에는 웹 페이지를 보통 두 가지 버전으로 작성해야만 하는 고충이 있었어요. 하나는 '넷스케이프 내비게이터(Netscape Navigator)' 브라우저를 위한 것이었고, 다른 하나는 '마이크로소프트 인터넷 익스플로러(Microsoft Internet Explorer)'를 위한 것이었죠. (당시 프론트엔드 개발자들에게 크로스 브라우징은 정말 큰 스트레스였답니다.)
그러다가 W3C(웹 표준을 정하는 기구)에서 마침내 하나로 통일된 웹 표준을 만들었지만, 브라우저들이 당장 이 표준을 그대로 적용할 수는 없었어요. 만약 웹 표준을 강제로 즉시 적용해 버리면, 예전 방식대로 만들어진 웹상의 수많은 기존 사이트들의 레이아웃이 엉망으로 깨져 보일 테니까요. 그래서 브라우저 개발사들은 새로운 웹 표준을 잘 지켜서 만든 사이트와, 예전 방식대로 만들어진 오래된 사이트(Legacy sites)를 다르게 처리하기 위해 '두 가지 모드'를 도입하게 되었습니다.
현재 웹 브라우저의 레이아웃 엔진(화면에 요소를 어떻게 배치할지 계산하고 그리는 엔진)에는 총 세 가지 모드가 존재합니다. 바로 쿼크 모드(quirks mode), 제한적 쿼크 모드(limited-quirks mode), 그리고 표준 모드(no-quirks mode) 예요.
- 쿼크 모드(quirks mode)에서는 브라우저가 예전 Navigator 4와 Internet Explorer 5 시절의 동작을 그대로 흉내(emulate) 냅니다. 웹 표준이 널리 채택되기 전에 만들어진 아주 오래된 웹사이트들이 화면에서 깨지지 않고 정상적으로 보이게 하려면 이 모드가 꼭 필요하기 때문이죠.
- 표준 모드(no-quirks mode)에서는 최신 HTML과 CSS 명세서(specifications)에 설명된 대로, 우리가 기대하는 가장 올바른 형태의 동작을 수행합니다. 여러분이 최신 기술로 개발할 때 화면이 렌더링되는 환경이 바로 이 모드입니다.
- 제한적 쿼크 모드(limited-quirks mode)에서는 쿼크 모드의 동작 중 아주 일부분의 예외적인 동작(quirks)들만 구현되어 적용됩니다.
참고로, '제한적 쿼크 모드'와 '표준 모드'는 예전에는 각각 "거의 표준(almost-standards)" 모드와 "완전한 표준(full standards)" 모드라는 이름으로 불리기도 했어요. 하지만 이제는 브라우저 간의 동작이 완벽하게 표준화되었기 때문에 명칭이 현재의 이름으로 변경되었답니다.
브라우저는 어떤 모드를 사용할지 어떻게 결정하나요?
HTML 문서의 경우, 브라우저는 문서의 맨 처음에 나오는 doctype(문서 타입 선언)을 보고 이 페이지를 쿼크 모드로 렌더링할지, 아니면 표준 모드로 렌더링할지 결정합니다. 여러분이 짠 코드가 최신 웹 표준인 '표준 모드'로 확실하게 동작하도록 보장하려면, 아래 예시 코드처럼 페이지 최상단에 doctype을 꼭 명시해 주어야 해요.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body></body>
</html>위 예제에 보이는 doctype인 <!doctype html>은 가능한 한 가장 단순한 형태이며, 현재 HTML 표준에서 공식적으로 권장하는 방식입니다. 구버전의 HTML 표준에서는 훨씬 길고 복잡한 형태의 doctype들을 권장하기도 했지만, 오늘날 존재하는 모든 브라우저는 이 짧은 <!doctype html>만 적어줘도 알아서 '표준 모드(no-quirks mode)'를 사용한답니다. 그러니 굳이 더 복잡한 doctype을 써야 할 타당한 이유는 이제 하나도 없어요. 만약 다른 형태의 doctype을 잘못 사용하게 되면, 원치 않게 '제한적 쿼크 모드'나 '쿼크 모드'가 실행되어 버릴 위험이 있으니 주의하셔야 합니다!
이 doctype은 HTML 문서의 제일 첫 부분, 즉 다른 어떤 콘텐츠나 태그보다도 무조건 가장 앞에 위치해야 합니다.
<!doctype html>을 쓰는 유일한 목적은 오직 '표준 모드(no-quirks mode)'를 활성화하는 것뿐이에요. 옛날 HTML 표준 시절의 doctype들은 문서의 규칙이나 버전 등 추가적인 의미를 제공하기도 했지만, 웹 브라우저들은 doctype을 다른 용도로는 전혀 사용하지 않고 오직 '어떤 렌더링 모드로 전환할지'를 결정하는 스위치 용도로만 써왔답니다.
어떤 경우에 브라우저들이 각각 다른 모드를 선택하는지에 대한 상세한 설명도 링크를 통해 확인해 보시면 좋습니다.
💡 강사의 실무 및 면접 팁:
리액트(React)나 넥스트(Next.js) 같은 최신 프레임워크로 프로젝트를 초기화할 때, 뼈대가 되는index.html파일을 열어보면 1번 줄에 어김없이<!DOCTYPE html>이 적혀 있는 것을 볼 수 있어요. 도구들이 알아서 세팅해 주다 보니 그 중요성을 간과하기 쉬운데요. 프론트엔드 취업 기술 면접에서는 "DOCTYPE을 선언하지 않으면 브라우저에서 어떤 일이 발생하나요?"라는 질문이 종종 나옵니다.
이때 "하위 호환성을 유지하기 위해 브라우저가 쿼크 모드(Quirks Mode)로 렌더링하게 되고, 이로 인해 레이아웃이 최신 CSS 표준과 다르게 깨지거나 의도치 않게 보일 수 있습니다."라고 명확히 답변하시면, 웹의 근본적인 렌더링 원리를 잘 이해하고 있다는 좋은 인상을 줄 수 있습니다!
XHTML
만약 여러분이 작성한 페이지를 HTTP 헤더의 Content-Type에 application/xhtml+xml MIME 타입을 사용하여 XHTML 포맷으로 제공한다면, 표준 모드를 활성화하기 위해 굳이 doctype을 넣을 필요가 없습니다. 서버에서 이런 형식으로 내려주는 문서들은 브라우저가 항상 자동으로 표준 모드를 사용하도록 약속되어 있거든요.
하지만 문서 내용을 XHTML 문법처럼 작성했더라도, 서버에서 제공할 때 일반적인 text/html MIME 타입을 사용해 제공한다면, 브라우저는 이것을 그냥 평범한 HTML로 읽어들입니다. 따라서 이 경우에는 브라우저에게 표준 모드를 사용하라고 알려주기 위해 반드시 doctype 선언이 필요합니다.
어떤 모드가 사용되고 있는지 어떻게 확인할 수 있나요?
만약 페이지가 쿼크 모드나 제한적 쿼크 모드로 렌더링되고 있다면, 파이어폭스(Firefox) 브라우저는 개발자 도구의 콘솔(Console) 탭에 경고 메시지를 남깁니다. 콘솔을 열었는데 이런 경고 메시지가 보이지 않는다면, 파이어폭스가 안전하게 표준 모드를 사용하고 있다는 뜻이에요.
자바스크립트(JavaScript)를 통해서도 문서가 쿼크 모드에 있는지 아닌지를 확인할 수 있어요. 브라우저 콘솔 창에 document.compatMode를 입력해 보세요. 만약 결괏값이 "BackCompat"(하위 호환성, Backward Compatibility를 의미해요)이라면, 현재 문서는 쿼크 모드 상태인 것입니다. 반대로 그 값이 아니라 "CSS1Compat"이라는 값이 나온다면, 문서는 안전한 표준 모드(또는 제한적 쿼크 모드)에 있다는 것을 의미합니다.
