올해 초 포스트에 스퀘어스페이스 웹사이트에서 동영상을 배경 동영상 또는 삽입 클립으로 더욱 쉽게 사용하는 방법을 알려드렸습니다.

오늘 포스트에서 동영상 녹화기 및 업로드 위젯을 사이트에 직접 삽입하여 사용자 및 웹사이트 방문자로부터 동영상을 수집하는 최고의 방법을 알려드리겠습니다.

Clipchamp HTML5 카메라 API를 사용하여 이 작업을 수행합니다 – 모든 웹사이트에서 사용할 수 있는 동영상 캡처 도구입니다. 예를 들어, 온라인 상점을 운영하는 경우 고객의 사용후기를 동영상으로 수집, 대회에서 동영상 지원을 허용하거나 블로그에서 독자의 의견을 동영상으로 받을 수 있습니다.

설명에 따라서 전문 지식 없이도 스퀘어스페이스 사이트에 간단하게 설치할 수 있습니다.

스퀘어스페이스 동영상 녹화기 생성 및 추가

방문자가 사이트에서 웹캠으로 직접 동영상을 녹화하거나, 이미 기기에 가지고 있는 동영상을 선택 & 업로드하는 방법, 또는 두 가지 옵션을 모두 제공하여 선호하는 방식을 선택할 수 있도록 결정할 수 있습니다.

저희가 구축한 고유한 기술로 인하여, 모든 동영상 파일은 인프라를 거치지 않고 사용자 디바이스에서 선택한 클라우드 저장소로 바로 제출됩니다. 이는 양쪽 모두의 개인정보를 보호할 수 있습니다.

 

squarespace-video-recorder

 

업로드 대상으로는 유튜브, 드롭박스, 구글 드라이브, 아마존 S3 또는 마이크로소프트 애저 계정으로 동영상을 전송할 수 있습니다.

업로드 후에 웹사이트에서 클립을 표시하려면, 스퀘어스페이스 관리 화면을 통해 삽입할 수 있도록 유튜브로 보내는 것이 가장 좋습니다.

스퀘어스페이스 동영상 녹화기를 설치하는 단계는 다음과 같습니다:

 

1) 웹사이트의 관리 인터페이스에 로그인

나중에 샘플 새 페이지를 만들고 이 페이지의 HTML에 일부 코드를 복사하는데 필요합니다.

 

Squarespace login

 

2) 두 번째 브라우저 탭에서 Clipchamp 동영상 API 무료평가판을 등록

추후에 필요한 고유 API 키를 받고, 수신할 동영상의 업로드 대상을 사용하려면 API 평가판 계정을 등록해야 합니다. 가입 시 신용카드 정보가 필요없으며 언제든지 평가판을 취소할 수 있습니다.

 

register-clipchamp-trial

 

3) 사용자 동영상을 전송할 업로드 대상으로 유튜브 설정하기

평가판 계정을 만든 후, https://util.clipchamp.com/ko/api-setup/integrations의 API 설정에서, 유튜브 를 클릭하고 Clipchamp API를 유튜브 계정에 연결하여, 사용자가 제출하는 동영상을 채널이나 지정한 재생목록에 업로드 받을 수 있습니다.

 

set-youtube-uploads

 

4) 다음으로 https://util.clipchamp.com/ko/api-setup/install로 이동

이 페이지에 2개의 코드 스니펫이 있습니다 – 사이트에 웹캠 녹화기 및 업로더를 삽입하려면 스퀘어스페이스에 두 가지 스니펫을 복사해야 합니다 (아래 5, 6 단계). 페이지에 설명하는 방법은 스퀘어스페이스 웹사이트가 아닌 다른 웹사이트에 적용되는 사항이므로 무시해도 됩니다.

 

clipchamp-api-code

 

5) 스퀘어스페이스에 새 페이지를 만들고 “페이지 머리글 코드 삽입”을 열기

페이지 머리글 코드 삽입에 다음과 같이 Clipchamp 페이지 (API 키가 포함된 페이지)의 첫 번째 섹션의 코드 스니펫을 붙여넣습니다:

 

webcam-video-squarespace

 

6) 페이지의 “페이지 콘텐츠”에 있는 코드 블록에 두 번째 코드 스니펫을 넣기:

 

