TL;DR

  • Rendly는 간단한 도메인 특화 언어(DSL)로 코드를 작성해 전문적인 영상을 제작하는 코드 우선 도구이며, 실시간 미리보기와 WebM 내보내기를 제공함
  • 텍스트·도형·글꼴·색상·배경·애니메이션·장면 지속 시간을 코드로 정의할 수 있음
  • fade in, slide up, pop, bounce 애니메이션과 여러 장면 구성을 지원함
  • Next.js 14, TypeScript, Tailwind CSS, Lucide React, Vercel을 기술 스택으로 사용함
  • MIT 라이선스의 오픈 소스 프로젝트이며, 저장소를 복제하고 의존성을 설치한 뒤 개발 서버를 실행하는 방식으로 시작함

기능

  • 코드 우선 영상 제작: 간단한 DSL 코드를 작성해 전문적인 영상을 생성함
  • 실시간 미리보기: 미리보기 패널에서 변경 사항을 즉시 확인함
  • 여러 장면: 여러 장면으로 구성된 복잡한 영상을 제작함
  • 사용자 지정 애니메이션: 페이드, 슬라이드, 팝, 바운스 애니메이션을 추가함
  • 사용자 지정 글꼴: 텍스트에 원하는 글꼴 패밀리를 사용함
  • 사용자 지정 색상: 텍스트와 배경에 원하는 색상을 지정함
  • 영상 내보내기: 영상을 WebM 형식으로 내보냄
  • 오픈 소스: MIT 라이선스에 따른 무료 오픈 소스 프로젝트임

시작하기

사전 요구 사항

  • Node.js 18 이상
  • npm 또는 yarn

설치

  • 저장소를 복제하고 프로젝트 디렉터리로 이동함
  • https://github.com/mukundzha/rendly.git
  • 의존성을 npm install 또는 yarn install로 설치함
  • npm run dev로 개발 서버를 시작함
  • 브라우저에서 http://localhost:3000에 접속함

작동 방식

  • Rendly는 영상 장면을 정의하기 위해 간단한 도메인 특화 언어(DSL)를 사용함
  • 각 장면은 다음 요소로 구성됨
  • TEXT: 화면에 표시할 콘텐츠
  • FONT: 사용할 글꼴 패밀리
  • SIZE: 픽셀 단위 글꼴 크기
  • COLOR: 텍스트 색상(헥스 또는 이름 지정 색상)
  • BACKGROUND: 배경 색상
  • ANIMATION: 시작 애니메이션
  • DURATION: 장면이 지속되는 시간
  • 기본 예시는 Hello World 텍스트에 Inter 글꼴, 64픽셀 크기, #FF4D00 텍스트 색상, #FFFFFF 배경, fade in 애니메이션, 1.5초 지속 시간을 지정하는 구성임

DSL 참조

명령어

  • TEXT: 화면에 텍스트를 표시하며, 예시는 TEXT "Hello World"임
  • SHAPE: 기하학적 도형을 추가하며, 예시는 SHAPE circle임
  • FONT: 글꼴 패밀리를 설정하며, 예시는 FONT Inter임
  • SIZE: 픽셀 단위 글꼴 크기를 설정하며, 예시는 SIZE 48임
  • COLOR: 텍스트 또는 도형 색상을 설정하며, 예시는 COLOR #FF4D00임
  • BACKGROUND: 캔버스 배경을 설정하며, 예시는 BACKGROUND #000000임
  • ANIMATION: 애니메이션 유형을 설정하며, 예시는 ANIMATION fade in임
  • DURATION: 장면 지속 시간을 설정하며, 예시는 DURATION 1.5s임

애니메이션

  • fade in: 투명한 상태에서 페이드 인하며 기본 애니메이션임
  • slide up: 아래에서 위로 슬라이드함
  • pop: 크기 변화 효과와 함께 팝인함
  • bounce: 위에서 바운스하며 진입함

도형

  • circle: 원형 도형
  • square: 정사각형 도형
  • rect: 직사각형 도형
  • diamond: 마름모 또는 회전한 정사각형 도형

여러 장면 만들기

  • 여러 장면을 만들 때는 각 장면을 두 줄 이상의 빈 줄로 구분함
  • 각 장면은 다음 요소를 독립적으로 가질 수 있음
  • 텍스트 콘텐츠 또는 도형
  • 글꼴, 크기, 색상
  • 배경 색상
  • 애니메이션 유형
  • 지속 시간
  • 예시 구성은 Scene 1에 #FF4D00 색상, fade in 애니메이션, 1.5초 지속 시간을 지정하고, Scene 2에 #00AAFF 색상, slide up 애니메이션, 2초 지속 시간을 지정하는 방식임

예제 프로젝트

간단한 텍스트 애니메이션

  • Welcome 텍스트에 Inter 글꼴, #1A1A1A 색상, #FFFFFF 배경, fade in 애니메이션, 1.5초 지속 시간을 지정함

여러 장면 영상

  • 첫 장면에 Welcome to Rendly 텍스트, Inter 글꼴, 48픽셀 크기, #FF4D00 색상, #FFFFFF 배경, fade in 애니메이션, 2초 지속 시간을 지정함
  • 두 번째 장면에 Code-first video creation 텍스트, Inter 글꼴, 36픽셀 크기, #1A1A1A 색상, slide up 애니메이션, 1.5초 지속 시간을 지정함
  • 세 번째 장면에 circle 도형, #00AFFF 색상, pop 애니메이션, 1초 지속 시간을 지정함

사용자 지정 브랜드 영상

  • Your Brand 텍스트에 Poppins 글꼴, 72픽셀 크기, #FF4D00 색상, #000000 배경, fade in 애니메이션, 2초 지속 시간을 지정함
  • rect 도형에 #FF4D00 색상, bounce 애니메이션, 1초 지속 시간을 지정함

기술 스택

  • 프레임워크: Next.js 14(App Router)
  • 언어: TypeScript
  • 스타일링: Tailwind CSS
  • 아이콘: Lucide React
  • 배포: Vercel
  • 라이선스: MIT

개발

제공 스크립트

  • npm run dev: 개발 서버 시작
  • npm run build: 프로덕션용 빌드
  • npm run start: 프로덕션 서버 시작
  • npm run lint: ESLint 실행
  • npm run lint:fix: ESLint 오류 수정

프로젝트 구조

  • rendly/
  • src/
  • app/: Next.js App Router 페이지
  • editor/: 코드 편집기 페이지
  • dashboard/: 사용자 대시보드
  • examples/: 예제 프로젝트
  • page.tsx: 랜딩 페이지
  • components/: React 컴포넌트
  • styles/: 전역 스타일
  • public/: 정적 에셋
  • package.json: 의존성 정의
  • README.md: 프로젝트 문서

기여

  • 기여를 환영하며, 풀 리퀘스트(PR)를 제출하기 전에 기여 가이드라인을 확인하는 방식임

개발 워크플로

  • 저장소를 포크함
  • git checkout -b feature/amazing-feature로 기능 브랜치를 생성함
  • git commit -m 'Add amazing feature'로 변경 사항을 커밋함
  • git push origin feature/amazing-feature로 브랜치에 푸시함
  • 풀 리퀘스트를 생성함

라이선스

  • 이 프로젝트는 MIT 라이선스에 따라 제공되며, 자세한 내용은 LICENSE 파일에서 확인함

연락처

  • 웹사이트: rendly-one.vercel.app
  • GitHub: github.com/mukundzha/rendly