CSS 기술 블로그 최신 글
CSS, 디자인 시스템과 웹 화면 구현·성능 개선 사례를 다룬 회사 기술 블로그 글입니다.
CSS 관련 최신 기술 블로그 글
Tailwind가 엔지니어 4명 중 3명을 내보낸 이유
월 7,500만 다운로드에 매출은 80% 감소한 Tailwind, AI 슬롭에 버그 바운티를 접은 cURL 사례로 오픈소스가 돈을 벌던 경로가 어떻게 끊겼는지 정리했어요
오즈의 지식토킹2026년 8월 11일Tailwind가 개발자 3명을 내보낸 이유
다운로드는 역대 최고인데, 매출은 80%가 사라졌어요.
오즈의 지식토킹2026년 8월 11일shadow DOM으로 신규 프로젝트의 스타일을 지키는 방법
안녕하세요, 인프랩의 프론트엔드 개발자 홍시입니다. 최근 저희 팀은 기존 기술 스택으로 인프런 서비스를 유지, 발전시킴과 동시에 미래를 위해 한 페이지씩 모던한 기술 스택으로 개선하는 일에 집중하고 있는데요. 모던한 기술 스택으로 새롭게 만드는 웹앱들은 결국 기존 인프런 서비스 위에 올라가기 때문에, 새로운 웹앱과 기존 서비스 사이의 스타일 충돌이 필연적으로 발생했습니다. 이를 shadow DOM을 이용해 해결하는 과정을 공유합니다. 1. 문제 초기 인프런 서비스는 css 프레임워크 Bulma를 이용해 구축되었고 지금까지도 Bulma의 스타일 시트가 전역으로 적용되어 있습니다. 그뿐만 아니라 Bulma의 스타일 시트에서 파생된 다양한 전역 스타일들도 있는데요. 이 전역 스타일들에서는 꽤 일반적인 선택자, 특히 태그 선택자를 많이 이용했기 때문에 새로운 앱에서 사용하는 새로운 디자인 시스템이 어떤 영향을 받아 어떤 혼란스러운 결과가 발생할지 예측하기가 어려웠습니다. 4년 전에 작성된 reset.scss 안의 a 태그에 대한 스타일 코드 a 태그에 대한 전역 스타일에 영향을 받아 본래의 스타일이 깨진 버튼 컴포넌트 모습 2. 해결 방법 검토 모던 스택으로 마이그레이션 중인 페이지의 html에 기존 스타일 시트가 아예 적용되지 않게 하는 방법은 처음부터 제외되었습니다. GNB, Footer를 제외한 영역만 새로운 리액트 앱으로 그려내고 있기 때문에 한 html 안에서 GNB, Footer는 기존 스타일 시트가 필요하기 때문입니다. 결과적으로 신-구 스타일 충돌 문제를 해결하기 위해 검토한 방법은 총 3가지였습니다. 문제가 되는 부분만 !important로 처리하기. scss를 이용하여 특정 class name의 요소에는 인프런 서비스의 전역 스타일 시트가 적용되지 않게 하기. shadow DOM 이용하기. 2-1. 문제가 되는 부분만 !important로 처리하기 단기적으로 가장 빠르게 문제를 덮을 수는 있어도, 근본적인 해결책이 되지는 못합니다. 후에 진짜 !important가 필요할 때는 어떻게 할 것이며, 다른 스타일 간의 우선순위 관리는 어떻게 할 것인지 등등 유지관리가 굉장히 어려워지기 때문입니다. 또한 그 ‘문제가 되는 부분’을 정확하게 찾아내려면 각 요소의 스타일을 개발자가 일일이 확인해야 합니다. gray 600이 gray 500으로 바뀌는 것과 같은 미세한 차이는 알아차리기 어렵기 때문입니다. 2-2. scss를 이용하여 특정 class name의 요소에는 스타일 시트가 적용되지 않게 하기 sass:meta.load-css와 not 선택자를 이용해서 특정 class를 제외한 나머지 요소에 전역 스타일을 적용하려고 시도해 보았습니다. meta.load-css를 통해 특정 스타일 시트들을 불러오면 다음과 같이 특정 선택자 하위에 위치하는 요소에만 스타일을 적용할 수 있습니다. 하지만 이렇게 할 경우, 각각의 스타일 시트에서 선언한 스타일 변수에 접근할 수 없는 문제가 발생하기 때문에 사용할 수 없었습니다. 스타일 변수를 읽지 못해 발생하는 에러 결국 마지막 방법인 shadow DOM을 시도하게 됩니다. 3. shadow DOM shadow DOM은 웹 컴포넌트의 핵심 중 하나입니다. 웹 컴포넌트에 대해 자세히 알고 싶다면 여기를 참고하세요. 웹 컴포넌트는 재사용할 수 있는 커스텀 HTML element를 생성하고, 해당 요소를 캡슐화하는 기술입니다. 캡슐화를 통해 마크업, 스타일, 동작을 외부로부터 격리하여, 웹페이지의 다른 구성 요소의 간섭을 방지할 수 있게 도와줍니다. 그중에서도 shadow DOM API는 숨겨지고 분리된 DOM을 기존 HTML 요소에 부착하는 방법을 제공합니다. 그렇기 때문에 shadow DOM이 지금 고민하는 문제를 해결하는 데 도움이 될 거라고 판단했습니다 shadow DOM을 적용했을 때의 dom tree 구조 shadow DOM에 쓰이는 용어는 다음과 같습니다. 후술할 예시와 함께 보겠습니다. Shadow host: shadow DOM이 부착되는 통상적인 DOM 노드, host
tech.inflab.com2022년 8월 31일CSS in JS 라이브러리에서 Typesafe하게 Theme 관리하기
CSS in JS 라이브러리를 사용할 때 React Context API를 사용해 Theme을 Typesafe하게 관리하는 방법을 소개합니다.
Devsisters 기술 블로그2021년 2월 16일