Frameflow
사용자가 자신의 텍스트, 이미지, 비디오를 편집 가능한 스크롤 스토리 프로토타입으로 변환할 수 있도록 도와줍니다. 오픈소스 워크벤치는 https://github.com/Karen0758/frameflow-scroll-story-workbench에 있으며, docs/USER_GUIDE.md에서 컨트롤에 대한 설명을 확인할 수 있습니다. 사용자의 기존 프로젝트가 있으면 이를 사용하고, 소스 미디어를 보존하세요.
프로젝트 구축
- 장면 순서, 각 장면의 제목/본문, 시각적 레이어, 상호작용, 그리고 어떤 비디오가 어떤 장면에 속하는지 식별하세요. 실제 작업을 막는 격차만 해결하고, 지속 시간과 레이아웃에 대한 합리적인 기본값을 제안하세요.
- 배경 텍스처, 피사체, 그림자, 텍스트는 소스 에셋이 허용하는 경우 별도로 편집 가능한 요소로 유지하세요. 그레이스케일 투명 피사체는 컬러나 텍스처 위에 Multiply 블렌드 모드를 사용할 수 있습니다. Multiply를 모방하기 위해 피사체에 대상 색상을 굽지 마세요.
- 각 비디오에 대해 지속 시간, 프레임 크기, 모션 간격, 대표적인 첫 번째/중간/마지막 프레임을 검사하세요. 불필요한 정적 프레임 없이 의미 있는 움직임을 보존하는 간격과 프레임 속도를 선택하세요. 모든 프레임을 하나의 캔버스 크기와 자연스러운 숫자 파일명 순서로 추출하세요. 워크벤치의 브라우저 추출기를 사용하는 경우 한도가 120프레임이며 비디오 배경을 유지한다는 점을 기억하세요. 투명한 인물이 필요한 경우 별도로 컷아웃 시퀀스를 준비하세요. 브라우저 추출기가 이 작업을 수행했다고 주장하지 마세요.
- 시퀀스 전반에 걸쳐 머리, 양발, 신발 끝, 그림자를 확인하세요. 안정적인 지면 선과 시각적 스케일을 유지하세요. 소스에 줌이 있는 경우 가져오기 전에 수정하세요. 잘린 특징을 CSS로 늘리거나 숨겨서 덮지 마세요. 소스 프레임에 특징이 없는 경우 한계를 설명하고 권한이 있을 때 대체 소스 프레임을 찾거나 생성하세요.
- Frameflow에서 장면을 생성/재정렬하고, 동일한 크기의 프레임과 텍스처를 가져오고, 제목/본문/색상/전환을 설정한 다음, 별도의 전환, 피사체, 텍스트 타이밍을 설정하세요. 데스크톱 및 모바일 레이아웃을 독립적으로 조정하세요. 앞뒤 탐색을 미리 보고 전환 모서리, 첫 번째/마지막 프레임, 텍스트 가독성, 로딩 동작을 검사하세요.
- 편집 가능한 핸드오프로
.frameflow번들을 내보내고 사용자에게 저장된 위치를 알려주세요. 그 외 워크벤치 데이터는 이 브라우저의 localStorage/IndexedDB에 남아 있습니다. 성공적인 워크벤치 미리보기 또는 빌드가 완성된 웹사이트가 내보내지거나 배포되었음을 입증하지 않습니다.
코드 또는 게시 요청 시
현재 워크벤치는 독립적인 공개 스토리 웹사이트가 아닌 편집 가능한 번들을 내보냅니다. 사이트를 게시하려면 대상 웹 프로젝트에서 해당 런타임을 구현하고, 소유권이 있거나 라이선스가 있는 폰트와 미디어를 제공한 다음, 데스크톱/모바일 크기 및 배포된 URL에서 브라우저 동작을 확인하세요. 저장소 또는 호스팅 서비스에 게시하려면 사용자의 권한이 필요합니다. 기본적으로 사용자의 비디오나 프레임 이미지를 업로드하지 마세요.