“천국에서 떨어질 때 아팠나요?” — 익명
그와 같은 뻔한 유혹의 말처럼, 데이팅 앱들은 점점 지루해지고 있습니다. 데이팅 앱들은 사용자의 관심사, 취미, 취향 등에 따라 사용자를 매칭하는 데는 놀라운 성과를 내고 있습니다. 하지만 사용자를 계속 참여시키기 위해서는 단순히 매칭을 찾는 것 이상의 것이 필요합니다.
사용자 상호작용이 사용자 참여의 핵심입니다. “적은 것이 더 많다”는 말처럼, 텍스트가 적을수록 상호작용이 더 많아집니다. 누군가를 알아가기 위해서는 텍스트 메시지와 사진만 보는 것(그들이 실제로 자신의 사진을 사용한다고 가정할 때)보다 더 많은 것이 필요합니다.
이 튜토리얼에서는 데이팅 앱에 비디오 통화를 통합하여 사용자 참여를 증가시키고, 따라서 사용자가 좋은 매칭을 찾을 수 있도록 하는 사용 사례를 단계별로 안내하겠습니다.
필수 조건
Flutter를 처음 사용하시는 경우, 여기에서 Flutter SDK를 설치하세요.
- Agora Flutter SDK v4.0.6
- Visual Studio Code 또는 원하는 다른 IDE
- Agora 개발자 계정 (자세한 내용은 How to Get Started with Agora를 참고하세요)
사용자 인증 페이지 구축
먼저, 이메일 ID와 비밀번호를 입력하는 간단한 로그인/회원가입 양식을 만들었습니다. 이 인터페이스는 필요에 따라 맞춤 설정할 수 있습니다.
여기서 저는 사용자 인증 및 사용자 프로필 저장을 위해 Firebase를 사용하고 있습니다. 사용자 프로필은 다음과 같은 요소로 구성됩니다:
- 이메일 ID
- UID
- 관심 분야 목록
관심 분야를 기반으로 한 사용자 매칭
이 데모를 위해, 사용자가 선택하고 프로필을 완성할 수 있는 6개의 카테고리를 예시로 선택했습니다. 이 관심 분야는 데이터베이스 내 모든 사용자와 매칭됩니다. 두 사용자가 동일한 관심 분야를 공유하면 동일한 목록에 추가됩니다.
사용자에게 적합한 매칭을 찾기 위해, 사용자의 관심사를 다른 사용자의 관심사와 매핑합니다. 관심사가 겹치는 사용자들은 매칭되어 UID와 가용 상태와 함께 matchedUsers 목록에 추가됩니다.
카메라 및 마이크 테스트
매칭된 사용자와의 영상 통화에 참여하기 전에, 기기의 카메라와 마이크를 테스트하기 위한 화면을 추가했습니다.
카메라 테스트를 위해 Agora RtcEngine을 초기화한 후 startPreview() 메서드를 사용합니다.
마이크를 테스트하기 위해 다른 플러그인인 mic_stream을 사용합니다. 이 플러그인은 마이크가 수신한 오디오의 레벨을 반환합니다. 이를 통해 마이크의 상태를 나타내는 오디오 바를 생성합니다.
콜 페이지
콜 페이지에는 Tinder와 유사한 UI를 적용했습니다. 사용자는 화면에 표시된 사람에 대해 마음에 들면 오른쪽으로, 마음에 들지 않으면 왼쪽으로 스와이프할 수 있습니다.
먼저 로컬 및 원격 사용자를 위한 비디오 뷰를 설정합니다. 여기서는 로컬 사용자의 화면이 원격 사용자의 뷰 위에 중첩되는 간단한 UI를 채택했습니다.
영상 통화
이 두 사용자 간의 영상 통화는 Tinder UI 방식과 유사하게 진행됩니다. 사용자가 다른 사용자를 오른쪽이나 왼쪽으로 스와이프하면 즉시 다른 매칭된 사용자와 통화가 연결됩니다. Tinder와 유사한 UI를 구현하기 위해 tcard라는 플러그인을 사용하고 있습니다.
아고라 영상 통화 카드
사용자가 오른쪽 또는 왼쪽으로 스와이프할 때 발생하는 사항:
- 왼쪽 스와이프: 사용자는 현재 채널을 떠나 새로운 채널에 가입하여 다른 매치와 상호작용합니다.
왼쪽 스와이프
- 오른쪽 스와이프: 사용자는 현재 채널을 떠나며, 자신의 UID를 '좋아하는 사용자 목록'에 저장합니다. 이 UID 목록은 저장되어 두 사용자가 서로를 좋아한 경우 통화 연결이 끊어진 후 서로 메시지를 보낼 수 있도록 합니다. 사용자는 이후 다른 매칭된 사용자와 함께 무작위 채널에 참여합니다.
오른쪽으로 스와이프
메시징 페이지
오른쪽으로 스와이프된 모든 사용자에 대해 우리는 likedUsers 목록을 유지합니다. 이 목록에는 모든 사용자의 UID가 저장됩니다. 이 UID는 사용자와 RTM 채널에 연결하여 통화 종료 후 메시지를 전송할 수 있도록 도와줍니다.
RTM SDK를 설정하려면 다음 단계를 따르세요:
- SDK를 초기화합니다. 이 단계에서
RtmChannel및RtmClient객체를 생성한 후 App ID, 토큰, 채널 이름을 사용하여 초기화합니다.
RTM SDK 초기화
- 사용자 이름으로 로그인합니다. 여기서는 Firebase에 저장된 이메일 주소를 사용자 이름으로 사용합니다. 이 이메일 주소는 모델의 기본 키이므로, 모든 사용자에게 고유한 사용자 이름을 보장합니다.
RTM 로그인
- 채널에 참여하세요. RTM 채널에 로그인한 후에는 채널에 참여할 수 있습니다. 이를 위해 채널 내 모든 사용자가 공유하는 고유한 채널 이름이 필요합니다. 이 예시에서는 로컬 및 원격 사용자의 UID를 사용하여 고유한 채널 이름을 생성합니다.
RTM 채널에 참여하세요
- 메시지를 보내세요. 채널에 참여한 후에는
sendMessage메서드를 호출하여 채널에 메시지를 보낼 수 있습니다.
RTM 메시지 보내기
- 채널을 떠나기. 사용자가 채팅 페이지를 나갔을 때, 사용자가 원하는 경우 다른 채널에 참여할 수 있도록 채널을 떠나야 합니다.
RTM 채널을 떠나세요
테스트
앱을 빌드하기 전에 다음 사항을 확인하세요:
- Agora SDK를 초기화하기 위해 앱 ID와 토큰을 추가하셨나요?
- 앱을 Firebase와 연결하여 모든 사용자를 등록하셨나요?
- 앱을 빌드한 후에는 다음과 같은 화면이 표시되어야 합니다:
결론
RTC와 RTM을 결합하면 많은 가능성이 열립니다. 이 튜토리얼에서는 가장 큰 참여형 앱 중 하나인 스피드 데이트를 살펴보았습니다. 이 앱에서는 두 명의 사용자가 관심사에 따라 랜덤으로 매칭되어 RTC 채널에 추가됩니다.
이 애플리케이션의 전체 코드는 여기에서 확인할 수 있습니다.
기타 자료
Agora Flutter SDK 및 기타 사용 사례에 대해 자세히 알아보려면 개발자 가이드 를 참조하세요.
위에서 논의된 기능과 더 많은 기능에 대한 완전한 문서는 여기에서 확인할 수 있습니다.
또한 Agora Developer Slack Community에 참여해 주시기를 초대합니다.
