Hacker News 의견

• 자바스크립트로 페이지 요소에 실제 굴절 효과를 적용한 버전을 만들었으니 확인해보기 추천 https://real-glass.vercel.app/

• 이 효과는 표면 바로 뒤에 있는 픽셀만 흐리게 처리하는 한계가 있음, 이 현상을 잘 설명한 Josh Comeau의 글(https://www.joshwcomeau.com/css/backdrop-filter/#the-issue)과 Hacker News 토론(https://news.ycombinator.com/item?id=42302907)을 참고 추천, 배경이 움직인다면 꽤 중요한 이슈지만 고정되어 있다면 보통 중요하지 않음

  • Josh의 멋진 글을 읽고 튜토리얼을 따라 구현하려 시도해봤음, 하지만 SVG 마스크로 border-radius 처리에서 문제가 발생, 하드코딩된 요소에서는 잘 작동했으나, 브랜드/컨테이너 쿼리에 따라 border-radius가 바뀌는 전체 컴포넌트 라이브러리에서 쓰기 위한 방법을 추가로 고민 중임
  • Josh의 솔루션은 직관적으로도 뭔가 잘못된 느낌, 주변 요소가 빛을 내는 물질이라고 가정하지만, 웹상의 "material"의 물리적 기본 특성이라고 생각하지 않음, 나는 기본적으로 material은 종이와 더 비슷하다고 가정

• 꽤 멋지게 구현된 것 같음, 하지만 유리의 굴절 효과가 빠지면 Liquid Glass의 강한 레이어 시각 분리감이 사라짐, Material의 디자인 리소스를 보면 앱이 3D의 일관된 움직이는 레이어로 구성되어야 함을 강조, 하지만 실제로 2D로 구현하고 모든 요소가 섞이면 각 레이어 구분이 매우 어려움, 구석진 곳의 액션 버튼을 사람들이 못 찾는 경우가 많음, 모션이 크롬과 컨텐츠를 구분해주는 역할을 하긴 하지만 시각적으로 두드러지는 게 별로 없음, Liquid Glass의 가장 큰 장점은 edge distortion(가장자리 왜곡)이라 생각, 콘텐츠가 움직일 때 사람의 시각에서 즉시 잡히는 비선형 모션을 만들어줌, 움직임이 있을 때 레이어 구분이 더 뚜렷해짐, 이 중요한 굴절 요소가 여긴 빠져있음, SVG 필터로 edge distortion을 구현하는 게 쉽지 않고 궁극적으론 상당히 복잡한 작업, https://atlaspuplabs.com/blog/liquid-glass-but-in-css/… 의 단계별 설명을 참고하면 복잡성을 알 수 있음, 그리고 Liquid Glass의 다양한 구현 시도를 모아둔 CodePen Spark 컬렉션도 발견, 하드코딩된 SVG로 괜찮게 만든 레퍼런스도 함께 추천 https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM

  • Apple이 Liquid Glass를 통해 똑똑한 진입장벽(moat)을 만들었다고 생각, 누구든 저렴한 버전을 쉽게 만들 수 있지만, 진짜처럼 보이게 제대로 만들기는 굉장히 어려움, 우리는 매일 진짜 유리를 보기 때문에 "진짜 vs 가짜"를 직관적으로 구분할 수 있음, 그래서 모방 제품이 티가 나고, Apple은 "프리미엄 느낌"을 지킬 수 있음
  • Liquid Glass의 edge distortion이 정말 멋지다고 생각해서 언젠가 꼭 다시 만들어볼 계획, 현재 진행 중인 프로젝트는 디테일하게 다듬고, 브라우저 호환성을 신경쓰며, 실제 3D를 사용하지 않는 소재 구현에 중점을 둠, 그리고 레이어가 고정된 배경 위를 움직일 때 효과가 더 도드라진 것에 동의, 현재 개발 중인 데모 사이트는 이런 효과가 구현돼 있고, 아직 완성은 아님, 좋은 자료 소개에 감사
  • 유리의 굴절 효과가 레이어식 시각 분리감을 만든다는 의견에 동의, 하지만 나는 굴절 효과가 너무 산만하고, 일부 환경에서는 보기 안 좋다고 생각, 실제 유리의 물리 현상이긴 하지만 그게 꼭 필요하진 않음, skeuomorphism에서 제일 맘에 안 들었던 요소를 확대 적용한 느낌, 참고로 나는 iOS 7 이전 디자인을 더 선호했음

• 효과 자체는 멋지지만, 나는 유리 느낌이 잘 안 든다고 느낌, 즉각적으로 느껴지는 차이는 빛이 bevel(모서리 곡면)에 아무 반응을 안 한다는 점, 빛이 유리에 반사돼서 조명/색상에 영향을 미치는 것도 기대, 단순히 blur 효과만으론 힘듦, 그리고 유리는 독특한 그림자(특히 caustics)도 만들 수 있는데, Apple도 이 부분까지는 신경쓰지 않은 듯, 현재 그림자는 단순 drop shadow처럼 보여서 3D 객체보다는 평면 카드 느낌만 강조됨, 이건 최근 트렌드의 핵심에서 벗어남, 이런 효과를 CSS만으로 구현하기 어렵고, 차라리 GPU에서 쉐이더로 돌리는 것이 더 적합할 듯

  • CSS로 할 수 없다면 방법이 무엇일지 궁금, GPU 쉐이더 효과를 일반 div에 적용할 수 있는지도 의문, 기본적인 HTML에 직접 GPU 효과를 넣을 수 없다면 결국 커스텀 캔버스 같은 걸로 새 렌더링 엔진을 만드는 게 더 나음, HTML은 이제 의미가 없고 <p> 태그로 텍스트만 전하고 나머지는 다 광고로 쓰이니까, 차라리 <p>만 남기고 GPU 통합을 개선한 완전히 새로운 시작이 필요

• 이런 디자인 샘플을 수집하고 있음 https://github.com/swyxio/spark-joy
  관련 자료도 몇 개 추천

  • https://ui.glass/generator/ : glassmorphism 스타일의 무료 CSS 제너레이터
  • frosted glass sticky header https://www.joshwcomeau.com/css/backdrop-filter/
  • glassmorphism pen 샘플 codepen, in context
  • blur+회전 효과 CSS 예시

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

  • spark-joy 리스트에 이 프로젝트 추가해줘서 고맙다는 인사
  • Spark Joy가 아주 멋진 리소스라고 생각
  • ASCII Font generator를 찾았는데 spark-joy에는 없는 듯, 대신 자주 쓰는 도구를 추천함 https://patorjk.com/software/taag/…

• 모바일에서 박스를 숨기거나 접는 옵션이 있었으면 사용성이 훨씬 나았을 것 같은 느낌, 전체 화면을 박스가 차지해서 뒤의 효과가 잘 안 보임, 그래도 흥미로워서 큰 화면에서 다시 시도해볼 생각, 박스 숨김 옵션 추가가 많은 도움이 될 듯

• 내 glass 구현체와 유사한 기법을 쓴 것 같음 https://news.ycombinator.com/item?id=42225481 특히 box shadow를 적극적으로 활용한 방식이 비슷

  • 당신 프로젝트 정말 멋짐, 그림자 레이어를 깊이 있게 여러 번 쓴 개발자가 나뿐만 아닌 걸보니 반가움, Light Rays 추가한 아이디어가 특히 인상적임

• 웹 배경으로 효과가 좋게 쓰임

• 내 핸드폰에서는 스크롤이 꽤 느림, 의도적으로 천천히 움직이는 다른 스크롤 효과가 있는지 아니면 glass 효과의 부작용인지 궁금

  • 재밌는 지적, 페이지에는 어떤 스크롤 효과도 없음, 실제로 어떤 기기와 브라우저, 네트워크 환경인지 공유해줬으면 좋겠음
  • 내 M4, 128GB 램 기기에서는 잘 돌아감

• 정말 잘 만들었다고 생각, 컴퓨터 그래픽스가 “특별한 한 방법”이 아니라 실제로는 “5겹의 트릭”이라는 점에 매번 놀람, 크로스 브라우저 지원도 큰 도전이라고 생각, 어떤 부분이 가장 리소스를 많이 쓰는지 혹시 감이 있는지 궁금, 그냥 예상으론 backdrop-filter가 아닐까 싶음

  • 나도 여러 트릭이 필요할 거라 생각 못 했음, 가장 무거운 부분이 backdrop-filter의 blur 처리임, blur 값이 높을수록 더 많은 주변 픽셀 정보를 확인해서 렌더링함, 또 하나 리소스를 쓰는 부분이 스크롤할 때나 동영상 배경이 변할 때 glass 외관의 실시간 갱신임
  • 가끔은 무언가 “가운데 정렬”만 하려고 해도 “5겹의 트릭”을 써야 하는 경우가 있음