중요한 UI를 가리지 않고 자막을 배치하는 법

시연이 마침내 유용한 순간에 도착합니다. 커서가 시청자가 찾으러 온 버튼을 누릅니다. 바로 그때 자막 두 줄이 버튼 위에 나타납니다. 영상에는 자막이 있고, 문구도 맞지만, 핵심 지시는 가려졌습니다.

이런 일은 화면 녹화와 배치가 승인된 뒤에 자막을 추가하는 경우가 많아서 생깁니다. 그때쯤 프레임 아래에는 이미 툴바, 결과 알림, 어쩌면 장식 제목까지 들어 있습니다. 자막 레이어가 합리적으로 갈 곳이 없습니다.

영상 자막은 제품 데모 구도의 한 구성원으로 계획해야 합니다. 역할은 들리는 정보를 보존하는 것입니다. 시연을 유용하게 만드는 시각적 근거와 공존해야 합니다. 충돌 한 곳에서 옮기는 것은 시작일 뿐입니다. 실제 과제는 변화하는 시퀀스 전체를 읽을 수 있게 만드는 것입니다.

자막과 다른 텍스트 구분하기

자막은 말이나 관련된 소리 정보를 나타냅니다. 주석은 화면 속 무언가를 짚습니다. 장면 제목은 현재 부분이 무엇에 관한 것인지 알려 줍니다. 인터페이스 텍스트는 제품 자체에 속합니다. 시각적으로 겹칠 수 있지만 역할을 서로 바꿔서는 안 됩니다.

가상의 분석 튜토리얼을 상상해 보세요. 내레이터가 ‘월간 비교를 선택하세요’라고 말합니다. 자막은 그 문장을 기록합니다. 컨트롤 옆 주석에는 ‘비교 기간’이라고 쓸 수 있습니다. 인터페이스 자체에는 ‘Previous month’라는 이전 달 옵션이 있습니다. 셋을 같은 비중으로 보여 줄 필요는 없지만 제목이 있다는 이유로 자막을 없애면 음성 설명의 일부도 사라집니다.

편집상의 레이어부터 다시 쓰세요. 음성을 담은 자막은 유지하고, 실제 인터페이스 레이블이 선택한 값을 알려 주게 하며, 주석은 실제 모호함을 해결할 때만 남기세요. 자막 트랙에 다른 역할을 시키지 않고도 경쟁을 줄일 수 있습니다.

시각적 구분을 일관되게 쓰세요. 자막은 예측 가능한 읽기 영역에 놓고 작은 주석은 대상에 붙여 둘 수 있습니다. 자막이 클릭 가능한 인터페이스 컨트롤처럼 보이게 만들지 마세요. 어떤 단어가 제품에 속하고 어떤 단어가 편집자가 추가한 것인지 시청자가 추론해야 해서는 안 됩니다.

Netflix의 확립된 예시

Netflix의 일반 타임드 텍스트 지침은 화면 텍스트와 겹치지 않도록 요구합니다. 강제 내러티브 자막 문서는 번역 텍스트가 기존 레이블을 덮지 않고 그 위쪽에 배치된 실제 예시를 보여 줍니다. 재생 컨트롤이 나타날 때의 자막 위치 변경도 설명합니다. 원리는 영화 밖에도 적용됩니다. 쓸 수 있는 자막 공간은 텍스트, 화면, 플레이어 상태 사이의 관계입니다. Netflix: 강제 내러티브 자막 이해하기

왼쪽 예시에서는 아래의 영어 장소와 날짜가 계속 보이고 스페인어 텍스트는 위에 놓입니다. 제품 튜토리얼에서도 시청자가 살펴봐야 할 컨트롤과 결과를 중심으로 같은 결정을 하세요.

예시가 두 종류의 정보를 보존한다는 점을 보세요. 원래 레이블을 지워 번역을 해결하지 않고, 번역을 너무 작게 만들어 구도를 해결하지도 않습니다. 제품 자막에도 필요하면 주변 화면을 재배치하려는 같은 태도가 필요합니다.

시간에 따라 시청자가 봐야 할 것 표시하기

안전 영역 직사각형 하나로 제품 데모를 설명할 수는 없습니다. 중요한 컨트롤이 위에서 시작해 열린 메뉴로 이동한 뒤 아래쪽에 알림을 만들 수 있습니다. 비워 두어야 하는 영역은 작업에 따라 바뀝니다.

자막 배치를 확정하기 전에 짧은 사건 목록을 만드세요. 각 사건에서 동작 대상, 결과 상태, 그 상태를 해석하는 데 필요한 텍스트를 찾으세요. 단순한 클립에 프레임별 스프레드시트가 필요한 것은 아닙니다. 자막의 예측 가능한 영역이 시연과 충돌하는 순간을 알아차려야 합니다.

