방문자들에게 당신의 전문 지식을 제공하기 위해 일련의 가이드 강의를 만드세요.

방문자들에게 새로운 기술을 가르치거나, 프로젝트를 안내하거나, 또는 전문 지식을 공유하기 위해 코스 페이지를 구축하세요. 코스에 대한 액세스를 판매하려면 이를 요금제에 추가하세요.

이 가이드는 코스 페이지의 기본, 사이트에 코스를 추가하는 방법, 그리고 코스 페이지를 사용자 지정하는 방법을 다룹니다.

코스 페이지는 버전 7.1에서만 사용할 수 있습니다.

팁: Squarespace에서 온라인 코스 만들고 판매하기 웨비나에 등록하세요. 커리큘럼 준비, 온라인 코스 구축, 요금제를 통한 코스 수익화 방법에 대한 안내를 제공합니다.

코스 페이지 구조

코스 페이지는 코스 개요 페이지와 개별 강의 페이지의 두 부분으로 구성됩니다. 여기에 챕터와 진행 상황 표시줄 같은 요소들이 추가됩니다.

팁: 페이지 섹션을 추가하여 코스 개요 페이지와 강의 페이지 모두에 이미지, 텍스트, 양식 등을 포함할 수 있습니다.

코스 개요 페이지

코스 개요 페이지는 코스의 홈페이지입니다. 코스 설명, 코스 시작 버튼, 진행 상황 표시줄, 코스의 챕터 및 강의를 표시합니다. 코스 개요 페이지에 섹션을 추가하여 포함된 콘텐츠를 개략적으로 보여줄 수 있습니다. 

코스 개요 페이지가 페이지 패널의 메인 탐색 영역에 있다면 모든 방문자가 볼 수 있습니다.

강의 페이지

강의 페이지에는 강의 내용과 완료 후 계속 버튼이 표시됩니다. 완료 후 계속을 클릭하면 방문자가 다음 강의로 이동하며, 코스 개요 페이지의 진행 상황 표시줄이 업데이트됩니다. 방문자는 코스 개요 페이지에서 원하는 순서대로 강의를 완료할 수 있지만, 완료 후 계속 버튼은 방문자가 설정된 순서대로 강의를 진행하도록 도와줍니다.

코스에 가입하고 계정에 로그인한 방문자만 강의 페이지를 볼 수 있습니다.

챕터

챕터에는 강의 페이지가 있으며 챕터의 제목은 코스 개요 페이지에 표시됩니다. 챕터는 코스 페이지에 선택 사항으로 추가할 수 있습니다.

코스 탐색

코스 탐색 메뉴에는 강의, 챕터, 진행 상황, 코스의 비디오 재생 시간이 표시됩니다. 방문자는 코스에 가입한 후 코스 시작 버튼을 클릭해야 메뉴를 볼 수 있고, 코스 탐색 아이콘을 클릭해 메뉴를 펼칠 수 있습니다.

진행 표시줄

진행 상황 표시줄은 방문자가 코스를 얼마나 완료했는지 추적합니다. 방문자가 강의를 완료할 때마다 진행 상황 표시줄은 해당 완료 비율을 반영합니다.

사이트를 편집하는 동안 진행 상황 표시줄은 0%로 표시됩니다. 진행 상황 표시줄을 테스트하려면 페이지 미리 보기를 열고, 코스를 진행하면서 진행 상황 표시줄이 업데이트되는 것을 확인하세요.

코스 페이지 추가

코스 페이지를 추가하려면 다음 단계를 따르세요.

1. 페이지 패널을 엽니다. 
2. 코스 페이지가 나타나길 원하는 탐색 섹션 옆의 +를 클릭합니다.
3. 판매에서 콘텐츠 & 멤버십을 클릭한 후, 창 상단에서 코스를 클릭합니다.
4. 원하는 레이아웃을 선택하세요.
5. 페이지 제목을 입력한 후 Enter 키를 누르세요.

