도메인 연결 가이드
직접 구매하신 도메인과 라이브클래스 사이트를 연결하고 싶으신가요? 아래 내용에 따라 각 단계를 진행해주시기 바랍니다.
진행 중 도움이 필요하시다면 언제든 고객성공 코치에게 문의해주세요!
⚠️ 1~3단계까지 모두 완료하셔야 도메인 연결이 완료됩니다.
⚠️ 도메인 연결은 유료 고객에 한하여 제공드리는 서비스입니다. 무료플랜으로 전환하실 경우 도메인 연결이 해제됩니다.
⚠️ 진행을 위해 비즈니스 인증이 필수적으로 필요합니다. 비즈니스 인증 시에는 고객님의 사업자 등록 정보가 필요합니다. 도메인 연결 요청 전에 사업자 등록을 완료하여 주시기 바랍니다.
💡 파비콘 변경은 사이트 내에서 설정이 가능합니다. 파비콘이란 주소창 상단에 페이지 이름과 함께 표시되는 이미지를 의미합니다. 사이트 관리 → 홈페이지 설정에서 이미지를 추가해주세요. 권장 사이즈는 16x16px, 32x32px 입니다.
도메인 연결 절차
1. DNS 설정
DNS(Domain Name System)는 도메인 이름 시스템을 의미하며, 연결할 도메인을 입력했을 때 라이브클래스 사이트로 연결되기 위해 반드시 설정해야 합니다.
DNS는 연결할 도메인을 구매한 업체 별로 설정 방법이 다를 수 있습니다. 정확한 설정 방법은 해당 도메인 업체의 가이드를 참고하여 주시기 바랍니다.
도메인 구입 후 채팅 상담 등으로 도메인 연결 요청
고객성공 팀에서 DNS 설정을 위한 입력 값을 전달
도메인 구매처의 DNS 설정 페이지에 전달 받은 입력 값 입력
고객성공 팀에 입력 사실 전달 후 정상 입력 확인
직접 입력이 어려우신 경우, 원격 제어 또는 계정을 공유 받아 진행해드릴 수 있습니다.
2. 소셜 로그인 연동
소셜 로그인(또는 간편 로그인)이란 기존에 가입한 다른 서비스의 계정으로 라이브클래스 계정을 만들어 로그인할 수 있는 기능입니다.
라이브클래스에서는 구글, 카카오, 페이스북의 소셜 로그인을 제공하며, 연결할 도메인에서도 소셜 로그인 기능을 사용하기 위해서는 아래 연동 작업이 모두 필요합니다.
2-1. 구글 연동
진행 방법
💡 한글 주소를 연결하시는 경우, 주소를 퓨니코드 기준으로 입력해주셔야 합니다. 퓨니코드 주소는 아래 링크에서 확인하실 수 있습니다. 퓨니코드 주소 확인하기(클릭)
Google API 콘솔 로그인 및 동의하기
Google API 콘솔에 접속합니다.
Google 계정으로 로그인합니다.
(동의 하지 않은 경우) 서비스 약관에 동의 후 동의 및 계속하기를 클릭합니다.
새 프로젝트 만들기
프로젝트 만들기를 클릭합니다. 프로젝트 이름 및 조직, 위치는 자유롭게 설정해주셔도 무방합니다.
만들기를 클릭하고 일정 시간을 기다리면 프로젝트가 만들어집니다.
라이브러리 추가하기
왼쪽 메뉴에서 라이브러리를 클릭합니다.
소셜 항목의 Google+ API를 클릭하고 사용을 클릭합니다.
OAuth 동의 화면 구성하기
왼쪽 메뉴에서 사용자 인증 정보를 클릭합니다. (만약 왼쪽에 메뉴가 없는 경우, 왼쪽 상단의 ≡ 아이콘을 클릭 후 [API 및 서비스 > Oauth 동의 화면]을 클릭해 이동한 다음, 아래 b 과정은 건너뛰고 c 과정부터 진행하세요.)
동의 화면 구성 버튼을 클릭합니다.
User Type을 외부로 선택하고, 만들기 버튼을 클릭합니다.
앱 정보 항목에 앱 이름(주로 사이트 이름)을 입력하고, 이용할 사용자 지원 이메일 을 선택합니다.
⚠️ 앱 로고는 추가하지 않는 것을 권장 드립니다. ****앱 로고 추가 시 Google의 승인이 필요하며 4~6주의 심사 기간이 소요될 수 있습니다.
앱 도메인 항목에서 애플리케이션 홈페이지, 애플리케이션 개인정보처리방침 링크 , 애플리케이션 서비스 약관 링크를 작성합니다.
애플리케이션 홈페이지: 연결할 도메인 주소(예: https://mylksite.com)
애플리케이션 개인정보처리방침 링크: https://www.notion.so/futureschole/182031a47abd451b9f044cae6d83b42f
애플리케이션 서비스 약관 링크: https://www.notion.so/futureschole/89cddd1b7dd6462db372b0c0b69a03d9
승인된 도메인 항목에서 + 도메인 추가 버튼을 클릭합니다. 아래 항목을 모두 입력합니다. 도메인 앞에 http 또는 https 는 입력하지 않습니다. 참고: 서브 도메인(예: abc.mylksite.com)으로 접속해도 로그인이 가능하게 하려면 루트 도메인(예: mylksite.com)을 추가해 주세요.
연결할 도메인 주소(예: mylksite.com)
(선택 사항) 추가할 도메인이 더 있다면 + 도메인 추가 버튼을 클릭해 모두 추가합니다.
개발자 연락처 정보 항목에 대표자 또는 담당자의 이메일 주소를 입력합니다. (Google에서 프로젝트 변경사항에 대해 알림을 보내기 위한 용도로 여러 개 추가 가능합니다.)
저장 후 계속 버튼을 클릭합니다.
범위 추가하기
범위 추가 또는 삭제 버튼을 클릭합니다.
기본 Google 계정의 이메일 주소 확인과 개인정보(공개로 설정한 개인정보 포함) 보기, Google에서 내 개인 정보를 나와 연결 3가지 항목을 선택하고, 업데이트 버튼을 클릭합니다.
페이지 하단의 저장 후 계속 버튼을 클릭합니다.
테스트 사용자는 추가하지 않아도 무방합니다.
OAuth 클라이언트 ID 만들기
왼쪽 메뉴에서 사용자 인증 정보를 클릭합니다.
사용자 인증 정보 만들기를 클릭하면 나타나는 메뉴 중 OAuth 클라이언트 ID를 클릭합니다.
애플리케이션 유형을 웹 애플리케이션으로 선택하고, 만들기를 클릭합니다.
‘OAuth 클라이언트 생성됨’이 표시되면 클라이언트 ID를 복사해 담당 코치에게 전달합니다(클릭).
생성한 OAuth 클라이언트 우측의 수정(연필 모양) 버튼을 클릭합니다.
이름에는 사이트 이름을 입력합니다. 승인된 자바스크립트 원본에 아래 항목을 모두 입력합니다.
연결할 도메인 주소(예: https://mylksite.com)
www가 포함된 도메인 주소(예: https://www.mylksite.com)
내 라이브클래스 사이트 주소(예: https://abc.liveklass.com)
승인된 리디렉션 URI에 아래 항목을 모두 입력합니다.
**내 라이브클래스 사이트/authcallback (**예:https://abc.liveklass.com/authcallback)
연결할 도메인 주소/authcallback (예: https://mylksite.com/authcallback)
www.연결할 도메인 주소/authcallback (예: https://www.mylksite.com/authcallback)
https://sso.liveklass.com/authcallback
앱 게시하기
왼쪽 메뉴에서 OAuth 동의 화면을 클릭합니다.
앱 게시 버튼을 클릭합니다.
확인을 클릭합니다.
OAuth 클라이언트 ID 복사하기
왼쪽 메뉴에서 [사용자 인증 정보]를 클릭해 이동합니다.
[OAuth 2.0 클라이언트 ID] 항목에서 [클라이언트 ID]를 복사해 담당 코치에게 전달합니다. (👉채팅 상담(클릭))
2-2. 카카오 연동
진행 방법
⚠️ 진행을 위해 비즈니스 인증이 필수적으로 필요합니다. 비즈니스 인증 시에는 고객님의 사업자 등록 정보가 필요합니다. 도메인 연결 요청 전에 사업자 등록을 완료하여 주시기 바랍니다.
⚠️ 카카오톡 채널의 톡 상담을 연동하는 기능을 이용하기 위해서는 카카오톡 앱 생성 및 연동이 필수적입니다. 카카오 연동을 진행하지 않는 경우, 연결된 도메인에서는 채널 톡 상담 기능을 이용할 수 없습니다.
💡 한글 주소를 연결하시는 경우, 카카오에서는 한글 주소를 그대로 입력하셔도 무방합니다. 구글 및 페이스북은 퓨니코드 주소로 입력해주셔야 합니다.
카카오 개발자 센터 로그인
카카오 디벨로퍼스에 접속합니다.
오른쪽 상단의 로그인 버튼을 클릭해 카카오 계정으로 로그인 합니다.
앱 만들기
상단 메뉴에서 내 애플리케이션을 클릭합니다.
애플리케이션 추가하기를 클릭합니다.
앱 아이콘(비즈니스 인증시 필수)을 추가하고, 앱 이름(예: 내 사이트 이름)과 사업자명 을 작성한 다음, 저장 버튼을 클릭합니다.
앱 설정하기
2단계에서 생성한 애플리케이션을 클릭합니다.
왼쪽 메뉴에서 [일반]을 클릭한 다음, 기본 정보를 확인하고, 테스트 앱 정보 를 입력합니다.
왼쪽 메뉴에서 [비즈니스]를 클릭하고 사업자 정보 등록을 클릭합니다. 사업자 등록 번호를 입력한 후 확인을 클릭합니다.
왼쪽 메뉴에서 [플랫폼]을 클릭하고 Web 플랫폼 등록을 클릭합니다. 아래 내용을 모두 입력하고 저장을 클릭합니다. 서브 도메인(예: https://class.mylksite.com)으로 연결이 필요한 경우 도메인 앞에 을 포함해 입력합니다(예: https://.mylksite.com) 첫 줄에 입력하는 주소가 기본 주소가 되므로, 연결할 주소를 가장 먼저 입력해주세요.
연결할 도메인 주소(예: https://mylksite.com)
www가 포함된 도메인 주소(예: https://www.mylksite.com)
내 라이브클래스 사이트 주소(예: https://abc.liveklass.com)
왼쪽 메뉴에서 [카카오 로그인 > 동의항목]을 클릭합니다.
닉네임/프로필 사진/카카오계정(이메일)의 설정을 클릭합니다. 동의 항목 설정 창이 나오면 필수 동의를 선택하고, 적절한 동의 목적을 작성합니다(’소셜 로그인 연동’ 등으로 작성하셔도 무방합니다. ) 설정을 완료하면 저장 버튼을 클릭합니다. *카카오계정(이메일)의 경우 비즈니스 인증 및 검수가 필요합니다.
왼쪽 메뉴에서 [카카오 로그인]을 클릭하고, 활성화 설정의 상태를 ON으로 변경합니다.
활성화 설정 아래, Redirect URI 등록 버튼을 클릭합니다.
Redirect URI를 작성합니다. 아래 내용을 모두 입력합니다. 작성을 완료했으면 저장 버튼을 클릭합니다.
내 라이브클래스 사이트/authcallback (예:https://abc.liveklass.com/authcallback)
연결할 도메인 주소/authcallback (예: https://mylksite.com/authcallback)
www.연결할 도메인 주소/authcallback (예: https://www.mylksite.com/authcallback)
https://sso.liveklass.com/authcallback
앱 키 복사하기
왼쪽 메뉴에서 **[앱 키]**를 클릭해 이동합니다.
JavaScript 키를 복사해 담당 코치에게 전달합니다(👉채팅 상담(클릭)).
💡 직접 진행이 어려우시다면 2.앱 만들기까지 진행하신 후 팀 관리 메뉴에서 팀원으로, 고객성공 코치의 카카오 계정을 추가하는 방식으로 지원이 가능합니다. 지원이 필요한 경우 채팅 상담(클릭)으로 문의 주시기 바랍니다.
2-3. 페이스북(메타) 연동
진행 방법
💡 최근 페이스북(메타)의 비즈니스 인증이 상당 기간 소요되고 있습니다. 페이스북만 별도로 추후 연결하는 것도 가능하니, 인증 전까지는 제외하고 연결을 진행하셔도 무방합니다.
💡 페이스북(메타) 업데이트에 따라 일부 메뉴가 설정에 따라 다르게 보일 수 있습니다. 설정 경로를 찾기 어려우신 경우, 채팅 상담으로 말씀 남겨주시기 바랍니다.
💡 한글 주소를 연결하시는 경우, 주소를 퓨니코드 기준으로 입력해주셔야 합니다. 퓨니코드 주소는 아래 링크에서 확인하실 수 있습니다. 퓨니코드 주소 확인하기(클릭)
Meta for Developers 접속하기
Meta for Developers에 접속합니다.
로그인 되어 있는 상태가 아니라면, 오른쪽 상단의 로그인을 클릭해 Facebook 개발자 계정으로 로그인합니다. 참고: Facebook 로그인을 설정하기 위해선 Facebook 개발자 계정이 필요합니다. 오른쪽 상단의 시작하기를 클릭해 Facebook 개발자 계정을 생성해 주세요.
앱 만들기
오른쪽 상단의 내 앱을 클릭합니다.
앱 만들기 버튼을 클릭합니다.
사람들이 Facebook 계정으로 로그인하도록 허용을 선택하고, 다음 버튼을 클릭합니다..
앱 이름을 작성하고, 앱 연락처 이메일을 입력합니다.
기존 비즈니스 계정이 있다면, 비즈니스 계정을 선택하고 앱 만들기 버튼을 클릭합니다.
페이스북 계정 비밀번호를 입력 후 제출 버튼을 클릭합니다.
해당 계정에 추가 인증이 설정되어 있다면, 인증 절차를 진행합니다.
Facebook 로그인 설정하기
왼쪽 메뉴에서 [이용 사례]을 클릭합니다.
인증 및 계정 만들기의 맞춤 설정을 클릭합니다.
설정의 설정 페이지로 이동을 클릭합니다.
유효한 OAuth 리디렉션 URI에 아래 내용에 따라 모든 OAuth 리디렉션 URL를 입력하고(예: https://mylksite.com/authcallback), 아래 변경 내용 저장 버튼을 클릭합니다.
내 라이브클래스 사이트/authcallback (예: https://abc.liveklass.com/authcallback)
연결할 도메인 주소/authcallback (예: https://mylksite.com/authcallback)
www.연결할 도메인 주소/authcallback (예: https://www.mylksite.com/authcallback)
https://sso.liveklass.com/authcallback
앱 기본 설정하기
왼쪽 메뉴에서 [앱 설정 > 기본 설정]을 클릭합니다.
앱 기본 설정 정보를 추가합니다.
표시 이름: 방문자가 Facebook 로그인 시 표시될 사이트 이름을 작성합니다.
앱 도메인: 내 사이트의 대표 도메인 등 아래 내용을 모두 입력합니다.
연결할 도메인 주소(예: https://mylksite.com)
www가 포함된 도메인 주소(예: https://www.mylksite.com)
내 라이브클래스 사이트 주소(예: https://abc.liveklass.com)
연락처 이메일: 중요 업데이트, 정책에 관해 알고, 계정 복원 등에 사용할 대표자 또는 담당자의 이메일 주소를 입력합니다.
개인정보처리방침 URL: 아래 주소를 입력합니다. https://futureschole.notion.site/182031a47abd451b9f044cae6d83b42f
서비스 약관 URL: 아래 주소를 입력합니다. https://futureschole.notion.site/89cddd1b7dd6462db372b0c0b69a03d9
사용자 데이터 삭제: 데이터 삭제 안내 URL을 선택하고 아래 주소를 입력합니다. https://futureschole.notion.site/182031a47abd451b9f044cae6d83b42f
(선택 사항) 앱 아이콘: 방문자가 Facebook 로그인 시 표시될 아이콘을 추가합니다. 아이콘은 배경은 투명하게 처리하고, PNG 형식으로 올려야 합니다.
카테고리: 해당되는 카테고리를 선택합니다.
페이지 하단으로 스크롤하여 + 플랫폼 추가 버튼을 클릭합니다.
Website(웹사이트)를 선택하고, 다음 버튼을 클릭합니다.
https 를 포함하여 사이트 URL을 입력합니다(예: https://mylksite.com).
변경 내용 저장 버튼을 클릭합니다.
앱 ID 복사하기
페이지 상단으로 올라가 앱 ID를 복사해 담당 코치에게 전달합니다.(👉채팅 상담(클릭))
비즈니스 인증하기
왼쪽 메뉴에서 인증을 클릭해 이동합니다.
비즈니스 인증 우측 하단의 인증 시작 버튼을 클릭합니다.
설명에 따라 비즈니스 정보를 입력하고 인증을 시작합니다. 인증 완료까지 수일 소요될 수 있습니다.
인증이 완료되면 우측의 데이터 처리 질문으로 이동해, 데이터 처리 질문에 응답합니다.
앱 검수 시작하기
왼쪽 메뉴에서 앱 검수로 이동합니다.
권한 또는 기능 요청을 클릭합니다.
검수를 요청하고 완료 시까지 대기합니다.
앱 모드가 라이브로 전환되었는지 확인합니다.
3. 내부 연결 작업
DNS 설정과 소셜 로그인 연동을 마치셨다면 라이브클래스 기술팀에서 내부 연결 작업이 진행됩니다. 해당 작업까지 완료되어야 도메인이 라이브클래스 사이트와 연동됩니다. 완료까지 영업일 기준 2~5일 정도가 소요될 수 있습니다. 연결 작업이 완료되면 개별적으로 안내를 드립니다.
💁♀️ 궁금한 점은 해결 되셨나요? 해결되지 않거나 다른 궁금한 점이 있다면 언제든지 문의주세요.