2021년 봄, 핀테크 앱 프로젝트를 맡았을 때입니다. UI 디자이너가 “신뢰감을 주려면 카드가 투명해야 해요!”라며 시안을 가져왔습니다. 저는 습관처럼 opacity: 0.5를 줬죠. 결과는 처참했습니다. 배경은 보였지만, 위에 적힌 계좌번호와 금액까지 희미해져서 도저히 읽을 수가 없었거든요.
“아니, 유리는 투명하고 글씨는 진해야죠!” 디자이너의 불만 섞인 목소리에 저는 머리를 싸맸습니다. 배경은 흐리게 뭉개면서(Blur), 텍스트는 선명하게 살리는 것. 이 모순적인 기술을 구현하기 위해 구글링을 하던 중, 저는 `backdrop-filter`라는 구세주를 만났습니다.
1. 실패하지 않는 ‘황금 비율’ 코드
제가 수십 번의 수정 끝에 찾아낸 ‘가장 예쁜 값’을 공유합니다. 너무 투명하면 가독성이 떨어지고, 너무 불투명하면 플라스틱 쪼가리처럼 보입니다. 딱 이대로만 복사해 보세요.
.glass-panel {
/* 1. 배경: 흰색에 투명도 25%가 국룰입니다 */
background: rgba(255, 255, 255, 0.25);
/* 2. 마법의 속성: 뒤 배경을 4px만큼 뭉갭니다 */
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px); /* 사파리 호환용 */
/* 3. 디테일: 유리의 두께감을 표현하는 1px 테두리 */
border: 1px solid rgba(255, 255, 255, 0.18);
/* 4. 그림자: 카드가 공중에 떠 있는 느낌 부여 */
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
border-radius: 12px;
}
“솔직히 고백하자면, 처음엔 `blur(20px)` 처럼 강한 값을 줬습니다. 예쁘긴 하더군요. 그런데 제 오래된 노트북에서 스크롤을 내릴 때마다 화면이 뚝뚝 끊기는 걸 발견했습니다. 블러 효과는 생각보다 GPU를 많이 씁니다. 실무에서는 4px ~ 10px 사이가 성능과 미학의 타협점입니다.”
2. 디자이너가 알려주지 않는 ‘테두리’의 비밀
코드를 짰는데 뭔가 밋밋하다면 범인은 99% ‘테두리(Border)’입니다. 실제 유리를 보면 모서리 부분에 빛이 반사되어 하얗게 빛납니다.
CSS에서도 border: 1px solid rgba(255, 255, 255, 0.3); 처럼 아주 옅은 흰색 테두리를 줘야 합니다. 이 1픽셀의 선이 있고 없고 가 퀄리티를 천지 차이로 만듭니다. 마치 화룡점정처럼요.
3. 주의사항: ‘다크 모드’에서의 배신
흰색 배경(Light Mode)에서는 위 코드가 완벽합니다. 하지만 사용자가 다크 모드를 켰다면? 흰색 반투명 박스는 그저 ‘뿌연 안개’처럼 보여서 눈이 부십니다.
💡 코드캠의 실전 TIP
다크 모드일 때는 배경색(rgba)을 검은색 계열로 바꿔줘야 합니다.background: rgba(0, 0, 0, 0.25);
이렇게 해야 어두운 배경 위에서 ‘고급스러운 선글라스 렌즈’ 같은 느낌을 낼 수 있습니다. 미디어 쿼리(prefers-color-scheme)로 꼭 분기 처리를 해주세요.
4. 트렌드는 돌고 돕니다
15년 전, 윈도우 비스타(Vista) 시절 유행했던 ‘에어로(Aero)’ 테마를 기억하시나요? 그때의 유리 효과가 지금 ‘글래스모피즘’이라는 이름으로 더 세련되게 돌아왔습니다.
유행을 맹목적으로 쫓을 필요는 없지만, 적재적소에 쓴다면 여러분의 웹사이트는 방문자에게 “관리되고 있는 최신 서비스구나”라는 인상을 심어줄 것입니다. 오늘 로그인 폼이나 알림 팝업에 살짝 적용해 보세요.
적용해 봤는데 뒤 배경이 흐려지지 않고 그냥 투명하기만 한가요? 브라우저 버전이나 코드 순서 문제일 수 있습니다. 댓글로 상황을 알려주시면 해결책을 제시해 드리겠습니다!
