✨ SlideFlow
바로가기
SlideFlow는 당신의 흩어진 이미지들을 단 몇 번의 클릭만으로 흐름이 있는 하나의 스토리로 완성합니다.
웹 기반의 인터랙티브 슬라이드쇼 에디터, SlideFlow를 통해 전문가 수준의 동영상 스토리를 가장 빠르고 직관적으로 만들어보세요. 복잡한 타임라인과 어려운 설정에 얽매이지 않고, 당신의 창의력에만 집중할 수 있습니다.
💡 Note: SlideFlow는 데스크톱 환경에 최적화되어 있습니다. 최상의 경험을 위해 PC에서 접속해주세요.
🚀 주요 기능
- 모던하고 직관적인 UI: 전문적인 다크 모드 스튜디오 테마를 적용하여 콘텐츠에 집중할 수 있는 환경을 제공합니다.
- 이미지 라이브러리: 드래그 앤 드롭 또는 파일 선택으로 이미지를 손쉽게 관리합니다.
- 다중 트랙 타임라인: 간트 차트 스타일의 타임라인에서 여러 이미지를 동시에, 다른 트랙에 배치하여 복합적인 연출을 할 수 있습니다.
- 실시간 캔버스 편집: 타임라인에서 슬라이드를 선택하면 중앙 캔버스에 표시되며, 위치, 크기, 회전 등 모든 변경 사항이 실시간으로 반영됩니다.
- 다양한 속성 및 전환 효과: 각 슬라이드의 재생 시간, 화면 순서(zIndex)는 물론, ‘페이드’, ‘슬라이드’, ‘줌’, ‘플립’ 등 다채로운 전환 효과를 설정할 수 있습니다.
- 다중 선택 및 동시 편집: Ctrl/Cmd 또는 Shift 키를 조합하여 여러 슬라이드를 동시에 선택하고 속성을 한 번에 편집하여 작업 효율을 높일 수 있습니다.
- 반응형 캔버스 및 고품질 미리보기:
- 비율 기반 캔버스: 16:9, 4:3 등 원하는 종횡비를 설정하면, 캔버스가 브라우저 크기에 맞춰 반응형으로 조절됩니다.
- 몰입형 전체 화면 미리보기: 헤더와 컨트롤러가 사라진 실제 영상 캔버스 영역만으로 전체 화면을 채워, 완성된 슬라이드쇼를 온전히 감상할 수 있습니다.
- 유연한 작업 공간: 좌우 패널을 접고 펼 수 있어, 현재 작업에 맞게 공간을 최적화할 수 있습니다.
- 프로젝트 가져오기/내보내기: 작업 내용을 이미지 데이터가 포함된 JSON 파일로 저장하고, 언제든지 다시 불러와 작업을 이어갈 수 있습니다.
🔄 최근 변경 사항 (v1.1)
- 캔버스 회전 기능 추가: 이제 캔버스 위의 이미지를 직접 선택하고 회전 핸들을 드래그하여 시각적으로 회전시킬 수 있습니다.
- 터치 장치 지원 개선: 태블릿 및 모바일 장치에서 타임라인 아이템을 드래그 앤 드롭할 수 있도록 수정되었습니다.
- 선택 테두리 개선: 캔버스에서 크기가 조절되거나 회전된 이미지의 선택 테두리가 이제 이미지와 함께 정확하게 표시됩니다.
🛠️ 기술 스택
- 프레임워크: React (Vite)
- 언어: TypeScript
- 핵심 로직: React Hooks
- 드래그 앤 드롭:
@dnd-kit/core,react-draggable - 스타일링: CSS (Creative Studio Dark Theme)
- 아이콘:
react-icons(Feather Icons)
📖 설치 및 실행
- 저장소 복제:
git clone https://github.com/lahuman/slideshow-editor.git cd slideshow-editor - 의존성 설치:
npm install - 개발 서버 실행:
npm run dev - 브라우저에서
http://localhost:5173으로 접속합니다.