카카오 로그인 신청이 완료되면 방문자가 실제로 로그인할 수 있는 페이지를 만들어야 합니다. 테라플로우에서 로그인 버튼 숏코드를 생성하고, 엘리멘토로 로그인 페이지를 제작한 뒤 숏코드를 삽입합니다. 세팅 완료 시, 방문자가 로그인 페이지에서 카카오 로그인 버튼을 클릭하면 카카오 인증 후 사이트 회원으로 로그인되는 상태가 됩니다.
1. 준비물
☐ 카카오 로그인 신청 완료 (REST API 키 입력 및 동의항목 저장까지)
2. 전체 진행 흐름 요약
Step 1. 로그인 버튼 생성 (테라플로우 → 카카오 로그인 → 버튼 관리)
Step 2. 로그인 페이지 슬러그 변경 (login으로 설정)
3. 로그인 버튼 생성
Step 1. 로그인 버튼 생성
테라플로우 버튼 관리에서 로그인 전용 버튼을 생성합니다. 생성된 버튼의 숏코드를 로그인 페이지에 삽입하면 방문자에게 카카오 로그인 버튼이 표시됩니다.
📂 경로: 대시보드 → 테라플로우 → 카카오 로그인 → 버튼 관리 → + 새 버튼 추가
1. 오른쪽 상단 + 새 버튼 추가 클릭
2. 기본 설정 탭에서 아래 표를 참고해 항목 입력
| 항목 | 입력값 |
|---|---|
| 버튼 이름 | 로그인 버튼 (관리자 구별용, 사이트에 노출되지 않음) |
| 버튼 텍스트 | 3초만에 로그인하기 (원하는 문구로 변경 가능) |
| 리디렉션 URL | 로그인 후 이동할 페이지 주소 입력 (예: https://내사이트도메인/my-account/) |
| 버튼 정렬 | 중앙 (권장) |
| 카카오 아이콘 표시 | 체크 (권장) |
| 로그인 후에도 버튼 표시 | 체크 (로그인 후 내 계정 페이지로 이동하는 버튼으로 활용) |
3. 다음: 디자인 → 클릭
4. 디자인 설정에서 색상·크기·여백 조정 후 다음: 로그인 후 → 클릭
5. 로그인 후 버튼 텍스트 및 디자인 설정 후 버튼 추가 클릭
6. 버튼 관리 목록에서 생성된 버튼의 숏코드 버튼 클릭 후 숏코드 복사
4. 로그인 페이지 슬러그 변경 및 숏코드 삽입
Step 2. 로그인 페이지 슬러그 변경
제공받은 로그인 페이지의 주소(링크 주소, 슬러그)가 한글로 되어 있다면 영어 login 으로 변경합니다.
📂 경로: 대시보드 → 페이지 → 로그인 페이지 → 편집
1. 좌측 메뉴에서 페이지를 클릭하여 로그인 페이지를 찾습니다.
2. 해당 페이지 빠른 편집 클릭
3. 슬러그를 login으로 입력
4. 업데이트 클릭
⚠️ 슬러그 변경 후 로그인 페이지 주소가 https://내사이트도메인/login으로 바뀝니다.
Step 3. 로그인 페이지에 숏코드 삽입
Step 1에서 복사한 숏코드를 엘리멘토 단축코드(shortcode) 위젯에 붙여넣으면 해당 위치에 카카오 로그인 버튼이 표시됩니다.
1. 로그인 페이지 엘리멘토로 편집 클릭
2. 엘리멘토 위젯 검색창에서 단축코드(shortcode) 검색
3. 버튼을 표시할 위치에 단축코드(shortcode) 위젯 드래그
4. 단축코드(shortcode) 위젯 입력란에 복사한 숏코드 붙여넣기
5. 업데이트 클릭
6. 페이지 미리보기에서 카카오 로그인 버튼 노출 확인
Step 4. LiteSpeed Cache 캐시 제거
숏코드 삽입 후 LiteSpeed Cache가 이전 페이지를 그대로 유지하면 버튼이 화면에 표시되지 않을 수 있습니다. 페이지 업데이트 후 반드시 캐시를 제거합니다.
1. 워드프레스 관리자 상단 바에서 LiteSpeed Cache 아이콘 클릭
2. 모든 캐시 제거(Purge All) 클릭
5. 카카오 로그인 테스트
Step 5. 카카오 로그인 테스트
모든 세팅이 완료되었으니, 실제로 카카오 로그인이 정상 동작하는지 확인합니다. 관리자 계정으로 로그인된 상태에서는 카카오 로그인 버튼이 보이지 않을 수 있으므로, 시크릿(비공개) 브라우저 창에서 테스트합니다.
1. 브라우저 우측 상단 점 3개 메뉴 클릭 → 새 시크릿 창을 엽니다.
2. 시크릿 창에서 로그인 페이지 주소 접속
3. 카카오 로그인 버튼 노출 확인 후 클릭
4. 카카오 계정 로그인 → 동의항목 확인 → 동의하고 계속하기 클릭
5. 대시보드 → 사용자 목록에 카카오 로그인 회원이 추가되었는지 확인
⚠️ 이전에 테스트용으로 카카오 로그인을 한 적이 있으면, 대시보드 사용자 목록에서 해당 테스트 계정을 삭제하고, 카카오 계정 설정에서 앱 연결도 해제한 뒤 다시 테스트하세요.
💡 TIP: 시크릿 브라우저(크롬: Ctrl+Shift+N, 사파리: ⌘+Shift+N)를 사용하면 로그인되지 않은 상태에서 실제 고객과 동일한 환경으로 카카오 로그인을 테스트할 수 있습니다.
6. 완료 체크
☐ 테라플로우 → 카카오 로그인 → 버튼 관리에 로그인 버튼이 생성되어 있음
☐ 로그인 페이지 슬러그가 login으로 변경되어 있음
☐ 로그인 페이지에 카카오 로그인 버튼이 정상 노출됨
☐ LiteSpeed Cache 캐시 제거 완료
☐ 시크릿 브라우저에서 카카오 로그인 버튼 클릭 시 정상 로그인됨
☐ 로그인 후 내 계정 페이지(/my-account/)로 이동됨
☐ 대시보드 → 사용자 목록에 카카오 로그인 회원이 추가됨
7. 자주 막히는 문제
01. 로그인 페이지에서 카카오 버튼이 보이지 않는다
원인: 관리자 계정으로 이미 로그인된 상태에서 확인하거나, 숏코드가 정확히 입력되지 않은 경우입니다.
해결 방법:
1. 시크릿 브라우저에서 로그인 페이지에 접속하여 버튼 노출 여부 재확인
2. 엘리멘토 단축코드(shortcode) 위젯 입력란을 전체 선택 후 삭제 → 버튼 관리 목록에서 숏코드 재복사 후 붙여넣기
3. 업데이트 후 미리보기에서 확인