[study] Web Standards

Yuhallo·2023년 2월 27일

웹 표준의 의의

인터넷이 널리 보급되고 웹 사이트가 많아짐에 따라 각각 브라우저가 각기 다른 방식으로 웹 페이지를 해석하고 표시하게 되면서 호환성 문제가 발생했습니다. 개발자들은 각 브라우저에 맞게 웹 페이지를 작성해야 했고, 개발 시간과 비용이 증가했습니다.

따라서 W3C와 같은 기관이 탄생해 브라우저 간 호환성 문제를 해결하고 웹 개발의 생산성을 향상시키기 위해 웹 표준을 제정하게 되었습니다. 웹 표준을 통해 모든 브라우저가 동일한 웹 페이지를 정확하게 표시할 수 있게 되어, 개발자들은 효율적인 웹 페이지 작성이 가능해졌습니다.

W3C (World Wide Web Consortium)

웹 표준을 정하는 기관은 W3C(World Wide Web Consortium)입니다. 국제적으로 인터넷 기술의 표준화를 촉진하고 관리하는 비영리 조직입니다. 다양한 워킹 그룹을 운용하고, 각 그룹은 특정 분야의 기술 개발을 담당합니다. 웹 표준 제정 외에도 웹 기술 개발의 방향성을 제시하고 다양한 웹 기술을 지원하는 소프트웨어 개발도 진행하고 있습니다.

웹 표준의 필요성

우선 다양한 기기와 브라우저에서 웹 사이트가 일관되게 보여지도록 하기 위함입니다. 모바일 기기와 데스크톱 컴퓨터에서 모두 웹 사이트가 정확히 동일하게 보이도록 하려면, 구현할 때 특정한 규칙과 표준을 준수해야 합니다. 이를 통해 사용자는 어떤 기기나 브라우저를 사용하더라도 일관된 사용 경험을 제공받을 수 있습니다. 이는 웹 페이지가 브라우저 종속성에 벗어나 크로스 브라우징이 가능해져 더 많은 사용자에게 웹 페이지를 제공할 수 있습니다.

그리고 검색 엔진 최적화를 위해서 입니다. 웹 표준을 준수하는 웹 사이트는 웹 페이지의 구조와 내용이 명확해 검색 엔진 크롤러가 쉽게 인식하고 색인화할 수 있어 도움을 줄 수 있고 유지보수가 용이합니다. 웹 표준을 준수하면 모든 사용자가 동일한 방식으로 웹 사이트에 접근할 수 있어 웹 접근성도 개선됩니다.

웹 표준 준수

웹 표준 준수 방법

Doctype 선언

DOCTYPE은 HTML 문서에서 어떤 버전의 HTML이 사용되는지를 웹 브라우저와 검색 엔진에 알리는 역할을 합니다. 즉, 웹 브라우저가 문서를 올바르게 해석하도록 지시합니다. 따라서 올바른 DOCTYPE 선언은 웹 표준 준수의 핵심 요소 중 하나입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>웹 페이지 제목</title>
  </head>
  <body>
    <h1>웹 페이지 내용</h1>
  </body>
</html>

HTML5 문서에서는 다음과 같이 DOCTYPE을 선언합니다. 이와 같은 DOCTYPE 선언은 웹 브라우저와 검색 엔진에서 해당 문서를 HTML5 문서로 인식하게 됩니다. 이는 문서가 웹 표준을 준수하고 있음을 알리는 중요한 요소 중 하나입니다. 따라서 모든 HTML 문서에서 올바른 DOCTYPE 선언을 하는 것이 좋습니다.

유효한 HTML, CSS 코드 작성

유효한 HTML, CSS 코드 작성은 웹 표준 준수를 위한 중요한 요소 중 하나입니다. HTML과 CSS는 웹 페이지를 구성하는 가장 기본적인 언어이며, 올바르게 작성되지 않은 코드는 웹 사이트의 렌더링 문제를 일으키거나 검색 엔진 최적화에도 부정적인 영향을 미칠 수 있습니다.

검색 엔진은 웹 페이지의 구조를 이해하여 콘텐츠를 분석하고 인덱싱하는데 사용되는데, 유효하지 않은 HTML 코드는 페이지 구조의 이해를 방해하고 검색 엔진이 적절한 콘텐츠를 인식하지 못하게 할 수 있습니다.

