웹 접근성에 대해

 

 

오늘은 구름 2일차수업!

웹접근성과 웹브라우저 렌더링과정에 대해 배우는시간이였다.

내용이 길어질거같아 포스트 2개로 나눠서 작성해보고자 한다! 

 

2025.10.30 - [HTML] - 구름 딥다이브 프론트엔드 2일차 - 웹접근성 👈

2025.10.30 - [HTML] - 구름 딥다이브 프론트엔드 2일차 - 웹브라우저 렌더링과정

---

배운내용

1. 시맨틱 마크업

...는 어제도 언급했지만 SEO 최적화를 위해 HTML 태그에 의미를 담은 태그를 말한다.

이 시맨틱 태그 구성은 답은 없고 개인스타일마다 다를수있다.

 

2. 웹표준

크롬,사파리,파이어폭스 등 많은 브라우저들이 있는데 동일한 결과물을 낼수있게 규격화시킨것을 말한다.

 

3. 웹접근성

웹사이트에서 제공하는 정보를 신체,환경에 관계없이 모두가 동등하게 볼수있도록 보장하는 것을 말한다.

아무리못해도 특히 img태그에 대체텍스트인 alt속성을 붙이는것은 기본중의 기본이니 꼭꼭 잊지말아달라고 강사님이 강조하셨다!

그리고 modal을 구현할때도 단순 div보다 dialog태그를 사용하는것이 웹접근성에 아주 좋다는것도 알수있었다.

 

이토록 웹사이트에는 훌륭한 룰이 많지만 내가 시맨틱하게 잘썼는지 잘모를때 쓰는 도구들이 몇가지 있다.

 

- Lighthouse 크롬 플러그인
어제 포스팅에도 볼수있듯이 크롬에 바로 설치해서 손쉽게 검사할수있는 도구이다. 웹접근성 외에도 웹최적화 점수와 디테일한 문제점을 바로 볼수있다.
https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ko

Lighthouse - Chrome 웹 스토어

 

- W3C Validation
가장 무난하고 유명한 웹접근성 도구가 아닐까 생각한다. 아직 써본적은 없지만 시맨틱마크업 검사를 해주며, 어디가 틀렸는지 디테일하게 알수있다.
https://validator.w3.org/

The W3C Markup Validation Service

 

- 사이트로 컬러명도대비 검사
이건 개인적으로 웹접근성 명도대비에 대해 찾아보다가 알게된 사이트이다.
웹접근성에는 컬러대비도 고려해야하는데 AA와 AAA의 차이도 알수있었다! (차이는 AA보다 AAA가 더 엄격한 차이라고 한다)

https://sitero.co.kr/contrast

사이트로(SITERO)

...더 많지만 여기까지 설명은 마무리하는걸로 하고

 

 

실습과제

대한민국에서 쿠팡을 안써본사람들은 이제 거의없지 않을까?

그정도로 유명한 사이트인데 Lighthouse를 돌려보니 pc버전 웹접근성은 그다지 좋지않아보였다.

한번씩 나도 pc로 쇼핑하다보면 레이아웃이 깨져있다던가 하는 경우를 본거같은데

이번 과제를 기회로 쿠팡 메인을 기준으로 과제를 진행해보았다 :)

쿠팡 웹접근성은 Lighthouse에서 60~70점대로 나왔다 (pc main기준)

 

쿠팡 메인사이트를 내가 생각한 대로 시맨틱하게 나누어봄

 

일단 전체 페이지를 캡쳐해와서 크게 header,main,footer로 나누었다.

nav는 의미론적으로 네이게이션을 뜻하기때문에 나는 햄버거 메뉴를 nav로 선택했다.

main은 가장 메인콘텐츠라 생각해서 메인슬라이드부터 콘텐츠 모두를 포함했고

정보의 특성마다 section으로 나누었고 거기서 또 나눌수있는것들은 article로 정의해보았다.

우측 퀵메뉴는 aside, 마지막으로 캡쳐를 제대로 못해와서 footer는 그냥 영역이 있는것정도로 정리해보았다.

 

 

정리해보기

웹접근성에 대해 알아보고 나니 귀찮고 바쁘다고 div를 남발했던 내 지난날들이 떠올랐다.
안그래도 요즘 사이드프로젝트 마무리를 하면서 웹표준&웹접근성 리팩토링을 하고있었는데

이번에 알게된 정보들로 다시 돌아봐야겠다!

 

그럼 다음 포스팅에서 만나요~ 👋