분석 예시에서 비교 드롭다운은 오른쪽 위에 있고 결과는 아래 차트 범례에 나타날 수 있습니다. 아래 자막은 선택 중에는 무해하지만 해석 중에는 방해가 됩니다. 구도를 바꾸거나 자연스러운 경계에서 자막 위치를 의도적으로 바꿔야 한다는 신호입니다.

자막이 커서를 쫓아가게 하지 마세요. 계속 위치를 바꾸면 읽을 곳을 예측하기 어렵고 문장 중간에 새 충돌이 생길 수 있습니다. 튜토리얼의 일관된 구간별로 몇 개의 안정된 영역을 쓰는 편이 낫습니다.

자막을 줄이기 전에 제품 구도부터 바꾸기

자막이 중요한 컨트롤을 가리면 글자를 줄이고 싶어집니다. 스크린샷을 보존하며 충돌을 해결하는 것처럼 보입니다. 하지만 명백한 겹침을 덜 명백한 읽기 문제로 바꾸는 것입니다. 작은 화면에서는 특히 그렇습니다.

구도 안에서 제품 크롭을 옮기거나 크기를 바꿔 보세요. 녹화 아래에 적당한 공간을 두면 안정적인 자막 영역을 만들 수 있습니다. 더 좁게 자르면 관련 인터페이스를 크게 보이게 하면서 다른 곳에 자막 공간을 충분히 둘 수 있습니다. 두 레이어가 함께 개선되는 경우가 많습니다.

큰 자막 띠 위에 데스크톱 창 전체를 놓아 모든 레이블을 작게 만들지는 마세요. 어떤 대가를 치르더라도 공간을 비우는 것이 목적은 아닙니다. 장면의 정보 우선순위에 따라 공간을 배분하는 것입니다. 빠지는 영역이 시연 동작과 무관하다면 제품 녹화의 일부만 보여 줘도 됩니다.

정말 인터페이스 전체가 필요하다면 별도의 도입 전체 화면 뒤에 근접 화면을 쓰는 방식을 고려하세요. 컨트롤이 어디 있는지 먼저 알려 주고 동작 때 가까이 이동하세요. 시청자는 자막 두 줄 아래에서 데스크톱 전체를 살펴보지 않아도 방향을 파악할 수 있습니다.

문장 경계에 맞춰 위치 바꾸기

문장 중간에 자막이 아래에서 위로 뛰면 시청자는 이어지는 부분을 찾아야 합니다. 새 자막 이벤트, 장면, 작업 단계와 맞물리면 위치 변경을 더 쉽게 따라갈 수 있습니다.

내레이션을 의미 있는 지점에서 나누세요. ‘월간 비교를 선택하세요’는 선택 단계에 놓을 수 있습니다. ‘이제 차트는 지난달의 같은 기간과 비교합니다’는 결과 단계에 속합니다. 둘을 나누면 결과에 프레임 아래쪽이 필요할 때 자막 영역을 옮길 합리적인 기회가 생깁니다.

줄바꿈도 중요합니다. Netflix의 일반 가이드는 긴밀하게 연결된 단어를 갈라놓기보다 언어적 단위를 따라 자막을 나누라고 권합니다. 제품 영상에 적용할 넓은 교훈은 간단합니다. 임의의 텍스트 상자 너비 때문에 제품명, 숫자와 단위, 부정어와 그 부정이 적용되는 문장이 갈라지게 하지 마세요. Netflix: 타임드 텍스트 일반 요구 사항

목적지의 자막 제한 안에서 읽을 수 있는 구를 보존하세요. 시각적으로 대칭인 줄바꿈도 제품명을 가르거나 단위를 숫자에서 떼어 놓을 수 있습니다.

실제 플레이어에 맞춰 개방형 또는 폐쇄형 자막 선택하기

모든 자막 형식이나 호스팅 플랫폼이 스타일과 위치 정보를 보존하는 것은 아닙니다. 자막 편집기의 미리보기에서는 위치를 정할 수 있어도 최종 플레이어는 자체 규칙을 쓸 수 있습니다. 유지할 수 없는 동작을 전제로 디자인하기 전에 전달 경로를 테스트하세요.

예를 들어 Wistia는 업로드한 WebVTT 파일을 SRT로 변환하며 이 변환에서 스타일이나 위치 지시를 지원하지 않는다고 문서화합니다. 원본 형식의 표현 가능성에 의존하지 말고 플랫폼 동작을 확인해야 하는 구체적인 이유입니다. Wistia: 녹취문과 자막

목적지가 위치를 제어한다면 영상 자체에 적절한 영역을 확보하세요. 정밀한 편집 레이블이 필요하다면 자막 트랙이 디자인한 제목 레이어처럼 동작하리라 가정하지 말고 별도의 시각 주석으로 유지하세요.