또한, CSS 코드도 웹 페이지의 레이아웃 및 스타일링에 중요한 역할을 합니다. 유효하지 않은 CSS 코드는 페이지의 스타일을 일관되게 적용하지 못하게 하고, 페이지의 레이아웃을 깨뜨리거나 불필요한 코드를 생성하여 페이지 로딩 속도를 늦출 수 있습니다.

따라서, 웹 표준을 준수하면서 유효한 HTML, CSS 코드를 작성하는 것은 검색 엔진 최적화에도 유리하며, 웹 사이트의 성능과 사용자 경험에도 긍정적인 영향을 미칩니다. 이를 위해 W3C Markup Validation Service나 CSS Validator와 같은 검증 도구를 사용하여 코드를 검증하고 수정하는 것이 좋습니다.

웹 접근성 고려

웹 접근성은 모든 사용자들이 웹 사이트를 이용할 수 있도록 하는 것을 의미합니다. 장애인, 노인, 시각적, 청각적 장애를 가진 사용자들이 웹 사이트를 이용할 수 있어야 하며, 이를 위해서는 웹 사이트가 웹 접근성 지침을 따라 개발되어야 합니다.

웹 표준 준수는 웹 접근성을 고려하는 데 매우 중요한 역할을 합니다. 웹 표준을 준수하면 웹 사이트가 모든 브라우저와 기기에서 동일하게 작동하며, 접근성이 뛰어나게 개발될 수 있습니다. 웹 표준을 따르면 웹 사이트가 보안적이며, 웹 접근성 준수를 보장할 수 있습니다.

웹 접근성과 웹 표준 준수를 함께 고려하면, 모든 사용자들이 웹 사이트를 보다 쉽고 효율적으로 이용할 수 있습니다. 이는 사용자 경험을 향상시키고, 검색 엔진 최적화에도 긍정적인 영향을 미칩니다. 따라서 웹 사이트를 개발할 때는 웹 표준 준수와 웹 접근성을 고려하여야 합니다.

브라우저 호환성

브라우저 호환성은 다양한 웹 브라우저에서 동일한 웹 페이지가 동일한 방식으로 표시되도록 하는 것을 말합니다. 즉, 웹 페이지가 모든 브라우저에서 작동하도록 보장하는 것입니다. 브라우저 호환성을 고려하는 것은 모든 사용자가 웹 사이트를 이용할 수 있도록 하는 데 매우 중요합니다.

웹 페이지를 개발할 때 브라우저 호환성과 웹 표준 준수를 모두 고려하면 모든 사용자에게 일관된 경험을 제공할 수 있습니다. 이는 사용자의 만족도를 높이고, 웹 사이트의 성능과 검색 엔진 최적화를 향상시키는 데 도움이 됩니다.

웹 표준 문서 참고

웹 표준문서는 웹 개발에서 매우 중요한 역할을 합니다. 웹 표준문서는 W3C(World Wide Web Consortium)에서 발표한 웹 관련 기술의 표준 사양을 의미합니다. 이러한 웹 표준문서를 참고하면 웹 페이지의 구조, 디자인, 기능 등을 구현하는 데 있어서 보다 정확하고 일관성 있게 작업할 수 있습니다.

웹 표준 준수를 위해서는 HTML, CSS, JavaScript 등의 웹 관련 기술을 잘 이해하고, W3C에서 제공하는 웹 표준문서를 참고하여 적절한 방법으로 코드를 작성하는 것이 필요합니다.

웹 표준 준수 확인과 검증

웹 표준 준수를 고려한 웹 사이트 개발이 완료되면, 해당 사이트가 실제로 웹 표준을 준수하는지 확인하고 검증해야 합니다. 이를 위해서는 다양한 검사 도구를 활용할 수 있습니다.

🎀 W3C Markup Validation Service
웹 문서의 HTML, XHTML, CSS 코드를 검증하여 웹 표준을 준수하는지 여부를 확인할 수 있습니다. 검증하고자 하는 문서의 URL을 입력하거나 로컬파일로 업로드하여 검증할 수 있습니다. 검증 결과는 에러, 경고, 메시지 등으로 나타나며, 이를 바탕으로 문서를 수정하여 웹 표준을 준수할 수 있습니다.

