고객 가이드
목록으로

카카오 로그인(소셜 로그인) 설정하기

이 도움말에서는 방문자가 카카오 계정을 이용해 내 스토어에 가입하거나 로그인할 수 있도록 카카오 로그인을 설정하는 방법을 안내합니다.

전체 흐름은 ① 카카오 디벨로퍼스에서 애플리케이션 등록 → ② JavaScript 키에 도메인·리다이렉트 URI 등록 및 카카오 로그인 활성화 → ③ 발급받은 JavaScript 키를 luvduck 관리자에 입력 순서입니다.

💡 luvduck 카카오 로그인은 JavaScript 키 하나만 있으면 됩니다. REST API 키나 Client Secret(클라이언트 시크릿)은 사용하지 않습니다. 키를 복사할 때 JavaScript 키를 복사하는지 꼭 확인하세요.

1단계: 카카오 디벨로퍼스 로그인

  1. 카카오 디벨로퍼스에 접속합니다.
  2. 오른쪽 상단의 로그인 버튼을 클릭해 카카오 계정으로 로그인합니다.
ℹ️ 앱과 사이트는 1:1 등록이 원칙입니다. 여러 스토어를 운영하고 있다면 스토어별로 별도의 앱을 생성해 연동하세요.
카카오 디벨로퍼스 메인 화면 — 오른쪽 상단 로그인 버튼으로 카카오 계정 로그인

2단계: 애플리케이션 등록

  1. 상단 메뉴에서 내 애플리케이션으로 이동합니다.
  2. 전체 앱 목록 화면 오른쪽 위의 + 앱 생성 버튼을 클릭합니다.
전체 앱 목록 오른쪽 위의 + 앱 생성 버튼 위치

앱 생성 창이 열리면 아래 정보를 입력하고 저장을 클릭합니다.

  • 앱 이름(필수): 스토어 이름(예: Luvduck)을 입력합니다. 카카오 로그인 시 사용자에게 표시되는 이름입니다.
  • 회사명(필수): 사업자명 또는 대표 이름을 입력합니다.
  • 카테고리(필수): 쇼핑을 선택합니다.
  • 앱 대표 도메인: 내 스토어 주소를 입력합니다. (예: https://myshop.luvduck.dev)
앱 생성 폼 — 앱 이름 Luvduck, 회사명, 카테고리 쇼핑, 앱 대표 도메인 입력 화면

3단계: 동의항목 설정

왼쪽 메뉴에서 제품 설정 > 카카오 로그인 > 동의항목으로 이동합니다. 개인정보 항목에서 로그인에 사용할 정보를 설정합니다.

  1. 닉네임(profile_nickname) 항목의 설정 버튼을 클릭합니다.
  2. 동의 항목 설정 창에서 필수 동의를 선택하고, 동의 목적(예: 회원 식별 및 서비스 제공)을 입력한 뒤 저장합니다.
ℹ️ 카카오계정(이메일) 항목을 추가로 수집하려면 카카오 비즈니스 인증과 검수가 필요합니다. 이메일이 없어도 카카오 로그인은 정상 동작하므로, 우선 닉네임만 필수 동의로 설정해도 됩니다. 출생 연도·생일 항목은 지원하지 않습니다.
카카오 로그인 동의항목 화면 — 닉네임을 필수 동의로 설정한 상태

4단계: JavaScript 키에 도메인·리다이렉트 URI 등록

왼쪽 메뉴에서 앱 > 플랫폼 키로 이동합니다. JavaScript 키 영역에서 ‘대표’ 뱃지가 달린 키 카드를 사용합니다. (새 키가 필요하면 + JavaScript 키 추가로 만들 수 있습니다.)

플랫폼 키 화면의 JavaScript 키 영역 — 대표 Default JAVASCRIPT 키 카드와 JavaScript 키 추가 버튼

JavaScript 키 카드(또는 추가 폼)에서 아래 두 가지를 등록하고 저장합니다.

  1. JavaScript SDK 도메인: 내 스토어 주소를 입력합니다. (예: https://myshop.luvduck.dev)
    • 여기에 등록한 도메인에서만 카카오 로그인이 동작합니다. 스토어 주소와 동일하게 입력하세요.
  2. 카카오 로그인 리다이렉트 URI: luvduck 관리자에서 안내하는 리다이렉트 URI를 그대로 입력합니다. (예: https://myshop.luvduck.dev/auth/callback/kakao)
    • 이 주소는 6단계의 luvduck 관리자 > 소셜 로그인 설정 화면에서 복사할 수 있습니다.
    • 입력란 우측의 + 버튼으로 여러 도메인을 추가할 수 있습니다.
⚠️ myshop.luvduck.dev 는 예시입니다. 반드시 내 스토어의 실제 주소·리다이렉트 URI로 입력하세요. 등록한 도메인과 다른 곳에서는 카카오 로그인이 동작하지 않습니다.
JavaScript 키 추가 폼 — JavaScript SDK 도메인과 카카오 로그인 리다이렉트 URI 입력 화면

5단계: 카카오 로그인 사용 설정 ON

  1. 왼쪽 메뉴에서 제품 설정 > 카카오 로그인 > 일반으로 이동합니다.
  2. 사용 설정의 상태를 ON으로 변경합니다.
ℹ️ 가입한 회원의 개인정보 관리를 위해 카카오가 웹훅(연결 끊기 등) 설정을 권장하지만, 카카오 로그인 사용에 필수는 아닙니다.
카카오 로그인 일반 화면 — 사용 설정 상태를 ON으로 변경

6단계: luvduck 관리자에 카카오 로그인 연결

luvduck 스토어 관리자에서 소셜 로그인 설정 화면을 엽니다.

  1. 카카오 항목의 토글을 켭니다.
  2. 표시된 리다이렉트 URI를 복사해, 카카오 디벨로퍼스의 카카오 로그인 리다이렉트 URI(4단계)에 동일하게 등록되어 있는지 확인합니다.
  3. Client ID에 카카오 JavaScript 키를 입력합니다.
    • JavaScript 키는 카카오 디벨로퍼스의 앱 > 플랫폼 키 화면에서 JavaScript 키 카드의 키 값을 복사한 것입니다.
  4. Client Secret은 비워 둡니다. 카카오 로그인은 Client Secret을 사용하지 않습니다.
  5. Scopes에는 profile_nickname, account_email 을 쉼표로 구분해 입력합니다.
  6. 연결 저장을 누릅니다.
⚠️ Client ID 칸에는 REST API 키가 아니라 JavaScript 키를 넣어야 합니다. REST API 키를 넣으면 로그인 창이 열리지 않습니다.
luvduck 관리자 소셜 로그인 설정 — 카카오 토글 ON, Client ID에 JavaScript 키 입력, Scopes profile_nickname·account_email 입력 화면

설정 완료 — 카카오 로그인 사용 시작

연결을 저장하면 내 스토어의 로그인·회원가입 화면에 카카오 로그인 버튼이 노출됩니다. 이제 방문자가 카카오 계정으로 가입하고 로그인할 수 있습니다.

🎉 이것으로 카카오 소셜 로그인 설정이 모두 완료되었습니다. 로그인 화면에서 카카오 버튼이 정상 동작하는지 직접 한 번 확인해 보세요.