모듈러 시네마틱 팔레트 제네레이터 (Modular Cinematic Palette Generator)

귀여운 젤리 & 캔디 3D 테마 디자인의 모듈러 시네마틱 팔레트 제네레이터 스튜디오! Web Audio API 음색 시네스테지아 신시사이저와 Canvas 2D 실시간 렌더링으로 영화적 컬러 조화, 3D 젤리 오디오 파동, 3D LUT 내보내기를 경험해보세요.

빛나는 3D 젤리 캔디와 영화적 컬러 멜로디의 감각적인 만남!
모듈러 시네마틱 팔레트 제네레이터 (Modular Cinematic Palette Generator)는 통통 튀는 귀여운 젤리 & 캔디 3D 스타일의 디자인 시스템과 HTML5 Web Audio API, Canvas 2D 실시간 파티클/그래픽 엔진이 통합된 차세대 시네마틱 색상 스튜디오입니다.

영화 장르별 보색/유사색/삼각 조화 커스텀 생성은 물론, 색상의 Hue(색상환)를 음악적 음고(Pitch)로 변환하는 사운드 시네스테지아(Synesthesia) 신시사이저와 영상 편집 프로그램(DaVinci Resolve, Premiere Pro 등)에 즉시 적용 가능한 3D LUT (.cube) 파일 생성까지 지원합니다.


🎨 주요 특징 (Key Features)

  • 🍬 귀여운 젤리 & 캔디 3D 디자인 시스템 (Cute Jelly & Candy 3D Theme):
    • 쫀득하고 영롱한 3D 글래시 젤리 스와치 카드와 입체적인 버튼 광택 효과
    • 터치 및 마우스 반응형 버튼 눌림(Squishy Active), 통통 튀는 바운스 애니메이션
    • 직관적인 모듈러 대시보드 레이아웃과 반응형 스마트 그리드
  • 🎵 Web Audio API 사운드 시네스테지아 (Sound Synesthesia Engine):
    • ✨ 음색 매핑: 각 색상의 HSL 색상환각도를 펜타토닉 음계에 1:1 매핑하여 개별 색상 및 전체 팔레트를 음악 멜로디로 연주
    • 🎹 4종 신시사이저 음색: 🍬 젤리 버블 팝, 🔔 캔디 차임, 🌌 코스믹 패드, 🪵 젤리 마림바지원
    • 🌊 실시간 앰비언트 루프: 색온도와 화성에 맞춘 감각적인 코스믹 앰비언스 사운드 자동 생성
  • 🎬 Canvas 2D 기반 4대 실시간 프리뷰 모드:
    1. 🎬 시네마 씬 프리뷰: 선택한 팔레트 색상으로 실시간 렌더링되는 일몰/산맥/태양 2D/3D 그래픽 씬
    2. 🍬 3D 젤리 오디오 파동: 오디오 주파수(FFT) 반응형 춤추는 3D 젤리 웨이브
    3. 🎨 터치/마우스 컬러 휠: 인터랙티브 크로매틱 컬러 휠 상에서 젤리 노드를 손으로 직접 드래그하여 직관적 색상 조정
    4. 📊 LUT 곡선 & WCAG 가독성 대비: 실시간 RGB 감마 곡선 분석 및 WCAG 2.1 텍스트 가독성 자동 검사
  • 🛠️ 전문 유틸리티 & 멀티 포맷 내보내기:
    • 🔒 색상 고정 & 드래그 순서 변경: 특정 색상 고정(Lock) 및 터치/마우스 드래그 앤 드롭 스와치 재배치
    • 🖼️ 이미지 팔레트 추출: 로컬 사진/이미지를 드래그하여 주요 시네마틱 색상 자동 추출
    • 💾 멀티 포맷 내보내기: CSS 변수, Tailwind Config, JSON, SVG 카드, 3D LUT (.cube) 파일 및 HD PNG 캡처 지원
    • 💖 브라우저 보관함: 맘에 드는 팔레트 localStorage에 보관 및 일괄 복원

🕹️ 사용 방법 (How to Use)

  1. 장르 및 조화 선택: 좌측 모듈 패널에서 블록버스터, 네온 사이버펑크, 빈티지 웜 필름 등 원하는 시네마틱 장르와 색상 조화 규칙(Complementary, Triadic 등)을 선택하거나 🎲 랜덤 생성 버튼을 누릅니다.
  2. 스와치 조절 & 멜로디 감상: 스와치 카드의 🔒 버튼으로 마음에 드는 색상을 고정하고, 🎵 Note 버튼을 눌러 색상의 음색을 들어보세요. 🎵 팔레트 연주를 누르면 팔레트 전체가 하나의 멜로디로 플레이됩니다!
  3. 실시간 캔버스 체인지: 캔버스 상단의 🎬 씬 프리뷰, 🍬 젤리 파동, 🎨 컬러 휠, 📊 LUT/대비 탭을 클릭하여 시각적 연출을 전환합니다. 🎨 컬러 휠 모드에서는 휠 위의 젤리 노드를 손으로 직접 드래그할 수 있습니다.
  4. 내보내기 & 3D LUT 다운로드: 💾 내보내기 버튼을 눌러 CSS, Tailwind, SVG, 또는 DaVinci Resolve / Premiere Pro에서 바로 쓸 수 있는 .cube 3D LUT 파일로 내려받으세요!

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

앱을 열면 제공되는 기본 설정과 화면 안내를 확인할 수 있습니다. 먼저 예시 상태에서 주요 조작을 살펴본 뒤, 목적에 맞게 입력값이나 도구를 변경해 보세요.

별도 설치가 필요한가요?

이 앱은 웹 브라우저에서 실행하도록 구성되어 있습니다. 원활한 사용을 위해 최신 브라우저와 안정적인 인터넷 환경을 권장합니다.

결과가 예상과 다르게 보이면 무엇을 확인해야 하나요?

현재 선택한 설정, 입력값, 화면 크기, 브라우저 상태에 따라 결과가 달라질 수 있습니다. 초기화 또는 예시 설정으로 돌아간 뒤 값을 하나씩 바꿔 확인하면 원인을 파악하기 쉽습니다.