별도의 그래픽 라이브러리 설치나 복잡한 빌드 환경 없이 60 FPS 실시간 뷰포트 위에서 코딩할 수 있으며 코드를 재컴파일하지 않고도 슬라이더와 네온 컬러 피커를 통해 유니폼(Uniform) 변수를 실시간 미세 조절할 수 있습니다. 제작한 비주얼 결과물은 PNG 고해상도 이미지, WebM 애니메이션 비디오, GLSL (.frag) 코드 그리고 단일 독립 실행형 HTML 패키지로 내보낼 수 있습니다.

🌟 핵심 주요 기능

• 🌌 사이버네틱 미래지향적 다크 UI (Cybernetic Dark Theme):
  • 딥 사이버 네이비와 네온 시안/마젠타 글로우 테마, 듀얼 레이아웃 분할 창(Editor & Live Viewport), CRT 스캔라인 Overlay, FPS 및 렌더링 타임 실시간 모니터링 HUD를 제공합니다.
• ⚡ 실시간 GLSL 컴파일러 & 스마트 에러 디버그 콘솔:
  • 코드를 입력하거나 Ctrl + S 키를 누르면 WebGL 파이프라인에서 즉각 셰이더를 컴파일합니다.
  • GLSL 문법 에러 발생 시 exact line number와 구문 오류 원인을 하단 디버그 콘솔에 즉시 출력하여 빠르게 버그를 잡을 수 있습니다.
• 🎛️ 실시간 라이브 파라미터 & 네온 컬러 컨트롤러:
  • u_time 재생 속도(0.1x ~ 3.0x), u_color1 (Primary Neon), u_color2 (Secondary Accent) RGB 피커 지원.
  • u_param1 ~ u_param4 파라미터 슬라이더를 통해 주파수, 패턴 밀도, 변형 왜곡 강도, 줌 레벨, 글로우 광량을 60 FPS 인터랙티브 60Hz로 조절할 수 있습니다.
• 🔮 16가지 엄선된 고품질 GLSL 프리셋 라이브러리:
  1. 사이버네틱 네온 튜닝 파동: 네온 그리드 라인과 디지털 에너지를 머금은 플라즈마 파동.
  2. 우주 성운과 차원 워프: FBM(Fractional Brownian Motion) 레이마칭 volumetric 우주 성운과 별빛.
  3. 큐빅 퀀텀 프랙탈 구체: 3D 구체와 프랙탈 큐브 간 모핑 레이마칭 발광체.
  4. 액체 메탈 블롭 & 리플: 금속 광택 크롬 반사 필드와 오로라 리플.
  5. 전기 보로노이 에너지 셀: 실시간 Voronoi 세포 분열 및 네온 라이프 아크.
  6. 크리스탈 홀로그램 프리즘: 색수차(Chromatic Aberration) 분산과 홀로그램 스캔라인.
  7. 용암 램프 마그마 유체: 마그마 유체와 메타볼(Metaballs) 점성 융합.
  8. 가상 파동 동기화 Visualizer: 가상 음파 주파수 스펙트럼 합성 비주얼라이저.
  9. 사이버 웜홀 하이퍼스페이스 터널: 시공간을 초월하는 속도감 있는 워프 그리드 터널.
  10. 사이버펑크 3D 미드나잇 시티: Procedural 3D 고층 빌딩 시티 스카이라인 레이마칭.
  11. 블랙홀 사건의 지평선 & 중력 렌즈: 강착원 반사 링과 빛의 중력 굴절 블랙홀.
  12. 태양 화염 & 플라즈마 아크: 폭발하는 태양 코로나 플라즈마 프로튜버런스.
  13. 레트로 80s 씬스웨이브 썬셋: 80년대 레트로 원근법 Grid 지평선과 스트라이프 태양.
  14. 펜로즈 타일 & 사이케데릭 만다라: 대칭 기하학 패턴 모핑 만다라 캘레이도스코프.
  15. 퀀텀 입자 흩날림 & 오로라: 흩날리는 퀀텀 먼지 입자와 빛나는 오로라 리본.
  16. 사이버 메트릭스 텍스트 글리치 레인: 디지털 텍스트 코드 글리치 빗줄기 이펙트.
• 🖼️ 텍스처(sampler2D) 슬롯 지원:
  • 절차적 노이즈(Noise), 사이버 격자(Grid), 컬러 스펙트럼(Gradient) 생성 및 사용자가 직접 커스텀 이미지 파일(PNG/JPG)을 업로드하여 u_texture0 샘플러로 전달 가능.
• 📥 다양한 형태의 파일 다운로드 & 내보내기:
  • PNG 스냅샷: 현재 캔버스 프레임을 고화질 이미지로 즉시 저장.
  • WebM 5초 애니메이션 영상: MediaRecorder API를 통한 실시간 비디오 녹화.
  • GLSL 소스코드 (.frag): 표준 프래그먼트 셰이더 파일 다운로드.
  • 단일 독립실행 HTML 파일: WebGL 렌더링 코드와 셰이더가 하나로 압축된 순수 HTML 웹앱 저장.

🛠️ 사용 방법 (How to Use)

1. 셰이더 프리셋 선택:
   • 상단 헤더의 셰이더 프리셋 드롭다운에서 원하는 비주얼 스타일(우주 성운, 퀀텀 구체, 사이버 그리드 등)을 선택합니다.
2. 실시간 코드 편집:
   • 좌측 ‘GLSL 코더’ 탭에서 코드를 자유롭게 수정하고 Ctrl + S 키나 컴파일 & 적용 버튼을 누르면 실시간 뷰포트에 바로 반영됩니다.
3. 라이브 파라미터 미세 조절:
   • ‘라이브 파라미터’ 탭으로 이동하여 슬라이더를 옮기거나 컬러 피커를 바꿔 시각 효과를 극대화해 보세요.
4. 마우스 인터랙션:
   • 뷰포트 캔버스 위에서 마우스를 이동하거나 클릭하면 u_mouse 유니폼 값이 전달되어 마우스 위치에 반응하는 인터랙션 visual을 얻을 수 있습니다.
5. 결과물 다운로드:
   • 내보내기 메뉴를 통해 PNG 이미지, 5초 비디오 영상, GLSL 코드 파일, 또는 오프라인에서도 동작하는 독립 실행 HTML 파일로 다운로드하세요.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

기획자, 개발자, 운영 담당자가 복잡한 분기 규칙을 텍스트나 말로 설명할 때 발생하는 논리적 누락과 커뮤니케이션 비용을 완전히 해소합니다.

🌟 주요 기능

1. 4가지 전용 노드 타입 지원:
   • 시작(Start): 전체 의사결정 워크플로우의 기점을 정의합니다.
   • 조건(Decision): 판단 질문 및 참/거짓 또는 다중 분기 기준을 입력합니다.
   • 선택지(Branch): 특정 조건에서 파생되는 다양한 실행 옵션을 구조화합니다.
   • 결과(Result): 최종 도달하는 의사결정 결과 및 후속 조치를 명시합니다.
2. 자유로운 인터랙티브 캔버스:
   • 상하좌우 연결 포트(Handle)를 드래그하여 직관적으로 방향성 화살표 엣지를 연결할 수 있습니다.
   • 마우스 휠 및 핀치 제스처를 통한 부드러운 줌(Zoom In/Out), 팬(Pan), 화면에 맞추는 Fit View를 지원합니다.
3. 실시간 그래프 유효성 검증(Validation Engine):
   • 시작 노드 누락, 연결되지 않은 고립 노드, 후속 분기가 없는 조건 노드, 결과 노드 미도달 등 논리적 오류를 실시간으로 탐지하여 리포트로 안내합니다.
4. 실무 및 일상 맞춤형 6종 내장 템플릿:
   • 신규 기능 출시 검토: QA 통과 및 부하 성능 지표에 따른 100% 롤아웃 vs 핫픽스 분기
   • 고객 환불/클레임 분기 트리: 구매일수, 단순 변심, 제품 결함에 따른 전액 환불/차감/반려 로직
   • 오늘 뭐 먹지? 메뉴 결정 트리: 혼밥 여부, 국물/면/밥, 맵기 선호도에 따른 식사 메뉴 선택
   • 주식 매수/매도/홀딩 투자 결정: 목표 수익률 도달(+15%), 손절선(-7%), 밸류에이션 저평가 기반 매매 원칙
   • 2단계 보안 인증(2FA) 분기: 로그인 기기 신뢰도 및 Geo-IP 이상 탐지 기반 접근 제어
   • 버그 심각도 분류 및 핫픽스: 결제/데이터 장애 여부 및 발생 빈도 기반 긴급 배포 결정
5. 취향과 환경에 맞춘 8종 고화질 테마 지원 (다크 모드 4종 포함):
   • 밝은 테마: 네오 옐로우(기본), 노르딕 슬레이트, 선셋 앰버, 도쿄 라벤더
   • 다크 테마 (눈이 편안한 고대비 다크 모드): 사이버펑크 네온, 옵시디언 모노크롬, 미드나잇 포레스트, 딥 스페이스 바이올렛
6. 실행 취소(Undo) 및 다시 실행(Redo):
   • 노드 이동, 엣지 연결, 속성 변경 등 모든 편집 작업에 대해 최대 40단계의 히스토리를 제공합니다.
7. 로컬 자동 저장 및 표준 JSON/이미지 내보내기:
   • 브라우저 LocalStorage에 실시간으로 작업 상태가 안전하게 보관됩니다.
   • 표준화된 JSON 스키마 내보내기/불러오기 및 고해상도 PNG/SVG 벡터 파일 다운로드를 지원합니다.

👥 어떤 사용자를 위한 도구인가요?

• 프로덕트 매니저 & 기획자: 신규 기능 배포 기준, 예외 상황 처리 룰, 사용자 온보딩 분기 설계
• 개인 투자자 & 트레이더: 뇌동매매를 방지하는 철저한 매수/익절/손절 원칙 트리 시각화
• 일상 의사결정이 고민인 분: 점심/저녁 식사 메뉴 결정, 주말 활동 선택 등 일상 플로우 매핑
• 소프트웨어 엔지니어 & 아키텍트: 상태 머신(State Machine), 결제 승인/거절 로직, API 에러 핸들링 플로우 모델링
• CS 및 운영 리드: 고객 클레임 접수, 환불 승인/차감/반려 가이드라인 트리 구축
• 보안 및 인프라 담당자: 2단계 인증(2FA) 분기, 이상 징후 탐지 및 접근 제어 정책 시각화

🛠️ 사용 방법 (How to Use)

1. 노드 추가: 좌측 팔레트에서 시작(Start), 조건(Decision), 선택지(Branch), 결과(Result) 노드를 클릭하거나 캔버스로 드래그하여 배치합니다.
2. 조건 및 내용 입력: 노드를 클릭하면 나타나는 우측 속성 패널에서 제목, 세부 설명, 조건 질문을 입력합니다.
3. 연결선(Edge) 생성: 노드의 상·하·좌·우에 위치한 원형 포트(●)를 드래그하여 연결하려는 대상 노드로 선을 잇습니다.
4. 분기 라벨 지정: 연결선을 선택한 후 Yes, No, 승인, 반려 등의 라벨 프리셋을 누르거나 직접 분기명을 입력합니다.
5. 흐름 검증: 좌측 하단의 ‘그래프 흐름 검증’ 패널에서 고립 노드나 미분기 조건이 없는지 확인하고 문제 항목을 클릭하여 해당 위치로 즉시 이동합니다.
6. 저장 및 내보내기: 상단의 ‘저장 / 내보내기’ 메뉴를 통해 JSON 데이터로 보관하거나 PNG/SVG 이미지로 내려받아 기획서나 보고서에 활용합니다.

❓ 자주 묻는 질문 (FAQ)

Q1. 작성 중인 의사결정 그래프 데이터는 서버에 저장되나요?

아닙니다. 본 도구는 100% 클라이언트 사이드 브라우저 환경에서 동작하며 모든 그래프 데이터는 사용자의 로컬 브라우저 저장소(LocalStorage)에만 안전하게 자동 보관됩니다. 외부 서버로 데이터가 전송되지 않아 내부 보안 정책이 엄격한 업무 환경에서도 안심하고 사용할 수 있습니다.

Q2. 모바일이나 태블릿 기기에서도 정상적으로 편집할 수 있나요?

네, 터치 드래그를 통한 노드 이동, 캔버스 패닝, 핀치 줌을 완벽하게 지원합니다. 또한 모바일 환경에서는 화면 크기에 맞춰 좌우 패널이 슬라이드 오버 형태로 전환되어 캔버스 작업 공간을 넓게 확보할 수 있습니다.

Q3. 그래프 데이터를 다른 개발 툴이나 코드와 연동할 수 있나요?

네, 본 앱은 nodes와 edges가 명확히 분리된 표준 JSON 구조로 데이터를 관리합니다. 상단 메뉴의 ‘JSON 내보내기’를 통해 추출한 데이터는 백엔드 규칙 엔진, 룰베이스 의사결정 시스템, 또는 프론트엔드 상태 플로우의 시드 데이터로 즉시 파싱하여 활용할 수 있습니다.

주요 기능

• Feature, Decision, Owner, Evidence, Milestone, Risk 노드 관리
• depends_on, owned_by, supported_by, affects, supersedes, conflicts_with 관계 연결
• SVG 그래프 드래그, 팬, 줌, Fit View 지원
• Decision 상태와 Risk 상태를 반영하는 필터
• 선택 노드에서 들어오고 나가는 관계 및 영향 범위 확인
• Impact Score 계산과 프로젝트 그래프 검증
• Local Storage 자동 저장, Undo/Redo, JSON Export/Import

지원하는 노드 유형

• Feature: 프로젝트에서 만들어야 할 기능이나 시스템
• Decision: 프로젝트에서 실제로 내려진 핵심 결정
• Owner: Decision의 최종 책임자
• Evidence: 결정을 지지하는 조사, 테스트, 측정, 문서
• Milestone: 일정과 완료 조건을 가진 프로젝트 이정표
• Risk: 결정이나 변경으로 발생할 수 있는 위험 요소

관계 유형

노드는 단순한 선이 아니라 의미가 있는 관계로 연결합니다. depends_on은 선행 조건, owned_by는 책임, supported_by는 근거, affects는 영향, supersedes는 기존 결정을 대체하는 변경 이력, conflicts_with는 동시에 유지하기 어려운 충돌을 뜻합니다.

사용 방법

1. 왼쪽 라이브러리에서 Feature 또는 Decision을 추가합니다.
2. 오른쪽 속성 패널에서 제목, 상태, Owner, 근거, 메모를 입력합니다.
3. 노드를 선택하고 연결을 누른 뒤 다른 노드를 클릭해 관계 유형을 지정합니다.
4. Decision을 선택해 영향 추적을 실행하면 연결된 Feature, Milestone, Risk를 강조합니다.
5. 필요할 때 JSON으로 프로젝트를 내보내거나 가져옵니다.

FAQ

일반적인 Decision Tree와 무엇이 다른가요?

Decision Tree는 선택지와 결과의 분기를 표현하지만 Decision Trace Map은 프로젝트의 의사결정과 그 주변의 책임, 근거, 일정, 리스크 사이의 관계를 추적합니다.

기존 결정을 변경할 때는 어떻게 하나요?

기존 Decision을 지우지 말고 새 Decision을 추가한 뒤 supersedes 관계로 연결하세요. 그러면 결정의 변경 이력이 남고 과거의 맥락도 보존됩니다.

영향 범위는 어떻게 확인하나요?

노드를 선택하고 영향 추적을 누르면 연결된 노드가 단계별로 강조됩니다. 오른쪽 패널에서는 연결된 관계 수와 Impact Score를 확인할 수 있습니다.

데이터는 어디에 저장되나요?

프로젝트 데이터는 브라우저의 Local Storage에 자동 저장됩니다. 별도 서버나 계정 없이 사용할 수 있으며 JSON Export로 백업할 수 있습니다.

여러 명이 동시에 편집할 수 있나요?

현재 버전은 실시간 공동 편집을 제공하지 않습니다. JSON 파일을 공유하고 각자의 브라우저에서 Import하는 방식으로 프로젝트를 전달할 수 있습니다.

실제 기능

• 집중, 짧은 휴식, 긴 휴식, 한 세트 반복 횟수를 슬라이더로 실시간 조절합니다.
• 프루티 팝, 미드나이트 베리, 아쿠아 나이트, 심플 다크, 시트러스 크림, 모노 스튜디오 중 화면 테마를 선택하고 다음 방문에도 유지합니다.
• 작업 이름과 예상 세션 수를 추가하고 현재 타이머에 사용할 작업을 선택합니다.
• 시작, 일시정지, 리셋, 다음 단계 이동을 제공하며 다음 단계 자동 시작 여부를 선택할 수 있습니다.
• 탭이 백그라운드에 있는 동안에도 Date.now() 기반 종료 시각을 사용해 복귀 시 남은 시간을 보정합니다.
• 브라우저 알림 권한을 허용하면 탭이 보이지 않을 때 세션 종료 알림을 받을 수 있습니다.
• 완료된 집중 세션의 작업명, 시작·종료 시각, 주기, 분량을 오늘의 집중 영수증에서 확인합니다.
• 현재 작업 큐와 세션 기록은 브라우저 로컬 저장소에 보관하며 JSON 리포트와 세션 CSV를 다운로드합니다.

이런 사용자에게 유용합니다

공부할 범위를 세션 단위로 나누고 싶은 사람

시험 범위, 강의 복습, 문제 풀이처럼 예상 시간이 필요한 공부를 작업으로 나누고 세션 수를 지정할 수 있습니다. 한 작업이 예상 세션만큼 완료되면 목록에서 완료 상태로 표시됩니다.

업무 순서를 눈에 보이게 관리하는 사람

메일 답장, 기획서 작성, 코드 리뷰처럼 오늘 처리할 일을 큐에 추가하고 현재 집중 대상을 하나씩 선택할 수 있습니다. 집중 시간이 끝난 뒤 휴식으로 넘어가는 흐름은 설정한 반복 횟수에 따라 이어집니다.

기록을 파일로 남기고 싶은 사람

완료 세션이 쌓이면 화면의 요약 수치와 최근 활동을 확인하고 JSON은 전체 설정·작업·기록을 보관하는 용도로 CSV는 표 계산 프로그램에서 정리하는 용도로 저장할 수 있습니다.

사용 방법

1. 오늘의 작업 큐에 작업 이름과 예상 세션 수를 입력하고 + 추가를 누릅니다.
2. 목록에서 지금 집중할 작업의 선택 버튼을 누릅니다. 작업을 선택하지 않아도 타이머는 실행할 수 있습니다.
3. 리듬을 실시간으로 조절에서 집중·휴식·반복 횟수를 정합니다. 실행 중에 바꾸면 현재 단계에서 이미 지난 시간은 유지하고 남은 시간이 새 설정에 맞춰집니다.
4. 상단의 테마 선택기에서 밝은 테마나 미드나이트 베리, 아쿠아 나이트, 심플 다크 테마를 고릅니다. 선택한 테마는 브라우저에 저장됩니다.
5. 시작을 누르고 필요하면 일시정지 또는 다음 단계를 사용합니다. 자동 시작을 켜면 단계가 끝날 때 다음 단계가 이어집니다.
6. 브라우저 알림이 필요하면 알림 켜기를 누르고 권한을 허용합니다. 세션이 끝난 뒤 JSON 저장 또는 CSV 저장으로 결과 파일을 내려받습니다.

제한 사항

이 앱은 브라우저 안에서 동작하므로 다른 기기나 브라우저와 작업 큐·기록을 자동으로 동기화하지 않습니다. 로컬 저장소를 지우거나 브라우저 데이터를 삭제하면 저장된 내용이 사라질 수 있으니 필요한 기록은 JSON으로 먼저 저장하세요. 백그라운드 타이머는 페이지 탭이 열려 있는 동안 종료 시각을 계산하는 방식이며 탭이나 브라우저를 완전히 닫은 뒤 다시 켜도 알림을 예약해 주는 기능은 아닙니다. 운영체제나 브라우저가 알림 권한을 차단하면 소리와 알림이 표시되지 않을 수 있습니다.

FAQ

실행 중에 집중 시간을 바꾸면 어떻게 되나요?

현재 단계에서 이미 지난 시간은 유지되고 남은 시간이 새 집중 시간 또는 휴식 시간에 맞춰 즉시 다시 계산됩니다.

탭을 다른 화면으로 바꿔도 포모도로 타이머가 계속되나요?

네. 탭이 열려 있다면 종료 시각을 기준으로 시간이 흐릅니다. 다시 돌아왔을 때 최신 남은 시간이 표시됩니다.

완료한 포모도로 기록을 다운로드할 수 있나요?

네. JSON 저장은 설정·작업·세션 정보를 담고 CSV 저장은 완료된 집중 세션을 표 형태로 저장합니다.

작업 큐는 다른 컴퓨터에서도 보이나요?

아니요. 작업 큐와 기록은 현재 브라우저의 로컬 저장소에만 보관됩니다. 다른 기기로 옮길 때는 JSON 파일을 참고해 직접 옮겨야 합니다.

브라우저 알림이 오지 않는 이유는 무엇인가요?

알림 켜기에서 권한을 허용했는지 브라우저와 운영체제의 알림 차단 설정이 해제되어 있는지 확인하세요. 알림 기능을 지원하지 않는 환경에서는 화면의 타이머와 선택한 소리만 사용할 수 있습니다.

다크 테마를 선택하면 다음에도 유지되나요?

네. 테마 선택값은 작업 큐와 같은 브라우저 로컬 저장소에 저장되어 다시 열었을 때 마지막 테마를 적용합니다.

주요 기능

JSON 구조 비교

• 두 입력값을 JSON.parse로 검증하고 잘못된 문법은 각 입력창 아래에 표시합니다.
• 객체와 배열을 재귀적으로 펼쳐 $, $.user.name, $.items.0.price 같은 경로 단위로 비교합니다.
• 추가, 삭제, 변경, 동일 항목 수를 요약 카드로 보여줍니다.

Diff 하이라이트

• 결과 표에서 상태 배지와 색상으로 변경 유형을 구분합니다.
• 원본 값과 비교 값을 나란히 표시해 어떤 키가 달라졌는지 바로 확인할 수 있습니다.
• 필터를 사용해 추가된 값, 삭제된 값, 변경된 값만 따로 볼 수 있습니다.

모바일 대응

• 작은 화면에서는 입력 패널이 세로로 쌓이고 결과 행이 카드형으로 바뀝니다.
• 버튼과 선택 박스는 터치하기 쉬운 크기로 배치했습니다.

대상 사용자

• API 응답 변경을 검토하는 백엔드, 프론트엔드 개발자
• 환경 설정 JSON이나 배포 설정 차이를 확인하는 운영 담당자
• 다국어 번역 JSON에서 빠진 키와 변경된 문구를 찾는 콘텐츠 담당자
• 테스트 fixtures, mock data, 샘플 payload를 비교하는 QA 담당자

활용 사례

• 배포 전후 API 응답에서 새 필드가 추가됐는지 확인합니다.
• 기본 설정 파일과 운영 설정 파일의 값 차이를 경로 단위로 추적합니다.
• 번역 JSON 두 버전의 누락 키와 변경 문구를 빠르게 찾습니다.
• 배열 순서가 중요하지 않은 데이터는 배열 순서 무시 옵션으로 내용 차이에 집중합니다.

사용 방법

1. 왼쪽에는 원본 JSON, 오른쪽에는 비교할 JSON을 붙여 넣습니다.
2. 필요한 경우 키 정렬 또는 배열 순서 무시 옵션을 조정합니다.
3. 비교하기를 누르면 결과 표와 요약 숫자가 갱신됩니다.
4. 결과 필터에서 추가, 삭제, 변경, 동일 항목만 따로 확인합니다.
5. 샘플 버튼을 누르면 예시 JSON으로 기능을 바로 테스트할 수 있습니다.

제한 사항

• JSON 문법이 유효해야 비교할 수 있으며 JSON5, YAML, 주석 포함 JSON은 지원하지 않습니다.
• 매우 큰 파일은 브라우저 메모리와 렌더링 성능의 영향을 받을 수 있습니다.
• 배열 순서 무시 옵션은 배열 항목을 문자열화해 정렬하므로 복잡한 대용량 배열 분석에는 맞지 않을 수 있습니다.
• 서버 저장, 로그인, 팀 공유 기능은 포함하지 않습니다.

FAQ

JSON 파일이 서버로 업로드되나요?

아니요. 입력, 파싱, 비교는 현재 브라우저에서만 처리됩니다.

API 응답 두 개를 비교할 수 있나요?

네. 응답 본문이 유효한 JSON이면 붙여 넣어서 경로별 추가, 삭제, 변경 값을 확인할 수 있습니다.

배열 순서가 다른 경우도 같은 값으로 볼 수 있나요?

배열 순서 무시 옵션을 켜면 배열 항목을 정렬한 뒤 비교합니다. 순서 자체가 의미 있는 데이터라면 끄고 비교하세요.

JSON 문법 오류는 어디에서 확인하나요?

각 입력창 아래 상태 영역에 파싱 오류 메시지가 표시됩니다.

복잡하게 얽힌 불필요한 속성이나 깊은 div 중첩 구조를 한눈에 파악하고 단 한 번의 클릭으로 깨끗한 시맨틱 마크업과 표준 들여쓰기 코드로 전환할 수 있습니다.

🌟 주요 기능 (Core Features)

• 🧹 강력한 마크업 산화·불순물 제거 (HTML Sanitizer):
  • 주석 및 무의미 요소 제거: <!-- 주석 -->, <!DOCTYPE>, <script>, <style>, <iframe> 태그 선택적 일괄 삭제.
  • 속성 클리닝: 인라인 스타일 (style="..."), JS 이벤트 핸들러 (onclick, onload 등), 커스텀 데이터 속성 (data-*), class / id 속성을 선택하여 간편 제거.
  • 빈 태그 소탕: 내용이 비어 있는 무의미한 <div></div>, <p></p>, <span></span> 자동 소탕.
• 🌳 대화형 노드 트리 캔버스 (Interactive DOM Tree Canvas):
  • 입력된 HTML 문서의 DOM 계층 구조를 직관적인 트로그 노드 캔버스 그래프로 시각화합니다.
  • 노드를 클릭하여 태그명, 클래스 정보, 자식 요소 수, 깊이 레벨을 조망하고 캔버스에서 개별 노드를 직접 삭제하거나 랩핑을 해제할 수 있습니다.
  • 캔버스 확대/축소(Zoom In/Out) 및 리셋 기능을 지원합니다.
• 🏷️ 시맨틱 태그 자동 교정 & 랩핑 해제:
  • 구형 태그인 <b>, <i>, <center>, <font>를 modern 시맨틱 태그인 <strong>, <em>, <div>, <span>으로 즉시 정형화합니다.
  • 의미 없이 중첩된 1중 <div> 랩핑 구조를 자동으로 풀어내 마크업 깊이를 획기적으로 낮춥니다.
• 📐 맞춤형 들여쓰기 & 실시간 Code Diff / Preview:
  • 2 스페이스, 4 스페이스, 탭(Tab), 한 줄 압축(Minify) 등 다양한 포맷팅 스타일 지원.
  • 원본 HTML과 정제 후 HTML을 나란히 비교하는 Side-by-Side Code Diff 뷰어 제공.
  • 정제된 마크업 결과물을 브라우저 내 렌더링 화면으로 바로 검증 가능한 실시간 렌더링 뷰 탑재.

👥 대상 사용자 (Target Audience)

• 프론트엔드 & 웹 개발자: 외부 컴포넌트나 레거시 코드를 리팩토링할 때 마크업을 신속하게 표준화하려는 개발자.
• 이메일 마케터 & HTML 에디터: 복잡한 이메일 HTML 템플릿의 불필요한 스타일 요소를 털어내고 용량을 절감하려는 마케터.
• 웹 퍼블리셔 & 디자이너: 노드 트리 캔버스로 DOM 구조의 깊이와 시맨틱 계층을 검증하려는 웹 전문가.
• 웹 스크래핑 엔지니어: 웹 수집 데이터에서 스크립트, 광고 프레이밍, 데이터 속성을 배제하고 순수 텍스트/태그 구조만 남기려는 엔지니어.

💡 활용 사례 (Use Cases)

