웹 투명 비디오는 alpha 를 누가 들고 오느냐로 갈린다. 1 코덱이 싣는다: video 에 source 두 개를 두고 HEVC .mov 를 먼저, VP9 .webm 을 다음에 둔다. Safari 는 VP9 의 alpha 를 못 써서 HEVC 가 먼저 와야 한다. JS 없이 되지만 HEVC alpha 인코딩은 macOS 에서만 되고, 예제 기준 1.1MB 와 3.4MB 로 무겁다. Safari 27 베타에 WebM alpha 가 들어오는 중이다(2026-08). 2 animated AVIF 를 img 로: AV1 스트림 두 개(색, 밝기로 된 alpha)라 504kB 로 작지만 Safari 에서 깨지고 60fps 도 버거우며, img 라 재생 제어·소리·source 대체가 없어 아직 못 쓴다. 3 직접 싣는다: 위는 색, 아래는 alpha 를 밝기로 쌓은 일반 영상 하나를 WebGL 이 rgb 는 위에서, alpha 는 아래 밝기에서 가져와 합친다. 예제 기준 460kB 이고 alpha 쪽은 8kB 만 더했다. ffmpeg 의 alphaextract 와 vstack 으로 만든다. seeThru 는 같은 발상을 2012 년에 canvas 2D 로 한 것이다. 가장 작지만 JS 와 WebGL 이 필요하다.

Footnotes

  1. 세 방식을 비교한다 — 네이티브(VP9 + HEVC)는 무겁고 버그가 있고, animated AVIF 는 Safari·성능에서 막힌다. 그래서 색과 alpha 를 위아래로 쌓은 AV1 영상 하나를 WebGL 로 합치는 <stacked-alpha-video> 를 만들었다. 인코딩 ffmpeg 명령 포함. ↩

  2. 2020년 기준 탐색기. GIF·APNG·PNG 루프를 거쳐 WebM alpha(GIF 5.8MB → 540KB)로 갔다가 Safari 에서 검은 배경을 보고, Safari 엔 HEVC alpha 를 주는 혼합안에 도착한다. HEVC 는 Mac 의 Finder·Compressor 로 만들고, Safari 버전은 UA 로 판별해 src 를 JS 로 넣는다. ↩

  3. 네이티브 방식(WebM + HEVC) 실무 가이드 — 무엇을 내보내고 어떻게 변환해 <video> 에 넣는지. 2026-08 갱신으로 Safari 27 베타에 WebM alpha 가 들어온다는 소식이 추가됐다. ↩

  4. alpha 를 만드는 쪽. 코덱별 alpha 지원(중간 코덱 ProRes 4444, 배포 코덱 VP9)과 ffmpeg 로 VP9·ProRes alpha 인코딩, 표현식으로 도형을 그려 alpha 마스크를 씌우는 법. ↩

  5. 2012년 라이브러리. alpha 를 영상 안에 따로 담아 두고 canvas 에 다시 그려 투명을 입힌다 — Jake 글의 스택 방식의 canvas 2D 판. README 가 스스로 “WebM·HEVC 네이티브가 되니 아마 필요 없다”고 적는다. ↩

#video#ffmpeg#canvas#transparency
#27

Footnotes

  1. WebGL + Three.js, 데이터는 Mapbox ↩

  2. WebGL + d3-geo ↩

  3. ISS 위치 추적 — Three.js + satellite.js ↩

#globe#webgl
#24

Footnotes

  1. Raspberry Pi Zero W + 1.3인치 OLED, OpenWeatherMap API 를 Python 스크립트로 ↩

  2. Preact + Netlify Functions ↩

#raspberry-pi
#23

Debouncing and Throttling Explained Through Examples | CSS-Tricks1

  • throttle: 함수가 호출되는 속도를 제한 (일정시간 동안)
  • debounce: 추가 호출 없이 일정 시간이 경과할 때까지 함수 실행을 지연하거나 제한 (마지막 이벤트만)

Footnotes

  1. 검색 입력, 스크롤 이벤트, 크기 조정 이벤트 등 디바운싱과 스로틀링이 유용할 수 있는 사례들 ↩

#throttle#debounce#lodash#event#ui
#22

Footnotes

  1. 랜딩 페이지, 마케팅 사이트, 전자상거래 스토어를 만들 수 있는 드래그 앤 드롭 빌더 ↩

  2. 직관적인 UI로 복잡한 반응형 레이아웃, 프로토타입 및 랜딩 페이지를 제작 ↩

  3. React 기반 비주얼 에디터 ↩

  4. 반응형 디자인을 만들고 자동으로 코드를 생성 ↩

  5. 실시간 피드백을 통해 UI 컴포넌트를 빌드할 수 있는 React 기반 비주얼 에디터 ↩

  6. React 및 ImmutableJS를 사용하여 반응형 UI 레이아웃을 만들기 위한 오픈 소스 드래그 앤 드롭 레이아웃 빌더입니다. ↩

#ui#builder#dnd
#21

자연어로 계산을 쓰는 계산기들.

Footnotes

  1. math.js ↩

#ui#calculator#math
#19
interface MathFn {
  (a: number, b: number): number
}
const sum: MathFn = (a, b) => a + b

Footnotes

  1. function declarations, function expressions, arrow functions, methods등 TypeScript에서 함수를 선언하는 다양한 방법들. ↩

  2. TypeScript에서 함수를 입력하는 방법에 대한 종합적인 가이드 ↩

#typescript#function
#15
📎

The TypeScript Handbook

www.typescriptlang.org

기초 및 개념 이해

React와 TypeScript

타입 시스템 심화 및 패턴

성능 및 효율적인 코드 작성

스타일 가이드 및 실전 활용

Node.js 및 빌드 관련

함수형 프로그래밍과 TypeScript

마이그레이션 사례

Footnotes

  1. Chrome DevTools 및 Puppeteer를 TypeScript로 마이그레이션한 경험에 대한 설명 ↩

  2. 대규모 JavaScript 코드베이스를 TypeScript로 자동 마이그레이션하는 도구인 “ts-migrate”를 소개하는 Airbnb 엔지니어링 팀의 블로그 게시물 ↩

  3. Flow에서 TypeScript로 마이그레이션한 경험을 설명하고 오픈소스 flow-to-typescript-codemod 도구에 대한 링크를 포함하는 Stripe 엔지니어링 팀의 블로그 게시물 ↩

  4. Etsy 엔지니어링 팀이 대규모 웹 애플리케이션에서 TypeScript를 채택한 방법, 직면한 문제 및 얻은 이점을 설명 ↩

#typescript#migrating#branded-types
#13

Footnotes

  1. 날짜 및 시간 작업을 위한 Temporal API 공식 문서 ↩

  2. 날짜 및 시간을 사용하여 작업할 때의 문제를 논의하고 솔루션으로 Temporal API를 제안하는 블로그 게시물 ↩

  3. Date 개체, 날짜 형식, 시간대 및 날짜 라이브러리를 포함하여 JavaScript에서 날짜 작업에 대한 포괄적인 설명 ↩

  4. 타임존 작업의 기본 사항을 설명 ↩

#javascript#date#temporal#timezone
#11

Quick tip: reusable Array search predicates - JASON Format

arr.filter(callback(element[, index[, array]])[, thisArg])

배열 메서드에서 2번째 인자 thisArg에 참조값을 전달해서 재사용 가능한 함수를 만드는 트릭. 단 성능 이슈가 있으므로 주의해야 한다.

#javascript#arraystackblitz.com
#8
32 중 31페이지
이전 페이지다음 페이지