# 설명
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 파일이 포함되어 있습니다.
해당 파일을 이용하여 데모를 확인하시고 수정 및 이용하여 작업 또는 사용하시면 됩니다.
|
