03강-미디어 요소와 시멘틱 요소

오디오와 비디오 요소 개요

• HTML에서는 오디오와 비디오를 직접 재생할 수 있는 요소를 제공
• 미디어 요소는 사용자 경험에 직접적인 영향을 주는 중요한 요소
• 오디오와 비디오는 단순 재생만이 아니라 제어, 자막, 대체 텍스트, 접근성까지 함께 고려

오디오 요소의 역할

• audio 요소는 웹페이지에서 오디오 파일을 재생할 때 사용
• 기본 재생 기능을 제공
• 브라우저 기본 컨트롤과 함께 사용할 수 있음

핵심

• 오디오 재생
• 재생 제어
• 다중 포맷 대응
• 대체 콘텐츠 제공

오디오 요소 기본 사용 방식

• audio 요소에 src 속성을 직접 넣는 방식도 볼 수 있음
• source 요소를 함께 사용하는 방식이 더 일반적임
• 브라우저별 호환성을 고려하기 위해 여러 포맷을 함께 제공하는 방식 사용

기본 방향

• audio 사용
• 내부에 source 여러 개 배치
• 마지막에 대체 텍스트 또는 다운로드 링크 제공

오디오 요소에서 자주 사용하는 속성

재생 파일 지정

• 오디오 파일 경로 지정에 사용
• 단일 파일만 다룰 때는 직접 지정 가능
• 여러 포맷 대응 시에는 source 요소 사용이 일반적임

컨트롤 표시

• controls 속성 사용
• 재생, 일시정지, 이동 등 기본 제어 UI 표시
• 사용자 주도 재생을 위해 기본적으로 사용하는 편

자동 재생

• autoplay 속성 사용
• 페이지 로드 직후 자동 재생 시도
• 브라우저 정책상 차단되는 경우 많음
• 일반적으로 비권장
• 필요 시 muted와 함께 사용하는 경우가 많음

반복 재생

• loop 속성 사용
• 오디오가 끝나면 다시 반복 재생
• 필요한 경우에만 제한적으로 사용

미리 로드 방식

• preload 속성 사용

• metadata

• none

• auto

• 성능 측면에서는 metadata 또는 none 사용이 유리함

• auto는 전체 파일을 미리 불러올 수 있어 부담이 커질 수 있음

오디오 요소에서 source 요소를 함께 사용하는 이유

• 브라우저마다 지원하는 오디오 포맷이 다를 수 있음
• 이를 해결하기 위해 source 요소를 여러 개 나열 가능
• 브라우저는 위에서부터 순서대로 재생 가능한 파일을 탐색

의미

• 첫 번째 파일 재생 가능하면 그것 사용
• 불가능하면 다음 파일 시도
• 끝까지 불가능하면 대체 텍스트 표시

source 요소와 type 속성

• source 요소는 미디어 파일 경로를 지정할 때 사용
• type 속성은 해당 파일의 MIME 타입을 알려주는 역할
• 브라우저는 실제 다운로드 전에 재생 가능 여부를 더 빨리 판단 가능

효과

• 불필요한 다운로드 감소
• 브라우저 호환성 판단에 도움
• 성능 최적화에 유리

오디오 대체 콘텐츠 처리

• 브라우저가 audio 요소를 지원하지 않을 수도 있음
• 이 경우를 대비해 대체 텍스트 제공 가능
• 단순 안내 문장보다 다운로드 링크 제공 방식이 더 실용적임

오디오 파일 포맷 선택 기준

• 브라우저 호환성
• 파일 용량
• 지원 범위

함께 고려하여 순서 배치 필요

비디오 요소의 역할

• video 요소는 웹페이지에서 동영상 파일을 재생할 때 사용
• 오디오 요소와 기본 구조가 유사
• 비디오는 화면 영역이 필요하므로 추가 속성을 함께 고려해야 함

핵심

• 영상 재생
• 재생 제어
• 화면 크기 지정
• 자막 처리
• 접근성 강화

비디오 요소 기본 사용 구조

• video 요소 내부에 source 요소를 배치하는 방식 사용

• 여러 포맷을 제공하여 호환성 확보 가능

• 마지막에는 대체 텍스트나 다운로드 링크 제공 가능

• video

• source

• 대체 콘텐츠

비디오 요소에서 공통적으로 사용하는 속성

비디오 요소는 오디오 요소와 공통으로 다음 속성을 사용할 수 있음

• 재생 파일 지정
• controls
• autoplay
• muted
• loop
• preload

