프로젝트에서 z-index 값을 관리하는 방법

보편적인 방법

$zindex-dropdown:       1000;
$zindex-sticky:         1020;
$zindex-fixed:          1030;
$zindex-modal-backdrop: 1040;
$zindex-modal:          1050;
$zindex-popover:        1060;
$zindex-tooltip:        1070;

부트스트랩은 $zindex-dropdown, $zindex-sticky, $zindex-fixed와 같은 Sass 변수에서 z-index 값을 정의합니다.

이러한 이름은 매우 간단해 보이지만 개발자가 자신이 작업 중인 기능에서 어떤 값이 가장 적합한지 혼동이 생길 수 있습니다. 그들은 결국 "내가 구현하고 있는 것이 드롭다운인가 팝오버인가"라고 의문을 가지게 되는데, 이는 답이 명확하게 나오지 않을 수 있습니다.

이 방법의 두 번째 문제는 변수의 실제 값이 불안정해질 수 있다는 것입니다. 필요한 경우 개발자가 각 값 사이에 새로운 값을 정의하기도 합니다. 부트스트랩은 1000에서 1070까지 10 단위로 구분된 7개의 값을 정의하는데 이를 보며 아래와 같은 의문이 생길 수 있습니다.

“왜 1000에서 시작하는거지?"

“1000보다 작은 값은 아예 없는걸까?”

“1010은 어디있지? 버그인가? 다른곳에서 쓰고있나?”

“왜 10단위 인거지? 그 사이에 값이 9개 이상 필요해지면 어떻게 해야하지?”

이 질문들을 전부 꼭 해결해야할 필요는 없지만 z-index 값을 쉽고 정확하게 사용하기 힘든 상황이라는 것은 확실해 보입니다.

추천하는 방법

먼저 z-index를 다룰 때 주로 발생하는 문제들은 아래와 같습니다.

1. 큰 z-index 값을 사용하는 경향이 있다.
2. z-index 관련 버그를 수정하다 보면 새로운 z-index 관련 버그가 발생하는 경우가 많다.
3. z-index 값 끼리의 관계를 이해하기 어렵다.

z-index 값에 의미를 부여하자

큰 z-index 값을 선택하는 이유는 보통 어떤 값을 써야할지 모르기 때문입니다. 일단 큰 값을 적용하고 제대로 동작하는 것 같으면 그대로 사용합니다. 나중에 누군가 이 값을 볼 때, 왜 이 값인지 이해할 수 없고, 심지어 처음 값을 사용한 사람도 잊어버렸을 확률이 높습니다.

const base = 0;
const above = 1;
const below = -1;

export const backdrop = below + dropdown;
export const dropdown = below + button;
export const button = base;

이 문제를 해결하려면 "매직 넘버"를 없애고 변수명을 보고 의미를 알 수 있도록 해야합니다.
또한, 서로 간의 관계를 더 명확히 파악할 수 있도록 이전에 사용한 값을 참조해서 새로운 값을 만듭니다.

상수들을 Stacking Context 기준으로 정리하자

더 많은 순서를 위해 상수에 대한 명명 규칙을 z.Context.Element 로 사용합니다.

z 부분은 자바스크립트 파일에 색상 변수와 같은 다른 상수가 정의된 것을 고려할 때 값이 z-index 선언에 사용되도록 되어 있다는 사실을 나타내는 접두사이다.

Context 부분은 상수가 속한 Stack Context 이름으로 대체된다. 페이지 영역 스택에 사용되는 루트 HTML 스택 컨텍스트는 예외입니다.

마지막 부분인 Element는 스택 컨텍스트에 위치할 특정 엘리먼트의 이름을 사용합니다.

// Utils
const base = 0;
const above = 1; // use this for all values above the base
const below = -1; // and this for all values below the base

// Page Layout
export const zLayoutNavigation = above + base;
export const zLayoutFooter = above + base;
export const zLayoutModal = above + zLayoutNavigation;
export const zLayoutPopUpAd = above + zLayoutModal;

// NavMenu
export const zNavMenuBackdrop = below + base;
export const zNavMenuPopover = above + base;
export const zNavMenuToggle = above + zNavMenuPopover;

참고 링크