페이지 콘텐츠 편집하기를 누르고,

squarespace-video-camera

 

동영상 버튼을 표시할 페이지에 새 코드 블록을 추가합니다.

 

add-code-block

 

squarespace-html5-video

 

코드 블록에 https://util.clipchamp.com/ko/api-setup/install에서 복사한 두 번째  (더 큰) 코드 스니펫을 삽입합니다.

 

squarespace-html5-camera

 

코드 블록에서 다음 설정을 선택하십시오: 오른쪽에 있는 드롭다운에서 “HTML”을 선택하고 왼쪽에 있는 “소스 표시”를 선택 해제합니다. 코드 스니펫을 추가하면 “적용”을 누르십시오.

 

7) 다음으로, 저장 후 Clipchamp 코드를 삽입한 페이지 미리보기

스니펫이 올바르게 추가되고 저장된 경우, 미리보기 페이지에 새 스퀘어스페이스 동영상 녹화기 버튼이 표시됩니다. 샘플 페이지에 버튼은 다음과 같이 보입니다:

 

squarespace video recorder - page preview

 

Squarespace video recording button

 

8) 마지막 단계로, Clipchamp 설정에서 웹사이트 도메인 인증하기

버튼을 작동시키려면, Clipshamp API 설정에서 버튼의 도메인을 다음과 같이 허용 목록에 추가해야합니다:

웹사이트 URL을 복사하고 https://util.clipchamp.com/ko/api-setup/domains의 Clipchamp API 설정에서 허용된 도메인 목록에 추가합니다.

예를 들어, 허용한 도메인은 clipchamp-test.squarespace.com 및 www.clipchamp-test.squarespace.com입니다. 도메인과 선택사항으로 www.하위 도메인을 삽입하십시오.

 

authorize domain in the Clipchamp API settings

 

URL을 목록에 추가한 후, 스퀘어스페이스 미리보기 페이지를 다시 로드합니다. 이제 페이지의 동영상 녹화기 및 업로더 버튼을 사용하여 방문자가 녹화 및 기타 동영상을 전송할 수 있습니다.

 

squarespace-video-recorder

 

사이트에 전송된 동영상 표시

사람들이 전송한 동영상 및 유튜브 채널에 있는 동영상을 웹사이트에서 보여주려는 경우, 유튜브 동영상을 삽입하는 방법을 스퀘어스페이스 도움말에서 다음 설명 방법을 참조하십시오.

 

Squarespace KB about embedding videos

 

마무리

스퀘어스페이스를 사용하는 경우, 동영상을 수집하려면 앞에서 설명한 모든 단계를 거쳐야합니다. 또한 Clipchamp 동영상 API 계정에 이미 등록한 사용자를 위하여 간략하게 이 주제에 대해 도움말을 요약했습니다.

기술 자료 문서에는 동영상 버튼이 사이트에 올바르게 표시되는데 문제가 발생할 경우를 대비해서 여러가지 문제 해결 방안이 포함되어 있습니다. 또한 모든 사이트 페이지에 동영상 녹화기를 자동으로 내장하는 옵션을 설명하고 원하는 대로 녹화기를 사용자 정의할 수 있는 샘플 코드가 포함되어 있습니다.

카메라 위젯에는 다양한 사용자 정의 옵션이 있습니다. 예를 들어, 브랜딩을 직접 변경할 수 있고, 색상 및 기타 스타일 요소는 물론 입출력 동영상과 관련된 여러 가지 설정을 조정할 수 있습니다.

이 기사에서 전문적인 옵션을 다루지 않았지만, 스퀘어스페이스 동영상 녹화기에 추가할 매개 변수를 API 설명서에서 자세히 살펴볼 수 있습니다. 6 단계에서 코드 블록에 삽입한 코드 스니펫에 옵션을 추가하기만 하면 됩니다.

이 포스트는 스퀘어스페이스에 동영상을 받는 방법에 대한 내용지만, 설명된 방법은 다른 웹사이트 빌더 플랫폼 및 CMS에서 녹화기를 사용하는데 이용할 수 있습니다. – 예를 들어 Wix 사용 방법에 대해서도 작성했습니다. 가장 필요한 부분은 사이트의 관리 설정의 페이지에 맞춤 코드를 추가할 수 있도록 허용해야 합니다.