본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

Loom이란 무엇인가요?

Loom은 바로 공유 가능한 비디오를 통해 메시지를 전달하는 데 도움이 주는 비디오 메시징 도구입니다.
Loom을 사용하면 카메라, 마이크, 데스크톱 화면을 동시에 녹화할 수 있습니다. 녹화된 영상은 Loom 의 특허 기술을 통해 즉시 공유 가능합니다.

Loom 영상 임베드 방법

1. Embed 컴포넌트 추가

먼저 Framer 편집기에서 Insert 메뉴를 열고 embed를 찾아서 캔버스로 드래그해 위치시켜주세요.

2. Loom에서 embed 코드 가져오기

1. 영상의 공유 페이지에서 영상 상단의 Share 버튼을 클릭하세요.

2. Embed 옵션을 선택하고, 영상의 공개 범위가 “Anyone with the link”인지 확인해야 합니다.

3. Loom이 제공한 embed 코드를 그대로 복사합니다.

기본 코드 예시:

<div style="position: relative; padding-bottom: 56.074766355140184%; height: 0;">
  <iframe src="<https://www.loom.com/embed/영상ID?.>.."></iframe>
</div>

3. div 태그의 style 속성 제거

Framer의 embed 컴포넌트와 충돌하지 않도록, 위 코드 중 <div>에 들어있는 style 속성만 삭제해 주세요.

즉, 아래와 같은 형태가 되어야 합니다:

<div>
  <iframe src="<https://www.loom.com/embed/영상ID?.>.."></iframe>
</div>

4. Framer Embed 컴포넌트에 코드 붙여넣기

1. Framer로 돌아와서 캔버스에 놓아둔 Embed 컴포넌트를 선택하세요.

2. 오른쪽 패널에서 HTML 탭으로 전환하면 나타나는 입력창에 코드를 붙여넣어주세요.

3. 이제 사이트를 미리보거나 발행하면, Loom 영상이 페이지 안에 자연스럽게 표시됩니다.

5. 추가 파라미터 설정

영상 재생 옵션이나 표시 방식 등 더 세부적인 설정이 필요한 경우 Loom 지원 문서를 참고하시면 됩니다.
여전히 문제가 발생하는 경우, 연락처 페이지를 통해 문의해 주세요.

자주 묻는 질문(FAQ)

Q. Embed 컴포넌트를 반응형으로 만들기 위한 추가 설정이 필요한가요?

• 아닙니다. Framer의 Embed 컴포넌트는 기본적으로 container 크기에 맞춰 자동 반응형으로 동작하기 때문에 별도의 CSS를 추가하지 않아도 됩니다.

Q. 영상이 너무 크게 표시되면 수동으로 크기를 조절해야 하나요?

• 네. Embed 컴포넌트는 부모 Frame의 크기를 따르므로,원하는 크기로 만들려면 Frame 또는 Auto Layout 설정을 조절해야 합니다.

Q. 영상 썸네일(재생 전 화면)을 Framer에서 변경할 수 있나요?

• 아닙니다. 썸네일은 Loom 플랫폼에서만 변경할 수 있으며 Framer에서는 제어할 수 없습니다.

본 글은 Framer 공식 블로그의 ‘Embedding a Loom video in your site’를 번역·각색한 콘텐츠입니다.