What’s !important #10: HTML-in-Canvas, 육각형 지도, E-ink 최적화 및 기타 소식

개발자들은 HTML-in-Canvas, 육각형 세계 지도 분석 기능, E-ink 기기를 위한 웹 기반 OS, img src를 content로 대체하는 기술 등을 실험해 왔습니다. 이것이 바로 What’s !important #10입니다.

HTML-in-Canvas 실험

시각적 효과와 함께 <canvas> 내에 실제 의미론적 HTML (semantic HTML)을 렌더링할 수 있게 해주는 새로운 API인 HTML-in-Canvas는 현재 큰 화제가 되고 있으므로, 이를 가장 먼저 다뤄보겠습니다. Amit Sheen은 HTML-in-Canvas API가 어떻게 작동하는지 보여주었으며, HiC Showroom에서 다음과 같은 데모(Chrome 146 버전에서 chrome://flags/#canvas-draw-element 플래그를 활성화해야 함)를 제작했습니다.

육각형 세계 지도 분석 기능 구축하기

Ben Schwarz(멋진 이름이지만 저와 친척 관계는 아닙니다)는 육각형 세계 지도 분석 기능을 구축하는 것에 대해 이야기했습니다. 이는 개발 과정을 따라가는 가이드라기보다는 회고(retrospective)에 가깝지만, 분석, 디자인 제약 사항, 영감, 엔지니어링, 그리고 물론 SVG와 CSS에 관한 정말 흥미로운 읽을거리입니다.

Rekindle — E-ink 기기를 위한 웹 기반 OS

Rekindle은 기본적으로 Kindle, Kobo, Boox와 같이 기능이 적고 저사양인 경우가 많은 E-ink 기기를 위한 웹 기반 운영체제(OS)입니다. Rekindle은 엄청난 수의 기능과 앱을 포함하고 있으며, 흑백으로 디자인되었고, 애니메이션이 없으며, 의심할 여지 없이 훨씬 더 많은 E-ink 최적화가 적용되어 있습니다.

여기서 얻을 수 있는 교훈은 (안타깝게도) 튜토리얼도 아니고, (위의 세계 지도 회고와 같은) 논평도 아닙니다. 그것은 바로 우리가 E-ink 기기에 매우 유용할 수 있는 수많은 미디어 쿼리 (media queries)를 가지고 있음에도 불구하고, 해당 기기들이 이러한 쿼리를 인식하지 못하는 저사양의 독점적 웹 브라우저를 탑재하고 있다는 사실입니다. Media Queries Level 5는 호버 (hover) 가능 여부, 포인터의 정밀도, 디스플레이 업데이트 빈도, 색상 깊이 (color depth), 단색 비트 깊이 (monochromatic bit-depth), 색상 인덱스 크기, 동적 범위 (dynamic range) 등을 쿼리할 수 있으며, 아마 그 이상의 기능도 가능할 것입니다.

어떻게 생각하시나요? E-ink 최적화가 향후 몇 년 안에 크게 주목받을까요, 아니면 이러한 미디어 쿼리 (media queries)에 대한 수요가 낮기 때문에 Rekindle과 같은 전용 서비스가 존재해야 하는 걸까요? 브라우저와 많은 미디어 쿼리들이 활발히 개발 중이라는 점을 주목할 필요가 있으므로, 저도 확신할 수는 없습니다. 일단 지켜보는 게 어떨까요?

어느 쪽이든, Rekindle에 대한 개발자 심층 분석 (dev deep dive)을 보고 싶네요!

img

src

content를 사용하는 방식

Jon은 다음과 같이 CSS를 사용하여 이미지 소스를 대체할 수 있다는 사실을 발견했습니다:

<img src="image.png" alt="Alt text">

img {
content: url(new-image.png) / "New alt text";
}

오늘 배운 내용 (TIL)! #CSS를 사용하여 #HTML <img>의 "src"를 변경할 수 있다는 걸 누가 알았겠어요: img { content: url(whatever.png) } 가상 요소 (PSEUDOS) 없이도 가능합니다! 현재 모든 브라우저에서도 작동하는 것 같네요. 어떻게 이걸 놓쳤을까요?

— Jon (@scrwd.mastodon.social.ap.brid.gy) 2026년 4월 20일 13:09

이미 11년 동안 베이스라인 (Baseline)이었던 content 속성에 대해 이런 사실을 알게 되어 정말 흥미롭습니다. 조금 더 실험해 본 결과, 이 트릭은 image-set() 함수와도 작동한다는 것을 발견했습니다:

img {
content: image-set(
url("image.png") 1x,
...

따라서 마크업 (markup)을 변경할 방법이 없는 비반응형 (non-responsive) <img>를 사용하는 웹사이트를 작업 중이라면, 대신 CSS에 로직을 작성하세요.

sizes=auto

반응형 이미지 구현하기: 그렇긴 하지만, 만약 HTML에 접근할 수 있다면, srcset 및 sizes HTML 속성을 사용하여 반응형 이미지를 제공하는 것이 좋습니다. Mat Marquis는 새로운 sizes=auto 속성-값 조합이 지연 로딩 (lazily loaded)되는 이미지의 반응형 중단점 (breakpoints)을 어떻게 대체하는지 시연했습니다.

관심이 있다면, Amit Sheen이 중단점 없이 레이아웃(반드시 이미지는 아님)을 구축하는 것에 대해서도 이야기했습니다.

새로운 웹 플랫폼 기능 및 업데이트

• Firefox 150
• :muted 및 기타 모든 미디어 기반 가상 클래스 (pseudo-classes) (Chrome 미지원)
• revert-rule (Safari 미지원)
• sizes=auto (Safari 미지원)
• 이미지 지원이 포함된 light-dark() (Chrome/Safari 미지원)
• color-mix()

두 개 이상의 색상을 위한 구문 (Chrome/Safari 미지원)
ariaNotify() (Chrome/Safari 미지원)

• Safari TP 242

더 많은 콘텐츠를 원하신다면, Syntax.fm의 Wes Bos와 Scott Tolinski가 10가지 새로운 CSS 및 HTML API에 대해 논의하는 내용을 확인해 보세요:

다음에 만나요!