코스 페이지를 추가하면 코스 개요 페이지가 화면 오른쪽에 표시됩니다.

팁: 코스 페이지를 복제하고 그 안에 포함된 모든 강의를 복제할 수 있습니다. 방문자가 변경 사항을 눈치채지 못하게 새 코스 콘텐츠를 생성하거나 현재 제공하는 코스 콘텐츠를 실험해 볼 수 있는 좋은 방법입니다.

코스 페이지 설정

코스 페이지 설정을 편집하여 페이지를 개인화하세요.

1. 코스 페이지 패널에서 를 클릭하세요.
2. 코스 페이지의 특정 설정을 포함하여 페이지 설정을 변경하세요.
   • 코스 이름 - 브라우저 탭에 표시되는 제목입니다.
   • 코스 요약 - 다른 곳에 페이지가 링크될 때 표시되는 설명입니다.
3. 저장을 클릭합니다.

강의 추가하기

강의는 코스의 콘텐츠입니다. 여기에는 비디오와 이미지 및 텍스트가 포함된 페이지 섹션이 포함됩니다. 코스 페이지당 최대 250개의 강의를 추가할 수 있습니다.

코스 페이지에 강의를 추가하려면 다음 단계를 따르세요.

1. 페이지 패널을 엽니다. 
2. 강의를 만들고 싶은 코스 페이지를 클릭합니다.
3. 코스 페이지 패널에서 코스 콘텐츠를 클릭한 다음 +를 클릭합니다. 
4. 드롭다운 메뉴에서 강의를 선택합니다.
5. 일반 탭에서 강의 제목을 입력합니다. 제목은 200자 이하이어야 합니다.  또한 다음과 같은 선택적 기능을 추가 및 편집할 수도 있습니다.
   • 요약 - 강의에 대한 짧은 설명입니다. 이 설명은 코스 개요 페이지와 요약 블록에 표시됩니다. 설명은 500자 이하로 유지하는 것을 권장합니다.
   • 사용자 지정 URL - 강의 제목과 일치하는 URL이 자동으로 할당됩니다. 이 URL은 수정할 수 있습니다.
   • 섬네일 - 강의를 나타내는 이미지를 추가하세요. 이 이미지는 코스 개요 페이지, 코스 탐색 메뉴, 요약 블록에 표시됩니다. 코스 탐색 메뉴에서는 섬네일 이미지 위에 재생 기호가 나타납니다.
6. 비디오 탭에서는 강의에 비디오를 추가할 수 있습니다. 강의에 비디오가 포함되어 있지 않거나 강의 상단을 페이지 섹션으로 하고 싶다면 강의 비디오 표시 토글 버튼을 끄세요.
7. 강의에 비디오가 포함되어 있다면 비디오 추가를 클릭하고 다음 단계를 따르세요.
   • 비디오 파일을 사이트에 직접 업로드하려면 파일 업로드를 클릭합니다.
   • 이미 업로드한 비디오를 다시 사용하려면 라이브러리에서 선택을 클릭합니다.
   • 외부에 호스팅된 비디오를 삽입하려면 링크에서 추가를 클릭하고 Vimeo 또는 YouTube 비디오 링크를 붙여넣으세요.
8. 상태 탭에서 강의를 게시하거나 예약해 게시할 수 있습니다. 또한, 강의를 초안 상태로 두고 계속 작업할 수도 있습니다.
9. 저장을 클릭합니다.
10. 왼쪽 상단에서 편집을 클릭한 후, 강의 콘텐츠를 포함하는 페이지 섹션 추가를 하세요.

팁: 매력적인 섬네일 이미지를 만들기 위해 이미지 모범 사례를 확인하세요.

강의 페이지 비디오

강의 페이지 비디오는 페이지 상단에 배너처럼 표시됩니다. 각 강의 페이지에는 강의 페이지 비디오를 하나 추가할 수 있습니다. 비디오를 더 추가하려면 페이지의 블록 영역에 비디오 블록을 추가하세요.