1. WYSIWYG 에디터 클리닝: 네이버 블로그나 워드프레스 등 외부 에디터에서 복사한 마크업의 font, color, style 태그 오염을 지우고 깔끔한 마크업으로 복원할 때.
2. 이메일 템플릿 코드 다이어트: 이미지 스페이서와 복잡한 테이블 스타일 속성을 정리하여 이메일 차단율을 낮추고 전송 용량을 최소화할 때.
3. SEO & AEO 마크업 구조 진단: 시맨틱 태그 전환 및 깊은 중첩 해제로 검색엔진 크롤러가 수집하기 쉬운 구조로 개선할 때.

⚠️ 제한 사항 (Limitations)

• 본 도구는 HTML 마크업 구조 정제와 포맷팅에 특화되어 있으며 JavaScript 실행 로직이나 CSS 스타일시트 자체의 문법 변환기는 아닙니다.
• 입력한 코드 데이터는 사용자의 브라우저 메모리 상에서만 직렬화 및 정제 처리되며 서버로 전송되지 않습니다.

🛠️ 사용 방법 (How to Use)

1. HTML 코드 입력 또는 파일 드롭:
   • 좌측 상단 입력창에 정제할 HTML 코드를 직접 붙여넣거나 .html 파일을 드래그 앤 드롭합니다.
   • 상단 샘플 불러오기 버튼으로 미리 준비된 다양한 유형의 테스트 마크업을 체험할 수 있습니다.
2. 클리닝 규칙 선택:
   • 좌측 사이드바 패널에서 주석 제거, 인라인 스타일 제거, 데이터 속성 삭제, 시맨틱 교정 등 필요한 정제 옵션을 설정합니다.
3. 노드 트리 캔버스 & Diff 확인:
   • 중앙 캔버스에서 시각화된 DOM 트리를 탐색하거나 코드 Diff 비교 탭에서 원본과 정제본의 차이를 확인합니다.
4. 결과 복사 및 다운로드:
   • 정제 완료된 마크업 코드를 원클릭 복사하거나 HTML 다운로드 버튼으로 저장하여 프로젝트에 바로 사용합니다.

❓ 자주 묻는 질문 (FAQ)

Q1. 이 툴을 사용하면 작성한 HTML 코드가 외부 서버로 저장되나요?

A. 아니요. 본 프로그램은 100% 클라이언트 측 브라우저 DOMParser 엔진을 이용해 코드를 분석하고 정제합니다. 사용자의 데이터는 어떠한 외부 서버로도 전송되지 않으므로 안심하고 사용하실 수 있습니다.

Q2. 인라인 스타일을 지우면 레이아웃이 깨지지 않나요?

A. 인라인 스타일 제거 옵션을 활성화하면 style="..." 속성이 삭제됩니다. 외부 CSS 클래스 파일로 스타일을 관리하는 현대적 웹 개발 프로젝트에서는 인라인 스타일 제거를 권장하지만 기존 레이아웃을 그대로 유지해야 하는 경우에는 해당 옵션의 체크를 해제하시면 됩니다.

Q3. 대용량 HTML 파일이나 전체 웹페이지 코드도 정제할 수 있나요?

A. 네, 최신 브라우저의 DOM 처리 성능에 맞춰 제작되었으므로 수천 라인의 HTML 문서나 이메일 템플릿 코드도 손쉽게 드래그 앤 드롭으로 업로드하여 실시간 정제할 수 있습니다.

스스럼없는 따뜻함을 전하는 오가닉 앤 내추럴 우드/페이퍼 캔버스 인터페이스를 기반으로 설계되어 사용자가 이미지를 드래그 앤 드롭하거나 클립보드(Ctrl+V)로 붙여넣는 방식만으로도 QR 코드 내 텍스트나 링크를 손쉽게 추출하고 가공할 수 있습니다.

🌟 핵심 기능 (Key Features)

• 🎥 웹 카메라 기반 실시간 QR 스캔: 스마트폰 및 PC의 전면/후면 카메라와 연결되어 화면에 QR 코드를 비추는 즉시 0.1초 만에 텍스트 및 URL 링크를 자동 추출합니다.
• 🖼️ 이미지 드래그 앤 드롭 & 클립보드 인식: 캡처한 이미지를 화면으로 끌어다 놓거나 Ctrl+V 붙여넣기만으로 이미지 파일 내 QR 코드를 빠르게 분석합니다.
• 🎨 다양한 데이터 포맷 QR 생성: 일반 웹 URL, 일반 텍스트, Wi-Fi 바로 연결(SSID/비밀번호/암호화), vCard 명함 연락처, 이메일 전송 등 다양한 목적의 QR 코드를 생성합니다.
• 🪵 오가닉 내추럴 커스텀 서식: 월넛, 테라코타, 포레스트 그린 등 자연스러운 어스 톤(Earthy Tones) 색상과 내추럴 우드/페이퍼 캔버스 액자 프레임 옵션을 지원합니다.
• 🖼️ 중앙 로고 삽입 & 오류 복구 레벨(ECL): QR 코드 중심부에 사용자 브랜드 아이콘이나 로고 이미지를 삽입할 수 있으며 로고 손상을 방지하기 위한 H(30%) 오류 복구 레벨을 자동 적용합니다.
• 🔒 100% 클라이언트 사이드 보안: 모든 카메라 프레임 분석과 QR 생성 로직이 브라우저 내부에서만 동작하여 개인정보나 네트워크 정보가 외부 서버로 절대 전송되지 않습니다.
• 📜 자동 히스토리 보관: 최근 스캔하거나 생성한 QR 데이터 내역을 브라우저 로컬 저장소(localStorage)에 안전하게 기록합니다.

🎯 대상 사용자 (Target Audience)

1. 소상공인 및 매장 운영자: 카페나 매장 내 테이블에 비치할 Wi-Fi 접속용 QR 코드나 인스타그램 계정 안내 QR을 예쁘게 제작하려는 사용자.
2. 디지털 마케터 및 이벤트 기획자: 명함, 리플릿, 팝업스토어 안내판에 들어갈 고화질(PNG/SVG) 커스텀 브랜드 QR 코드가 필요한 담당자.
3. PC 및 모바일 일반 사용자: 별도의 스캔 앱을 설치하기 번거롭거나 컴퓨터 화면에 떠 있는 QR 코드를 파일 업로드로 빠르게 읽고 싶은 사용자.

💼 실제 활용 사례 (Use Cases)

• 매장 Wi-Fi 접속 안내판 제작: 네트워크 SSID와 암호화 방식을 입력하여 손님이 카메라만 비추면 바로 Wi-Fi에 연결되는 QR 코드를 내추럴 우드 테마 캔버스로 생성 후 출력.
• 비즈니스 명함 vCard 담기: 이름, 전화번호, 이메일, 회사 정보를 vCard 양식 QR 코드로 변환하여 명함 뒷면에 고화질 PNG로 삽입.
• 화면 캡처 이미지 QR 읽기: 모바일 카카오톡이나 웹 브라우저에서 캡처한 QR 이미지 파일을 드래그 앤 드롭하여 링크 복사 및 이동.

⚠️ 사용 시 제한 사항 (Limitations)

• 카메라 권한 필수: 웹 카메라 스캔 기능을 사용하려면 브라우저의 카메라 접근 권한을 ‘허용’해 주셔야 합니다. (HTTP 보안 규정상 HTTPS 환경 또는 localhost에서만 카메라가 정상 작동합니다.)
• 심한 해상도 손상 시 인식 불가: 이미지 업로드 스캔 시 QR 코드 모서리의 파인더 패턴(Square Anchor)이 심하게 훼손되었거나 조명이 극도로 어두운 경우 인식이 어려울 수 있습니다.

📋 사용 방법 (How to Use)

1. QR 코드 스캔하기

1. 상단 메뉴에서 [QR 스캐너] 탭을 선택합니다.
2. 웹 카메라 스캔: ‘카메라 켜기’ 버튼을 클릭하고 접근 권한을 승인한 뒤 화면 중앙의 조준선 프레임에 QR 코드를 비춥니다.
3. 이미지 업로드 스캔: ‘이미지 업로드 / Drop’ 탭으로 이동하여 QR 이미지를 끌어다 놓거나 Ctrl+V로 붙여넣습니다.
4. 인식 결과 팝업에서 [결과 복사] 또는 [링크 열기] 버튼을 눌러 활용합니다.

2. 커스텀 QR 코드 생성하기

1. 상단 메뉴에서 [QR 생성기] 탭을 선택합니다.
2. 생성할 QR 유형(URL, 텍스트, Wi-Fi, 연락처, 이메일)을 선택하고 세부 정보를 입력합니다.
3. 전경색 및 배경색 프리셋을 클릭하거나 액자 프레임(우드/페이퍼)을 선택하여 디자인을 맞춤 구성합니다.
4. 필요시 [로고 이미지 선택] 버튼을 통해 브랜드 아이콘을 중심에 배치합니다.
5. [PNG 다운로드] 또는 [SVG 저장] 버튼을 클릭하여 고화질 파일로 내려받습니다.

❓ 자주 묻는 질문 (FAQ)

Q1. 웹 카메라 접근 권한을 허용해도 제 개인정보나 촬영 영상이 서버로 전송되나요?

A. 아니오, 절대로 전송되지 않습니다. 본 서비스는 100% 클라이언트 사이드(Client-Side) 브라우저 연산으로 동작합니다. 카메라 프레임 이미지는 오직 사용자의 기기 메모리상에서 실시간으로 분석된 후 즉시 소멸하므로 개인정보 유출 걱정 없이 안전하게 사용하실 수 있습니다.

Q2. QR 코드 중앙에 로고를 넣어도 카메라로 스캔이 잘 되나요?

A. 네, 잘 작동합니다. QR 코드에는 데이터 일부가 손상되어도 원본을 복구하는 오류 복구 기능(Error Correction Level)이 포함되어 있습니다. 로고 삽입 옵션을 사용하면 복구 수준이 최고 단계인 H급(30% 복구 가능)으로 자동 전환되어 중앙 영역에 로고가 들어가도 문제없이 스캔됩니다.

Q3. 인쇄용(명함, 현수막, 포스터)으로 크게 출력할 때 화질이 깨지지 않나요?

A. [SVG 저장] 기능을 활용하시면 해상도에 영향받지 않는 벡터(Vector) 포맷으로 다운로드됩니다. 대형 현수막이나 대량 인쇄물 디자인 작업 시 일러스트레이터 등 편집 프로그램에 깨짐 없이 원본 그대로 적용하실 수 있습니다.

웹 브라우저 카메라 QR 코드 스캐너 & 생성기 툴을 지금 바로 무료로 경험해 보세요!

🎛️ 주요 기능 (Key Features)

• 8개 독립 루프 채널: 드럼 비트(Kick, Snare, Hi-Hat), 베이스라인, 리드 칩튠, 하모니 패드, 레트로 효과음(Laser, Coin, Jump, Zap)을 개별 채널에서 독립 조율.
• 16스텝 인터랙티브 시퀀서: 그리드 형태의 스텝 버튼을 클릭하여 박자에 맞춰 음표 노트를 켜고 끌 수 있는 직관적인 시퀀서 인터페이스.
• 실시간 사운드 합성 & 파형 선택: 8비트 퀘어(Square), 펄스(Pulse), 톱니파(Sawtooth), 삼각파(Triangle), 노이즈(Noise) 파형과 16가지 프리셋 사운드 제공.
• 채널별 이펙터 & 트랜스포즈: 볼륨(Volume), 팬(Pan), 음고 피치(Pitch -12~+12 반음), 컷오프 필터(Filter) 독립 컨트롤.
• 장르별 템플릿 프리셋: 던전 보스전, 사이버 아케이드, 칩튠 히어로, 우주 슈팅, 힐링 마을 RPG 등 다양한 레트로 트랙 프리셋 제공.
• WAV 음원 렌더링 & 내보내기: 브라우저 OfflineAudioContext 렌더링을 통해 잡음 없는 고음질 16-bit PCM WAV 파일 즉시 다운로드.
• 프로젝트 JSON 및 로컬 저장: 작곡한 패턴과 트랙 설정을 JSON 파일로 백업/복원하거나 브라우저 로컬 저장소에 저장.

👥 대상 사용자 (Target Audience)

1. 인디 게임 개발자: 게임 프로토타입이나 2D 픽셀 아트 게임에 사용할 배경음악(BGM) 및 효과음이 필요한 개발자.
2. 사운드 디자이너 & 크리에이터: 복잡한 DAW 설정 없이 순수 8비트 칩튠 사운드 아이디어를 빠르게 스케치하려는 크리에이터.
3. 학생 및 음악 교육자: 스텝 시퀀서의 작동 원리와 오디오 합성 및 루프 믹싱 개념을 배우고자 하는 사용자.

🎬 활용 사례 (Use Cases)

• 2D 레트로 게임 배경음악 제작: 아케이드, 플랫포머, RPG 게임의 무대별 8비트 루프 음원 생성.
• 게임 데모 프로토타이핑: 아이디어 구상 단계에서 빠르게 사운드 트랙을 구성하여 테스트.
• 유튜브 및 방송 효과음 제작: 8비트 특유의 팝아트 감성 음원을 만들어 영상 BGM으로 활용.

⚠️ 제한 사항 (Limitations)

• 단일 pattern (16-Step): 본 미니 에디터는 16스텝(1바) 루프 믹싱에 최적화되어 있으며 수십 분 분량의 복잡한 곡 구조 다중 트랙 타임라인은 지원하지 않습니다.
• 브라우저 오디오 정책: 첫 재생 시 브라우저 보안 정책에 따라 사용자 클릭 동작이 필요합니다.

🕹️ 사용 방법 (How to Use)

1. 상단 master 마스터 조절: PLAY 버튼을 눌러 재생을 시작하고 BPM 슬라이더나 TAP TEMPO 버튼으로 곡의 속도를 설정합니다.
2. 장르 프리셋 선택: GENRE PRESETS 드롭다운에서 마음에 드는 예제 패턴을 선택해 음악 구조를 파악합니다.
3. 스텝 시퀀서 편집: 1채널부터 8채널까지 16개의 스텝 버튼을 클릭하여 원하는 노트를 켜거나 끕니다.
4. 사운드 미세 조율: 채널별 파형 드롭다운, 볼륨(VOL), 팬(PAN), 피치(PITCH) 슬라이더를 조작해 풍부한 믹스를 만듭니다.
5. WAV 내보내기: 만족스러운 루프가 완성되면 REC & EXPORT WAV 버튼을 클릭하여 완성된 음원 파일을 다운로드합니다.

❓ FAQ (자주 묻는 질문)

Q1. 본 에디터로 생성한 WAV 음원을 상업적 게임 프로젝트에 무료로 사용할 수 있나요? A1. 네, 게임 사운드트랙 8채널 미니 루프 믹서에서 합성하고 추출한 모든 WAV 오디오 파일은 저작권 제한 없이 상업용 게임 개발, 영상 제작, 로열티 프리 프로젝트에 자유롭게 사용할 수 있습니다.

Q2. 작곡한 사운드트랙 프로젝트를 나중에 다시 편집할 수 있나요? A2. 네, 하단 유틸리티 바의 SAVE JSON 버튼을 눌러 프로젝트 파일(.json)로 저장해 두면 언제든지 LOAD JSON으로 불러와 재편집할 수 있습니다. 또한 LOCAL SAVE 버튼을 눌러 브라우저 자체에 보관할 수도 있습니다.

Q3. WAV 파일 다운로드 시 소리가 끊기거나 튀는 현상이 발생하나요? A3. 아닙니다. 본 에디터는 실시간 녹음 방식이 아닌 브라우저 내 오디오 버퍼 오프라인 렌더링(OfflineAudioContext) 기술을 사용하여 CPU 부하와 관계없이 무소음의 깨끗한 고음질 표준 16-bit PCM WAV 파일로 내보냅니다.

실제로 할 수 있는 일

• 캔버스의 빈 공간을 클릭해 색상별 포스트잇 노트를 추가합니다.
• 노트를 드래그해 원하는 위치로 옮기고 탭하거나 클릭해 내용을 고칩니다.
• 정렬 버튼으로 흩어진 노트를 읽기 쉬운 격자로 배치합니다.
• 각 노트의 줄을 체크박스 TODO 목록으로 바꾸거나 전체 노트를 마크다운으로 실시간 확인합니다.
• 마크다운 내용을 즉시 클립보드로 복사하고 현재 화면은 PNG로 저장합니다.
• 노트와 좌표를 JSON 파일로 저장한 뒤 다시 불러오면 같은 위치에 복원합니다.

이런 사용자에게 알맞아요

가볍게 생각을 쌓는 사람

회의 중 떠오른 항목, 공부 주제, 여행 준비처럼 순서가 정해지지 않은 생각을 화면에 먼저 펼칠 수 있습니다. 이후 정렬하거나 TODO 목록으로 바꾸면 다음 행동을 정하기 편합니다.

마크다운으로 옮겨 적는 사람

작성 중인 노트를 오른쪽 미리보기에서 바로 확인하고 복사해 README, 메모 앱, 이슈 문서에 붙여 넣을 수 있습니다.

사용 방법

1. 캔버스의 빈 곳을 클릭하거나 터치합니다.
2. 내용을 쓰고 포스트잇 색상을 고른 뒤 완료를 누릅니다.
3. 노트를 드래그해 배치하고 필요하면 정렬을 누릅니다.
4. TODO 만들기 또는 마크다운 미리보기를 복사합니다.
5. 다음에도 이어서 쓰려면 노트 저장으로 JSON을 내려받고 불러오기를 사용합니다.

제한 사항

데이터는 현재 브라우저의 로컬 저장소에도 보관됩니다. 다른 기기나 브라우저로 옮길 때는 JSON 저장 파일을 사용해야 합니다. PNG 저장은 현재 보드의 노트와 텍스트를 담으며 긴 문장은 노트 안에서 일부만 보일 수 있습니다.

FAQ

노트를 저장하지 않아도 남나요?

현재 브라우저에서는 자동 저장됩니다. 기기를 바꾸거나 백업하려면 JSON으로 저장하세요.

불러오면 포스트잇 위치도 복원되나요?

네. JSON 파일에는 노트 내용, 색상, 좌표가 함께 저장되어 원래 위치에 배치됩니다.

마크다운은 어디에 복사되나요?

복사 버튼을 누르면 오른쪽 미리보기의 마크다운 전체가 시스템 클립보드에 복사됩니다.

모바일에서도 노트를 옮길 수 있나요?

네. 터치로 노트를 만들고 드래그해 이동할 수 있도록 구성했습니다.

별도의 복잡한 3D 그래픽 프로그램 설치나 그래픽 카드 가속 프로그램 구축 없이 웹 브라우저의 Three.js WebGL 파이프라인을 활용하여 누구나 즉시 입체 모델을 만들고 3D 프린터(STL) 또는 메타버스 웹 엔진(GLB, OBJ) 표준 파일로 추출할 수 있습니다.

🌟 핵심 기능 및 변환 모드

• 🌊 높이 맵 변환 (Displacement Heightmap)
  • 이미지의 명암(Luminance) 데이터나 알파 채널을 픽셀별 Z축 고도 정보로 해석하여 정교한 3D 입체 리프 매시(Relief Mesh)를 생성합니다.
  • 돌출 깊이, 메시 세분화 해상도(32~256 단계), 재질 명암 등을 실시간으로 미세 조작할 수 있습니다.
• 🧊 픽셀 복셀 변환 (Pixel Voxel Grid)
  • 로고, 아크릴 그래픽, 픽셀 아트 이미지를 3D 입체 블록(육면체, 원기둥, 구체) 구조로 차원 재구성합니다.
  • 블록 간격, 인스턴싱 높이 배율, 기본 틴트 색상을 조합하여 복셀 아트워크를 완성합니다.
• 🖼️ 3D 프린팅용 리소페인 (Lithophane Generator)
  • 빛의 투과율을 계산하여 어두운 영역은 두껍게, 밝은 영역은 얇게 조절된 3D 프린터 전용 리소페인 패널을 제작합니다.
  • 0.4mm~8mm 범위 내에서 최소/최대 두께 지정 및 곡면(Arc) 3D 패널 형상을 제공합니다.
• 🏷️ 돌출 베벨 모드 (Extruded Contour)
  • 베벨(Bevel) 모서리 곡면 옵션과 함몰 깊이를 적용하여 3D 엠블럼, 코인, 메달 형태의 입체물을 신속하게 조형합니다.
• 🎛️ PBR 셰이딩 & 스튜디오 조명
  • Standard, Physical 반투명, Toon 카툰 셰이딩, Normal 법선 맵 모드를 지원합니다.
  • 스튜디오 3점 조명, 사이버펑크 네온, 태양광, 석양 조명 프리셋으로 입체감을 극대화할 수 있습니다.
• 📂 3D 파일 포맷 내보내기
  • GLB / GLTF: 웹, AR/VR, 메타버스 및 게임 엔진 연동용 바이너리 3D 모델
  • STL: 3D 프린팅 슬라이서(Cura, PrusaSlicer 등) 전용 메시
  • OBJ: 범용 3D 그래픽 편집기용 웨이브프론트 메시
  • PNG 스크린샷: 투명/어두운 배경의 고화질 렌더링 결과물 캡처

🎯 대상 사용자 & 주요 활용 사례

• 3D 프린팅 입문자 및 메이커: 가족 사진이나 회화 이미지를 3D 프린팅용 STL 리소페인 등부전으로 제작하고 3D 프린터로 즉시 출력할 수 있습니다.
• 웹 3D 및 게임 개발자: 로고나 아이콘 2D 이미지를 GLB 파일로 변환하여 Three.js 기반 웹사이트나 씬에 바로 적용할 수 있습니다.
• 디자이너 및 크리에이터: 평면 일러스트레이션을 픽셀 복셀이나 지형 높이 맵으로 재해석하여 독창적인 3D 아트워크 그래픽으로 확장할 수 있습니다.

⚠️ 사용 시 제한 사항

• 입력 이미지의 밝기와 대비에 따라 3D 입체 음영 깊이가 달라지므로 피사체와 배경의 구분이 명확한 고대비 이미지를 사용하는 것이 효과적입니다.
• 브라우저의 클라이언트 메모리 한계를 고려하여 메시 해상도는 최대 256x256 세분화 단계로 최적화되어 있습니다.

🛠️ 사용 방법

1. 이미지 업로드: 좌측 패널의 드롭존에 이미지 파일(JPG, PNG, WEBP)을 드래그하거나 샘플 프리셋 버튼을 클릭합니다.
2. 이미지 전처리: 밝기, 대비, 스무딩 슬라이더를 조정하거나 높이 맵 반전 옵션을 켜서 음영 기준을 정돈합니다.
3. 변환 모드 선택: 우측 상단 탭에서 높이 맵, 픽셀 복셀, 리소페인, 돌출 베벨 중 목적에 맞는 3D 형상을 선택합니다.
4. 재질 및 조명 조정: PBR 재질 속성(금속성, 거칠기)과 조명 프리셋을 선택하여 뷰포트에서 마우스 drag/touch로 3D 모델을 회전 및 관찰합니다.
5. 파일 내보내기: 하단의 GLB, STL, OBJ, PNG 버튼을 클릭하여 원하는 파일 형식을 내 컴퓨터로 다운로드합니다.

💡 자주 묻는 질문 (FAQ)

Q. 변환된 3D 모델을 3D 프린터에서 바로 출력할 수 있나요? A. 네, 가능합니다. 리소페인 또는 높이 맵 모드로 이미지를 입체 변환한 뒤 우측 패널의 STL 내보내기 버튼을 눌러 다운로드하면 Cura나 PrusaSlicer 같은 3D 프린터 슬라이서 소프트웨어에서 바로 불러와 3D 인쇄를 진행할 수 있습니다.

Q. 이미지 업로드 시 개인 데이터가 서버로 전송되나요? A. 전혀 전송되지 않습니다. Img2Three Studio의 모든 이미지 연산과 WebGL 3D 지오메트리 생성 파이프라인은 100% 사용자의 웹 브라우저 로컬 환경(Client-Side)에서 처리됩니다.

Q. 웹/모바일 환경에서 터치 조작이 지원되나요? A. 네, 완벽히 지원됩니다. 스마트폰이나 태블릿 터치 스크린에서도 한 손가락 드래그로 3D 회전, 두 손가락 핀치 줌과 이동 조작이 가능하며 양쪽 반응형 슬라이딩 패널을 통해 좁은 모바일 화면에서도 쾌적하게 작업할 수 있습니다.

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

🌟 주요 핵심 기능

• 🎨 수채화 & 드로잉 감성 아트 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)

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

💬 자주 묻는 질문 (FAQ)

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

실제로 할 수 있는 일

• 7x7 보드에서 폰의 전진, 나이트의 L자 점프, 룩의 직선, 비숍의 대각선, 퀸의 전방위 이동, 킹의 인접 한 칸 이동을 선택할 수 있습니다.
• 매 턴 현재 위치에서 이동 가능한 기물 한 장이 무작위로 제시되며 폰을 포함한 모든 기물은 같은 확률로 등장합니다.
• 이동 가능한 칸은 즉시 빛나므로 체스 규칙을 처음 복습할 때도 경로를 확인하기 쉽습니다.
• 적에게 한 번 잡히면 원정이 종료됩니다. 모든 적은 이동을 막는 장애물이며 적이 있는 칸으로 이동하거나 적을 제거할 수 없습니다.
• 관문을 통과할수록 적 수가 늘어납니다. 1스테이지의 폰 적에서 시작해 나이트, 룩, 비숍, 퀸, 킹 적이 단계적으로 등장하며 점수, 현재 시간, 스테이지를 한 화면에서 볼 수 있습니다.
• 최고 점수, 가장 긴 플레이 시간, 최고 도달 스테이지는 이 브라우저의 로컬 저장소에 보관됩니다.

이런 사용자에게 맞습니다

체스 이동을 게임으로 익히고 싶은 사람

기물 이동을 외우는 대신, 위험을 피해 탈출 경로를 고르는 상황에서 반복해 볼 수 있습니다. 한 판이 짧아 쉬는 시간에 전략 퍼즐을 즐기려는 사용자에게도 적합합니다.

활용 사례

• 나이트와 비숍의 이동 차이를 직접 비교하는 체스 입문 연습
• 스마트폰에서 가볍게 즐기는 한 손 전략 퍼즐
• 점수보다 오래 살아남는 경로를 찾는 개인 기록 도전

사용 방법

1. 화면 아래에서 사용할 기물을 고릅니다.
2. 보드에서 빛나는 칸을 눌러 이동합니다.
3. 적이 다가오기 전에 별의 문 ✦에 도착합니다.
4. 스테이지가 끝나면 더 많은 적이 등장합니다. 기록은 같은 브라우저에 자동 저장됩니다.

제한 사항

기록은 계정이나 서버에 동기화되지 않으며 브라우저 사이트 데이터를 지우면 함께 삭제될 수 있습니다. 적은 자신의 체스 이동 규칙으로 플레이어를 추적하며 적 폰은 상하좌우 한 칸 이동하고 대각선 한 칸에서만 공격합니다. 정식 체스 대국이나 온라인 대전 기능은 제공하지 않습니다.

FAQ

체스 규칙을 잘 몰라도 할 수 있나요?

네. 기물을 누르면 지금 이동할 수 있는 칸이 빛나기 때문에 보면서 익힐 수 있습니다.

최고 기록은 어디에 저장되나요?

현재 사용 중인 기기의 브라우저 로컬 저장소에 저장됩니다.

모바일에서도 플레이할 수 있나요?

네. 작은 화면에서도 보드와 기물 선택 버튼이 눌리도록 반응형으로 구성했습니다.

적을 잡을 수 있나요?

아니요. 적이 있는 칸과 그 뒤쪽 경로는 이동할 수 없습니다. 다른 이동 기물이나 경로를 선택해 피해 가야 합니다.

실제 제공 기능

절차적 재질 레시피

• Volcanic Lava, Cyber Circuit, Brushed Metal, Weathered Stone, Arcane Crystal, Organic Cell 레시피를 제공합니다.
• 새 시드로 표면 패턴을 바꾸고 패턴 크기·세부도·색 대비를 실시간으로 조절합니다.
• 업로드나 서버 처리 없이 브라우저 캔버스에서 생성합니다.

PBR 채널별 맵 생성

• Base Color, Normal, Roughness, Metallic, Emissive, Opacity 여섯 채널을 생성합니다.
• Normal Strength, Roughness, Metallic, Emission 값은 해당 맵에 직접 반영됩니다.
• Map Inspector에서 채널을 전환해 결과를 확인합니다.

