Scrolline: 스크롤 흐름으로 이어지는 HTML 발표 자료
원문 읽기 · gongnyang ↗(새 탭에서 열림)Scrolline은 내용 구간과 움직임을 YAML로 정의하고 스크롤과 발표자 키가 같은 타임라인을 움직이도록 설계한 발표 도구다.
무엇인가
- 원 저장소는 단일 무대와 타임라인에 발표 구간을 이어 붙이는 구조, 여섯 콘셉트 예시와 조작법을 설명한다.
- 같은 타임라인의 이미지 캡처와 MP4 내보내기 경로도 문서화한다. 산출물을 직접 만들지는 않았다.
언제 쓰나
- 제품 변화나 로드맵에서 한 장면의 요소를 다음 장면으로 연결해 설명하려는 제작팀에 맞는다.
- 정적 자료로 충분한 보고라면 제작과 유지 비용을 비교해야 한다.
시작 방법
- 예시 여섯 개와 작성 문서를 읽고 설명 목적에 맞는 콘셉트 하나를 고른다.
- 수치 또는 상태 변화 하나를 짧은 구간으로 설계하고 읽기 순서와 움직임 축소 설정을 점검할 계획을 세운다.
적용 조건
- 문서는 Node.js 22 이상과 MP4용 별도 도구를 안내한다. 설치와 실행은 이번 검수 범위가 아니다.
- 코드는 MIT이지만 영상 소재와 의존성에는 별도 조건이 있으므로 공개 사용 전에 각각 확인해야 한다.
실무 적용·편집 해석
- 출시 소개의 문제·변화·결과를 세 구간으로 나누고 같은 도형이나 숫자가 다음 구간에서 갖는 의미를 먼저 적어보는 방식이 유용하다.
- 모바일 성능, 키보드 이용, 움직임 축소와 영상 자산 권리를 실제 제작 기준으로 확인해야 한다.
함께 확인할 조건
- 설치·실행·렌더링 품질을 확인하지 않았다.
- Node.js 22 이상이 필요하고 MP4 내보내기에는 별도 도구가 필요하다고 문서화한다.
- 코드의 MIT 라이선스로 영상 자산이나 모든 의존성의 재사용 권리가 해결되지는 않는다.
- 접근성과 성능은 대상 기기에서 확인해야 한다.
출처와 편집 기준
gongnyang · 오픈소스 저장소 · 자료 확인 2026.10.18 (KST)
요약은 원문의 핵심을 정리했으며, 커머스 인사이트는 편집 해석이다. 용어가 낯설다면 AI 용어 안내를 참고할 수 있다.