피드로 돌아가기
Dev.toFrontend
원문 읽기
Multi-layer Shadow 설계를 통한 GPU 가속 기반 고밀도 UI Depth 구현
CSS box-shadow: The Complete Guide to Multi-Layer Shadows
AI 요약
Context
단일 Shadow 사용 시 발생하는 인위적인 시각적 이질감과 고정된 투명도로 인한 배경색 대응 한계 발생. 이미지 리소스를 통한 그림자 구현 시 발생하는 HTTP 요청 증가 및 해상도 대응 비용의 비효율성 존재.
Technical Solution
- rgba() 기반 투명도 제어를 통한 배경색 독립적 자연스러운 Shadow 렌더링 구현
- Multi-layer Shadow 적층 구조를 통한 물리적 깊이감(Ambient Depth)의 정밀한 재현
- Material Design의 Elevation 시스템을 응용한 Layer별 크기 확장 및 투명도 반비례 설계
- inset 키워드를 활용한 내부 그림자 구현으로 Button Active 상태 및 Input Focus 시각화 처리
- Offset-zero 기반의 Spread-radius 조절을 통한 Layout 영향 없는 Border 대체 구조 설계
- will-change 속성 및 Pseudo-element 결합을 통한 60fps 애니메이션 최적화
실천 포인트
- 자연스러운 깊이감을 위해 단일 Shadow 대신 투명도가 다른 2개 이상의 Layer 적층 검토 - Layout Reflow 방지를 위해 Border 대신 box-shadow의 Spread-radius 활용 고려 - Shadow 애니메이션 적용 시 Repaint 부하 감소를 위해 will-change: box-shadow 설정 확인 - 배경색에 관계없이 일관된 렌더링을 위해 Hex code 대신 rgba() 포맷 사용