▲

GN⁺: 게임에서 웹으로 확장된 Frosted Glass 기술

 (tyleo.com)
3P by neo 3일전 | favorite | 댓글 1개

게임에서 웹으로의 프로스트 글래스

  • 소개

    • Forza Horizon 3와 Forza Motorsport 7의 UI 개발자로 일하면서 아름다운 프로스트 아크릴 디자인 요소를 경험했음.
    • HTML을 사용하여 유사한 효과를 구현하고자 했으며, 이 페이지에서 그 시도를 공유함.

  • backdrop-filter의 역할

    • 프로스트 글래스 효과의 핵심은 Gaussian 블러를 사용하여 배경을 흐리게 하는 것임.
    • CSS에서 backdrop-filter와 blur 함수를 사용하여 Gaussian 블러를 적용할 수 있음.
    • Internet Explorer는 이 기능을 지원하지 않음.

  • 깊이 추가하기

    • backdrop-filter: blur(10px)를 사용하여 기본적인 글래스를 만들었으나, 더 깊이 있는 효과를 위해 box-shadow: inset을 사용하여 가장자리에 깊이를 추가함.

  • 실제 그림자

    • 3D 객체가 2D 공간에 갇힌 것 같은 느낌을 없애기 위해 어두운 box-shadow를 추가하여 글래스를 배경에서 물리적으로 띄워 보이게 함.

  • 빛과의 상호작용

    • 글래스와 빛의 상호작용을 개선하기 위해 간단한 서브서피스 스캐터링을 도입함.
    • box-shadow: inset을 사용하여 빛이 글래스 가장자리에서 약간 퍼지는 효과를 시뮬레이션함.

  • 더 흥미로운 빛

    • 글래스의 반사 특성을 강조하기 위해 빛의 광선을 배경 이미지로 사용함.
    • ::before를 사용하여 배경 이미지를 글래스 요소에 적용함.

  • 동적 빛

    • CSS와 JavaScript를 사용하여 모든 플랫폼에서 동적 반사 효과를 구현함.
    • JavaScript를 사용하여 background-position을 동적으로 조정하여 background-attachment: fixed 효과를 시뮬레이션함.

  • 마무리

    • 글래스 효과를 완성하기 위해 둥근 모서리와 색상 및 텍스트를 추가함.
    • border-radius를 사용하여 모서리를 둥글게 하고, overflow: hidden을 사용하여 자식 요소가 글래스 표면을 넘지 않도록 함.

  • 결론

    • 프로스트 글래스 효과를 만드는 과정을 따라와 주셔서 감사드림.
    • 모든 자산과 코드를 빠르게 복사할 수 있는 방법은 문서 초반의 "Final Recipe Lookahead" 섹션을 참고.
▲
neo 3일전  [-]
Hacker News 의견

  • 한 사용자는 미적 요소가 마음에 들지만, 클라이언트가 반복적으로 비싼 블러 필터를 계산하는 것이 낭비라고 느끼며, 웹 개발의 일반적인 경향이 너무 많은 부하를 주는 것 같다고 언급함

    • GPU를 사용하여 최적화되었지만, 실제로는 큰 차이가 없을 것이라고 생각함

  • 다른 사용자는 Windows 7의 "빛의 광선" 텍스처를 추출하여 Android에서 유사한 효과를 구현하려고 했으며, 블러 배경의 채도를 약간 높였다고 설명함

  • 또 다른 사용자는 인터랙티브 데모가 훌륭하다고 생각하지만, 사용자 인터페이스 디자인에서 프로스트 글라스 사용을 싫어하며, Mac OS에 추가된 것이 후퇴라고 느낀다고 언급함

    • 특히 패널 뒤의 콘텐츠가 동적이거나 사용자 생성일 때 이상적이지 않다고 생각함

  • 한 사용자는 2008년에 CSS 실험을 통해 고정 위치의 미리 블러 처리된 배경 이미지를 사용하여 유사한 효과를 구현했다고 설명함

    • 이는 실시간 가우시안 블러보다 성능이 뛰어나지만, 동적 배경 이미지를 허용하지 않는 단점이 있다고 언급함

  • 또 다른 사용자는 10개의 효과가 겹쳐져 있는데, 가장 요구되는 미적 요소를 제외하고는 7개 정도가 너무 많다고 생각함

    • 배경색, 블러, 박스 그림자 또는 테두리만 사용하는 것이 좋다고 제안함

  • 한 사용자는 노이즈 텍스처를 추가하여 더 거친 결과를 얻는 것을 좋아한다고 설명함

  • 다른 사용자는 기술적 성취는 멋지지만, UX가 나쁘다고 언급함

    • 반투명 패널 내부의 내용을 읽거나 이해하기가 더 어렵고, 배경과의 대조가 낮고 일관성이 없기 때문이라고 설명함

  • 한 사용자는 원래 CSS 데모 중 하나가 프로스트 글라스 효과를 위한 것이었다고 언급하며, 흥미롭다고 생각함

  • 또 다른 사용자는 CSS의 창의적이고 강력한 면모를 보는 것이 항상 인상적이라고 생각하지만, HTML/CSS의 일부 이해 수준을 결코 이해하지 못할 것 같다고 느낀다고 설명함

  • 마지막으로, 인터랙티브 예제가 좋지만, 이전 버전으로 전환할 수 있는 비교 또는 토글 기능이 있었다면 더 좋았을 것이라고 언급함

    • 대부분의 경우 각 반복의 개선이 미묘해서 차이를 알 수 없었다고 설명함
답변달기