#media
노트 13개
Frontend › Accessibility
자막, 대본, 음성 해설동영상과 오디오에는 소리를 글로 바꾼 자막, 소리와 화면을 모두 글로 담은 대본, 화면 정보를 말로 전하는 음성 해설이 필요하다. 자막은 동기화·동등·접근 가능해야 하고, 실시간 콘텐츠는 속기나 사람이 검수한 음성 인식으로 자막을 단다. 웹에서는 <track>과 WebVTT로 붙인다.
Frontend › CSS
미디어 쿼리 문법과 미디어 기능미디어 쿼리는 미디어 타입(all·screen·print)과 미디어 기능으로 이루어진다. and·or·not과 범위 문법으로 조건을 묶고, 뷰포트 크기·화면 비율·해상도·갱신 속도·표시 모드·색 표현력·입력 장치·사용자 설정·스크립트 여부까지 묻는다. 입력 방식은 화면 크기로 짐작하지 않고 pointer·hover로 직접 묻는다.
Frontend › Graphics
Animated Icon: 영상을 투명 배경 아이콘으로 쓰기Airbnb 스타일 3D 아이콘을 영상으로 만든 뒤, Lava 같은 투명 배경(알파 채널) 애니메이션 포맷으로 바꾸면 앱·웹에서 움직이는 아이콘으로 쓸 수 있다. 포맷별 선택지와 제작 흐름을 정리했다.
Frontend › UI Design
SVG 아이콘: 형식, 넣는 방법, 이름 붙이기, 스타일아이콘은 콘텐츠가 아니라 인터페이스의 일부라 글자처럼 커지고 색이 바뀌어야 한다. 그래서 크기마다 파일이 필요한 PNG보다 한 파일로 모든 크기를 그리는 SVG가 맞다. 글과 함께 있는 아이콘은 장식이니 숨기고, 아이콘만 있는 버튼은 뜻을 이름으로 준다. 인라인 SVG는 currentColor로 글자색과 테마를 따라가게 한다. 프레젠테이션 속성의 낮은 우선순위, transform-box: fill-box, 선 그리기 효과, 넣는 방법별로 되는 CSS도 다룬다.
Frontend › Web
동영상 성능: 형식·poster·자동 재생·임베드동영상은 컨테이너와 코덱을 고르고 FFmpeg로 줄여 여러 source로 준다. 움직이는 GIF는 muted·loop·playsinline 자동 재생 video로 바꾼다. 사용자가 누를 동영상은 preload='none'과 poster, 화면 밖은 지연 로딩, 무거운 서드파티 플레이어는 퍼사드로 늦춘다. poster와 첫 프레임은 LCP 후보다.
Frontend › Web
미디어 캡처와 Web Audio API브라우저에서 카메라·마이크·화면을 받아 다루는 Media Capture and Streams(MediaStream·MediaStreamTrack의 소스와 소비자, getUserMedia·getDisplayMedia, enumerateDevices)와, 소리를 노드 그래프로 만들고 가공하는 Web Audio API(AudioContext, 소스·효과·분석·출력 노드, 정밀한 예약 재생, 자동 재생 정책과 resume, AudioWorklet)를 정리한다.
Frontend › Web
웹 이미지 형식: 벡터·래스터와 GIF·PNG·JPEG·WebP·AVIF·JPEG XL도형으로 된 그림은 SVG, 사진처럼 실제 세계의 디테일이 있는 그림은 래스터다. 래스터는 손실 압축이 가능한 형식을 고르되, 사진은 AVIF·WebP를 먼저 주고 JPEG로 받친다. PNG는 반투명이 필요한 단순 그림과 원본 보관용, GIF는 거의 쓸 곳이 없다. JPEG XL은 크롬·파이어폭스·사파리가 지원하지만 엣지가 빠져 있어 picture로 대체를 둔다.
Frontend › Web
이미지 압축과 인코딩 자동화JPEG는 밝기보다 색을 더 버리고(크로마 서브샘플링) 고주파 디테일을 양자화해 줄인다. WebP는 블록 예측과 영역별 양자화로 같은 품질에서 더 작다. 품질 값은 0~100 하나로 조절하되 도구마다 뜻이 달라 눈으로 확인한다. 실제 서비스에서는 사람이 아니라 빌드 도구·정적 사이트 생성기·CMS가 원본에서 여러 형식과 크기를 만든다.
Frontend › Web
이미지·오디오·비디오 임베드내용인 이미지는 HTML, 장식은 CSS다. <img>의 필수 src·alt, 레이아웃 이동을 막는 width·height, loading·fetchpriority, figure·figcaption, SVG의 role="img"를 정리하고, <video>·<audio>의 source·type·codecs, poster, controls, autoplay와 muted, track의 다섯 kind, 배경 영상과 사용자 정의 컨트롤의 원칙을 다룬다.
Backend › Architecture
라이브 스트리밍의 구조: 인코딩, 세그먼트, ABR, CDN라이브 스트리밍은 캡처한 영상을 압축·인코딩하고, 몇 초 단위 세그먼트로 잘라, 화질별로 여러 벌 만든 뒤(적응형 비트레이트) CDN 엣지로 퍼뜨려 시청자가 가까운 곳에서 받게 한다. 송출은 주로 RTMP·SRT, 시청은 HTTP 기반 HLS·DASH를 쓰고, 1초 미만 지연이 필요하면 WebRTC를 쓴다.
Computer Science
데이터 압축: 무손실과 손실데이터를 더 적은 비트로 표현하는 압축의 두 갈래를 정리한다. 무손실 압축은 반복을 줄이는 런 렝스 부호화, 반복 구간을 참조로 바꾸는 사전 방식(LZ 계열), 자주 나오는 기호에 짧은 부호를 주는 허프만 부호화로 만들고, 손실 압축은 사람의 지각이 둔한 정보를 버리는 지각 부호화다. 동영상은 프레임 사이의 중복까지 없앤다.
Computer Science
디지털 오디오 기초: 표본화부터 입체 음향까지소리를 주파수·진폭·음색으로 나누고, 아날로그 소리가 표본화·양자화·부호화를 거쳐 디지털이 되는 과정, 나이퀴스트 정리와 파일 크기 계산, PCM·ADPCM·MP3 같은 부호화와 파일 포맷, MIDI, 서라운드와 HRTF 기반 입체 음향을 정리한다.
Life & Learning › Journalism
언론사의 디지털 전환 과제지면·TV 중심 언론사가 디지털로 넘어가며 공통으로 마주치는 네 가지 과제(디지털 전환, 수익 다각화, 콘텐츠 경쟁력, 신뢰)와 매체 유형별로 달라지는 우선순위.