main-logo

디자인 시스템 시대, UI 개발자가 주목해야 할 웹 기능들

웹 퍼블리싱 트렌드 기술 변화 (feat. container, cascade, :has(), view transitions, Figma DevMode)

profile
GNA
2025년 08월 23일 · 0 분 소요

들어가며

복직 후 웹 기술의 변화 속도가 이전보다 훨씬 빨라졌다는 것을 실감했습니다.
AI 기반의 작업 방식 변화도 크지만,
특히 UI 개발자 입장에서 실무에 적용 가능한 기술들이 다양하게 등장했고,
디자인 시스템, 마크업 구조, 디자인 툴 연동 방식 등에도 큰 변화가 있었습니다.

단순히 디자인을 "그대로 구현하는" 수준을 넘어,
시스템화된 UI를 구성하는 구조적인 접근이 요구되고 있다는 점이 인상 깊었습니다.

이번 글에서는 그런 흐름들을 공부하면서 UI개발자 관점에서 주목할 만했던 웹 트렌드 키워드 5가지를 정리해보았습니다. 

기능 소개보다는 실무에 어떻게 연결될 수 있을지 고민했던 부분들을 중심으로 공유합니다.

 

 

 

1. container query — 컴포넌트 단위 반응형

기존에는 반응형을 구현하기 위해 @media를 사용해 전체 화면 너비를 기준으로 스타일을 조절했습니다.
하지만 @container가 도입되면서, 부모 요소의 크기를 기준으로 컴포넌트별 반응형 설계가 가능해졌습니다.

.card {
  container-type: inline-size;
}

@container (min-width: 600px) {
  .card-title {
    font-size: 1.5rem;
  }
}

디자인 시스템 내에서 재사용 가능한 컴포넌트를 구성할 때 매우 유용할 듯 하며, 모듈화된 UI 구조를 구현할 때 특히 강점이 될 듯 싶습니다.

프로젝트에서 카드, 모듈, 배너처럼 어디서든 재사용되는 요소가 많은 경우 container query가 편리하게 쓰일 수 있을 거라 생각합니다.

단, 작동을 위해 반드시 부모 요소에 container-type을 선언해야 한다는 점은 유의해야 합니다.

 

 

2. cascade layers — CSS 충돌 최소화를 위한 계층 구조

기존 CSS 작업에서는 스타일 파일의 로딩 순서에 따라 우선순위가 꼬이거나 의도치 않게 스타일이 덮어씌워지는 문제를 자주 겪었습니다.

특히 현재 맡고 있는 운영 프로젝트의 코드에서는, 이전 작업자들이 이 문제를 해결하기 위해 !important나 복잡한 class 조합을 사용한 사례를 자주 마주치곤 하는데요…ㅠㅠ
@layer를 활용하면 스타일의 우선순위를 명시적으로 설정할 수 있어 보다 체계적인 스타일링이 가능해질 것 같습니다.

@layer reset, base, components, overrides;

@layer base {
  h1 {
    font-size: 2rem;
  }
}

reset → base → components → overrides 순으로 계층 구조를 명시할 수 있어

디자인 시스템 내 공통 CSS를 정의할 때 스타일 충돌을 체계적으로 방지할 수 있는 구조가 만들어집니다.

실무에서 공통 스타일이 많아지는 시점에 도입해보면 효과적일 것 같습니다.

 

 

3. :has() — 부모 스타일 조건 제어가 가능해지다

:has() 선택자는 처음 봤을 땐 "부모 선택자 역할을 하는 건가?" 정도로만 생각했는데, 공부해볼수록 생각보다 다양한 조건 처리에 활용 가능하다는 점이 인상적이었습니다.

기존에는 자식 요소의 상태에 따라 부모 요소에 스타일을 적용하는 것이 불가능했기 때문에 JavaScript로 조건 처리를 해야 하는 경우가 많았는데 이제 :has() 선택자를 사용하면 CSS만으로도 조건부 스타일링이 가능합니다.

예를 들어, 이미지가 있는 카드만 패딩을 다르게 주고 싶을 때 이미지가 포함된 카드만 상단 여백을 없애는 등의 처리를 할 수 있었습니다.

.card:has(img) {
  padding-top: 0;
}

기존에는 자바스크립트로 DOM 탐색 후 클래스를 제어해야 했던 부분인데, CSS만으로 조건 스타일링이 가능하다는 점에서 상태 기반 디자인을 구현할 때 꽤 유용하게 쓰일 수 있겠다는 생각이 들었습니다.

물론 브라우저 호환성 이슈가 아직은 조금 있기 때문에 서브 프로젝트나 프로토타입 단계에서 먼저 실험해보면 좋을 것 같습니다.

* 특히 구형 IE, 오래된 Safari 등 에서는 아직 완전한 지원이 되지 않기 때문에 도입 시 브라우저 대응 여부를 반드시 확인해야 합니다.

 

 

4. view transitions API — 페이지 전환 UX를 부드럽게

SPA(싱글 페이지 어플리케이션)나 탭 전환 시 기존에는 깜빡임이 발생하거나
콘텐츠 전환이 순간적으로 바뀌는 UX 문제가 있었습니다.
View Transitions API를 활용하면 DOM 상태 변경 시 전환 효과를 부드럽게 연결할 수 있습니다.

document.startViewTransition(() => {
  // DOM 업데이트
});

처음엔 단순한 전환 효과 정도로 생각했지만, 공통된 전환 흐름을 통해 UI의 완성도를 높이고, 시스템적인 연속성을 부여할 수 있다는 점에서 디자인 완성도를 높이는 데에도 효과적인 기능이라고 생각했습니다.

참고로 view transitions 관련 자세한 내용은

View Transitions API로 살펴보는 자연스러운 SPA 화면 전환 방식 포스팅 에서 더 자세히 다룬적이 있으니 함께 보셔도 좋을 것 같습니다.

 

 

5. 디자인 툴 연동 강화 — Figma Dev Mode와 Tokens

디자인 시스템 이야기에서 빠질 수 없는 부분은 툴의 변화인것같습니다.
Figma의 Dev Mode, Variables, Tokens Studio 같은 기능을 보면서 디자인과 코드가 점점 더 가깝게 붙고 있다는 걸 실감했습니다.

예전엔 시안 파일을 넘겨받고 직접 픽셀 하나하나 재면서 작업했다면 요즘은 색상, 폰트, 여백 등이 디자인 토큰이라는 이름의 변수로 정의되고 이를 코드에 그대로 연결하는 방식으로 협업이 이루어지고 있습니다.

UI 개발자 입장에서는 디자인 토큰을 CSS 변수로 잘 변환하고, 구조적으로 작업하는 역할이 중요해졌고,
디자인 툴의 구조를 이해하는 것도 하나의 역량이 된 것 같습니다.

 

 

 

마치며

이번에 정리한 기능들을 공부하면서,
UI 개발자로서 어떤 방식으로 작업이 달라지고 있는지를 더 잘 이해할 수 있었습니다.

container query를 통해 더 유연한 컴포넌트를 구성하고,
cascade layers와 :has()로 구조화와 조건부 스타일링을 개선하며,
view transitions로 UX 흐름의 일관성을 높이고,
디자인 툴과의 연동을 통해 협업 구조에 더 적극적으로 참여할 수 있는 기반이 만들어지고 있습니다.

아직 실무에 본격 도입한 단계는 아니지만,
이런 기능들을 미리 이해하고 준비해두는 것만으로도
앞으로의 작업 방식에 분명한 차이를 만들 수 있을 거라 생각합니다.

읽어주셔서 감사합니다