목차
1. 표준모드란 무엇일까?
2. 호환모드란 무엇일까?
3. 표준모드/호환모드의 장단점
1. 표준모드란 무엇일까?
표준모드(Standard Mode)는 웹 페이지가 웹 표준에 맞게 제작되어 있는 경우에 적용된다. 즉, 웹 디자이너나 프로그래머들이 권장하는 규칙과 가이드라인에 따라 웹 페이지를 만들었을 때 해당 모드가 적용된다. 예를 들어, 웹 디자이너가 HTML과 CSS를 사용하여 웹 페이지를 만들 때, 이 두 가지 언어에 대한 규칙을 잘 따르면 그 페이지는 표준모드로 표시된다.
표준모드는 웹 페이지가 웹 브라우저에 의해 예상대로 표시되고 작동되도록 보장한다.
2. 호환모드란 무엇일까?
호환모드(Quirks Mode)는 예전에 만들어진 웹 페이지나 특정한 조건에서 만들어진 웹 페이지를 표시하는 데 사용된다. 이전에는 웹 표준이 명확하지 않았거나 웹 브라우저들이 표준을 일관되게 지원하지 않았을 때 호환모드가 많이 사용된다. 예를 들어, 1990년대에 만들어진 웹 페이지나 특정한 브라우저에 최적화된 웹 페이지들이 호환모드로 표시될 수 있다.
호환모드는 웹 페이지가 원래 디자인대로 표시되도록 하지만, 웹 표준에 따르지 않는 코드의 일부 기능이 예상치 못한 동작을 일으킬 수 있다.
표준모드 호환모드 쉬운 예시
호환모드는 학교 규칙이 명확하지 않았거나, 학교에서 새로운 규칙을 정하지 않았을 때 사용된다. 예를 들어, 예전에는 학생들이 자유롭게 옷을 입을 수 있었지만, 학교가 새로운 규칙을 만들기 전까지는 모든 학생이 자신의 스타일대로 옷을 입을 수 있다. 이것이 바로 호환모드이다.
그러나 새로운 규칙이 도입되면 학생들이 그 규칙에 따라 특정한 규격의 교복을 입어야 한다. 이것이 바로 표준모드에 해당된다. 학생들이 규칙에 맞춰 교복을 입으면 학교 규칙에 따라 학교 생활을 하게 된다.
따라서 호환모드는 학생들이 새로운 규칙이 도입되기 전에는 예전 방식대로 자신의 옷을 입을 수 있는 상태를 나타내며, 표준모드는 새로운 규칙에 맞춰 특정한 규격의 교복을 입는 것을 말한다.
그렇다면 브라우저는 문서가 최신인지 오래된 문서인지 어떻게 판단할까?
바로 문서 상단에 있는 DTD(Document Type Defination)를 보고 표준모드 혹은 호환모드로 렌더링한다.
먼저 DTD의 구성은 public 문자열과 FPI(Format Public Identifier), FSI(Format System Identifier)로 이루어져 있다.
1. FPI와 FSI 모두를 포함하는 doctype 선언 예
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2. FPI만 선언되어있는 doctype 선언 예
<!DOCTYPE HTML PUBLIC -"-//W3C//DTD HTML4.01 Tracsitional//EN">
표준모드/호환모드의 장단점
표준모드의 장점
- 웹 표준에 맞게 표시되므로 다양한 브로우저에서 일관된 방식으로 표시된다.
- 웹 표준에 따라 제작되었기 때문에 새로운 기능을 추가하거나 수정할 때 유지보수가 용이하다.
- 다양한 플랫폼 및 디바이스에서도 잘 작동하므로 크로스 플랫폼 호환성이 뛰어나다.
- 검색 엔진에서 더 잘 인식되고 색인화될 수 있어 검색 엔진 최적화를 위한 노력이 적어진다.
- 최신의 웹 기술이나 표준을 적용하여 더 많은 기능과 효과를 적용할 수 있다.
표준모드의 단점
- 표준을 준수하는 웹 페이지를 개발하는 데에는 추가적인 노력과 시간이 필요하다. 특히 초기에는 웹 표준에 대한 이해도가 부족할 수 있어서 구현하기 어려울 수 있다.
- 표준을 따르는 웹 페이지는 이전 버전의 브라우저에서 제대로 작동하지 않을 수 있다. 이는 특히 오래된 버전의 인터넷 익스플로러 등과 같은 브라우저에서 발생할 수 있다.
- 일부 브라우저는 웹 표준을 제대로 준수하지 않거나 해석하는 방식이 다를 수 있다. 이로 인해 동일한 페이지가 다른 브라우저에서 조금씩 다르게 표시될 수 있다.
호환모드의 장점
- 호환모드를 사용하면 이전에 만들어진 웹 사이트를 새로운 브라우저에서도 잘 작동하도록 유지할 수 있다.
- 예전에 만들어진 페이지를 수정하거나 업데이트할 때 호환모드를 사용하면 빠르게 개발할 수 있다.
- 레거시 시스템과의 통합이 필요한 경우 호환모드를 사용하여 이전 시스템과의 호환성을 유지할 수 있다.
- 이전 버전의 브라우저와의 호환성을 제공하여 사용자들이 오래된 브라우저를 계속 사용할 수 있도록 한다.
- 호환모드를 사용하여 기존 페이지를 유지하면서도 새로운 웹 표준을 준수하지 않아도 되기 때문에 새로운 웹 표준에 맞게 페이지를 업데이트하는 비용을 절감할 수 있다.
호환모드의 단점
- 과거의 웹 브라우저와의 호환성을 위해 디자인되었기 때문에 새로운 웹 표준을 준수하지 않거나 제대로 지원하지 않어 사용자 경험에 영향을 줄 수 있다.
- 이전의 웹 표준이나 브라우저 버전에 최적화되어 있기 때문에 새로운 기능 추가나 수정이 어려울 수 있다.
- 호환모드로 만들어진 페이지는 현대적인 웹 표준을 준수하는 페이지에 비해 성능이나 기능면에서 제약이 있을 수 있고, 이로 인해 사용자들의 경험이 저하될 수 있다.
'프론트엔드' 카테고리의 다른 글
| 브라우저의 렌더링 과정을 알아보자. (0) | 2024.03.30 |
|---|