지금 읽는 곳왜 세로 화면 기준으로 디자인해야 하나목차
STEP 1 초급·기초 › 1-5. 오프라인 프로모션·특수 커머스 › 과목 34 › 레슨 08
라이브 화면 UI/UX 디자인: 스마트폰 세로 화면에 최적화된 자막 바, 상단 혜택 고지 배너 이미지 캔바로 제작하기
시청자는 스마트폰을 세로로 들고 방송을 보므로, 가로형 콘텐츠 감각으로 화면을 꾸미면 정보가 잘려 보일 수 있습니다.
핵심요약
- 라이브커머스 화면은 세로 비율에 최적화된 레이아웃으로 설계해야 한다
- 자막 바는 음성으로 놓칠 수 있는 핵심 정보를 텍스트로 보완하는 역할을 한다
- 상단 배너는 방송 내내 노출되는 핵심 혜택을 고지하는 자리로 활용해야 한다
- 캔바 같은 무료 툴로도 방송에 필요한 이미지 소재를 충분히 만들 수 있다
- 화면 구성은 실제 스마트폰 화면에서 미리 확인해 잘리거나 가려지는 부분이 없는지 봐야 한다
왜 세로 화면 기준으로 디자인해야 하나
대부분의 라이브커머스 시청자는 스마트폰을 세로로 든 채 방송을 시청하므로, 가로로 넓은 이미지를 그대로 쓰면 화면 양옆이 잘리거나 정보가 작게 보일 수 있습니다. 배너나 자막 같은 그래픽 요소는 처음부터 세로 비율(9:16)에 맞춰 제작해야, 스마트폰 화면 전체를 채우면서도 정보가 온전히 전달됩니다. 방송 플랫폼마다 화면 비율이나 UI 요소가 조금씩 다를 수 있으므로, 실제 사용할 플랫폼의 화면 구성을 미리 확인하고 디자인 규격을 맞추는 것이 안전합니다.
자막 바는 왜 필요한가
현장 소음이나 마이크 상태에 따라 음성이 잘 들리지 않을 수 있고, 소리를 끄고 방송을 시청하는 사람도 적지 않습니다. 화면 하단에 핵심 혜택이나 상품명을 텍스트로 표시하는 자막 바를 두면, 소리 없이 보는 시청자에게도 핵심 정보가 전달돼 이탈을 줄일 수 있습니다. 자막은 너무 자주 바뀌면 오히려 산만해 보이므로, 방송 흐름의 핵심 구간(혜택 안내, 상품명)에서만 업데이트하는 정도로 절제해서 사용하는 것이 좋습니다.
상단 배너는 어떻게 활용해야 하나
화면 상단은 방송 내내 시청자 눈에 지속적으로 노출되는 자리이므로, 방송 중 계속 강조하고 싶은 핵심 혜택(무료배송, 할인율)을 고정 배너로 배치하는 것이 효과적입니다. 배너 문구는 배너(4강)와 마찬가지로 짧고 명확하게, 한눈에 읽히는 굵은 글씨로 구성해야 스크롤하며 지나가듯 보는 시청자에게도 정보가 전달됩니다. 방송 중간에 혜택이 바뀌거나 새로운 이벤트가 추가되면, 상단 배너도 그 시점에 맞춰 업데이트해 항상 최신 정보가 보이도록 관리해야 합니다.
캔바로 무엇을 만들 수 있나
전문 디자이너 없이도 캔바 같은 무료 디자인 툴을 활용하면 자막 바, 상단 배너, 방송 시작·종료 안내 화면 같은 기본적인 그래픽 소재를 충분히 만들 수 있습니다. 캔바에는 세로형 소셜미디어 템플릿이 이미 다양하게 제공되므로, 이 템플릿을 라이브커머스 화면 비율에 맞게 조금씩 수정하는 방식으로 시작하면 디자인 경험이 없어도 빠르게 결과물을 만들어낼 수 있습니다. 브랜드 컬러와 폰트를 캔바에 미리 등록해두면, 매 방송마다 소재를 새로 만들 때도 브랜드 톤이 일관되게 유지됩니다.
정보가 너무 많으면 어떤 문제가 생기나
자막, 배너, 진행자, 상품까지 한 화면에 너무 많은 요소를 욱여넣으면 시청자가 정작 봐야 할 상품이나 진행자의 표정을 놓치게 될 수 있습니다. 화면 요소는 우선순위를 정해, 지금 가장 중요한 정보(핵심 혜택) 하나만 눈에 띄게 배치하고 나머지는 최소화하는 것이 원칙입니다. 화면이 복잡해 보인다면 자막이나 배너 중 하나를 잠시 숨기고 상품 시연에 집중하는 구간을 따로 만드는 것도 정보 과부하를 줄이는 방법입니다.
실제 화면 확인은 왜 빼먹으면 안 되나
컴퓨터 화면에서 디자인 작업을 하다 보면 실제 스마트폰 화면에서 어떻게 보이는지 감각이 어긋나기 쉽습니다. 방송 전 반드시 실제 스마트폰으로 화면을 확인해, 자막이나 배너가 다른 UI 요소(댓글창, 좋아요 버튼)에 가려지지는 않는지, 글씨 크기가 스마트폰 화면에서도 충분히 읽히는지 점검해야 합니다. 여러 기종의 스마트폰(화면 크기가 다른 기종)에서 확인해보면 특정 기종에서만 요소가 잘리는 문제를 미리 발견할 수 있습니다.
상품마다 다른 소재를 준비해야 하나
방송 하나에서 여러 상품을 다룬다면, 상품마다 강조하고 싶은 혜택이나 핵심 정보가 다를 수 있으므로 상단 배너나 자막도 상품이 바뀔 때마다 함께 업데이트하는 것이 이상적입니다. 매번 새로 디자인하기 번거롭다면, 기본 템플릿 하나를 만들어두고 상품명과 혜택 문구만 바꿔 끼우는 방식으로 제작 시간을 크게 줄일 수 있습니다. 방송 전 다룰 상품 목록과 순서를 미리 정리해두면, 그 순서에 맞춰 필요한 배너 소재를 방송 전에 한 번에 준비해둘 수 있습니다.
색상과 폰트는 어떻게 선택해야 하나
화면 요소의 색상과 폰트도 4강에서 다룬 배너 카피라이팅의 가독성 원칙과 같은 기준을 적용해야 합니다. 배경과 명확히 대비되는 색상을 쓰고, 스마트폰 작은 화면에서도 또렷하게 읽히는 굵은 서체를 선택하는 것이 기본입니다. 브랜드 컬러를 살리고 싶다면 포인트 색상으로만 활용하고, 핵심 정보를 담는 자막·배너는 가독성이 검증된 색상 조합으로 구성하는 절충이 필요합니다.
화면 요소는 얼마나 자주 업데이트해야 하나
같은 배너를 방송 내내 그대로 두면 시청자가 익숙해져 정보가 잘 눈에 들어오지 않게 될 수 있습니다. 방송 중 큐시트(3강)의 구간이 바뀔 때마다 배너 문구도 함께 갱신하면, 지금 방송이 어느 단계인지 시청자에게도 자연스럽게 전달되고 화면에 계속 신선함을 줄 수 있습니다. 다만 너무 자주 바꾸면 오히려 산만해지므로, 구간이 바뀌는 시점처럼 명확한 기준에 맞춰 업데이트하는 것이 균형 잡힌 방법입니다.
소재는 언제까지 준비해두면 안전한가
방송 직전에야 배너와 자막을 급하게 만들면 오탈자나 잘못된 정보(가격, 혜택 조건)가 그대로 방송에 노출될 위험이 커집니다. 방송 최소 하루 전에는 필요한 모든 그래픽 소재를 완성해두고, 실제 방송 장비에 띄워보는 리허설까지 마치는 것이 안전한 준비 순서입니다. 여러 사람이 소재 제작에 관여한다면, 최종 업로드 전 누군가 한 번 더 검수하는 절차를 넣어 오류를 미리 걸러내는 것이 좋습니다.