🎀 WAVE(Web Accessibility Evalution Tool)
웹 접근성 평가 도구 중 하나로, 웹 페이지의 웹 접근성을 평가하고 개선하는데 사용됩니다. WAVE는 사용자가 웹 페이지에 대한 접근성 문제를 확인할 수 있도록 다양한 보고서와 개선 제안을 제공합니다. 사용자는 WAVE를 사용하여 쉽게 식별된 문제를 수정할 수 있는 개선 제안과 함께 페이지의 HTML코드를 검사할 수 있습니다. 또한, WAVE 개발자 도구와 같이 동작하여 실시간으로 페이지의 웹 접근성 문제를 검사하고 수정할 수 있습니다.

🎀 Google PageSpeed Insights
웹 사이트의 성능을 분석해 개선점을 제시해줍니다. 사이트를 더 빠르게 로드할 수 있도록 개선할 수 있는 다양한 방법을 제안하고, 데스크탑 및 모바일 버전에 대한 분석을 제공합니다. 광범위한 성능 지표를 제공하며, 사이트의 속도, 로딩 시간, 페이지 구성 요소의 용량 등을 분석하여 개선할 수 있는 점을 제안합니다. 이런 피드백을 바탕으로 개발자는 성능 최적화를 위한 적절한 대책을 취할 수 있습니다.

🎀 CrossBrowserTestion
웹 사이트의 크로스 브라우징 호환성을 검증하는 클라우드 기반의 웹 애플리케이션 테스트 서비스입니다. 이 서비스를 사용하면 다양한 운영체제, 브라우저, 기기에서 웹 사이트의 동작을 테스트하고, 버그를 식별하고 해결할 수 있습니다. 사용자가 직접 브라우저와 기기를 구매하거나 구성할 필요 없이, 클라우드에서 모든 테스트를 수행할 수 있도록 지원합니다. 또한, 사용자는 해당 서비스에서 제공하는 다양한 스크린샷 및 비디오 레코딩 기능을 활용하여 웹 사이트의 렌더링 및 동작 상태를 확인할 수 있습니다. 외에도 웹 사이트의 성능, 보안, UI/UX 등 다양한 측면을 테스트할 수 있는 다양한 기능을 제공합니다. 이를 통해 웹 사이트의 품질을 향상시키고, 다양한 사용자 환경에서의 최적화된 웹사이트를 제공할 수 있다.

개발자는 자체적으로 코드를 검사하여 웹 표준을 준수하도록 노력할 수 있습니다. 이를 위해서는 웹 표준과 관련된 문서와 가이드를 숙지하고, 코드 리뷰를 통해 팀원 간의 협업을 강화하는 것이 필요합니다.

웹 표준 준수를 고려한 개발이 완료되고 검증이 끝난 후에도, 정기적으로 유지 보수하고 업데이트해야합니다. 새로운 기능을 추가하고, 보안을 강화하고, 성능을 개선하는 등을 수행하며 웹 표준 준수를 유지할 수 있습니다.

검색 엔진 최적화

웹 표준 준수는 검색 엔진 최적화에도 중요한 역할을 합니다. 검색 엔진은 웹 페이지를 크롤링하여 분석하고 색인화합니다. 이 때, 검색 엔진은 웹 페이지의 구조와 내용을 이해하기 위해 웹 표준을 준수하는 페이지를 우선적으로 색인화하고 검색 결과 상위에 노출시키는 경향이 있습니다.

또한, 웹 표준을 준수함으로써 웹 페이지의 로딩 속도를 개선할 수 있습니다. 웹 페이지의 로딩 속도는 검색 엔진의 검색 결과 노출에도 영향을 미치는 요소 중 하나입니다. 웹 페이지가 빠르게 로딩되면 검색 엔진은 이를 더욱 좋은 사용자 경험을 제공하는 페이지로 평가하고, 검색 결과 상위에 노출시킵니다.

🎀 검색 엔진 관련