강의 페이지를 생성할 때 비디오를 추가하지 않은 경우 다음 단계에 따라 기존 강의 페이지에 강의 페이지 비디오를 추가합니다.

1. 페이지 패널을 열고 코스 페이지를 클릭하세요. 
2. 코스 콘텐츠를 클릭합니다.
3. 비디오를 추가하려는 강의 위로 커서를 올린 후, ...을 클릭하고 강의 편집을 클릭하세요.
4. 비디오를 클릭한 다음 비디오 추가를 클릭하여 비디오를 업로드하거나, 이전에 업로드한 비디오를 라이브러리에 추가하거나, YouTube 또는 Vimeo의 URL로 비디오를 임베드하세요.
5. 저장을 클릭합니다.

팁: 모든 오디언스가 코스 콘텐츠에 참여할 수 있도록 비디오 접근성 팁을 확인하세요.

맞춤형 대표 이미지

비디오를 업로드하면 비디오가 재생되기 전에 표시되는 맞춤형 대표 이미지를 추가할 수 있습니다. 

맞춤형 대표 이미지를 추가하려면 다음 단계를 따르세요.

1. 비디오 업로드 후 맞춤형 대표 이미지 토글 버튼을 켭니다.
2. 이미지 추가를 클릭하세요.

이 옵션은 Squarespace에 업로드된 비디오에서만 사용할 수 있습니다. 임베드된 YouTube 또는 Vimeo 비디오는 타사 서비스에서 제공하는 대표 이미지를 가져옵니다.

강의 페이지 비디오 저장공간 제한

강의 페이지의 비디오 탭에 추가된 비디오는 스토리지가 허용하는 한 최대 3시간까지 가능합니다. 비디오 요구 사항에 대해 더 알아보려면 사이트에 비디오 추가하기를 참조하세요.

모든 Squarespace 사이트에는 전체 페이지와 업로드된 비디오를 합산하여 30분의 비디오 저장공간이 제공됩니다. 더 많은 비디오 저장공간이 필요하다면 디지털 제품 요금제 구매를 고려하세요.

챕터 추가하기(선택 사항)

챕터는 강의를 그룹화하여 코스 콘텐츠를 체계적으로 구성하는 데 도움이 됩니다. 시각적으로 챕터는 유사하거나 순차적인 강의들을 연결합니다. 한 챕터에 최대 250개의 강의를 추가할 수 있습니다.

코스 페이지에 챕터를 추가하려면 다음 단계를 따르세요.

1. 코스 페이지 패널에서 코스 콘텐츠를 클릭한 다음 +를 클릭합니다. 
2. 드롭다운 메뉴에서 챕터를 선택하세요.
3. 새로운 챕터가 코스 페이지 패널에 추가됩니다. 새 챕터 위에 커서를 올리고 …를 클릭한 후 챕터 제목을 입력하세요. 챕터 제목은 200자 이하여야 합니다.
4. 저장을 클릭합니다.
5. 강의를 드래그하여 챕터에 넣으세요.

강의 및 챕터 구성

강의와 챕터는 코스 페이지 패널에 나열된 순서에 따라 코스 개요 페이지에 표시됩니다. 강의를 클릭하고 드래그하여 챕터 안팎으로 옮기거나 다른 순서로 재정렬할 수 있습니다. 또한 챕터를 클릭하고 드래그하여 순서를 변경할 수도 있습니다. 

코스 페이지 스타일 지정

코스 페이지의 색상과 글꼴은 사이트 전역 글꼴 및 색상 조정값을 따릅니다. 코스 개요 페이지 또는 강의 페이지의 스타일에 액세스하려면 다음 단계를 따르세요.

1. 코스 개요 페이지 또는 강의에서 편집을 클릭합니다. 
2. 레이아웃 편집을 클릭하여 코스 개요 또는 강의 페이지 스타일 설정을 엽니다.