비디오 요소에서 추가로 고려하는 속성

가로 크기와 세로 크기

• 비디오는 화면 안에서 표시되는 영역이 필요
• 따라서 폭과 높이를 지정할 수 있음
• 다만 고정 픽셀보다 반응형 처리 방식이 더 바람직

포스터 이미지

• poster 속성 사용
• 비디오 재생 전 미리 보여줄 대표 이미지 지정
• 로딩 중 빈 화면 대신 안내 이미지 제공 가능
• 사용자 경험 측면에서 중요

인라인 재생

• playsinline 속성 사용 가능
• 모바일 환경에서 전체 화면 강제 전환을 방지할 때 활용 가능

반응형 비디오 처리 원칙

• 비디오는 화면 크기에 따라 자연스럽게 조절되는 것이 좋음

• 부모 영역보다 커지지 않게 제한

• 가로세로 비율이 깨지지 않도록 유지

• 최대 너비를 부모 기준으로 제한

• 높이는 자동 조정

비디오 포맷 선택 기준

• 용량

• 브라우저 지원 범위

• 효율성

• 가벼운 포맷 먼저

• 호환성 높은 포맷 뒤에 배치

미디어 재생 구간 지정 방식

• 미디어 파일은 전체가 아니라 특정 구간만 재생하도록 지정 가능

• 파일 경로 뒤에 시간 범위를 붙여서 사용

• 시작 시점과 종료 시점을 함께 지정 가능

• 특정 장면만 재생

• 데모 구간만 확인

• 긴 강의 영상 일부만 재생

• 브라우저, 서버, 컨테이너 환경에 따라 동작 차이 발생 가능

• 안정적인 제어가 필요하면 자바스크립트 방식이 더 적합함

track 요소의 역할

• track 요소는 비디오나 오디오에 텍스트 정보를 연결할 때 사용
• 대표적으로 자막, 캡션, 화면 해설 처리에 사용 가능
• 접근성과 검색 엔진 최적화 측면에서 매우 중요

track 요소에서 다루는 자막 종류

자막

• 번역 중심 텍스트
• 대사 내용을 다른 언어로 보여주는 용도

캡션

• 청각장애인용 정보
• 대사뿐 아니라 음악, 효과음 등의 설명도 포함 가능

화면 해설

• 시각장애인용 정보
• 화면 상황을 설명하는 텍스트 정보와 연결 가능

track 요소의 주요 속성

자막 파일 지정

• 자막 파일 경로 지정
• 보통 .vtt 형식 사용

종류 지정

• 자막
• 캡션
• 화면 해설

언어 지정

언어 정보 제공 가능

• 한국어
• 영어

사용자 표시 이름 지정

• 자막 메뉴에서 이름 지정 가능

기본 활성 트랙 지정

• default 속성 사용
• 페이지 시작 시 기본 자막으로 설정 가능
• 한 개만 지정하는 것이 일반적임

VTT 자막 파일의 의미

• 자막 파일은 보통 .vtt 형식 사용
• 텍스트 파일 기반
• 시작 시간과 종료 시간 사이에 표시할 문장을 작성하는 구조 사용

의미

• 몇 초부터 몇 초까지 어떤 문장을 띄울지 명시 가능
• 비디오 자막과 캡션에 사용 가능

시멘틱 요소의 개념

• 시멘틱 요소는 의미를 가진 HTML 요소
• 개발자, 브라우저, 검색 엔진, 보조 기술에게 해당 영역의 역할을 명확히 전달

핵심

• 의미 전달
• 구조 명확화
• 접근성 향상
• 검색 엔진 최적화 도움
• 유지보수 향상

시멘틱 요소가 중요한 이유

접근성 측면

• 스크린 리더가 문서 구조를 더 정확히 이해할 수 있음
• 사용자 이동과 탐색 용이

검색 엔진 최적화 측면

• 검색 엔진이 페이지 구조와 핵심 내용을 더 잘 파악할 수 있음
• 중요한 콘텐츠에 더 높은 의미를 부여할 수 있음

유지보수 측면

• 코드만 보아도 각 영역의 역할을 파악하기 쉬움

div 중심 구조의 한계

• 전통적으로는 페이지 구조를 div와 id 조합으로 많이 표현
• 구조를 읽는 사람이나 검색 엔진 입장에서 의미 파악이 어려움
• 중첩이 많아질수록 유지보수가 어려워짐
• 단순 묶기에는 유용
• 의미 전달에는 한계 존재

문서 구조를 나타내는 주요 시멘틱 요소

