[TIL - 2022.9.5~9.7 웹 표준/웹 접근성]

공부한 내용

웹 표준의 장점

1. 유지 보수 쉬움 - HTML,CSS,JavaScript로 사용 방법을 정리하기 이전에는 복잡하게 뒤섞여 코드가 엉망이었지만 이제는 각 영역이 분리되면서 유지 보수가 쉬워졌다.

2. 웹 호환성 확보 - 웹 표준을 준수하게 되면 브라우저에 더 이상 종속적이지 않으며 사용 기기나 운영 체제에 영향을 받지 않게 되었다.

3. 검색 효율성 증가와 웹 접근성 향상 - 웹 표준을 지키게 되면 SEO도 증가할 것이고 장애를 가진 사람도 불편함을 덜 느낄 것이다.

자주 틀리는 마크업

1. 인라인 요소 안에 블록 요소 넣기

블록 요소로 대표적인 것은 h1,div 인라인 요소는 a, span 등이 있다.
인라인 요소는 콘텐츠가 차지하는 만큼만(예를 들어 텍스트), 블록 요소는 가로로 넓게 차지한다. 인라인 요소가 블록 요소 안에 들어가야 한다.
블록 요소가 더 넓은(?) 개념이라 그런 것 같다.

2. <b>, <i> 사용하기

웹 표준을 준수하고자 할 때는 이러한 태그는 사용하면 안된다. 대신 <strong>과 <em>을 사용해야 한다. 이 태그들은 글씨에 효과를 주는 것과 동시에 콘텐츠를 강조하는 역할을 한다.

3. <br /> 사용하기

요소 사이에 간격을 만들기 위한 목적으로 이 태그를 남발해서는 안된다. 대신에 CSS를 통해서 간격을 띄워야 한다.

4. 인라인 스타일링 사용하기

개인적으로 정말 싫어하는 방법인데 웹 표준을 준수하지 않는 행위였다.
따로 css 파일을 관리하는 것보다 하나의 js 파일에서 따로 스타일링을 하는게 낫다.

크로스 브라우징 워크 플로우

초기 기획 👉 개발 👉 테스트/발견 👉 수정/반복

1. 초기 기획 : 어떤 웹사이트를 만들지 결정하고 콘텐츠와 기능은 어떤 게 들어가야 할지, 디자인 등을 결정해야 한다. 그리고 주요 타겟을 결정하고 이 타겟이 사용하는 브라우저나 기기 등을 고려해서 기획을 해야한다.

2. 개발: 브라우저 호환성애 따라 코드를 작성해야 하며, MDN에서 참고하면 좋다.

3. 테스트/발견 : 각 기능을 구현하고 나면 그 기능에 대한 테스트를 진행해야 한다. 데스크톱, 태블릿, 모바일 모두 잘 작동하는지, 직접 테스트를 할 수도 있지만 TestComplete, LambdaTest, BitBar 등의 크로스 브라우징 테스트 툴이 있다.

4. 수정/반복 : 테스트 단계에서 버그가 발견됐다면 발생한 위치를 최대한 좁혀서 특정하고 발생하는 특정 브라우저에서의 해결 방법을 정해야 한다.

SEO에 영향을 미치는 요소

1. <title> 요소

어떤 내용을 작성하는가에 따라 검색 후 유입까지 유도할 수 있다. 핵심 키워드가 들어가면 상위에 노출될 확률이 올라간다. 다만 제목이 너무 짧거나 길면 유입률이 떨어진다.

2. <meta> 요소

• SEO를 위한 meta 요소

<meta name="속성값" content="내용" />

주요 속성값

description : 콘텐츠에 대한 간략한 설명
keywords : 웹 페이지의 관련 키워드들을 나열할 때 사용
author : 콘텐츠의 제작자

웹 접근성

웹 접근성을 갖추면 뭐가 좋은가?

첫 번째로, 비장애인 뿐만 아니라 장애인,고령자 등도 웹 사이트를 자유롭게 이용할 수 있기 때문에 사용자층이 확대된다.
두 번째로, 언제 어떠한 상황에서 웹 사이트 이용을 할 지 알 수 없다. 예를 들어 마우스를 이용할 수 없는 상황을 예로 들 수 있는데 이를 대비해 사이트를 만들게 되면 다양한 환경 지원과 함께 사용자 수 증가로 이루어 질 수 있다.

느낀점

솔직히 웹 표준에 대해서 그렇게 생각해보지 않은 편이다. 지금 하고 있는 사이드 프로젝트에도 한 번 적용해보면 좋지 않을 까 싶다. 그리고 웹 표준을 몰랐다면 아마 평생 몰랐을 거 같기도 하다. 마지막 날은 리덕스 과제를 리팩토링하는 거였는데, redux toolkit으로 리팩토링 하는 거인줄 알았더니 걍 semantic tag로 바꾸는 거였다... toolkit으로 코드 정리하는 거는 그냥 나 혼자 해봐야겠다.