PNG 내보내기

• 현재 보고 있는 맵 하나를 PNG로 저장할 수 있습니다.
• 체크한 채널만 PBR 맵 세트로 각각 내려받을 수 있습니다.
• 256, 512, 1024px 해상도를 선택할 수 있습니다.

대상 사용자와 활용 사례

게임 프로토타입용 표면 재질이 필요한 개발자, PBR 맵 조합을 빠르게 검토하는 3D 아티스트, UI와 이펙트용 질감 소스를 만드는 디자이너에게 적합합니다. 예를 들어 Cyber Circuit 레시피에서 발광을 높인 뒤 Base Color와 Emissive 맵을 저장해 SF 패널의 초기 재질 소스로 사용할 수 있습니다.

사용 방법

1. MATERIAL RECIPES에서 원하는 표면 레시피를 선택합니다.
2. LIVE GENERATOR의 슬라이더와 NEW SEED로 표면 특성을 조절합니다.
3. MAP INSPECTOR에서 채널별 결과를 확인하고 해상도를 선택합니다.
4. EXPORT CURRENT MAP으로 한 장을 저장하거나 EXPORT CHANNELS를 고른 뒤 EXPORT MAP SET으로 여러 PNG를 저장합니다.

제한 사항

생성 결과는 절차적 텍스처이며 사진 기반 재질 스캔이나 모델별 UV 언래핑 기능은 제공하지 않습니다. PNG 파일은 채널별로 저장되며 Unity, Unreal, Blender 같은 도구별 임포트 설정은 사용 환경에서 지정해야 합니다.

FAQ

Normal 맵도 실제로 생성되나요?

네. 같은 표면 높이 변화에서 계산한 방향 정보를 RGB Normal 맵으로 생성합니다.

PBR 맵을 한 번에 받을 수 있나요?

네. EXPORT CHANNELS에서 원하는 채널을 체크한 뒤 EXPORT MAP SET을 누르면 각 채널 PNG가 개별 다운로드됩니다.

생성한 텍스처는 상업 프로젝트에 사용할 수 있나요?

앱이 생성한 결과물의 사용 조건은 프로젝트의 라이선스 정책에 따라 검토해야 합니다. 이 앱은 라이선스 판정을 제공하지 않습니다.

실제 제공 기능

텍스처 라이브러리와 재질 비교

• Checker, Tech Grid, Energy Stripes, Lava Noise 기본 텍스처를 제공합니다.
• PNG·JPEG·WebP 이미지를 텍스처 라이브러리에 추가할 수 있습니다.
• 선택한 텍스처는 GLSL의 uTexture sampler에 연결되어 중앙 3D 프리뷰에 즉시 반영됩니다.

3D 메시와 사용자 텍스처 등록

• 업로드 전에도 Sphere, Torus Knot, Teapot 데모 메시를 골라 재질과 아틀라스 베이크를 바로 확인할 수 있습니다.
• GLB 또는 자체 리소스를 포함한 GLTF 파일을 업로드해 프리뷰 모델을 교체할 수 있습니다.
• PNG·JPEG·WebP 파일을 업로드해 현재 세션의 텍스처 라이브러리에 추가할 수 있습니다.

GLSL 셰이더 템플릿 편집

• Energy Flow, Molten Core, Ion Plasma 프래그먼트 셰이더 파일을 기본 템플릿으로 제공합니다.
• 앱 안의 GLSL 편집기에 코드를 직접 수정하고 APPLY SHADER로 현재 3D 메시에서 바로 확인할 수 있습니다.
• .frag 또는 .glsl 파일을 불러오고 편집한 프래그먼트를 다시 .frag 파일로 저장할 수 있습니다.
• 셰이더의 uniform float과 색상용 uniform vec3를 읽어 라이브 파라미터 UI를 자동으로 구성합니다.
• // @param uName label="표시명" min=0 max=1 step=0.01 주석으로 슬라이더의 이름과 범위를 지정할 수 있습니다.

실시간 라이브 조절과 프리뷰

• 애니메이션 속도, 발광량, 웨이브 왜곡, 패턴 크기를 슬라이더로 조절합니다.
• 재생·일시정지·루프 처음으로 이동과 CALM, PULSE, GLITCH 프리셋을 지원합니다.
• 프리뷰를 마우스 또는 터치로 드래그해 구도를 바꿔 볼 수 있으며 좁은 화면에서는 패널이 세로로 재배치됩니다.

PNG 아틀라스와 JSON 메타데이터 내보내기

• 프레임 크기(128·256·512px), 행·열, 루프 시간을 지정해 애니메이션 프레임을 한 장의 PNG 아틀라스로 생성합니다.
• 각 셀은 루프 구간에 균등하게 배치되므로 스프라이트 애니메이션 프로토타입에 사용할 수 있습니다.
• JSON 파일에는 프레임 크기·개수·행·열·루프 시간·FPS·현재 파라미터가 기록됩니다.

대상 사용자와 활용 사례

게임 UI·이펙트의 색과 움직임 방향을 검토하는 프론트엔드 개발자, 프로토타이핑 중인 게임 개발자, 재질 스타일을 협의하는 디자이너에게 적합합니다. 예를 들어 능력 아이콘의 발광 강도나 SF 배경의 흐름 속도를 회의 중 빠르게 비교한 뒤 4×2 프레임 PNG 아틀라스와 JSON 정보를 내려받아 프로토타입에 연결하거나 프리뷰를 공유할 수 있습니다.

사용 방법

1. 왼쪽 ATLAS LIBRARY에서 재질 타일을 선택합니다.
2. 오른쪽 LIVE PARAMETERS 슬라이더 또는 프리셋으로 결과를 조절합니다.
3. 중앙 프리뷰를 드래그해 구도를 확인하고 PAUSE 또는 다시 시작 버튼으로 시간을 제어합니다.
4. ATLAS BAKE & EXPORT에서 프레임 크기, 열, 행, 루프 시간을 설정합니다.
5. BAKE ATLAS PNG를 눌러 텍스처 아틀라스를 저장하고 JSON META로 프레임 정보를 함께 저장합니다.

제한 사항

이 앱은 메시 기반 GLSL 재질 템플릿을 브라우저에서 렌더링·베이크하는 도구이며 HLSL 코드와 Unity·Unreal 전용 프로젝트 파일 내보내기는 제공하지 않습니다. 텍스처를 쓰려는 프래그먼트는 uniform sampler2D uTexture와 varying vec2 vUv를 선언해야 하며 외부 텍스처나 별도 바이너리에 의존하는 GLTF는 파일 하나로 구성된 GLB보다 불러오기 실패 가능성이 높습니다.

FAQ

모바일에서도 조작할 수 있나요?

네. 슬라이더와 버튼은 터치 입력을 지원하며 프리뷰는 손가락 드래그로 이동할 수 있습니다.

내 3D 모델과 재질 템플릿을 등록할 수 있나요?

네. 왼쪽 라이브러리에서 GLB/GLTF 메시와 JSON 재질 템플릿을 선택해 등록할 수 있습니다. JSON 템플릿의 예시 파일도 앱에서 내려받을 수 있습니다.

조절한 재질을 아틀라스 PNG로 저장할 수 있나요?

네. ATLAS BAKE & EXPORT에서 프레임 구성을 정한 뒤 BAKE ATLAS PNG를 누르면 한 장의 스프라이트 아틀라스로 저장됩니다. 상단 PREVIEW 버튼은 현재 프리뷰 한 장만 저장합니다.

JSON 파일에는 무엇이 들어가나요?

프레임 크기, 행·열, 프레임 개수, 루프 시간, FPS, 선택한 템플릿과 현재 파라미터가 들어갑니다. 편집한 셰이더 코드는 별도의 .frag 다운로드 버튼으로 저장합니다.

🌟 주요 기능 및 특장점

1. 모듈형 멀티레이어 맵 편집

• 4단계 표준 레이어 구성: 배경(Background), 지형(Terrain Ground), 오브젝트/장식(Objects/Deco), 충돌 메타 데이터(Collision) 레이어로 분류하여 맵을 체계적으로 구조화할 수 있습니다.
• 레이어 제어 기능: 각 레이어별 투명도(Opacity) 조절, 표시/숨김 토글 및 활성 레이어 즉시 전환을 지원합니다.

2. 다양하고 자유로운 그리드 & 타일 세트

• 타일 사이즈 변경: 8×8, 16×16, 32×32, 64×64 픽셀 단위로 타일 규격을 자율 설정할 수 있습니다.
• 3가지 기본 테마 타일셋: 자연/지형(Overworld & Nature), 성/던전(Castle & Dungeon), 사이버펑크/SF(Cyberpunk & Sci-Fi) 픽셀 아트 타일을 제공합니다.
• 커스텀 픽셀 타일 생성기: 픽셀 페인트 모달을 열어 나만의 타일을 직접 도트 그래픽으로 그리고 타일셋 팔레트에 추가할 수 있습니다.

3. 강력한 5가지 드로잉 툴 & 히스토리

• 브러시(Brush): 단일 타일 칠하기 [단축키: B]
• 직사각형 박스(Rect): 영역 드래그 칠하기 [단축키: R]
• 버킷 채우기(Fill): 플러드 필 타일 채우기 [단축키: F]
• 지우개(Eraser): 배치된 타일 제거 [단축키: E]
• 스포이드(Picker): 캔버스 타일 선택 추출 [단축키: I]
• 실행 취소/다시 실행(Undo/Redo): 최대 30단계의 히스토리 스택 [단축키: Ctrl+Z / Ctrl+Y]

4. 3가지 내보내기 (JSON / PNG / SVG) & 즉시 복사

• 📄 JSON Export: Tiled 맵 에디터 호환 2D 매트릭스 배열, 타일 레이어 구성, 충돌 메타 데이터 및 타일 속성 포함. (원클릭 클립보드 복사 & file download 지원)
• 🖼️ PNG Export: 캔버스에 그려진 타일맵 전체를 고해상도 픽셀 이미지로 렌더링하여 PNG 다운로드 및 클립보드 복사 제공.
• 📐 SVG Export: 타일 구성 요소와 그리드 라인을 벡터 스케일 XML 구조로 내보내어 확대/축소 시 손실 없는 일러스트 데이터로 복사 및 저장.

🎯 대상 사용자 & 활용 사례

대상 사용자

• 2D 인디 게임 개발자: Unity, Godot, Phaser 3, PixiJS, HTML5 Canvas 기반 게임의 타일 맵을 빠르게 기획하고 매트릭스 데이터를 추출하려는 개발자.
• 레벨 디자이너: 게임 스테이지 레이아웃과 벽/충돌(Collision) 구역을 시각적으로 빠르게 스케치하고 프로토타이핑하려는 디자이너.
• 픽셀 아티스트 & 학생: 도트 타일맵 조합 연습 및 2D 게임 개발 리소스 제작 학습자.

활용 사례

• RPG 게임의 탑다운(Top-down) 마을, 던전 맵 레이아웃 구성
• 사이버펑크 2D 플랫포머 게임의 레이저/벽면 충돌 데이터 생성
• 웹 게임 및 모바일 2D 게임용 JSON 매트릭스 데이터 즉시 클립보드 복사 후 코드 삽입

📖 사용 방법

