LuvMoment 제작기: 사진과 음악으로 추억 영상 만들기

안녕하세요, mouseco입니다. :)

2026년 1월에는 사진과 짧은 영상에 음악을 붙여 추억 영상으로 만드는 웹앱을 개발했습니다. 이름은 LuvMoment입니다. 기념일이나 여행 사진을 골라 넣으면, 장면을 이어 붙이고 음악을 더해 하나의 영상으로 저장할 수 있습니다.

사진을 고른 다음의 일을 줄이고 싶었습니다

사진으로 영상을 만들려면 생각보다 결정할 것이 많습니다. 어떤 순서로 놓을지, 한 장을 몇 초 동안 보여줄지, 가로 사진의 빈 공간은 어떻게 채울지, 음악과 장면 전환은 어디에서 맞출지 정해야 합니다.

LuvMoment에서 줄이고 싶었던 것은 이 과정이었습니다. 사용자가 담고 싶은 사진과 순서, 분위기를 고르면 앱이 화면을 배치하고 움직임을 붙여 영상을 만들도록 설계했습니다. 기념일 영상을 준비하거나 여행 사진을 짧게 묶어 보고 싶은 상황을 생각했습니다.

초기 기획에는 로그인과 영상 보관, AI 음악 생성 같은 기능도 들어 있었습니다. 구현 계획을 세울 때는 사진을 선택하고, 영상을 만들고, 다운로드하는 흐름부터 완성하기로 했습니다. 사진이 실제 영상 파일이 되어 나오는 과정이 먼저 필요했습니다.

네 화면으로 이어지는 제작 과정

화면은 홈, 사진 선택, 스타일 선택, 결과 확인으로 나눴습니다. Next.js와 React로 화면을 만들고, 선택한 사진과 편집 설정은 Zustand에 담아 다음 화면으로 넘겼습니다.

사용자가 거치는 과정은 이렇습니다.

1. 사진과 짧은 영상을 선택합니다.
2. 썸네일을 보며 순서를 바꾸고 불필요한 파일을 지웁니다.
3. 테마와 배경음악을 고르고 인트로 문구를 넣습니다.
4. 영상을 생성한 뒤 재생하고 저장합니다.

순서 변경도 필요한 기능이었습니다. 파일을 선택한 순서가 영상에서 보여주고 싶은 순서와 같지는 않기 때문입니다. 사진을 다시 선택할 필요 없이 썸네일을 옮겨 장면 순서를 바꿀 수 있도록 했습니다. 드래그하는 사진과 놓을 위치를 구분해 보여주는 방식도 함께 정리했습니다.

가로 사진을 세로 영상에 넣는 문제

출력 화면은 휴대폰에서 보기 좋은 9:16 세로 비율로 잡았습니다. 그런데 사진의 비율은 제각각이었습니다. 가로 사진을 화면에 꽉 채우면 양옆이 많이 잘리고, 사진 전체가 보이게 줄이면 위아래에 큰 빈 공간이 생겼습니다.

그래서 사진 비율에 따라 배치 방식을 달리했습니다.

사진에는 조금씩 확대하거나 위치를 옮기는 움직임도 붙였습니다. 같은 사진을 보여주더라도 화면이 천천히 움직이면 장면 사이의 흐름이 생겼습니다. 배치와 움직임을 함께 조절하는 것이 영상의 인상을 만드는 데 필요했습니다.

음악을 장면 길이에 반영하기

배경음악은 장면 길이를 정하는 기준으로도 사용했습니다. 음악의 BPM, 즉 1분당 박자 수를 추정하고, 그 간격을 바탕으로 사진 한 장을 보여줄 시간을 계산했습니다.

예를 들어 120 BPM이라면 한 박자는 약 0.5초입니다. 이 간격의 배수로 장면 길이를 잡으면 일정한 박자 단위로 화면을 넘길 수 있습니다. 실제 계산에는 음악 길이와 장면 수도 함께 반영했습니다.

