[Project] React + Tailwind CSS로 구현해본 글래스모피즘

2025.11.13

 다들 안녕하세요👀 저는 어제 졸업작품 최종 발표를 마쳐 약간 홀가분해진,, 상태랍니다 굉장히 오랜만에 작성하는 글이네요. 다음주 화요일이 교내 AI 경진대회 심사일이라 관련 개발을 진행하는 중인데요, 디자인은 대충 끝내두고 기능 개발을 먼저하고 있는데 이번에 적용하려고 했던 글래스모피즘 효과가 생각보다? 간단하지 않아 정리하려고 합니다.

 

먼저 하단 네비게이션 바에 글래스모피즘 효과를 적용하려고 구상했고, Tailwind CSS의 backdrop-blur와 bg-white/30만 쓰면 간단히 끝날 줄 알았는데, 생각지도 못한,, 여러 난관을 겪었습니다.

 

보통의 네비게이션 바를 구현할 때 flex-col과 sticky를 사용하여 구성한다고 생각했었습니다. 따라서 별 생각 없이,, 원래 하던대로 계층 구조를 설정했었습니다.

<div className="w-full h-screen bg-white flex flex-col overflow-hidden">

  <div className="flex-1 overflow-y-auto bg-white">
    {/* 콘텐츠 */}
  </div>

  <div className="sticky bottom-0 z-30">
    <BottomNavigation />
  </div>
  
</div>

이런식으로 구성을 했었고, 로컬 서버에서 테스트 해보니 음,, 하단을 전부 가리는 일반적인 네비게이션 바를 볼 수 있었습니다.

참고용 이미지입니다.

잠깐 생각을 해보니 이렇게 코드를 작성하게 되면 콘텐츠 영역(flex-1)과 네비게이션 영역(sticky)부분은 형제 관계이기 때문에 flex-1은 네비게이션 바를 제외한 상단 공간까지만 콘텐츠를 채운다는 걸 알았습니다.

 

콘텐츠 자체가 네비게이션 바 뒤에 없기 때문에 backdrop-blur를 적용해도 흐릿하게 만들 대상이 없어 효과가 나타나지 않았구요.

 

아 그러면 absolute 써서 오버레이로 띄우면 되겠다~! 싶어서 커서를 사용해 

// 1. 최상위 컨테이너에서 flex-col 제거
<div className="w-full h-screen bg-white relative font-pretendard overflow-hidden">
  
  {/* 2. 스크롤 영역이 h-full을 차지하고 스크롤됩니다. */}
  {/* pb-24는 하단 네비게이션에 가려지지 않을 여백입니다. */}
  <div className="h-full overflow-y-auto bg-white pb-24">
    
    {/* 콘텐츠 */}
    
  </div> {/* 스크롤 영역 끝 */}

  {/* 3. 네비게이션이 콘텐츠 '위'에 'absolute'로 떠 있게 됩니다. */}
  <div className="absolute bottom-0 left-0 right-0 z-30 pt-4 pb-2 pointer-events-none">
    <div className="pointer-events-auto">
      <BottomNavigation />
    </div>
  </div>
  
</div>

이렇게 코드개선을 진행했습니다. 

콘텐츠 영역 자체도 flex-1 대신 h-full을 사용해 부모 높이까지 꽉 채우도록 했고, pb-24를 넣어서 스크롤을 맨 아래까지 내려도 마지막 부분의 콘텐츠가 네비게이션 바 뒤에 가려지지 않도록 설정했습니다.

또한 네비게이션도 sticky대신 absolute bottom-0을 사용해 페이지 하단에 고정시키도록 했구요.

 

하지만 이렇게 구성을 해도 글래스모피즘이 잘 뜨지 않았습니다,,🥲 아무리 고민을 해도 답이 안나와서 여러 블로그+제미나이와의 토론을 진행했는데, 결과가 생각보다 너무너무 허무했습니다.

진작에 얘한테 물어볼걸

초기 설정단계에서 구성했던 요소인 App.tsx의 bg-white가 적용되어 있어 저 부분을 제거하니 잘 표시되는 모습을 확인할 수 있었습니다. 이전에도 몇번 해봤던 작업이였기에 안일하게 생각하던 부분들이 발목을 잡았던 것 같습니다. 

어찌저찌 완성한 글래스모피즘

도움이 되었길 바라며,, 오늘도 CSS 레이아웃과 DOM 구조는 중요하다는걸 깨닫는 하루였던 것 같습니다.