2025년 iOS, iPadOS, MacOS 등에서 업데이트된 [글래스모피즘] 이라 불리는 '투명 유리 테마' 디자인이 저는 너무 예쁘더라구요 ㅎㅎ 그래서 이후에 웹 페이지를 만들 때 이게 잘 활용되면 너무 좋겠다는 생각을 해왔습니다. 잘 모르고 일단 들이박고보는 성격이 있는지라 토큰 어마어마하게 써대가면서 구현을 시도했고 어느정도 자리잡힌 지금 프롬프트를 정리하여 여기에 공유해봅니다 ㅎㅎ 아래에 프롬프트 전문을 첨부합니다! 그리고 Cursor AI 에게 프롬프트와 지시사항 1회 제공 후 만들어진 결과물도 공유합니다. 저의 지시사항이 애매했던지라 컨텐츠를 화면에 구성하는 것에는 부족함이 많지만 [글래스모피즘] 자체는 너무나도 잘 구현된 것 같아요. 투명한 배경 뒤의 디자인 요소가 흐릿하게 비치는 점, 돋보기 확대경이 유리느낌으로 잘 표현되고있는 점 등 ㅎㅎ 디자인 지침에 프롬프트를 활용하셔서 이 후에 다양한 프로그램 개발에도 쓰일 수 있다면 너무 뿌듯할 것 같습니다 ^__^ p.s. 혹시나 글래스모피즘에 특허가 있을까 해서 이를 피해달라는 요청도 했었는데.. 애플도 이 디자인 주인이 아니고 어디서 베껴왔다고 피소당한 상태라고 하네요 ㅋㅋㅋㅋ 창작이 아닌 아이디어의 영역이고 일반적인 기술로 누구나 구현 가능한 단계기 때문에 막 사용해도 아무 문제 없다고 합니다 하하! ===== 프롬프트 ===== [디자인 방향: 프리미엄 글래스모피즘 / "유리 느낌" UI] 이 프로젝트의 UI는 애플의 Liquid Glass에서 영감을 받은, 깊이감 있는 글래스모피즘 스타일로 구현한다. 단, 애플의 어떤 에셋·서체·아이콘·private API도 사용하지 않고 오직 표준 웹 기술(CSS backdrop-filter, SVG 필터, WebGL)로만 독자 구현한다.
핵심 철학
- "장식이 아니라 계층 표현 도구로서의 깊이." 블러를 제거해도 정보 위계가
이해되어야 한다. 유리 효과는 절제해서 선택적으로만 적용한다.
- 글래스는 다음에만 적용: 내비게이션 바/탭바, 모달·오버레이, 플로팅 카드,
미디어 위 컨트롤, 핀 고정 헤더, 컨텍스트 메뉴/툴팁.
- 글래스를 적용하지 말 것: 데이터 테이블, 빽빽한 본문 텍스트, 콘텐츠 본문 레이어,
유리 위에 또 유리를 겹치는 중첩.
배경 (글래스모피즘의 생명)
- 단색 배경 금지. 풍부한 그라데이션 또는 방사형 글로우 블롭을 의도적으로 배치한다.
- 예: 딥 네이비/인디고 베이스(#0f172a 계열) + 두 개의 radial-gradient 글로우.
- 유리 패널 바로 아래는 명암 변화가 급격하지 않게 배경을 구역화한다.
유리 표면 디테일 (단순 블러를 넘어서)
- backdrop-filter: blur(12–16px) saturate(160–180%) ← saturate 필수(회색조 방지)
반드시 -webkit-backdrop-filter 도 함께 작성.
- 반투명 배경 fill: 다크 모드 rgba(255,255,255,0.06–0.12),
라이트 모드 rgba(255,255,255,0.5–0.65) (라이트는 alpha를 높여야 효과가 보임).
- 테두리: 1px, 상단(border-top)을 더 밝게 줘서 광원 방향감 부여.
가능하면 그라데이션 테두리(linear-gradient border-box)로 굴절감 추가.
- 다층 box-shadow: 외부(부유감) + inset 상단(내부 반사) + inset 하단(내부 그림자).
- 미세 노이즈 텍스처: SVG feTurbulence를 1–2% opacity, mix-blend-mode: overlay로
오버레이해 진짜 유리 질감을 낸다.
- (선택, 고급) Liquid Glass 굴절감: SVG feDisplacementMap 또는 WebGL 셰이더로
가장자리 렌즈 굴절·specular highlight를 근사. backdrop-filter와 filter는 같은 요소에 동시 적용 불가하므로 별도 레이어로 분리한다.
라이트/다크 모드
- :root CSS 변수(--glass-bg, --glass-blur, --glass-border, --glass-shadow,
--glass-radius, --glass-text)로 중앙 관리. prefers-color-scheme로 전환.
- 다크 모드: blur에 brightness(1.05) 추가, 림 라이트는 순수 흰색 대신
네이비/바이올렛/틸 색조.
- border-radius 16px 기본, 모서리 동심원(concentricity) 유지.
모션 / 마이크로인터랙션
- 호버 시 background alpha 소폭 증가 + translateY(-2px) + scale(1.01) +
shadow 강화. 부드러운 ease 트랜지션.
- 절대 금지: backdrop-filter(blur 값) 자체를 transition/animation 대상으로 삼는 것
(GPU 비용 폭증). opacity/transform/background만 애니메이션한다.
접근성 (필수)
- 유리 위 텍스트는 WCAG 4.5:1 대비 충족. 미달 시 text-shadow 또는 텍스트 영역에
반불투명 딤 레이어 추가.
- @supports로 backdrop-filter 미지원 시 불투명 배경 폴백 제공.
- @media (prefers-reduced-transparency: reduce) → 불투명 전환.
- @media (prefers-reduced-motion: reduce) → shimmer/모션 비활성화.
성능
- 블러 16px 이하(모바일), 동시 활성 유리 레이어 2개 이하.
- will-change: transform; contain: layout style paint; 로 합성 최적화.
법적 안전 (반드시 준수)
- SF Symbols 사용 금지 → Lucide / Phosphor / Heroicons / Tabler 사용.
- San Francisco(SF Pro) 서체 사용 금지 → Inter / Geist / Pretendard /
Noto Sans KR 사용.
- 애플 로고·시스템 아이콘·UI 스크린샷 복제 금지.
- -apple-visual-effect 등 애플 private CSS 사용 금지.
- "Liquid Glass" 등 애플 상표명을 제품·기능 이름으로 쓰지 말 것
(내부 코드 주석 수준은 무방).
- 자체 브랜드 색상·아이콘·서체로 독자적 비주얼 아이덴티티를 유지해,
애플 UI와 혼동되지 않게 한다. 이 프롬프트를 바탕으로 웹으로 살펴보는 식당 메뉴판 페이지 디자인해줘. 마우스 커서를 따라다니는 돋보기가 메뉴판에 풍성하게 존재하는 다양한 음식들에 닿을 때마다 그 음식의 디자인을 돋보기 안에서 확대해서 보여주고 돋보기 옆에는 해당 음식의 가격과 영양정보가 말풍선 텍스트로 나오도록 구현해줘. ========= 프롬프트 끝 ===========
댓글 6