이 방식이 곡의 모든 강세나 후렴을 이해하는 것은 아닙니다. 음악의 빠르기를 추정해 장면 전환의 기준으로 쓰는 방식이었습니다. 템포에 따라 화면을 나누는 빈도나 확대 움직임의 강도도 달라지도록 구성했습니다.

영상은 접속한 사람의 브라우저에서 만들었습니다

초기 구현 계획에서 우선순위로 둔 방식은 브라우저 안에서 영상을 만드는 것이었습니다. 별도의 영상 처리 서버를 운영하지 않고도 사진 선택부터 다운로드까지 연결해 볼 수 있었기 때문입니다.

사진과 영상을 불러온 뒤 Canvas에 장면을 그리고, 시간에 따라 위치와 크기, 전환 효과를 바꾸어 프레임을 만들었습니다. 흐린 배경처럼 반복해서 쓰는 이미지는 미리 만들어 재사용하는 구조로 정리했습니다.

이 구조에서는 사이트를 만든 제 컴퓨터가 계속 켜져 있을 필요가 없습니다. 영상을 만드는 계산은 접속한 사람의 PC나 휴대폰에서 이루어집니다. 선택한 사진과 영상도 별도의 서버로 업로드하지 않습니다.

그만큼 사용 환경의 영향을 받습니다. 같은 파일이어도 기기 성능에 따라 생성 시간이 달라지고, 브라우저가 지원하는 영상 형식에도 제약이 있습니다. 작업이 탭 안에서 진행되므로 생성 중 탭을 닫거나 새로고침하면 이어서 처리할 수 없습니다.

화면을 그리는 일과 영상 파일로 저장하는 일

Canvas에 장면을 그린 뒤에는 그 프레임과 음악을 재생 가능한 파일로 묶어야 했습니다. 이 과정에서는 출력 형식과 브라우저의 인코딩 지원을 함께 살펴야 했습니다.

1월에는 MP4 인코딩과 오디오 재생 문제를 다루면서 WebM 출력을 사용하기도 했습니다. 이후에는 Mediabunny로 MP4를 만드는 구조로 바뀌었습니다. 9월 공개 준비에서는 이 생성 기능을 바탕으로 실제 사이트에서 파일 저장과 재생을 점검했습니다.

이 과정에서 확인할 것은 확장자 하나로 끝나지 않았습니다. 실제 파일이 생성되는지, 장면이 끝까지 이어지는지, 음악이 함께 재생되는지까지 봐야 했습니다.

2026년 9월 9일 덧붙임: 무료 배포와 소스 공개

이번에는 전에 만들어 두었던 LuvMoment를 다시 열어 공개할 수 있도록 점검했습니다. 기존 영상 생성 기능을 바탕으로 음악 미리 듣기, 오류 안내, 파일과 메모리 정리를 보완하고, 실제 사이트에서 영상 생성과 다운로드를 확인했습니다.

배포는 Vercel의 기본 도메인으로 진행했고, 소스도 GitHub에 공개했습니다.

• LuvMoment 사용하기
• GitHub 코드와 README 보기

현재 공개 버전은 사진과 영상을 3개 이상 30개 이하 선택해 1080×1920, 30fps MP4로 저장할 수 있습니다. 로그인이나 클라우드 보관 기능은 없으며, 우선 최신 Chrome 또는 Edge에서 사용할 수 있도록 안내하고 있습니다. 실제 생성 가능 여부는 브라우저와 기기의 인코딩 지원에 따라 달라집니다.

생성 화면에는 “탭을 닫거나 새로고침하면 영상 생성이 중단됩니다”라는 안내도 추가했습니다. 완료될 때까지 탭을 열어 두고, 완성된 영상은 기기에 다운로드해 주세요.

1월에 시작했던 작업을 이제 링크로 공유할 수 있게 되었습니다. 사진 몇 장과 음악을 골라 하나의 영상으로 남기고 싶을 때 가볍게 사용해 보셔도 좋겠습니다.