카카오 로그인 버튼 요소: 이동 URL·태그·리스트

방문자가 회원가입 양식을 채우지 않고 카카오 계정으로 바로 시작할 수 있게 하고 싶으신가요? 에디터의 카카오 로그인 요소는 노란 버튼 하나로 방문자를 카카오 로그인으로 보내고, 돌아온 방문자를 연락처로 남기면서 지정한 태그와 리스트까지 붙여 줍니다. 이 글에서는 요소를 넣고 로그인 후 이동할 주소, 추가할 태그·연락처 리스트를 정하는 방법과 함께 카카오 앱 연결 위치를 안내합니다.

1. 카카오 로그인 요소는 어디에 있나요

캔버스에서 버튼을 넣을 섹션을 선택하고 왼쪽 레일의 요소 추가를 엽니다. 인터랙티브 묶음에 카카오 로그인이 있으며, 누르면 선택한 자리에 버튼이 들어갑니다.

넣어지는 것은 노란 카카오 로그인 버튼과 그 아래의 안내 문구입니다. 버튼 전체가 로그인으로 연결되는 영역이라 별도로 링크를 넣지 않습니다.

2. 설정 창 열기

버튼을 누르면 오른쪽 위에 ⋮ 단추가 나타납니다. 누르면 막대가 펼쳐지고 왼쪽으로 이동, 요소 설정 열기, 레이아웃 / 간격, 요소 복제, 요소 삭제 아이콘이 보입니다. 이 가운데 톱니바퀴 모양의 요소 설정 열기를 누르면 카카오 로그인 설정 창이 열립니다.

3. 로그인 후 이동 URL

설정 창의 첫 항목입니다. 방문자가 로그인을 마친 뒤 보낼 주소를 적습니다. 내 사이트의 주소나 /thanks처럼 슬래시로 시작하는 경로를 쓰고, 비워 두면 회원 마이페이지로 이동합니다. 내 사이트가 아닌 다른 주소는 쓰이지 않고 비워 둔 것과 같게 처리됩니다.

입력칸 아래의 {email}, {first_name}, {phone}, {kakao_id}, {contact_id} 단추를 누르면 주소 끝에 그 글자가 붙습니다. 방문자가 돌아올 때 각각 이메일, 이름, 전화번호, 카카오 번호, 연락처 번호로 바뀌므로 감사 페이지에서 이름을 불러 줄 때 편리합니다. 받아 온 정보가 없는 항목은 빈 값이 됩니다.

4. 추가할 태그와 연락처 리스트

추가할 태그와 추가할 연락처 리스트에는 내 계정에 있는 태그와 리스트가 목록으로 나옵니다. Ctrl(Mac은 Cmd)을 누른 채 클릭하면 여러 개를 고를 수 있고, 고른 항목은 아래에 보라색 칩으로 표시되며 칩 옆의 x 표시로 뺄 수 있습니다. 아직 만든 태그나 리스트가 없으면 등록된 것이 없다는 안내가 나옵니다.

방문자가 로그인하면 카카오가 알려 준 이메일로 기존 연락처를 찾고, 없으면 새 연락처를 만듭니다. 그 연락처에 여기서 고른 태그와 리스트가 붙습니다. 내 사이트의 회원 로그인도 함께 처리되고, 마지막에 이동 URL로 넘어갑니다.

5. 카카오 앱 연결

버튼이 동작하려면 사이트 주인의 카카오 앱이 연결되어 있어야 합니다. 연결하지 않은 사이트에서 방문자가 누르면 아직 카카오 로그인이 연결되지 않았다는 안내가 나옵니다. 설정 창을 끝까지 내리면 Kakao 개발자 콘솔 설정 상자가 있고, 연결은 설정 > 회원 로그인(카카오)에서 한다고 안내합니다. 카카오 개발자 콘솔에 등록할 Redirect URI도 이 사이트 기준으로 보여 줍니다.

회원 로그인(카카오) 화면의 연결 방법에는 카카오 개발자 콘솔에서 앱을 만들고 로그인을 켜고, Redirect URI를 등록하고, REST API 키와 Client Secret을 입력하는 순서가 정리되어 있습니다. 에디터 요소용 콜백 주소는 "에디터의 카카오 로그인 요소" 항목에 따로 적혀 있습니다.

6. 저장하고 확인하기

설정 창의 값은 고치는 즉시 요소에 반영됩니다. 상단의 저장을 누른 뒤 편집 화면을 다시 열어 요소의 설정 창을 열면 이동 URL, 태그, 리스트가 그대로 남아 있습니다.

7. 이렇게 활용해 보세요

• 이벤트 신청 페이지에 버튼을 두고 신규 태그와 상담 신청 리스트를 붙여 두면, 카카오로 들어온 방문자를 따로 모아 볼 수 있습니다.
• 이동 URL을 감사 페이지로 하고 {first_name}을 붙여 두면 이름을 넣은 안내를 만들 수 있습니다.
• 뉴스레터 리스트를 붙여 두면 가입 직후부터 연락처에서 뉴스레터 대상으로 구분됩니다.

8. 알아 두실 점

• 고른 태그와 리스트는 내 계정의 것만 적용됩니다.
• 이동 URL에 이메일이나 전화번호 변수를 넣으면 그 값이 주소에 실려 이동하므로, 꼭 필요한 값만 쓰시기 바랍니다.
• 카카오 로그인 요소는 설정 창에서만 편집하며, 이 요소에는 링크 넣기 아이콘이 없습니다.
• 회원 로그인과 회원가입 화면 자체를 꾸미는 방법은 별도 글에서 다룹니다.
• 이 글의 화면은 모두 데스크탑 편집 화면 기준입니다.