크롤링 : 검색엔진이 웹 페이지를 수집하는 과정, 검색 엔진은 자동으로 웹 페이지를 탐색하여 페이지 내용을 수집하고 분석하여 검색 인덱스에 저장한다. 이를 통해 수 많은 웹 페이지를 빠르게 분석해 검색 질의에 대한 검색 결과를 반환할 수 있다.

색인화 : 수집한 웹 페이지 내용을 분석해 인덱스를 생성하는 과정이다. 적절하게 데이터를 분석해 각 검색어에 대한 페이지 정보를 색인화하고 이를 기반으로 검색 결과를 반환한다.

최적화 방법

시맨틱 마크업

시맨틱 HTML은 웹 페이지의 구조와 의미를 명확하게 전달하기 위해 HTML 태그를 사용하는 방법입니다. 시맨틱 HTML은 웹 페이지의 구조를 정의하고 각 요소가 어떤 의미를 가지는지 명확하게 표현함으로써 웹 사이트의 검색 엔진 최적화(SEO)를 개선하고 웹 접근성을 향상시킬 수 있습니다.

시맨틱 HTML은 일반적인 태그 대신에 의미론적인 의미를 가진 태그를 사용하여 콘텐츠를 마크업하는 것입니다. 예를 들어, <div> 태그를 사용하여 레이아웃을 구성하는 것 대신에 <header>, <nav>, <main>, <footer> 등의 의미 있는 태그를 사용하여 웹 페이지의 구조를 정의할 수 있습니다.

시맨틱 HTML을 사용하면 협업시 id와 class에 대해 협의하는 시간을 줄일 수 있고, 웹 페이지의 구조가 명확하게 전달되어 검색 엔진이 콘텐츠를 더 잘 이해할 수 있습니다. 또한 시각 장애인이나 다른 장애를 가진 사용자들이 스크린 리더를 사용하여 콘텐츠를 이해하는 데 도움이 되어 웹 접근성을 향상시킬 수 있습니다.

이미지 태그의 alt 속성 사용

이미지 태그의 alt 속성은 이미지를 로드할 수 없는 상황에서 대체 텍스트를 제공하며, 시각 장애인과 같은 장애를 가진 사용자가 스크린 리더기를 사용할 때 이미지의 내용을 전달하는 데 중요한 역할을 합니다.

검색 엔진에서도 alt 속성을 이용해 이미지의 내용을 이해하고 인덱싱할 수 있기 때문에, 검색 엔진 최적화에도 중요한 역할을 합니다. 적절한 대체 텍스트를 입력하면 검색 엔진은 해당 이미지를 포함한 웹 페이지를 더 잘 인덱싱할 수 있으며, 이를 통해 더 나은 검색 결과를 제공할 수 있습니다.

하지만 alt 속성을 과도하게 사용하거나, 무의미한 키워드를 포함하는 등 alt 속성의 오용은 검색 엔진에서 스팸으로 분류될 수 있습니다. 따라서 alt 속성을 적절하게 활용하면 검색 엔진 최적화에 도움이 되며, 오용하지 않도록 주의해야 합니다.

링크 텍스트 활용

링크 텍스트(link text)는 해당 링크가 가리키는 웹 페이지를 설명하는 단어나 문구를 말합니다. 링크 텍스트는 사용자가 해당 링크를 클릭했을 때 이동하는 페이지의 내용을 예측할 수 있도록 도와주는 역할을 합니다.

검색 엔진은 링크 텍스트를 이용하여 해당 페이지의 내용을 파악하는 데 중요한 역할을 합니다. 따라서 링크 텍스트를 잘 활용하면 검색 엔진에서 해당 페이지의 노출을 높일 수 있습니다.

하지만 링크 텍스트를 너무 강조적으로 사용하면 스팸으로 인식될 수 있으므로 적절한 사용이 필요합니다. 링크 텍스트를 활용하여 검색 엔진 최적화를 위한 방법으로는 다섯가지가 있습니다.

명확하고 구체적으로 페이지 내용을 설명하는 텍스트를 사용합니다.
링크 텍스트가 페이지 내용과 관련성이 있도록 합니다. 즉 관련성 없는 링크텍스트를 사용하지 않습니다.
동일한 페이지 내에서 같은 링크 텍스트를 사용하지 않습니다.
링크 텍스트를 마우스 오버 시 변화시키지 않습니다. 예컨대 ‘여기’와 같은 링크 텍스트 대신 구체적인 텍스트를 사용합니다.
링크 텍스트가 깨지지 않도록 href 속성을 제대로 설정합니다. href 속성을 누락하거나 잘못 설정하면 검색 엔진이 해당 페이지를 인식하지 못할 수 있습니다.

