브라우저 호환성

호환성의 목표는 모든 환경에서 화면을 픽셀 단위로 똑같이 만드는 데 있지 않다. 글꼴이나 렌더링 방식처럼 브라우저마다 고유한 차이가 있어도 사용자가 핵심 정보와 기능을 이용할 수 있도록 하는 데 있다.^[6]

브라우저에 따라 웹 애플리케이션이 다르게 보이거나 제대로 동작하지 않을 수 있으므로, 여러 브라우저에서 확인하는 크로스 브라우저 테스트가 필요하다.^[1][4]

웹 표준은 HTML, CSS, DOM, ECMAScript 등 웹에서 쓰이는 기술의 공통 기준이다. 이 기준에 따라 웹페이지를 작성하면 다양한 브라우저와 운영체제에서 의도한 정보와 기능을 제공하는 데 도움이 된다.^[6][7]

웹 호환성은 브라우저·운영체제·기기의 차이를 다루고, 웹 접근성은 장애인과 고령자를 포함한 이용자의 신체적·인지적 제약을 고려한다. 두 분야는 초점과 기준이 다르지만, 웹 표준 준수는 공통 기반이다.^[6]

브라우저의 렌더링 엔진은 HTML, CSS, JavaScript를 해석해 화면에 표시한다. 엔진의 차이는 웹페이지의 레이아웃과 동작이 브라우저마다 달라지는 원인 중 하나다.^[5]

브라우저별 기능 지원은 전체 기능의 미지원, 한 기능 안에서 일부 기능의 차이, 특정 브라우저 전용 기능으로 나타날 수 있다. 확장 프로그램 API에서도 브라우저마다 지원하는 함수와 함수 내부 기능이 다를 수 있다.^[3]

CSS에서 브라우저가 인식하지 못하는 선언은 무시되고 다음 선언으로 넘어간다. 반면 이해할 수 없는 선택자가 포함된 경우에는 해당 선택자 규칙 전체가 무시될 수 있다.^[2]

CSS 선언 하나가 유효하지 않아 무시되더라도 같은 규칙의 다른 유효한 선언은 적용될 수 있다. 예를 들어 색상 속성의 철자가 잘못되어도 글자 크기와 굵기를 지정한 선언은 적용될 수 있다.^[2]

브라우저가 인식하지 못하는 CSS 속성이나 값은 무시하고 다음 선언으로 넘어간다. 따라서 새 CSS 기능을 향상된 기능으로 사용하면, 이를 지원하지 않는 브라우저에서도 기본 폴백 스타일링을 제공할 수 있다. 브라우저별 렌더링 차이를 고려해 표준을 따르면서 유연하게 대응하는 것이 유용하다.^[2][5]

크로스 브라우저 테스트는 여러 브라우저에서 웹사이트의 표시와 기능을 확인하는 과정이다. 사용자 그룹이 직접 사용해 보는 방법이 있으며, Selenium 같은 자동화 도구로 버튼 동작을 확인하거나 브라우저별 화면 스크린샷을 비교할 수도 있다.^[4]

테스트 대상 브라우저와 환경을 늘리면 확인에 더 많은 시간과 비용이 들 수 있다. 서비스 로그와 실제 이용 환경을 참고해 지원 범위를 정하면 테스트 대상을 구체화하는 데 도움이 된다.^[5][8]

• 웹 표준
• 웹 접근성
• 크로스 브라우저 테스트

^[1] Wwww.freecodecamp.org(새 탭에서 열림)

^[2] Ddeveloper.mozilla.org(새 탭에서 열림)

^[3] Ddeveloper.mozilla.org(새 탭에서 열림)

^[4] Ddeveloper.mozilla.org(새 탭에서 열림)

^[5] Iiropke.com(새 탭에서 열림)

^[6] Iitwiki.kr(새 탭에서 열림)

^[7] Vvelog.io(새 탭에서 열림)

^[8] Wwww.browserstack.com(새 탭에서 열림)