[웹개발기술] 크로스 브라우징(Cross Browsing)에 대해 알아보기

<목차>

1. 크로스 브라우징이란 무엇인가?

2. 크로스 브라우징이란 개념이 생기게 된 이유는 무엇인가?

3. 크로스 브라우징은 어떻게 하는건데?

4.서비스 중에 발생할 수 있는 다양한 호환성에 대한 문제와 해결방법

5. Metatag의 다른 설정 방법 

 

---

1. 크로스 브라우징이란 무엇인가?

웹 페이지가 웹 브라우저의 종류에 구애받지 않고 제작자의 의도에 맞게 보여지거나 동작할 수 있게 하는 작업이다.

쉽게 말해, 

기기가 달라지더라도, 웹페이지가 일관된 서비스를 제공할 수 있도록 해 주는 작업이다.

 

 

---

 

2. 크로스 브라우징이란 개념이 생기게 된 이유는 무엇인가?

 

이유를 말하려면 웹브라우저에 대해 이야기할 필요가 있다.

• 웹 브라우저는 사용자들이 웹 콘텐츠를 이용할 수 있도록 편리한 인터페이스를 제공해주는 소프트웨어이다.

 

위의 그림은 우리가 웹브라우저로 웹페이지를 열람할 때 웹브라우저가 수행하는 작업을 나타낸 그림이다.

 

1. 우리가 주소창에 url을 입력해 웹페이지를 가져오면, 브라우저는 가장 먼저 웹페이지의 코드를 가져다 읽는다.
2. 그 코드를 해석해서 해석된 결과를 화면으로 보여준다. 이러한 과정을 우리는 렌더링이라는 용어로 표현한다.

 

 

브라우저 내부에서 렌더링을 담당하는 소프트웨어 장치를 가리켜 렌더링 엔진 이라고 부른다.

 

 

• 웹 브라우저는 종류가 한두가지가 아니다. 위와같이, 크롬, 인터넷익스플로러(2021.6서비스종료), 파이어폭스, 사파리등 웹브라우저의 종류는 생각보다 다양하다.
• 문제는 웹브라우저들에 탑재되어 있는 렌더링 엔진이 각각 다르다는 점이다.
• 화면에는 각 브라우저별로 렌더링 엔진이 표시되어 있다.

 

각각의 브라우저가 서로다른 렌더링 엔진을 사용함으로 인해 같은 html, css 코드를 가져 왔을 때에도,

화면에 보이는 결과물이 조금씩 다르게 만들어 지는 현상이 발생하곤 한다.

 

이러한 문제를 최소화하기 위해서 진행하는 작업이 바로 크로스브라우징 이라는 작업이다.

 

여기서 문제를 최소화 한다는 표현에 주목할 필요가 있다.

 

서로 다른 브라우저에서 모두 완벽히 같은 결과가 나오게 하는 것이 아니라, 최소화 한다고 굳이 표현한 이유는 기기나 플랫폼의 종류가 무척 다양하고, 그 안에서 사용하는 브라우저의 종류또한 아주 다양하기 떄문에 사실상 모든 상황에서 같은 결과가 나온다는 것은 현실적으로 불가능하기 때문이다.

 

따라서 크로스브라우징이란 결과를 같게 하는게 아니라,
차이를 최소화하고,
중요한 스타일이나 동작이 잘 서비스 되게 하는 작업이다 라고 이해해보자.

 

---

 

3. 크로스 브라우징은 어떻게 하는건데?

1. 크로스 브라우징 작업을 하는 가장 정직한 방법은 역시 완성된 웹페이지를 각 브라우저에서 로드해 보면서 직접 사용성 테스트를 해보는 것이다.

 

예를들어, 

크롬에서는 이렇게 버튼이 이런데, 사파리에서는 저렇게 나오네, 이런걸 발견하게 되는 경우가 있을 것이다.

이런 경우, 사용자가 서비스를 이용하는데, 에로 사항이 발생하지 않는 선에서 코드를 수정 및 보완해 가며 작업을 진행해 주면 된다.

 