개방형 자막은 화면에 삽입되어 계속 보입니다. 폐쇄형 자막은 이를 지원하는 플레이어에서 시청자가 켜거나 끌 수 있는 별도 트랙입니다. 둘 중 무엇을 선택하느냐는 배치와 유지보수 모두에 영향을 줍니다. 자막을 구워 넣으면 정확한 위치를 더 잘 제어하지만 시청자가 숨길 수 없고 번역이나 수정 때 영상을 다시 내보내야 합니다. 별도 자막 트랙은 독립적으로 바꿀 수 있지만 위치는 목적지 플레이어에 따라 달라집니다. 시연을 다시 만들지 않고 전달 방식을 바꿀 수 있도록 깨끗한 마스터와 자막 파일을 보관하세요.

재생 컨트롤이 보이는 상태에서 확인하기

제품 영상은 아래 가장자리를 상태 표시줄, 파일 탭, 완료 메시지에 쓰는 경우가 많습니다. 플레이어도 같은 영역을 타임라인과 컨트롤에 쓸 수 있습니다. 자막을 추가하면 같은 공간을 요구하는 세 번째 요소가 생깁니다.

실제 플레이어를 일시 정지, 재생 중, 끝부분에서 검토하세요. 해당 동작이 적용된다면 포인터를 올려 컨트롤을 드러내세요. 휴대전화에서는 탭했을 때 생기는 컨트롤을 확인하세요. 컨트롤이 사라진 뒤의 깨끗한 스크린샷만으로 일반 사용 중 시연을 계속 읽을 수 있다고 판단할 수는 없습니다.

자막이 자동으로 움직인다고 안전한 곳으로 간다고 가정하지 마세요. 플레이어가 타임라인 위로 자막을 올리면서 제품 알림 바로 위에 놓을 수 있습니다. 파일과 플레이어는 따로 보면 각각 합리적으로 동작해도 조합하면 실패할 수 있습니다.

중요한 결과가 잠깐만 나타난다면 예상 컨트롤 영역을 피하거나 뒤에 안정된 결과를 보여 주세요. 다른 창에서 튜토리얼을 따라 하느라 일시 정지하는 사람에게도 도움이 됩니다. 멈추면 지시를 더 쉽게 살펴볼 수 있어야 합니다.

일시 정지된 결과에 필요한 공간 확보하기

일시 정지된 Netflix 예시를 자세히 보세요. 자막은 진행 막대와 컨트롤 줄 바로 위에 있습니다. 플레이어가 화면 아래의 상당한 띠를 차지했고, 쓸 수 있는 읽기 영역도 그와 함께 위로 옮겨 갔습니다.

제품 튜토리얼은 바로 그 띠에 가장 유용한 확인을 놓는 경우가 많습니다. 내보내기 완료, 링크 복사 알림, 저장 상태 메시지는 흔히 가장자리 가까이에 나타납니다. 시청자가 결과를 살피려고 멈추면 그 순간 컨트롤이 나타나 자막을 알림 위로 밀어 올릴 수 있습니다.

녹화 전에 결과가 차지하는 영역을 고려해 계획하세요. 목적지 플레이어의 컨트롤을 열고 자막이 놓이는 곳을 파악한 뒤 보여 줘야 할 제품 상태와 비교하세요. 충돌한다면 구도 안에서 녹화를 옮기거나 결과를 더 위에 놓는 근접 크롭을 고르세요. 자막만 올리면 다음으로 중요한 인터페이스 줄을 가릴 수 있습니다.

일시적인 알림이 사라진 뒤에도 최종 상태를 보이게 유지하세요. 내보내기라면 짧은 토스트와 함께 결과 파일이나 관련 완료 항목도 보여 주세요. 다른 창에서 따라 하던 사람이 돌아와 안정적인 결과를 볼 수 있습니다. 컨트롤이 나타나기 전의 짧은 구간에 알림을 포착하도록 요구하는 것보다 믿을 만합니다.

동작과 결과가 서로 다른 모서리에 있다면 의도적인 두 화면으로 다루세요. 동작을 먼저 알려 주고, 안정적인 자막 영역이 있는 명확한 화면으로 결과를 보여 주세요. 시청자가 설명을 읽는 것과 완료를 확인하는 것 중 하나를 골라야 해서는 안 됩니다.

수정 예시: 보고서 내보내기

영상에 보고서 편집기, 오른쪽 아래의 Export 버튼, 같은 모서리의 다운로드 확인이 나온다고 해 봅시다. 클릭하는 동안 내레이션이 내보내기 형식을 설명합니다. 아래 자막이 버튼과 확인을 모두 가립니다.

첫 수정에서는 피할 수 있는 충돌을 줄여야 합니다. 형식 선택기가 보일 때 형식 설명을 조금 앞당기세요. 선택기에 더 가깝게 크롭하세요. 그런 다음 더 짧은 음성 문장과 컨트롤을 가리지 않는 영역의 자막으로 내보내기 동작을 보여 주세요.

