Day 6. Understanding Lists
웹 개발을 시작한 지 얼마 안 됐을 때, 나는 HTML을 그냥 '화면에 뭔가 보여주는 도구' 정도로만 생각했다.
목록 같은 걸 만들 때도 그냥 <p> 태그 여러 개 쓰면 되잖아? 어차피 CSS로 스타일링하면 똑같이 보이는데 뭔 차이가 있겠어? 이런 마음이었다.
그러다 어느 날, 스크린 리더를 사용하는 시각 장애인 분이 우리 웹사이트를 어떻게 이용하는지 직접 들어볼 기회가 있었다. 그때 충격을 받았다.
내가 <p> 태그로 대충 만든 목록을, 스크린 리더는 그냥 "문단, 문단, 문단"이라고 읽어주는 거였다. 반면<ul>과 <li>로 제대로 만든 목록은 "목록 3개 항목, 첫 번째 항목, 두 번째 항목..."이라고 의미를 알려주며 읽어줬다.
그 순간 깨달았다. HTML은 단순히 '보여주는' 언어가 아니라 '의미를 전달하는' 언어라는 것을.
마치 글을 쓸 때 단순히 글자만 나열하는 게 아니라 문단을 나누고, 제목을 달고, 목록을 만드는 것처럼. HTML도 웹페이지의 '구조'와 '의미'를 정의하는 역할을 한다.
예를 들어:
순서가 중요한 내용 (요리 레시피, 회원가입 절차) → <ol> 사용
순서가 중요하지 않은 내용 (쇼핑 목록, 기능 소개) → <ul> 사용
그냥 텍스트 덩어리 → <p> 사용
똑같이 보일 수 있지만, 브라우저와 다른 도구들은 이 차이를 안다.
솔직히 처음엔 귀찮았다. <p> 태그 몇 개면 끝날 걸 굳이 <ul>, <li> 이렇게 나눠서 써야 하나 싶었다.
하지만 지금 생각해보면, 제대로 된 HTML을 쓰는 습관을 들인 게 정말 다행이다. 나중에 CSS 작업할 때도 훨씬 편하고, SEO도 좋아지고, 접근성도 개선되고. 무엇보다 코드를 다시 볼 때 '아, 여기는 목록이구나'라고 바로 이해할 수 있다.
결국 우리가 만드는 웹사이트는 다양한 사람들이 다양한 방식으로 접근한다. 마우스로 클릭하는 사람도 있고, 키보드로만 탐색하는 사람도 있고, 스크린 리더를 사용하는 사람도 있다.
HTML을 제대로 쓴다는 건, 이 모든 사람들을 배려하는 일이다. 그리고 사실 이게 별로 어려운 일도 아니다. 그냥 '이 내용이 무엇을 의미하는지' 한 번만 생각해보면 된다.
목록이면 목록 태그를 쓰고, 제목이면 제목 태그를 쓰고, 강조할 내용이면 강조 태그를 쓰는 것. 당연한 일을 당연하게 하는 것뿐이다.
지금도 가끔 "어차피 CSS로 스타일링하면 똑같은데 뭔 상관이야?"라고 생각할 때가 있다. 하지만 그럴 때마다 그날의 경험을 떠올린다. 내가 만든 코드가 누군가에게는 웹사이트를 이해하는 유일한 단서가 될 수 있다는 것을.
HTML을 제대로 쓰는 건 결국 사람에 대한 배려다. 그리고 그런 작은 배려들이 모여서 더 좋은 웹을 만든다고 생각한다.