What’s !important #11: 3D Voxel 장면, Flying Focus, CSS 구문 및 기타 소식

만약 (스타일을 입힐 수 있는) 3D Voxel (복셀) 장면, Flying Focus (날아다니는 포커스) 애니메이션, 또는 새로운 CSS 구문(Syntaxes)이 당신의 취향이라면, 이번 What’s !important 호는 분명 당신을 위한 것입니다.

또한 Polypane, 스크롤 기반 애니메이션 (scroll-driven animations), 그리고 Chrome 148 및 Safari 26.5의 최신 웹 플랫폼 업데이트 소식도 담고 있습니다.

3D Voxel 장면을 위한 Heerich.js

Erwin Heerich의 조각 작품에서 영감을 받아, David Aerne는 3D Voxel (복셀) 장면을 생성하기 위한 작은 엔진인 Heerich.js를 제작했습니다. 이 장면들은 SVG로 렌더링되며, SVG에서 CSS 변수 (CSS variables)를 사용할 수 있기 때문에 기본적으로 CSS를 사용하여 스타일을 지정할 수 있습니다.

Polypane 스니펫 (snippets)

웹 개발을 위한 최고의 브라우저로 널리 간주되는 Polypane가 스니펫 스토어 (snippet store)를 출시했습니다. 따라서 컴포넌트를 클릭하고 모든 "불필요한 쓰레기(bloaty crap)" 없이 기본 HTML만 복사하고 싶다면, 1-Click De-crapulator가 바로 당신이 원하는 것입니다. 참고로, 이름이 정말 환상적이네요.

View Transitions를 이용한 포커스 애니메이션

Chris Coyier는 View Transitions (뷰 전환)를 사용하여 포커스를 애니메이션화하는 방법을 보여주었습니다. 그는 또한 "불필요한 움직임(unnecessary motion)"과 WebAIM의 조건부 prefers-reduced-motion 구현을 대조했는데, 저는 이것이 올바른 접근 방식이라고 생각합니다. 왜냐하면 포커스가 매우 잘 보일 때조차 포커스를 추적하는 것이 어렵다고 느끼기 때문입니다.

CodePen Embed Fallback

어찌 되었든, 이는 기술에 대한 환상적인 탐구입니다. 또한, 댓글 하단에서 Kilian Valkhof(사실 Polypane의 설립자입니다)가 앵커 포지셔닝 (anchor positioning)을 이용한 CSS 전용 플로팅 포커스 (floating focus) 기술 (또는 Chris가 부르는 대로 "flying focus")을 공유했습니다.

of <selector> 구문

Paweł Grzybek이 언급하기하기를, of <selector> 구문은 현재 실제로 지원이 잘 되고 있지만 (Baseline), 솔직히 저는 그것에 대해 들어본 적조차 없었습니다.

CSS :nth-child(n of selector)가 존재한다는 것은 알고 있었지만, 요즘 얼마나 잘 지원되는지는 몰랐습니다. 또 다른 몰랐던 점은 아래 예시처럼 그것과 함께 CSS 중첩 (CSS nesting)을 사용할 수 있다는 것입니다. 현대적인 CSS는 정말 놀랍습니다 ❣️ developer.mozilla.org/en-US/docs/W… #css

[image or embed]

— Paweł Grzybek (@pawelgrzybek.com) 17:51 · May 5, 2026

다음 선택자는 "모든 형제 요소 중에서, 두 번째 .intro를 선택하되, 그것이 <div>인 경우에만 선택한다"는 의미입니다. 이는 div:nth-of-type(2)와 비슷하지만, nth-of-type은 동일한 타입의 요소만 선택할 수 있는 반면, of <selector>는 어떤 선택자와도 함께 작동한다는 차이가 있습니다.

div:nth-child(2 of .intro) {
  /* ... */
}

