shadow DOM으로 신규 프로젝트의 스타일을 지키는 방법

인프런은 기존 서비스의 Bulma 프레임워크와 전역 스타일이 신규 모던 스택 앱에 영향을 주는 문제를 겪고 있다. 특히 태그 선택자를 사용하는 전역 스타일이 새로운 디자인 시스템의 컴포넌트 스타일을 깨뜨리는 상황이다.

이를 해결하기 위해 세 가지 방안을 검토했다.

• !important 사용: 단기적 해결책이나 유지보수가 어렵다.
• SCSS의 not 선택자 활용: 특정 클래스 제외는 가능하나 스타일 변수 접근이 불가능하다.
• shadow DOM 활용: 스타일을 외부로부터 격리할 수 있는 가장 근본적인 방법이다.

결과적으로 shadow DOM을 사용하여 마이그레이션 중인 React 앱을 기존 HTML 구조로부터 격리했다. 이를 위해 react-shadow 라이브러리를 사용하여 Shadow root를 생성하고, 외부 스타일의 간섭 없이 독립적인 스타일을 유지할 수 있는 환경을 구축했다.