[해피CGI][cgimall] Pixlated 를 이용한 배경에 필름 그레인 및 노이즈 텍스쳐 추가 플러그인

# 설명

Pixlated는 Canvas API를 사용하여 이미지와 배경에 사용자 정의 가능한 필름 그레인 및 노이즈 텍스처를 적용하는 경량 웹 컴포넌트 라이브러리입니다.

  

# 라이센스

MIT 라이센스
 

 

# 특징

두 가지 특수 구성 요소 : <pixlated-image>이미지 노이즈 효과용 및 <pixlated-bg>배경 노이즈 질감용.

종속성 없음 : 웹 컴포넌트 API와 Canvas 2D 컨텍스트를 기반으로 완전히 구축되었습니다.

고성능 렌더링 : 레티나 디스플레이에서 선명한 출력을 위해 기기 픽셀 비율에 맞춰 스케일링하는 Canvas API를 사용합니다.

반응형 디자인 : 구성 요소가 컨테이너 크기에 자동으로 맞춰지고 크기 조정 이벤트에 반응합니다.

프레임워크에 구애받지 않음 : 순수 JavaScript, React, Vue, Angular 또는 사용자 정의 요소를 지원하는 기타 모든 프레임워크에서 작동합니다.

 

# 사용 사례
 

빈티지 사진 포트폴리오 : 사진 웹사이트용 디지털 이미지에 필름 특유의 질감을 더하세요.

다크 모드 인터페이스 : 어두운 배경에 은은한 질감을 더해 눈의 피로를 줄여줍니다.

아트 디렉션 : 원본 이미지 파일을 수정하지 않고 특정 분위기와 미적 감각을 연출합니다.

 

# 사용방법

1. pixlated-image (이미지에 노이즈 적용)
 1.1 스크립트 로드
   

 1.2 기본 사용
    

  1.3 속성
      속성         설명                            예시

      src         이미지 URL            "photo.jpg"

      intensity 노이즈 강도 (0~1)    "0.5" (기본 0.5) 

      width         너비(px)                    "400"

      height 높이(px)                    "400"

      alt         대체 텍스트                    "설명"

  1.4 동작

    Intensity 슬라이더로 0~1 구간에서 실시간 조절 가능합니다.

    업로드 버튼으로 이미지 변경 후 노이즈 적용됩니다.

    다운로드 버튼으로 적용된 결과를 PNG로 저장합니다.

2. pixlated-bg (배경에 노이즈 적용)
 2.1 스크립트 로드
    

 2.2 기본 사용
    

  2.3 속성

     속성         설명                         예시

     intensity 노이즈 강도 (0~1) "0.2"

     color         배경 색(hex 등)         "#09090b"

  2.4 동작

     컴포넌트 안에 넣은 HTML이 그레인 배경 위에 표시됩니다.

     히어로 섹션, 카드 배경 등에 사용합니다.

 
3. 적용 강도 가이드

   0.1 – 은은한 그레인

   0.4~0.5 – 필름 느낌

   0.8 – 강한 텍스처

# 데모 확인 방법

압축 파일을 해제하면 index.html 파일이 포함되어 있습니다. 
해당 파일을 이용하여 데모를 확인하시고 수정 및 이용하여 작업 또는 사용하시면 됩니다.