이러한 방법을 활용하여 링크 텍스트를 적절하게 사용하면 검색 엔진 최적화를 향상시킬 수 있습니다.

레이아웃 디자인

검색 엔진은 HTML 코드를 분석하여 페이지의 컨텐츠와 디자인 요소를 식별합니다. 따라서 레이아웃 디자인도 검색 엔진에게 중요한 역할을 합니다.

일반적으로 레이아웃 디자인에서는 CSS를 사용하여 페이지를 디자인합니다. 이때 CSS를 적용하는 방법에 따라 검색 엔진이 컨텐츠를 어떻게 해석할지가 달라집니다. 예를 들어, CSS를 외부 파일로 저장하면 검색 엔진이 이를 따로 로드하여 해석해야 하기 때문에 페이지 로딩 속도가 느려지는 문제가 발생할 수 있습니다. 또한, CSS에서 display: none 속성을 사용하여 특정 요소를 숨기는 것도 검색 엔진에서는 해당 요소가 존재하지 않는 것으로 인식되어 SEO에 부정적인 영향을 끼칠 수 있습니다.

따라서 검색 엔진 최적화를 고려한 레이아웃 디자인을 위해서는 다음과 같은 요소들을 고려해야 합니다.

CSS는 가능한 인라인 방식으로 사용하여 HTML 문서에 포함시키거나, 내부 스타일 시트로 작성합니다. 외부 파일로 분리해 사용하는 경우에는 CSS 파일의 용량을 최소화하고 캐싱 기능을 활용합니다.
텍스트와 이미지 등 컨텐츠를 표현하는 요소들은 HTML 태그로 사용합니다. 가능한 시맨틱한 HTML 태그를 사용하여 의미론적인 정보를 전달합니다.
display: none 속성보다는 visibility: hidden 속성을 사용하여 요소를 숨깁니다. 또한, 사용자 경험을 위해 숨겨진 요소가 필요한 경우에는 aria-hidden 속성을 사용하여 스크린 리더 등 보조기기에서 인식하지 않도록 합니다.
웹 폰트를 사용하는 경우, 다양한 브라우저에서 호환되는 폰트 포맷을 지원하는 것이 좋습니다. 또한, 폰트 용량을 최소화하고 캐싱 기능을 활용하여 페이지 로딩 속도를 높이는 것이 중요합니다.

위와 같은 요소들을 고려하여 레이아웃 디자인을 구성하면 검색 엔진 최적화를 고려한 웹 사이트를 제작할 수 있습니다.

불필요한 코드 제거

불필요한 코드를 제거하는 것은 검색 엔진 최적화의 중요한 방법 중 하나입니다. 이유는 다음과 같습니다.

검색 엔진은 HTML 코드를 분석하여 페이지의 내용을 이해합니다. HTML 코드가 복잡하고 불필요한 태그나 속성 등이 많을 경우 검색 엔진은 페이지의 내용을 이해하는 데 시간이 더 걸리게 됩니다. 이로 인해 검색 엔진이 페이지를 더 느리게 색인할 수 있고, 이는 검색 결과에도 영향을 미칩니다.
불필요한 코드는 페이지의 크기를 늘리고 로딩 속도를 늦출 수 있습니다. 검색 엔진은 페이지의 로딩 속도도 검색 순위에 고려합니다. 또한 사용자는 로딩 속도가 느린 페이지를 싫어하고 이로 인해 해당 페이지를 떠나는 경우가 많습니다. 따라서 불필요한 코드를 제거하면 검색 엔진 최적화와 사용자 경험 개선에 모두 도움이 됩니다.

불필요한 코드를 제거하는 방법은 다음과 같습니다.

HTML, CSS, JS 등의 코드에서 불필요한 공백 ,주석 등을 제거합니다.
CSS 파일을 최적화하고 불필요한 코드를 삭제합니다.
JavaScript 코드를 최적화하고 불필요한 코드를 삭제합니다.
이미지 파일의 크기를 최적화합니다.
불필요한 HTML 태그나 속성 등을 삭제합니다.

