섀도우 DOM은 2011년 크롬(chrome)의 실험 단계를 거쳐 2012년 표준화 절차에 들어가 2020년부터 주요 웹브라우저에서 지원하기 시작했다. 평소 웹 기술 업데이트에 관심이 많은 개발자들은 익히 알고 있을 것이다. 반대로 그렇지 못한 개발자들이 있을 수 있다는 뜻이기도 하다. 어떤 경우이든 섀도우 DOM이 등장하게 된 배경을 이야기하는 것은 모두에게 중요할 것 같다. 다음의 등장 배경에 공감이 된다면 섀도우 DOM을 적극적으로 알아보고 활용해야 되지 않을까?

첫 번째, DOM 구조의 캡슐화와 격리이다. 웹 문서에서 생성되는 DOM은 매우 복잡하다. 그에 따른 CSS와 자바스크립트 코드가 뒤엉켜 있을 수 있다. 그렇기 때문에 의도치 않은 코드 충돌 등의 문제가 발생할 수 있는 확률이 높아졌다. 캡슐화(은닉)된 독립적인 컴포넌트 단위의 인터페이스를 설계한다면 그러한 문제를 예방할 수 있을 것이다.

두 번째, 재사용이 가능한 컴포넌트(component)이다. 웹은 비슷한 기능과 동작을 하는 UI를 개발하는 일이 잦다. 지루한 작업이 될 수도 있고 무엇보다 생산성을 떨어뜨리는 원인이 되기도 한다. 영리한 개발자들은 미리 마스터 코드를 준비해 놓고 복사해 커스터마이징 하는 방식으로 작업을 하기도 한다. 하지만 임기응변식의 코드 변경은 유지보수에서 발목을 잡는 경우도 있다. 생산성 만큼 유지보수에 대한 고민도 매우 중요하다. 섀도우 DOM은 두 마리의 토끼를 잡을 수 있다.

이제 공감이 된다면 섀도우 DOM 개론부터 살펴보자.

CSS의 기본은 스타일링을 할 대상을 빠르게 찾아내는 것이다. 이것을 선택자(selector)라고 한다. CSS는 정말 다양한 선택자가 존재한다. 한편으로는 활용폭이 좁은 개발자들 한테는 너무 많다 싶을 정도까지 생각할 수도 있다. 하지만 선호와 작업 대상에 따라 사용 빈도의 차이는 있을 수 있겠지만 어떤 경우에는 이게 있어서 다행이라는 생각이 드는 필연적인 선택자도 존재한다.

:nth-*() 가상 클래스 함수는 계층 관계를 갖는 DOM 구조의 특성상 매우 유용한 선택자이다. 그동안 우리는 괄호 안에 몇 번째 자식이라는 숫자만을 넣어 사용해 오지는 않았을까? 아니면 2n 은 아는 정도일까? 2n도 An+B 공식의 한 예이다. 2n을 넘어 괄호 안을 채울 An+B의 공식을 제대로 살펴보자. 뭐 대단한 공식은 아니지만 사용 가치에 비해 제대로 모르는 경우가 대부분이지 않을까 싶다. 안 그래도 가득한 CSS 코드를 조금 줄여 볼 궁리를 해야 한다.

CSS가 키보드를 알아 차린다? 흥미로운 CSS 코드를 품은 'Mario World'를 소개하고자 한다. 마치 키보드 이벤트를 사용하는 것 처럼 보이지만 사실은 트릭이 있다. 어떤 트릭이 숨어 있을까?

코드에 치여 사는 국내 개발자들을 생각하면 외국 개발자들의 낭만적인 코드가 부럽기도 하다.  엉뚱발랄한 미니멀 프로젝트이지만 여유가 느껴지고 코딩에 대한 소소한 재미가 보인다.

웹에서 콘텐츠는 제한된 화면 크기로 스크롤이 필연적으로 따라온다. 어떤 UI는 스크롤 행위를 통해 콘텐츠에 집중하도록 하기도 한다. 사용자의 스크롤 동작 뒤에 이행할 멋진 효과와 기능을 구현해야 하는 경우도 많다. 이 정도의 예만으로도 프론트엔드 개발자는 스크롤을 생각하지 않고 콘텐츠를 개발하기는 어렵다.

최근 CSS에 업데이트에 스크롤이라는 주제로 다양한 기술들이 등장하고 있다. 그 중에 @container 규칙에서 스크롤 상태를 쿼리하는 멋진 scroll-state() 표기법 함수를 소개하고자 한다. 표준에 포함되었고 아직 Gecko와 Webkit에서는 사용할 수 없지만 곧 업데이트가 있을 것이다. 머지 않아 시제품에 포함할 수 있는 멋진 API중의 하나가 될 것 같다. 한편으로는 CSS가 점차 어려워지고 있다는 점도 생각해 볼 일이다.