크로스 브라우징이란?
1. 크로스 브라우징(상호 호환성)이란?
크로스 브라우징이란 브라우저 간 웹 페이지의 상호 호환성을 뜻한다. 브라우저들은 사용하는 OS가 다르고, 렌더링 엔진이 다르기 때문에 사실상 모든 브라우저에서 100% 똑같은 화면이 보이게 하는 것은 매우 어렵다. 표준 웹 기술을 사용하여 운영체제, 브라우저 등 어느 한쪽으로 최적화되거나 종속되지 않도록 공통 요소를 사용하여 웹 페이지를 제작해야 한다. 그렇기 때문에 크로스 브라우징을 통해 웹접근성을 높여야 하는 것이다.
- 웹 표준을 준수하지 않고 특정 운영체제와 브라우저에 종속되어 있다면 다양한 운영체제 환경 및 브라우저에서의 사용이 불가능한 문제점이 발생하게 된다. 웹 페이지가 웹 브라우저의 종류에 구애받지 않고, 제작자의 의도에 맞게 보이거나 동작할 수 있게 하는 작업해야 한다. 기기나 플랫폼의 종류가 달라지더라도 웹 페이지가 일관된 서비스를 제공할 수 있도록 해준다.
- 웹 브라우저는 사용자들이 웹 콘텐츠를 이용할 수 있도록 편리한 인터페이스를 제공해 주는 소프트웨어다. 우리가 주소창에 URL을 입력해 웹 페이지를 가져오면 브라우저는 가장 먼저 해당 웹 페이지의 코드를 가져다 읽는다. 그리고 그 코드를 *파싱 해서 해석된 결과를 화면으로 보여준다. 이러한 과정을 *렌더링이라고 한다.
- 브라우저 내부에서 렌더링을 담당하는 소프트웨어 장치를 *렌더링 엔진이라고 부른다. 구글, 사파리, 파이어폭스 등 웹 브라우저의 종류는 다양하다. 문제는 웹 브라우저마다 탑재된 렌더링 엔진이 각각 다르다. 그래서 같은 HTML, CSS 코드를 가져오더라도 화면에 보이는 결과물이 조금씩 다르다.
이러한 문제를 최소화하기 위해서 하는 작업이 크로스 브라우징이다.
🔎 최소화한다? 최소화한다는 표현을 하는 것은 기기나 플랫폼의 종류가 다양하고, 그 안에서 사용하는 브라우저의 종류 또한 무척 다양하기 때문에 사실상 모든 상황에서 같은 결과가 나온다는 것은 현실적으로 불가능하다. 따라서 크로스 브라우징이란 결과를 같게 하는 것이 아니라 차이를 최소화하고, 중요한 스타일이나 동작이 잘 서비스되게 하는 작업이다.
2. 크로스 브라우징은 어떻게 하는 걸까?
- 완성된 웹 페이지를 각 브라우저마다 로드해 보면서 직접 사용성 테스트를 해보는 것이다. 크롬에서 이렇게 나오네? 사파리에서 이렇게 나오네? 이런 식으로 발견할 수 있다.
- 사용자가 서비스를 이용하는데 문제가 발생하지 않는 선에서 코드를 수정 및 보완하면서 작업을 진행한다.
- 화면을 동일하게 만드는 게 아니라 일관된 서비스를 제공하는 것이 궁극적인 목표다.
1) 기획 단계
웹 페이지 사용성 테스트를 일일이 해보기 전에 웹 페이지 기획 단계에서 그 부분을 고려해 기획하면 수고를 훨씬 덜 수 있다. 어떤 브라우저를 타겟으로 할 건지? 브라우저의 어떤 버전까지 서비스할 건지? 등을 미리 결정하고, 작업을 시작하면 크로스 브라우징에 대한 부담이 훨씬 줄어들 것이다.
2) 개발
기획 내용에 맞춰 실제 개발을 진행하는데, 이때 브라우저 호환성을 파악하고 고려하여 코드에 적용해야 한다.
3) 크로스 브라우징 테스트
기능 구현된 웹 페이지 완성 후에 각 브라우저에서 사용성 테스트를 하면서 수정해 나간다.
3. 어떤 부분을 테스트해야 할까?
모든 부분을 테스트할 수 없을 수 있다. 상호 호환성을 테스트할 때 많은 필수 사항이 있다.
1. 기본 기능: 링크, 대화 상자, 메뉴 등
- 모든 대화 상자, 메뉴가 잘 작동하는가?
- 양식 필드의 유효성 검사가 올바르게 작동하는가? 등
2. 그래픽 사용자 인터페이스: 응용 프로그램의 모양과 느낌
- 폰트, 이미지, 레이아웃 등이 디자인대로 잘 나오는가?
3. 응답: 애플리케이션이 사용자 작업에 얼마나 잘 반응하는가?
4. 반응형: 다양한 화면 크기와 방향에 맞는지 확인
4. 상호 호환성 확인 사이트
Can I Use…: https://caniuse.com/
Mozila
스택카운터
'공부 모음집 > WEB' 카테고리의 다른 글
| 웹 서버와 호스팅 그리고 클라우드 호스팅/ FTP 프로그램 (1) | 2023.10.13 |
|---|---|
| 검색엔진 최적화(SEO)와 OG 작업 (0) | 2023.10.07 |
| 브라우저 렌더링 과정 (0) | 2023.08.20 |
| 웹 표준과 웹 접근성 (누구나, 어떤 환경에서나⭐) (0) | 2022.11.29 |
| MS 익스플로러 지원 종료 (0) | 2022.11.23 |