▲

GN⁺: 소음이 많은 SVG 제작

 (daniel.do)
4P by neo 11달전 | favorite | 댓글 2개

SVG 소음 효과 추가하기

  • 웹 기술의 발전이 웹 디자인에 어떻게 영향을 미치는지에 대한 관심
  • 디스플레이의 픽셀 밀도 증가가 사진에서 벡터 일러스트레이션으로의 전환을 촉진함
  • 최근 디자인 트렌드에서는 질감이 있는 그림자나 조명 효과를 사용하는 소음 텍스처가 등장

Studio Vellekoop & León

  • 소음 텍스처 스타일에 대한 개인적 취향과 이를 SVG로 재현하는 어려움
  • SVG에 대한 흥미와 다양한 효과를 내는 방법에 대한 탐구
  • SVG 최적화 도구인 SVGO의 등장과 직접 SVG를 작성하는 경험 공유

기본 도형과 그라데이션

  • SVG에서 원이나 사각형 같은 기본 도형을 쉽게 그릴 수 있음
  • 그라데이션 적용 시 컴포넌트 재사용을 위해 베이스 색상에 따라 변하는 그라데이션 필요
  • 마스크 사용법과 <defs>를 이용해 도형을 한 번만 정의하고 use 요소로 참조하는 방법 소개

결과

  • <feTurbulence> 필터를 사용하여 인공적인 소음 텍스처 생성
  • 색상 변화를 제거하고 선택된 채우기 색상과 자연스럽게 혼합하기 위한 필터 효과 적용
  • 최종적으로 만족스러운 일러스트레이션을 생성하였으나, Safari에서는 다르게 렌더링됨

추가 정보 2023년 12월 7일

  • Hacker News에 글을 제출하여 일부 반응을 얻음
  • 2021년 Jimmy Chion이 작성한 CSS Tricks의 유사한 주제 기사 소개
  • 글을 쓸 당시에는 이전 기사를 인지하지 못했으나, 이제 보충 자료로 링크함

GN⁺의 의견

이 글에서 가장 중요한 것은 웹 디자인의 최신 트렌드 중 하나인 소음 텍스처를 SVG로 구현하는 방법에 대한 탐구이다. 이러한 내용은 웹 디자이너와 개발자에게 흥미로운 주제일 뿐만 아니라, 최신 웹 디자인 기술을 배우고자 하는 초급 소프트웨어 엔지니어에게도 유익한 정보를 제공한다. SVG를 사용한 디자인의 유연성과 최적화 방법에 대한 실용적인 예시를 통해, 독자들은 복잡한 디자인 효과를 효율적으로 구현하는 방법을 배울 수 있다.

▲
ndrgrd 11달전  [-]

역시 기대를 저버리지 않는 사파리! 20년대의 IE라는 이름이 아깝지 않네요

답변달기
▲
neo 11달전  [-]
Hacker News 의견

  • SVG를 사용하여 캔버스에서 만들 수 없었던 그림자 효과를 구현하려 했으나, Safari에서 CSS 그림자가 작동하지 않아 SVG 네이티브 필터를 사용해야 했음. 다른 브라우저와 보이는 모습이 달라서 Safari를 감지하고 CSS 버전을 비활성화하는 자바스크립트를 사용함.

  • "재귀적 음양"에 대한 배경은 해당 블로그에 설명되어 있으며, 텍스처를 가지고 놀아볼 계획이지만 Safari에서 다르게 보이는 것이 좌절감을 줌. SVG 해석에 대한 표준화가 이루어질지 궁금함.

  • SVG로 특정 일러스트레이션 스타일을 재현하는 것이 쉽지 않아서 답답함을 느낌. 이 스타일을 "dithering"이라고 하며, CSS-Tricks의 "Grainy Gradients" 페이지에서 같은 기술을 설명함. CSS를 사용하여 전체 이미지에 적용하는 대안도 있음.

  • SVG를 사용하여 복잡한 컨퍼런스 포스터를 만들었지만, 브라우저와 프로그램마다 다르게 렌더링됨. SVG를 포함/링크하여 임베드할 수 있지만, 다른 SVG를 포함하면 작동하지 않음. 브라우저가 "보안" 문제로 임베드/링크된 이미지를 표시하지 않을 때가 있음. 복잡한 SVG를 PDF로 변환하는 것은 일관성 없이 메모리 부족 문제를 일으킴. SVG를 PDF로 변환하는 각 도구마다 결과가 다름. Inkscape와 같은 도구는 때때로 포함된 SVG를 래스터 그래픽으로 처리함.

  • 필름 사진작가들이 필름의 결을 없애려 애썼지만, 디지털 사진작가들은 그것을 다시 추가하려는 경향이 있음. 디지털의 깔끔함 속에서 이러한 예시들이 매력적으로 느껴짐.

  • Inkscape가 다양한 필터 효과를 통해 이러한 노이즈를 추가할 수 있으며, Plain SVG로 내보내면 feTurbulence의 사용을 코드에서 확인할 수 있음. 또한, Affinity Designer 2가 노이즈를 어떻게 처리하는지 비교해봄. 내보낸 SVG에는 base64 jpeg 이미지로 노이즈가 포함됨.

  • "ApeFest" 웹사이트는 CSS 애니메이션(실제로는 JS로 이동)을 사용하여 "무작위로" 움직이는 타일형 PNG 오버레이를 사용하여 동적인 노이즈를 생성함. 기술적으로 단순하지만 효과적임.

  • SVG 필터의 외관이 엔진과 스케일링 요소에 따라 크게 달라지기 때문에, 미묘한 부분에서만 사용하며, 정밀도가 중요하지 않은 경우에만 사용함. feDisplacementMap과 같은 필터는 안티앨리어싱을 파괴하여 사용하고 싶은 상황의 절반을 망침.

  • 페이지 배경으로 사용하지 말 것을 권장함. 이전에 시도했을 때 다양한 기기에서 이상한 버그가 발생하고, 큰 사이트의 경우 페이지가 완전히 멈추거나 SVG가 일정 크기 이상에서 렌더링이 중단됨.

  • Perlin Noise와 그 후속인 Fractal Noise는 사실감을 더하거나 "유기적" 느낌을 주는 데 매우 효과적임. 예를 들어, "알라딘(1992)"에서 동굴에서 탈출하는 장면에 효과적으로 사용됨.

  • 확대/축소 수준에 독립적인 방식으로 효과를 만드는 방법에 대한 관심이 있음. 또한, 무작위성을 추가하는 것과 관련하여, 주어진 크기에서 하나의 올바른 렌더 결과를 정의할 수 있는 시드(seed)를 설정하는 방법이 있는지 궁금함.

답변달기