홈페이지 포트폴리오의 움직이는 미리보기를 영상 파일 대신 HTML·CSS 애니메이션으로 바꿨습니다. 영상은 사이트가 바뀔 때마다 다시 만들어 올려야 했는데, HTML 미리보기는 사이트에 이미 있는 페이지 그림을 읽어 화면에서 직접 그리기 때문에 그림만 다시 찍으면 미리보기도 저절로 최신이 됩니다. 처음 만든 14초 영상과 HTML 버전을 같은 시각끼리 나란히 놓고 비교해 보니 거의 같았습니다. 이 글에는 왜 바꿨는지, 어떻게 옮겼는지, 무엇이 달라졌고 무엇을 아직 확인하지 못했는지를 정리했습니다.
한눈에 보기
- 홈페이지 포트폴리오의 움직이는 미리보기를 14초 영상 대신 HTML·CSS 애니메이션으로 바꿨습니다.
- 사이트의 페이지 그림을 직접 읽어 그리므로 그림만 다시 찍으면 미리보기도 최신이 됩니다.
- 영상과 거의 같고, 다른 점은 모션 블러와 글꼴 두 가지입니다.
- 받는 그림은 약 3.9MB라 칸이 화면 근처에 올 때만 받고 보일 때만 움직입니다.
HTML 미리보기가 움직이는 모습을 그대로 녹화한 14초 영상입니다. 실제 미리보기는 홈페이지 포트폴리오 맨 위 ONICSOFT 칸에서 돌아갑니다.
홈페이지 포트폴리오를 열었습니다
HTML 미리보기의 첫 장면. 사이트 페이지 그림을 벽처럼 세운 모습입니다.
2026년 10월 29일 오닉소프트 홈페이지에 "홈페이지 포트폴리오" 페이지를 열었습니다. 저희가 만든 홈페이지를 PC 화면과 휴대폰 화면으로 함께 보여 주는 곳입니다. 목록에서 작품을 누르면 상세 페이지로 넘어가고 페이지마다 PC 그림과 휴대폰 그림을 나란히 볼 수 있습니다.
ONICSOFT 작품은 예외로 모든 페이지를 보여 줍니다. 홈, 회사 소개, 서비스, 제품 AutoLed, 모션그래픽, 구축 사례, 블로그, 문의까지 8페이지입니다.
겉으로 보이는 페이지 말고 뒤에서 돌아가는 서버도 저희가 만든 것이라 서버 구축 칸에 관리자 화면 4장을 함께 넣었습니다. 관리자 화면은 실제 운영 자료가 아니라 예시 자료를 띄워서 찍은 것이고 화면에도 "예시 자료"라고 표시해 두었습니다. ONICSOFT 작품은 목록 맨 위에 고정됩니다.
목록 맨 위 칸에는 정지 그림 대신 움직이는 미리보기를 넣고 싶었습니다. 8페이지와 서버까지 한 번에 보여 주려면 그림 한 장으로는 부족했기 때문입니다.
처음에는 14초짜리 미리보기 영상이었습니다
벽에서 PC 창과 휴대폰이 들려 나와 홈 화면을 보여 주는 장면입니다.
처음에는 영상으로 만들었습니다. 영상 작업용 프로젝트에서 14초 동안 반복되는 미리보기 영상을 만들어 붙였습니다. 크기는 1280×800, 용량은 약 1.2MB였습니다.
연출은 이렇습니다. 사이트 페이지 그림들이 기울어진 벽처럼 서 있다가, 그 벽에서 PC 창과 휴대폰이 들려 나옵니다. 홈 화면을 한 번 내려 본 뒤 나머지 페이지를 한 장씩 넘깁니다. 마지막 페이지가 지나면 창이 뒤집히면서 서버 관리자 화면(예시 자료)으로 바뀌고 다시 벽으로 물러나 처음 장면과 이어집니다.
보기에는 괜찮았지만 문제가 하나 있었습니다. 사이트가 바뀌면 영상도 다시 만들어야 했습니다. 문구 하나를 고치거나 페이지를 하나 더해도 영상 속 화면은 예전 모습 그대로 남습니다. 페이지를 고칠 때마다 그림을 다시 찍고 영상을 다시 뽑고 다시 올려야 했습니다.
1인 회사에서 이런 일은 금방 밀립니다. 그러면 포트폴리오에 옛날 화면이 걸려 있게 됩니다.
영상 대신 HTML로 바꾼 방법: 원본이 이미 HTML이었습니다
영상 파일과 HTML 미리보기의 차이를 그린 그림(AI로 만든 그림)
그런데 그 영상은 처음부터 HTML로 만든 것이었습니다. 영상 원본은 시간 t 하나를 받아 그 순간의 화면을 그리는 HTML/CSS 3D 페이지였습니다. t가 0초일 때는 벽, 2초쯤에는 PC 창과 휴대폰, 9초쯤에는 관리자 화면이 나오는 식입니다. 이 페이지를 영상 파일로 뽑아 낸 것이 미리보기 영상이었습니다. 편집 프로그램 없이 코드로 영상을 만드는 방식은 AI로 회사 홍보영상 만들기 글에 따로 적었습니다.
그렇다면 영상으로 굳히지 않고 그 페이지를 홈페이지에서 바로 돌리면 됩니다. 그래서 같은 연출을 사이트 스크립트(js/portfolio-live.js)로 옮겼습니다. 이 스크립트는 사이트 자료 파일(data/content.js)에 적힌 페이지 그림과 관리자 화면 그림을 직접 읽어서 방문자의 화면에서 그립니다. 영상 파일은 이제 필요 없습니다.
그림 한 벌을 두 곳이 씁니다
여기서는 미리보기가 그림을 따로 들고 있지 않다는 점이 중요합니다. 포트폴리오 상세 페이지가 보여 주는 그림과 미리보기가 쓰는 그림이 같은 파일입니다. 그림을 바꾸면 두 곳이 함께 바뀝니다.
HTML·CSS 애니메이션 구현 방식: 그리기 함수 하나를 두 곳에서 부릅니다
영상과 HTML 미리보기는 같은 그리기 함수 render(t)를 씁니다. 다른 것은 t를 누가 넘기느냐뿐입니다.
영상을 만들 때는 화면 없는 Chrome(헤드리스)이 1/30초마다 시각을 정해 render(t)를 부르고 그때마다 화면을 한 장씩 찍었습니다. 사이트에서는 브라우저가 화면을 새로 그릴 때마다 requestAnimationFrame이 지금 시각을 넘깁니다. 줄여 쓰면 이렇습니다.
// 영상: 1/30초마다 시각을 정해 부르고 한 장씩 찍는다
for (n = 0; n < 14 * 30; n++) { render(n / 30); 찍기(); }
// 사이트: 화면을 새로 그릴 때마다 지금 시각을 넘긴다
function frame(now) {
t = (t + 지난_시간) % 14;
render(t);
requestAnimationFrame(frame);
}무대는 1920×1200 크기 하나입니다. 이 무대를 CSS transform의 scale로 칸 크기에 맞게 줄여서 그립니다. 그래서 PC 화면의 넓은 칸이든 휴대폰의 좁은 칸이든, 다른 페이지에 넣든 같은 그림이 나옵니다.
3D 효과에는 라이브러리나 WebGL을 쓰지 않았습니다. 벽이 기울어진 모습은 CSS perspective(원근)와 rotateX·rotateZ(기울이기)로 만들고 페이지가 넘어가는 장면은 clip-path(잘라 보이기)로 만들었습니다. 외부 라이브러리 없이 CSS만으로 그립니다.
영상과 HTML 미리보기 비교: 다른 점은 두 가지
같은 시각을 나란히 놓은 비교. 왼쪽이 처음 만든 영상, 오른쪽이 HTML 미리보기입니다.
옮기고 나서 영상과 HTML 버전을 같은 시각끼리 찍어 위아래로 붙인 비교 영상을 만들었습니다. 14초 내내 두 화면을 겹쳐 보면 장면 순서, 창 위치, 페이지 넘김 시점이 거의 같습니다.
다른 점은 두 가지였습니다.
- 모션 블러: 영상에는 빠르게 움직이는 구간에 잔상(모션 블러)이 있었는데, HTML 버전에는 없습니다.
- 글꼴: HTML 버전은 화면에 나오는 글씨를 사이트 글꼴로 그립니다.
비교 영상을 본 제 반응은 "별 차이도 없네, 최신화되는 게 낫지"였습니다. 보는 사람에게 차이가 거의 없다면, 사이트와 함께 저절로 바뀌는 쪽이 낫다고 판단했습니다.
사이트가 바뀌면 미리보기도 저절로 최신이 됩니다
8페이지 중 네 번째인 제품 AutoLed 페이지로 넘어간 장면입니다.
이제 미리보기를 최신으로 맞추는 일은 그림을 다시 찍는 것뿐입니다. 그림 다시 찍기는 명령 하나(tools/portfolio-capture/refresh.js)로 하며 페이지당 약 1분이 걸립니다. 다시 찍은 그림이 사이트에 올라가면 미리보기도 그 그림으로 그려집니다. 영상을 다시 뽑는 단계가 통째로 빠졌습니다.
페이지 수가 바뀌어도 손댈 곳이 없습니다. 지금은 8페이지라 화면 아래에 "01 / 08", "04 / 08"처럼 번호가 붙는데, 페이지를 하나 더하거나 빼면 넘김 간격이 알아서 맞춰집니다. 영상이었다면 14초 안에서 장면 길이를 처음부터 다시 나눠야 했을 부분입니다.
그림 크기도 미리보기가 그림을 받을 때 직접 읽습니다. 다시 찍은 그림의 세로 길이가 달라져도 홈 화면을 내려 보는 거리가 그 길이에 맞춰집니다.
HTML 미리보기 용량과 속도: 보일 때만 받고 보일 때만 움직입니다
서버 관리자 화면 장면. 예시 자료를 띄워 찍은 화면이라 "예시 자료"라고 표시해 두었습니다.
좋아진 점만 있는 것은 아닙니다. HTML 미리보기가 받는 그림은 모두 합쳐 약 3.9MB로, 영상(약 1.2MB)보다 큽니다. 8페이지의 PC·휴대폰 그림과 관리자 화면 4장을 모두 받기 때문입니다.
그래서 두 가지를 정해 두었습니다.
- 미리보기 칸이 화면 근처에 왔을 때만 그림을 받습니다. 페이지를 열자마자 받지 않습니다.
- 칸이 화면에 보일 때만 움직입니다. 스크롤해서 칸이 화면 밖으로 나가면 멈춥니다.
그림이 다 오기 전이나 스크립트가 꺼진 브라우저에서는 칸에 원래 있던 정지 그림(PC와 휴대폰)이 그대로 보입니다. 그림이 모두 준비되면 그때 움직이는 미리보기로 바뀝니다. 받다가 실패해도 정지 그림은 남습니다.
또 이 그림들은 작품 상세 페이지가 쓰는 그림과 같은 파일이라 한 번 받으면 상세 페이지에서 다시 쓰입니다. 목록에서 미리보기를 보고 상세 페이지로 들어가면 그림을 새로 받지 않아도 됩니다.
휴대폰에서는 아직 재 보지 않았습니다
속도는 시험 PC에서 화면 없는 브라우저(헤드리스)로 재었을 때 약 60fps가 나왔습니다. 실제 휴대폰에서는 아직 재 보지 않았습니다. 휴대폰에서 어떻게 도는지는 재 본 뒤에 따로 적겠습니다.
다른 페이지에 미리보기 넣는 법: 코드 세 줄
미리보기는 포트폴리오 목록 밖에서도 쓸 수 있게 만들었습니다. 같은 사이트 안의 페이지라면 아래 세 줄을 넣으면 그 자리에 미리보기가 나옵니다.
<div class="pfl-embed" data-pf-live="onicsoft"></div>
<script src="/data/content.js"></script>
<script src="/js/portfolio-live.js"></script>화면 모양은 스크립트가 직접 싣고 그림 경로는 스크립트 주소를 기준으로 잡기 때문에 주소가 다른 페이지에 넣어도 그림을 제대로 찾습니다. 같은 도메인의 스크립트라 사이트 보안 설정에도 걸리지 않습니다.
이 글에는 그림으로 넣었습니다
원래는 이 글 안에도 움직이는 미리보기를 넣으려고 했습니다. 다만 이 블로그는 글을 저장할 때 보안을 위해 본문의 스크립트를 걸러 냅니다. 그래서 이 글에는 미리보기 장면을 그림으로 넣었고 실제로 움직이는 모습은 홈페이지 포트폴리오 맨 위 ONICSOFT 칸에서 보실 수 있습니다.
AI가 한 일, 사람이 한 일
이번 작업도 AI(Claude)와 함께 했습니다. 영상 원본 페이지를 사이트 스크립트로 옮기는 코드, 그림 다시 찍기 명령, 비교 영상 만들기는 AI가 했습니다. 저는 포트폴리오에 무엇을 보여 줄지 정했고(ONICSOFT는 모든 페이지와 서버까지) 비교 영상을 보고 영상 대신 HTML로 가기로 결정했습니다.
돌아보면 출발점은 "이 영상은 원래 무엇으로 만들었지?"라는 질문이었습니다. 원본이 이미 HTML이었으니 굳이 영상으로 굳힐 이유가 없었습니다.
덕분에 영상 연출을 그대로 살린 채 사이트와 함께 바뀌는 미리보기가 됐습니다.
포트폴리오 미리보기, 영상과 HTML 중 어느 쪽이 맞을까요
이번 경험으로 정리하면 이렇습니다.
- HTML 미리보기가 맞는 경우: 보여 주는 내용이 사이트 화면이고, 사이트가 자주 바뀌는 경우입니다. 그림만 다시 찍으면 미리보기가 따라옵니다.
- 영상이 맞는 경우: 한 번 만들고 오래 쓰는 홍보 영상처럼 내용이 잘 바뀌지 않거나, 모션 블러 같은 영상 효과가 꼭 필요한 경우입니다. 용량도 영상이 더 작았습니다.
저희 포트폴리오는 앞의 경우라 HTML로 갔습니다. 홈페이지를 고치면 포트폴리오도 같이 최신이 되는 쪽이 운영하는 입장에서 훨씬 편합니다.
저희가 만든 홈페이지는 홈페이지 포트폴리오에서 PC와 휴대폰 화면으로 보실 수 있고 하는 일은 서비스 페이지에 정리해 두었습니다. 홈페이지 제작 문의는 카카오톡 채널로 편하게 남겨 주세요.