이러한 방법을 통해 불필요한 코드를 제거하고 페이지의 속도를 개선하면 검색 엔진 최적화에 도움이 됩니다.

모바일 최적화

모바일 최적화는 모바일 기기에서 웹사이트를 이용할 때 최적화된 사용자 경험을 제공하는 것을 말합니다. 모바일 최적화는 검색 엔진 최적화에도 중요한 영향을 미칩니다. 모바일 검색 엔진에서는 모바일 최적화된 웹사이트를 더 우선적으로 노출시키기 때문입니다.

모바일 최적화는 크게 두 가지 방식으로 이루어집니다. 하나는 반응형 웹 디자인을 활용하는 것이고, 다른 하나는 별도의 모바일 버전 웹사이트를 제작하는 것입니다.

반응형 웹 디자인은 하나의 웹사이트를 모바일 화면 크기에 맞게 자동으로 조절해주는 기술입니다. 따라서 하나의 웹사이트에서 모바일, 태블릿, 데스크톱 등 다양한 디바이스에서 모두 편리하게 이용할 수 있습니다.

모바일 버전 웹사이트는 모바일 사용자를 위해 별도로 제작된 웹사이트입니다. 모바일 버전 웹사이트를 제작할 경우 디바이스별로 별도의 URL이 필요하므로 URL 관리가 불편해질 수 있지만, 모바일 사용자에게 최적화된 사용자 경험을 제공할 수 있습니다.

검색 엔진 최적화에서는 모바일 최적화된 웹사이트를 더 우선적으로 노출시키기 때문에 모바일 최적화는 검색 엔진 순위에도 영향을 미칩니다. 또한, 모바일 사용자는 일반적으로 빠른 페이지 로딩 속도와 적절한 컨텐츠 크기 등을 선호하므로, 모바일 최적화는 페이지 로딩 속도를 개선하고 사용자 경험을 향상시켜 검색 엔진 순위에도 긍정적인 영향을 미칩니다.

최적화에 따른 효과

표준을 준수하여 웹 페이지를 작성하면 검색 엔진 최적화에 긍정적인 영향을 미칩니다.

웹 표준을 준수하면 웹 페이지의 구조와 내용이 명확해져 검색 엔진이 웹 페이지를 색인화하는데 용이해집니다. 검색 엔진은 웹 페이지의 HTML 코드를 분석하여 페이지의 구조와 내용을 이해합니다. 따라서, HTML 코드가 명확하고 일관성 있게 작성되면 검색 엔진이 페이지의 내용을 쉽게 파악할 수 있고, 이에 따라 검색 결과 상위에 노출될 가능성이 높아집니다.
웹 표준을 준수하면 웹 페이지의 로딩 속도가 개선되어 검색 엔진이 웹 페이지를 색인화하는 속도도 빨라집니다. 검색 엔진은 웹 페이지의 로딩 속도가 빠를수록 좋은 사용자 경험을 제공하는 페이지로 평가하며, 이에 따라 검색 결과 상위에 노출될 가능성이 높아집니다.
웹 표준을 준수하면 모바일 최적화가 수월해져 검색 엔진의 모바일 검색 결과 노출에도 긍정적인 영향을 미칩니다. 모바일 기기에서 웹 페이지를 이용하는 사용자는 매우 많기 때문에, 모바일 최적화는 SEO에서 중요한 요소 중 하나입니다. 웹 표준을 준수하면 반응형 웹 디자인을 쉽게 적용할 수 있고, 이에 따라 모바일 기기에서 웹 페이지를 이용하는 사용자들의 경험을 개선할 수 있습니다.

따라서, 웹표준을 준수하면 검색 엔진 최적화에 긍정적인 영향을 미칩니다. 이를 통해 더욱 많은 사용자들 이 웹 페이지를 방문하고, 검색 결과 상위에 노출되어 브랜드 가치를 높일 수 있습니다.

웹 표준을 지키지 않은 경우

웹 표준을 준수하지 않은 경우 문제점이 발생할 수 있습니다.

크로스 브라우징 문제

