프로젝트를 끝내면 포트폴리오 정리가 남습니다. 화면을 캡처하고, 목업 이미지를 만들고, 소개 글과 영상을 준비해 관리자에 올리는 일입니다. 다음 프로젝트가 시작되면 가장 먼저 밀리는 일이기도 합니다.
인코딩은 이 과정을 하나의 자동화 흐름으로 묶었습니다. 화면 캡처를 넣으면 실제 공간에 놓인 목업 이미지, 소개 글, 음악이 있는 소개 영상이 준비되고 관리자 등록까지 이어집니다. 인코딩 Works의 최근 작업 상세는 이 흐름으로 만들었습니다.
포트폴리오 목업 정리가 늘 밀리는 이유
작업 하나를 소개하려면 손이 가는 단계가 많습니다. 단계마다 다른 프로그램을 열고, 결과 파일을 다음 단계로 옮겨야 합니다.
| 단계 | 손으로 할 때 | 자동화 흐름 |
|---|---|---|
| 목업 이미지 | 목업 템플릿을 찾아 화면을 한 장씩 끼웁니다. 같은 템플릿을 여러 곳에서 쓰다 보니 비슷한 장면이 반복되기 쉽습니다. | 작업마다 공간과 기기를 새로 정해 장면을 만들고, 원본 화면을 합성합니다. |
| 소개 글 | 작업마다 요약과 설명을 처음부터 씁니다. | 고른 화면과 작업 정보로 관리자 칸에 맞춘 초안이 준비됩니다. |
| 소개 영상 | 편집 프로그램에서 장면을 배치하고 음악을 따로 구합니다. | 같은 화면 자료로 음악이 있는 30초 안팎의 영상을 만듭니다. |
| 파일 정리 | PC·휴대폰 크기별로 다시 저장하고 용량을 줄입니다. | 사이트에서 쓰는 크기와 형식으로 한 번에 정리됩니다. |
| 관리자 등록 | 칸마다 파일을 올리고 순서를 맞춥니다. | 정해 둔 순서대로 상세 블록과 대표 영상이 등록됩니다. |
하나하나는 어렵지 않지만, 작업이 쌓일수록 소개해야 할 프로젝트도 함께 쌓입니다. 자동화는 이 반복을 줄이고, 어떤 화면을 어떻게 보여 줄지 고르는 데 시간을 쓰게 합니다.
화면 캡처에서 관리자 등록까지 다섯 단계
1. 보여 줄 화면을 고르고 가립니다. PC와 휴대폰 캡처 중 소개, 목록, 상세처럼 역할이 서로 다른 화면을 고릅니다. 한 작업에 서로 다른 원본 화면 6장 이상을 쓰고, 같은 화면을 잘라 장수를 채우지 않습니다. 개인정보나 고객 정보가 보이는 곳은 장면을 만들기 전에 가립니다.
2. 장면을 만들고 원본 화면을 합성합니다. GPT 이미지로 모니터, 노트북, 휴대폰이 놓인 공간과 빛을 만듭니다. 이때 기기 화면은 단색으로 비워 두고, 네 모서리를 찾아 원본 캡처를 화면 각도에 맞춰 합성합니다.
화면까지 이미지 생성에 맡기면 작은 한글이 틀리거나 없는 버튼이 생기기 쉽습니다. 그래서 공간은 새로 만들고, 화면은 실제 작업 그대로 씁니다. 장면은 작업마다 새로 정하고 기록해 두어, Works 목록에서 같은 장면이 겹치지 않게 합니다.
3. 소개 글을 관리자 칸에 맞춰 씁니다. 요약, 이미지 사이의 소제목과 문단, 한 줄 강조 문장을 각 칸에 맞춰 준비합니다. 이미지 안에는 글을 넣지 않아 검색엔진과 휴대폰에서도 글이 그대로 읽힙니다. 요약과 첫 소제목이 같은 말을 되풀이하지 않게 서로 다른 각도로 씁니다.
4. 소개 영상을 만듭니다. 같은 화면과 완성 이미지로 30초 안팎의 영상을 만들고 음악 박자에 장면을 맞춥니다. 장면 구성과 전환은 작업의 디자인 요소에서 가져와 영상마다 다르게 정합니다. 한 번 쓴 음악은 기록해 두고 다른 작업에 다시 쓰지 않습니다.
5. 사이트용 파일로 정리해 관리자에 등록합니다. 이미지는 webp로, 영상은 PC와 휴대폰용을 따로 줄이고 첫 장면을 대표 이미지로 뽑습니다. 정해 둔 순서대로 상세 블록, 요약, 대표 영상이 관리자에 들어가고, 결과는 작업 상세에서 바로 확인합니다.
적용 예시: HONDA CAFE THE GO 작업 상세
혼다코리아의 브랜드 체험 카페 The Go 사이트는 카페 소개부터 시승 예약까지 이어지는 반응형 사이트입니다. PC 화면 7장과 휴대폰 화면 6장을 캡처해 시작했습니다. 그중 서로 다른 화면 6가지를 골라 이미지 8장을 만들었습니다.
장면은 사이트의 빨간 원과 차·모터사이클에서 가져왔습니다. 카페 메인 화면은 빨간 원이 걸린 흰 벽에, 시승 차량 화면은 바닥에 빨간 빛이 도는 어두운 전시장에 놓았습니다. 화면 속 글자와 차량 사진은 실제 사이트 그대로입니다.
장면을 만들다 보면 기기 화면이 원본보다 넓게 그려지기도 합니다. 이때는 화면을 늘리지 않고, 로고와 제목이 들어가도록 원본을 그 비율에 맞춰 잘라 넣었습니다.
완성된 상세는 대표 영상과 요약으로 시작해 이미지와 소개 글 블록 10개가 이어집니다. 영상은 사이트의 원형 사진 틀과 빨간 점을 장치로 쓰고, 빨간 원이 번지며 다음 장면으로 넘어가게 했습니다. 결과는 HONDA CAFE THE GO 작업 상세에서 볼 수 있습니다.
자동화해도 사람이 보는 것
반복은 흐름에 맡기고, 고르는 일과 디테일은 사람이 봅니다.
- 어떤 화면을 보여 줄지: 작업의 역할이 드러나는 화면과 가려야 할 정보를 정합니다
- 장면 고르기: 장면마다 두 안을 만들고 화면이 잘 보이는 쪽을 고릅니다
- 글의 사실: 작업 범위와 이름, 설명이 실제와 맞는지 확인합니다
- 영상과 음악: 박자와 장면이 어색한 곳을 직접 보고 듣고 고칩니다
- 최종 화면: 등록된 상세를 PC와 휴대폰에서 열어 보고 순서를 다듬습니다
회사 소개·제품 소개 이미지에도 같은 흐름으로
이 흐름은 포트폴리오만을 위한 것이 아닙니다. 화면 캡처나 제품 사진이 계속 쌓이는 곳이라면 같은 순서로 소개 이미지와 영상, 글을 만들고 관리자에 올릴 수 있습니다.
- 작업물이 계속 늘어나는 에이전시·스튜디오의 포트폴리오
- 새 제품이 나올 때마다 필요한 제품 소개 이미지와 영상
- 쇼핑몰 상품 등록: 상품은 원본 사진 그대로 쓰고 배경과 연출만 새로 만듭니다
도입 전에 준비할 것
- 보여 줄 화면 캡처나 제품 사진, 서로 다른 화면 6장 이상이면 좋습니다
- 공개할 수 있는 범위와 가려야 할 정보
- 등록할 관리자: 사용 중인 관리자를 먼저 확인하고 등록 방식을 맞춥니다
- 브랜드 색과 로고처럼 장면과 영상에 쓸 자료
어떤 자료로 어디까지 자동화할 수 있는지는 상담에서 먼저 확인해 드립니다. 만들어 드릴 수 있는 자동화는 서비스 페이지의 자동화·AI 항목에서 볼 수 있습니다.