앱을 불러오는 중 ...

수채화 패럴랙스 레이어 스튜디오는 2D 횡스크롤 게임 개발자 및 아티스트가 다중 배경 레이어의 패럴랙스(원근감) 스크롤 속도와 가시성을 실시간으로 조합하고 이질감 없는 카메라 이동을 테스트할 수 있는 웹 기반 배경 시뮬레이션 도구입니다.

이미지 파일들을 외부 서버에 업로드하지 않고 브라우저 캔버스 내부에서 완전 국소적으로 처리하므로 개발 중인 아트 리소스를 보안 걱정 없이 즉시 검증할 수 있습니다.

🌟 주요 핵심 기능

🎨 수채화 & 드로잉 감성 아트 UI 및 빌트인 프리셋:
- 즉각적인 테스트가 가능하도록 몽환의 수채화 숲, 황혼의 노을 성, 사이버 수묵 밤하늘의 3가지 고품질 수채화 테마 템플릿을 내장하고 있습니다.
📁 드래그 앤 드롭 Multi-Layer 로딩:
- 캔버스나 레이어 패널 위로 PNG, JPG 등 이미지 파일들을 직접 드래그해서 떨어뜨리면 자동으로 개별 레이어로 추가됩니다.
🎛️ 레이어별 원근 스크롤 속도 및 속성 정밀 제어:
- 레이어마다 원경(0.1x~0.4x), 중경(0.5x~0.8x), 주 이동 바닥(1.0x), 근경(1.2x~1.5x) 등 고유 스크롤 배율을 지정할 수 있으며 음수 스크롤 배율도 지원합니다.
- Z-Index 순서 변경, Y축 오프셋 위치 조정, 불투명도(Opacity), 혼합 모드(Normal, Multiply, Screen, Overlay)를 자유롭게 설정할 수 있습니다.
🕹️ 인터랙티브 카메라 & 캐릭터 이동 시뮬레이션:
- 키보드 방향키(←/→) 또는 A/D 키(Shift 연타 시 대쉬)로 캐릭터 이동 속도와 배경 스크롤의 연동 상태를 입체적으로 확인할 수 있습니다.
- 마우스 드래그 스크러빙 및 자동 스크롤(Play/Pause, 속도 조절) 기능을 지원합니다.
🎬 스프라이트 시트 내보내기 (Sprite Sheet Export):
- 설정된 패럴랙스 레이어 융합 모션 프레임들을 가로 스트립(Horizontal Strip) 또는 격자(Grid) 배치 형태의 PNG 스프라이트 시트 이미지로 추출할 수 있습니다.
- 게임 엔진 주입용 레이어 메타데이터 JSON 파일 다운로드를 함께 제공합니다.
💾 프로젝트 세이브 & 로드:
- 편집 중인 전체 레이어 구성 및 이미지 픽셀 정보(Base64)를 프로젝트 JSON 파일로 저장하거나 불러와 이어서 작업할 수 있습니다.

🎯 대상 사용자 및 활용 사례

2D 게임 그래픽 아티스트: 배경 레이어 분할 작업 후 원근감이 자연스럽게 연출되는지 엔진에 넣기 전 미리 테스트하고자 하는 기획자/디자이너.
인디 게임 개발자: Unity, Godot, Phaser, PixiJS 등의 2D 패럴랙스 배경 리소스를 제작하고 적절한 레이어별 스크롤 속도 계수를 산출하고자 하는 프로그래머.
웹 아트디렉터 & 디자이너: 동적 패럴랙스 랜딩 페이지나 인터랙티브 수채화 웹툰 배경의 레이아웃을 검증하고자 하는 크리에이터.

⚠️ 사용 제한 사항

웹 브라우저 메모리(RAM)를 활용하므로, 8K 이상의 극단적인 대용량 이미지를 10개 이상 다량 추가할 경우 일부 저사양 기기에서 캔버스 렌더링 속도가 저하될 수 있습니다.
이미지 Tiling 처리 시 가로 무한 루프가 매끄럽게 연결되려면 좌우 경계선 픽셀이 심리스(Seamless)하게 맞춰진 배경 이미지를 사용하는 것을 권장합니다.

🛠️ 사용 방법 (How to Use)

데모 프리셋 선택: 상단 ‘테마 프리셋’ 메뉴에서 숲, 노을, 밤하늘 중 하나를 선택해 기본 작동을 점검합니다.
커스텀 레이어 추가:
- ‘레이어 추가’ 버튼을 누르거나, 보유한 배경 PNG 파일들을 캔버스 위로 드래그 앤 드롭하여 추가합니다.
속도 및 레이어 순서 설정:
- 우측 레이어 목록에서 레이어 이름을 변경하고, 원경 산은 0.2x, 근경 나무는 1.2x 등으로 스크롤 속도를 다르게 부여합니다.
- 위로/아래로 버튼을 이용해 Z-Index 레이어 겹침 순서를 정돈합니다.
인터랙션 테스트:
- A/D 키나 방향키를 눌러 캐릭터를 좌우로 이동시키거나 타임라인 스크러버를 드래그하여 패럴랙스 깊이감을 테스트합니다.
결과물 내보내기 & 저장:
- ‘시트 내보내기’를 클릭하여 애니메이션 픽셀 수치와 프레임 수를 입력하고 PNG 시트로 다운로드하거나, ‘프로젝트 저장’을 눌러 세이브 JSON을 내려받습니다.

💬 자주 묻는 질문 (FAQ)

Q1. 레이어 이미지 파일이 서버로 업로드되어 유출될 위험이 있나요?
- A. 절대 그렇지 않습니다. 본 도구는 모든 픽셀 데이터와 계산을 사용자 단말기 브라우저 내부(HTML5 Canvas/JavaScript)에서만 전적으로 처리하므로 네트워크 외부 서버로 파일이 송수신되지 않습니다.
Q2. 추출된 스프라이트 시트를 유니티(Unity)나 고도(Godot) 엔진에서 바로 사용할 수 있나요?
- A. 네, 표준 PNG 가로 스트립/격자 형태 이미지로 추출되므로 2D 게임 엔진의 Sprite Editor에서 Grid Cell Slicing하여 즉시 사용하실 수 있습니다. 또한 제공되는 JSON 메타데이터를 활용하면 레이어별 추천 스크롤 속도값을 코드에 쉽게 적용할 수 있습니다.
Q3. 작업 중인 레이어 구성을 저장해 두었다가 나중에 다시 수정할 수 있나요?
- A. 네, 상단 ‘프로젝트 저장’ 버튼을 누르면 모든 레이어 속성과 이미지 데이터가 포함된 .json 파일이 다운로드됩니다. 이후 ‘불러오기’ 버튼으로 이 파일을 선택하면 이전 작업 상태가 그대로 복원됩니다.