초보자를 위한 HTML 리스트: UX를 망치는 5가지 실수
Source: Dev.to
TL;DR
대부분의 초보자들은 <ul>과 <ol>을 혼용해서 사용하고, 페이지가 깨진 듯 느껴지는 이유를 궁금해합니다. 특히 화면 읽기 프로그램 접근성을 조용히 파괴하는 중첩 실수가 하나 있는데, 거의 아무도 이야기하지 않습니다. 이 글에서는 가장 흔한 HTML 리스트 오류 다섯 가지와 빠르게 고치는 방법을 다룹니다.
The Problem: Your List Code Looks Fine But Feels Wrong
You learned HTML lists in about 20 minutes. Slap some <li> tags inside a <ul>, done. Job finished. Ship it.
Except users are bouncing. Your content feels cluttered. And a screen reader is announcing your navigation menu like it is reading a legal disclaimer at 1.5× speed.
Sound familiar? You are not alone. HTML lists for beginners look deceptively simple on the surface. Underneath, there are five specific mistakes that quietly strangle your user experience before anyone even reads your content.
Let us fix that.
HTML 리스트가 실제로 하는 일 (불릿 포인트를 넘어)
실수를 살펴보기 전에, 대부분의 튜토리얼이 건너뛰는 부분을 짚어보겠습니다: HTML 리스트는 시각적인 도구가 아닙니다. 의미 구조 도구입니다. <ul>이나 <ol>로 내용을 감싸면 브라우저, 검색 엔진, 그리고 스크린 리더에게 이 항목들은 함께 묶여 있으며 관계가 있다는 것을 알려주는 것입니다.
이는 SEO와 접근성에 엄청난 영향을 미칩니다.
<ul>
<li>Eggs</li>
<li>Milk</li>
<li>Flour</li>
</ul>
<ol>
<li>Eggs</li>
<li>Milk</li>
<li>Flour</li>
</ol>Google은 두 번째 리스트를 파싱할 수 있습니다. 스크린 리더는 이를 올바르게 알릴 수 있습니다. 미래의 당신은 눈물 없이 이를 유지 관리할 수 있습니다.
실수 1: 순서가 중요한데 <ul> 사용하기
이것은 초보자들이 가장 흔히 저지르는 HTML‑list 실수입니다. 순서가 중요하지 않은 항목에는 비순서 목록( <ul>)을 사용합니다 — 피자 토핑, 기능 목록, 재료 모음 등.
순서 목록( <ol>)은 단계, 순위, 위치가 의미를 갖는 순서가 필요한 경우에 사용합니다.
<ol>
<li>Add the eggs</li>
<li>Preheat the oven</li>
<li>Mix the flour</li>
<li>Preheat the oven to 180 °C</li>
<li>Mix the flour and eggs</li>
<li>Bake for 25 minutes</li>
</ol>UX에 왜 중요한가? <ol>은 항목에 자동으로 번호를 매깁니다. 중간에 단계를 추가하면 번호가 자동으로 업데이트됩니다—수동 편집이 필요 없고 번호 오류도 없습니다. 스크린 리더는 또한 “Step 2 of 5”(5단계 중 2단계)와 같이 안내해 사용자가 과정을 명확히 따라갈 수 있게 합니다.
실수 2: 리스트 중첩을 잘못 사용하기
중첩 리스트는 초보자들이 빛을 발하거나 완전히 무너지는 지점입니다. 거의 아무도 언급하지 않는 규칙: 중첩 리스트는 <ul>이나 <ol> 안에 직접 두지 말고 <li> 요소 안에 있어야 합니다.
잘못된 버전 (잘못된 HTML):
<ul>
<li>Monday</li>
<ul>
<li>9 AM Meeting</li>
<li>10 AM Coffee (mandatory)</li>
</ul>
</ul>올바른 버전 (올바른 HTML):
<ul>
<li>Monday
<ul>
<li>9 AM Meeting</li>
<li>10 AM Coffee (mandatory)</li>
</ul>
</li>
</ul>잘못된 버전은 대부분의 브라우저에서 기술적으로 렌더링되지만, 잘못된 HTML을 생성하고 보조 기술을 혼란스럽게 하며 브라우저마다 예측할 수 없는 스타일링을 초래합니다. 실제 사용자를 신경 쓸 때 올바른 구조는 선택 사항이 아닙니다.
실수 3: CSS로 리스트 의미를 없애고 ARIA를 잊어버리기
CSS에서 list-style: none을 설정해 내비게이션 메뉴의 불릿을 제거하면 Safari와 VoiceOver가 실제로 해당 요소를 리스트로 알리는 것을 중단합니다. 한 줄의 CSS로 의미론적 의미를 없애버렸습니다.
해결 방법은 단 하나의 속성입니다:
<ul role="list">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>role="list"를 추가하면 접근성 알림이 복원됩니다. 초보자를 위한 HTML 리스트 튜토리얼 대부분은 이를 언급하지 않습니다. 10 초 안에 할 수 있는 가장 효과적인 수정 중 하나입니다.
Source: …
실수 4: 적절한 목록 구조 대신 <br> 태그 사용
초보자들은 때때로 줄 바꿈을 사용해 목록을 가장합니다:
Feature 1<br>
Feature 2<br>
Feature 3또는 순수 텍스트로도:
- Feature 1
- Feature 2
- Feature 3<br> 버전은 의미론적 가치를 전혀 제공하지 않습니다. 검색 엔진은 목록 항목을 식별할 수 없으며, 스크린 리더는 항목 수를 세거나 항목 사이를 탐색할 수 없습니다. 이는 마치 엑셀 스프레드시트를 메모장에 작성하는 것과 같은 HTML 방식입니다.
실수 5: 아무도 읽을 수 없을 정도로 과도한 중첩
리스트 중첩은 강력합니다. 내용이 정말 복잡해서 네 단계까지 중첩한다면, 이는 정보 구조를 재고해야 할 신호이며, 더 많은 중첩이 해결책이 아닙니다.
경험 법칙: 두 단계 이상의 중첩을 사용한다면, 일부 하위 항목을 별도의 섹션과 제목으로 분리하는 것이 좋은지 고려하세요.
주요 요점
<ol>을 순차 단계에,<ul>을 순서 없는 컬렉션에 사용하세요.- 항상 하위 리스트는
<li>요소 안에 중첩하고,<ul>/<ol>안에 직접 넣지 마세요. - CSS로 불릿을 제거할 때
role="list"를 추가하여 스크린 리더 동작을 유지하세요. <br>태그로 리스트를 흉내 내지 마세요.- 두 단계 중첩이면 거의 대부분 충분합니다.
이 다섯 가지 실수는 초보자 수준 HTML 리스트가 접근성과 유지보수를 깨뜨리는 가장 흔한 이유입니다. 이를 수정하면 리스트가 사용자와 개발자 모두에게 친화적이 됩니다.
수정하면 HTML 구조, 접근성 점수, 사용자 경험이 즉시 향상됩니다.
하지만 전체 글에서 다루는 또 하나의 기술이 있습니다 — 기본 CSS를 넘어선 리스트 불릿 커스터마이징 — 이는 리스트가 다양한 디바이스에서 보이고 동작하는 방식을 완전히 바꿔줍니다.
인터랙티브 예제와 전체 불릿 커스터마이징 가이드를 포함한 완전한 안내서를 원하시나요?
Drive Coding에서 전체 글을 읽어보세요: