TL;DR

  • CSS와 SVG 필터를 활용해 투명한 이미지 가장자리에 테두리를 추가하고, 10개 이상 이미지에서 CSS drop-shadow를 반복 적용할 때 발생하는 시작 지연을 줄이는 방법임.
  • iPhone 스티커 기능으로 만든 음식 사진의 가장자리가 흐릿해, 프로그래밍 방식으로 가장자리를 다듬는 방법을 찾다가 CSS 필터를 적용함.
  • CSS 방식은 흰색 테두리와 회색 윤곽선을 만들기 위해 스티커마다 8회의 drop-shadow 연산을 수행함.
  • Chromium(크로미엄)은 각 drop-shadow 결과를 다음 연산에 다시 처리하며, 이미지 배열 처리에는 서드파티 라이브러리인 Skia가 관여함.
  • SVG 필터의 feMorphology, feFlood, feComposite, feMerge를 사용해 테두리와 윤곽선을 구성하면, 반복적인 그림자 계산을 피하면서 부드러운 애니메이션을 구현할 수 있음.

스티커 테두리를 CSS 필터로 만들기

  • 이전 블로그 글에 새로운 UI 요소를 더하려고 하던 중, iPhone의 스티커 기능으로 음식 사진에서 스티커를 만들었지만 사진 품질이 낮고 이미지와 배경이 잘 분리되지 않아 가장자리가 흐릿한 문제가 있었음.
  • 사진은 나중에 더 좋은 이미지로 교체할 계획이며, 프로그래밍 방식으로 가장자리를 부드럽게 다듬는 방법을 찾다가 CSS 필터를 떠올림.
  • PNG에는 투명한 영역이 있으므로 필터가 불투명한 경계에만 적용되며, 이를 이용해 스티커 테두리를 만들 수 있음.
  • CSS 필터는 상하좌우로 흰색 drop-shadow를 네 번 적용하고, 같은 방향에 회색 윤곽선 drop-shadow를 네 번 더 적용하는 방식임.

CSS 필터의 성능 문제

  • 스티커에 애니메이션, 호버 효과, 변형을 추가하자 페이지가 크게 느려졌으며, 별도의 백그라운드 작업은 원인이 아니었음.
  • drop-shadow와 블러는 성능 집약적인 연산이며, 페이지에 이미지가 10개 이상 있으면 시작 시간이 느려질 수 있음.
  • 스티커 하나당 drop-shadow를 8회 실행하며, 대부분의 브라우저에서는 각 연산의 결과를 다음 drop-shadow가 다시 처리하므로 작업이 선형으로 이어짐.
  • Chromium에서는 서드파티 라이브러리인 Skia가 매번 이미지 배열을 처리하며 변환을 누적함.

SVG 필터로 테두리 구성하기

  • SVG 필터는 CSS 필터보다 복잡하고 일반적으로 성능도 낮지만, 스티커를 더 효율적으로 만드는 데 도움이 되는 도구를 제공함.
  • feMorphology의 dilate 연산으로 원본의 투명하지 않은 영역을 먼저 5픽셀 확장해 테두리 영역을 만들고, 다시 1픽셀 확장해 윤곽선 영역을 구성함.
  • feFlood로 영역을 색칠하고 feComposite로 각 색을 해당 영역에만 적용함. 회색은 1픽셀 윤곽선에, 흰색은 5픽셀 테두리에 적용함.
  • feMerge로 회색 윤곽선, 흰색 테두리, 원본 이미지(SourceGraphic)를 겹쳐 최종 이미지를 구성함.
  • SVG 필터는 HTML 안에 존재해야 참조할 수 있으며, CSS에서는 .sticker에 filter: url(#sticker-outline)을 지정하는 방식임.

애니메이션 성능

  • SVG 방식은 설명과 설정이 더 길지만, 색 채우기와 투명 영역 주변의 추가 공간을 정의하므로 스티커마다 그림자를 8회 계산하는 방식보다 연산 부담이 적음.
  • 그 결과 스티커에 부드러운 애니메이션을 적용할 수 있음.