Velog
시멘틱 HTML이 여전히 중요한 이유
CSS와 JavaScript가 발전한 현대 웹에서도 시멘틱 HTML이 여전히 중요한 이유를 설명하는 아티클입니다. 접근성(Accessibility), SEO, 코드 유지보수성, 그리고 브라우저 기본 동작 활용 측면에서 의미 있는 HTML 태그 사용의 가치를 다룹니다.
핵심 요약
이 아티클은 CSS 레이아웃과 시각 표현를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. CSS와 JavaScript가 발전한 현대 웹에서도 시멘틱 HTML이 여전히 중요한 이유를 설명하는 아티클입니다. 접근성(Accessibility), SEO, 코드 유지보수성, 그리고 브라우저 기본 동작 활용 측면에서 의미 있는 HTML 태그 사용의 가치를 다룹니다. div 남용이나 ARIA 오용을 피하고 올바른 시멘틱 마크업으로 포용적인 웹을 만드는 것이 프론트엔드 개발자의 중요한 역량입니다.
이 아티클은 CSS 레이아웃과 시각 표현를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
CSS 레이아웃과 시각 표현를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. 스크린 리더와 보조 기술은 시멘틱 태그의 암묵적 ARIA role을 활용해 페이지 구조를 사용자에게 전달한다 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
스크린 리더와 보조 기술은 시멘틱 태그의 암묵적 A
스크린 리더와 보조 기술은 시멘틱 태그의 암묵적 ARIA role을 활용해 페이지 구조를 사용자에게 전달한다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
스크린 리더와 보조 기술은 시멘틱 태그의 암묵적 A를 개념으로만 기억하고 맥락 없이 적용하면 스크린 리더와 보조 기술은 시멘틱 태그의 암묵적 ARIA role을 활용해 페이지 구조를 사용자에게 전달한다 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
검색 엔진은 header
검색 엔진은 header, main, article, nav 등의 태그로 콘텐츠의 맥락과 중요도를 파악하여 SEO에 영향을 준다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
검색 엔진은 header를 개념으로만 기억하고 맥락 없이 적용하면 검색 엔진은 header, main, article, nav 등의 태그로 콘텐츠의 맥락과 중요도를 파악하여 SEO에 영향을 준다 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
button
button, input 등 네이티브 시멘틱 요소는 키보드 접근성, 포커스 관리, 폼 제출 등 기본 동작을 브라우저가 자동으로 처리한다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
button를 개념으로만 기억하고 맥락 없이 적용하면 button, input 등 네이티브 시멘틱 요소는 키보드 접근성, 포커스 관리, 폼 제출 등 기본 동작을 브라우저가 자동으로 처리한다 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
읽는 순서
- 1이론
"시멘틱 HTML이 여전히 중요한 이유"의 멘탈 모델과 요약을 먼저 읽고, CSS 레이아웃과 시각 표현와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
시멘틱 HTML이 여전히 중요한 이유에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 CSS 레이아웃과 시각 표현와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "div 대신 button 태그를 사용해야 하는 이유를 접근성 관점에서 설명해주세요."에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "시멘틱 HTML이 여전히 중요한 이유에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 키보드 포커스 가능, Enter/Space 키 이벤트 자동 처리, 스크린 리더에 'button' role 자동 전달, disabled 속성 지원 등을 언급하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "시멘틱 HTML이 여전히 중요한 이유에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] ARIA First Rule(네이티브 시멘틱 우선)을 설명하고, div에 role=button을 추가하면서 키보드 이벤트는 미처리하는 경우, 중복 ARIA 레이블 같은 안티패턴을 언급하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "시멘틱 HTML이 여전히 중요한 이유에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] POUR 원칙: Perceivable(인지 가능), Operable(운용 가능), Understandable(이해 가능), Robust(견고성)를 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"스크린 리더와 보조 기술은 시멘틱 태그의 암묵적 A"를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.