expo-glass-effect로 iOS 26 리퀴드 글래스 입히기 — expo-blur로는 안 되던 유리 질감

iOS 26이 나오면서 애플이 UI 전반을 Liquid Glass로 갈아엎었다. 버튼이나 탭바가 배경을 굴절시키면서 빛나는 그 질감인데, 막상 내 앱에 넣으려니 방법이 애매했다.

예전엔 expo-blur로 대충 흉내 냈다. 근데 blur는 말 그대로 뒤를 흐리기만 한다. Liquid Glass는 흐림 + 굴절 + 하이라이트가 같이 도는 거라, blur만 얹으면 그냥 반투명 유리컵 느낌이지 애플 감성이 안 난다. 억지로 그림자랑 보더 얹어봤는데 조잡했다.

expo-glass-effect

Expo SDK 54부터 expo-glass-effect가 들어왔다. iOS 26의 진짜 시스템 Liquid Glass API를 그대로 감싼 거라, 흉내가 아니라 OS가 그려주는 그 유리가 나온다.

npx expo install expo-glass-effect

GlassView로 감싸기만 하면 된다.

import { GlassView } from 'expo-glass-effect';

export function GlassCard() {
  return (
    <GlassView
      glassEffectStyle="regular"
      style={{
        padding: 20,
        borderRadius: 24,
        overflow: 'hidden',
      }}
    >
      <Text style={{ fontSize: 16 }}>배경이 유리처럼 굴절된다</Text>
    </GlassView>
  );
}

glassEffectStyle은 regular랑 clear 두 가지다. clear가 훨씬 투명해서 사진 위에 얹을 때 예쁘고, regular는 텍스트 가독성이 필요한 카드에 안전하다. 색을 섞고 싶으면 tintColor, 탭에 반응하게 하려면 isInteractive를 주면 된다.

여러 개를 붙일 땐 GlassContainer

버튼 두세 개를 나란히 놓으면 각자 따로 굴절돼서 경계가 지저분해진다. GlassContainer로 묶으면 가까운 유리끼리 서로 녹아 붙는 그 몰핑 효과가 나온다.

import { GlassContainer, GlassView } from 'expo-glass-effect';

<GlassContainer spacing={12}>
  <GlassView style={styles.pill} />
  <GlassView style={styles.pill} />
</GlassContainer>

폴백은 반드시 챙기기

이게 함정인데, Liquid Glass는 iOS 26 이상에서만 진짜로 그려진다. 안드로이드나 구버전 iOS에서 GlassView는 그냥 투명한 빈 View가 되어버린다. 배경색을 안 깔아두면 컨텐츠가 허공에 떠 보인다.

isLiquidGlassAvailable()로 지원 여부를 먼저 확인하고 갈라주자.

import { isLiquidGlassAvailable, GlassView } from 'expo-glass-effect';

const Card = isLiquidGlassAvailable()
  ? (p) => <GlassView glassEffectStyle="regular" {...p} />
  : (p) => <View style={{ backgroundColor: 'rgba(255,255,255,0.7)' }} {...p} />;

새 API 붙일 때마다 느끼는데, 화려한 효과보다 "지원 안 되는 기기에서 뭐가 보이나"를 먼저 정하는 게 실무에선 더 중요하다. Liquid Glass는 있으면 좋은 장식이지, 없으면 앱이 깨지는 필수 요소가 아니게 설계해두면 마음이 편하다.