예상 읽기 시간: 약 7분
워드프레스 글을 영상으로 바꾸면서 가장 아쉬웠던 건 단순히 말이 영상으로 바뀌는 것이 아니었습니다.
화면이 실제 작업처럼 보이지 않는 것이 더 크게 느껴졌습니다.
AI, 노션, 옵시디언, 포토샵, C4D, 피그마.
제가 다루는 이야기는 대부분 화면이 있어야 이해가 됩니다.
그런데 영상 속 화면이 진짜 작업 화면처럼 보이지 않고, 대충 만든 앱 UI처럼 보이면 내용까지 가볍게 느껴졌습니다.
그래서 이번 Shortform Studio 작업에서는 단순한 자막 영상이 아니라, 사람과 AI가 대화하고 실제 도구 화면이 움직이는 영상 구조를 만들려고 했습니다.
제 콘텐츠는 말보다 화면이 필요했습니다
제가 쓰는 글은 대부분 이런 내용입니다.
노션을 어떻게 정리했는지. 옵시디언 Inbox에 어떤 식으로 쌓이는지. VS Code에서 Claude Code를 어떻게 불러오는지. Codex가 로컬 파일을 읽고 무엇을 고쳤는지. Shortform Studio에서 장면과 TTS가 어떻게 생성되는지.
이걸 글로만 설명하면 길어집니다.
반대로 화면으로 보여주면 한 번에 이해되는 부분도 많습니다.
그래서 영상에서는 단순한 설명보다 작업 화면을 흉내 내는 그래픽이 중요했습니다.
하지만 처음 나온 화면은 실제 같지 않았습니다.
노션 이야기를 하는데 화면은 범용 앱처럼 보이고, 패널은 있는데 텍스트가 없어서 로딩 스켈레톤처럼 보이고, 실제 작업 흐름보다 장식 UI에 가까워 보였습니다.
제가 원한 건 예쁜 장식이 아니라 “아, 지금 노션 DB를 보고 있구나” “아, 지금 옵시디언 Inbox에 쌓이는 흐름이구나” 라고 바로 읽히는 화면이었습니다.
앱별 템플릿보다 패널 문법이 필요했습니다
처음에는 앱별 템플릿을 만들면 될 것 같았습니다.
노션 템플릿, 옵시디언 템플릿, 포토샵 템플릿, C4D 템플릿.
하지만 이렇게 가면 문제가 생깁니다.
새로운 주제가 나올 때마다 또 템플릿을 만들어달라고 해야 합니다.
제가 실제로 불편하다고 말한 지점도 이쪽이었습니다.
한 번만 대응하는 게 아니라, 다음에도 또 요청하지 않게 만들어야 했습니다.
그래서 방향은 앱별 템플릿이 아니라 패널 문법으로 바뀌었습니다.
어떤 화면이든 크게 보면 몇 가지 요소로 나눌 수 있습니다.
왼쪽 사이드바. 상단 탭. 본문 테이블. 이미지 그리드. 속성 패널. 채팅 패널. 미리보기 영역. 커서와 선택 상태.
이 요소들을 조합하면 노션처럼도 보이고, 옵시디언처럼도 보이고, 포토샵이나 C4D 작업 화면처럼도 보일 수 있습니다.
읽히는 글자가 있어야 실제처럼 보였습니다
이번에 의외로 중요했던 건 텍스트였습니다.
처음에는 회색 막대와 카드만 있어도 UI처럼 보일 줄 알았습니다.
그런데 실제로 보니 로딩 중인 화면처럼 보였습니다.
정보가 비어 있으니까 “작업 화면”이 아니라 “아직 안 만든 화면”처럼 느껴졌습니다.
그래서 화면 안에 읽히는 글자가 필요했습니다.
노션 DB라면 제목, 상태, 태그, 날짜가 보여야 하고, 옵시디언이라면 Inbox, Daily, 링크 구조가 보여야 하고, 포토샵이라면 레이어, 효과, 조정값이 보여야 하고, C4D라면 오브젝트, 머티리얼, 렌더 설정 같은 단서가 보여야 했습니다.
이건 단순한 디테일이 아니었습니다.
디자이너가 보는 화면은 텍스트와 구조가 함께 읽힙니다.
형태만 비슷하면 부족하고, 그 안에 들어간 정보가 주제와 맞아야 실제처럼 보입니다.
한 장면 안에서도 화면이 움직여야 했습니다
또 하나 바뀐 점은 장면 안에서 화면을 넘기는 방식이었습니다.
처음에는 한 Scene에 하나의 UI만 보였습니다.
그런데 영상으로 보니 아까웠습니다.
사람이 질문하고, AI가 답하고, 제가 다시 판단하는 흐름이라면 화면도 그 흐름에 맞춰 움직여야 했습니다.
그래서 `UiScenario.steps[]` 구조가 들어갔습니다.
나레이션 구간을 나누고, 커서가 이동하고, 클릭하고, 다음 UI 상태로 넘어가는 방식입니다.
이렇게 하면 한 장면 안에서도 검색 → 선택 → 수정 → 결과 확인 같은 흐름을 보여줄 수 있습니다.
특히 AI와 대화하는 영상에서는 이 구조가 잘 맞았습니다.
제가 입력하면, AI 말풍선이 답하고, 제가 다시 선택하거나 수정하고, 그 결과가 화면에 반영되는 식입니다.
사람과 AI 말풍선은 영상의 기본 언어가 됐습니다
이 영상 구조에서 중요한 그래픽 언어는 말풍선입니다.
인간 입력은 제 키컬러 말풍선과 제 로고로 표시합니다.
AI 응답은 각 AI 에이전트의 메인 컬러와 로고를 사용합니다.
흐름은 단순합니다.
인간 질문. AI 응답. 인간 판단. 다음 입력.
이 구조가 좋은 이유는 AI를 마법처럼 보이게 하지 않는다는 점입니다.
AI가 알아서 다 만든 것이 아니라, 제가 무엇을 물었고, AI가 무엇을 제안했고, 제가 어떤 기준으로 다시 고쳤는지 보이게 만듭니다.
이게 제 콘텐츠 방향과도 맞았습니다.
저는 AI 결과만 보여주고 싶은 게 아니라, 디자이너가 AI와 어떻게 주고받으며 판단하는지를 보여주고 싶었습니다.
실제 같은 화면은 장식이 아니라 이해를 위한 도구였습니다
이번 작업을 하면서 알게 된 건 영상 그래픽이 단순한 꾸밈이 아니라는 점입니다.
특히 AI와 디자인 작업을 설명할 때는 화면이 내용 그 자체가 됩니다.
노션을 말하면서 노션처럼 보이지 않으면 이해가 느려지고, 옵시디언을 말하면서 Inbox 흐름이 보이지 않으면 맥락이 사라지고, AI 제작 도구를 말하면서 어떤 버튼을 눌렀는지 안 보이면 자동화의 의미가 흐려집니다.
그래서 Shortform Studio에서 화면을 실제처럼 만드는 일은 영상 퀄리티를 올리는 장식 작업이 아니라, 제 생각을 더 정확히 전달하기 위한 구조 작업에 가까웠습니다.
앞으로 워드프레스 글을 영상으로 바꿀 때도 단순 요약 영상이 아니라 작업 화면, 말풍선, 커서, 선택 상태, 연결선, 상태 변화를 적극적으로 쓰려고 합니다.
글은 생각을 남기고, 영상은 그 생각이 실제 작업에서 어떻게 움직이는지 보여주는 역할로 나눠볼 예정입니다.
내부 링크
- 이전 글: [AI가 만든 결과를 믿기 전에 제가 먼저 확인해야 했던 것들]
- 다음 글: [Shortform Studio 제작기 다음 글 예정]