코스 개요 스타일 지정

레이아웃 편집을 클릭하여 코스 개요 스타일 설정을 엽니다.

1. 요소 탭에서 토글을 사용하여 코스 개요 페이지에 표시할 요소를 선택하거나 숨깁니다. 옵션에는 코스 제목, 코스 설명, 코스 버튼, 강의 섬네일, 강의 요약이 포함됩니다.
2. 디자인 탭에서는 코스 개요의 간격, 정렬, 버튼 스타일, 레이아웃 등을 지정할 수 있습니다.
3. 디자인의 레이아웃에서 목록 또는 그리드를 선택하세요. 목록 레이아웃에서는 강의가 세로 목록으로 한 열에 표시됩니다. 그리드 레이아웃에서는 강의가 행으로 표시되어 그리드가 만들어집니다.
4. 색상 탭에서 코스 개요의 색상 테마를 선택하세요.

목록과 그리드 레이아웃은 스타일 옵션이 다르다는 점에 유의하세요. 예를 들어, 목록 레이아웃에서는 강의 섬네일의 종횡비를 변경할 수 있지만, 그리드 레이아웃에서는 변경할 수 없습니다.

강의 페이지 스타일 지정

레이아웃 편집을 클릭하여 강의 페이지 스타일 설정을 엽니다.

1. 요소 탭에서 토글을 사용하여 코스 제목, 코스 설명, 코스 버튼, 강의 섬네일, 강의 요약을 표시하세요.
2. 디자인 탭에서는 코스 머리말, 페이지 요소 간격, 정렬, 버튼 스타일, 강의 페이지 섬네일 표시, 섹션 스타일, 코스 개요 설정을 지정할 수 있습니다. 또한 강의 페이지 섹션 사이에 구분선을 활성화하고 스타일을 지정할 수도 있습니다.
3. 색상 탭에서 강의 페이지의 색상 테마를 선택하세요.

추가 강의 페이지 스타일 옵션

코스가 진행 중일 때 더 많은 스타일 설정을 찾을 수 있습니다. 이 설정에 액세스하려면 다음 단계를 따르세요.

1. 원하는 강의 페이지에서 코스 시작 또는 코스 계속을 클릭하세요.
2. 편집을 클릭한 다음 레이아웃 편집을 클릭합니다.
3. 디자인 탭에서 데스크톱 버튼 설정, 모바일 버튼 설정, 코스 탐색, 강의 요소, 구분선을 스타일링하세요.

여기서 변경한 스타일은 코스 페이지의 모든 강의 페이지에 적용됩니다. 이는 강의 페이지 간의 스타일과 디자인 일관성을 보장하기 위함입니다.

코스 페이지 액세스 판매

요금제를 사용하여 코스 액세스를 판매할 수 있습니다. 무료 요금제를 제공하고 방문자에게 이메일 주소 입력을 요구할 수도 있습니다.

코스 페이지를 요금제에 추가하면 코스 페이지 전체를 페이월 뒤에 숨기거나, 강의 페이지만 숨길 수 있습니다. 강의 페이지만 숨긴 경우, 코스 개요 페이지는 사이트 방문자 모두가 액세스할 수 있습니다.

강의 페이지가 페이월 뒤에 있을 때, 요금제에 가입하지 않은 방문자에게 특정 강의를 공개할 수도 있습니다. 이렇게 하려면 사이드 패널에서 강의 위로 커서를 올린 후, …를 클릭하고 공개 미리 보기로 설정을 클릭하세요. 단, 코스 개요 페이지 전체를 페이월 뒤에 숨긴 경우, 공개 미리 보기로 설정된 강의에도 방문자가 액세스할 수 없습니다.

팁: 코스 개요 페이지에 요금제 블록을 추가해 방문자가 요금제에 가입하도록 유도하세요.