expo-blur로 프로스트 글래스 UI 만들기 — 헤더·탭바에 반투명 흐림 넣기

스크롤할 때 콘텐츠가 헤더 뒤로 은은하게 비쳐 보이는 효과, iOS 앱에서 흔히 보인다. 처음엔 그냥 반투명 배경색(rgba(255,255,255,0.7))이면 되는 줄 알았는데, 그렇게 하면 뒤에 있는 글자가 그대로 비쳐서 지저분해 보인다. 진짜 필요한 건 뒤 콘텐츠를 흐리게 뭉개주는 블러다.

CSS라면 backdrop-filter: blur() 한 줄이면 끝인데, React Native에는 그런 게 없다. 그래서 expo-blur를 쓴다.

설치

npx expo install expo-blur

네이티브 모듈이라 Expo Go에서도 동작하고, dev client에서도 바로 쓸 수 있다.

헤더에 블러 깔기

BlurView를 헤더 배경에 절대 위치로 깔아주는 게 기본 패턴이다. 뒤에 스크롤되는 콘텐츠가 이 위를 지나가면 흐려진다.

import { BlurView } from 'expo-blur';
import { StyleSheet, Text, View } from 'react-native';

function Header() {
  return (
    <BlurView intensity={40} tint="light" style={styles.header}>
      <Text style={styles.title}>홈</Text>
    </BlurView>
  );
}

const styles = StyleSheet.create({
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: 100,
    paddingTop: 50,
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 10,
  },
  title: { fontSize: 17, fontWeight: '600' },
});

intensity는 0~100이고 흐림 정도다. 40~60 사이가 자연스럽다. 100으로 올리면 거의 불투명해져서 블러 느낌이 사라진다.

tint은 light, dark, default 외에 systemChromeMaterial 같은 iOS 시스템 머티리얼 값도 받는다. 다크모드까지 자동으로 대응하고 싶으면 시스템 머티리얼 계열을 쓰는 게 편하다.

안드로이드에서 주의할 점

블러는 원래 iOS의 강점이라, 안드로이드에서는 기본적으로 성능 부담이 있다. expo-blur는 안드로이드에서 experimentalBlurMethod를 켜야 진짜 블러가 나온다.

<BlurView
  intensity={40}
  tint="light"
  experimentalBlurMethod="dimezisBlurView"
  style={styles.header}
/>

이걸 안 켜면 안드로이드에서는 그냥 반투명 오버레이로만 보인다. 대신 리스트가 긴 화면에서는 프레임 드랍이 생길 수 있어서, 스크롤 성능이 중요한 화면이면 실제 기기에서 꼭 확인해봐야 한다.

실전 팁

블러만 깔면 경계가 밋밋해서, 아래쪽에 얇은 구분선(borderBottomWidth: StyleSheet.hairlineWidth)을 하나 넣으면 헤더가 확 살아난다. 탭바도 똑같은 방식으로 BlurView를 깔면 iOS 기본 탭바 느낌이 난다.

정리하면, 반투명 색상만으로 흉내 내지 말고 BlurView를 콘텐츠 위에 절대 위치로 얹는 게 핵심이다. 안드로이드는 experimentalBlurMethod 한 줄을 잊지 말자.