스크림Scrim

무대 앞에 치는 얇은 막(scrim)에서 온 말입니다. 뒤 무대가 비치긴 하지만 흐려서, 관객은 앞에 선 사람을 봅니다. 화면에서도 같습니다. 모달이나 드로어 뒤에 깔려 "지금은 이것만"이라고 말합니다.

언제 쓰나요

앞에 뜬 것에 답해야 뒤로 돌아갈 수 있을 때 깝니다. 모달, 드로어, 바텀 시트, 이미지 라이트박스. 스크림이 있으면 뒤 화면이 잠겼다는 것이 눈으로 보이고, 스크림을 누르면 닫히는 것이 관습입니다(되돌릴 수 없는 작업의 확인은 예외).

농도는 보통 검정 30~50%입니다. 너무 옅으면 뒤가 읽혀서 산만하고, 너무 짙으면 어디 있었는지 잊습니다. 여기에 살짝 블러를 더하면 유리 너머 느낌이 납니다. 이 사이트의 시트도 검정 35% + 약한 블러입니다.

AI에게 시키기

모달 뒤에 스크림을 깔아줘.
- 화면 전체를 덮는 fixed 레이어, 검정 40% 투명도, backdrop-blur 약하게
- 스크림 클릭 시 모달 닫힘. 열리고 닫힐 때 150ms 페이드
- 스크림이 떠 있는 동안 뒤 화면 스크롤 잠금
- 삭제 확인 모달에서는 스크림 클릭으로 닫히지 않게 옵션

"배경 어둡게 해줘"라고만 하면 스크롤 잠금과 클릭 닫기가 빠집니다. 스크림이라는 이름과 함께 세 가지를 적습니다.

혼동 주의

• 오버레이(Overlay): 더 넓은 말입니다. 위에 겹치는 모든 층이 오버레이고, 스크림은 그중 "뒤를 덮어 흐리게 하는" 층입니다. 실무에서는 섞어 씁니다.
• 모달: 스크림 위에 뜨는 창입니다. 스크림은 그 뒤의 막입니다. 모달 = 스크림 + 다이얼로그.
• 로딩 오버레이: 처리 중에 화면을 덮는 반투명 층입니다. 모양은 같지만 눌러도 닫히지 않고 스피너가 있습니다.
• 글래스모피즘: 카드 자체가 유리처럼 비치는 스타일입니다. 스크림은 카드 뒤의 막입니다.