🗣 월드 와이드 웹(World Wide Web, WWW, W3)
웹 ≠ 인터넷
웹 이라고 하면 인터넷을 떠올리는 경우가 있다. 인터넷은 전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망이고, 웹은 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 말한다.
❓ 웹 표준
- 웹 표준은 W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’
- 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이며 정상 작동할 수 있도록 하는 웹페이지 제작 기법이다.
📃 웹 표준을 지켜야하는 이유
유지보수의 용이성
- 웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하기 이전에는 구조, 표현, 동작이 뒤섞인 코드가 많았다. 하나를 수정하려면 전부다 수정해야 되는 경우가 생겼으나, 이제는 각 영역이 분리되면서 유지보수가 쉽고 간단해졌다. 그래서 코드가 가벼워짐과 트랙픽 비용도 감소하였다.
웹 호환성 확보
- 웹 표준을 준수하며 제작하여 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과가 나오도록 할 수 있다.
검색 효율성 증대
- 웹 표준에 맞춰 웹 사이트를 작성하는 것 만으로도 검색 엔진에서 더 높은 우선 순위로 노출될 수 있다.
적절한 HTML 요소의 사용, 웹 페이지에 대한 정확한 정보 작성 등 검색 효율성과 관련된 내용도 웹 표준에서 다루고 있기 때문이다.
웹 접근성 향상
- 브라우저의 종류, 운영체제 종류, 기기 등 웹에 접근할 수 있는 환경은 다양하다. 모든것이 맞게 웹을 개발할수 는 없지만, 웹 표준에 맞춰서 개발하는 것으로도 문제를 해결할 수 있다.
🕝 크로스 브라우징(Cross Browsing)
웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미한다. 브라우저마다 사용하는 렌더링 엔지이 달라 화면을 동일하게 만드는것은 불가능하다. 크로스 브라우징은동일하지는 않지만 동등하게 정보와 기능을 제공한다.
크로스 브라우징 워크 플로우
초기기획 → 개발 → 테스트/발견 → 수정/반복
-
초기 기획 단계에서 어떤 웹 사이트를 만들 것인지 정확하게 결정한다. 콘텐츠,디자인,이용하는 고객, 고객이 사용하는 브라우저 기기 등에 맞게 개발하도록 기획한다.
-
코드 작성시 브라우저에서 호환성이 어떤지 파악하고 작성한다. (주요 고객층의 브라우저도 파악) 또한 크로스 브라우징이 힘든 상황인 경우 이를 인정하고 대체 수단을 마련해야한다.
-
직접 테스트시 테스크탑 , 모바일 , 테블릿 각 브라우저별 테스트 진행, 윈도우 맥 리눅스에서도 테스트를 한다. 자동 테스트 진행 도구인 TestComplete, LambdaTest, BitBar 도 있다.
-
테스트 단계에서 버그 발생시, 발생한 위치를 최대한 좁혀 특정한다. 막연히 코드 수정시 다른 브라우저에서 버그가 생길수 있으니, 조건문 같은 코드를 추가해 수정하도록 한다.
❓ 웹 접근성
화면을 볼 수 없거나, 소리를 들을 수 없거나, 마우스 없이 키보드밖에 사용할 수 없는 등 정보 접근에 제한을 받을 수 있는 상황은 많다. 이런 상황을 해결하고자 노력하는 것이 바로 웹 접근성(Web Accessibility) 이다.
웹 접근성의 궁극적인 목적은 장애인,고령자,비장애인 누구든 정보를 동등하게 제공받도록 하는것이다.
사용자층 확대
- 웹 접근성을 갖추면 누구든지 웹사이트를 자유롭게 이용할 수 있어, 비즈니스 적으로 새로운 고객층을 확보할 수 있고 사이트 이용자가 많아진다.
다양한 환경 지원
- 다른 일을 하느라 화면을 못보거나, 마우스를 사용하지 못하는 등 어려운 환경에서도 웹 사이트를 이용할 수 있어서 이용자 수가 증가한다.
사회적 이미지 향상
- 기업의경우 웹 접근성 확보를 통해 사회적 이미지가 향상되어 더많은 고객을 확보할 수 있는 가능성이 늘어난다.
✅ 웹 접근성 방법
alt를 이용한 적절한 대체 텍스트를 작성하여
시각적으로 화면을 인식할 수 없는 사용자 혹은 상황을 대비해서 대체 텍스트를 제공한다.
<img src="www" alt="이미지입니다"/>- 자막 제공
자막을 포함한 동영상 사용하고 자막을 지원하는 멀티미디어 플랫폼 사용한다.
그리고 비디오 요소 안쪽에 track 요소를 사용하여 자막 파일 불러오도록 한다.
<video ... >
<track src="자막.vtt" kind="captions" />
</video>🌴 정리
웹 표준에 맞게 웹 페이지를 작성시, 어떤 브라우저든 동일안 결과물 얻을 수 있다. 그리고 웹 표준에 맞게 웹을 개발하여 검색엔진에 잘 노출 되도록 한다.
웹 접근성 확보를 통해 누구에게나 정보를 제공하도록 신경써야한다.