대표 요소

• header
• nav
• main
• section
• article
• aside
• footer

시멘틱 요소 사용 시 주의점

• 시멘틱 요소들은 표현용이 아니라 의미 전달용
• CSS와 결합해야 실제 시각적 레이아웃이 완성

header 요소의 역할

• 페이지 또는 구역의 머리 부분을 나타냄

예

• 로고
• 사이트 이름
• 소개 문구
• 보조 링크

의미

• 머리말 영역
• 또는 특정 구역의 머리글 영역

footer 요소의 역할

• 페이지 또는 구역의 꼬리 부분을 나타냄
• 보통 다음 정보 포함

예

• 저작권 정보
• 연락처
• 약관
• 보조 링크

의미

• 페이지 전체 꼬리말
• 또는 특정 구역의 바닥글

header 요소와 head 요소의 차이

• head는 문서 메타 정보 영역

• header는 화면에 보이는 구조 영역

• head는 브라우저와 검색 엔진용 정보

• header는 문서 머리 부분 의미 표현

완전히 다른 요소로 구분

nav 요소의 역할

• 주요 내비게이션 링크 묶음에 사용
• 사이트 핵심 메뉴를 나타낼 때 적합

주의

• 모든 링크 묶음에 무조건 사용하는 것은 아님
• 주요 메뉴일 때 사용하는 것이 적절

nav 요소와 목록 구조의 결합

• 내비게이션 메뉴는 보통 목록 구조와 함께 사용

의미

• 내비게이션이라는 역할
• 그 안의 항목들
• 각 항목의 실제 링크

aside 요소의 역할

• 주 콘텐츠를 보조하는 영역
• 이해를 돕거나 보조 정보를 제공하는 영역에 사용

예

• 관련 글
• 광고
• 추천 콘텐츠
• 용어 설명
• 사이드바 정보

section 요소의 역할

• 주제별 영역

• 하나의 주제를 가진 구역을 나타낼 때 사용

• 페이지 안에서 주제별로 내용을 나누는 역할

• 보통 제목과 함께 사용

article 요소의 역할

• 독립 가능한 콘텐츠
• 독립적으로 떼어내어도 의미가 유지되는 개별 콘텐츠에 사용

section 요소와 article 요소의 차이

section

• 주제별 구역
• 큰 내용을 논리적으로 나눌 때 사용

article

• 독립된 개별 글
• 혼자 떼어내도 의미가 성립할 때 사용

section 요소 사용 시 제목이 중요한 이유

• section은 주제를 가진 구역이므로 보통 제목이 필요
• 제목 없는 section 사용은 바람직하지 않은 경우가 많음

main 요소의 역할

• 페이지의 핵심 콘텐츠를 나타냄

• 문서 본문 전체 가운데 가장 중요한 중심 영역을 의미

• 반복되는 메뉴, 사이드 정보, 공통 푸터 등은 보통 포함하지 않음

• 페이지당 하나만 사용

main 요소 사용 시 주의점

• 문서 전체에서 보통 하나만 사용
• 다른 시멘틱 요소 안에 중첩하는 것은 적절하지 않음
• 페이지 핵심 내용을 대표해야 함

시멘틱 구조 예시 이해 방식

블로그 페이지 기준으로 보면

• 상단 로고와 사이트 제목은 header
• 상단 주요 메뉴는 nav
• 본문 전체 중심 영역은 main
• 본문 안 개별 글은 article
• 글 안 주제별 단락은 section
• 관련 링크나 광고는 aside
• 하단 정보는 footer

헤딩 구조와 시멘틱 구조의 관계

기본 방향

• 페이지 전체 대표 제목은 상위 제목
• 그 안의 큰 구역 제목은 다음 단계
• 다시 그 안의 소구역 제목은 다음 단계
• 시멘틱 요소와 헤딩 구조는 함께 설계해야 함

figure 요소의 역할

• 독립적인 콘텐츠와 그에 대한 설명을 함께 묶을 때 사용
• 콘텐츠와 설명은 서로 연결된 한 묶음이라는 점을 명확히 전달

figcaption 요소의 역할

• figure 안에서 캡션 역할 수행
• 설명 문장 또는 출처 정보 표시에 사용 가능

위치

• figure의 첫 번째 자식
• 또는 마지막 자식

details 요소의 역할

• 세부 정보를 펼치거나 접는 기능 제공
• 클릭에 따라 내용을 보여주거나 숨길 수 있음
• 아코디언 메뉴와 유사한 방식 구현 가능

