"이런 느낌으로" 말고 장면표로 — 웹사이트 사용법 30초 안내 영상 스토리보드 만들기 (프롬프트 3개)
멋진 제품 소개 영상을 보면 "우리 홈페이지 안내 영상도 이런 느낌으로 만들어 줘"라고 말하고 싶어집니다. 그런데 이렇게 맡기면 AI든 사람이든 어느 화면을, 몇 초 동안, 무엇을 강조해서 보여 줄지를 대신 정해 버립니다. 결과물이 매번 달라지고, 정작 독자가 헷갈려하는 버튼은 1초 만에 지나가기 일쑤입니다.
이번에는 '느낌' 대신 장면표로 지시하는 방법을 알려드리겠습니다. 예제는 프롬프트 자료실에서 카드를 찾고 내용을 복사하는 과정입니다. 이 과정을 30초 안내 영상의 6구간 장면표와 핵심 4장면 스케치로 바꾸고, 같은 작업을 AI에게 맡길 수 있는 프롬프트 3개를 함께 드립니다.
장면표(스토리보드) — 영상을 시간 구간으로 나누고, 구간마다 무엇을 보여 주고 무엇을 말할지 적은 제작 지시서입니다.
카메라 — 화면 녹화 영상에서는 실제 카메라가 아니라 화면을 확대하거나 옮겨 가는 움직임을 말합니다.
강조 — 봐야 할 곳에 테두리·밝은 바탕·커서를 얹어 시선을 끄는 것입니다.
자막 읽기 시간 — 자막이 떠 있는 동안 끝까지 읽을 수 있는지. 글자가 많으면 구간을 늘리거나 자막을 줄입니다.
| 만들 것 | 30초 사용법 안내 영상의 6구간 장면표 + 핵심 4장면 스케치 |
| 예제 화면 | 가상 프롬프트 자료실(설명을 위해 만든 화면 구성이며, 실제 운영 중인 사이트 화면이 아닙니다) |
| 준비물 | 대화형 AI(ChatGPT·클로드·제미나이 등 아무거나), 내 화면의 요소 목록, 참고 영상이 있다면 직접 보고 적은 관찰 메모 |
| 결과물 성격 | 이 글의 장면표와 스케치는 작성 예시입니다. AI로 실행해 받은 실제 결과가 아닙니다 |
1. '이런 느낌'을 다섯 칸으로 바꾸기
안내 영상의 한 구간은 다섯 가지만 정하면 됩니다. 시간, 화면 상태, 행동 대상, 카메라·강조, 자막입니다. "멋지게"라는 말에는 이 다섯 칸이 하나도 들어 있지 않습니다. 아래 그림은 같은 장면을 두 가지 말투로 지시한 것입니다.
다섯 칸 중 가장 자주 빠지는 것은 화면 상태입니다. "펼치기 버튼을 누른다"만 적으면, 그 순간 화면에 검색 결과가 떠 있는지, 카드가 이미 펼쳐져 있는지가 불분명합니다. 앞 구간이 끝난 모습이 다음 구간의 시작 모습이 되도록 적어 두면 장면이 끊기지 않습니다.
2. Keyframe은 '따라 할 영상'이 아니라 '관찰 연습장'
Keyframe Gallery는 여러 제품 팀이 만든 UI 모션(버튼이 눌리고, 패널이 열리고, 화면이 넘어가는 움직임) 사례를 골라 모아 둔 갤러리입니다. 프롬프트를 모아 둔 곳이 아니라 움직임 사례를 보는 곳이라는 점을 먼저 짚어 둡니다.
2026년 10월 11일에 확인한 범위는 이렇습니다. 첫 화면에는 제목·설명 없이 미리보기 썸네일이 늘어서 있고, 상단에 로그인과 Get Access(이메일 가입) 버튼이 있습니다. 이용 약관에는 전체 라이브러리·검색·북마크가 포함된 Pro 플랜(연 59달러)이 적혀 있고, 콘텐츠는 개인적·비상업적 영감과 교육 목적으로만 쓰며 저작권자 허락 없이 내려받거나 복제·배포하지 말라고 되어 있습니다. 가입 후 무료로 어디까지 볼 수 있는지는 확인하지 못했습니다. 요금과 조건은 바뀔 수 있으니 가입 전에 약관을 직접 확인하세요.
그래서 이 글에서는 특정 사례 영상을 골라 분석하지 않았습니다. 공개 첫 화면의 썸네일만으로는 움직임을 관찰할 수 없기 때문입니다. 대신 여러분이 사례 영상을 직접 볼 수 있다면, 다음처럼 원리만 메모해 두세요.
- 이동 — 화면이 어디에서 어디로, 몇 초에 걸쳐 옮겨 갔나
- 강조 — 누를 곳을 무엇으로 알려 줬나(테두리, 밝기, 커서, 주변 흐리게)
- 속도 — 빠르게 지나간 곳과 오래 머문 곳은 어디인가
- 글자 — 화면에 글자가 몇 줄, 몇 초 동안 떴나
영상 속 브랜드·색·문구·장면 순서를 그대로 옮기는 것이 아니라, "누를 곳은 테두리로 알려 주고 그 전에 화면을 그쪽으로 옮긴다" 같은 원리만 가져오는 것입니다. 참고 영상이 없어도 괜찮습니다. 아래 장면표는 참고 영상 없이 우리 화면만 보고 만들었습니다.
3. 화면 요소 목록부터 적기
장면표를 쓰기 전에 화면에 실제로 있는 것을 먼저 적습니다. 이 목록이 있어야 "없는 버튼을 누르는 장면"이 생기지 않습니다. 이번 예제는 설명을 위해 구성한 가상 프롬프트 자료실 화면입니다. 여러분의 홈페이지·학습 사이트로 바꿀 때는 이 표부터 새로 채우면 됩니다.
| 요소 이름 | 위치 | 누르거나 입력하면 |
|---|---|---|
| 검색창 | 상단 가운데 | 입력한 낱말이 들어간 카드만 남음 |
| 분류 탭(전체·문서·영상·수업) | 검색창 바로 아래 | 해당 분류 카드만 보임(이번 영상에서는 누르지 않음) |
| 프롬프트 카드 | 가운데 목록 | 제목, 태그, 미리보기 두 줄이 보임 |
| 펼치기 버튼 | 각 카드 오른쪽 아래 | 카드 아래로 프롬프트 전문이 펼쳐짐 |
| 입력칸 표시 | 펼친 본문 안 | 대괄호 [ ] 부분이 노란 바탕으로 보임 |
| 복사 버튼 | 펼친 본문 오른쪽 위 | 누르면 '복사됨' 표시가 잠시 뜸 |
위치는 픽셀 좌표가 아니라 "상단 가운데", "카드 오른쪽 아래"처럼 상대 위치로 적습니다. 화면 크기가 바뀌어도 통하고, AI가 화면을 보지 못한 채 좌표를 지어내는 일도 막을 수 있습니다.
4. 30초 장면표 — 여섯 구간
사용자의 행동 순서는 자료실 열기 → 카드 찾기 → 내용 펼치기 → 입력칸 이해 → 복사 → 활용 안내입니다. 이를 여섯 구간으로 나누되, 길이를 똑같이 5초씩 주지 않았습니다. 처음 보는 사람이 가장 헷갈리는 입력칸에 시간을 가장 많이 줬습니다.
아래는 위 타임라인을 다섯 칸으로 풀어 쓴 장면표입니다. 작성 예시이며, 가상 자료실 화면을 기준으로 했습니다.
| 구간·시간 | 화면 상태 | 행동 대상 | 카메라·강조 | 자막 |
|---|---|---|---|---|
| ① 0:00~0:04 열기 | 자료실 첫 화면: 검색창, 분류 탭, 카드 목록 | 없음(화면만 보여 줌) | 전체 화면 고정, 0.5초 밝아지며 시작 | 프롬프트 자료실을 엽니다 |
| ② 0:04~0:09 카드 찾기 | 첫 화면 → 검색 후 '회의록' 카드 2개만 남은 목록 | 검색창(상단 가운데)에 '회의록' 입력 | 검색창 쪽으로 1.2배 확대, 검색창 테두리 강조 | 할 일을 검색해 카드를 찾고 |
| ③ 0:09~0:14 펼치기 | 검색 결과 목록 → '회의록 요약' 카드가 펼쳐진 상태 | '회의록 요약' 카드의 펼치기 버튼(카드 오른쪽 아래) | 카드로 1.3배 확대하며 이동, 버튼 테두리 강조 | 펼치면 프롬프트 전문이 보여요 |
| ④ 0:14~0:21 입력칸 이해 | 펼친 본문(입력칸 3개가 노란 바탕) | 입력칸 [회의 날짜] → [참석자] → [회의 메모] | 본문을 위에서 아래로 천천히 내림, 칸마다 번호 표시 | [ ] 칸은 내 자료로 바꿀 자리 |
| ⑤ 0:21~0:25 복사 | 펼친 본문 → '복사됨' 표시가 뜬 상태 | 복사 버튼(본문 오른쪽 위) | 복사 버튼으로 1.3배 확대, '복사됨' 표시 강조 | 복사 버튼 한 번이면 끝 |
| ⑥ 0:25~0:30 활용 안내 | '복사됨' 표시가 사라진 펼친 본문 + 화면 아래 안내 띠(편집에서 얹음) | 없음(안내 띠 읽기) | 원래 크기로 천천히 축소, 안내 띠만 강조 | AI 창에 붙이고 칸만 바꾸세요 |
⑥ 구간의 안내 띠는 자료실 화면에 있는 요소가 아니라 영상 편집 단계에서 얹는 그래픽입니다. 이렇게 화면에 있는 것과 나중에 얹는 것을 표에 구분해 적어 두면, 녹화하는 사람이 "이 띠는 어디서 눌러야 나오나요?" 하고 헤매지 않습니다.
핵심 4장면 스케치
장면표만으로는 화면이 머릿속에 잘 그려지지 않습니다. 실제 행동이 일어나는 ②~⑤ 구간을 와이어프레임(화면의 뼈대만 그린 그림)으로 그렸습니다. 점선은 카메라가 담는 범위, 주황·분홍 테두리는 강조, 아래 검은 띠는 자막입니다.
스케치를 그릴 때는 앞 장면의 마지막 모습과 다음 장면의 첫 모습이 같은지 봅니다. ③의 끝은 '카드가 펼쳐진 상태'이고 ④는 그 펼친 본문에서 시작합니다. ④에서 갑자기 검색 결과 목록으로 돌아가 있으면, 보는 사람은 단계를 하나 놓친 것처럼 느낍니다.
5. AI에게 맡기는 프롬프트 3개
장면표를 직접 쓰기 어렵다면 AI에게 맡길 수 있습니다. 다만 AI는 링크 속 영상이나 여러분의 홈페이지 화면을 보지 못한다고 가정하고, 필요한 정보를 글로 넣어 줘야 합니다. 세 프롬프트는 같은 결과물(30초 장면표)을 순서대로 다룹니다. 모두 직접 설계한 AI오토마타 응용 프롬프트이며, 참고 사례를 보는 곳으로 Keyframe Gallery를 연결해 둡니다.
프롬프트 A — 참고 영상에서 원리만 뽑기
언제 쓰나 — Keyframe 같은 갤러리나 다른 제품 소개 영상을 직접 보고 메모를 남겼을 때, 그 메모를 우리 영상의 규칙으로 바꾸고 싶을 때 씁니다.
첫 제작 준비 — 관찰 메모에서 원리만 뽑기 (AI오토마타 응용 프롬프트)
입력 예시(작성 예시 — 실제 Keyframe 영상을 보고 쓴 메모가 아닙니다)
[관찰 메모] 0~1초: 앱 첫 화면 전체가 보임 1~3초: 화면이 목록 쪽으로 미끄러지듯 확대됨 3초: 누를 버튼에만 밝은 테두리, 주변은 살짝 어두워짐 4~5초: 버튼이 눌리고 패널이 아래로 펼쳐짐 화면 아래 글자는 한 번에 한 줄, 짧은 문장 [우리 안내 목적] 처음 온 사람이 자료실에서 프롬프트를 복사해 가게 하기
확인할 결과 — 규칙이 "깔끔하게"가 아니라 "누르기 전 1초 동안 해당 영역으로 확대"처럼 숫자와 위치로 적혔는지, 메모에 없는 효과(소리, 색 등)를 지어내지 않고 '메모에 없음'으로 남겼는지 봅니다.
프롬프트 B — 30초 장면표 만들기
언제 쓰나 — 화면 요소 목록과 사용자 행동 순서가 준비됐을 때, 6구간 장면표 초안을 받는 단계입니다. 이 글의 장면표가 이 프롬프트로 받을 결과의 형식입니다.
첫 제작 — 30초 장면표 받기 (AI오토마타 응용 프롬프트)
입력 예시(이 글의 가상 자료실 기준)
[화면 요소 목록] 검색창 | 상단 가운데 | 입력한 낱말이 들어간 카드만 남음 분류 탭(전체·문서·영상·수업) | 검색창 아래 | 해당 분류 카드만 보임 프롬프트 카드 | 가운데 목록 | 제목·태그·미리보기 두 줄 펼치기 버튼 | 카드 오른쪽 아래 | 카드 아래로 프롬프트 전문이 펼쳐짐 입력칸 표시 | 펼친 본문 안 | 대괄호 부분이 노란 바탕 복사 버튼 | 펼친 본문 오른쪽 위 | 누르면 '복사됨' 표시가 잠시 뜸 [사용자 행동 순서] 자료실 열기 → '회의록' 검색 → '회의록 요약' 카드 펼치기 → 입력칸 3개 확인 → 복사 → AI 창에 붙여 넣고 칸 바꾸기 안내 [영상 규칙] 누르기 전에 그 영역으로 먼저 확대 / 누를 곳만 테두리 강조
확인할 결과 — 표가 6행인지, 계산식 합계가 30인지, 표 안에 '즐겨찾기', '로그인'처럼 목록에 없는 요소가 나오지 않았는지, 좌표 숫자가 없는지 봅니다.
프롬프트 C — 점검하고 고치기
언제 쓰나 — B에서 받은 장면표(또는 직접 쓴 장면표)를 녹화·편집에 넘기기 전에 씁니다. 사람이 하나하나 세기 번거로운 시간 합계와 자막 길이를 먼저 걸러 냅니다.
결과 점검·문제 수정 — 장면표 검수 (AI오토마타 응용 프롬프트)
입력 예시 — [장면표]에는 프롬프트 B의 결과 표를 그대로 붙이고, [화면 요소 목록]은 B와 같은 것을 넣습니다. 자막 기준의 숫자 [4]는 이 글에서 쓴 자체 기준입니다. 천천히 읽는 시청자가 많으면 3으로 낮추세요.
확인할 결과 — 점검표 근거 칸에 "③ 16자 ÷ 5초 = 3.2"처럼 계산이 실제로 적혀 있는지 봅니다. 계산 없이 '통과'만 적혀 있으면 한 번 더 "근거 계산을 표에 적어 줘"라고 요청하세요.
6. 결과 확인 기준
| 확인할 것 | 통과 기준 | 이 글의 예시 |
|---|---|---|
| 합계 시간 | 구간 길이 합 = 30초, 빈틈·겹침 없음 | 4+5+5+7+4+5 = 30 |
| 존재하는 요소만 | 표에 나오는 버튼·칸이 모두 요소 목록에 있음 | 안내 띠는 '편집에서 얹음'으로 구분 |
| 자막 읽기 시간 | 초당 4자 이하(공백 포함, 자체 기준) | 가장 빠른 구간 ⑤ 13자 ÷ 4초 ≈ 3.3 |
| 장면 이어짐 | 앞 구간의 끝 = 다음 구간의 시작 | ③ 펼친 상태 → ④ 펼친 본문 |
| 효과 절제 | 전환 효과 2종류 이하 | 확대·축소와 테두리 강조만 사용 |
7. 흔한 실패 3가지와 고치는 법
| 실패 | 왜 생기나 | 이렇게 고치기 |
|---|---|---|
| 없는 버튼을 누르는 장면 | AI가 화면을 보지 못한 채 흔한 사이트 모습을 떠올려 채움 | 화면 요소 목록을 먼저 넣고, "목록에 없는 요소는 '추가 필요 요소'로 따로" 조건을 붙임 |
| 자막을 다 읽기 전에 넘어감 | 설명을 자막 한 줄에 몰아 넣음 | 자막을 줄이거나 해당 구간을 늘리고, 덜 중요한 구간(열기·복사)에서 시간을 가져옴 |
| 매 구간 화려한 전환 | "역동적으로" 같은 말에 AI가 효과를 계속 바꿈 | 전환 효과 2종류 이하로 제한하고, 확대는 "누르기 전 그 영역으로"처럼 이유가 있는 곳에만 |
- Keyframe의 사례 영상은 약관상 개인적·비상업적 영감과 교육 목적으로 보는 자료입니다. 영상을 내려받거나 캡처해 내 영상에 넣지 말고, 원리만 메모하세요.
- Keyframe의 요금·무료 열람 범위는 이 글을 쓴 2026-10-11 기준으로 확인한 내용이며 바뀔 수 있습니다. 가입 전에 약관을 직접 확인하세요.
- 이 글의 자료실 화면은 설명을 위한 가상 화면입니다. 내 사이트로 바꿀 때는 요소 목록을 실제 화면을 보며 새로 적으세요.
- 장면표는 녹화 전 계획입니다. 실제로 녹화해 보면 페이지 로딩 시간 때문에 구간 길이가 달라질 수 있으니, 녹화 후 프롬프트 C로 한 번 더 점검하세요.
학생이 과제 제출·자료 내려받기를 헷갈릴 때, 30초 장면표 하나로 녹화 기준을 정해 두면 해마다 다시 찍기도 쉽습니다.
교사민원 신청·예약 화면처럼 단계가 정해진 화면에 잘 맞습니다. 입력칸 설명 구간을 가장 길게.
기관새로 온 동료에게 보낼 짧은 사용법 영상. 요소 목록만 바꾸면 같은 프롬프트를 그대로 씁니다.
직장인함께 보면 좋은 글
출처
· Keyframe Gallery 첫 화면 — https://keyframe.gallery/ (2026-10-11 확인: 서비스 성격, 로그인·Get Access 안내)
· Keyframe Gallery 이용 약관 — https://keyframe.gallery/terms-and-conditions (2026-10-11 확인: Pro 플랜 요금, 비상업적 이용·복제 금지 조건)
댓글
댓글 쓰기