클릭 뒤에는 실제 결과 파일이나 확인을 읽을 수 있는 화면을 유지하세요. 진짜 근거를 가린다면 인터페이스 위에 거대한 장식용 ‘성공’ 레이블을 추가하지 마세요. 별도 제목이 유용하다면 위치와 위계를 다르게 주세요.

이제 평균적인 자막뿐 아니라 그 구간에서 가장 긴 자막을 살펴보세요. 한 줄이 더 생기면 충돌이 다시 생길 수 있습니다. 번역 뒤에도 같습니다. 가장 짧은 영어 문장에서만 작동하는 배치 해법은 아직 안정적인 구도가 아닙니다.

레이아웃 검토에 실제로 나올 수 있는 가장 긴 자막 포함하기

목업에서 깔끔한 예문을 고르는 것은 흔한 검토 실수입니다. 나중에 실제 녹취문에는 제품명, 기술 용어, 조건이 들어가 한 줄이 더 생깁니다. 승인한 배치는 자신이 담아야 할 자료로 한 번도 시험하지 않은 셈입니다.

레이아웃을 평가할 때 실제 녹취문의 자막 이벤트를 쓰세요. 가장 긴 이벤트, 짧은 이벤트, 가장 중요한 결과와 겹치는 이벤트를 포함하세요. 여러 언어를 계획한다면 같은 글자를 반복한 인공 문자열 대신 검토된 대표 번역을 포함하세요. 실제 단어는 실제 줄바꿈을 만들고 타이포그래피가 버거워하는 지점을 드러냅니다.

움직이는 배경에서의 대비도 확인하세요. 어두운 탐색 레일 위에서 명확한 자막도 뒤에 흰 메뉴가 열리면 사라질 수 있습니다. 절제된 배경 처리로 대비를 안정시킬 수 있지만 그 처리 역시 시각적 공간을 차지합니다. 텍스트만 따로 판단하지 말고 차지하는 공간을 인터페이스와 대조해 테스트하세요. 올바른 처리는 아래의 근거를 보존하면서 계속 읽을 수 있게 하는 처리입니다.

작업의 일부로 자막 검토하기

맞춤법 검토와 충돌 검토는 다릅니다. 완벽하게 옮긴 문장이 잘못된 대상을 가릴 수 있습니다. 시각적으로 우아한 자막에 틀린 금액이나 제품명이 들어갈 수 있습니다. 둘 다 주의해야 합니다.

먼저 자막 텍스트를 오디오 및 승인된 용어와 비교하세요. 그다음 예상 표시 크기로 자막 영상을 보세요. 시청자가 인터페이스와 자막을 동시에 읽어야 하는 순간을 모두 찾으세요. 거기서 멈추고 합쳐진 화면을 살펴보세요.

마지막으로 누군가 영상으로 시연 작업을 수행하거나 설명하게 하세요. 컨트롤을 놓친다면 가려졌는지, 너무 작은지, 너무 빨리 소개됐는지, 자막에서 다른 이름을 썼는지 찾으세요. 원인마다 필요한 수정이 다릅니다.

관찰은 구체적으로 남기세요. ‘클릭 중 자막이 Export를 가렸다’는 실행 가능한 피드백입니다. ‘자막이 어색하다’는 다음 편집자가 추측하게 만듭니다. 일반적인 스타일 선호를 길게 나열하는 것보다 정확한 순간 몇 개가 대개 더 가치 있습니다.

다음 녹화에서는 일찍 공간 마련하기

가장 좋은 수정은 녹화 전에 일어나는 경우가 많습니다. 중요한 컨트롤이 프레임 가장자리에 붙지 않도록 창을 배치하세요. 제품이 허용하면 무관한 패널을 숨기세요. 작업 흐름을 왜곡하지 않으면서 관련 결과를 작고 읽기 쉽게 유지하는 현실적인 데이터를 쓰세요.

핵심 동작 주변에 몇 초의 안정된 영상을 계획하세요. 텍스트를 전환 위로 억지로 보내지 않고 자막을 자연스럽게 맞출 편집 여유가 생깁니다. 녹화를 멈추기 전에 필요한 확인이나 생성 파일을 포함해 결과 전체를 담으세요.

자막이 있는 제품 시연에서는 시청자가 설명을 읽고 근거를 살펴볼 수 있어야 합니다. 같은 픽셀을 두고 싸워 어느 레이어가 이겨야 해서는 안 됩니다. 배치, 타이밍, 크롭, 전달을 함께 고려하면 자막은 튜토리얼이 가르치는 방식의 일부가 되고, 가장 중요한 UI는 필요한 순간에 계속 보입니다.