이 때는 , 화면을 동일하게 만드는 것이 아니고,

일관된 서비스를 제공할 수 있도록 하는것이 궁극적인 목표라고 할 수 있다.

 

 

+ 추가

• 웹 페이지의 사용성 테스트를 일일이 해보기 전에, 웹페이지 기획 단계에서 그 부분을 고려해 기획하면, 수고를 훨씬 덜 수가 있을 것이다.
• 우리가 어떤 브라우저를 타겟으로 할 것인지, 브라우저의 어떤 버전까지 서비스를 할건지 등을 미리 결정하고, 작업을 시작하면 크로스 브라우징에 대한 부담은 훨씬 줄어들 것이다 .

 

---

 

4. 서비스 중에 발생할 수 있는 다양한 호환성에 대한 문제와 해결방법

 

 

 

4-1. 크로스 브라우징 시 예상되는 대표적인 문제점들.

문제점
1. 레이아웃 문제	브라우저마다 레이아웃 엔진이 다르기 때문에, 동일한 웹 페이지가 각각 다른 브라우저에서 다르게 표시될 수 있다.
2. 자바스크립트 문제	다른 브라우저에서 자바스크립트의 처리 방식이 다를 수 있기 때문에, 동일한 스크립트가 모든 브라우저에서 작동하지 않을 수 있다.
3. 폰트 문제	다른 운영체제에서 다른 글꼴이 기본적으로 제공되기 때문에, 동일한 폰트가 모든 브라우저에서 동일하게 표시되지 않을 수 있다.
4. 이미지 문제	다른 브라우저에서 이미지 포맷의 지원 범위가 다를 수 있으므로, 이미지가 제대로 표시되지 않을 수 있다.
5. 기능 문제	브라우저에서 지원하는 HTML, CSS, 자바스크립트 기능이 다를 수 있으므로, 일부 브라우저에서는 작동하지 않는 기능이 있을 수 있다.
6. 브라우저 호환성 문제	각 브라우저에서 지원하는 웹 표준 버전이 다를 수 있으므로, 호환성 문제가 발생할 수 있다.
7. 보안문제

 

4-2. 해결방법.

1. 레이아웃 문제 : 각 브라우저에 맞는 CSS 스타일을 적용한다.

 

2. 자바스크립트 문제 : 특정 브라우저에서만 실행되는 조건부 코드를 작성해야 한다.

 

3. 폰트 문제 : 웹 폰트를 사용하거나 대체 폰트를 지정해야 한다.

 

4. 이미지 문제 : 다양한 이미지 포맷을 사용하거나 이미지 변환 도구를 사용하여 모든 브라우저에서 호환되는 형식으로 변환해야 한다.

 

5. 기능 문제 : 브라우저에서 지원하는 기능을 확인하고, 대안 기능을 사용하거나 조건부 코드를 작성해야 한다.

 

6. 브라우저 호환성 문제 : 브라우저별로 지원되는 웹 표준 버전을 확인하고, 그에 맞게 코드를 작성한다.

 

7. 보안문제 : 보안 이슈가 있는 코드를 수정하고, 보안에 취약한 브라우저에서는 추가적인 보안 조치를 취한다.

 

 

---

 

5. Metatag의 다른 설정 방법

 

크로스브라우징을 위해 자주 사용하는 meta tag와 그 작성법

 

1. 브라우저 호환성 모드 설정 : 아래와 같은 코드를 HTML 문서의 head 섹션에 추가하여 호환성 모드를 설정

<meta http-equiv="X-UA-Compatible" content="IE=edge">

 

2. Viewport 설정 : 모바일 장치에서의 뷰포트를 설정하기 위해 아래와 같은 코드를 HTML 문서의 head 섹션에 추가

<meta name="viewport" content="width=device-width, initial-scale=1">

 

3. 문자 인코딩 설정 : 다양한 브라우저에서 문자 인코딩을 일관되게 처리하기 위해 아래와 같은 코드를 HTML 문서의 head 섹션에 추가