크로스 브라우징(Cross-Browsing)이란 웹 페이지가 서로 다른 브라우저(인터넷 익스플로러, 크롬, 사파리, 파이어폭스 등)에서 동일하게 보이고 동작하도록 만드는 작업을 의미합니다. 각 브라우저마다 지원하는 기능, 해석하는 방식 등이 다르기 때문에 같은 코드를 사용해도 다르게 보일 수 있습니다.

크로스 브라우징 문제는 사용자 경험을 해치고, 웹 사이트의 접근성을 낮추며, SEO(검색 엔진 최적화)에도 영향을 미칩니다. 따라서 웹 페이지를 개발할 때는 크로스 브라우징 문제를 고려하여야 합니다.

크로스 브라우징 문제를 해결하기 위해선 다음과 같은 방법들을 고려할 수 있습니다.

웹 표준 준수: 웹 표준을 준수하면 각 브라우저에서 동일한 방식으로 HTML, CSS 등을 해석하므로 크로스 브라우징 문제를 줄일 수 있습니다.
브라우저별 CSS 파일 작성: 브라우저마다 다르게 보이는 부분에 대해서는 브라우저별로 따로 CSS 파일을 작성하여 문제를 해결할 수 있습니다.
JavaScript 라이브러리 사용: jQuery, Modernizr 등과 같은 JavaScript 라이브러리를 사용하면 브라우저 간 차이를 자동으로 처리해 줄 수 있습니다.
브라우저별 테스트: 크로스 브라우징 문제를 발견하면, 각 브라우저별로 테스트하여 문제를 해결할 수 있습니다.
브라우저 호환성 테스트 도구 사용: 크로스 브라우징 문제를 자동으로 검사하고 해결할 수 있는 도구들이 있습니다. CrossBrowserTesting, BrowserStack, Sauce Labs 등이 대표적입니다.

접근성 문제

웹 표준을 지키지 않았을 때는 웹 접근성이 떨어지는 경우가 많습니다. 웹 접근성이란, 장애를 가진 사람들이 웹 사이트를 이용할 수 있도록 하는 것을 말합니다. 장애를 가진 사람들 중 시각 장애인들은 스크린 리더기라는 보조기기를 이용해서 웹 사이트를 사용합니다. 이 때, 웹 사이트가 웹 표준에 맞게 작성되어 있지 않으면 스크린 리더기가 제대로 동작하지 않아 시각 장애인들이 정보를 받아들이기 어려워집니다. 또한, 웹 사이트가 웹 표준에 맞지 않으면 다양한 디바이스에서 일관된 화면이 보여지지 않을 수 있어, 모바일 기기나 태블릿 등에서 웹 사이트를 이용하는 경우 불편을 느낄 수 있습니다. 따라서, 웹 표준을 지키는 것은 웹 접근성을 고려하는 것과도 밀접한 관련이 있습니다.

검색 엔진 최적화 문제

첫째는 검색 엔진이 사이트를 분석하는 데 어려움을 겪는 문제입니다. 검색 엔진 로봇이 사이트를 분석하는 과정에서 HTML 태그나 속성의 오류로 인해 콘텐츠를 정확하게 인식하지 못할 수 있습니다. 이는 검색 엔진이 사이트를 분석하고 색인화할 때 문제를 일으켜 검색 결과 노출에 영향을 줄 수 있습니다.

둘째는 검색 엔진에서 제공하는 검색 결과에서 떨어질 수 있다는 것입니다. 검색 엔진은 검색 결과를 제공하기 위해 수많은 웹 페이지를 분석하고 평가합니다. 이 과정에서 웹 표준을 지키지 않은 사이트는 검색 엔진에서 불리한 평가를 받아 검색 결과에서 뒤쳐질 수 있습니다. 특히 최근에는 검색 엔진에서 웹 표준 준수를 고려하여 검색 결과를 제공하는 추세이기 때문에, 웹 표준을 지키지 않은 사이트는 검색 엔진 최적화에 대한 악영향을 받을 수 있습니다.

유지 보수 문제

