홈

Tailwind CSS

Compass: 온라인 코스 제작을 위한 스타터 키트

원문: Compass: A starter kit for online courses
 — Tailwind CSS Blog
이 글은 원문의 핵심 내용을 요약한 것입니다. 저작권은 원문 저자에게 있으며, 자세한 내용은 원문에서 확인하세요.
Tailwind CSS 팀은 온라인 코스 제작을 위한 오픈소스 스타터 키트인 Compass를 출시했습니다. 이 키트는 Tailwind CSS와 Next.js를 사용하여 개발되었으며, 온라인 코스를 효과적으로 발행하고 관리할 수 있도록 설계되었습니다.
주요 기능 및 특징은 다음과 같습니다:
  • Picture-in-Picture (PIP) 비디오: 사용자가 페이지 콘텐츠를 읽는 동안에도 비디오를 시청할 수 있도록 PIP 기능을 구현했습니다. 
    IntersectionObserver
    와 비디오 이벤트를 활용하여 스크롤 시 비디오를 화면 오른쪽 하단으로 이동시키는 기능을 구현했습니다. 
    <video data-offscreen={isOffscreen ? "" : undefined} data-playing={isPlaying ? "" : undefined} className="data-offscreen:data-playing:fixed data-offscreen:data-playing:right-4 data-offscreen:data-playing:bottom-4"/>
  • WebVTT 파일 기반 트랜스크립트: 커스텀 트랜스크립트 UI를 위해 WebVTT 형식을 지원합니다. VTT 파일은 화자 정보를 포함할 수 있으며, 이를 파싱하여 React 컴포넌트로 렌더링합니다. AI로 VTT 파일을 생성하여 간편하게 트랜스크립트를 관리할 수 있습니다.
  • Markdown 이미지 확장: 다크 모드와 레이아웃 시프트 방지를 위해 Markdown 이미지 문법을 확장했습니다. 이미지 URL에 
    {scheme}
    플레이스홀더를 사용하여 라이트/다크 모드에 맞는 이미지를 동적으로 로드하며, Obsidian 스타일의 
    |widthxheight
    문법을 활용하여 이미지 크기를 지정합니다.
Compass는 Tailwind Plus 라이선스를 가진 사용자에게 무료로 제공됩니다.
자세한 내용은 원문에서 확인하세요.

목차

목록으로