학습 목표

• 웹 표준의 등장 배경과 개념
• 웹 표준을 준수 했을때 얻을 수 있는 이점
• 크로스 브라우징의 개념과 워크 플로우

웹 표준

웹 표준 등장배경

• 2000년대 초에 브라우저간 호환이 되지 않아서 개발자가 브라우저마다 따로 개발 해주어야하는 상황이 생겼었습니다.

웹 표준 개념

• 웹에서 표준적으로 사용되는 기술이나 규칙, W3C(World Wide Web Consortium) 에서 권고합니다.
  • 웹페이지가 동일(동등)하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법입니다, 운영체제, 브라우저에 상관없이
  • HTML(구조), CSS(표현), JavaScript(동작) 등의 기술을 다룹니다.

웹 표준 장점

1. 유지 보수의 용이성
   • 구조, 표현, 동작 영역이 각각 분리되면서 유지 보수가 용이해졌고 코드가 경량화되면서 트래픽 비용이감소하는 효과가 생겼습니다.

2. 웹 호환성 확보
   • 웹 표준을 준수하여 웹 사이트를 제작하면 브라우저의 종류나 버전, 운영체제나 사용 기기 종류헤 관계없이 항상 동일(동등)한 결과가 나오도록 할 수 있습니다.

3. 검색 효율성 증대
   • 웹 표준에 남ㅈ춰 웹 사이트 작성하는 것 만으로도 검색엔진에서 더 높은 우선 순위로 노출될 수 있습니다.

4. 웹 접근성 향상
   • 웹을 사용하는 유저의 다양한 환경에 맞춰 웹 페이지를 개발하는 것도 웹 표준에 맞춰 개발하는 것만으로 이뤄질 수 있습니다.

크로스 브라우징 (Cross Browsing)

개념

• 웹 사이트에 접근하는 브라우저의 종류에 상관 없이 '동등한' 화면과 기능을 제공할 수 있도록 만드는 작업을 의미합니다.
  • 애초에 브라우저마다 사용하는 렌더링 엔진이 다르기 때문에 화면을 완전 동일하게 만드는 것은 불가능 합니다.

워크 플로우

1. 초기 기획
   • 콘텐츠 기능, 디자인 기획
   • 유저가 사용할 브라우저, 기기, 운영체제 등 고려하여 기획
   • 위의 기획에 맞는 기술 선정

2. 개발
   • 코드의 각 브라우저 호환성을 MDN, Can I Use 등의 사이트에서 확인하며 개발합니다.
   • 크로스 브라우징이 힘든 상황에서는 동일하게 만드는 것이 불가능 하다는 것을 인정하고 대체 수단을 마련합니다.

3. 테스트 / 발견
   • 각 기능을 구현한 후에는 기능에 대한 테스트가 필요합니다.
   • 자동으로 테스트 진행해주는 도구를 이용하는 것도 방법입니다.
     • 크로스 브라우징 테스트 툴 : TestComplete, LambdaTest, BitBar 등
   • 직접 테스트
     1. 안정적인 데스크톱 브라우저(크롬, 엣지, 파이어폭스, 사파리 등)에서 테스트 진행
     2. 휴대폰 및 태블릿 브라우저(삼성 인터넷, 사파리, 안드로이드 기기의 크롬 등)에서 테스트 진행
     3. Window, Linux, Mac 등 다양한 운영 체제에서도 테스트 진행

4. 수정 / 반복
   • 테스트 단계에서 발견된 버그를 수정하고 테스트를 다시 반복합니다.
     • 섣불리 코드를 수정하면 버그가 발생할 수 있으므로, 조건문을 작성해 다른 코드를 실행하는 방식으로 고쳐나가는 것이 좋습니다.

참조

코드스테이츠 프론트엔드 부트캠프