호환성 문제: 웹 표준을 따르지 않으면 브라우저 간 호환성 문제가 발생할 수 있습니다. 각 브라우저는 웹 표준을 지키지 않으면 다르게 해석하거나 지원하지 않는 경우가 있습니다. 이로 인해 웹 페이지가 일부 브라우저에서만 정상적으로 작동하게 되면, 이를 해결하려면 추가적인 작업이 필요해집니다.
접근성 문제: 웹 표준을 따르지 않으면 접근성이 떨어지는 문제가 발생할 수 있습니다. 웹 표준을 준수하지 않은 코드는 스크린 리더 등 보조기기를 사용하는 사용자가 이용하기 어렵거나 불가능할 수 있습니다.
유지 보수 비용 증가: 웹 표준을 따르지 않으면 코드가 복잡해져 유지 보수 비용이 증가할 수 있습니다. 웹 표준을 준수하지 않으면 코드가 일관성 없이 작성되기 때문에, 이후 코드 수정 및 유지 보수를 하기 어려워질 수 있습니다.
검색 엔진 최적화(SEO) 문제: 웹 표준을 따르지 않으면 검색 엔진에서 웹 페이지를 인식하지 못하는 경우가 있습니다. 이는 검색 엔진 최적화(SEO)에 부정적인 영향을 미칠 수 있습니다.

따라서, 웹 개발 시 웹 표준을 준수하는 것이 중요합니다. 웹 표준을 준수하면 브라우저 호환성 문제를 해결하고, 접근성을 높이며, 코드의 일관성을 유지할 수 있어 유지 보수 비용을 줄일 수 있습니다. 또한, 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.

현재 웹 표준의 발전 방향

모바일 기기 사용자가 증가하면서, 모바일 환경에서 웹사이트의 사용성과 접근성 문제가 발생했습니다. 이러한 문제를 해결하기 위해 모바일 퍼스트 디자인이 등장했습니다. 모바일 기기를 기준으로 하여 디자인을 하고 이를 기초로 구성요소를 확장하며 데스크탑 버전을 제작합니다. 이렇게 하면 모바일 기기에서는 중요한 정보와 기능에 집중할 수 있고, 데스크탑에서는 추가적인 정보와 기능을 제공할 수 있어 전반적인 사용자 경험을 향상시킬 수 있습니다. 또한 모바일 퍼스트 디자인은 검색 엔진 최적화에도 도움이 됩니다. 모바일 버전의 웹 사이트를 먼저 살펴보므로 검색 엔진에서 더 높은 순위를 받을 수 있습니다.
인터넷 익스플로러는 웹 표준을 따르지 않고 Microsoft 사에서 자체적으로 개발한 기술을 적극적으로 사용해 다른 브라우저와 호환성 문제가 발생했습니다. 그러나 최근 점유율이 급격히 줄어들며 개발자들이 인터넷 익스플로러에서의 호환성을 고려하지 않고 Microsoft 사도 Edge 브라우저를 출시해 웹 표준 준수에 신경 쓰고 있습니다. 이에 따른 인터넷 익스플로러의 종료는 웹 표준의 발전과 발전 속도를 가속화 시키는 계기가 될 수 있습니다.
웹 표준을 준수하면 웹 사이트의 구조와 스타일 등이 일관성을 잘 유지하고 정의되어있어 웹 접근성을 강화합니다. 또 웹 사이트의 로딩속도가 개선되면 이용자들이 빠르고 쉽게 웹 사이트를 이용할 수 있게 되어 접근성이 강화됩니다. 모바일 기기 등에서 웹사이트 이용할 때에도 일관된 구조와 스타일을 유지하므로 모바일에서의 접근성도 높일 수 있습니다.
기존에 웹에서 실행되는 코드는 HTML, CSS, JavaScript 등으로 구성되었는데, 모두 인터프리터나 JIT 컴파일러 등을 통해 실행되므로 실행속도나 안정성 등의 문제가 발생할 수 있었습니다. 이를 해결하기 위해 웹 어셈블리가 등장했습니다. 웹 브라우저에서 실행할 수 있는 새로운 형태의 코드로, C/C++ 등 코드를 브라우저에서 직접 실행할 수 있는 이전 형태로 변환해 빠른 실행속도를 보장합니다.

Yuhallo

개발자가 되고 싶어 둥당둥당

이전 포스트

[React] Custom Component

다음 포스트