HTTP/2의 시맨틱스: 새로운 활용 사례
8.1 반응형 디자인
유저 에이전트의 경우 정규화되지 않은 정보라 정확하지 않습니다. 스마트폰에는 full HD(1920 X 1080)를 초과하는 것이 많이 있는데, 브라우저의 경우 한단계 작은 논리 해상도의 디스플레이가 연결되어 있다고 인식합니다. 이러한 브라우저의 논리해상도를 CSS 픽셀이라고 합니다.
고밀도 해상도
모바일, 태블릿, 데스크탑까지 구분없이 작은 크기의 디바이스에 높은 밀도의 해상도를 가진 화면
PPI(Pixel per inch)
1인치당 몇개의 픽셀로 이뤄졌는지를 나타내는 밀도의 단위로 화면이 작은 기기일수록 더 높은 밀도의 해상도를 통해 선명한 화면 구현
물리픽셀과 논리픽셀
각 기기에 맞춰 픽셀을 제어하는 것은 불가능하므로, 물리픽셀과 논리픽셀 두가지로 분리되기 시작했습니다. 아이폰4의 경우 해상도는 640*960(물리픽셀)이지만, 기기에서 실제로 나타나는 CSS로 표현할 수 있는 값은 320*480(논리픽셀) 입니다. 이러한 논리와 물리의 비율을 device-pixel ratio라 부릅니다.
반응형 디자인을 위해 메타태그를 header에 넣어주게된다면 레이아웃에 맞춰지게됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Shell
복사
레이아웃은 해결되더라도, 이미지표시때 계단 현상이 생기게 되는데, srcset 속성을 사용해 여러 이미지 소스를 지정해서 브라우저가 해당 파일을 선택할 수 있게 하는 방법이 있습니다.
<img src="photo.png" srcset="photo@2x.png 2x, photo@3x.png 3x">
Shell
복사
8.2 시맨틱 웹
의미론적 웹이란 뜻으로 HTTP를 의미적으로 전달한다는 의미입니다. 여기에서 의미를 다룬다 라는 말의 뜻은 페이지에 포함된 정보를 분석해서 정보를 집약하거나 검색하는 과정을 사람 손을 거치지 않도록 한다 입니다.
8.2.1 RDF
XML 등을 이용해 의미를 기술하려는 범용적인 접근으로 제안된 방식입니다. 이때 제안된 것이 RDF(Resource Description Framework)라는 형식으로, URI로 식별된 엔티티간 관계성을 기술합니다.
현재는 RDF/XML이라고 부르며, 웹사이트는 HTML을 기술해 그대로 RDF를 삽입할 순 없고, 외부에 리소스를 두어야합니다.
8.2.2 더블린 코어
RFC 5013과 ISO에서 정의된 메타데이터 집합입니다. 오픈 eBook등에 OPF파일이라는 핵심파일등으로 표시되고 있습니다.
8.2.3 RSS
RDF가 가장 성공한 사례라고 봐야합니다. 이는 웹사이트의 업데이트 기록 요약에 대한 배급 형식입니다. 한때 많은 사람이 사용한 웹 서핑 스타일이였습니다. 웹사이트를 돌아다니지 않고도 전용 리더가 등록한 RSS의 업데이트를 확인하고, 읽지 않은 항목만 읽을 수 있습니다. 이들은 브라우저에 확장기능등으로 제공되고 있습니다.
8.2.4 마이크로포맷
RDF와 달리 HTML 태그와 클래스를 사용해 표현되어져있습니다.
8.2.5 마이크로데이터
HTML에 삽입 가능한 시맨틱 표현 형식으로, 검색 엔진이 지원합니다.
마이크로포맷과 달리 기존 HTML 속성과 충돌하지 않도록 고유속성을 사용하는데, itemscope, itemtype, itemprop 세종류입니다.
8.2.6 RDF의 역습
RDF 자체는 많이 사용되지 않지만, 파생 포맷이 있습니다. 이중 JSON-LD가 추천됩니다.
8.3 오픈 그래프 프로토콜
데이터 포맷의 경우 주로 검색엔진에서 사용되었지만, 오픈 그래프 프로토콜은 소셜 네트워크에서 사용되는 메타데이터입니다.
오픈 그래프 프로토콜을 사용시 <html> 태그의 xmlns:og=”http://ogp.me/ns#” 네임스페이스를 선언한 뒤 SNS를 위한 메타 태그로서 기술합니다.
<html xmlns:og="http://ogp.me/ns#">
Shell
복사
자주 사용하는 메타 태그입니다. 이중 description 외에는 필수입니다.
•
og:title
•
og:type
•
og:url
•
og:image
•
og:description
다음은 선택적으로 사용하는 옵션들입니다.
•
og:audio
•
og:determiner: a,the 관사
•
og:locale: 페이지의 콘텐츠가 대상으로 하는 언어
•
og:locale:alternate: 페이지가 제공하는 다른 언어
•
og:site_name: 사이트 이름
•
og:video: 동영상 파일
이와 비슷하게 트위터 카드가 있는데, 이는 트위터의 링크를 뭍였을 때 방문할 페이지의 일부를 미리 보여줍니다.
8.4 AMP
AMP(Accelerated Mobile pages)는 휴대 기기에서 웹페이지의 로딩 속도를 높이는 방법입니다. 이는 모바일 사이트에서 우선 표시되고, 캐러셀 형식으로 요약이 올라옵니다.
8.5 HTTP 라이브 스트리밍에 의한 동영상 재생
HTTP 라이브 스트리밍(HTTP LIVE STREAMING-HLS)는 동영상 스트리밍 재생 방식으로 현재 모바일 브라우저에서 지원중입니다.
•
실시간 중계 등의 스트리밍에 사용가능
•
회선 속도에 맞춰 적절한 해상도 동영상 선택가능
•
자막 음성 전환
•
포맷으로 MPEG2-TS 사용
8.5.1 HLS의 비디오 태그
video 태그는 여러가지 소스를 기술할 수 있게 되어 있습니다.
<video class="video" controls="" autoplay>
<source src="http://..."/>
<source src="/videos..." type="video/ogg">
</video>
JavaScript
복사
8.5.2 마스터의 .m3u8 파일
파일 정보를 담은 텍스트 파일로, UTF-8 형식으로 된 재생 목록입니다.
8.5.3 자막 .m3u8 파일
자막파일은 60초단위로 잘려있는데, 루트에 잘린 자막파일을 묶는 파일이 링크되어 있습니다.
8.5.4 동영상 파일
마스터 인덱스의 .m3u8이 참조하는 인덱스는 대체 ㅇ인덱스라합니다. 이곳에 동영상 파일이 나열되어 있습니다.
8.5.5 HLS의 장점과 단점
HLS의 장점은 전 세게 라우터가 지원하는 HTTP를 사용하는 점입니다.
단점은 “스트리밍”이라고 하지만, 실체는 점진적 다운로드 방식이기에 청크별 다운이 끝나지 않는다면, 재생이 시작하지 않아 지연이 발생합니다.
8.6 MPEG-DASH 동영상 스트리밍 재생
DASH는 Dynamic Adaptive Streaming over HTTP의 첫글자로 HTTP를 사용해 동적으로 적절한 비트레이트로 스트리밍하는 방식입니다. HLS와 방향은 같지만, 이를 확장합니다. 이를 구현하기 위해 video.js라는 라이브러리가 제공되어 이를 이용하면 사용가능합니다.
8.6.1 MPEG-DASH와 HLS 재생 방법의 차이
둘의 “HTTP를 통한 점진적 다운로드 동영상 재생”은 같지만, 대전제 재생 방법이 다릅니다. HLS는 HTML에서 재생이아닌 브라우저에서 .m3u8 파일을 해석해서 재생하는 시스템이 포함되어있다 봐야합니다. MPEG-DASH도 브라우저 외 뷰어가 있으며, dash.js가 제공됩니다. 브라우저 자체에서 직접 해석하는 것이 아닌, 데이터 분석은 JS로 하고, 동영상 재생은 브라우저 코덱을 다루는 API 등을 이용해서 진행합니다