숨결을 불어넣는 낭비

나는 리퀴드 글래스 디자인이 싫다. 그래서 아직 ios26, macos26 업데이트 안했다. 정확히 말하면 진짜 멋지다고 생각하는데 단순한 심미성을 위해서 내 모바일 기기에서 gpu로 항상 렌더링 하는게 별로다 (아직까지는). 그래도 작은 사치는 부려도 괜찮지 않을까? css 위주로 효율적이고 작은 컴포넌트, 딱 그게 필요했던것이다.

왜?

이곳은 한국어, 중국어, 영어지원 하는 블로그다. 내가 한국인이다보니 한국어로 빠르게 글을 작성하고 영어와 중국어 번역은 클로드에게 맡긴다. 이게 엄청 자연스럽다 😅.

결과물

구현방법

나는 CSS 진짜 못한다. 솔직히 C++ 나 러스트가 더 쉽지 않을까? (목적이 다르지만) 그래도 대 AI, 그리고 오픈소스의 시대, 클로드와 상담을 통해 원하는 디자인을 구현한다.
몇몇 오픈 리포지토리를 확인하면서 마음에 드는 디자인과 구현방식 샘플을 모으고 AI에게 들고가서 상담했다. 성능과 심미성, 그리고 단순성을 최대한 벨런스를 맞추기 위해서 노력했다. 한마디로 CSS를 최대한 활용했다.

한계

어쩔 수가 없다. 사파리랑, 애플 모바일에서는 SVG 필터하는 backdrop-filter: 에 url이 들어가는 CSS설정 지원을 안한다. AI 말로는 애플이 제안한 아이디어인데, 구현은 크롬이 먼저 했다고. 그래도 대체한 프로스티드 글래스 구현은 마음에 든다 🙂.

깃허브

내 블로그 다 오픈 소스다! 궁금하면 FloatingLanguagePicker.astro 파일 참조 바람. 솔직히 절반이상은 빛 굴절율 계산 공식이라 어렵다. ㅋ

소스코드 여기서 확인 가능