작업 기록

TDS 인터랙션 컴포넌트

2026.01 ~ 2026.04 / 기록 4개

ProgressiveBlur와 EdgeShadow처럼 CSS 기본 기능만으로는 디자인에서 요구한 질감을 맞추기 어려운 시각 표현을, WebGL·shader·masking까지 다뤄 재사용 가능한 TDS 컴포넌트로 만든 작업이에요.

이미지 기반 Shadow와 마스킹box-shadow로 표현하기 어려운 이미지 shadow를 중앙 mask와 edge/corner mask로 나눠 컴포넌트화한 구현 기록이에요.
Box-Blur 부터 Gaussian을 거쳐 KawaseBlur 까지Figma에 가까운 ProgressiveBlur 질감을 찾기 위해 Box Blur, Gaussian Blur, Dual Kawase Blur를 비교한 선택 기록이에요.
KawaseBlur 구현 상세Dual Kawase Blur를 texture·framebuffer·composite shader 파이프라인으로 옮긴 구현 정리예요.
ProgressiveBlur에 대한 고찰ProgressiveBlur를 픽셀 위치마다 blur 값이 달라지는 효과로 정의하고, WebGL canvas 접근을 고른 이유를 다뤄요.

다른 Case Studies 보기

Case Studies 목록으로 돌아가기