Foundations
Squircle × Shadow Research
Tauri 전환 시 macOS 에서 squircle.js 적용 시 drop shadow 손실 정도 직관 확인용 (임시)
이 페이지는 의사결정용 임시 데모입니다. macOS 에서 squircle.js 를 떠 있는 패널에 적용할지 판단한 뒤 삭제하세요. 자세한 배경:
thoughts/tauri-squircle-research.md.
보는 법
macOS Safari (실제 Tauri WKWebView 와 같은 엔진) 로 이 페이지를 엽니다. 4가지 패널을 좌우/상하로 비교합니다.
- A vs C:
box-shadow가 squircle.js (clip-path) 안에서 얼마나 잘리는지 - C vs D:
filter: drop-shadow우회가 그림자를 얼마나 회복하는지 - A vs D: 우회한 결과가 현재(arc + box-shadow) 와 시각적으로 동등한지
비교 그리드
Floating Panel
Dialog · Popover · DropdownMenu 같은 떠 있는 레이어의 elevation 을 그림자로 표현합니다.
Floating Panel
Dialog · Popover · DropdownMenu 같은 떠 있는 레이어의 elevation 을 그림자로 표현합니다.
Floating Panel
Dialog · Popover · DropdownMenu 같은 떠 있는 레이어의 elevation 을 그림자로 표현합니다.
Floating Panel
Dialog · Popover · DropdownMenu 같은 떠 있는 레이어의 elevation 을 그림자로 표현합니다.
모서리 반경별 손실
같은 squircle.js 적용에서 반경(radius)이 달라질 때 그림자 잘림이 어떻게 변하는지. PDS 에서 떠 있는 패널은 보통 12~16px 사용.
radius 8px
squircle.js + box-shadowsquircle.js + drop-shadowradius 12px
squircle.js + box-shadowsquircle.js + drop-shadowradius 16px
squircle.js + box-shadowsquircle.js + drop-shadowradius 24px
squircle.js + box-shadowsquircle.js + drop-shadow판단 포인트
| 질문 | 답이 "그렇다" 면 |
|---|---|
| C 의 그림자 손실이 실사용에서 거슬리는가? | macOS squircle 강제는 D 우회 필수 |
| D 가 A 와 충분히 가까운가? | 떠 있는 패널까지 squircle.js 도입 가능 |
| D 가 A 와 명확히 다른가 (색감·번짐) | 떠 있는 패널은 squircle.js 적용 대상에서 제외 |
참고: filter: drop-shadow 의 알려진 차이점
box-shadow는 multi-shadow 합성 가능 (shadow-xl토큰은 여러 layer 합성).filter: drop-shadow는 단일 shadow 1개만 가능 — PDS--pds-drop-xl토큰은 이미 단일로 정의되어 있어 토큰 교체로 호환.filter는 자식 요소 전체를 GPU 레이어로 격리 → 텍스트 렌더링·blend 모드가 미세하게 달라질 수 있음 (특히 Safari).clip-path가 걸린 element 자체에filter를 걸면 filter 도 같이 잘림. 반드시 부모 wrapper 에filter를 거는 패턴 사용 (이 데모도 그렇게 구현).