고해상도 유리 효과를 위한 CSS 생성기

 (glass3d.dev)
5P by GN⁺ | ★ favorite | 댓글 1개
  • glass3d generator는 설정값을 바꾸며 유리 질감 CSS를 즉시 미리보고 복사할 수 있는 도구임
  • 핵심 조정값은 backdrop-filter의 blur, brightness, saturation과 색상, 텍스처 선택으로 구성됨
  • 색상은 HSL과 알파값으로 다루며, 예시 값은 hsl(189 80% 10% / 0.2)임
  • 텍스처는 rice paper, egg shell, ink jet, coarse, topology 중에서 선택 가능함
  • 생성 CSS는 .glass3d, ::before, ::after, 자식 요소의 z-index를 조합해 배경 필터, 노이즈 텍스처, 내부 그림자, 콘텐츠 레이어를 나눔

glass3d generator에서 조정할 수 있는 값

  • 설정값을 변경하면 인터페이스 자체에 결과가 바로 반영됨
  • 완성된 CSS는 복사해 사용할 수 있음
  • 주요 설정 항목은 다음과 같음
    • backdrop-filter
    • blur
    • brightness
    • saturation
    • color
    • texture

생성되는 CSS 구조

  • .glass3d 클래스는 CSS 변수와 레이어 기준을 정의함
    • --filter-glass3d: blur(32px) brightness(0.85) saturate(2.5)
    • --color-glass3d: hsl(189 80% 10% / 0.2)
    • --noise-glass3d: transparenttextures.com의 egg-shell.png
    • position: relative, z-index: 4, 여러 단계의 box-shadow를 사용함
  • .glass3d::before는 배경 필터와 텍스처를 적용함
    • -webkit-backdrop-filter와 backdrop-filter에 var(--filter-glass3d)를 사용함
    • background-color와 background-image에는 각각 색상 변수와 노이즈 변수가 들어감
    • background-size: 100px, background-repeat: repeat를 설정함
  • .glass3d::after는 내부 하이라이트 그림자를 더함
    • 여러 inset box-shadow 값을 사용함
  • .glass3d > *는 콘텐츠가 위에 보이도록 position: relative와 z-index: 6을 적용함

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 이 방식은 표면 바로 뒤의 픽셀만으로 흐림을 적용하는 문제가 있고, https://www.joshwcomeau.com/css/backdrop-filter/#the-issue에서 잘 보여줌
    https://news.ycombinator.com/item?id=42302907의 논의와 함께 읽어볼 만함. 배경이 아래에서 움직인다면 바로 뒤 픽셀만 흐리는 문제가 꽤 중요하고, 정적 배경이면 보통은 크게 중요하지 않음

    • Josh의 훌륭한 글을 읽고 튜토리얼도 구현해봤지만, SVG 마스크로 border-radius 처리하는 부분에서 문제가 생겼음
      하드코딩된 요소에서는 잘 됐지만, 사용자의 브랜딩과 컨테이너 쿼리에 따라 border-radius가 바뀌는 전체 컴포넌트 라이브러리에서 어떻게 동작하게 할지는 아직 풀어야 함
    • Josh의 해법도 직관적으로는 잘못된 것처럼 보임. 가까운 요소들이 발광체라고 가정하는 듯한데, 웹의 “재질”이 기본적으로 그런 물리 속성을 가진다고 보기는 어려움
      오히려 기본 재질은 종이에 더 가깝다고 보는 편임
    • 어느 쪽이 더 맞다고 보기는 어려움. 기본 방식은 서리 낀 유리 바로 뒤에 있는 물체를 근사하고, 조정된 방식은 훨씬 멀리 있는 물체를 흉내 냄
      내게는 조정된 버전이 깊이 단서와 충돌해서 훨씬 산만하고 더 틀려 보임

  • 꽤 좋아 보이지만, 유리의 굴절성이 빠지면 Liquid Glass의 가장 큰 기여라고 보는 강한 레이어 분리감이 사라짐
    Material에는 앱이 일관된 움직이는 레이어로 구성되어야 한다는 걸 측면 3D로 보여주는 훌륭한 디자이너 자료가 있음. 그런데 2D로 합치면 어떤 기능이 어디 있는지 찾기가 매우 어려움. 구석의 액션 버튼을 사람들이 못 보는 경우가 정말 많음
    움직임이 크롬과 콘텐츠를 구분하는 데 조금 도움은 되지만, 시각적으로 정의해주는 요소가 너무 적음. Liquid Glass의 가장 큰 장점은 가장자리 왜곡이라고 봄. 콘텐츠가 움직일 때 비선형 움직임이 생기고, 인간의 시각은 그걸 즉시 포착함
    정적 스크린샷은 항상 좋아 보이지 않지만, 움직일 때는 지금까지 본 것들보다 요소 구분이 훨씬 잘 됨. 인간의 움직임 감지를 크게 활용하는 핵심 굴절 요소가 여기서는 빠져 있음
    예전에 훌륭한 웹 데모를 하나 더 봤는데 지금은 찾기 어렵고, 대신 이 데모는 모바일에서 성능이 나쁘고 시각적으로도 덜 좋지만 작업이 얼마나 복잡한지 단계별로 잘 보여줌. SVG 필터만으로 가장자리 왜곡을 구현하는 건 꽤 혹독한 길임: https://atlaspuplabs.com/blog/liquid-glass-but-in-css#breaki...
    Liquid Glass 시도 모음(CodePen Spark)도 찾았고, 두 번째 링크는 매우 구체적으로 미리 정의된 하드코딩 SVG로 꽤 잘 만든 예라고 봄: https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

    • Apple이 Liquid Glass로 영리한 해자를 만든 것 같음. 더 나쁜 버전은 쉽게 만들 수 있지만, 진짜로 올바른 방식은 매우 어려운 효과를 고른 셈임
      사람들은 매일 실제 유리를 보기 때문에 무엇이 진짜 같고 올바른지에 대한 직관이 있음. 그래서 모방작은 명백히 더 나빠 보이고, Apple은 “고급스러워 보이는” 제품 이미지를 유지할 수 있음
    • Liquid Glass의 가장자리 왜곡이 멋져 보인다는 데 동의하고, 나중에 직접 재현해볼 생각임
      현재 프로젝트에서는 다듬어진 느낌이고, 브라우저 간에 일관되게 동작하며, 실제 3D를 쓰지 않는 재질을 만드는 게 목표였음. 고정 배경 위에서 움직일 때 효과가 더 잘 보인다는 말도 맞음. 작업 중인 라이브러리 데모 사이트에서는 그렇게 하고 있지만 아직 준비가 안 됨
    • 굴절 효과가 빠진 건 오히려 좋음. 서리 낀 유리도 이미 애매하다고 느끼는데, 굴절 효과는 정말 싫음. 너무 산만하고 특정 상황에서는 항상 못생겨 보일 수밖에 없음
      실제 유리가 그렇게 동작하는 건 알지만 신경 쓰고 싶지 않음. 스큐어모피즘의 최악의 부분만 골라 두 배로 밀어붙인 것 같고, iOS 7 이전을 더 좋아했던 입장에서도 그렇게 느낌

  • 멋진 효과이긴 하지만, 내게는 실제 유리처럼 느껴지지는 않음
    가장 즉각적인 차이는 빛이 베벨과 상호작용하지 않는다는 점임. 빛이 유리 안으로 다시 들어가 조명과 색에도 영향을 줘야 한다고 기대함. 단순히 흐림만 넣는 것으로는 부족함
    또 유리는 자체 그림자와 흥미로운 집광 무늬를 가질 수 있음. 여기 그림자는 보이지만 단순한 드롭 섀도처럼 느껴져서, 새 흐름의 일부인 3D 물리 객체라기보다 평평한 카드처럼 보임
    어쨌든 CSS만으로 흉내 내기는 쉽지 않고, GPU에서 도는 셰이더가 더 적합해 보임

    • CSS로 안 된다면 어떻게 해야 하는지 모르겠음. 일반적인 div에 GPU 셰이더 효과를 어떻게 적용할 수 있을까? 기본 HTML에 GPU 효과를 적용하지 못하고 임의의 Canvas 조합 같은 커스텀 요소에 해야 한다면, GPU 효과를 적용할 수 있는 완전히 새로운 렌더링 엔진을 다시 만드는 편이 나을지도 모름
      HTML은 죽었다고 봄. 텍스트 전달에는 태그 몇 개면 충분하고, 그 외 대부분은 웹페이지를 광고 폭탄으로 만드는 데 쓰임. 그러니 <text> 태그와 더 나은 GPU 통합으로 다시 시작하고 나머지는 빼는 게 낫겠음

  • 페이지의 요소를 실제로 굴절시키는 JavaScript 버전을 만들었음: https://real-glass.vercel.app/

    • Safari에서는 서리 효과가 동작하지 않음

  • 이런 것들을 모으고 있음: https://github.com/swyxio/spark-joy
    다른 자료로는, glassmorphism 디자인 명세 기반의 무료 CSS 생성기 https://ui.glass/generator/, 서리 낀 유리 고정 헤더 https://www.joshwcomeau.com/css/backdrop-filter/, glassy glassmorphism codepen와 in context가 있음

    .blur-and-rotate {  
border-radius: 20px;  
backdrop-filter: blur(20px) hue-rotate(120deg);  
-webkit-backdrop-filter: hue-rotate(120deg);  
}

  • 정말 잘 만들었음. 컴퓨터 그래픽스가 “이상한 꼼수 하나”가 아니라 겹겹이 쌓은 5가지 트릭에 가깝다는 게 늘 놀라움
    브라우저 간 호환성까지 맞추는 건 추가 난제임. 어떤 부분이 가장 리소스를 많이 쓰는지 감이 있는지 궁금함. 단순히 생각하면 backdrop-filter일 것 같음

    • 맞음, 구현에 이렇게 많은 트릭이 필요할 줄 몰랐음
      직감이 맞고, 가장 리소스를 많이 쓰는 부분은 backdrop-filter의 흐림 처리임. 흐림 값이 클수록 렌더링 전에 더 많은 이웃 픽셀을 “참조”해야 함
      또 다른 고비용 요소는 스크롤하거나 비디오 배경이 유리의 모습을 바꿀 때 계속 다시 그려야 한다는 점임
    • 때로는 무언가를 “가운데 정렬”하는 데도 5겹 트릭이 필요함

  • 내 유리 구현과 비슷한 기법을 쓰는 것 같음: https://news.ycombinator.com/item?id=42225481
    특히 box-shadow를 과하게 활용하는 부분이 비슷함

    • 프로젝트가 멋져 보임. 그림자를 5겹 이상 파고드는 사람이 나뿐이 아니라서 반가움. 특히 Light Rays 추가가 인상적임

  • 작은 문제: 상단과 토글/코드가 있는 스크롤 영역 사이의 그림자가 아래로 스크롤하면 사라짐. 아마 처음에는 숨겨졌다가 나타나야 할 것 같음

    • 잘 잡아냈음. 페이드인 문제가 아니라 그림자가 그냥 화면 밖으로 스크롤되어 나가는 것임
      그 “오버행” box-shadow들은 어떤 요소에서 아래로 드리우는 방식이 아니라 요소 내부에 적용되도록 설계했는데, 이 경우에는 후자 방식의 그림자를 적용해야 한다는 걸 깨달음

  • 내 휴대폰에서는 콘텐츠 스크롤이 꽤 느림. 일부러 느리게 만드는 다른 스크롤 효과가 있는 건지, 아니면 유리 효과의 부작용인지 궁금함

    • 흥미롭지만, 페이지 어디에도 스크롤 효과는 없음. 사용 중인 기기, 브라우저, 인터넷 연결 수준을 알려줄 수 있는지 궁금함
    • M4와 128GB RAM에서는 잘 동작함

  • 내가 놓친 걸 수도 있지만, 모바일에서는 상자를 숨기거나 접을 수 있으면 훨씬 유용할 것 같음
    지금은 화면 전체를 차지해서 뒤의 효과를 거의 볼 수 없음. 그래도 관심은 있어서 나중에 더 큰 화면에서 다시 시도해볼 생각이지만, 상자를 숨기는 옵션이 있으면 훨씬 나아질 듯함

    • 코드 미리보기 영역을 말하는 건지 궁금함
      첫 구현에서는 생성기 UI 위에 작은 데모 사각형을 뒀지만, 작은 것조차 공간을 너무 많이 차지해서 UI 사용이 어려워졌음. 전체 페이지를 스크롤하게 하면, 편집 중인 사각형을 보려면 스크롤 맨 위에 있어야 한다는 점이 명확하지 않아 사람들이 답답해했음
      이 도구는 주로 코딩용이라 데스크톱 경험을 우선하고 있고, 모바일은 빠른 미리보기와 모바일에서도 동작한다는 증명에 가깝게 두고 있음. 그래도 모바일에서 정말 잘 동작하는 비슷한 UI를 알고 있다면 링크를 보고 싶음
답변달기