1. 맵 크기 및 타일 규격 설정: 상단 툴바에서 TILE SIZE(8/16/32/64px) 및 MAP COLS/ROWS를 입력하고 RESIZE MAP 버튼을 누릅니다.
2. 타일셋 및 타일 선택: 좌측 패널(01 // TILESET PALETTE)에서 테마를 선택하고 사용할 타일을 클릭합니다.
3. 레이어 지정: 우측 패널(04 // LAYER MANAGER)에서 타일을 그릴 레이어(Ground, Objects, Collision 등)를 선택합니다.
4. 캔버스에 그리기: 캔버스 뷰포트에서 마우스 드래그로 타일을 그립니다. (단축키 B, R, F, E 활용)
5. 데이터 익스포트 & 복사: 우측 하단(05 // DATA EXPORT)에서 JSON, PNG, SVG 카드 중 원하는 포맷의 📋 COPY 또는 💾 DOWNLOAD 버튼을 클릭합니다.

❓ 자주 묻는 질문 (FAQ)

Q1. 익스포트한 JSON 데이터를 유니티(Unity)나 고도(Godot) 엔진에서 사용할 수 있나요?

네, 내보낸 JSON 파일에는 맵 차원(width, height), 타일 크기(tilewidth, tileheight) 그리고 각 레이어의 1차원/2차원 타일 ID 매트릭스 배열이 포함되어 있어 파싱 스크립트로 바로 불러올 수 있습니다.

Q2. 캔버스에 직접 그린 타일을 복사하거나 이미지로 저장할 수 있나요?

네, 📋 COPY PNG 또는 📋 COPY SVG 버튼을 누르면 캔버스 렌더링 결과물이 시스템 클립보드에 이미지/XML 데이터로 저장되어 카카오톡, 피그마(Figma), 깃허브 등에 바로 붙여넣을 수 있습니다.

Q3. 인터넷 연결이 없는 상태에서도 타일맵 에디터를 사용할 수 있나요?

네, 본 앱은 100% 클라이언트 사이드 HTML5 Canvas 및 Pure JavaScript로 동작하므로 브라우저 로딩 후 네트워크 연결 없이 완전하게 작업할 수 있습니다.

⚠️ 제한 사항

• 생성 가능한 최대 맵 크기는 브라우저 메모리와 렌더링 성능을 고려하여 64×64 타일 이내를 권장합니다.
• 클립보드 PNG 복사 기능은 일부 구형 브라우저 환경에서 보안 정책에 의해 text-fallback으로 전환될 수 있습니다.

🌟 핵심 주요 기능

• 🎨 모던 엠보싱 클레이모피즘 3D UI:
  • 입체감 넘치는 3D 엠보싱 클레이 버튼과 가독성 높은 인터페이스로 쾌적한 작업 환경을 제공합니다.
• ⚡ 실시간 라이브 파라미터 조절:
  • 네온 글로우 (Neon Glow): 글로우 반경 및 발광 색상을 실시간으로 세밀하게 조정합니다.
  • 3D 입체 깊이 (Emboss Depth): 폰트에 클레이 스타일의 입체 음영 shadow depth를 부여합니다.
  • 사이버 스캔라인 & 크로매틱 애버레이션: 레트로 아케이드 및 사이버펑크 감성의 스캔라인과 RGB 분리 연출을 적용할 수 있습니다.
  • 듀얼 컬러 그라데이션: 폰트 전면에 2가지 색상의 리니어 그라데이션 필을 적용합니다.
  • 외곽선(Stroke) 및 자간/행간: 폰트 사이즈, 글자 여백(Padding), 자간(Char Spacing)을 유연하게 제어합니다.
• 🎮 5가지 인게임 UI 실시간 애니메이션 프리뷰:
  • RPG 데미지 & 크리티컬 팝업: 피격 수치가 상단으로 튀어 오르는 바운스 및 페이드 애니메이션 시뮬레이션
  • 아케이드 마퀴 스크롤: 전광판처럼 수평으로 매끄럽게 흐르는 폰트 가독성 테스트
  • 사이버 대화창 타이프라이터: 텍스트가 한 글자씩 타이핑되는 RPG NPC 대화 렌더링
  • 콤보 히트 카운터: 타격 콤보에 맞춰 박자감 있게 확대/축소 펄스하는 3D 비트 연출
  • 경고 알림 펄스: 시스템 에러/경고 문구의 밝기 점멸 시뮬레이션
• 📁 폰트 로딩 및 문자셋 설정:
  • 로컬 컴퓨터의 TTF, OTF, WOFF 폰트 파일을 Drag & Drop 또는 버튼 클릭으로 업로드하여 즉시 비트맵 폰트로 변환할 수 있습니다.
  • ASCII 기본 문자셋, 숫자/기호 전용, 한글 주요 글자셋 지원.
• 💾 다재다능한 폰트 내보내기 & 코드 연동:
  • BMFont (.fnt): AngelCode BMFont 표준 명세 포맷 지원.
  • JSON Metrics: 폰트 메트릭스 데이터를 JSON 구조체로 다운로드.
  • PNG Texture Atlas: 알파 투명도가 포함된 고해상도 비트맵 아틀라스 이미지 저장.
  • 엔진 코드 생성기: Phaser 3, PixiJS, HTML5 Canvas2D, Unity TextMeshPro용 연동 예제 코드를 바로 복사할 수 있습니다.

🎯 대상 사용자 및 활용 사례

• 2D 인디 게임 개발자: Unity, Godot, Phaser, PixiJS 등의 엔진에서 사전에 렌더링된 비트맵 폰트 리소스가 필요할 때
• 게임 UI/UX 디자이너: 게이밍 텍스트 폰트에 사이버펑크 네온, 스캔라인, 엠보싱 3D 입체 효과를 적용하고 실시간 모션을 검증할 때
• 웹 게임 및 모바일 게임 에디터: 캔버스 기반 텍스트 렌더링 성능 최적화를 위해 비트맵 아틀라스를 통합 제작하고자 할 때

⚠️ 제한 사항

• 완전한 클라이언트 사이드 브라우저 렌더링 방식으로 동작하므로 사용자의 기기 사양이나 4K 이상 극단적인 고해상도 아틀라스 생성 시 약간의 프레임 연산 지연이 발생할 수 있습니다.
• 외부 상용 TTF/OTF 폰트 파일을 업로드하여 제작할 경우 해당 폰트의 폰트 라이선스(상업적 이용 가능 여부 등)를 반드시 사전에 확인하셔야 합니다.

🛠️ 사용 방법 (How to Use)

1. 폰트 선택 또는 업로드: 상단 서체 선택 드롭다운에서 기본 폰트를 선택하거나 폰트 파일 업로드 버튼을 통해 로컬 TTF/OTF 파일 등록
2. 파라미터 라이브 조절: 좌측 파라미터 패널에서 폰트 크기, 자간, 네온 글로우, 외곽선, 3D 입체 깊이, 그라데이션 색상 설정
3. 아틀라스 & 워크벤치 확인: 중앙 중앙 상단 탭을 통해 비트맵 텍스처 아틀라스 배치 상태와 실시간 텍스트 입력을 점검
4. 인게임 애니메이션 프리뷰: 인게임 애니메이션 프리뷰 탭을 선택하고 우측 패널에서 데미지 팝업, 타이프라이터 대화창 모드를 실행하여 실제 게임 내 연출 확인
5. 내보내기 (Export): 오른쪽 내보내기 영역에서 PNG 아틀라스 저장, BMFont (.fnt) 또는 JSON 메트릭스 다운로드 버튼 클릭

❓ 자주 묻는 질문 (FAQ)

Q1. 생성된 비트맵 폰트(.fnt)를 유니티(Unity)나 페이저(Phaser)에서 바로 사용할 수 있나요?
네, 다운로드한 BMFont .fnt 파일과 PNG 아틀라스 이미지는 AngelCode BMFont 표준 규격을 준수하므로 Unity TextMeshPro, Phaser 3, PixiJS, Cocos2d 등 대다수의 주요 2D 게임 엔진에 별도 변환 없이 즉시 로드하여 사용할 수 있습니다.

Q2. 한글이나 숫지만 포함된 전용 비트맵 아틀라스도 생성이 가능한가요?
네, 좌측 폰트 & 문자셋 메뉴에서 ‘숫자 및 기호 전용’ 또는 ‘한글 자주 쓰는 글자’를 선택하여 원하는 문자 집합만 콤팩트하게 아틀라스에 패킹할 수 있습니다.

Q3. 내가 업로드한 폰트 파일이나 생성한 이미지 폰트 데이터가 서버로 전송되나요?
아니요, 본 도구는 모든 폰트 렌더링과 이미지 변환 과정이 사용자의 웹 브라우저 내부(Client-side)에서만 처리되므로 중요한 개별 폰트 파일이나 그래픽 자산이 외부 서버로 업로드되지 않아 안심하고 사용하실 수 있습니다.

실제로 할 수 있는 작업

세 가지 장면 레이아웃

감정의 간격, 속도 전환, 일상 대화, 반전 연출 프리셋으로 다른 컷의 호흡을 비교할 수 있습니다. 빈 컷을 드래그하면 캔버스 안에서 위치를 옮길 수 있고 오른쪽 아래의 핸들을 드래그하면 컷의 가로·세로 크기도 조절할 수 있습니다. 이미지를 컷 안에서 드래그하면 가로와 세로 방향 모두 구도를 바꾸고 이미지 탭의 크기 슬라이더로 확대할 수 있습니다. 이미지 파일을 불러오면 선택한 컷부터 차례로 채워지며 배경 톤은 PAPER, NIGHT, MINT 중에서 바꿀 수 있습니다.

말풍선 배치와 스타일 편집

말풍선을 클릭하면 대사, 크기, 스타일을 조정할 수 있습니다. 기본·생각·외침·속삭임 형태를 지원하며 캔버스 안에서 드래그하거나 방향키로 조금씩 이동할 수 있습니다. 새 말풍선을 추가하거나 필요 없는 말풍선을 삭제하는 것도 가능합니다.

이런 사용자에게 적합합니다

• 웹툰 콘티 단계에서 대사와 시선 흐름을 점검하려는 창작자
• 작가에게 전달할 말풍선 배치 참고안을 만드는 편집자
• 세로형 만화의 컷 간 간격과 대사 밀도를 연습하려는 입문자

활용 사례

완성한 작화나 참고 이미지를 각 빈 컷에 배치한 뒤 감정 장면에서는 인물 얼굴을 가리지 않는 위치에 둥근 말풍선을 둘 수 있습니다. 추격 장면에서는 외침 형태를 배치해 속도를 강조하고 일상 대화 장면에서는 여러 말풍선의 간격을 비교하면서 읽는 순서를 다듬을 수 있습니다.

사용 방법

1. 왼쪽에서 빈 레이아웃과 배경 톤을 선택합니다.
2. 이미지를 넣을 컷의 중앙 +를 누르거나 컷을 선택한 뒤 오른쪽 아래 핸들을 드래그해 필요한 크기로 조절합니다.
3. +를 누르면 바로 열리는 파일 선택창 또는 이미지 불러오기로 파일을 선택합니다.
4. 말풍선 탭에서 종류를 고르고 새 말풍선을 추가해 대사와 스타일을 수정합니다.
5. 선택한 말풍선을 드래그하거나 방향키로 옮긴 뒤 PNG 또는 WEBP 형식과 1×·2×·4× 해상도를 선택해 현재 편집 상태를 저장합니다.

제한 사항

이 도구는 레이아웃 시안용으로 제공되는 예시 장면을 편집합니다. 원본 작화 이미지 업로드, 여러 페이지 관리, 공동 편집 기능은 포함하지 않습니다.

FAQ

말풍선 위치는 어떻게 옮기나요?

말풍선을 클릭한 뒤 캔버스 안에서 드래그하세요. 선택된 말풍선은 방향키로도 미세하게 이동할 수 있습니다.

말풍선 모양과 대사를 바꿀 수 있나요?

가능합니다. 오른쪽 패널에서 기본, 생각, 외침 형태를 고르고 대사와 스타일을 수정하세요.

완성한 웹툰 레이아웃을 저장할 수 있나요?

상단에서 PNG 또는 WEBP 형식을 고른 뒤 내보내기 버튼을 누르면 현재 컷, 이미지 구도, 말풍선 배치를 이미지 파일로 저장합니다.

내 웹툰 이미지를 올려서 편집할 수 있나요?

현재 버전은 제공되는 예시 장면과 말풍선 레이아웃 편집에 집중하며 사용자 이미지 업로드는 지원하지 않습니다.

COUNT//LOUD 글자 수 세기는 글을 입력하거나 붙여 넣는 즉시 글자 수와 단어 수를 계산하는 무료 웹 도구입니다. 자기소개서, SNS 문구, 블로그 초안, 과제처럼 분량 제한이 있는 글에서 공백 포함 여부와 목표 글자 수를 바꿔 가며 현재 분량을 확인할 수 있습니다. 분석은 브라우저 안에서 즉시 갱신되며 결과와 원문은 텍스트 파일로 내려받을 수 있습니다.

무엇을 분석하나요?

주요 기능

• 공백 포함/제외 글자 수, 단어 수, 문장 수, 줄 수, UTF-8 용량 실시간 계산
• 목표 글자 수와 읽기 속도를 조절하는 라이브 파라미터
• 지정한 키워드의 등장 횟수 분석
• 목표 달성률을 보여 주는 프로그레스 미터
• 원문과 통계를 담은 UTF-8 텍스트 리포트 다운로드

이런 경우에 유용합니다

• 지원서·소개글처럼 공백 포함 또는 제외 기준을 맞춰야 할 때
• 게시 전 제목, 캡션, 공지문, 블로그 문단의 길이를 빠르게 점검할 때
• 긴 초안의 예상 읽기 시간을 현재 독자 속도에 맞춰 가늠할 때
• 특정 표현이 글 안에 얼마나 반복되는지 키워드 빈도로 확인할 때

계산 기준과 알아둘 점

글자 수는 이모지처럼 여러 코드 포인트로 이루어진 문자도 가능한 한 한 글자로 처리합니다. 단어 수는 공백을 기준으로 계산하고 읽기 시간은 설정한 분당 글자 수를 기준으로 한 예상치입니다. 따라서 문서 편집기나 제출처의 자체 집계 규칙과는 결과가 조금 다를 수 있으므로 최종 제출 전에는 해당 서비스의 기준도 함께 확인하세요.

사용 방법

1. 편집 영역에 텍스트를 입력하거나 붙여 넣습니다.
2. 오른쪽 패널에서 계산 기준과 목표치를 조절합니다.
3. 필요하면 키워드를 입력해 등장 횟수를 확인합니다.
4. 결과 리포트 다운로드 버튼으로 분석 결과와 원문을 파일로 저장합니다.

자주 묻는 질문 (FAQ)

공백을 제외한 글자 수도 볼 수 있나요?

네. 오른쪽의 공백 포함 글자 수 스위치를 끄면 큰 글자 수 카드와 목표 달성률이 공백 제외 기준으로 즉시 바뀝니다. 아래 상세 영역에서는 공백 제외 글자 수도 항상 별도로 확인할 수 있습니다.

글자 수 결과를 파일로 저장할 수 있나요?

네. 결과 리포트 다운로드를 누르면 표시 글자 수, 단어·문장·줄 수, 읽기 시간, UTF-8 용량, 키워드 횟수와 원문을 포함한 UTF-8 TXT 파일을 받을 수 있습니다.

키워드 분석은 어떻게 하나요?

찾을 키워드 입력칸에 단어나 문구를 적으면 입력한 텍스트 안의 동일한 문자열 등장 횟수가 실시간으로 표시됩니다. 대소문자나 띄어쓰기까지 같은 문자열을 찾는 단순 빈도 계산입니다.

웹 디자이너, UI/UX 디자이너, 프론트엔드 개발자가 모바일 화면(320px)부터 울트라와이드 모니터(2560px)까지 끊김 없이 자연스럽게 비율이 조절되는 Fluid Typography를 수학적 clamp(min, preferred, max) 공식으로 자동 계산하고 W3C Design Tokens JSON, CSS Custom Properties (:root), Tailwind CSS Config, SCSS 변수로 원클릭 즉시 상호 변환할 수 있습니다.

🌟 주요 핵심 기능

• 🌌 SF 코스믹 파스텔 스페이스 디자인 시스템:
  • 네뷸라 글로우, 파스텔 핑크, 민트, 라벤더, 사이버 파스텔 블루 조화의 고품격 글래스모피즘 HUD 인터페이스를 제공합니다.
  • 마우스 및 터치 반응형 캔버스 입자 성운(Nebula Starfield) 백그라운드 효과를 탑재하여 몰입감을 증대시켰습니다.
• 📐 수학적 CSS clamp() Fluid Scale 자동 산출 Engine:
  • 최소/최대 뷰포트 너비(px)와 최소/최대 Base 폰트 크기를 설정하면 slope(기울기)와 yAxisIntersection(절편) 수식을 정밀 계산하여 CSS clamp() 코드를 생성합니다.
  • Golden Ratio (1.618), Perfect Fourth (1.333), Augmented Fourth (1.414), Major Third (1.250) 등 Modular Scale 비율에 맞춰 H1부터 Micro 캡션까지 한 번에 산출합니다.
• ⚡ JSON & 데이터 즉시 상호 변환 (Bi-Directional JSON Tokens):
  • 생성된 타이포그래피 스케일을 JSON Design Tokens, CSS :root, Tailwind CSS Config, SCSS로 즉시 전환 및 원클릭 복사할 수 있습니다.
  • 사용자가 가지고 있는 JSON 토큰 코드를 인풋 창에 붙여넣으면 즉시 실시간 라이브 파싱하여 계산기 슬라이더와 시범 렌더링에 즉각 적용됩니다.
• 👁️ 가독성 높은 구역 렌더링 & WCAG 접근성 검수 (High-Readability Render):
  • Hero Title 구역, 에디토리얼 아티클 본문 구역, Cosmic UI 성운 카드 컴포넌트 구역 등 가독성이 최우선 고려된 다양한 실시간 뷰포트를 제공합니다.
  • contenteditable 기능을 통해 시범 구역 내 글자를 클릭하여 사용자가 원하는 임의의 문구로 즉시 편집할 수 있습니다.
  • WCAG 2.1 명암비(Contrast Ratio) 및 AAA/AA 접근성 등급 평가기를 탑재하였습니다.
• 📱 모바일 최적화 뷰포트 & 하단 터치 네비게이션:
  • 모바일 디바이스 환경을 완벽히 고려한 하단 터치 탭 바(📐 Scale, ⚡ JSON, 👁️ Specimen, 🎨 Themes)를 탑재하였습니다.
  • Mobile(375px), Phablet(428px), Tablet(768px), Laptop(1024px), Desktop(1440px) 퀵 시뮬레이션 프리셋 지원.
• 🔊 Web Audio API 오디오 SFX & 사운드 토글:
  • 조절 슬라이더 및 버튼 클릭 시 잔잔한 우주 톤 오디오 효과음이 출력되며 1-클릭 Audio Mute/Unmute 기능을 지원합니다.

🛠️ 사용 방법 (How to Use)

1. 뷰포트 및 베이스 크기 설정 (Scale Calc):
   • 좌측 컨트롤 패널의 📐 Scale Calc 탭에서 모바일 최소 너비(e.g., 375px), 데스크톱 최대 너비(e.g., 1440px) 및 Base Font Size를 설정하세요.
   • Modular Scale Ratio (Major 3rd, Perfect 4th, Golden Ratio 등) 칩을 눌러 스케일 확대 비중을 조절합니다.
2. 글꼴 조합 및 본문 메트릭스 조정:
   • 구글 폰트(Syne, Orbitron, Space Grotesk, Comfortaa, Noto Sans KR 등) 조합과 자간, 행간을 자유롭게 미세 튜닝하세요.
3. JSON & 디자인 토큰 변환 및 내보내기:
   • ⚡ JSON Data 탭으로 이동하여 생성된 JSON 디자인 토큰, CSS :root 변수, Tailwind 설정 코드 중 원하는 양식을 선택 후 📋 COPY 버튼을 눌러 프로젝트에 적용하세요.
   • 보유 중인 JSON 토큰이 있다면 편집창에 넣고 ⚡ Apply JSON Tokens to Engine을 클릭해 라이브 적용할 수 있습니다.
4. 가독성 구역 및 실시간 문구 편집:
   • 메인 대시보드 캔버스 내 문구를 직접 클릭하여 브랜드 텍스트를 입력하고 상단 뷰포트 크기 프리셋 버튼(375px ~ Fullwidth)을 이용해 다양한 화면 폭에서의 반응형 폰트 변화를 확인하세요.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

주요 기능

• 코드 입력 즉시 반영되는 WebGL 실시간 프리뷰
• 터치와 마우스 포인터 좌표를 셰이더 유니폼으로 전달
• 애니메이션 속도, 글로우, 픽셀 스케일, 컬러 팔레트 제어
• 클립보드 즉시 복사, PNG 스냅샷, 전체 화면 프리뷰
• 데스크톱 3열 대시보드부터 모바일 세로 레이아웃까지 반응형 지원

사용 방법

1. 왼쪽 편집기에 GLSL 코드를 입력하고 Ctrl/⌘ + Enter를 눌러 컴파일합니다.
2. 오른쪽 컨트롤 덱에서 효과의 움직임과 색을 조절합니다.
3. 프리뷰를 터치하거나 마우스로 움직여 u_pointer 반응을 확인합니다.
4. 완성한 코드는 COPY SHADER CODE 버튼으로 바로 복사할 수 있습니다.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

총 6개의 다리와 각 다리당 3개의 서보 관절(Coxa, Femur, Tibia)로 구성된 18자유도(18-DoF) 다족 보행 로봇의 구동 역학 및 역운동학(Inverse Kinematics)을 실시간 60 FPS로 정밀 계산하고 시각화합니다.

🌟 핵심 주요 기능

• 🌿 시크하고 차분한 모스 그린 & 테라코타 자연 톤 (Moss Green & Terracotta Earth Tones):
  • 깊고 안정감 있는 모스 다크 슬레이트 배경과 은은하게 빛나는 세이지 그린, 따뜻한 차분함의 테라코타 버거티 인디케이터가 조화를 이루는 프리미엄 웹 인터페이스.
  • 마우스 회전/패닝/줌 오비탈 뷰포트, 다크 글래스모피즘 오버레이 텔레메트리 HUD 제공.
• 🕷️ 18자유도(18-DoF) 정밀 역운동학(IK) & 순운동학(FK) 엔진:
  • 발끝 목표 좌표 $(x, y, z)$ 입력 시 Hip Swivel(Coxa $\theta_1$), Thigh(Femur $\theta_2$), Knee(Tibia $\theta_3$) 관절 각도를 즉시 역산출.
  • 바디 중심의 6자유도(6-DoF) 자세 변형(Height Z, Pitch, Roll, Yaw)을 적용하여 발이 땅에 고정된 상태에서의 유연한 몸체 틸팅 및 회전 구현.
• 🏃 3가지 다족 보행 알고리즘 (Gait Patterns):
  • 삼각 보행 (Tripod Gait): 3개 다리가 전진하고 3개 다리가 지지하여 고속 보행 구현.
  • 파도 보행 (Ripple Gait): 4~5개 다리가 접지하여 중간 속도 및 안정성 보장.
  • 웨이브 보행 (Wave Gait): 1개 다리만 순차적으로 이동하여 5개 다리가 균형을 유지하는 최대 안정 보행.
  • 바디 웨이브 & 댄스 모드 (Dance Mode): 감성적인 모션 곡선 기반 보행/동작 시연.
• ⛰️ 실시간 능동 지형 적응 (Adaptive Terrain IK):
  • 평지(Flat), 불규칙 암석 지형(Rough Heightmap), 계단형 장애물(Steps), 경사면(Incline Slope) 지형 생성기 탑재.
  • 로봇의 각 발이 지형의 센싱 고도를 실시간 감지하여 높낮이를 자동 보정하는 능동 지형 적응 IK 기능 지원.
• ⚖️ 질량 중심(CoM) & 지지 다각형(Support Polygon) 디버거:
  • 현재 접지된 발들로 형성되는 다각형 영역과 질량 중심(Center of Mass)의 정사영 위치를 계산하여 보행 중 전복 위험(STABLE / UNSTABLE) 지수 실시간 표시.
• 🎬 키프레임 모션 시퀀서 & 서보 코드 내보내기:
  • 타임라인에서 원하는 로봇 포즈를 키프레임으로 수집하고 애니메이션 시퀀스로 재생.
  • 디자인된 동작 데이터를 JSON, Arduino C++ (PCA9685 PWM 서보 제어 코드), Python (PyBullet / ROS 연동 코드) 형식으로 즉시 복사 및 다운로드.

🎮 프리셋 라이브러리

1. ⚙️ 삼각 보행 (Tripod Gait): 표준 주행 및 빠르게 지형을 돌파하는 주력 보행 mode.
2. 🌊 파도 보행 (Ripple Gait): 부드럽고 잔물결 같은 움직임의 안정보행.
3. 🚶 웨이브 보행 (Wave Gait): 불규칙한 환경에서도 전복되지 않는 고안정성 순차 보행.
4. ⛰️ 험지 등반 & 지형 적응: 지형의 고저차에 능동 대응하며 장애물을 넘는 고지형 보행.
5. 🥷 저자세 은신 스탠스: 보차 높이를 35mm로 낮추고 폭을 넓혀 은신 탐색을 수행하는 포즈.
6. 💃 바디 틸트 & 웨이브 댄스: 몸체 틸팅과 다리 교차 동작을 보여주는 유연 모션.

사용 방법

1. 앱을 열고 화면에 표시된 초기 설정 또는 예시를 먼저 확인합니다.
2. 필요한 값·도구·조작 항목을 바꾸거나 입력해 현재 결과와 미리보기를 확인합니다.
3. 작업 목적에 맞는 설정을 선택한 뒤 앱에서 제공하는 결과 화면 또는 저장·내보내기 기능을 활용합니다.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

눈길을 사로잡는 [비비드 팝 아트 & 활기찬 프루티 컬러 (Vivid Pop Art & Fruity Colors)] 테마를 바탕으로 제작되었으며 5가지 프루티 스타일 테마 프리셋(수박 멜론, 오렌지 블래스트, 레몬 라이밍, 베리 크래시, 트로피컬 퀘스트)과 실시간 애니메이션 테스트 트리거, 데스크톱/모바일/태블릿 디바이스 해상도 실시간 뷰포트 전환, HTML/CSS/JSON 독립 코드 자동 생성 기능을 통합 제공합니다.

🌟 핵심 주요 기능

• 🎨 비비드 팝 아트 & 활기찬 프루티 컬러 디자인 시스템:
  • 수박 핑크(#FF2E93), 레몬 옐로우(#FFEA00), 라임 그린(#00E676), 탱저린 오렌지(#FF6D00), 사이언 네온(#00F0FF) 등의 감각적 컬러 팔레트.
  • 두꺼운 팝아트 검은 외곽선(Comic Outline)과 드롭 그림자(Pop Drop Shadow), 할프톤 도트 오버레이 패턴 및 코믹스 기울기(Skew) 스타일링.
• 🧩 풍부한 게임 전용 모듈형 컴포넌트 라이브러리:
  • 🏆 VS 매치 스코어 헤더: P1 vs P2 초상화, 플레이어 이름, 실시간 스코어 및 중앙 VS 뱃지.
  • 💖 프루티 HP/MP 스테이터스 바: 아바타 프레임, 레벨 뱃지, 애니메이션 체력 & 마나 게이지.
  • ⚡ 팝 아트 콤보 바운스 & 킬스트릭: 연속 히트 수치 및 비비드 멀티플라이어 뱃지.
  • ⏱️ 카운트다운 타이머 & 랭킹 리더보드: 매치 타이머 및 라이브 탑 5 순위 패널.
  • 🎒 스킬 쿨다운 슬롯 & 스코어 뱃지: 핫키 뱃지 포함 쿨다운 바 및 팝 스코어 알림.
• 🎛️ 실시간 라이브 파라미터 인스펙터:
  • 선택한 캔버스 컴포넌트의 타이틀, 스코어 수치, 게이지 %, 색상(배경, 포인트, 글자, 외곽선), 너비/높이, 외곽선 두께, 곡률(Border Radius), 그림자 오프셋, 코믹스 기울기(-20°~20°)를 1ms 실시간 반영.
  • 대기 펄스(Pulse), 유영(Floating), 팝 바운스(Bounce), 네온 글로우 등 모션 프리뷰 커스텀.
• 🎬 인터랙티브 애니메이션 테스트 & 실시간 게임 시뮬레이션:
  • +500 점수 획득, 피격 데미지(-15 HP), 콤보 +1, 레벨 업!, Victory 팝업 버튼 클릭으로 실제 게임 상황과 같은 애니메이션 및 과일/스타 파티클 팝 연출.
  • 라이브 시뮬레이션 모드: 실제 플레이 중인 게임처럼 UI 수치와 데미지 팝업이 실시간 가동되는 자동 연출 기능.
• 📱 반응형 뷰포트 & 멀티 디바이스 프레임:
  • 데스크톱(1280x720 16:9), 모바일 가로(844x390), 모바일 세로(390x844), 태블릿(1024x768) 해상도 프리셋 및 자유로운 캔버스 줌(50% ~ 150%).
• 📂 독립 에셋 내보내기 & CSS/JSON 코드 자동 생성:
  • HTML: 깨끗한 시맨틱 구조의 HUD 코드 추출.
  • CSS: 커스텀 변수(–pop-primary, –pop-shadow) 및 팝아트 키프레임 포함 스타일시트 생성.
  • JSON Layout: 레이아웃 데이터 보관 및 다른 프로젝트 연동.
  • PNG 캡처: 디자이너의 완성 UI 화면 스냅샷 저장.

🍉 5가지 프루티 테마 프리셋

1. 🍉 수박 멜론 파이트 (Watermelon Neon): 수박 핑크 & 레몬 옐로우 네온 대전 게임 HUD.
2. 🍊 오렌지 블래스트 1v1 (Tangerine Punch): 활기찬 오렌지 & 사이언 에너제틱 파이팅 UI.
3. 🍋 레몬-라이밍 스피드런 (Lemon Lime Run): 상큼한 비비드 라임 & 바이올렛 스피드런 카운터.
4. 🍇 베리 크래시 배틀로얄 (Berry Royale): 진한 베리 퍼플 & 팝 핑크 배틀로얄 랭킹 스코어.
5. 🍍 트로피컬 RPG 퀘스트 (Tropical Quest): 파인애플 골드 & 에메랄드 RPG 파티 스테이터스.

사용 방법

1. 앱을 열고 화면에 표시된 초기 설정 또는 예시를 먼저 확인합니다.
2. 필요한 값·도구·조작 항목을 바꾸거나 입력해 현재 결과와 미리보기를 확인합니다.
3. 작업 목적에 맞는 설정을 선택한 뒤 앱에서 제공하는 결과 화면 또는 저장·내보내기 기능을 활용합니다.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

슬레이트 블루와 깔끔한 화이트 톤으로 정돈된 [클린 앤 미니멀 라이트 모드 (Clean & Minimal)] UI 테마를 바탕으로 제작되었으며 멀티 레이어 Z-높이 입체 압출, 4가지 절벽/건물/자연/사이버 그래픽 타일셋, 실시간 조명 및 그림자 오버레이, 플레이어 캐릭터 탐색 워크 모드 및 JSON/PNG 데이터 내보내기를 원스톱으로 제공합니다.

🌟 핵심 주요 기능

• 📐 정교한 아이소메트릭 투영 엔진 & Z-높이 다층 스택 (3D Elevation Stacking):
  • 64x32px 정밀 아이소메트릭 그리드 투영 산술 및 스크린-투-그리드 역행렬 광선 감지.
  • Z=0 지면부터 Z=10 이상의 다단계 입체 스택을 형성하여 절벽, 성벽, 계단, 다리, 다층 건물을 손쉽게 구축할 수 있습니다.
  • 뒤에서 앞으로 겹침 현상(Z-fighting) 없이 완벽하게 렌더링되는 Painter’s Depth Sorting 알고리즘 적용.
• 🎨 클린 앤 미니멀 라이트 테마 UI & 유연한 반응형 이원화 인터페이스:
  • 모바일 터치 환경(1핑거 배치, 2핑거 팬/핀치 줌, 터치 Z-높이 조절바)과 데스크톱 마우스/키보드 단축키(S/P/E/B/X/I, Ctrl+Z, Shift+드래그)를 모두 고려한 유연한 뷰포트.
  • 슬레이트 스티치 스타일의 좌측 타일 팔레트 & 우측 조명/레이어 인스펙터 패널.
• 🛠️ 전문 레벨 디자이너 툴킷:
  • 배치 (Pencil): 선택한 타일을 지정한 좌표 및 Z-높이에 즉시 배치.
  • 높이 압출/돌출 (Extrude): 타일 위를 클릭 및 드래그하여 높이를 올리거나 내리는 3D 지형 편집.
  • 영역 채우기 (Box Fill): 사각형 입체 영역 전체를 특정 타일로 동시 채우기.
  • 스포이드 (Picker) & 지우개 (Eraser): 캔버스 타일 즉시 선택 및 정점 삭제.
• ☀️ 실시간 조명, 태양 각도 & 앰비언트 오클루전 그림자 연출:
  • 대낮(Daylight), 석양 노을(Golden Hour), 사이버펑크 네온(Neon Night), 새벽 안개(Dawn) 4가지 시간대 분위기 프리셋.
  • 태양 빛 각도(0°~360°)와 앰비언트 오클루전(AO) 입체 그림자 명암 실시간 조작.
• 🎮 인터랙티브 워크 탐색 모드 (Player Walk Test):
  • ‘워크 플레이’ 모드 전환 시 귀여운 아이소메트릭 아바타가 생성되어 레벨 위를 탐색.
  • 키보드 WASD / 방향키 조종 및 계단/높낮이 지형 자동 높이 감지.
• 📂 다양한 에셋 내보내기 & JSON/JS 코드 자동 생성:
  • 고해상도 PNG 스냅샷 다운로드.
  • JSON 맵 데이터 세이브/로드 (프로젝트 보관 및 엔진 연동).
  • HTML5 Canvas 렌더링 독립형 JS 코드 즉시 생성.

🏰 4가지 맵 프리셋 샘플

1. 🏰 중세 판타지 영주 성채: 수로 다리, 석조 이중 성벽, 지붕 기와와 화단 오아시스.
2. 🏙️ 미니멀 스마트 도시 블록: 유리 타워 건물, 콘크리트 인도와 도로.
3. 🚀 네온 사이버 우주 정거장: 메탈 레이저 통로, 파워 코어 및 하이테크 패널.
4. 🌿 공중 부유 아일랜드 하우스: 구름 위 부유섬, 원목 오두막과 정원 테이블.

사용 방법

1. 앱을 열고 화면에 표시된 초기 설정 또는 예시를 먼저 확인합니다.
2. 필요한 값·도구·조작 항목을 바꾸거나 입력해 현재 결과와 미리보기를 확인합니다.
3. 작업 목적에 맞는 설정을 선택한 뒤 앱에서 제공하는 결과 화면 또는 저장·내보내기 기능을 활용합니다.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

복잡한 게임 AI 구조를 노드 그래프 형태로 직접 디자인하고 오른쪽에 위치한 실시간 2D 게임 시뮬레이션 무대를 통해 NPC의 시야(FOV), 소음 반응, 추적 및 전투 의사결정을 실시간 60 FPS로 관찰할 수 있습니다.

🌟 핵심 주요 기능

• 🌇 감성적인 노을 카라멜 & 오렌지 웜 톤 디자인 (Sunset Caramel & Amber Warm Tone):
  • 깊고 따뜻한 카라멜 모카 다크 배경(#120b08)과 은은하게 빛나는 앰버 골드 및 오렌지 코랄 네온 라인이 조화를 이루는 프리미엄 UI/UX.
  • 마우스 휠 줌/팬, 터치 제스처, 베지에 곡선 노드 연결 와이어 및 활성화 상태 펄스 애니메이션 적용.
• 🌲 두 가지 AI 아키텍처 통합 지원 (Behavior Tree & FSM Dual Mode):
  • 행동 트리 (Behavior Tree): Root, Composite Nodes (Selector ?, Sequence →, Parallel ≡), Decorator/Inverter (!), Action 및 Condition 노드 실시간 평가 엔진 (SUCCESS, FAILURE, RUNNING, IDLE 컬러 노드 하이라이팅).
  • 유한 상태 머신 (FSM): State 카드, 전이 조건 트리거 (Transition Wires) 및 활성화 상태 Glowing Particle 파동 및 상태 전환 사운드 효과.
• 🎮 실시간 2D 게임 AI 시뮬레이션 스테이지 (2D Interactive AI Arena):
  • 경비병 / 몬스터 AI: 시야각(FOV Cone), 장애물 가림 레이캐스팅, 체력 바, 머리 위 실시간 행동 상태 말풍선 탑재.
  • 플레이어 캐릭터 (Player Pawn): 마우스/터치 드래그로 맵 위에서 직접 움직여 AI의 시야 포착 및 추적을 반응 테스트.
  • 소음 핑 (Sound Ping): 스테이지를 클릭하거나 버튼을 눌러 확장되는 음파 핑을 발생시켜 AI의 경계/수색 행동 유도.
• 📋 실시간 블랙보드 & 메모리 디버거 (Blackboard Inspector):
  • canSeePlayer, heardSound, playerDistance, aiHealth, aiAction 등 AI의 실시간 내부 판정 변수를 실시간 갱신 표로 확인.
  • 노드 선택 시 이름, 실행 액션, 검사 조건 변수를 즉시 수정 가능한 속성 패널 제공.
• 💾 프로젝트 데이터 및 JSON/코드 내보내기:
  • 디자인한 행동 트리 및 유한 상태 머신 그래프 구조를 클린 JSON 형식으로 즉시 복사하여 Unity(C#) 또는 Unreal Engine/Custom JS AI 엔진에 이식 가능.

🎨 4가지 풍부한 AI 프리셋 라이브러리

1. 🛡️ 경비병 AI (Guard Patrol & Chase BT): 순찰 경로 이동 중 소음 감지 시 수색, 시야 발견 시 추적 및 Melee 공격 수행.
2. 🐺 야생 늑대 습격 AI (Wolf Pack Hunter BT): 체력이 떨어지면 도망치고 기회가 오면 덮치는 야생 늑대 행동 트리.
3. ⚔️ 기사 경비병 유한 상태 머신 (Guard State Machine FSM): Patrol -> Alert -> Chase -> Attack -> Flee 상태 간 직관적인 전이 네트워크.
4. 🤖 채집 로봇 FSM (Gatherer Worker Bot FSM): 탐색 -> 채굴 -> 배터리 충전 자동화 순환 FSM.

사용 방법

1. 앱을 열고 화면에 표시된 초기 설정 또는 예시를 먼저 확인합니다.
2. 필요한 값·도구·조작 항목을 바꾸거나 입력해 현재 결과와 미리보기를 확인합니다.
3. 작업 목적에 맞는 설정을 선택한 뒤 앱에서 제공하는 결과 화면 또는 저장·내보내기 기능을 활용합니다.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

모든 시뮬레이션과 렌더링은 클라이언트 측 HTML5 Canvas 하드웨어 가속 기반으로 처리되어 외부 서버 업로드 없이 빠른 성능과 안전한 개발 환경을 선사합니다. 차분하고 눈이 편안한 세이지 그린 & 크림 라이트 UI 테마로 데스크톱과 모바일 디바이스 어디서나 유연하게 작업하실 수 있습니다.

🌟 핵심 주요 기능

• 🎨 20종의 테마별 파티클 템플릿 프리셋 (4개 범주):
  • 🌿 원소 & 자연: 🔥 화염 (Fire), 🐉 드래곤 브레스 (Dragon Breath), 💨 연기 (Smoke), 🌧️ 빗줄기 (Rain), ❄️ 눈송이 (Snowfall), 🌸 벚꽃 잎 (Cherry Blossoms), 🧪 독성 버블 (Toxic Bubbles), 🫧 수중 물방울 (Underwater Bubbles)
  • 🔮 마법 & 아케인: ✨ 마법 가루 (Magic Dust), 🔮 포탈 소용돌이 (Vortex), ⚡ 전기 아우라 (Electric), 💖 치유의 아우라 (Healing Hearts), 🛡️ 신성한 방패 (Holy Shield), 🌌 코스믹 은하 (Cosmic Galaxy)
  • ⚔️ 전투 & 액션: 💥 폭발 (Explosion), 🗡️ 검기 슬래시 (Slash Wave), ☄️ 운석 낙하 (Meteor Trail), 🩸 피스플래시 (Blood Splatter), 💥 충격파 링 (Shockwave Pulse)
  • 👾 레트로 & 축제: 👾 픽셀 분진 (Retro Pixel Dust), 🎆 불꽃놀이 (Fireworks)
• 🎛️ 정밀하고 유연한 파티클 매개변수 제어:
  • 방사체(Emitter) 설정: 초당 방사 입자 수(Rate), 최대 입자 수, 최소/최대 수명, 방사체 모양(점, 원형, 직사각형, 선분), 영역 크기 설정.
  • 속도 & 물리(Motion & Physics): 방사 각도, 퍼짐 각도, 최소/최대 초기 속도, X/Y 중력, 방사 가속도(Radial), 접선 가속도(Tangential), 난류(Turbulence) 조작.
  • Visual & Color: 시작/종료 크기, 회전 속도 및 무작위 변위, 시작/종료 RGB Color Picker, 알파 투명도 제어.
  • 렌더링 모드: 10가지 입자 모양 (원형, 사각형, 별형, 반짝이, 도넛 링, 구름, 벚꽃잎, 하트, 다이아몬드, 물방울) 및 4가지 Blend Mode (lighter 발광, source-over 기본, screen, multiply), 발광 블러(Glow Blur) 효과 지원.
• 🖼️ 스프라이트 시트 (Sprite Sheet PNG) 내보내기:
  • 4x4 (16프레임), 6x6 (36프레임), 8x8 (64프레임) 등의 다양한 프레임 격자 배치 지원.
  • 프레임 당 32px, 64px, 128px, 256px 해상도 및 캡처 FPS 지정.
  • 알파 투명도(Alpha Channel)가 완벽 보존된 PNG 다운로드 기능 제공 (Unity, Godot, Unreal, Phaser, PixiJS 등 주요 게임 엔진 완벽 호환).
• 💾 프로젝트 파일 저장 & 불러오기 (JSON):
  • 현재 구성된 파티클 수치와 색상 옵션을 JSON 세이브 파일로 로컬 저장.
  • 기존 세이브 파일을 드래그 앤 드롭하거나 파일 선택으로 불러와 연속 작업 가능.
• 📱 모바일 & 데스크톱 반응형 뷰포트:
  • 캔버스 뷰포트 내 마우스/터치 드래그로 방사체 위치를 자유롭게 이동.
  • 터치 디바이스 호환성 및 다크/크림/세이지/체커보드 투명 배경 가이드 뷰 전환.

🛠️ 사용 방법 (How to Use)

1. 프리셋 선택 또는 신규 제작:
   • 상단 헤더의 ‘프리셋 (20종)’ 드롭다운에서 원하는 카테고리의 이펙트(예: 검기 슬래시, 드래곤 브레스, 치유의 아우라 등)를 선택하여 시작해봅니다.
2. 파티클 파라미터 조작:
   • 우측(모바일은 하단) 인스펙터 패널의 탭 메뉴를 통해 파티클 수치(속도, 중력, 크기, 색상, 입자 모양 등)를 슬라이더로 실시간 조정합니다.
3. 캔버스 상호작용 및 테스트:
   • 캔버스 위를 마우스로 드래그하거나 터치하여 방사체의 위치를 이동시켜 봅니다.
   • 상단 툴바의 ‘버스트 발사’ 버튼이나 캔버스 클릭을 통해 순간 폭발 파티클을 테스트합니다.
4. 스프라이트 시트 출력:
   • 상단 헤더의 ‘시트 Export’ 버튼을 클릭합니다.
   • 팝업 모달에서 원하는 프레임 격자(예: 6x6)와 프레임 해상도를 지정한 후 ‘PNG 파일로 내보내기’를 누르면 알파 투명 배경의 스프라이트 시트를 저장할 수 있습니다.
5. 프로젝트 저장:
   • 언제든 ‘저장’ 버튼을 통해 설정값을 JSON 파일로 내보내거나 ‘불러오기’로 작업 내용을 복구할 수 있습니다.

💬 자주 묻는 질문 (FAQ)

• Q1. 생성된 스프라이트 시트는 어떤 게임 엔진에서 사용할 수 있나요?
  • A. 내보내진 PNG 파일은 표준 32비트 RGBA 투명 배경 스프라이트 시트입니다. Unity, Godot Engine, Unreal Engine, Cocos2d, Phaser.js, Pixi.js, GameMaker 등 스프라이트 시트 애니메이션을 지원하는 모든 2D/3D 게임 엔진에서 즉시 활용할 수 있습니다.
• Q2. 발광 효과(Glow Blur)는 스프라이트 시트에도 정상 적용되나요?
  • A. 네! Canvas 2D 하드웨어 블렌딩 모드(lighter)와 shadowBlur 설정이 각 프레임에 픽셀 단위로 정확히 렌더링되어 투명 PNG 파일에 그대로 반영됩니다.
• Q3. 모바일 기기에서도 원활하게 동작하나요?
  • A. 본 에디터는 모바일 웹 브라우저 환경을 고려하여 반응형 터치 이벤트 제어 및 가벼운 렌더링 루프로 구현되었습니다. 스마트폰이나 태블릿에서도 자유롭게 파티클을 튜닝하고 내보낼 수 있습니다.

복잡한 3D 그래픽 엔진 없이 웹 브라우저 상에서 실시간 2D 광원(Point Light, Spotlight)을 자유롭게 드래그하여 이동시키고 직사각형, 원, 자유 다각형, 직선 벽 형태의 가림막 오브젝트를 직접 그려 동적인 실시간 그림자(Dynamic Shadows)와 부드러운 펜엄브라(Soft Penumbra) 투과 연출을 감상할 수 있습니다.

🌟 핵심 주요 기능

• 🎨 수채화 & 드로잉 터치 감성 디자인 테마 (Watercolor & Sketch Touch Theme):
  • 캔버스 종이 질감(Paper Texture Grain) 오버레이와 따스한 아날로그 파스텔 톤 팔레트(노을 앰버, 수채화 코랄, 라벤더, 세이지 민트, 레몬 햇살).
  • 아날로그 연필 스케치 테두리와 유리질감 플로팅 컨트롤 패널이 어우러져 한 편의 감성 일러스트 화실에 들어온 듯한 경험을 제공합니다.
• 💡 실시간 2D 레이캐스팅 광원 엔진 (2D Dynamic Raycasting Engine):
  • 포인트 라이트(360° Point Light) & 스포트라이트(Cone Spotlight) 도달 거리(Radius), 광량(Intensity), 확산 범위(Spread Angle) 조절.
  • 숨쉬기 펄스(Breathing Pulse), 촛불 요동(Candle Flicker), 360° 무한 회전(Spotlight Sweep) 동적 애니메이션 모드 지원.
  • 가림막 정점(Vertices) 추적 알고리즘으로 동적 시시각각 변하는 2D 가시성 다각형(Visibility Polygon) 및 부드러운 그림자(Soft Shadow) 60 FPS 실시간 렌더링.
• 🧱 인터랙티브 가림막 (Obstacle) 그리기 시스템:
  • 사각형, 원형, 자유 다각형(Polygon), 직선 벽(Segment Wall) 드로잉.
  • 배치된 요소의 이동, 회전, 불투명도 조절, 그림자 투과(Cast Shadow) 토글 및 복제/삭제 기능.
• 📂 드래그 앤 드롭 파일 로딩 & 이미지 가림막:
  • 캔버스 위에 배경 이미지(Floorplan, 실루엣 아트)나 이미지 가림막 마스크를 드래그 앤 드롭하여 로드.
  • 프로젝트 저장 파일(.json)을 드롭하여 이전에 작업하던 광원 레이아웃을 즉시 복원.
• 🎵 Web Audio 기반 인터랙티브 사운드스케이프 (Generative Soundscape):
  • 광원의 위치, 밝기, 이동 터치에 반응하는 실시간 펜타토닉 음향 조율.
  • 은은한 종이 질감의 앰비언트 노이즈와 따스한 드론 삼화음(Triad Synth Pad)이 시각적 연출과 완벽하게 동기화됩니다.
• 🖼️ 고해상도 에셋 내보내기 & 프로젝트 저장:
  • 완성 컴포짓 이미지, 광원 맵만(Light Map), 그림자 마스크(Shadow Mask), 가림막 알파 선택 내보내기.
  • 1x / 2K(2x) / 4K(4x) 고해상도 PNG 다운로드 및 클립보드 복사.
  • 전체 광원 및 가림막 좌표 데이터를 포함하는 .json 프로젝트 파일 내보내기/불러오기.

🎨 8가지 감성 프리셋 라이브러리

1. 🌇 노을빛 수채화 아틀리에: 아치창 너머로 쏟아지는 따스한 석양 빛과 보랏빛 그림자.
2. 🕯️ 따스한 촛불 서재: 책장 사이로 흔들리는 은은한 촛불의 아늑한 잔상.
3. 🌙 달빛 수목원 온실: 몬스테라 잎사귀 사이를 비추는 실버 블루 달빛 스포트라이트.
4. 🌆 네온 파스텔 몽환 거리: 비 젖은 아스팔트에 반사되는 시안 & 핑크 네온 광원.
5. 💎 프리즘 크리스탈 연구실: 결정체 다각형을 통해 분산되는 고품질 굴절 광선.
6. 🏮 해안가 등대 탐조등: 밤바다 암초 사이를 360° 무한 회전하며 비추는 등대불 빔.
7. 🎭 그림자 극장 실루엣: 또렷하고 명확한 그림자 극장 인형극 연출.
8. 🎶 추상 유체 라이트 심포니: 잔잔한 앰비언트 음악과 함께 맥동하는 빛의 오케스트라.

사용 방법

1. 앱을 열고 화면에 표시된 초기 설정 또는 예시를 먼저 확인합니다.
2. 필요한 값·도구·조작 항목을 바꾸거나 입력해 현재 결과와 미리보기를 확인합니다.
3. 작업 목적에 맞는 설정을 선택한 뒤 앱에서 제공하는 결과 화면 또는 저장·내보내기 기능을 활용합니다.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

별도의 다운로드 없이 PC 및 모바일 웹 브라우저에서 즉시 플레이할 수 있습니다.

🎯 개편된 핵심 아케이드 슈팅 요소

• 💥 바이러스 적군 능동 사격 (Enemy Bullet-Hell AI):
  • 유체 바이러스들은 주기적으로 플레이어 터렛을 향해 독성 산성 탄막(Spore Bullets)을 발사합니다.
  • 플레이어는 A/D 키 또는 터치 패드로 탄막을 잽싸게 회피하면서 사격해야 합니다.
• 🌌 1.5초 무중력 공중 저글링 파동 (Zero-G Air-Juggle Pulse):
  • 중력 반전이 영구 지속되어 저절로 소각되던 구조를 철폐했습니다.
  • Spacebar 발동 시 1.5초간 바이러스들이 공중에 동결 부유하는 무중력 파동이 발동하며 공중에 뜬 적을 사격하면 AIR JUGGLE COMBO (2x ~ 5x) 점수가 부여됩니다.
• 🧪 무기 연계 & 결빙 파쇄 (Synergy Combat):
  • [2] 카라멜 분사기: 유체를 굳혀 카라멜 결정으로 만듭니다.
  • [1] 노을 광선: 결정화된 적을 사격하면 CRYSTAL SHATTER 파쇄 폭발이 일어납니다.
  • [3] 중력장 와류: 적 탄막과 바이러스를 빨아들입니다.
  • [4] 플라즈마 파동: 적 탄막을 일괄 소멸시키며 관통 타격을 가합니다.
• 👾 하이드라 탄막 보스 (Hydra Boss):
  • 5스테이지마다 3방향 엠버 탄막을 흩뿌리는 거대 하이드라 보스가 등장합니다.

🎮 조작법 (Controls)

💻 PC (키보드 & 마우스)

• 터렛 이동 & 탄막 회피: A / D 또는 ◀ / ▶ 방향키
• 조준 & 발사: 마우스 커서 이동 후 좌클릭 (Hold)
• 공중 저글링 중력 파동: 스페이스 바 (Spacebar) (에너지 50% 이상 소모)
• 무기 변경: 키보드 숫자키 1 / 2 / 3 / 4

📱 모바일 (터치 스크린)

• 이동 & 조준 사격: 화면 터치 및 드래그
• 공중 저글링 파동: 하단 중앙 🌌 공중 저글링 중력 파동 버튼 터치
• 무기 변경: 하단 무기 슬롯 탭

❓ 자주 묻는 질문 (FAQ)

Q1. 중력을 반전시켜 두면 저절로 승리하나요?
A1. 아닙니다! 중력 파동은 1.5초간 적을 공중에 띄우는 일시적 저글링 기술이며 바이러스들이 사방에서 독성 탄막을 사격하므로 탄막을 회피하며 직접 사격으로 박멸해야만 스테이지를 클리어할 수 있습니다.

Q2. 게임 기록이 브라우저를 닫아도 저장되나요?
A2. 네! gravity_fluid_shooter_ 로컬 저장 변수를 통해 최고 점수, 스테이지, 강화 내역이 브라우저 LocalStorage에 실시간 자동 저장됩니다.

사용 방법

1. 앱을 열고 화면에 표시된 초기 설정 또는 예시를 먼저 확인합니다.
2. 필요한 값·도구·조작 항목을 바꾸거나 입력해 현재 결과와 미리보기를 확인합니다.
3. 작업 목적에 맞는 설정을 선택한 뒤 앱에서 제공하는 결과 화면 또는 저장·내보내기 기능을 활용합니다.

동영상이나 음원 파일을 외부 서버에 의존하지 않고 0.1Hz ~ 20,000Hz 범위의 정밀한 정현파(Sine), 정방파(Square), 톱니바퀴파(Sawtooth), 삼각파(Triangle) 및 배음 고조파(Additive Harmonics) 신호를 사용자의 디바이스 상에서 실시간으로 인코딩하여 재생하고 무손실 WAV 오디오 파일로 즉시 렌더링하여 다운로드할 수 있습니다.

🌟 핵심 주요 기능:

1. 🎼 고정밀 주파수 컨트롤 & 배음 커스텀 합성기 (Additive Harmonics)
   • 초정밀 주파수 발신: 0.1Hz부터 20,000Hz까지 Coarse 슬라이더, Fine Tune(±0.01Hz) 및 직접 수치 입력으로 정밀 조율할 수 있습니다.
   • 음계 & 옥타브 프리셋: A4(440Hz), Verdi Pitch(432Hz), Solfeggio(528Hz), Sub-Bass(60Hz) 등 12음계 음높이와 옥타브 Shift(-2 ~ +2) 조절이 제공됩니다.
   • 고조파 배음 합성 (Additive Harmonics): 기본 파형 위에 1차부터 8차 배음(Harmonics) 비율을 자유롭게 믹싱하여 나만의 독특한 음색을 연출할 수 있습니다.
2. 🎛️ FM/AM 신디사이저 변조 & 스테이트 필터
   • FM 주파수 변조 (Frequency Modulation): Modulator Rate 및 Modulation Index/Depth를 조정하여 음색의 떨림이나 금속성 합성음(Metallic Synth Tone)을 구현합니다.
   • AM 진폭 변조 / 트레몰로 (Amplitude Modulation): 0.1Hz ~ 50Hz 트레몰로 효과로 리듬감 있는 펄스 오디오를 생성합니다.
   • State Variable Audio Filter: Lowpass, Highpass, Bandpass, Notch 필터와 Cutoff Frequency & Q Resonance 공명 계수를 실시간 제어합니다.
3. 🧠 바이노럴 비트 뇌파 유도 & 주파수 스위프 (Frequency Sweep)
   • 바이노럴 비트 (Binaural Beats): 좌/우 채널에 미세한 주파수 차이를 발생시켜 Alpha(10Hz), Beta(18Hz), Theta(6Hz), Delta(3Hz), Gamma(40Hz) 뇌파 동조 힐링 사운드를 재생합니다. (헤드폰 권장)
   • 주파수 스위프 램프 (Chirp Generator): 지정한 시작 Hz에서 종료 Hz까지 지정한 시간 동안 로그/선형 스위프 변환을 실행합니다.
4. 🎨 볼드 타이포그래피 & 수묵 그래픽 시각화 (Ink Visualizer)
   • 수묵 오실로스코프 (Oscilloscope): 시간 영역(Time Domain) 오디오 파형을 먹선 붓터치 스타일의 다이내믹 캔버스로 실시간 렌더링합니다.
   • 스펙트럼 분석기 (Spectrum Analyzer) & 리사주 위상 (Lissajous): 주파수 대역별 농담(濃淡)이 살아있는 수묵 먹기둥 및 위상 루프를 시각화합니다.
   • 파형 스냅샷 저장: 고화질 PNG 이미지로 시각화 캔버스를 즉시 저장할 수 있습니다.
5. 💾 무손실 오디오 WAV 파일 생성 & 다운로드
   • OfflineAudioContext 렌더링: 사용자가 조율한 오실레이터 파형, 변조, 필터 세팅을 바탕으로 3초~30초 분량의 고품질 48.0kHz/44.1kHz 16-bit PCM WAV 오디오 파일로 바운스하여 브라우저에서 바로 다운로드합니다.

💡 자주 묻는 질문 (FAQ)

Q. 오디오 오실레이터 소리가 나오지 않거나 끊길 때는 어떻게 하나요? A. 최신 모바일 브라우저나 데스크톱 브라우저는 미디어 오디오 자동 재생 제한 규칙이 적용됩니다. 화면 우측 상단의 ‘OSCILLATOR START’ 버튼을 클릭하면 AudioContext가 안전하게 활성화되며 소리가 재생됩니다.

Q. 다운로드한 WAV 오디오 파일은 무료로 사용할 수 있나요? A. 네, 100% 무료로 자유롭게 사용 가능합니다. 생성된 무손실 WAV 파일은 서버를 거치지 않고 사용자의 웹 브라우저 내부에서 실시간 인코딩 다운로드되므로 저작권 문제없이 사운드 디자이닝, 이펙터 테스팅, 음향 치료용으로 활용하실 수 있습니다.

Q. 바이노럴 비트 기능은 모바일 스피커로도 효과가 있나요? A. 바이노럴 비트는 좌측 귀와 우측 귀에 입력되는 주파수 차이를 입체적으로 뇌에서 인지하는 원리이므로 모바일 단독 스피커보다는 이어폰이나 헤드폰 착용을 권장합니다.

📊 파형 형식별 기술 사양 비교 (Technical Specifications)

사용 방법

1. 앱을 열고 화면에 표시된 초기 설정 또는 예시를 먼저 확인합니다.
2. 필요한 값·도구·조작 항목을 바꾸거나 입력해 현재 결과와 미리보기를 확인합니다.
3. 작업 목적에 맞는 설정을 선택한 뒤 앱에서 제공하는 결과 화면 또는 저장·내보내기 기능을 활용합니다.

영화 장르별 보색/유사색/삼각 조화 커스텀 생성은 물론, 색상의 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)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

복잡하고 난해했던 정규표현식 패턴을 흐름도(AST Flow Node) 캔버스로 즉시 시각화해주며 실시간 하이라이팅 및 캡처 그룹 분해, 드래그 앤 드롭 텍스트 로딩 그리고 추출된 매칭 데이터를 JSON, CSV, JavaScript, Python, PHP, Go 코드로 단 한 번의 클릭으로 자동 변환해 줍니다.

🎨 주요 특징 (Key Features)

• 🌌 몽환적인 투명 세미 글래스모피즘 테마 (Semi-Glassmorphism UI):
  • 깊이감 있는 우주 다크 배경(Backdrop-blur: 20px)과 네온 바이올렛/시안 가이드 라인
  • 실시간 별빛 파티클 캔버스 배경과 유연하게 반응하는 미래지향적 인터페이스
• 🌐 실시간 캔버스 AST 노드 다이어그램 (Regex Syntax Tree):
  • 정규표현식 구문을 자동 분석하여 Start ➔ Capture Group ➔ Tokens / Charsets ➔ Quantifier ➔ End 로 연결되는 대화형 노드 흐름도 렌더링
  • 캔버스 마우스/터치 드래그 이동(Pan), 스크롤/버튼 확대 축소(Zoom 25%~300%), 고화질 PNG 캔버스 스냅샷 다운로드 기능
• 🔍 실시간 매칭 & 캡처 그룹 하이라이터 (Live Matcher & Capture Visualizer):
  • 입력하는 즉시 그룹 0(전체 매치), 그룹 1, 그룹 2 및 이름 있는 캡처 그룹($<name>)에 색상별 고유 네온 하이라이팅 적용
  • .txt, .json, .log, .csv 등 로컬 파일을 텍스트 영역으로 드래그 앤 드롭(Drag & Drop)하여 즉시 로드
  • 매칭(Match) 모드와 실시간 문자열 치환(Replace) 모드 전환 지원
• ⚡ 데이터 & 코드 즉시 변환 스튜디오 (Instant Data Converter):
  • JSON 데이터: 매칭 위치, 캡처 그룹, Named Group 정보가 포함된 구조화된 JSON 배열 실시간 생성
  • CSV 데이터: 엑셀 및 데이터 분석용 CSV 표 형식 변환 및 다운로드
  • 다국어 코드 추출: JavaScript (matchAll), Python (re.finditer), PHP (preg_match_all), Go 코드 자동 생성 및 즉시 복사
• 📚 대화형 치트시트 & 프리셋 라이브러리:
  • 이메일, URL, 전화번호, 날짜, HEX 색상, IPv4, HTML 태그, 서버 로그 등 다채로운 실무 프리셋 원클릭 로드
  • 문자 클래스, 수량자, 앵커, 그룹 토큰 클릭 시 정규식 입력창 위치에 직관적 자동 삽입

🕹️ 사용 방법 (How to Use)

1. 패턴 입력 또는 프리셋 선택: 우측 상단 드롭다운에서 이메일, URL, HTML 태그 등 프리셋을 고르거나 상단 정규식 입력창에 패턴을 직접 작성합니다. (g, i, m, s, u, y 플래그 선택 가능)
2. 캔버스 다이어그램 확인: 상단 캔버스 영역에서 입력한 정규표현식의 노드 흐름도를 확인하고 마우스 드래그 및 줌 제어로 구문을 한눈에 파악하세요.
3. 테스트 데이터 로드: 테스트 텍스트 박스에 검증하고 싶은 문자열을 입력하거나 로컬 텍스트 파일을 드래그 앤 드롭 합니다.
4. 캡처 분석 & 코드 변환: 하단 캡처 그룹 분해 카드와 변환 탭(JSON / CSV / JS / Python)에서 결과 데이터를 복사하거나 파일로 다운로드합니다.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

사용자의 오디오 파일(.mp3, .wav 등) 업로드는 물론, 음원이 없어도 즉시 감상할 수 있는 내장 SF 코스믹 우주 앰비언스 신시사이저 및 실시간 마이크(Live Mic) 입력을 모두 지원하며 주파수(FFT) 및 타임도메인 파형 데이터에 반응하여 실시간으로 펄스하는 환상적인 우주 비주얼을 선사합니다.

🎨 주요 특징 (Key Features)

• 🌌 SF 코스믹 파스텔 스페이스 디자인 테마:
  • 파스텔 핑크(#ff9ebb), 파스텔 바이올렛(#c099ff), 오로라 시안(#80f3ff)이 빚어내는 몽환적인 우주 다크 모드
  • 깊이감 있는 글래스모피즘(Glassmorphism) 블러 UI 패널 및 HUD 실시간 메트릭 오버레이
• 🎵 Web Audio API 멀티 오디오 소스 연동:
  • ✨ 코스믹 신시사이저 모드: C Major Pentatonic / Space Drone / Supernova Pulse 등 3가지 내장 우주 앰비언스 멜로디 자동 생성
  • 📁 오디오 파일 모드: 로컬 오디오 파일 선택 및 Drag & Drop 지원, 실시간 재생 제어
  • 🎙️ 마이크 스트림 모드: 라이브 마이크 입력을 분석하여 사용자의 목소리 및 외부 음향에 반응하는 실시간 렌더링
• 🚀 Canvas 2D 기반 4대 비주얼 모드:
  1. 🌌 Cosmic Nebula (성운 & 은하 파티클 링): 음악 비트에 맞춰 팽창하는 중앙 성운 오로라와 360도 방사형 은하수 파티클 링
  2. 🌠 Starlight Warp (초공간 워프): 주파수 에너지가 높아질수록 가속되는 워프 스피드 스텔라 라인
  3. 🔮 Orbital Constellation (궤도 별자리): 파형 데이터 기반 3D 별자리 궤도 라인 & 성좌 연결 노드
  4. 💥 Supernova Spectrum (초신성 스펙트럼): 360도 스펙트럼 파형 빔과 블랙홀 코스믹 코어
• 🛠️ 실시간 파라미터 튜닝 & 스냅샷 유틸리티:
  • 오디오 반응 감도(Sensitivity), 파티클 개수(Particle Count), 글로우 블러(Glow Blur), 잔상 잔여도(Decay Trail) 커스텀 슬라이더
  • Pastel Cosmic, Aurora Borealis, Neon Galaxy, Stardust Monotone 등 4종 커스텀 파스텔 팔레트
  • 실시간 프레임 HD PNG 고화질 스냅샷 다운로드 & 전체 화면 지원
  • 브라우저 localStorage 기반 프리셋 설정 자동 저장/리셋

🕹️ 사용 방법 (How to Use)

1. 오디오 소스 선택: 우측 패널 상단에서 코스믹 신시사이저, 오디오 파일, 실시간 마이크 중 원하는 소스를 선택합니다.
2. 비주얼 프리셋 체인지: Cosmic Nebula, Starlight Warp, Constellation, Supernova 카드를 클릭해 비주얼 스타일을 변경합니다.
3. 파라미터 커스텀: 감도, 파티클 개수, 글로우 블러, 잔상 제어로 나만의 우주 아트를 연출해보세요.
4. 스냅샷 캡처: 캔버스 우측 상단의 📷 버튼을 누르면 현재 연출된 멋진 코스믹 파티클 프레임이 PNG 이미지로 다운로드됩니다.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

마블 대리석 구슬을 조작하여 스위치 토글, 이동형 다리, 얼음판, 텔레포트 워프, 가시 트랩, 금이 가는 유리 타일 등 다채로운 로직 퍼즐 요소를 해결하고 골인(Goal) 지점까지 무사히 도달해 보세요!

🎨 주요 특징 (Key Features)

• 레트로 8비트 고전 픽셀 아트 테마 (Retro 8-Bit Arcade Aesthetic):
  • 80년대 고전 아케이드 느낌을 선사하는 CRT 스캔라인 오버레이 셰이더 및 온/오프 필터 지원
  • 아케이드 조명과 네온 픽셀 팔레트(시안, 마젠타, 옐로우, 에메랄드 그린) 컬러 조합
  • retro 픽셀 폰트(‘Press Start 2P’)와 직관적인 HUD 레이아웃
• 실시간 3D 아이소메트릭 엔진 (3D Isometric Motion Physics):
  • 3D 높이감과 구슬의 회전 텍스처, 다이내믹 관성, 마찰력, 구슬 그림자 완벽 구현
  • 보석 수집 및 타일 충돌 시 사방으로 흩어지는 8비트 파티클 이펙트
• Web Audio API 칩튠 오디오 엔진:
  • 외부 음원 파일 없이 pure JavaScript 오디오 합성으로 구현된 8비트 비프음 sound effect
  • 구슬 굴러가는 소리, 스위치 찰칵음, 보석 획득 멜로디, 워프 sound 및 승리 팡파레 BGM
• 3가지 멀티 조작 지원 (Multi-Control Support):
  • 화면 터치 스와이프 (Touch Swipe): 모바일/스마트폰 화면에서 손가락을 스와이프하여 직관적으로 구슬 굴리기
  • 8비트 가상 조이스틱 (Virtual Joystick): 스크린 좌측 하단의 픽셀 조이스틱 UI로 부드러운 이동 조작
  • 키보드 (WASD / 방향키): PC 환경에 최적화된 8방향 정밀 이동 조작
• 프로젝트 Prefix 로컬 저장 데이터 자동 연동:
  • 로컬 최고 점수 (retro_marble_motion_highscore)
  • 스테이지별 별점(1~3 Stars), 최단 완료 시간 및 클리어 진도 (retro_marble_motion_stage_progress)
  • 사운드 및 CRT 필터 설정 (retro_marble_motion_settings)
  • 누적 플레이, 획득 보석, 리셋 횟수 통계 (retro_marble_motion_stats)

📖 퍼즐 타일 및 기믹 안내 (Logic Puzzle Mechanics)

1. 기본 타일 (Normal Tile): 안전하게 이동할 수 있는 기본 픽셀 타일입니다.
2. 크리스탈 젬 (Gem Collector *): 스테이지 곳곳에 배치된 보석을 수집하면 점수와 3별점 획득 조건이 달성됩니다.
3. 스위치 & 바리어 (Switch A/B & Gate a/b): 구슬로 스위치 발판을 밟으면 닫혀있던 홀로그램 장벽이 열리거나 다리가 연결됩니다.
4. 얼음 타일 (Ice Tile I): 마찰력이 거의 없는 빙판으로 구슬이 멈추지 않고 벽에 부딪힐 때까지 직선으로 미끄러집니다.
5. 유리 타일 (Cracked Glass C): 구슬이 한 번 지나가면 금이 가며 잠시 후 바닥이 무너져 내립니다.
6. 텔레포트 워프 (Warp Portal W/w): 차원 포탈 입구로 들어가면 반대편 포탈 위치로 순간이동합니다.
7. 가시 트랩 (Spike Trap X): 가시 밭에 닿으면 구슬이 파괴되므로 타이밍과 동선을 정확히 계산하세요!

🕹️ 조작 방법 (Controls)

• PC: 키보드 방향키 (↑, ↓, ←, →) 또는 WASD / Space (작동) / R (재시작)
• 모바일/터치: 화면 스와이프(Swipe) 드래그 조작 또는 하단 가상 조이스틱 핸들 조작
• 상단 메뉴: STAGES (스테이지 선택), RETRY (스테이지 즉시 재시작), SETTINGS (사운드 및 CRT 스캔라인 조절)

사용 방법

1. 앱을 열고 화면에 표시된 초기 설정 또는 예시를 먼저 확인합니다.
2. 필요한 값·도구·조작 항목을 바꾸거나 입력해 현재 결과와 미리보기를 확인합니다.
3. 작업 목적에 맞는 설정을 선택한 뒤 앱에서 제공하는 결과 화면 또는 저장·내보내기 기능을 활용합니다.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

사운드 비트에 맞춰 화면 전체로 확산되는 비트 링, 레이저 경고선, 비트 드롭 파편을 신속하게 닷지(Dodge)하고 비트 타이밍에 맞춘 ⚡ 퍼펙트 비트 대시(Perfect Beat Dash)로 충격파를 발동시켜 고득점 콤보를 달성해 보세요!

🎨 주요 특징 (Key Features)

• 클린 앤 미니멀 라이트 모드 (Clean & Minimal Light Mode) 디자인:
  • 화이트(#ffffff) 및 슬레이트 톤(#f8fafc)의 밝고 정갈한 백그라운드 디자인
  • 시안(#00b4d8), 바이올렛(#8b5cf6), 핑크(#f43f5e)의 감각적인 네온 액센트 컬러 조합
  • 선명한 폰트 시스템(Outfit & Pretendard)과 반투명 블러 카드 HUD 레이아웃
• 실시간 비트 동기화 & 합성 오디오 (Web Audio API Engine):
  • 외부 오디오 파일 다운로드 필요 없이 브라우저 자체 Web Audio API 기반 오디오 합성
  • 베이스 드럼, 하이햇, 서브 베이스, 아르페지오 멜로디가 어우러진 다이내믹 BGM
  • 시간이 지남에 따라 120 BPM에서 200 BPM까지 점진적으로 빨라지는 템포 스케일링
• 실시간 ms 반응속도 측정 (Reaction Speed Test):
  • 장애물 경고 플래시 발생 후 회피/대시 반응시간을 밀리초(ms) 단위로 정밀하게 추적
  • 평균 반응속도 및 최단 반응속도 기록 표시 (예: 165ms ⚡ S-RANK)
• 비트 타이밍 대시 & 퍼펙트 shockwave:
  • Space 키 또는 화면 대시 버튼을 눌러 순간 무적 가속 발동
  • 음악 비트 순간과 일치하는 타이밍에 대시 성공 시 PERFECT BEAT 콤보 폭발 및 주변 장애물 제거
• 프로젝트 Prefix 로컬 데이터 자동 연동 (neon_beat_dodge_*):
  • 로컬 최고 점수 (neon_beat_dodge_high_score)
  • 최다 콤보 기록 (neon_beat_dodge_best_combo)
  • 최단 반응속도 ms (neon_beat_dodge_best_reaction_ms)
  • 누적 플레이 횟수 (neon_beat_dodge_total_plays)
  • 사운드 볼륨, 컨트롤 방식, 난이도 설정 (neon_beat_dodge_settings)
• 다양한 컨트롤 모드 지원:
  • 키보드 (WASD / 방향키 & Space): PC 환경에 최적화된 8방향 정밀 이동 및 대시
  • 마우스 / 터치 추종 모드: 커서/손가락 위치를 부드럽게 추종하는 직관적 조작
  • 가상 D-Pad 모드: 모바일 스크린 환경을 위한 터치 전용 8방향 가상 패드 & ⚡ 대시 버튼

📖 이용 방법 (How to Play)

1. 게임 시작: 메인 화면의 START GAME 버튼을 누르면 첫 번째 비트 루프(120 BPM)와 함께 게임이 시작됩니다.
2. 장애물 회피:
   • 비트 링 (Beat Rings): 중앙과 외곽에서 비트에 맞춰 사방으로 확산하는 네온 링
   • 비트 레이저 (Rhythm Lasers): 비트 1에 경고 파선 표시 후 비트 2에 발사되는 직선 고에너지 레이저
   • 비트 드롭 (Beat Drops): 화면 외곽에서 플레이어를 향해 호밍되는 고속 붉은 궤적 파편
3. 비트 아이템 수집:
   • 화면에 생성되는 에메랄드 그린 빛의 BEAT ORB를 획득하면 +500점 및 콤보 획득!
4. 퍼펙트 비트 대시 (Space / Touch Button):
   • 위기 순간 Space를 눌러 장애물을 통과하세요.
   • 비트에 정확히 맞추어 대시하면 주변 장애물이 파괴되며 점수 콤보 배율이 상승합니다!
5. 설정 조절:
   • 상단 ⚙️ 버튼을 눌러 BGM/SFX 볼륨, 조작 방식(키보드, 마우스 추종, 가상 D-Pad), 난이도(Normal, Hyper, Zen)를 자유롭게 변경할 수 있으며 설정은 브라우저에 자동 저장됩니다.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

주요 기능

• Grid / Flexbox 즉시 전환: 동일한 카드 구성으로 두 레이아웃 모델의 차이를 비교합니다.
• 실시간 Inspector: columns, gap, align-items, justify-content 등 핵심 속성을 수치와 선택 메뉴로 조절합니다.
• 드래그 정렬: 캔버스의 카드를 끌어 순서를 바꾸고 선택 상태를 확인합니다.
• 반응형 프리뷰: Mobile, Tablet, Desktop 폭 버튼으로 레이아웃 밀도를 빠르게 점검합니다.
• CSS 복사 및 파일 내보내기: 생성된 코드를 클립보드로 복사하거나 layout.css로 저장합니다.

사용 방법

1. 상단에서 Grid 또는 Flexbox 모드를 고릅니다.
2. 왼쪽 Inspector에서 열 수와 간격, 정렬 값을 바꿉니다.
3. 중앙 캔버스에서 카드를 드래그해 항목 순서를 조절합니다.
4. 오른쪽 패널에서 자동 생성된 CSS를 확인하고 Copy 또는 Export CSS를 선택합니다.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

주요 기능

• 4가지 비주얼 모드: 버스트, 궤도, 파문, 스파크 효과를 즉시 전환합니다.
• 손끝 중심 인터랙션: 클릭·탭으로 충격파를 만들고 드래그로 입자 궤적을 그립니다.
• 에너지와 잔상 제어: 슬라이더로 장면의 밀도와 잔상을 조절합니다.
• 4종 잉크 팔레트: 히어로, 네온, 선셋, 모노 테마를 제공합니다.
• 스냅샷 저장: 현재 캔버스를 PNG로 내보냅니다.

사용 방법

1. POWER CONTROLS에서 원하는 효과와 잉크 팔레트를 고릅니다.
2. 중앙 캔버스를 탭하거나 클릭해 효과를 만들고 길게 드래그해 선을 그립니다.
3. ENERGY와 TRAIL로 장면의 인상을 다듬습니다.
4. 마음에 드는 결과는 SNAPSHOT 버튼으로 저장하세요.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

독보적인 [고급스러운 흑백 모노크롬 스위닝 럭셔리] 다크 테마 디자인과 직관적인 터치/마우스 대시보드 레이아웃을 통해 최상의 사용자 경험을 선사합니다.

🌟 핵심 주요 기능

• 🖤 고급스러운 흑백 모노크롬 럭셔리 (Sovereign Luxury Monochrome) UI:
  • 깊이감 있는 딥 흑요석(Obsidian) 배경과 실버/플래티넘 금속성 광택 가공 요소, 글래스모피즘 계층 구조로 제작된 프리미엄 디자인입니다.
  • 데스크톱 마우스 드래그 앤 드롭 및 클릭 조작뿐만 아니라 터치 디바이스 제스처(손가락 스플릿 슬라이더, 터치 타겟)를 완벽하게 지원합니다.
• 🧹 강력한 SVG 엔진 & 맞춤형 룰 설정 (Custom Optimization Rules):
  • 메타데이터 & 주석 클리닝: <?xml>, <!DOCTYPE>, <!-- 주석 -->, <metadata>, <sodipodi:namedview> 자동 제거.
  • 에디터 고유 속성 제거: inkscape:*, sodipodi:*, sketch:*, xmlns:sketch, data-name, data-id 완벽 소탕.
  • 소수점 정밀도 압축 (Precision Control): 0~6자리까지 정밀도를 선택하여 패스 d 좌표 및 도형 수치를 미세 조절, 최대 80% 이상의 용량을 획기적으로 절감.
  • 스마트 구조 정리: 빈 그룹(<g></g>) 삭제, 0 크기 무의미 요소 제거, 기본/중복 속성(stroke-width="1", fill-rule="nonzero") 자동 정돈.
• 🎨 컬러 & 테마 변환 엔진 (Color Engine):
  • 컬러 팔레트 자동 추출: SVG 내 사용된 모든 색상을 자동 탐지하여 클릭 한 번으로 컬러 코드를 복사.
  • currentColor 자동 전환: CSS의 color 속성으로 제어 가능한 반응형 웹 아이콘으로 변환.
  • 모노크롬 럭셔리 스와프 (High-Contrast Re-color): 복잡한 다채로운 아이콘을 시크한 모노크롬 블랙/화이트로 재색상화.
• 🔍 실시간 Split 뷰포트 Inspector (Before vs After 비교):
  • 터치 및 마우스 드래그가 가능한 스플릿 핸들로 원본(Original)과 최적화(Cleaned) SVG를 실시간 시각적 비교.
  • 투명 체커보드, 럭셔리 블랙, 클린 화이트 배경 전환 및 50%~300% 확대/축소, 외곽선 와이어프레임(Wireframe) 강조 지원.
• 💻 다양한 포맷 내보내기 & 실시간 Code Diff Viewer:
  • 코드 비교 (Diff Inspector): 삭제되거나 새로 작성된 라인을 색상별로 직관적 표시.
  • React JSX 변환: React 애플리케이션용 <CleanIcon /> 컴포넌트 코드로 원클릭 생성.
  • CSS Data URI 생성: CSS background-image 또는 src에 바로 쓸 수 있는 Data URI 즉시 출력.
  • 배치 작업 큐 (Batch Upload & Download): 여러 개의 SVG 파일들을 한 번에 드래그하여 배치 처리 후 다운로드.

🛠️ 사용 방법 (How to Use)

1. SVG 불러오기 / 샘플 확인:
   • 상단 헤더의 🎨 Figma 로고, 📐 Inkscape 일러스트, ⚡ 히어로 벡터, 💎 UI 아이콘 팩, ✨ 모션 아트 버튼으로 준비된 샘플을 체험해보세요.
   • 본인의 SVG 파일은 [📁 파일 업로드] 버튼이나 화면 중앙 캔버스로 드래그 앤 드롭하여 추가할 수 있습니다.
2. 최적화 룰 조정:
   • 좌측 사이드바 패널에서 소수점 정밀도(Precision), 메타데이터 제거 여부, currentColor 변환, viewBox 자동 생성 등의 옵션을 자유롭게 켜고 끕니다.
3. 시각적 차이 확인:
   • 중앙 뷰포트의 구분선(◀▶)을 마우스나 터치로 좌우로 끌어 원본과 최적화본의 시각적 해상도 차이가 없는지 점검합니다.
4. 코드 및 용량 절감 분석:
   • 우측 대시보드에서 용량 절감 비율(-XX%)과 제거된 속성 개수를 확인하고 하단 코드 창에서 Cleaned SVG, React JSX, Data URI 탭을 넘겨가며 복사합니다.
5. 내보내기:
   • 상단 [💾 SVG 다운로드] 버튼으로 최적화된 .svg 파일을 다운로드하세요.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

개발자, 데이터 분석가, DB 관리자(DBA)는 물론 마케터 및 일반 사용자가 겪는 번거로운 데이터 포맷 변환 작업을 클릭 몇 번만으로 완벽히 자동화해 줍니다.

🚀 주요 기능 (Key Features)

1. 다양한 파일 포맷 & 대용량 드래그 앤 드롭 지원
   • .csv, .xlsx, .xls, .tsv, .txt 등 다양한 형태의 스프레드시트 파일을 드래그 앤 드롭으로 간편하게 불러옵니다.
   • SheetJS 엔진을 내장하여 엑셀 파일도 실시간 파싱합니다.
2. 지능형 컬럼 타입 자동 추론 (Smart Type Inference)
   • 입력된 각 컬럼 데이터를 자동 분석하여 INT, DECIMAL, BOOLEAN, DATETIME, VARCHAR, TEXT 등의 최적 SQL 데이터 타입을 자동으로 식별하고 정의합니다.
3. 다양한 SQL Dialect 및 세부 옵션 컨트롤
   • SQL Dialects: MySQL / MariaDB, PostgreSQL, SQLite, MS SQL Server 정밀 지원.
   • CREATE TABLE 지원: 자동 Primary Key(id) 생성 옵션, 컬럼명 소문자/snake_case 정제 기능.
   • INSERT INTO 연산: 배치(Batch) 단위 묶음 처리(1, 50, 100, 500행 단위), 문자열 따옴표 Escaping 방식 선택.
4. 유연한 JSON 변환 구조
   • 표준 객체 배열([{...}]), 컬럼 중심 형태({col: [...]}), 2D 배열 형태 선택 지원.
   • Minified(한 줄 요약) 및 2 space / 4 space Pretty 들여쓰기 옵션 제공.
5. 가독성 높은 구역 렌더링 & 미리보기 Grid
   • 원형 데이터 미리보기 테이블: 데이터의 행/열 수, 전체 용량 통계와 함께 추론된 타입 태그가 달린 실시간 데이터 표를 제공합니다.
   • 다크 세이지 테마 신택스 하이라이팅: JSON, SQL CREATE, SQL INSERT, Markdown Table 전용 탭에서 컬러 하이라이팅된 구문을 확인하고 복사/다운로드할 수 있습니다.
6. 원클릭 복사 및 파일 다운로드
   • 변환된 데이터를 클립보드에 바로 복사하거나 .json, .sql, .md 파일 형태로 손쉽게 내보낼 수 있습니다.

📝 사용 방법 (How to Use)

1. 데이터 입력하기:
   • 상단 드롭존에 CSV 또는 엑셀 파일(.xlsx)을 드래그하여 올리거나 클릭하여 파일을 선택합니다.
   • 또는 입력 텍스트 영역에 직접 CSV/TSV 텍스트 데이터를 붙여넣습니다.
   • 상단의 [회원 샘플], [상품/재고 샘플], [주문/결제 샘플] 버튼을 클릭하여 즉시 기능을 체험할 수 있습니다.
2. 변환 옵션 조정하기:
   • 세부 변환 옵션 설정 아코디언을 클릭하여 첫 줄 헤더 사용 여부, 컬럼명 정제, SQL Dialect (MySQL, Postgres 등), 배치 크기, JSON 구조 등을 자유롭게 변경합니다.
3. 결과 확인 및 내보내기:
   • 우측 화면의 ‘원형 데이터 미리보기’에서 파싱 결과와 자동으로 추론된 데이터 타입을 확인합니다.
   • [JSON], [SQL (전체)], [SQL CREATE], [SQL INSERT], [Markdown] 탭을 클릭하여 필요한 포맷을 선택합니다.
   • [복사하기] 버튼을 눌러 클립보드에 담거나 [다운로드] 버튼으로 파일로 저장합니다.

🔒 완벽한 보안 (100% Client-Side Engine)

본 변환 도구는 외부 서버와의 데이터 통신 없이 100% 사용자의 웹 브라우저 내부 자바스크립트 메모리상에서만 연산을 수행합니다. 기업의 기밀 고객 데이터, 내부 실적 데이터, 개인정보가 담긴 파일도 유출 위험 없이 안심하고 안전하게 변환할 수 있습니다.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

외우주 궤도(100,000m)에서 지표면(0m)까지 총 5단계의 극적인 대기권 레이어(외우주 궤도, 열권 플라즈마, 중간권 유성우, 성층권 오로라, 대기권 한계 불꽃 터널)를 통과하며 쏟아지는 3D 소행성 파편, 회전 플라즈마 링, 유도 드론 코어를 피하고 에너지 정수 아이템을 획득하여 무사히 하강을 성공시키세요!

🎨 주요 특징 (Key Features)

• 스튜디오 3D 인디 아티스틱 렌더링 비주얼:
  • Three.js WebGL 3D 엔진으로 구현된 세련된 인디 툰 셰이딩 드론 및 파티클 하강 튜빙
  • 고고도 대기층 변화에 따른 네온 바이올렛, 시안, 오로라 에머럴드, 불꽃 오렌지의 다이내믹 그래디언트 라이팅
  • 고속 하강 시 펼쳐지는 시네마틱 카메라 틸트 및 스피드 라인(Speedlines) 이펙트
• 혁신적인 멀티 플랫폼 통합 컨트롤:
  • 모바일 스와이프 (Mobile Swipe): 터치 스크린 상에서의 자유로운 핑거 드래그/스와이프 벡터 조작
  • 가상 D-Pad (Virtual D-Pad): 화면 하단의 반응형 8방향 가상 컨트롤러 패드 및 ⚡ 버스트 부스트 전용 버튼
  • PC 키보드 (WASD & Arrow Keys): W, A, S, D 및 화살표 키, Spacebar 버스트 추진 지원
• 5단계 극적인 고도별 스테이지 아키텍처:
  • Stage 1: EXOSPHERE DEBRIS (외우주 궤도 파편): 저중력 궤도 쓰레기와 3D 다면체 파편 회피
  • Stage 2: THERMOSPHERE PLASMA (열권 플라즈마 스톰): 고온 플라즈마 파동과 회전 레이저 링
  • Stage 3: MESOSPHERE METEOR SHOWER (중간권 유성우): 대기권 마찰로 타오르는 아티스틱 혜성 닷지
  • Stage 4: STRATOSPHERE AURORA BLAST (성층권 극광 폭발): 오로라 에너지 충격파와 고속 유도 코어
  • Stage 5: ATMOSPHERIC ENTRY EXTREME (대기권 한계 마찰 터널): 대기 마찰 극강의 불꽃 터널 돌파
• Web Audio API 오디오 합성:
  • 외부 음원 파일 다운로드 없이 브라우저 오디오 시스템을 직접 제어하여 버스트 부스트, 아이템 획득 멜로디, 쉴드 타격음, 스테이지 업 팡파르 연출
• 프로젝트 명칭 기반 로컬 데이터 저장 (space_drop_dodge_*):
  • 최고 점수(space_drop_dodge_high_score), 최장 생존 시간(space_drop_dodge_max_time), 달성 최고 스테이지(space_drop_dodge_max_stage), 누적 플레이 횟수(space_drop_dodge_total_runs)가 브라우저에 안전하게 보관됩니다.

📖 이용 방법 (How to Play)

1. 드롭 시작: 메인 화면에서 ‘DROP NOW’ 버튼을 누르면 외우주 100,000m 고도에서 강하 미션이 시작됩니다.
2. 장애물 회피 & 이동: 키보드(WASD/방향키), 화면 터치 스와이프 드래그, 또는 가상 D-Pad를 사용하여 3D 드론을 8방향으로 이동시킵니다.
3. 버스트 부스트 (Burst Boost) 활용: 위험 순간에 Spacebar 또는 가상 패드 중앙/버스트 버튼을 눌러 순간 초고속 돌파 및 무적 순간 가속을 발동하세요.
4. 아이템 수집:
   • SHIELD REPAIR (시안 쉴드): 보호막 복구 및 체력 회복
   • TIME SLOW (자색 크로마): 대기 흐름과 장애물 속도를 4초간 감속
   • ENERGY GEM (황금 정수): 대량의 500 보너스 스코어 획득
   • BOOST RECHARGE (녹색 펄스): 버스트 부스트 쿨타임 즉시 리셋
5. 기록 경신 & 저장: 지표면(0m) 도착까지 더 높은 점수와 버틴 시간을 기록하면 로컬 저장소에 영구 뱃지로 기록됩니다.

🎮 조작법 (Controls)

💻 PC (키보드)

• 드론 8방향 이동: W, A, S, D 또는 방향키 (↑, ◀, ↓, ▶)
• 버스트 부스트 (Burst Boost): Spacebar 또는 Enter
• 사운드 토글: 화면 우상단 🔊 아이콘 클릭

📱 모바일 (터치 스크린)

• 스와이프 드래그: 화면 중앙 영역을 원하는 방향으로 드래그/스와이프
• 가상 D-Pad: 화면 좌측 하단 D-Pad 버튼 (▲, ◀, ▶, ▼)
• 버스트 부스트: D-Pad 중앙 ⚡ 버튼 또는 우측 하단 BURST BOOST 원형 버튼 터치

🏆 고득점 및 스테이지 공략 팁

1. 버스트 부스트의 무적 가속 판정: 버스트 부스트 사용 중에는 이동 속도가 폭발적으로 상승하며 장애물 충돌 피해를 무력화합니다. 장애물 밀집 구역 탈출에 적극 활용하세요!
2. 크로마 타임 슬로우 젬 우선 획득: 자색 크로마 파워업을 획득하면 주변 시공간이 둔화되어 어려운 탄막 회피 및 혜성 궤도를 쉽게 조작할 수 있습니다.
3. 가상 D-Pad와 스와이프 콤보: 모바일 기기에서는 스와이프 드래그로 광범위 이동을 진행하고 정밀 조종 시 D-Pad 버튼을 터치하면 더욱 섬세한 회피가 가능합니다.
4. 대기권 한계 진입 시 중앙 유지: Stage 5 대기권 한계 마찰 터널에서는 외곽에서 생성되는 유도 미사일이 가중되므로 중앙 부근에서 미세 틸트로 회피하는 것이 생존률을 높입니다.

❓ 자주 묻는 질문 (FAQ)

Q1. 게임 기록이 웹 브라우저를 닫아도 유지되나요? A1. 네! 프로젝트 고유 식별 키인 space_drop_dodge_high_score, space_drop_dodge_max_time, space_drop_dodge_max_stage 변수를 통해 브라우저 localStorage에 자동 저장되므로 언제든지 재방문해도 이전 기록이 유지됩니다.

Q2. 모바일 웹 브라우저에서도 원활하게 플레이할 수 있나요? A2. 네! 모바일 반응형 화면 설계와 화면 스와이프 드래그 및 가상 D-Pad 터치 조작 시스템이 완벽히 통합되어 있어 스마트폰 및 태블릿에서도 쾌적한 3D 아케이드 경험을 제공합니다.

Q3. 3D 그래픽 렌더링에 별도의 설치가 필요한가요? A3. 아니오! 모던 HTML5 WebGL 기술과 Three.js 렌더러를 탑재하여 크롬, Safari, Edge 등 모든 최신 브라우저에서 다운로드 없이 즉시 실행됩니다.

Three.js 기반의 실시간 3D 주사위 물리 굴리기와 원터치 탭 타이밍 시스템 그리고 모바일 터치 드래그 & 드롭 카딩 메커니즘을 융합하여 독창적이고 중독성 넘치는 턴제 전략 전투를 선사합니다.

🎨 주요 특징

• 모던 앤 세련된 엠보싱 클레이모피즘 3D 비주얼:
  • 입체적인 내외부 음영(Inner & Drop Shadows)과 말랑말랑한 클레이 파스텔 질감의 UI 요소, 엠보싱 3D 카드로 시각적 쾌감을 극대화했습니다.
• Three.js 실시간 3D 주사위 렌더링:
  • 회전 속도와 타격감, 물리 바운스 효과가 적용된 3D 점토 주사위가 화면에서 실시간 굴러가며 회전합니다.
• 🎯 원터치 탭 타이밍 조작 (Timing Tap System):
  • 주사위를 굴리거나 공격 시 화면 속 타이밍 게이지 바가 좌우로 오실레이션합니다.
  • 최적의 골드/그린 스윗스팟 존에서 화면 탭 또는 스페이스바를 누르면 PERFECT (x2.0 배율 + AP 환급) 또는 GREAT (x1.4 배율) 크리티컬 보너스를 획득합니다!
• 📱 모바일 터치 드래그 & 드롭 지원:
  • 카드를 손에서 드래그하여 적이나 아군 슬롯으로 직접 던지듯 사용할 수 있으며 모바일 터치와 PC 마우스 조작을 완벽히 지원합니다.
• ♾️ 무한 로그라이크 덱빌딩 몬스터 타워:
  • 일반 몬스터, 엠보싱 드래곤 보스, 휴식의 모닥불(HP 회복), 점토 카드 상점을 거치며 점차 난이도가 상승하는 무한 층수 던전에 도전하세요.
• 💾 LocalStorage 자동 연동 (Prefix: DICE_3D_ROGUELIKE_):
  • 최고 득점(highScore), 도달 층수(maxStage), 효과음 및 타이밍 조작 설정(settings)이 브라우저 로컬 스토리지에 자동 저장됩니다.
• 📖 초보자 대화형 튜토리얼 (Interactive Tutorial Guide):
  • 게임을 처음 플레이하는 유저를 위한 4단계 인터랙티브 튜토리얼 모달을 제공합니다. 상단 바의 ❓ 버튼을 통해 언제든지 플레이 가이드를 다시 확인하실 수 있습니다.
• 🔊 Web Audio API 입체 사운드 신디사이저:
  • 별도의 사운드 파일 로딩 없이 웹 브라우저에서 주사위 충돌음, 타격음, 타이밍 팡파르, 덱 드로우 소리를 실시간으로 창조합니다.

🎮 조작 방법 & 튜토리얼

• 튜토리얼 열기: 상단 우측의 ❓ 버튼을 눌러 언제든지 4단계 플레이 가이드 슬라이드를 볼 수 있습니다.
• 주사위 굴리기: 🎲 주사위 굴리기 버튼 클릭 또는 [Spacebar]
• 타이밍 탭: 타이밍 바 구동 시 [TAP NOW!] 버튼 클릭, 화면 아무 곳이나 탭, 또는 [Spacebar]
• 카드 사용:
  • 드래그 & 드롭: 카드를 터치/클릭한 상태로 위쪽 전장으로 드래그하여 내려놓기
  • 원터치 클릭: 손에 든 카드를 직접 클릭하여 즉시 발동 (에너지 소모)
• 턴 종료: 턴 종료 ➡️ 버튼을 눌러 적의 행동을 진행합니다.

사용 방법

1. 앱을 열고 화면에 표시된 초기 설정 또는 예시를 먼저 확인합니다.
2. 필요한 값·도구·조작 항목을 바꾸거나 입력해 현재 결과와 미리보기를 확인합니다.
3. 작업 목적에 맞는 설정을 선택한 뒤 앱에서 제공하는 결과 화면 또는 저장·내보내기 기능을 활용합니다.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

스매시 게이지를 모아 폭발적인 스피드의 SMASH DUNK 슛을 날리고 단계별로 똑똑해지는 최첨단 AI와 최고 점수 및 스테이지 달성도 대결을 펼쳐보세요!

🎨 주요 특징 (Key Features)

• 차세대 3D 그래픽 & 실시간 네온 조명:
  • Three.js 3D 엔진으로 구현된 입체적 에어하키 아레나와 실시간 광원 효과.
  • 퍽(Puck) 이동 경로를 추적하는 파티클 꼬리 및 스매시 충격 파형 효과.
• 다양한 조작 방식 완벽 지원:
  • 터치 스와이프 / 마우스 드래그: 손가락이나 마우스로 퍽을 직관적으로 밀어서 빠르게 타격.
  • 가상 조이스틱 (Mobile Joystick): 터치 디바이스 전용 가상 패드로 섬세한 무빙 조작.
  • PC 키보드 조작: W, A, S, D 또는 방향키 이동 + Space / Shift 키 스매시 부스트.
• ⚡ SMASH BOOST (스매시 슛):
  • 퍽을 주고받으며 게이지를 충전한 뒤 강력한 스매시 기술을 발동하여 광속 득점을 노릴 수 있습니다.
• 단계별 AI 대전 레이스 (1~10 스테이지):
  • Rookie Match부터 Hyper AI Supreme Race까지 난이도가 점진적으로 상승하는 10개의 스테이지.
  • 상위 스테이지 진출 시 필드 중앙 장애물(Bumper) 및 속도Zone 변수가 추가됩니다.
• Web Audio API 오디오 합성:
  • 퍽 타격음, 벽면 바운스, 스매시 에너지 방출 sound, 득점 찬가 등 생생한 효과음 제공.
• 로컬 저장소 자동 기록 동기화:
  • 브라우저 저장소(localStorage)에 로컬 최고 점수, 최장 누적 시간, 스테이지 달성도가 air_hockey_smash_ 식별자로 자동 저장됩니다.

🎮 이용 방법 (How to Play)

1. 게임 모드 선택:
   • 스테이지 AI 대전 레이스: 목표 득점을 먼저 달성하며 스테이지를 순차 통과하는 커리어 모드.
   • 엔드리스 서바이벌: 시간 경과에 따라 강화되는 AI와 무제한 생존 대결.
2. 조작 방식 설정:
   • 터치 스와이프 / 마우스 드래그 모드 또는 가상 조이스틱 모드 중 원하는 스타일을 선택합니다.
3. 경기 진행:
   • 자신의 진영(하단) 내에서 말렛(Mallet)을 조작하여 퍽을 상대 진영(상단) 골대에 집어넣습니다.
   • 퍽과의 충격 속도가 빠를수록 퍽이 더 강한 회전과 각도로 날아갑니다.
4. 승리 조건:
   • 지정된 목표 골 수(3~10골)를 선승하면 해당 스테이지 승리와 함께 다음 난이도가 해금됩니다.

🏆 고득점 공략 팁 (Pro Tips)

• 벽면 뱅크 슛 (Bank Shot): AI 진영 좌우 벽면을 비스듬히 노려 각도를 꺾으면 AI의 방어를 무력화하고 골을 넣을 수 있습니다.
• 스매시 게이지 타임 제어: 상대 AI가 방어 준비를 갖추기 전, 퍽이 중앙을 넘어오는 순간 Space 키/스매시 버튼으로 기습 타격하세요!
• 장애물 바운스 활용: Stage 3 이후 생성되는 중앙 장애물 범퍼를 맞추면 퍽의 궤적이 예기치 못하게 바뀌어 결정적인 득점 기회가 생깁니다.

❓ 자주 묻는 질문 (FAQ)

Q. 모바일과 PC 모두 플레이 가능한가요?
A. 네, PC에서는 키보드와 마우스, 스마트폰/태블릿에서는 터치 스와이프 및 가상 조이스틱을 통해 완벽하게 멀티 디바이스 플레이가 가능합니다.

Q. 별도의 다운로드나 설치가 필요한가요?
A. 필요 없습니다. 웹 브라우저 접속 즉시 3D WebGL 환경에서 즉시 실행됩니다.

Q. 내 기록과 스테이지 완료 정보는 저장되나요?
A. 브라우저 캐시 저장소(localStorage)에 최고 기록과 해금 스테이지 정보가 프로젝트 전용 키로 안전하게 저장됩니다.

웹 디자이너, 프론트엔드 개발자, 콘텐츠 크리에이터가 모바일 화면(320px)부터 울트라와이드 모니터(2560px)까지 끊김 없이 자연스럽게 확대/축소되는 Fluid Typography를 수학적 clamp(min, preferred, max) 공식으로 자동 산출하고 15개 이상의 검증된 Google Fonts 글꼴 페어링 조합을 실시간 뷰포트에서 즉각 테스트할 수 있습니다.

🌟 주요 핵심 기능

• 🕹️ 미니멀리스틱 아케이드 UI & CRT 스캔라인 인터페이스:
  • 네온 시안, 아케이드 마젠타, 픽셀 골드 글로우 컬러 팔레트와 레트로 아케이드 HUD 헤더를 제공합니다.
  • CRT 화면 주사선 overlay 및 8-bit 신디사이저 Web Audio 효과음(Mute/Unmute 온/오프) 기능을 탑재하였습니다.
• 🔤 엄선된 15+ 타이포그래피 글꼴 페어링 프리셋:
  • Editorial Elegance (Serif + Sans), Cyberpunk Futuristic, Modern Product Tech, 8-Bit Pixel Studio, Neo-Brutalism, High-Fashion Serif 등 다채로운 구글 폰트 콤보 지원.
  • 🎲 Slot Machine 무작위 페어링 릴: 아케이드 효과음과 함께 랜덤으로 우수한 폰트 조화를 추천받을 수 있습니다.
• 📏 수학적 CSS clamp() Fluid Typography 계산기:
  • 최소/최대 뷰포트 너비(px)와 최소/최대 H1 폰트 크기(px/rem)를 입력하면 slope와 intersection 수식을 자동 산출하여 clamp(min, val + vw, max) 소스코드를 생성합니다.
  • Major Third(1.25), Golden Ratio(1.618), Perfect Fourth(1.333) 등 Modular Type Scale 시스템으로 H1부터 Small 캡션까지 전 단계 반응형 스케일 토큰을 한 번에 생성합니다.
• 📱 터치 & 마우스 드래그 기반 반응형 대시보드 뷰포트:
  • PointerEvents 기반의 Resizable Drag Handle을 이용하여 손가락 터치 드래그 및 마우스 드래그로 뷰포트 너비를 320px ~ 1920px까지 자유롭게 조절할 수 있습니다.
  • Mobile(375px), Phablet(428px), Tablet(768px), Laptop(1024px), Desktop(1440px) 퀵 프리셋 버튼 지원.
• 🎛️ 실시간 인라인 편집 & 메트릭스 미세 튜닝:
  • 프리뷰 캔버스 내 텍스트를 직접 클릭하여 실시간으로 문구를 수정할 수 있습니다 (contenteditable).
  • 행간(Line Height), 자간(Letter Spacing), 폰트 두께(Font Weight), 문단 간격(Paragraph Margin), 텍스트/배경 컬러 및 다크/라이트 모드 실시간 조정 가능.
• ⚡ 완벽한 디자인 시스템 내보내기 (Export System):
  • Raw CSS Custom Properties (:root 변수) 원클릭 복사.
  • Google Fonts Dynamic <link> 및 CSS @import 소스 생성.
  • Tailwind CSS tailwind.config.js 확장 코드 및 Design Tokens JSON 파일 내보내기 지원.

🛠️ 사용 방법 (How to Use)

1. 글꼴 페어링 선택 (Font Pairing):
   • 좌측 컨트롤 패널의 ‘Font Pairing’ 탭에서 큐레이션된 프리셋을 선택하거나 🎲 Slot Machine 버튼을 눌러 랜덤 글꼴 조합을 뽑아보세요.
2. 반응형 clamp() 계산기 설정:
   • ‘Fluid Clamp()’ 탭으로 이동하여 최소/최대 화면 너비 및 H1 폰트 크기를 설정하면 실시간으로 생성된 CSS clamp() 코드를 확인할 수 있습니다.
3. 뷰포트 크기 드래그 & 반응형 확인:
   • 우측 대시보드 캔버스 오른쪽의 드래그 핸들을 마우스나 손가락 터치로 끌어서 화면 폭 변화에 따른 H1 크기의 유연한 변경을 관찰하세요.
4. 스타일 튜닝 & 컬러 변경:
   • ‘Tune & Style’ 탭에서 행간, 자간, 글자 색상, 배경 색상을 조절하여 브랜드 테마를 완성하세요.
5. 소스코드 및 토큰 내보내기:
   • 하단의 ⚡ EXPORT CODE & CSS SYSTEM 버튼을 눌러 CSS 변수, 구글 폰트 임베드 코드, Tailwind 설정 또는 JSON 토큰을 복사하여 프로젝트에 바로 적용하세요.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

별도의 복잡한 코딩 없이 반응형 캔버스 인터페이스 위에서 드래그 앤 드롭 및 터치로 노드를 배치하고 실시간으로 파라미터를 미세 조절하며 완성된 결과물을 브라우저 즉시 재생용 .svg 파일, HTML/CSS/JS 코드, PNG 스냅샷, JSON 프로젝트로 다운로드할 수 있습니다.

🌟 핵심 주요 기능

• 🎨 입체감 있는 3D 클레이모피즘 (Claymorphic 3D UI) 디자인:
  • 부드러운 볼륨감과 파스텔/비비드 톤의 3D 입체 그늘 및 그림자, 볼록한 버튼 및 와이어 글로우 이펙트를 갖춘 프리미엄 디자인입니다.
  • 데스크톱 마우스 드래그는 물론 모바일/태블릿 터치 제스처를 지원하여 어느 기기에서나 편안하게 노드를 조작할 수 있습니다.
• 🧩 풍부한 모듈형 노드 라이브러리:
  • 도형 & 소스 노드: 별(Star), 원/타원(Circle), 다각형(Polygon), 사인 파동(Wave), 나선형(Spiral), 커스텀 SVG 패스(d="...") 지원.
  • 자유 캔버스 드로잉 노드: 인터랙티브 캔버스 위에서 손그림/마우스/스타일러스로 자유롭게 그린 라인을 Smooth Bezier SVG 패스로 자동 변환합니다.
  • 애니메이션 & 트랜스폼 노드: Stroke Dash Offset 라인 드로잉 애니메이션, 패스 형상 간 부드러운 모핑, 360도 회전 및 바운싱 크기 변형.
  • 3D 컬러 & 글로우 필터 노드: 레인보우 라이브 쉐이딩, 네온 3D 글로우 필터, 입체 드롭 그림자 효과.
  • 캔버스 파티클 이미터 노드: 벡터 패스를 따라 흩날리는 캔버스 입자 dust/sparkle 파티클 효과.
• 🚀 실시간 파이프라인 evaluation & 라이브 뷰포트:
  • 그래프 연결 상태와 각 노드의 파라미터(속도, 두께, 색상, 입자 수, 중력 등)를 변경하는 즉시 라이브 플로팅 뷰포트에 60 FPS로 반영됩니다.
• 📥 다양한 포맷의 다운로드 & 내보내기:
  • 독립 실행형 SVG (.svg): 자바스크립트 라이브러리 없이 웹페이지/디자인 도구에서 자체 애니메이션이 실행되는 pure SVG 파일 다운로드.
  • 웹 임베드 코드 (HTML/CSS/JS): 본인 블로그나 웹 앱에 복사해서 붙여넣을 수 있는 깔끔한 코드 생성.
  • 고화질 PNG 스냅샷: 원하는 렌더링 프레임을 고해상도 PNG 이미지로 저장.
  • JSON 프로젝트 파일 (Save & Load): 노드 구조와 연결 상태 전체를 .json 프로젝트로 저장하고 다시 불러와 수정 가능.

🛠️ 사용 방법 (How to Use)

1. 데모 프레셋 실행:
   • 상단 헤더의 ⭐ 스타 모핑, 🌈 네온 파동, ✨ 파티클 트레일, 🌀 사이버 스파이럴 버튼을 눌러 준비된 노드 조합을 확인해보세요.
2. 노드 추가 및 배치:
   • 좌측 ‘노드 보관함’에서 원하는 노드를 클릭하거나 캔버스로 드래그하여 생성합니다.
   • 노드 헤더를 잡고 드래그하여 자유롭게 배치합니다.
3. 와이어 연결:
   • 노드의 우측 출력 포트(Output) 동그라미를 마우스나 손가락으로 누른 채, 다른 노드의 좌측 입력 포트(Input)로 드래그하면 아름다운 글로우 곡선 와이어가 연결됩니다.
4. 실시간 파라미터 조절:
   • 노드를 클릭하면 우측 ‘속도, 두께, 색상, 애니메이션 파동’ 속성창이 열립니다. 슬라이더나 컬러 피커를 옮기며 실시간 반응을 확인하세요.
5. 결과물 내보내기:
   • 상단 🚀 내보내기 버튼을 클릭하여 SVG 파일, HTML 코드, PNG 이미지, JSON 프로젝트를 다운로드하세요.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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

라콘(Cone), 사과, 쓰레기통 등 작은 사물부터 시작해 승용차, 나무, 주택 그리고 거대한 마천루 마천빌딩까지 삼키며 필드 최강의 구멍이 되어보세요!

이 프로젝트는 Gemini 3.6 Flash 모델로 제작되었습니다.

🎨 주요 특징 (Key Features)

• 3D Three.js 실시간 물리 & 그래픽 엔진:
  • 부드러운 60fps 3D 시점 카메라 추적과 직관적인 3D 도시 오브젝트 배치.
  • 블랙홀로 빠져드는 입체적인 Y축 추락 물리 효과 및 수축 애니메이션 구현.
• 다양한 멀티 컨트롤 시스템 지원 (PC & 모바일 완벽 대응):
  • 모바일/태블릿: 화면 자유 스와이프/드래그 및 핑거 패드 지원, 가상 조이스틱 (Virtual Joystick) 및 가상 D-Pad 조작 방식 지원.
  • PC/데스크톱: WASD 키 및 방향키(↑, ↓, ←, →) 입력 지원.
• 다채로운 3D 게임 모드:
  1. ⚡ 타임 러시 (2분 모드): 제한시간 2분 동안 연속 삼키기와 콤보 부스트를 활용해 로컬 최고 점수를 달성하세요.
  2. ♾️ 무제한 탐험 (Endless Mode): 시간 제한 없이 자유롭게 도시 전체를 삼키고 구멍을 거대하게 키울 수 있는 힐링 모드.
  3. 🤖 AI 배틀 서바이벌 (AI Battle Mode): 필드 위 3개의 AI 블랙홀 라이벌과 경쟁하며 실시간 순위 다툼을 벌이는 서바이벌 모드.
• 연속 콤보 (Combo Multiplier) & 부스트:
  • 빠른 속도로 사물을 연속 흡수할 때마다 2x ~ 8x 콤보 점수 멀티플라이어가 발동합니다.
• 커스텀 블랙홀 스킨 시스템:
  • 네온 사이버(Neon Cyan), 마그마 라바(Magma Red), 코스믹 보이드(Cosmic Purple), 골드 볼텍스(Golden Yellow) 등 취향에 맞는 빛나는 블랙홀 테마 선택 가능.
• Web Audio API 오디오 엔진:
  • 사물 크기에 따라 변화하는 흡수 사운드(Chomp SFX), 콤보 알림음, 레벨업 축하 나팔 소리 등 별도 파일 다운로드 없이 브라우저 자체 합성 음향 제공.
• 로컬 최고 점수 연동 (localStorage):
  • 플레이어의 최고 점수, 최대 달성 레벨, 최대 콤보 기록이 브라우저에 안전하게 자동 저장됩니다.

🎮 조작 방법 (How to Play)

1. 게임 시작: 메인 화면에서 모드(타임 러시 / 무제한 / AI 배틀) 및 블랙홀 스킨을 선택한 뒤 게임 시작 🚀 버튼을 누릅니다.
2. 이동 조작:
   • 모바일/태블릿: 화면 좌하단 가상 조이스틱을 원하는 방향으로 기울이거나 화면 전체를 스와이프/드래그합니다.
   • PC: 키보드 W, A, S, D 또는 방향키를 사용하여 이동합니다.
3. 사물 흡수 & 레벨업:
   • 현재 블랙홀 직경보다 작거나 같은 크기의 오브젝트에 다가가면 블랙홀 안으로 빠져듭니다.
   • 사물을 흡수하면 EXP 게이지가 쌓이며 100% 도달 시 LEVEL UP과 함께 블랙홀의 크기가 커지고 카메라 시야가 넓어집니다.
4. 대형 건물 흡수:
   • 레벨이 오를수록 자동차, 나무 -> 주택, 가스충전소 -> 아파트, 초고층 마천루 빌딩까지 삼킬 수 있게 됩니다!

🏆 고득점 꿀팁 (Tips & Strategy)

• 초반 동선 최적화: 게임 시작 직후엔 삼킬 수 있는 라콘, 쓰레기통, 벤치 밀집 구역으로 신속히 이동하여 레벨 2를 빠르게 달성하세요.
• 콤보 유지하기: 2초 이내에 끊임없이 다음 사물을 흡수하면 콤보 멀티플라이어가 유지되어 점수가 폭발적으로 증가합니다.
• AI 배틀 모드 팁: 나보다 작은 AI 블랙홀을 발견하면 추격하여 삼켜버리세요! AI 라이벌을 삼키면 5,000점의 대량 득점을 획득할 수 있습니다.

❓ 자주 묻는 질문 (FAQ)

Q. 3D 블랙홀(3D Hole) 게임은 무료인가요?
A. 네, 완전히 무료이며 회원가입이나 앱 설치 없이 PC와 모바일 웹 브라우저에서 바로 즐기실 수 있습니다.

Q. 모바일에서 가상 D-Pad 조작으로 변경할 수 있나요?
A. 네! 메인 메뉴의 ‘조작 방식’ 설정에서 ‘가상 조이스틱’과 ‘가상 D-Pad (방향키)’ 중 편한 조작 옵션을 선택할 수 있습니다.

Q. 점수가 저장되지 않나요?
A. 최고 기록은 사용 중인 브라우저의 localStorage에 자동으로 보존됩니다. 브라우저 저장 데이터를 삭제하지 않으시면 기록이 항상 유지됩니다.

처음에는 캔과 라바콘처럼 작은 물체만 삼킬 수 있습니다. 크기가 커지면 상자와 벤치, 나무, 자동차가 차례로 먹잇감이 되고 마지막에는 주택과 빌딩까지 도시 블록째 빨아들일 수 있습니다. 빠르게 다음 목표를 찾아 이동하고 연속 흡수 체인을 유지해 최고 점수를 경신해 보세요.

게임 특징

• 75초 타임 어택
  한 판은 1분 15초 동안 진행됩니다. 짧고 집중도 높은 플레이로 언제든 가볍게 기록에 도전할 수 있습니다.

• 단계적으로 확장되는 흡수 대상
  캔, 라바콘, 상자, 벤치, 나무, 자동차, 키오스크, 주택, 빌딩까지 총 9종의 도시 오브젝트가 등장합니다. 현재 블랙홀보다 큰 물체는 삼킬 수 없으므로 작은 대상부터 차근차근 흡수해야 합니다.

• 최대 SIZE 10 성장 시스템
  물체를 삼킬 때마다 블랙홀이 조금씩 커집니다. 크기 단계가 올라가면 더 큰 사물을 흡수할 수 있고 HUD의 성장 게이지에서 다음 단계까지 남은 진행도를 확인할 수 있습니다.

• 연속 흡수 체인과 점수 배율
  약 1.35초 안에 다음 물체를 연속으로 삼키면 체인이 이어집니다. 체인을 길게 유지하면 점수 배율이 상승하며 최대 5배까지 적용됩니다.

• Canvas 기반 아이소메트릭 도시
  별도의 3D 엔진 없이 HTML Canvas로 도시의 높이, 그림자, 원근감, 블랙홀 소용돌이와 오브젝트 낙하 효과를 표현했습니다. 보라색 보이드와 애시드 라임 포인트를 활용한 VOID DISTRICT 테마가 적용되어 있습니다.

• PC와 모바일을 모두 지원하는 조작 방식
  PC에서는 WASD 또는 방향키로 이동할 수 있습니다. 모바일과 태블릿에서는 화면을 원하는 방향으로 밀거나 좌측 하단의 가상 D-Pad를 사용할 수 있습니다.

• 로컬 최고 기록 자동 저장
  최고 점수, 최대 크기, 한 판에서 삼킨 물체 수, 최대 체인이 브라우저의 localStorage에 저장됩니다. 같은 브라우저에서 다시 접속하면 기존 최고 기록이 메인 화면에 표시됩니다.

• 브라우저 합성 효과음
  흡수, 크기 상승, 게임 종료 효과음을 Web Audio API로 실시간 생성합니다. 우측 하단의 SFX ON/OFF 버튼으로 언제든 소리를 끌 수 있습니다.

조작 방법

PC

• 이동: W, A, S, D
• 이동: 방향키 ↑, ←, ↓, →
• 일시 정지: 화면 상단의 Ⅱ 버튼
• 사운드 전환: 화면 우측 하단의 SFX ON/OFF 버튼

모바일·태블릿

• 화면을 누른 채 원하는 방향으로 밀어 이동
• 화면 좌측 하단의 가상 D-Pad로 상하좌우 이동
• 스와이프와 D-Pad를 상황에 따라 함께 사용 가능

플레이 방법

1. 메인 화면에서 작전 시작을 눌러 75초 타임 어택을 시작합니다.
2. 처음에는 캔과 라바콘을 우선 찾아 블랙홀의 크기를 키웁니다.
3. HUD의 SIZE와 성장 게이지를 확인하며 현재 삼킬 수 있는 물체를 선택합니다.
4. 물체의 중심을 블랙홀 안쪽으로 통과시키면 물체가 회전하며 아래로 빨려 들어갑니다.
5. 가능한 한 이동을 멈추지 말고 가까운 물체를 연속으로 흡수해 체인과 점수 배율을 유지합니다.
6. 시간이 끝나면 최종 점수, 삼킨 물체 수, 최대 크기, 최대 체인과 로컬 최고 기록을 확인할 수 있습니다.

고득점 팁

• 초반에는 작은 물체 밀집 지역을 공략하세요.
  캔과 라바콘은 시작 크기에서도 바로 삼킬 수 있습니다. 큰 물체 주변을 맴돌기보다 작은 대상을 빠르게 이어 먹는 편이 성장 속도가 빠릅니다.

• 현재 크기에 맞는 목표를 선택하세요.
  새 크기 단계에 도달하면 상자, 벤치, 나무처럼 점수가 더 높은 대상을 바로 찾아 이동하세요. 큰 물체일수록 성장량과 기본 점수가 높습니다.

• 한곳에서 멈추지 마세요.
  체인 유지 시간은 길지 않습니다. 하나를 삼키는 동안 이미 다음 물체가 있는 방향으로 이동하면 연속 흡수가 쉬워집니다.

• 자동차와 건물을 적극 활용하세요.
  자동차부터 점수와 성장량이 크게 올라갑니다. 충분히 성장한 뒤에는 작은 물체보다 키오스크, 주택, 빌딩을 우선 노리는 것이 효율적입니다.

• 필드 가장자리를 오래 따라가지 마세요.
  이동 가능한 도시는 원형 경계 안에 있습니다. 가장자리에서 막히면 체인이 끊기기 쉬우므로 중앙 도로로 복귀하는 동선을 확보하세요.

자주 묻는 질문

Q. 3D Hole SOL은 무료인가요?
A. 네. 회원가입, 결제, 설치 없이 PC와 모바일 웹 브라우저에서 바로 플레이할 수 있습니다.

Q. 실제 3D 엔진을 사용하는 게임인가요?
A. 별도의 3D 라이브러리는 사용하지 않습니다. HTML Canvas의 도형, 높이, 그림자, 투영과 깊이 정렬을 이용해 가벼운 아이소메트릭 3D 스타일을 구현했습니다.

Q. 게임 모드가 여러 개인가요?
A. 현재 버전은 75초 동안 최고 점수를 겨루는 단일 타임 어택 모드로 구성되어 있습니다.

Q. 모바일에서 조작할 수 있나요?
A. 네. 게임 화면을 스와이프하거나 가상 D-Pad를 눌러 이동할 수 있습니다. 별도의 조작 설정은 필요하지 않습니다.

Q. 어떤 기록이 저장되나요?
A. 최고 점수와 함께 최대 크기, 최다 흡수 수, 최대 체인이 현재 브라우저에 저장됩니다. 브라우저 사이트 데이터를 삭제하거나 다른 브라우저를 사용하면 기록이 공유되지 않습니다.

Q. 게임이 자동으로 멈추는 경우가 있나요?
A. 다른 탭으로 이동하거나 브라우저를 최소화하면 진행 중인 게임이 자동으로 일시 정지됩니다. 돌아온 뒤 계속하기를 누르면 이어서 플레이할 수 있습니다.

사용 방법

1. 앱을 열고 화면에 표시된 초기 설정 또는 예시를 먼저 확인합니다.
2. 필요한 값·도구·조작 항목을 바꾸거나 입력해 현재 결과와 미리보기를 확인합니다.
3. 작업 목적에 맞는 설정을 선택한 뒤 앱에서 제공하는 결과 화면 또는 저장·내보내기 기능을 활용합니다.

회식이나 모임 시 점심 메뉴 정하기, 벌칙 당번 뽑기, 순서 결정은 물론, 점수를 걸고 겨루는 행운 점수 챌린지 모드와 로컬 최고점수 저장기능까지 다채로운 재미를 제공합니다.

🎯 주요 특징 (Key Features)

1. 심플하고 세련된 모던 다크 글래스모피즘 UI
   • 세련된 네온 컬러 슬라이스와 60fps 캔버스 물리 감속 애니메이션으로 부드럽고 고급스러운 회전감을 선사합니다.
   • 중앙 SPIN 버튼과 포인터 핀의 실시간 바운스 물리 효과 및 Web Audio API 절차적 음향 효과(바늘 틱 소리, 당첨 경쾌한 팡파르)를 탑재했습니다.
2. 두 가지 게임 모드 지원
   • 제비뽑기 모드: 참가자 이름, 벌칙, 점심 메뉴 등을 직접 입력하거나 당첨 후 항목 자동 제거 기능을 통해 투명하게 결과를 뽑습니다.
   • 행운 점수 챌린지 모드: +100점부터 🎁 JACKPOT +2000점, 💣 폭탄 -200점까지 배치된 룰렛을 돌려 획득 점수를 누적하고 로컬 신기록에 도전합니다.
3. 로컬 최고점수 (lucky_wheel_high_score) 연동
   • 프로젝트명 식별자가 포함된 브라우저 로컬 저장소(lucky_wheel_high_score, lucky_wheel_history, lucky_wheel_presets, lucky_wheel_stats)를 활용하여 역대 최고 점수와 당첨 기록 통계를 영구 보존합니다.
4. 추천 & 나만의 커스텀 프리셋 저장
   • ‘오늘 뭐 먹지?’, ‘벌칙 럭키드롭’, ‘행운의 번호’ 등 자주 사용하는 추천 리스트를 1초 만에 불러올 수 있습니다.
   • 사용자가 직접 작성한 항목 목록을 내 프리셋으로 저장하고 관리할 수 있습니다.
5. 모바일 최적화 & 일괄 입력 기능 지원
   • 터치 반응형 레이아웃 및 캔버스 자동 스케일링으로 스마트폰 세로 화면에서도 잘림 없이 쾌적하게 조작 가능합니다.
   • 줄바꿈이나 쉼표(,)를 이용해 수십 개의 항목도 한 번에 등록 가능한 일괄 입력 모달을 제공합니다.

🕹️ 사용 방법 (How to Play)

1. 항목 등록 및 모드 선택:
   • 상단 탭에서 제비뽑기 모드 또는 점수 챌린지 모드를 선택합니다.
   • 항목 편집 창에서 단일 항목을 입력하거나 줄바꿈/일괄 입력 버튼으로 여러 목록을 한 번에 등록합니다.
   • 추천 프리셋 카드를 눌러 원하는 카테고리를 바로 적용할 수도 있습니다.
2. 돌림판 회전:
   • 화면 중앙의 SPIN 버튼이나 하단의 돌림판 회전하기 버튼을 클릭하여 회전을 시작합니다.
   • 회전 강도(약하게/보통/강하게) 옵션을 변경하여 룰렛이 도는 시간을 조절할 수 있습니다.
3. 결과 확인 및 기록 관리:
   • 룰렛이 멈추면 축하 폭죽 세레머니(Confetti)와 함께 당첨 결과 모달이 노출됩니다.
   • 기록/통계 탭에서 누적 회전 횟수, 최다 당첨 항목 및 로컬 최고 점수를 언제든 확인하실 수 있습니다.

💬 자주 묻는 질문 (FAQ)

Q. 룰렛 당첨 확률은 정당한가요?

A. 네! 캔버스 회전 각도는 물리 기반의 난수 시뮬레이터에 따라 완전하게 무작위 결정되므로 특정 항목의 편향 없이 공정하게 당첨자가 선정됩니다.

Q. 최고 점수나 내가 작성한 프리셋은 어디에 저장되나요?

A. 본 앱은 lucky_wheel_high_score, lucky_wheel_presets, lucky_wheel_history 등 프로젝트명이 명확히 표시된 키값을 통해 사용자의 웹 브라우저 LocalStorage에 안전하게 저장됩니다.

Q. 모바일 화면에서 돌림판 텍스트가 깨지거나 잘리지 않나요?

A. 등록된 항목 수에 맞춰 글자 크기(Font-size)와 텍스트 생략(…) 처리가 자동으로 조절되며 캔버스가 모바일 해상도에 맞게 리사이징되므로 깔끔하게 감상하실 수 있습니다.

소프트웨어 설치나 회원가입, 고사양 그래픽 카드 없이도 스마트폰, 태블릿, PC 브라우저에서 즉시 모듈형 파츠를 조립하여 나만의 3D 캐릭터를 만들고 1-Click 오토 리깅 시스템으로 생동감 있는 포즈와 다양한 무한 루프 애니메이션을 연출할 수 있습니다.

🌟 핵심 주요 기능

1. 🧩 모듈형 3D 캐주얼 캐릭터 생성기 (Modular Builder)
   • 4가지 독자적 프리셋 템플릿: 사이버 나이트(Cyber Knight), 사이버 에이전트(Cyber Agent), 판타지 마법사(Arcane Sorcerer), 메카 트루퍼(Mecha Trooper).
   • 다양한 파츠 조립: 왕관, 마법 모자, 캡모자, 악마 뿔, 천사 링 등 머리 장식과 네온 바이저, 전술 선글라스, 천사/박쥐 날개, 제트팩, 영웅 망토, 마법 지팡이, 광선검 등 손 장착 무기/아이템 지원.
   • 실시간 신체 비율 슬라이더: 머리 크기, 몸통 두께, 팔다리 길이를 슬라이더 조작만으로 인형 비율부터 캐릭터 스타일까지 자유롭게 조율.
2. 🕺 3D 지식 제로! 1-Click 오토 리깅 & 포즈 프리셋 (Zero-Knowledge Rigging)
   • 뼈대(Bone) 구조나 복잡한 IK/FK 웨이트 칠 작업 없이 관절이 자동으로 생성되어 결합되며 관절 교차 방지 클램핑 엔진이 내장되어 유연하게 포즈가 완성됩니다.
   • 1-Click 포즈 라이브러리: 기본 대기(Idle), 영웅적인 히어로 랜딩(Hero Landing), 반가운 안녕(Wave), 승리의 만세(Victory), 질주 스탠스(Run), 힙합 댄스(Dance), 생각하는 자세(Think), 공중 표류(Float) 등 클릭 한 번으로 부드러운 0.25초 보간 애니메이션 적용.
   • 3D 인터랙티브 관절 핀 (Gizmo): 뷰포트 내 16개 관절 핀을 직접 터치하거나 회전 슬라이더를 통해 마이크로 포즈 수정 가능.
3. 🎬 무한 루프 애니메이션 모션 엔진 (Motion Studio)
   • 다양한 라이브 모션: 잔잔한 숨쉬기 대기(Idle Breathe), 신나는 바운스(Happy Bounce), 360° 회전 쇼케이스(Turntable), 손회오리 인사(Hand Wave), 무중력 표류(Floating Drift), 경쾌한 걸음(Walk Cycle), 흥겨운 트위스트(Dance Funky).
   • 모션 파라미터 조작: 애니메이션 속도(0.2x~2.0x) 및 바운스/움직임 강도를 실시간 조정하여 원하는 연출 구현.
4. ✨ 전문적인 현대 스타일 쉐이더 & 스튜디오 조명 (Shading & FX)
   • 6가지 고급 머티리얼 프리셋: 파스텔 토이(Pastel Toy), 사이버 네온(Neon Cyber), 점토 스컬프(Clay Sculpt), 글래스 크리스탈(Glass Crystal), 황금 메탈릭(Gold Metallic), 다크 흑요석(Dark Obsidian).
   • PBR ACESFilmic 그래픽스: 3포인트 스튜디오 라이팅과 sRGB 색영역 연동으로 콘솔 3D 게임 수준의 깊이감 렌더링.
   • 파티클 이펙트: 공간에 반짝이는 마법 별, 하트, 사이버 스파크 파티클을 띄워 분위기 연출.
5. 💾 고화질 PNG & 3D OBJ 포맷 내보내기 (Export)
   • 투명 배경 Alpha PNG: 스티커, 이모티콘, 게임 아바타, 웹사이트 소스로 바로 활용 가능한 고화질 PNG 렌더링 다운로드.
   • 표준 3D OBJ 파일 내보내기: 내보낸 OBJ 파일은 Blender, Unity, Unreal Engine 및 3D 프린터 슬라이서 소프트웨어로 가져오기 가능.
   • 프로젝트 저장/불러오기: 브라우저 LocalStorage에 나만의 캐릭터 디자인 세팅을 안전하게 보존.

💡 자주 묻는 질문 (FAQ)

Q. 3D 프로그램을 한 번도 다뤄본 적 없는 초보자도 바로 만들 수 있나요? A. 네, 전혀 문제없습니다. Easy 3D Studio는 가볍고 직관적인 UI로 구성되어 있어 복잡한 3D 기술 용어 대신 ‘캐릭터 선택’, ‘포즈 누르기’, ‘재질 색상 바꾸기’ 버튼 클릭 몇 번만으로 고품질 3D 결과물을 완성할 수 있습니다.

Q. 모바일 스마트폰이나 태블릿에서도 원활하게 작동하나요? A. 네, 모바일 최적화 인터페이스를 탑재했습니다. 스마트폰 화면 하단에 모바일 전용 탭 바(캐릭터, 포즈, 모션, 스타일, 저장)와 슬라이드 아코디언 메뉴가 적용되어 있어 한 손 터치 조작으로 3D 뷰포트를 시원하게 보며 작업할 수 있습니다.

Q. 생성된 3D 캐릭터를 게임 개발이나 3D 프린팅에 사용할 수 있나요? A. 네, 완벽 지원합니다. 상단 메뉴 또는 내보내기 탭에서 ‘3D OBJ 메쉬 다운로드’ 버튼을 누르면 메시 형태가 포함된 3D 포맷(.obj)이 추출됩니다. 이 파일을 Unity/Unreal Engine에 배치하거나 3D 프린팅 슬라이서(Cura 등)로 불러와 출력할 수 있습니다.

📊 3D 재질 쉐이더 프리셋 시각적 특징 비교

🛠️ Easy 3D Studio 사용 워크플로우

1. 캐릭터 베이스 및 파츠 선택: 좌측(모바일은 하단) [캐릭터] 탭에서 베이스 템플릿(치비 히어로, 로봇, 동물 등)을 고른 후 모자, 날개, 장착 아이템을 조합합니다.
2. 신체 비율 조절: 슬라이더를 움직여 대가리가 큰 대두 스타일이나 긴 팔다리 비율로 개성 있게 다듬습니다.
3. 1-Click 포즈 & 관절 교정: [포즈] 탭에서 마음에 드는 동작 버튼(히어로 랜딩, 댄스 등)을 눌러 즉시 관절을 꺾고 필요시 3D 관절 핀을 뷰포트에서 클릭하여 미세 조정합니다.
4. 모션 애니메이션 선택: [애니메이션] 탭에서 360° 회전이나 바운스, 무중력 표류 등 라이브 루프 애니메이션을 활성화하고 속도를 맞춥니다.
5. 재질 스타일링 & 조명 연출: [스타일] 탭에서 네온/파스텔/글래스 쉐이더와 메인 색상을 입히고 배경 무드 및 파티클을 켭니다.
6. PNG / 3D OBJ 추출: [내보내기] 탭에서 투명 배경 PNG 이미지 또는 3D 프린팅/게임용 OBJ 모델 파일로 다운로드합니다.

사용 방법

1. 앱을 열고 화면에 표시된 초기 설정 또는 예시를 먼저 확인합니다.
2. 필요한 값·도구·조작 항목을 바꾸거나 입력해 현재 결과와 미리보기를 확인합니다.
3. 작업 목적에 맞는 설정을 선택한 뒤 앱에서 제공하는 결과 화면 또는 저장·내보내기 기능을 활용합니다.

전문적이고 현대적인 다크 시보그/판타지(Sleek Modern Dark Fantasy) UI 디자인, Web Audio 효과음 엔진, 절차적 몬스터 마력 이펙트 캔버스, 6대 능력치 스탯 차트를 통해 드래곤, 불사자, 악마, 환수, 정령, 기계구조체 등 독창적인 몬스터의 독자적 명칭, 위험 등급, 세부 능력치, 전투 패턴 & 약점, 고유 스킬 영창, 토벌 드롭 아이템, 골드 가치 그리고 깊이 있는 배경 생태 서사를 완벽하게 창조해 드립니다.

🌟 주요 기능 및 특징 (Key Features)

• 9대 종족 & 속성 시스템: 드래곤, 마수, 불사자(언데드), 악마, 정령, 거인, 변이체, 환수, 기계구조체 등 9가지 종족 및 8대 마력 속성(화염, 빙결, 뇌전, 맹독, 암흑, 신성, 비전, 혼돈) 완벽 매핑
• 위험 등급(Threat Rank) 체계: F급(일반)부터 S급(재앙), SS급(멸망), SSS급(신화)까지 등급에 따른 오라 이펙트와 역동적인 스탯 시각화
• 커스텀 마수 연금 (Custom Bestiary): 무작위 생성뿐만 아니라 사용자가 지정한 종족, 위험 등급, 속성, 서식지 조건으로 몬스터를 맞춤 제작하는 커스텀 각인 모드
• 10연속 던전 탐사 모드 (10x Dungeon Encounter): 10마리의 마수를 연속으로 조우하고 원하는 몬스터를 도감에 일괄 추가하는 연출 시뮬레이터
• 몬스터 토벌 시뮬레이션 (Raid Simulator): 모의 토벌 버튼을 통해 생성된 몬스터와 전투를 벌이고 전리품 및 경험치 보상을 획득하는 인터랙티브 모드
• 절차적 마수 이펙트 캔버스 (Canvas Emblem): 몬스터의 속성과 종족에 따라 고유의 마력 아우라, 눈빛, 룬 문양이 캔버스에 실시간 연출
• Web Audio 사운드 엔진: 몬스터 포효, 스킬 발동, 탭 전환 효과음 지원 (상단 온/오프 토글)
• 도감(Bestiary) 보관함 & 텍스트/카드 이미지 내보내기: 원클릭 클립보드 복사(일반 텍스트 / 마크다운) 및 완성된 몬스터 도감 카드의 PNG 이미지 다운로드, 브라우저 로컬 저장 지원
• 모바일 퍼스트 최적화: 스마트폰 터치 환경을 위한 모바일 전용 탭 바(생성기, 토벌전, 도감, 설정) 및 반응형 모던 다크 UI 적용

📖 사용 방법 (How to Use)

1. 탐사/생성 모드 선택: ‘무작위 탐사’ 버튼을 눌러 순식간에 마수를 창조하거나 ‘커스텀 각인’ 탭에서 종족, 등급, 속성을 지정하여 창작합니다.
2. 10연속 몬스터 탐사: ‘10연속 던전 조우!’ 버튼으로 10종의 마수를 일괄 발견하고 마음에 드는 몬스터를 클릭하여 도감에 수집하세요.
3. 모의 토벌전 (Raid Battle): 생성된 마수 카드의 ‘⚔️ 토벌 시뮬레이션’ 버튼을 누르면 마수의 약점 공격 및 전리품 획득 과정을 실시간으로 체감할 수 있습니다.
4. 이미지 저장 및 복사: ‘ PNG 카드 다운로드’ 또는 ‘ 텍스트 복사’, ‘ 마크다운 복사’ 버튼을 이용해 웹소설 집필 프로그램이나 TRPG 시트에 반영하세요.
5. 도감 보관: 🔖 버튼으로 나만의 몬스터 도감에 추가하고 원할 때 언제든 다시 불러올 수 있습니다.

❓ 자주 묻는 질문 (FAQ)

Q1. 생성된 몬스터의 이름, 스킬, 설정 스토리를 웹소설 및 상용 게임에 사용할 수 있나요? A. 네, 본 생성기를 통해 출력되는 모든 명칭, 스킬, 약점 설정, 배경 서사는 저작권 제약 없이 상업적/비상업적 소설 연재, 게임 제작, TRPG 세션 등에 자유롭게 활용하실 수 있습니다.

Q2. 몬스터 카드를 PNG 이미지 파일로 저장할 수 있나요? A. 네, 카드의 다운로드 버튼을 클릭하면 HTML5 Canvas 기반으로 아름답게 포맷팅된 PNG 이미지가 즉시 생성 및 저장됩니다.

Q3. 모바일 기기에서도 원활하게 이용할 수 있나요? A. 네, 터치에 터치 친화적인 Bottom Navigation Tab과 모바일 최적화 레이아웃으로 스마트폰 및 태블릿에서도 쾌적하게 사용하실 수 있습니다.

세련된 모던 다크 판타지(Modern Dark Fantasy) 아키텍처, Web Audio 효과음 엔진, 시각적 마력 이펙트 캔버스를 통해 무기, 방어구, 마도서, 신기의 독창적인 명칭, 세부 능력치, 전용 스킬, 라틴어/룬 고어 마법 영창, 세트 효과, 추천 직업, 골드 시세 평가 그리고 깊이 있는 배경 서사를 완벽하게 완성해 드립니다.

🌟 주요 기능 및 특징 (v2.0 Upgrade)

• 다양한 카테고리 지원: 대검·단검·지팡이·활 등의 무기, 판금·로브·투구 등의 방어구, 마도서/스크롤, 신성 아티팩트, 장신구 등 다양한 카테고리 지원
• 세분화된 등급 & 속성 체계: 일반(Common)부터 전설(Legendary), 신화(Mythic) 등급 및 화염, 빙결, 뇌전, 암흑, 신성, 비전, 혼돈 등 8대 마력 속성 매핑
• 수동 각인 & 커스텀 연금 모드: 무작위 자동 생성 외에도 원하는 아이템 이름, 마력 보석 소켓(루비, 사파이어, 에메랄드, 다이아몬드), 세트 효과를 직접 입력하여 커스텀 아티팩트 제작 지원
• 10연속 전리품 상자 개봉 시뮬레이터: 10개의 보물상자를 연속으로 개봉하여 등급별 전리품을 획득하고 원하는 아이템을 일괄 저장할 수 있는 연출 기능
• 절차적 마력 룬 캔버스(Procedural Canvas Emblem): 속성과 카테고리에 맞춰 캔버스에 마법 아우라와 룬 아이콘을 실시간 렌더링
• 전용 스킬 & 영창 연출: 고유 마력 옵션과 함께 소설 감성을 극대화하는 라틴어/룬 고어 스타일 마법 영창 텍스트 연출
• +15 아이템 마력 제련소 (Enhancement Chamber): 생성된 아이템의 마력을 강화하여 능력치 상승 및 확률 시뮬레이션 경험 제공
• Web Audio 사운드 오디오 엔진: 마력 제련 망치 소리, 강화 성공 및 실패 사운드 효과음과 토글 버튼 제공
• 스마트 보관함 & 텍스트/이미지 내보내기: 원클릭 클립보드 복사(일반 텍스트 / 마크다운) 및 완성된 아이템 카드의 PNG 이미지 다운로드, 로컬 보관함 저장 지원
• 완벽한 모바일 최적화: 스마트폰 touch 환경에서도 직관적인 모바일 탭 바 및 반응형 다크 스타일 제공

📖 사용 방법 (How to Use)

1. 연금 모드 선택: ‘무작위 연금’ 모드로 무작위 아이템을 빠르게 창조하거나 ‘커스텀 각인’ 모드로 원하는 명칭과 보석, 세트 효과를 지정합니다.
2. 10연속 전리품 개봉: ‘10연속 전리품 상자 개봉!’ 버튼을 누르면 연출 효과와 함께 10종의 아티팩트가 드롭되며 마음에 드는 아이템을 클릭하거나 전체 보관함에 일괄 저장할 수 있습니다.
3. 제련 강화 시뮬레이션: 상단 탭의 ‘강화소’ 메뉴에서 생성된 보물을 +15 단계까지 제련하여 더 높은 전투력과 강화 보너스를 부여해보세요.
4. 결과 복사 및 이미지 저장: ‘텍스트 복사’, ‘마크다운 복사’, 또는 ‘카드 이미지 다운로드’ 버튼을 사용하여 웹소설 집필 프로그램이나 TRPG 시트에 즉시 적용합니다.
5. 보관함 보관: 마음에 드는 아티팩트는 🔖 버튼을 눌러 브라우저 보관함에 저장하고 필요할 때 언제든 다시 불러올 수 있습니다.

❓ 자주 묻는 질문 (FAQ)

Q1. 생성된 아이템 이름과 스킬, 서사 설정을 상업적 웹소설이나 게임 제작에 활용할 수 있나요? A. 네, 본 생성기를 통해 출력되는 모든 명칭, 스킬 묘사, 마법 영창, 배경 스토리는 저작권 제약 없이 상업적/비상업적 소설 연재, 웹툰 시나리오, 게임 개발, TRPG 세션 등에 자유롭게 변형 및 사용하실 수 있습니다.

Q2. 생성된 아이템 카드를 이미지로 소장하거나 웹에 공유할 수 있나요? A. 네, 상단 툴바의 다운로드 버튼을 누르면 정교하게 구성된 아이템 카드가 PNG 이미지 파일로 즉시 생성되어 스마트폰이나 PC에 저장됩니다.

Q3. 모바일 기기에서도 동일하게 모든 기능을 사용할 수 있나요? A. 네, 모바일 디스플레이 환경에 완벽히 대응하는 모바일 전용 탭 바(설정, 카드, 강화소, 보관함) 및 터치 친화적 인터페이스가 적용되어 스마트폰과 태블릿에서도 100% 동일한 고품질 기능을 이용하실 수 있습니다.

로컬 웹 기술을 활용해 이미지 파일이 외부 서버로 업로드되지 않으므로 안심하고 안전하게 개발 작업을 진행하실 수 있습니다.

🌟 핵심 주요 기능

• 層 고성능 다중 레이어 시스템:
  • 배경(Background), 지면/장애물(Ground), 상단 장식(Decoration) 등 다수의 레이어를 분리하여 작업할 수 있습니다.
  • 레이어 순서 정렬, 개별 잠금(Lock), 숨김(Visibility), 불투명도 설정을 지원하여 겹침 표현이 있는 세련된 2D 환경을 구현할 수 있습니다.
• 🎨 3가지 고품질 테마 타일셋 기본 탑재:
  • 도구를 실행하자마자 바로 그리기를 시작할 수 있도록 엄선된 3가지 그래픽 테마를 내장하고 있습니다:
    1. 판타지 던전 테마: 돌 벽, 벽돌 바닥, 물/용암, 보물상자(열림/닫힘), 계단, 횃불, 포션, 열쇠 등.
    2. 레트로 초원 테마: 푸른 하늘, 구름, 잔상 없는 잔디 언덕, 흙 타일, 상자, 하트, 코인, 사다리, 가시, 얼음 블록 등.
    3. 사이버 시티 테마: 금속 강판, 네온 라인 플로어, 경고선(허저드), 회로망 벽면, 터미널 모니터, 순간이동 패드, 독극물 드럼통 등.
• 🛠️ 정교하고 전문적인 드로잉 툴킷:
  • 스마트 브러시 (Paint): 타일을 마우스 드래그로 그리며 타일셋에서 드래그하여 다중 타일을 선택하면 그 배열 그대로 캔버스에 도장을 찍듯이(Stamp Painting) 한 번에 그려집니다.
  • 지우개 (Erase): 그려진 타일을 개별적으로 제거합니다.
  • 버킷 채우기 (Flood Fill): 동일한 타일이나 빈 영역을 똑똑하게 탐색해 광역 채우기를 수행합니다.
  • 스포이트 (Picker): 캔버스를 클릭하여 배치된 타일 ID를 즉시 그리기 붓으로 선택합니다.
  • 영역 복사 도구 (Stamp Select): 캔버스 지도의 일부분을 사각형으로 드래그하여 복사한 뒤 이를 복합 브러시 삼아 지도상의 다른 부분에 그대로 붙여넣을 수 있습니다.
• 🛡️ 통합 물리 충돌(Collision) 및 태그 에디터:
  • 타일셋의 특정 타일을 클릭하고 ‘물리적 충돌 레이어 (통과 불가)’를 켜두면 맵 설계 시 자동으로 충돌 속성이 동기화됩니다.
  • 충돌 오버레이 (C) 단축키를 눌러 맵 상의 통과 불가능 격자를 붉은색 표시로 시각화해 맵 동선을 즉시 검증할 수 있습니다.
  • 타일마다 spawn, portal, chest-01 등 커스텀 속성 태그를 부여하여 데이터를 함께 수집할 수 있습니다.
• 📱 모바일 & 태블릿 제스처 완벽 지원:
  • 모바일 터치 장치에서도 두 손가락 핀치 줌(Pinch-to-zoom)을 통한 캔버스 확대/축소 및 화면이동(Panning)이 하드웨어 가속 수준으로 매끄럽게 동작합니다.
  • 화면이 좁은 모바일에서는 하단 탭 내비게이션을 지원해 캔버스 화면과 우측 팔레트 설정 창을 효율적으로 전환할 수 있습니다.
• 💾 외부 입출력 포맷:
  • 투명 PNG 병합 저장: 배경을 투명하게 유지한 채 모든 활성화된 레이어를 하나로 합성해 고화질의 완성형 PNG 레벨 맵 이미지로 다운로드합니다.
  • JSON 데이터 내보내기/가져오기: 맵의 타일 인덱스 1D 배열, 레이어 정보, 타일 속성 딕셔너리, 커스텀 타일셋 이미지(Base64)가 포함된 JSON 메타데이터를 받아 Unity, Phaser, Cocos2d-x, Godot 등 외부 게임 엔진 리소스로 바로 매핑하여 사용하거나 작업 파일을 안전하게 보관할 수 있습니다.
  • 커스텀 타일셋 업로드: 내장 프리셋 외에도 자신이 소장한 PNG 형태의 스프라이트 타일 이미지를 올리고 그리드 크기를 골라 자신만의 타일맵을 즉시 구성할 수 있습니다.

🛠️ 사용 방법 (How to Use)

1. 테마 타일셋 고르기: 우측의 타일셋 탭에서 던전, 초원, 사이버 시티 중 하나를 고릅니다. 혹은 본인의 이미지 파일을 아래 드롭존에 업로드해도 됩니다.
2. 타일 선택: 팔레트에서 그릴 타일을 클릭하거나 드래그하여 여러 장을 묶음 선택합니다.
3. 그리기: 왼쪽 도구바에서 브러시(B)나 채우기(F)를 선택하고 캔버스에 그립니다. 캔버스 화면을 옮기려면 스페이스바를 누른 채 드래그하거나 팬(Pan) 도구를 이용하세요. 마우스 휠 스크롤로 가볍게 배율을 조정할 수 있습니다.
4. 레이어 구분: 우측 두 번째 탭인 ‘레이어 및 맵 설정’에서 새 레이어를 추가하거나 특정 레이어를 끄고 키며 디테일을 채웁니다.
5. 충돌 설정: 장애물(벽, 가시 등)로 지정할 타일을 선택한 뒤 우측 하단에서 ‘물리적 충돌 레이어’를 켜줍니다. 좌측 도구 바 하단의 방패 아이콘(C)을 켜면 맵에 적용된 충돌박스 현황이 붉은색으로 오버레이됩니다.
6. 레벨 리소스 내보내기: 작업이 완료되면 상단 우측의 ‘JSON 내보내기’로 맵 원본 데이터를 저장하고 ‘이미지 저장’으로 게임 맵 배경 텍스처를 다운로드합니다.

💬 자주 묻는 질문 (FAQ)

• Q1. JSON 코드를 다른 게임 엔진에서 어떻게 활용하나요?
  • A. 내보내진 JSON 파일은 각 레이어 이름별로 cols * rows 크기만큼 1차원 정수 배열(data)을 담고 있습니다. -1은 빈 공간이며 0 이상의 정수는 타일셋 이미지 상의 1차원 인덱스를 지칭합니다. 게임 코드에서 JSON 파일을 파싱한 뒤 해당 인덱스대로 타일 이미지를 쪼개 루프를 돌려 출력하면 그대로 게임 맵이 재현됩니다.
• Q2. 가로세로 맵 칸 크기를 40x40 이상으로 확장하고 싶습니다.
  • A. 우측의 ‘설정 & 레이어’ 탭 하단에서 가로 칸수(Cols)와 세로 칸수(Rows) 입력란에 원하는 크기를 입력한 뒤 ‘크기 변경 적용’을 클릭해 언제든지 동적으로 크기를 늘릴 수 있습니다. 기존에 배치된 타일맵 데이터는 왼쪽 상단 기준으로 온전히 보존됩니다.
• Q3. 복사 도장(스탬프) 기능은 어떻게 쓰나요?
  • A. 좌측 툴바에서 점선 사각형 모양의 ‘스탬프 복사(S)’ 도구를 선택한 뒤 캔버스 맵 위에 복사하고 싶은 영역을 사각형으로 쭉 드래그합니다. 마우스를 떼는 순간 선택한 영역의 다중 레이어 구조가 복사되며 그리기 툴로 자동 전환됩니다. 이후 그리고 싶은 위치에 갖다 대면 미리보기가 보이고 클릭하면 한 번에 붙여넣기가 완성됩니다.

로컬 웹 기술을 활용해 이미지 파일이 외부 서버로 업로드되지 않으므로 안심하고 안전하게 개발 작업을 진행하실 수 있습니다.

🌟 핵심 주요 기능

• 🏃‍♂️ 풍부한 빌트인 데모 캐릭터 프리셋:
  • 도구를 열자마자 즉시 테스트할 수 있도록 픽셀 전사 달리기, 통통 슬라임 점프, 마법 폭발 이펙트의 3가지 고품질 애니메이션 프리셋을 제공합니다.
• 📁 강력한 프레임 가져오기:
  • 개별 파일 업로드: 다중 파일 선택을 지원하며 파일명을 기준으로 자연스럽게 정렬하여 타임라인 프레임으로 삽입합니다.
  • 스프라이트 시트 격자 슬라이싱: 하나의 시트 이미지를 행(Rows)과 열(Cols) 크기로 자동 분할하여 프레임으로 분리해줍니다.
• 🎯 정밀한 피벗(Pivot/기준점) 에디터:
  • 캐릭터의 회전/이동의 중심이자 물리 위치의 중심이 되는 피벗을 마우스 더블클릭이나 수치 제어로 변경할 수 있습니다.
  • 특정 프레임의 피벗 위치를 전체 프레임에 한번에 덮어씌우는 일괄 적용 기능도 완비되어 있습니다.
• ⚔️ 공격/피격 충돌 판정 상자 (Hitbox/Hurtbox):
  • 2D 액션, 대전, RPG 게임 등에서 필수적인 피격 범위(Hurtbox, 청색) 및 공격 리치 범위(Hitbox, 적색)를 마우스로 직접 드래그하여 그릴 수 있습니다.
  • 생성된 상자의 크기와 위치, 라벨 이름을 개별 편집하고 모든 프레임에 일괄 복사할 수 있습니다.
• 🧅 어니언 스킨 (Onion Skinning):
  • 현재 프레임의 앞/뒤 프레임을 반투명한 붉은색과 초록색 잔상으로 겹쳐 표시해 주어 모션 간의 연결성을 눈으로 보며 자연스럽게 교정할 수 있습니다.
• 💾 다양한 내보내기 포맷:
  • 스프라이트 시트 (PNG): 개별 프레임들을 하나의 가로 스트립 시트로 자동 배치하여 다운로드합니다.
  • GIF 애니메이션 (GIF): 프레임들을 설정된 속도(FPS)에 맞춰 즉시 재생되는 루프 형태의 움짤 파일로 변환하여 다운로드합니다. (256컬러 제한, 단색 배경으로 처리됨)
  • APNG 애니메이션 (PNG): 32비트 무손실 투명도(Alpha Channel)를 완벽히 지원하는 움직이는 PNG 포맷으로 다운로드합니다. 원본의 반투명 픽셀이나 투명 배경을 온전히 활용할 수 있어 게임 엔진 리소스용으로 매우 훌륭합니다.
  • WebP 애니메이션 (WebP): 현대적인 고압축 이미지 포맷인 움직이는 WebP 파일로 내보냅니다. 투명도를 완벽히 지원하면서도 용량이 극적으로 가벼워 웹 서비스 배포 및 인게임 리소스 최적화에 탁월합니다.
  • 좌표 데이터 (JSON): 게임 엔진(Unity, Godot, Cocos, WebGL 등)에 주입할 수 있도록 각 프레임의 물리 크기, 피벗, 충돌박스 Rect 배열을 구조화하여 내보냅니다.
  • 프로젝트 세이브/로드 (JSON): 편집 중인 전체 레이아웃 상태(이미지 Base64 소스 포함)를 세이브 파일로 저장하여 나중에 그대로 이어서 작업할 수 있습니다.

🛠️ 사용 방법 (How to Use)

1. 테스트 캐릭터 선택: 상단 ‘데모 캐릭터 불러오기’에서 전사, 슬라임, 이펙트 중 하나를 클릭하여 도구의 기본 작동을 확인해 봅니다.
2. 새 프레임 등록:
   • ‘전체 삭제’를 눌러 비운 뒤 개별 이미지 여러 장을 드래그해서 넣거나 하나의 시트 이미지를 올린 뒤 행/열 개수를 적고 ‘격자 슬라이싱’을 누릅니다.
3. 애니메이션 제어:
   • 중앙의 플레이어 인터페이스로 속도(FPS)를 조절하고 루프 반복 옵션 및 루프 재생을 확인합니다.
   • 필요 시 캔버스에서 드래그(오른쪽 마우스/Shift 드래그/모바일 터치 드래그) 및 스크롤을 이용해 줌인/아웃하여 세부 디테일을 점검합니다.
4. 피벗 및 히트박스 편집:
   • 편집하려는 특정 프레임 카드를 하단 타임라인에서 클릭합니다.
   • 캔버스 위에서 원하는 위치를 더블클릭하면 피벗이 이동합니다.
   • 캔버스 안에서 마우스를 드래그하면 그 영역만큼 충돌 상자(Hitbox)가 생성됩니다. 우측 패널에서 공격(Hitbox)용인지 피격(Hurtbox)용인지 스위칭하고 라벨을 붙여줍니다.
5. 리소스 출력:
   • 우측 하단의 내보내기 도구를 사용하여 게임 프로젝트에 맞춘 PNG 시트 및 JSON 메타데이터, 또는 간단히 공유하고 활용할 수 있는 GIF, APNG 및 고압축 최적화된 WebP 움짤을 내려받습니다.

💬 자주 묻는 질문 (FAQ)

• Q1. 캔버스 위에 그려지는 피벗과 충돌박스는 이미지 파일에 직접 구워지나요?
  • A. 아닙니다. 피벗과 히트박스는 렌더링에 직접 침범하지 않고 좌표 데이터로 관리됩니다. 이미지는 순수하게 투명한 픽셀 형태 그대로 가공되어 PNG로 내려가고 위치 정보는 동반되는 JSON 텍스트 파일에 기재되므로 게임 엔진 코드 안에서 데이터를 파싱해 사용하시면 됩니다.
• Q2. 모바일 브라우저에서도 사용에 제약이 없나요?
  • A. 네, 모바일 기기의 터치 드래그를 이용한 캔버스 뷰포트 이동과 더블 핑거 핀치-투-줌(Pinch-to-zoom)을 완벽히 하드웨어 가속 수준으로 지원하도록 반응형 제스처 처리가 설계되어 있습니다. 현장에서도 태블릿 등으로 손쉽게 기획 검증이 가능합니다.
• Q3. 다른 프로그램에서 작업하던 프로젝트를 가져오고 싶어요.
  • A. 본 도구의 ‘프로젝트 세이브’는 모든 이미지 픽셀 정보를 인코딩하여 JSON에 저장합니다. 이 JSON 세이브 파일을 ‘프로젝트 로드’를 통해 올리면 외부 서버 없이 즉시 다른 브라우저나 컴퓨터에서도 동일한 프레임들과 히트박스 위치를 그대로 복구하여 로드할 수 있습니다.