&가 부모 선택자 (즉, .intro)와 동일하다는 점을 고려하면, 두 번째 예시는 "모든 형제 요소 중에서, .intro 내부의 두 번째 .intro를 선택한다"는 의미가 됩니다. 또한 :nth-child() 앞에 아무것도 없기 때문에, 이번에는 .intro가 무엇이든 상관없습니다.

.intro {
  :nth-child(2 of &) {
    /* ... */
  }
}

현재 CSS에서는 정말 많은 일이 일어나고 있어서, 제가 놓쳤던 정보가 이렇게 다시 돌아올 때 매우 유용하다고 느낍니다. 그런데 재미있게도, 이 글을 쓰는 와중에 Preethi Sam이 약 일주일 전쯤 of <selector> 구문에 관한 글을 썼다는 것을 발견했습니다 (읽기 목록에 추가).

범위 구문 (range syntax) 이해하기

범위 구문 (range syntax)은 미디어 쿼리 (media queries) 및 컨테이너 쿼리 (container queries)를 위해 비교 연산자 (>, <, >=, <=)를 사용하는, 비교적 최신이며 가독성이 더 높은 구문입니다. Ahmad Shadeed가 범위 구문이 작동하는 방식을 전문적으로 설명했지만, 브라우저 지원 여부를 주의 깊게 살펴봐야 합니다. 웹 브라우저들은 여전히 컨테이너 쿼리를 출시 중이며, 해당 쿼리를 위한 범위 구문은 별도로 출시되어야 합니다. 예를 들어, 컨테이너 스타일 쿼리 (container style queries)는 다음 주 Firefox 151에서 출시되지만, 컨테이너 스타일 쿼리를 위한 범위 구문은 플래그 (flag)와 함께 출시될 예정입니다.

놓치기 쉬운 부분입니다 (제가 어떻게 아는지 묻지는 마세요).

스크롤 기반 애니메이션 (scroll-driven animations) 이해하기

스크롤 기반 애니메이션 (scroll-driven animations)은 다소 어려울 수 있지만 (특히 view() 타임라인을 사용하는 경우), Josh Comeau의 전문적인 스크롤 기반 애니메이션 설명을 통해 훨씬 쉽게 이해할 수 있습니다. 스크롤 트리거 (scroll-triggered) 애니메이션이 다가오고 있는 만큼, 아직 익숙하지 않다면 스크롤 기반 애니메이션을 먼저 마스터할 것을 강력히 추천합니다. 다시 한번 말씀드리지만, 제가 어떻게 아는지 묻지는 마세요 (CSS를 짜며 눈물을 흘리는 중).

새로운 웹 플랫폼 업데이트

새로운 웹 플랫폼 업데이트

• Chrome 148
  • 이름만 지정하는 컨테이너 쿼리 (container queries) (현재 Baseline)
  • revert-rule 키워드 (안정적인 Safari 지원 없음)
  • 기능 쿼리를 위한 at-rule() 함수 (Safari 또는 Firefox 지원 없음)
  • <video>/<audio>를 위한 loading 속성 (Safari 또는 Firefox 지원 없음)
• Safari 26.5
  • :open 의사 클래스 (현재 Baseline)
  • 업데이트된 random() 함수 (Chrome 또는 Firefox 지원 없음)

이 멋진 댓글에서 영감을 받아, 저희는 작가들이 수행하는 모든 놀라운 작업과 우리가 의심할 여지 없이 배우고 영감을 받는 수많은 다른 교육자들에게 감사를 표하고 싶습니다. 계속 전진하세요, CSS-Tricksters!

저는 CSS 전문가가 아니지만, 전문적인 CSS 교육자들이 가장 좋습니다. 그들의 디자인 기술, 웹 플랫폼을 최대한 활용하는 능력, 그리고 웹 구축에 대한 일반적인 열정은 다른 유형의 개발자들에게는 비할 데가 없습니다!

— George Rodier (@georgerodier.com) 15:42 · Apr 30, 2026

다음 기회에 만나요!