들어가기 전에
스노로즈의 특정 페이지에서, 상단 앱바보다 위에 떠 있던 필터나 드롭다운 창의 z-index를 수정하게 되었습니다.
처음엔 단순히 해당 요소의 z-index만 조금 조정하면 끝날 줄 알았는데, 막상 코드를 살펴보니 대부분의 요소들이 1이나 2 정도로만 설정되어 있었어요. 그래서 이번처럼 한 부분의 z-index를 수정하면, 예상치 못한 곳에서 UI가 꼬일 수도 있겠다는 생각이 들었습니다.
아마도 컴포넌트와 페이지의 담당자가 다르다 보니, 각자 맡은 부분에만 z-index를 설정하고, 전체적인 레이어 구조에 대해서는 함께 논의한 적이 없었던 것 같아요.
그래서 일단은 더 큰 숫자를 적용해 당장의 문제를 해결했고, 이후에는 z-index도 상수화할 수 있다는 걸 알게 되어 직접 적용해 보기로 했습니다 ✨
이슈 내용
상단 앱바보다 필터와 드롭다운 컴포넌트가 더 위에 노출되는 문제가 있어, 앱바 컴포넌트와 필터 관련 요소의 z-index를 조정할 필요가 있었어요.
이슈 해결 과정
z-index 값이 대부분 1이나 2로만 설정되어 있었는데, 앞으로 추가될 요소들을 고려해 최대 500 범위 안에서 100 단위 간격으로 값을 재조정했ㅅ브니다.
직접 작업하지 않은 부분까지 수정하다 보니, 어떤 요소를 위에 둘지 판단이 애매한 순간도 있었어요. 우선 이슈를 해결하기 위해 PR을 올리긴 했지만, 앞으로는 이런 기준을 한눈에 확인할 수 있도록 정책적으로 미리 정해두면 좋겠다는 생각이 들었습니다.
이후 현직 개발자와 이야기를 나눌 기회가 있었는데, z-index도 폰트 스타일이나 색상처럼 상수로 관리하면 레이어 우선순위를 훨씬 명확하게 정리할 수 있다는 이야기를 들었습니다. 👀
레퍼런스 조사
당근 사이트의 개발자 도구에서 아래와 같이 변수를 정리해 둔 것을 발견했고, 이를 스노로즈에 적용할 때 참고하게 되었어요.
--carotene-z-index-sticky: 200;
--carotene-z-index-modal: 300;
--carotene-z-index-notification: 400;적용
그래서 저도 적용해 보기로 했습니다.
/* z-index를 상수값으로 정의 */
:root {
--z-index-fetch-loading: 100;
--z-index-pull-to-refresh: 100;
--z-index-mypage-background: 100;
--z-index-profile-image: 200;
--z-index-dropdown: 400;
--z-index-appbar: 500;
--z-index-navbar: 500;
--z-index-write-button: 500;
--z-index-modal: 600;
--z-index-toast: 700;
--z-index-sidebar: 900;
--z-index-popup: 1000;
}/* 프로젝트에 적용 */
z-index: var(--z-index-modal);마치며
정리하고 보니 어떤 요소가 위에 올라오는지 한눈에 파악돼서 훨씬 편해졌고, 앞으로 우선순서를 바꿔야 할 일이 생겨도 숫자만 수정하면 되니, 벌써부터 z-index 관리가 한결 수월해진 느낌이 들어요 :)