<meta charset="UTF-8">

 

4. 검색 엔진 최적화를 위한 meta tag : 검색 엔진에서 웹 페이지를 분석할 때 사용되는 정보를 설정

<meta name="description" content="페이지에 대한 간단한 설명">
<meta name="keywords" content="페이지와 관련된 키워드">
<meta name="author" content="저자 이름">
<meta name="robots" content="index,follow">

 

5. iOS 관련 meta tag : iOS 기기에서 Safari 브라우저를 사용하는 경우, 아래와 같은 코드를 추가하여 웹 앱에 대한 정보를 설정합니다.

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-startup-image" href="apple-touch-startup-image.png">

 

 

위와 같은 meta tag들은 크로스브라우징을 위해 자주 사용되는 것들이다.

 

하지만 브라우저 호환성이 높아짐에 따라 이러한 meta tag들이 더 이상 필요하지 않은 경우도 있으니

상황에 따라 적절하게 선택하여 사용해야 한다.

---

 

ps 글을 마치며...

 

크로스 브라우징에 대해 알아봤는데, 통합브라우징(Integration Browing) 이 된다면 이런 복잡한 작업을 하지 않아도 될텐데,, 라는 생각이 들었다. 혹시나 해서 구글에 검색해 봤는데, 다음은 gpt의 대답이다.

 

통합 브라우징(Integrated browsing)은 여러 웹 브라우저를 하나의 인터페이스에서 통합하여 사용할 수 있는 기술을 말합니다.
즉, 사용자가 하나의 창에서 여러 웹 브라우저를 열지 않아도 되며, 하나의 창에서 여러 웹사이트를 동시에 탐색할 수 있습니다.
이러한 통합 브라우징 기술은 다수의 웹 브라우저를 동시에 사용해야 하는 경우에 유용합니다.
예를 들어, 여러 개의 웹사이트를 비교 분석해야 하는 경우나, 특정 웹사이트가 특정 브라우저에서만 제대로 작동하는 경우 등이 있습니다.
통합 브라우징은 여러 웹 브라우저를 하나의 인터페이스에서 통합하는 것뿐만 아니라, 여러 탭을 이용해 동시에 여러 웹사이트를 볼 수 있도록 하고, 북마크와 기록 등의 기능도 하나의 인터페이스에서 관리할 수 있도록 합니다. 대표적인 통합 브라우저로는 구글 크롬, 모질라 파이어폭스 등이 있습니다.

내가 생각하는 통합 브라우징은, 하나의 코드로 모든 브라우저에서 적용되는 것이였는데,

 

같은용어로 위와같은 기술이 있다는것을 확인했고, 내가생각하는 용어는 아니였다..

 

추가로 통합 브라우징에 대해 검색해봤지만,

따로 용어가 나오진 않는거 보면, gpt가 혼자 지어낸 말인 것으로 파악된다.

 

끝맺음이 마음에 안들지만, 여기서 마무리하겠다. 

---

<reference site>

https://www.youtube.com/watch?v=46yfZj-hMMc&ab_channel=%EC%9C%A0%EB%85%B8%EC%BD%94%EB%94%A9 

 

https://velog.io/@my_suwan/CSS-Safari-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-%ED%81%AC%EB%A1%9C%EC%8A%A4-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A7%95-%ED%95%98%EA%B8%B0

[CSS] Safari 브라우저에서 크로스 브라우징 하기

 

 

https://velog.io/@dosomething/%ED%81%AC%EB%A1%9C%EC%8A%A4%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A7%95-%ED%8C%81

크로스브라우징 이슈 해결 사례

https://www.youtube.com/watch?v=7yZNi-Go9Mg&t=222s&ab_channel=%EB%A6%AC%EB%B2%A0%ED%95%98%EC%96%80 

https://velog.io/@dhksl823/%ED%81%AC%EB%A1%9C%EC%8A%A4-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A7%95Cross-browsing%EC%9D%B4%EB%9E%80

크로스 브라우징(Cross browsing)이란?