프레임워크를 배우기 전에, 웹을 마스터하라: HTML, CSS, 그리고 접근성 필수
Source: Dev.to
요즘 개발자 세계에서 자주 보이는 패턴이 있습니다: 많은 사람들이 웹 기본기를 제대로 이해하지 못한 채 바로 JavaScript 프레임워크로 뛰어들곤 합니다.
솔직히 말하자면, 저도 같은 실수를 했었습니다. 코딩을 처음 시작했을 때, 웹의 기본을 제대로 이해하지 못하고 바로 JavaScript 프레임워크에 뛰어들었죠. 빠르고 인터랙티브한 앱을 만들고 최신 도구와 라이브러리를 실험하는 것이 너무 재밌었어요. 하지만 그 밑바탕에 있는 기본, 특히 접근성을 무시하고 있었던 겁니다.
버튼에 를 사용했고, 제목에 를 사용했으며,
모든 것을 보기에 맞게 스타일링했지만 실제 구조나 의미는 전혀 없었습니다.
몇 번의 고통스러운 코드 리뷰를 겪으며 중요한 사실을 깨달았습니다:
프레임워크는 변합니다. 웹은 변하지 않습니다.
접근성은 선택 사항이 아닙니다.
이 점을 이해하고 나니 작업 방식이 완전히 바뀌었습니다. 새내기든 경험자든, 이 문제를 고치는 데는 절대 늦은 때가 없습니다.
HTML은 웹의 구조입니다
HTML은 콘텐츠에 의미를 부여합니다. 브라우저와 보조 기술에게 어떻게 보이는가가 아니라 무엇인가를 알려줍니다.
우리 모두가 어느 순간 놓치는 몇 가지 예시:
- 버튼은 항상 “ 이어야 합니다
- 제목은
안에, “ 안에 있어야 합니다 - 목록은
혹은를 사용해야 합니다 - 내비게이션은 “ 안에 있어야 합니다
- 콘텐츠 섹션은
혹은안에 있어야 합니다
모두가 “ 로만 이루어져 있다면 구조가 없으며, 구조가 없으면 접근성도 깨집니다.
시맨틱 HTML이 중요한 이유
1. 접근성
수백만 명의 사용자가 스크린 리더, 음성 제어, 키보드 내비게이션 같은 보조 기술에 의존합니다. 시맨틱 HTML은 접근성 기능을 자동으로 제공합니다:
- “ 은 자동으로 키보드 포커스를 받을 수 있습니다
- “ 은 자연스럽게 입력 요소와 연결됩니다
- “ 은 보조 도구에 내비게이션 영역임을 알려줍니다
- 제목은 페이지의 논리적 개요를 만듭니다
올바른 요소만 사용하면 대부분의 접근성 문제가 사라집니다.
2. WCAG — 접근성의 기반
WCAG(웹 콘텐츠 접근성 가이드라인)는 웹을 접근 가능하게 만드는 방법을 정의하며, 네 가지 원칙(P.O.U.R.)을 따릅니다:
- Perceivable(인식 가능) — 사용자는 콘텐츠를 보고 듣거나 할 수 있어야 합니다
- Operable(조작 가능) — 사용자는 키보드, 마우스, 보조 기기를 이용해 탐색할 수 있어야 합니다
- Understandable(이해 가능) — 인터페이스는 명확하고 예측 가능해야 합니다
- Robust(견고) — 콘텐츠는 다양한 브라우저와 보조 기술에서 동작해야 합니다
시맨틱 HTML은 이 네 가지 원칙을 자연스럽게 지원합니다.
3. SEO와 검색 가능성
검색 엔진은 보조 기술과 마찬가지로 HTML 구조를 읽습니다:
- 제목은 계층 구조를 만듭니다
- 기사(“ )는 콘텐츠 조각을 정의합니다
- 섹션(“ )은 의미를 조직합니다
시맨틱 HTML은 추가 작업 없이도 SEO를 향상시킵니다.
4. 유지보수성
좋은 HTML은 자체 문서화됩니다:
- “ 은 명확히 내비게이션임을 나타냅니다
- “ 은 분명히 인터랙티브합니다
- “ 은 독립적인 콘텐츠를 포함한다는 것을 알려줍니다
이 덕분에 디버깅, 온보딩, 확장이 훨씬 쉬워집니다.
ARIA(Accessible Rich Internet Applications) 이해하기
ARIA는 네이티브 HTML만으로 의미나 상태를 표현할 수 없을 때 그 빈틈을 메우기 위해 존재합니다.
일반적인 ARIA 속성 예시:
aria-label="Close menu"
aria-expanded="false"
role="button"
aria-live="polite"황금 규칙: 먼저 네이티브 HTML을 사용하세요. ARIA는 보강을 위한 것이지 대체하는 것이 아닙니다. 실제 로 표현할 수 있다면, 를 role="button" 으로 바꾸지 마세요. 네이티브 요소는 이미 내장된 접근성을 제공하므로, ARIA를 사용하기 전에 그 힘을 먼저 활용하세요.
간단한 예시
❌ 잘못된 예
<button>
Submit
</button>문제점
- 키보드 지원이 없음
- 포커스 동작이 없음
- 버튼으로 인식되지 않음
- 기본 기능을 구현하려면 추가 ARIA가 필요함
✅ 올바른 예
<button type="submit">
Submit
</button>네이티브 HTML 사용의 장점
- 키보드 접근 가능
- 올바른 포커스 처리
- 스크린 리더 친화적
- ARIA가 필요 없음
웹 개발자처럼 사고하기
1. 올바른 질문을 던지기
좋은 개발은 코드를 작성하기 전에 시작됩니다. UI를 설계할 때 잠시 멈추고 다음을 물어보세요:
- 이 경우 올바른 HTML 요소는 무엇인가?
- 눈에 보이는 레이블이나 접근 가능한 이름이 필요한가?
- 링크와 버튼 중 어느 것이 적절한가?
- 보조 기술이 이 요소의 역할을 이해할 수 있는가?
이 질문들은 더 시맨틱하고 접근 가능하며 유지보수하기 쉬운 마크업을 만들도록 안내합니다.
2. 레이어별로 구축하기
훌륭한 인터페이스는 기초부터 차근차근 쌓아갑니다. 다음 순서를 따르세요:
- 시맨틱 HTML — 구조와 의미 설정
- CSS — 레이아웃, 외관, 반응형 동작 정의
- JavaScript — 인터랙티브와 향상 기능 추가
- 프레임워크 통합 — 선택한 도구에 적용
이 레이어드 접근법은 프레임워크나 도구가 무엇이든 코드를 깔끔하고 확장 가능하게 유지합니다.
3. 실제 사용자처럼 테스트하기
접근성은 단순히 코드가 아니라 실제 사용자가 제품을 어떻게 사용하는가와 관련됩니다. 실제 사용자처럼 인터페이스를 테스트하는 습관은 눈에 띄지 않는 문제를 발견하게 해줍니다.
간단 체크리스트
- 키보드만 사용해 페이지 전체를 탐색해 보기
- 스크린 리더(NVDA, VoiceOver)를 켜고 흐름을 들어보기
- CSS를 비활성화하고 구조가 유지되는지 확인하기
- 페이지를 200 % 확대하고 사용성을 점검하기
- 제목 레벨이 논리적인 순서를 따르는지 검증하기
스타일 없이도 페이지가 이해 가능하고 기능한다면 시맨틱이 제대로 적용된 것입니다.
마무리 생각 — 당신은 먼저 웹 개발자입니다
프레임워크, 라이브러리, 도구는 계속 진화합니다. React, Vue, Svelte—오늘 인기 있는 선택이 내일은 사라질 수도 있습니다. 새로운 것이 언제든 등장하겠죠.
하지만 HTML, CSS, JavaScript는 웹의 기반이며, 결코 구식이 되지 않을 기술입니다. 접근성과 웹 기본기를 마스터하는 것이 개발자로서 가장 미래지향적인 투자입니다. 이는 여러분의 작업이 사용 가능하고, 유지보수하기 쉬우며, 포용적임을 보장합니다—다음에 어떤 도구가 오든 말이죠.
시작하기에 절대 늦은 때는 없습니다.
- 시맨틱 코드를 작성하세요.
- 접근 가능한 경험을 구축하세요.
- 브라우저가 어떻게 동작하는지 이해하세요.
이것이 진정한 웹 개발자가 되는 길입니다.
행복한 코딩 되세요!