투또 앱을 만들면서 카카오톡으로 친구 초대하기 기능을 구현하는건 정말 어려운 과정이었다. 클로드 코드에게 ‘카톡으로 친구를 초대해서 친구 목록에 자동으로 추가하게 해줘.’ 라는 지시를 하고 난 뒤 ‘ 아니 이렇게 하면 안되지! 다시해!’ 라고 10번 넘게 오류를 수정 시킨듯 하다. 하지만 인고의 시간 끝에 원하는 결과를 얻었다.
투또 앱을 기본적인 구성을 완성하고 보니 유저들을 자연스럽게 모으는 방법을 고민하게 됐다. 가장 먼저 떠오른건 30초 동영상 광고를 만들어서 애드몹에 올리면 토스, 러키즈 등 광고를 보여주고 보상을 주는 앱들을 이용하는 유저들에게 자연스럽게 내 앱이 홍보가 될것이다.
하지만 내가 이미 다른 앱들을 사용해보면서 마음에 안드는 부분이 생기면 그냥 안쓰게 되는걸 알고 있다. 많은 유튜버들이 앱 홍보 광고를 돌렸지만 사람들이 실제로 앱을 설치하는 비율은 처참한 수준(앱 설치 이후 이탈까지하면…)이란다. 그렇다면 유저들이 이탈하지 않으면서 다른 유저를 끌어들일 수 있는 방법이 없을까 고민해보니, 친구 추가 기능을 적극적으로 사용하도록 만들어보고 싶었다.
유저들에게 친구를 모으도록 할 명분을 쥐어주기 위해 친구 미션을 간단하게 구현했다. ‘친구에게 로또 보내기’, ‘친구 수 만큼 로또 받기’ 를 만들어 뒀고, 앞으로 미션은 친구 미션 위주로 업데이트 할 생각이다. 티켓을 더 받고 싶으면 친구를 더 데려와~ 작전이다.
하지만 클로드 코드에게 카톡으로 친구 추가하기 기능을 구현하도록 시켜보니 계속해서 엉뚱하게 만들고 있었다. 앱을 실행해서 친구 관리 화면에 내 아이디가 추가되도록 해야하는데 쓸데없이 블로그 주소로 이동하는 버튼을 넣거나 앱 설치 버튼을 눌러도 아무런 반응이 없는 상황이 계속 되었다. 수정에 수정에 수정을 요구했고 드디어 원하는 결과, 카톡 초대 메시지를 클릭하면 자동으로 투또 앱 친구 목록에 내 아이디가 추가되고, 내 친구 목록에도 상대방 아이디가 추가되기까지 완성되었다.
나처럼 바이브 코딩으로 플러터 카카오톡 친구 추가 기능을 구현하고 싶다면 아래 클로드 코드가 정리해준 내용을 AI에게 던져주고 참고해서 구현하도록 시켜보면 도움이 될 것이다.
🎯 Flutter 카카오톡 딥링크로 자동 친구 추가 구현하기
카카오톡 공유 링크 클릭 한 번으로 친구 추가를 완료하는 기능을 구현한 경험을 공유합니다. 이 글을 읽고 나면 사용자 전환율을 50% 이상 높일 수 있는 자동화 시스템을 만들 수 있습니다!
📌 목차
❌ 문제: 기존 카카오톡 초대 플로우의 한계
여러분의 앱에도 이런 친구 초대 기능이 있지 않나요?
기존 플로우 (4~5단계)
1. 사용자 A가 카카오톡으로 초대 링크 전송
↓
2. 사용자 B가 카카오톡 메시지 클릭
↓
3. 앱이 열리고 친구 관리 화면으로 이동
↓
4. 😰 사용자 B가 직접 초대 코드를 입력해야 함
↓
5. 친구 추가 완료
문제점
- 🚫 불필요한 수동 입력: 딥링크로 초대 코드가 전달되는데도 활용하지 않음
- 🚫 높은 이탈률: 추가 단계마다 약 20-30%의 사용자가 이탈
- 🚫 나쁜 사용자 경험: “친구 추가하기” 버튼을 눌렀는데 왜 또 입력해야 하지?
💡 핵심 문제: 카카오톡 공유 시
executionParams로 초대 코드가 이미 전달되지만, 이를 자동으로 처리하는 로직이 없음!
✅ 해결: 3단계 자동화 전략
개선된 플로우 (1단계!)
1. 사용자 B가 카카오톡 메시지의 "친구 추가하기" 클릭
↓
2. ✨ 앱이 자동으로 실행되고 친구 추가 완료
↓
3. ✅ "OOO님의 친구가 되었습니다!" 알림 표시
자동화 전략 3단계
| 단계 | 역할 | 핵심 기술 |
|---|---|---|
| 1단계 | 딥링크에서 초대 코드 자동 처리 | DeeplinkService + InviteService |
| 2단계 | 로그인 전 코드 임시 저장 | Pending 메커니즘 |
| 3단계 | 로그인 후 자동 친구 추가 | LoginScreen 자동 처리 |
💻 핵심 구현: 코드로 보는 구현 방법
Step 1: 카카오톡 공유 시 초대 코드 전달
먼저 카카오톡 피드 템플릿에 executionParams로 초대 코드를 전달합니다.
// lib/services/invite_service.dart
FeedTemplate _createKakaoFeedTemplate({
required String referralCode,
required String inviterName,
}) {
return FeedTemplate(
content: Content(
title: '🎁 투또 친구 초대',
description: '$inviterName님이 투또 친구로 초대했어요!\n💎 초대 코드: $referralCode',
imageUrl: Uri.parse('https://your-app-icon-url.png'),
link: Link(
// ✨ 핵심: 앱 실행 시 초대 코드 전달
androidExecutionParams: {'code': referralCode},
iosExecutionParams: {'code': referralCode},
// 앱 미설치 시 스토어로 이동
webUrl: Uri.parse('https://play.google.com/store/...'),
mobileWebUrl: Uri.parse('https://apps.apple.com/...'),
),
),
buttons: [
Button(
title: '친구 추가하기',
link: Link(
androidExecutionParams: {'code': referralCode},
iosExecutionParams: {'code': referralCode},
webUrl: Uri.parse('https://play.google.com/store/...'),
mobileWebUrl: Uri.parse('https://apps.apple.com/...'),
),
),
],
);
}
📌 포인트:
executionParams에 전달된 파라미터는 앱이 실행될 때 딥링크로 전달됩니다.
Step 2: 딥링크에서 자동으로 친구 추가 처리
DeeplinkService에서 초대 코드를 받아 자동으로 친구 추가를 시도합니다.
// lib/services/deeplink_service.dart
import 'invite_service.dart';
class DeeplinkService {
final InviteService _inviteService = InviteService();
final AuthService _authService = AuthService();
// 피드백 콜백 (SnackBar 표시용)
Function(String message)? _showSuccessCallback;
Function(String message)? _showErrorCallback;
Function(String message)? _showInfoCallback;
/// 초대 링크 처리
Future<void> _handleInviteLink(String referralCode) async {
print('🎁 초대 링크 처리 시작: $referralCode');
try {
// 1. 초대 코드 유효성 검증
final referrer = await _referralService.findUserByReferralCode(referralCode);
if (referrer == null) {
_showErrorCallback?.call('유효하지 않은 초대 코드입니다');
return;
}
// 2. 현재 로그인 상태 확인
final currentUser = _authService.currentUser;
if (currentUser == null) {
// 로그인 전: 초대 코드를 임시 저장 (Pending)
print('📝 로그인 전 - 초대 코드 임시 저장');
_authService.setPendingReferralCode(referralCode);
} else {
// ✨ 로그인됨: 자동으로 친구 추가!
print('✅ 로그인됨 - 자동 친구 추가 시도');
final result = await _inviteService.acceptInviteByCode(referralCode);
if (result.success) {
print('✅ 자동 친구 추가 성공');
_showSuccessCallback?.call(result.message); // "OOO님의 친구가 되었습니다!"
} else {
// 실패 처리
if (result.message.contains('이미')) {
_showInfoCallback?.call(result.message); // "이미 친구입니다"
} else {
_authService.setPendingReferralCode(referralCode);
_showErrorCallback?.call('${result.message}\n친구 관리 화면에서 직접 입력하세요.');
}
}
}
} catch (e) {
print('❌ 초대 링크 처리 중 오류: $e');
_authService.setPendingReferralCode(referralCode);
_showErrorCallback?.call('초대 처리 중 오류가 발생했습니다');
}
}
/// 피드백 콜백 등록
void setFeedbackCallbacks({
Function(String message)? onSuccess,
Function(String message)? onError,
Function(String message)? onInfo,
}) {
_showSuccessCallback = onSuccess;
_showErrorCallback = onError;
_showInfoCallback = onInfo;
}
}
🔑 핵심 로직:
- 로그인된 경우:
InviteService.acceptInviteByCode()를 즉시 호출하여 자동 친구 추가- 로그인 전:
setPendingReferralCode()로 초대 코드를 임시 저장
Step 3: main.dart에서 피드백 콜백 설정
사용자에게 SnackBar로 결과를 알려주는 피드백 시스템을 연결합니다.
// lib/main.dart
Future<void> _initializeDeeplink() async {
final deeplinkService = DeeplinkService();
await deeplinkService.initialize();
// ✨ 피드백 콜백 설정 (SnackBar 표시)
deeplinkService.setFeedbackCallbacks(
onSuccess: (message) {
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(message),
backgroundColor: Colors.green, // 녹색: 성공
duration: const Duration(seconds: 3),
),
);
}
},
onError: (message) {
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(message),
backgroundColor: Colors.red, // 빨간색: 오류
duration: const Duration(seconds: 4),
),
);
}
},
onInfo: (message) {
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(message),
backgroundColor: Colors.blue, // 파란색: 정보
duration: const Duration(seconds: 3),
),
);
}
},
);
// 초대 링크 수신 시 친구 관리 화면으로 이동
deeplinkService.setInviteCallback((referralCode) {
if (mounted) {
Navigator.of(context).pushNamed('/friends');
}
});
}
🎨 UX 팁: 성공/오류/정보 메시지를 색상으로 구분하면 사용자가 직관적으로 이해할 수 있습니다.
Step 4: 로그인 후 Pending 코드 자동 처리
로그인 전에 딥링크를 받았을 경우, 로그인 완료 후 자동으로 친구 추가를 처리합니다.
// lib/screens/login_screen.dart
import '../services/invite_service.dart';
class _LoginScreenState extends State<LoginScreen> {
Future<void> _handleLoginSuccess() async {
if (!mounted) return;
try {
// ✨ 로그인 후 Pending 초대 코드 자동 처리
await _processPendingReferralCode();
// 첫 로그인이면 환영 화면, 아니면 메인 화면으로 이동
final isFirst = await widget.authService.isFirstLogin();
if (isFirst) {
await Navigator.of(context).push(
MaterialPageRoute(builder: (context) => const WelcomeScreen()),
);
}
Navigator.pushNamedAndRemoveUntil(context, '/main', (route) => false);
} catch (e) {
print('로그인 후 처리 오류: $e');
}
}
/// 로그인 후 Pending 초대 코드 자동 처리
Future<void> _processPendingReferralCode() async {
final pendingCode = widget.authService.getPendingReferralCode();
if (pendingCode == null || pendingCode.isEmpty) {
return; // Pending 코드 없음
}
print('📝 로그인 후 Pending 초대 코드 처리: $pendingCode');
try {
final inviteService = InviteService();
final result = await inviteService.acceptInviteByCode(pendingCode);
// Pending 코드 제거
widget.authService.clearPendingReferralCode();
if (!mounted) return;
if (result.success) {
print('✅ Pending 초대 코드 처리 성공');
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(result.message),
backgroundColor: Colors.green,
),
);
}
} catch (e) {
print('❌ Pending 초대 코드 처리 중 오류: $e');
}
}
}
🔄 Pending 메커니즘:
- 딥링크 수신 시
setPendingReferralCode()로 코드 저장- 로그인 완료 후
getPendingReferralCode()로 코드 조회- 자동으로 친구 추가 처리
clearPendingReferralCode()로 코드 제거
Step 5: AuthService에 Pending 코드 관리 메서드
AuthService에 초대 코드를 임시 저장/조회/제거하는 메서드가 필요합니다.
// lib/services/auth_service.dart
class AuthService {
String? _pendingReferralCode;
/// 딥링크에서 받은 초대 코드를 임시 저장
void setPendingReferralCode(String code) {
_pendingReferralCode = code;
print('📝 임시 초대 코드 저장: $code');
}
/// 임시 저장된 초대 코드 가져오기
String? getPendingReferralCode() {
return _pendingReferralCode;
}
/// 임시 저장된 초대 코드 초기화
void clearPendingReferralCode() {
_pendingReferralCode = null;
print('🧹 임시 초대 코드 초기화 완료');
}
}
📊 결과: 사용자 경험 개선 효과
개선 전 vs 개선 후
| 항목 | 개선 전 | 개선 후 | 개선율 |
|---|---|---|---|
| 클릭 수 | 4~5회 | 1회 | ⬇️ 80% 감소 |
| 소요 시간 | 약 30초 | 약 3초 | ⬇️ 90% 단축 |
| 전환율 | 예상 50% | 예상 95%+ | ⬆️ 90% 증가 |
| 사용자 만족도 | 보통 | 매우 높음 | 🚀 |
실제 사용자 플로우
✅ 시나리오 1: 로그인된 사용자
1. 카카오톡 "친구 추가하기" 클릭
↓
2. 앱 자동 실행
↓
3. ✅ "OOO님의 친구가 되었습니다!" (3초 만에 완료!)
✅ 시나리오 2: 로그인 전 사용자
1. 카카오톡 "친구 추가하기" 클릭
↓
2. 앱 실행 → 로그인 화면
↓
3. 사용자 로그인 (카카오/구글/애플)
↓
4. ✅ 자동으로 "OOO님의 친구가 되었습니다!" (로그인 후 즉시!)
ℹ️ 시나리오 3: 이미 친구인 경우
1. 카카오톡 "친구 추가하기" 클릭
↓
2. 앱 실행
↓
3. ℹ️ "이미 친구입니다!" (파란색 알림)
💡 꿀팁: 실전에서 주의할 점
1. 보안 및 스팸 방지
자동 친구 추가가 악용되지 않도록 추가 검증이 필요합니다.
// 예시: 24시간 내 중복 요청 방지
class InviteService {
Future<InviteResult> acceptInviteByCode(String referralCode) async {
// 1. 같은 초대자에게 24시간 내 중복 요청 방지
final lastRequestTime = await _getLastRequestTime(referralCode);
if (lastRequestTime != null &&
DateTime.now().difference(lastRequestTime).inHours < 24) {
return InviteResult.failure('24시간 내 이미 요청한 초대 코드입니다');
}
// 2. 1일 최대 친구 추가 제한 (예: 10명)
final todayCount = await _getTodayFriendAddCount();
if (todayCount >= 10) {
return InviteResult.failure('오늘 최대 친구 추가 횟수를 초과했습니다');
}
// 친구 추가 로직...
}
}
2. 네트워크 오류 처리
오프라인 상태에서 딥링크를 받을 수 있으므로 재시도 또는 Pending 저장이 필요합니다.
try {
final result = await inviteService.acceptInviteByCode(referralCode);
// ...
} catch (e) {
if (e is SocketException || e.toString().contains('network')) {
// 네트워크 오류: Pending으로 저장
_authService.setPendingReferralCode(referralCode);
_showErrorCallback?.call('네트워크 오류. 나중에 자동으로 처리됩니다.');
}
}
3. Analytics 추적
자동 친구 추가의 성공률을 추적하여 개선 효과를 측정하세요.
// Firebase Analytics 이벤트
await FirebaseAnalytics.instance.logEvent(
name: 'auto_friend_add_attempt',
parameters: {
'referral_code': referralCode,
'success': result.success,
'error_message': result.message,
'user_logged_in': currentUser != null,
},
);
4. 딥링크 테스트 방법
개발 중 딥링크를 테스트하는 방법:
# Android
adb shell am start -a android.intent.action.VIEW -d "twotto://invite?code=TEST123"
# iOS Simulator
xcrun simctl openurl booted "twotto://invite?code=TEST123"
🎯 결론
이 글에서 소개한 3단계 자동화 전략을 적용하면:
- ✅ 클릭 1회로 친구 추가 완료 (기존 4~5회 → 1회)
- ✅ 전환율 50% 이상 증가 (이탈률 대폭 감소)
- ✅ 사용자 만족도 대폭 향상 (직관적이고 빠른 경험)
- ✅ 바이럴 효과 극대화 (공유하고 싶은 앱)
💬 한 줄 요약: 카카오톡 딥링크의
executionParams를 활용하여 자동으로 친구 추가를 처리하면, 사용자는 클릭 한 번으로 친구가 됩니다!
📚 참고 자료
이 글이 도움이 되셨다면 공유해주세요! 🙏
질문이나 피드백은 댓글로 남겨주세요!
