애플(Apple) 사이트처럼 고급스러운 '반투명 유리' 메뉴 만드는 법
아이폰이나 애플 공식 홈페이지를 보면, 화면을 스크롤할 때 상단 메뉴바 뒤로 사진이나 글씨가 은은하게 비치면서도 묘하게 흐릿하게 번지는 고급스러운 효과를 보실 수 있습니다.
이를 디자인 용어로 글래스모피즘(Glassmorphism : 유리 질감 효과)이라고 부릅니다. 사이트의 깊이감과 세련미를 10배 이상 끌어올려 주는 이 마법 같은 효과, 어떻게 만들까요?
💡 투명도(Opacity)만 낮추면 안 되나요?
메뉴의 배경을 단순히 반투명하게(rgba)만 뚫어버리면, 뒤에 복잡한 사진이나 텍스트가 스크롤 될 때 메뉴 글씨와 겹쳐서 아무것도 읽을 수 없는 최악의 가독성 붕괴가 발생합니다. 투명하되, 뒤쪽 배경만 안경에 김이 서린 것처럼 '흐리게(Blur)' 뭉개주는 기술이 핵심입니다.
1. 마법의 속성: backdrop-filter 적용하기
포토샵을 켤 필요가 없습니다. 모던 CSS의 backdrop-filter 속성을 사용하면, 해당 박스 '뒤에 깔리는' 모든 요소에 실시간으로 흐림(Blur) 효과를 줄 수 있습니다.
/* 상단 고정 메뉴바(Header)나 팝업창에 적용해보세요 */
.glass-header {
/* 1. 배경을 흰색으로 하되, 70% 정도만 반투명하게 뚫어줍니다 */
background-color: rgba(255, 255, 255, 0.7);
/* 2. 투명하게 뚫린 뒤쪽 배경을 10px 만큼 흐리게 뭉개줍니다 (핵심) */
backdrop-filter: blur(10px);
/* 3. 아이폰(Safari) 브라우저를 위한 필수 추가 코드 */
-webkit-backdrop-filter: blur(10px);
/* 4. 유리 질감을 살려주는 미세한 테두리 (선택사항) */
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}2. 성능 저하 걱정은 없나요?
과거에는 브라우저가 화면을 실시간으로 흐리게 연산하는 과정에서 버벅거림(렉)이 심했습니다. 하지만 현재는 스마트폰과 PC의 하드웨어 가속(GPU) 성능이 압도적으로 발전하여, 웹 표준으로 공식 채택되었을 만큼 부드럽고 가볍게 작동합니다.
하단에 둥근 모서리(border-radius)를 주거나 은은한 그림자(box-shadow)를 곁들이면 진짜 화면 위에 떠 있는 듯한 완벽한 3D 유리가 완성됩니다.
"트렌드를 코드로 완벽하게 번역해 냅니다."
나눔웹은 글로벌 IT 기업들이 주도하는 최신 UI/UX 디자인 트렌드를 즉각 수용하고,
이를 가장 가벼운 코드로 구현하여 하이엔드 퀄리티를 완성합니다.