여러 컴포넌트에 걸친 산발적인 z-index, 어떻게 관리하시나요?

[mnxmnz]

고민

배경

프로젝트가 커지면서 점점 더 많은 파일에서 z-index 를 사용하고 있습니다. 그리고 앞으로 더 많은 파일에서 사용할 것으로 보입니다. 다만 이러한 z-index 값이 위계 없이 산발적으로 사용되고 있어서, 다른 분들은 여러 컴포넌트에 걸친 z-index 를 어떻게 관리하시는지 궁금합니다!

현재 문제점

한 컴포넌트의 z-index 변경이 다른 컴포넌트에 의도치 않은 영향을 미치는 케이스가 있습니다. A 컴포넌트의 z-index 를 변경하면 의도치 않게 B, C 컴포넌트가 가려지는 케이스가 발생합니다.

개선 목표

체계적인 z-index 관리 시스템을 구축하고 싶습니다.

• z-index 의 명확한 위계 수립
• 변경 시 영향도를 쉽게 파악할 수 있는 구조
• 팀 내에서 쉽게 관리할 수 있는 방법

위의 목표를 달성하기 위해 어떤 방법이 효과적일지 고민이 됩니다 💭

코드

// z-index
$z-index-1: 1;
$z-index-11: 11;
$z-index-101: 101;
$z-index-1001: 1001;
$z-index-10001: 10001;

현재는 변수로 선언한 후 사용하고 있는데, 모든 컴포넌트에 적용된 상태는 아니어서 사이드 이펙트를 파악하기에는 어려움이 있습니다.

또한 상수로 관리하는 방법 외에 어떠한 방법이 있는지에 대해서도 고민하고 있습니다 🤔

[XiNiHa]

저의 경우에는 CSS 프레임워크로 TailwindCSS와 유사하지만 좀 더 커스텀이 용이한 UnoCSS를 사용하고 있던 상황이라, UnoCSS의 커스텀 룰 기능을 활용해서 사용 가능한 z-index 목록을 명시적으로 정의하는 방법을 썼었습니다. (이것들은 이전 회사에서 작업했던 내용이긴 하지만) z-index의 목록을 정의하고, 정의되지 않은 z-index의 사용을 막고, 정의한 z-index들을 이름에 따라 사용할 수 있도록 해서 매번 새로운 z-index 값을 도입해야 할 때마다 기존 요소들과의 위계를 고려한 후 사용할 수 있도록 하는 패턴을 썼습니다.

[waikerUser]

// zIndex 값 설정
const zIndexDefine = {
	base: 0,
	above: 1,
	below: -1,
	menu: 1000,
	dialog: 9999,
	toast: 99999,
};

이런식으로 기본 값들을 설정해두고

thead: zIndex.dropDown + zIndex.below

이런식으로 어떤 것보다 더 상위 또는 하위에 위치해야하는지로 tailwind config 에 설정해두고 사용하고 있습니다.
값으로 설정하면 결국 어디에 얼마나되는 값을 주었는지 알기 어려운데
이렇게 사용하면 어떤것보다 더 상위에 있어야하는지 명확하게 쓸 수 있을것같네요