엥? Modal 그거 z-index:99999 박으면 되는거 아님? (feat. createPortal과 Stacking Context)

WARNING

아직 작성중이거나 검토중인 글입니다. 내용이 부정확하거나 변경될 수 있습니다

웹 개발을 하다보면 Modal 컴포넌트를 구현해야 하는 순간이 자주 찾아옵니다.

회원 가입시 약관 동의
게시글 삭제 전 "정말 삭제하시겠습니까?"
결제 진행전 마지막 확인 ...

모달은 중요한 의사결정 직전에 모달은 사용자의 행동을 한번 더 되짚어주는 역할을 합니다.

모달은 크게 Alert와 Sheet로 구분됩니다.

Alert는 화면 정중앙에 위치하고 투명한 검은색을 배경으로 가집니다. 주로 사용자에게 즉시 필요한 중대한 정보를 담을 때 쓰입니다.
Sheet는 화면 하단부에 위치하고 투명한 검은색을 배경으로 가집니다. 주로 사용자가 현재 맥락과 밀접한 관련이 있는 특정한 작업을 수행하게 할 때 쓰입니다.
토스가 Alert를 쓰는 경우는 아래의 4가지입니다.
① 기기 또는 시스템 설정에 접근해야 하는 경우,
② 입력했던 정보를 파괴하는 행동을 하려는 경우,
③ 시스템상 오류가 발생한 경우,
④ 다음 화면으로 진행하는 데 피요한 작업을 요구하는 경우입니다.
①, ②, ③은 Alert를 적절히 사용했지만 ③은 새로운 화면, ④는 Sheet라는 대안이 가능합니다.
토스가 Sheet를 쓰는 경우는 아래의 4가지입니다.
① 다음 화면으로 진행하는 데 필요한 작업을 요구하는 경우
② 현재 화면에 영향을 미치는 작업을 요구하는 경우
③ 현재 화면과 관련된 정보를 전달하는 경우,
④ 기기 또는 시스템 설정에 접근해야 하는 경우입니다.
①, ②, ③은 Sheet를 적절히 사용했지만 ④는 Alert라는 대안이 가능합니다.

모달은 단순한 UI 컴포넌트가 아니라, 사용자의 실수를 줄이고, 중요한 액션에 집중하게 만드는 중요한 역할을 합니다.

그만큼 사용자 경험 (UX) 에서 중요한 역할을 하는데,
개발자의 입장에서는 "어떻게 화면 위에 모달을 띄우지?" 라는 고민이 생깁니다.

css

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999; /* 화면에서 가장 위에 위치 */
}

처음 모달을 구현할 때 대부분 이렇게 생각합니다
저도 그랬습니다 😅

하지만 z-index 를 높게 주는 것만으로는 모달이 항상 화면 위에 위치한다는 보장이 없습니다.
왜냐하면 z-index 는 Stacking Context 와 Containing Block 에 영향을 받기 때문입니다.

🤓 엥? Modal 그거 z-index:99999 박으면 되는거 아님? ​