summary 요소의 역할

• details 요소 안에서 제목 또는 버튼 역할 수행
• 사용자가 클릭하는 표제 역할

details 요소의 open 속성

• 초기 열림 여부를 제어하는 속성
• open 속성이 있으면 처음부터 펼쳐진 상태로 시작
• 없으면 기본적으로 닫힌 상태로 시작

time 요소의 역할

• 날짜와 시간에 의미를 부여할 때 사용

효과

• 검색 엔진 처리에 도움
• 기계 해석 가능
• 날짜 의미 명확화

time 요소의 datetime 속성

• 사람이 읽는 표시용 텍스트와 별도로 기계가 이해할 수 있는 날짜/시간 값을 넣는 데 사용

• 화면용 정보 / 기계용 정보를 분리해서 표현 가능

meter 요소의 역할

• 어느 시점의 상태 표시
• 현재 상태값이나 측정값처럼 정적인 수치 상태를 나타낼 때 사용
• 계속 진행 중인 작업률과는 다름

meter 요소의 주요 값

• 현재값
• 최소값
• 최대값

추가

• 낮은 구간
• 높은 구간
• 최적 구간

지정하여 상태 해석 보조 가능함

meter 요소 사용 시 접근성 고려

• 막대만 보여 주면 정확한 수치를 알기 어려울 수 있음
• 스크린 리더 사용자에게는 별도 텍스트 정보가 필요
• 시각적 표시만으로 끝내지 말고 실제 값 정보도 함께 제공하는 방향 사용

progress 요소의 역할

• 작업 진행률을 나타낼 때 사용
• 시간이 지나면서 값이 계속 바뀌는 상태 표현
• 현재 진행 중인 동적인 작업 상태 표시용 요소

progress 요소와 meter 요소의 차이

meter

• 현재 상태
• 정적인 측정값

progress

• 진행 중 작업률
• 동적인 변화값

ruby 요소의 역할

• 한자나 외국 문자 위 또는 아래에 발음이나 주석을 표시할 때 사용

• 본문 문자와 읽는 법을 함께 표현하는 용도

rt 요소의 역할

• ruby 안에서 실제 주석 텍스트를 담는 요소
• 발음, 읽는 법, 보조 설명 등에 사용

wbr 요소의 역할

• 줄바꿈이 필요할 때 사용할 수 있는 허용 위치를 표시

• 무조건 줄바꿈하는 것이 아닌 공간이 부족할 경우 그 위치에서 줄바꿈해도 된다는 의미

dialog 요소의 역할

• 팝업 대화상자를 만들 때 사용
• 복잡한 구조 없이 비교적 쉽게 모달 창 구현 가능

dialog 요소의 특징

• 화면 중앙에 띄우기 쉬움
• 모달 형태 구현 가능
• 배경과 구분되는 팝업창 표현 가능
• 자바스크립트와 함께 열기/닫기 제어 가능

dialog 요소에서 자주 함께 보는 개념

모달 열기

• 일반 페이지 위에 팝업창 표시
• 사용자가 팝업을 먼저 처리하도록 만드는 방식

배경 처리

• 대화상자 뒤쪽 배경을 어둡게 처리 가능
• 현재 창에 집중하도록 유도

닫기 처리

• 버튼 클릭 시 닫기 가능
• 취소와 확인 같은 버튼 동작 연결 가능

시멘틱 요소 정리

• 시멘틱 요소는 문서 구조와 역할을 명확히 전달하는 HTML 요소
• 화면을 꾸미는 목적이 아니라 의미를 설명하는 목적이 핵심
• 대표적으로 header, nav, main, section, article, aside, footer 사용
• 그 밖에도 figure, figcaption, details, summary, time, meter, progress, ruby, dialog 등 다양한 요소 존재

정리

• 오디오와 비디오는 HTML에서 직접 재생 가능
• 실무에서는 source 요소를 함께 사용해 브라우저 호환성을 높이는 방식이 일반적
• controls, preload, poster, track 등은 미디어 UX와 접근성에 중요한 역할
• track 요소를 이용하면 자막, 캡션, 화면 해설 연결 가능
• 시멘틱 요소는 문서 구조를 의미 있게 표현하는 데 사용
• 시멘틱 요소는 접근성, 검색 엔진 최적화, 유지보수 측면에서 중요
• main, section, article, aside 등은 역할이 다르므로 구분해서 사용
• figure, details, time, meter, progress, ruby, dialog 등도 상황에 따라 유용하게 활용 가능