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

lahuman

Daniel Lim

✨ 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으로 접속합니다.

SlideFlow :: 이미지를 영샹으로

댓글