토큰은 변수 파일이 아니라 의사결정 체계다 디자인 시스템을 만들 때 색상, 간격, 폰트 크기를 변수로 분리하는 일은 비교적 쉽습니다. 어려운 부분은 시간이 지나도 그 값들이 일관된 의미를 유지하게 만드는 것입니다. 프로젝트가 커지면 임시 색상, 예외 spacing, 화면 전용 font-size가 조금씩 늘어납니다.
카테고리
CSS
총 6편의 글
최신 CSS 기능과 디자인 시스템 운영에서 필요한 레이아웃, 명시도, 반응형 컴포넌트 설계 기준을 다룹니다.
- 적용 대상
- 컴포넌트 기반 UI를 장기 운영하는 프론트엔드 개발자
- 주요 초점
- 레이아웃명시도 관리반응형 설계
!important 가 무한 증식하는 순간, 뭔가 잘못된 것이다 디자인 시스템을 운영하다 보면 어느 순간 CSS 파일 전체에서 !important 가 조용히 번식해 있는 광경을 목격하게 됩니다. 처음에는 단 한 줄이었습니다. "Tailwind 유틸리티 클래스가 컴포넌트 스타일을 덮어쓰지 못하네, 일단 !important 붙이자.
PostCSS 기반 세계관이 무너지는 날 엔지니어링 팀이 Tailwind CSS v4 마이그레이션을 처음 마주한 건 2026년 초였습니다. Next.js App Router로 전환한 지 얼마 지나지 않아, Tailwind 팀이 v4 정식 릴리즈를 선언했습니다.
CSS가 스스로 경계를 그을 수 있다면 2026년 프론트엔드 생태계에서 두 가지 CSS 기능이 조용하지만 확실하게 실무의 판도를 바꾸고 있습니다. @scope 와 Anchor Positioning입니다. 두 기능은 서로 다른 문제를 풀지만, 공통적으로 "자바스크립트가 처리하던 일을 CSS가 직접 처리한다"는 흐름 위에 있습니다.
반응형 기준은 viewport만이 아니다 오랫동안 반응형 웹은 viewport media query 중심으로 설계됐습니다. 화면 너비가 768px보다 작으면 모바일 레이아웃, 1024px보다 크면 데스크톱 레이아웃 같은 방식입니다. 하지만 현대 UI는 같은 컴포넌트가 사이드바, 카드 그리드, 모달, 대시보드 패널 안에서 서로 다른 크기로 렌더링됩니다.
CSS 역사상 가장 오랫동안 개발자들이 염원해왔던 기능, 바로 "부모 선택자"입니다. jQuery의 .parent() 나 .closest() 를 쓰지 않고는 불가능했던 그 스타일링이, 드디어 순수 CSS만으로 가능해졌습니다. 주인공은 바로 :has() 의사 클래스(Pseudo-class)입니다. Safari 15.