카카오 로그인 버튼은 방문자가 카카오 계정으로 간편하게 로그인할 수 있도록 사이트에 삽입하는 버튼입니다. 버튼을 만들어 두면 이메일 발송 시 URL로 바로 로그인을 유도하거나, 페이지에 숏코드로 삽입해 활용할 수 있습니다. 세팅 완료 시, 사이트 페이지에 카카오 로그인 버튼이 노출되고, 방문자가 버튼을 클릭하면 카카오 로그인 후 지정한 페이지로 자동 이동하는 상태가 됩니다.
1. 준비물 #
☐ 카카오 로그인 후 이동할 페이지(감사 페이지 등) 사전 생성 완료
☐ FluentCRM 설치 및 활성화 상태 (태그 기능 사용 시)
⚠️ 리디렉션 URL에 입력할 페이지가 먼저 만들어져 있어야 합니다. 페이지 지정하지 않을 경우 메인 페이지로 이동합니다.
2. 전체 진행 흐름 요약 #
[파트 A] 카카오 로그인 버튼 생성
Step 1. 기본 설정 — 버튼 이름, 텍스트, 태그, 리디렉션 URL 입력
Step 2. 디자인 설정 — 로그인 전 버튼 색상·크기·여백 설정
Step 3. 로그인 후 버튼 설정 — 로그인한 회원에게 보이는 버튼 디자인 설정 후 버튼 추가
[파트 B] 버튼 사이트에 삽입
Step 4. 숏코드로 페이지에 삽입 — 생성된 버튼의 숏코드를 복사해 엘리멘토 페이지에 추가
Step 5. URL로 직접 로그인 유도 — 버튼 URL을 복사해 이메일·문자 등에 활용
3. 카카오 로그인 버튼 생성 #
Step 1. 기본 설정
버튼의 기본 정보를 입력합니다. 버튼 이름은 관리자 구별용이며 사이트에 노출되지 않습니다. FluentCRM 태그는 이 버튼으로 로그인한 방문자를 자동으로 분류하는 데 사용됩니다.
📂 경로: 대시보드 → 테라플로우 → 카카오 로그인 → 버튼 관리 → + 새 버튼 추가
1. 오른쪽 상단 + 새 버튼 추가 클릭
2. 아래 표를 참고해 각 항목 입력 및 선택
3. 다음: 디자인 → 클릭
| 항목 | 설명 | 예시 |
|---|---|---|
| 버튼 이름 | 관리자 구별용 이름. 사이트에 노출되지 않음 | 무료 PDF 신청 |
| 버튼 텍스트 | 버튼에 실제로 표시되는 텍스트 | 무료 PDF 신청 |
| FluentCRM 태그 | 기존 태그: 이미 만들어진 태그 선택 / 새 태그: 새 태그명 직접 입력 | |
| 버튼 정렬 | 버튼 위치 정렬 (좌측 / 중앙 / 우측) | 중앙 |
| 리디렉션 URL | 카카오 로그인 완료 후 이동할 페이지 주소. 비워두면 현재 페이지 유지 | https://example.com/thank-you |
| 카카오 아이콘 표시 | 버튼에 카카오톡 말풍선 아이콘 표시 여부 | 체크 (권장) |
| 로그인 후에도 버튼 표시 | 이미 로그인한 회원에게도 버튼 노출 여부. 다른 페이지에서 로그인한 경우 버튼을 보여주기 위해 사용 | 체크 (권장) |
💡 TIP: FluentCRM 태그를 설정하면 이 버튼으로 로그인한 방문자에게 자동으로 태그가 붙어, 이후 이메일·알림톡 자동화에 활용할 수 있습니다.
Step 2. 디자인 설정
로그인 전 방문자에게 보이는 버튼의 색상, 크기, 여백을 설정합니다. 우측 미리보기에서 변경 사항이 실시간으로 반영됩니다.
1. 아래 표를 참고해 각 항목 설정
2. 다음: 로그인 후 → 클릭
| 항목 | 설명 | 기본값 |
|---|---|---|
| 배경색 | 버튼 배경색 (HEX 코드 직접 입력 가능) | #FEE500 (카카오 옐로우) |
| 텍스트 색상 | 버튼 텍스트 색상 | #000000 |
| 모서리 둥글기 | 버튼 모서리 라운드 값 (단위: px) | 6px |
| 글자 크기 | 버튼 텍스트 크기 (단위: px) | 16px |
| 패딩 | 버튼 내부 여백 (상하 좌우 순서로 입력) | 12px 24px |
| 폰트 | 버튼 텍스트 폰트 종류 | 기본 |
| 그림자 | 버튼 그림자 효과 | 없음 |
| CSS 직접 수정 | 고급 스타일 직접 수정 가능. 복사 버튼으로 CSS 코드 복사 가능 | 자동 생성됨 |
💡 TIP: CSS 직접 수정 영역의 복사 버튼을 누르면 현재 설정된 CSS 코드를 클립보드에 복사할 수 있습니다. 다른 버튼에 동일한 스타일을 적용할 때 활용하세요.
Step 3. 로그인 후 버튼 설정
이미 로그인한 회원에게 보이는 버튼의 텍스트와 디자인을 설정합니다. 로그인 전 버튼과 텍스트·색상을 다르게 설정해 두 상태를 구분할 수 있습니다.
1. 버튼 텍스트란에 로그인 후 노출할 텍스트 입력 (예: 무료 PDF 받기)
2. 카카오 아이콘 표시 여부 선택 (로그인 후 버튼에는 아이콘 제거 권장)
3. 배경색·텍스트 색상·모서리 둥글기·글자 크기·패딩·폰트·그림자 설정
4. 우측 미리보기에서 로그인 후 영역 확인
5. 버튼 추가 클릭
⚠️ 로그인 후 버튼의 배경색은 기본값이 파란색(#3B82F6)입니다. 사이트 디자인에 맞게 변경하세요.
4. 카카오 로그인 버튼 원하는 페이지에 삽입하기 #
Step 4. 숏코드로 페이지에 삽입
생성된 버튼을 페이지에 표시하려면 숏코드를 복사해 엘리멘토 편집기에 추가합니다. 숏코드를 넣은 위치에 카카오 로그인 버튼이 나타납니다.
📂 경로: 대시보드 → 테라플로우 → 카카오 로그인 → 버튼 관리
1. 버튼 관리 목록에서 생성한 버튼의 숏코드 버튼 클릭
2. 표시된 숏코드 복사
3. 버튼을 삽입할 페이지로 이동 후 엘리멘토로 편집 클릭
4. 엘리멘토 위젯 검색창에서 Shortcode 위젯 검색 후 원하는 위치에 드래그
5. Shortcode 위젯의 입력란에 복사한 숏코드 붙여넣기
6. 업데이트 클릭 후 페이지에서 버튼 노출 확인
Step 5. URL로 직접 로그인 유도
이메일·문자·카카오톡 메시지를 보낼 때, 페이지 링크 대신 버튼 URL을 직접 보내면 방문자가 링크 클릭 즉시 카카오 로그인 화면으로 이동합니다.
📂 경로: 대시보드 → 테라플로우 → 카카오 로그인 → 버튼 관리
1. 버튼 관리 목록에서 생성한 버튼의 URL 버튼 클릭
2. 표시된 URL 복사
3. 복사한 URL을 이메일·문자·카카오톡 메시지 등에 붙여넣기하여 발송
💡 TIP: URL 방식은 별도 페이지 없이 바로 카카오 로그인을 시작할 수 있어, 이메일 마케팅이나 문자 발송 시 특히 유용합니다.
5. 완료 체크 #
☐ 버튼 관리 목록에 새로 만든 버튼이 표시됨
☐ 숏코드를 삽입한 페이지에서 카카오 로그인 버튼이 정상 노출됨
☐ 버튼 클릭 시 카카오 로그인 화면으로 이동함
☐ 로그인 완료 후 리디렉션 URL로 설정한 페이지로 이동함
☐ FluentCRM에서 해당 태그가 로그인한 회원에게 부여됨
☐ 로그인한 상태에서 버튼을 다시 보면 로그인 후 버튼 텍스트·색상으로 변경됨
6. 자주 막히는 문제 #
01. 버튼을 클릭해도 카카오 로그인 화면이 뜨지 않는다
원인: 테라카카오 플러그인의 카카오 API 키가 미설정 상태이거나, 카카오 개발자 콘솔에서 리디렉션 URI가 등록되지 않은 경우 발생합니다.
해결 방법:
1. 대시보드 → 테라플로우 → 카카오 로그인 → API 설정 탭 이동
2. 카카오 REST API 키 입력 여부 확인
3. 카카오 디벨로퍼에서 해당 사이트 도메인이 허용 도메인에 등록되어 있는지 확인
02. 로그인 후 엉뚱한 페이지로 이동한다
원인: 기본 설정의 리디렉션 URL이 잘못된 주소가 입력된 경우, 로그인 후 오류 페이지로 이동합니다.
해결 방법:
1. 버튼 관리 목록에서 해당 버튼의 수정 클릭
2. 기본 설정 탭 → 리디렉션 URL란에 정확한 페이지 주소 입력 (예: https://example.com/thank-you)
3. 이동할 페이지가 실제로 존재하는지 브라우저에서 해당 URL 직접 접속하여 확인
03. 로그인한 상태인데 카카오 버튼이 사라졌다
원인: 기본 설정에서 로그인 후에도 버튼 표시 옵션이 체크되지 않은 경우, 로그인 상태에서는 버튼이 자동으로 숨겨집니다.
해결 방법:
1. 버튼 관리 목록에서 해당 버튼의 수정 클릭
2. 기본 설정 탭 → 로그인 후에도 버튼 표시 체크박스 체크
3. 저장 후 로그인 상태에서 페이지를 새로고침하여 로그인 후 버튼 노출 확인
05. 숏코드를 넣었는데 페이지에서 버튼이 안 보인다
원인: 숏코드 입력 시 앞뒤에 불필요한 공백이 포함되었거나, 숏코드 코드 자체가 잘못 복사된 경우 발생합니다.
해결 방법:
1. 버튼 관리 목록에서 숏코드 버튼을 다시 클릭해 정확한 숏코드 재복사
2. 엘리멘토 Shortcode 위젯의 입력란을 전체 선택 후 삭제
3. 복사한 숏코드를 다시 붙여넣기 후 업데이트 클릭
4. 페이지 미리보기에서 버튼 노출 확인
7. 관련 문서 연결 #
→ 다음 단계: FluentCRM 태그 기반 이메일 자동화 설정