Flutter WebRTC로 초간단 화상 채팅 앱 만들기 🚀

안녕, 친구들! 오늘은 정말 흥미진진한 주제로 찾아왔어. 바로 Flutter와 WebRTC를 이용해서 우리만의 화상 채팅 앱을 만들어볼 거야. 😎 요즘 같은 비대면 시대에 화상 채팅 앱의 수요가 엄청나게 늘어났잖아? 그래서 우리도 한번 만들어보자고!

이 글을 다 읽고 나면, 너도 나도 모두가 화상 채팅 앱 개발의 달인이 될 거야. 재능넷에서 Flutter 개발 재능을 공유하는 날도 머지않았겠어? 😉

자, 그럼 이제부터 우리의 화상 채팅 앱 개발 여정을 시작해볼까? 준비됐니? 고고씽! 🏃‍♂️💨

1. Flutter와 WebRTC: 천생연분 커플 💑

먼저, 우리가 사용할 두 가지 핵심 기술에 대해 간단히 알아보자.

1.1 Flutter: 크로스 플랫폼의 영웅 🦸‍♂️

Flutter는 구글에서 만든 UI 툴킷이야. 이걸 사용하면 하나의 코드베이스로 iOS, Android, 웹, 데스크톱 앱을 모두 만들 수 있어. 와, 대박이지? 😲

1.2 WebRTC: 실시간 통신의 마법사 🧙‍♂️

WebRTC(Web Real-Time Communication)는 웹 브라우저 간에 플러그인 없이 실시간 음성, 영상, 데이터 통신을 가능하게 해주는 기술이야. 화상 채팅에 딱이지?

이 두 기술을 합치면? 바로 우리가 만들 멋진 화상 채팅 앱의 기반이 되는 거지! Flutter의 UI 능력과 WebRTC의 실시간 통신 능력이 만나면, 그야말로 천하무적이라고 할 수 있어.

자, 이제 우리의 주인공들을 소개했으니, 본격적으로 앱 개발을 시작해볼까? 🚀

2. 개발 환경 설정: 우리의 무대를 준비하자 🎭

화상 채팅 앱을 만들기 전에, 먼저 우리의 개발 환경을 세팅해야 해. 마치 요리를 시작하기 전에 주방을 정리하고 재료를 준비하는 것처럼 말이야. 자, 그럼 시작해볼까?

2.1 Flutter SDK 설치하기 📥

가장 먼저 해야 할 일은 Flutter SDK를 설치하는 거야. Flutter 공식 웹사이트에서 다운로드 받을 수 있어.

Tip! flutter doctor 명령어를 실행하면 Flutter 개발에 필요한 다른 도구들이 제대로 설치되었는지 확인할 수 있어. 마치 의사 선생님이 건강 검진을 해주는 것처럼 말이야! 🩺

2.2 IDE 선택 및 설정 🖥️

Flutter 개발을 위한 IDE(통합 개발 환경)로는 주로 Android Studio나 VS Code를 사용해. 둘 다 훌륭한 선택이야!

어떤 IDE를 선택하든, Flutter와 Dart 플러그인을 반드시 설치해야 해. 이 플러그인들이 우리의 개발을 훨씬 편리하게 만들어줄 거야.

2.3 WebRTC 패키지 추가하기 📦

이제 우리 프로젝트에 WebRTC 기능을 추가할 차례야. Flutter에서는 flutter_webrtc 패키지를 사용할 거야.

프로젝트의 pubspec.yaml 파일에 다음 줄을 추가해:

dependencies:
  flutter_webrtc: ^0.9.11

그리고 터미널에서 다음 명령어를 실행해:

flutter pub get

이렇게 하면 WebRTC 패키지가 우리 프로젝트에 추가돼. 마치 레고 블록을 추가하는 것처럼 간단하지? 😊

2.4 필요한 권한 설정하기 🔐

화상 채팅 앱을 만들려면 카메라와 마이크 접근 권한이 필요해. 이를 위해 Android와 iOS 설정 파일을 수정해야 해.

Android (android/app/src/main/AndroidManifest.xml):

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

iOS (ios/Runner/Info.plist):

<key>NSCameraUsageDescription</key>
<string>카메라 접근이 필요합니다</string>
<key>NSMicrophoneUsageDescription</key>
<string>마이크 접근이 필요합니다</string>

주의! 사용자의 개인정보를 존중하는 것은 매우 중요해. 꼭 필요한 권한만 요청하고, 왜 그 권한이 필요한지 명확히 설명해주는 것이 좋아.

자, 이렇게 해서 우리의 개발 환경 설정이 완료됐어! 🎉 이제 우리는 화상 채팅 앱을 만들 준비가 완벽하게 됐지. 마치 요리사가 최고급 주방에서 요리를 시작하기 직전의 느낌이랄까? 😄

다음 섹션에서는 실제로 앱의 기본 구조를 만들어볼 거야. 기대되지 않아? 우리가 만들 앱이 어떤 모습일지 상상이 가니? 곧 그 모습을 실제로 보게 될 거야!

그럼 잠깐 휴식을 취하고, 다음 여정을 위해 에너지를 충전하자. 앞으로가 더 재밌을 거야! 🔋

3. 앱의 기본 구조 만들기: 우리의 캔버스를 준비하자 🎨

자, 이제 우리의 화상 채팅 앱의 기본 구조를 만들어볼 차례야. 이 과정은 마치 화가가 그림을 그리기 전에 캔버스를 준비하는 것과 비슷해. 우리의 앱이 어떤 모습일지 상상하면서 시작해볼까?

3.1 프로젝트 생성하기 🚀

먼저, 새로운 Flutter 프로젝트를 만들어야 해. 터미널을 열고 다음 명령어를 입력해봐:

flutter create video_chat_app

이 명령어를 실행하면, Flutter가 자동으로 기본적인 프로젝트 구조를 만들어줄 거야. 마치 요리사가 기본 재료를 준비하는 것처럼 말이야! 😋

3.2 메인 화면 구성하기 📱

이제 우리 앱의 메인 화면을 만들어볼 거야. lib/main.dart 파일을 열고, 다음과 같이 코드를 작성해보자:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Chat App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Chat App'),
      ),
      body: Center(
        child: Text('Welcome to Video Chat App!'),
      ),
    );
  }
}

이 코드는 우리 앱의 기본 구조를 만들어줘. MaterialApp은 앱의 전체적인 테마와 라우팅을 담당하고, Scaffold는 기본적인 앱 구조(앱바, 본문 등)를 제공해.

3.3 화면 전환 구현하기 🔄

화상 채팅 앱에는 보통 여러 화면이 필요해. 예를 들면:

• 로그인 화면
• 연락처 목록 화면
• 통화 화면

이 화면들 사이를 전환할 수 있도록 만들어보자. 먼저, 각 화면을 위한 위젯을 만들어볼게:

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login')),
      body: Center(child: Text('Login Page')),
    );
  }
}

class ContactsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Contacts')),
      body: Center(child: Text('Contacts Page')),
    );
  }
}

class CallPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Call')),
      body: Center(child: Text('Call Page')),
    );
  }
}

이제 이 화면들 사이를 전환할 수 있도록 Navigator를 사용해보자:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Video Chat App')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text('Login'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => LoginPage()),
                );
              },
            ),
            ElevatedButton(
              child: Text('Contacts'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => ContactsPage()),
                );
              },
            ),
            ElevatedButton(
              child: Text('Call'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => CallPage()),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

이렇게 하면 각 버튼을 눌렀을 때 해당 화면으로 이동할 수 있어. 마치 집 안의 여러 방을 돌아다니는 것처럼 말이야! 🏠

3.4 상태 관리 준비하기 📊

화상 채팅 앱은 실시간으로 변하는 많은 데이터를 다뤄야 해. 예를 들면, 현재 접속 중인 사용자 목록, 통화 상태 등이 있지. 이런 데이터를 효율적으로 관리하기 위해 상태 관리 솔루션을 사용할 거야.

Flutter에서는 여러 가지 상태 관리 솔루션이 있어. 그 중에서 우리는 간단하면서도 강력한 Provider를 사용해볼 거야.

먼저, pubspec.yaml 파일에 provider 패키지를 추가해:

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

그리고 터미널에서 다음 명령어를 실행해 패키지를 설치해:

flutter pub get

이제 간단한 상태 모델을 만들어보자:

import 'package:flutter/foundation.dart';

class AppState with ChangeNotifier {
  bool _isLoggedIn = false;
  List<String> _contacts = [];

  bool get isLoggedIn => _isLoggedIn;
  List<String> get contacts => _contacts;

  void login() {
    _isLoggedIn = true;
    notifyListeners();
  }

  void logout() {
    _isLoggedIn = false;
    notifyListeners();
  }

  void addContact(String contact) {
    _contacts.add(contact);
    notifyListeners();
  }
}

이 AppState 클래스는 로그인 상태와 연락처 목록을 관리해. notifyListeners() 메서드를 호출하면 이 상태를 사용하는 모든 위젯들에게 변경 사항을 알려줘.

이제 이 상태 모델을 앱 전체에서 사용할 수 있도록 설정해보자:

import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => AppState(),
      child: MyApp(),
    ),
  );
}

이렇게 하면 앱의 어느 곳에서든 Provider.of<AppState>(context)를 통해 AppState에 접근할 수 있어. 마치 앱 전체에 걸쳐 있는 거대한 데이터 저장소를 가진 것과 같지!

자, 이렇게 해서 우리 앱의 기본 구조가 완성됐어! 🎉 지금은 각 페이지가 단순한 텍스트만 보여주고 있지만, 이제 이 구조 위에 실제 기능들을 하나씩 추가해나갈 거야.

다음 섹션에서는 WebRTC를 이용해 실제 화상 통화 기능을 구현해볼 거야. 정말 신나지 않니? 우리가 만든 앱으로 실제 화상 통화를 할 수 있다니, 생각만 해도 설레!

여기까지 오느라 수고 많았어. 잠깐 휴식을 취하고 다음 단계를 준비하자. 우리의 앱이 점점 더 멋져지고 있어! 💪

4. WebRTC 구현: 실시간 통신의 마법을 부려보자 🧙‍♂️

자, 이제 우리 앱의 핵심인 WebRTC를 구현할 차례야! 이 부분이 조금 복잡할 수 있지만, 천천히 하 나씩 따라오면 충분히 할 수 있어. 마치 퍼즐을 맞추는 것처럼, 조각을 하나씩 맞춰나가 보자!

4.1 WebRTC 연결 설정하기 🔌

먼저, WebRTC 연결을 설정하는 클래스를 만들어볼 거야. 이 클래스는 피어 연결을 관리하고, 미디어 스트림을 처리할 거야.

import 'package:flutter_webrtc/flutter_webrtc.dart';

class WebRTCConnection {
  RTCPeerConnection? _peerConnection;
  MediaStream? _localStream;
  MediaStream? _remoteStream;

  Future<void> initializePeerConnection() async {
    _peerConnection = await createPeerConnection({
      'iceServers': [
        {'urls': 'stun:stun.l.google.com:19302'},
      ]
    });

    _peerConnection!.onIceCandidate = (RTCIceCandidate candidate) {
      // 여기서 ICE candidate를 시그널링 서버로 보내야 해
    };

    _peerConnection!.onAddStream = (MediaStream stream) {
      _remoteStream = stream;
      // 여기서 UI를 업데이트해서 원격 비디오를 표시해야 해
    };
  }

  Future<void> createOffer() async {
    RTCSessionDescription offer = await _peerConnection!.createOffer();
    await _peerConnection!.setLocalDescription(offer);
    // 여기서 offer를 시그널링 서버로 보내야 해
  }

  Future<void> createAnswer(RTCSessionDescription offer) async {
    await _peerConnection!.setRemoteDescription(offer);
    RTCSessionDescription answer = await _peerConnection!.createAnswer();
    await _peerConnection!.setLocalDescription(answer);
    // 여기서 answer를 시그널링 서버로 보내야 해
  }

  Future<void> addIceCandidate(RTCIceCandidate candidate) async {
    await _peerConnection!.addCandidate(candidate);
  }

  Future<void> getUserMedia() async {
    final Map<String, dynamic> constraints = {
      'audio': true,
      'video': {
        'facingMode': 'user',
      },
    };

    _localStream = await navigator.mediaDevices.getUserMedia(constraints);
    _localStream!.getTracks().forEach((track) {
      _peerConnection!.addTrack(track, _localStream!);
    });

    // 여기서 UI를 업데이트해서 로컬 비디오를 표시해야 해
  }

  void dispose() {
    _localStream?.dispose();
    _remoteStream?.dispose();
    _peerConnection?.dispose();
  }
}

이 WebRTCConnection 클래스는 WebRTC 연결의 전체 생명주기를 관리해. 피어 연결 초기화, 오퍼/앤서 생성, ICE 후보 추가, 그리고 미디어 스트림 처리까지 모두 담당하지.

4.2 시그널링 서버 연결하기 📡

WebRTC는 피어 간 직접 통신을 하지만, 초기 연결을 설정하기 위해서는 시그널링 서버가 필요해. 여기서는 간단히 웹소켓을 사용해 시그널링 서버와 통신하는 방법을 보여줄게.

import 'package:web_socket_channel/web_socket_channel.dart';
import 'dart:convert';

class SignalingService {
  WebSocketChannel? _channel;
  Function(Map<String, dynamic>)? onMessage;

  void connect(String url) {
    _channel = WebSocketChannel.connect(Uri.parse(url));
    _channel!.stream.listen((message) {
      final data = jsonDecode(message);
      if (onMessage != null) {
        onMessage!(data);
      }
    });
  }

  void sendMessage(Map<String, dynamic> message) {
    if (_channel != null) {
      _channel!.sink.add(jsonEncode(message));
    }
  }

  void close() {
    _channel?.sink.close();
  }
}

이 SignalingService 클래스는 웹소켓을 통해 시그널링 서버와 통신해. 메시지를 주고받을 수 있고, 받은 메시지를 처리할 콜백 함수도 설정할 수 있어.

4.3 화상 통화 UI 구현하기 📺

이제 실제로 화상 통화를 할 수 있는 UI를 만들어보자. CallPage 위젯을 다음과 같이 수정해볼게:

import 'package:flutter_webrtc/flutter_webrtc.dart';

class CallPage extends StatefulWidget {
  @override
  _CallPageState createState() => _CallPageState();
}

class _CallPageState extends State<CallPage> {
  final _localRenderer = RTCVideoRenderer();
  final _remoteRenderer = RTCVideoRenderer();
  WebRTCConnection? _webRTCConnection;
  SignalingService? _signalingService;

  @override
  void initState() {
    super.initState();
    initRenderers();
    _webRTCConnection = WebRTCConnection();
    _signalingService = SignalingService();
    _signalingService!.onMessage = handleSignalingMessage;
    _signalingService!.connect('wss://your-signaling-server.com');
  }

  Future<void> initRenderers() async {
    await _localRenderer.initialize();
    await _remoteRenderer.initialize();
  }

  void handleSignalingMessage(Map<String, dynamic> message) {
    // 여기서 시그널링 메시지를 처리해야 해
    // 예: offer, answer, ice candidate 등
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Video Call')),
      body: OrientationBuilder(
        builder: (context, orientation) {
          return Container(
            child: Stack(
              children: <Widget>[
                Positioned(
                  left: 0.0,
                  right: 0.0,
                  top: 0.0,
                  bottom: 0.0,
                  child: Container(
                    margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height,
                    child: RTCVideoView(_remoteRenderer),
                    decoration: BoxDecoration(color: Colors.black54),
                  ),
                ),
                Positioned(
                  left: 20.0,
                  top: 20.0,
                  child: Container(
                    width: orientation == Orientation.portrait ? 90.0 : 120.0,
                    height: orientation == Orientation.portrait ? 120.0 : 90.0,
                    child: RTCVideoView(_localRenderer, mirror: true),
                    decoration: BoxDecoration(color: Colors.black54),
                  ),
                ),
              ],
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 여기서 통화를 시작하거나 종료할 수 있어
        },
        child: Icon(Icons.call),
      ),
    );
  }

  @override
  void dispose() {
    _localRenderer.dispose();
    _remoteRenderer.dispose();
    _webRTCConnection?.dispose();
    _signalingService?.close();
    super.dispose();
  }
}

이 CallPage 위젯은 로컬 비디오와 원격 비디오를 표시하고, WebRTC 연결과 시그널링 서비스를 관리해. 화면 방향이 바뀌어도 적절하게 대응할 수 있도록 OrientationBuilder를 사용했어.

4.4 통화 로직 구현하기 📞

마지막으로, 실제 통화를 시작하고 관리하는 로직을 구현해보자. 이 부분은 CallPage 위젯의 _CallPageState 클래스에 추가할 거야.

Future<void> startCall() async {
  await _webRTCConnection!.initializePeerConnection();
  await _webRTCConnection!.getUserMedia();
  setState(() {
    _localRenderer.srcObject = _webRTCConnection!._localStream;
  });
  await _webRTCConnection!.createOffer();
}

void handleSignalingMessage(Map<String, dynamic> message) {
  switch (message['type']) {
    case 'offer':
      _webRTCConnection!.createAnswer(RTCSessionDescription(
        message['sdp'],
        message['type'],
      ));
      break;
    case 'answer':
      _webRTCConnection!._peerConnection!.setRemoteDescription(
        RTCSessionDescription(
          message['sdp'],
          message['type'],
        ),
      );
      break;
    case 'candidate':
      _webRTCConnection!.addIceCandidate(
        RTCIceCandidate(
          message['candidate'],
          message['sdpMid'],
          message['sdpMLineIndex'],
        ),
      );
      break;
  }
}

이제 FloatingActionButton의 onPressed 콜백에서 startCall() 메서드를 호출하면 통화를 시작할 수 있어!

와우! 이제 우리는 완전한 WebRTC 기반의 화상 채팅 앱을 만들었어! 🎉 물론 이 코드는 기본적인 구조만을 보여주는 거야. 실제 앱에서는 에러 처리, 연결 상태 관리, UI 개선 등 더 많은 작업이 필요할 거야.

하지만 이 정도면 충분히 멋진 시작이야! 이제 너도 WebRTC의 기본을 이해했고, 화상 채팅 앱을 만들 수 있게 됐어. 정말 대단해! 👏

다음 단계에서는 이 앱을 더 개선하고 실제 사용 가능한 수준으로 만들어볼 거야. 예를 들면, 사용자 인증, 채팅 기능 추가, UI/UX 개선 등이 있을 수 있지. 계속해서 앱을 발전시켜 나가보자!

자, 여기까지 정말 수고 많았어! 🌟 이제 너는 WebRTC를 이용한 화상 채팅 앱의 기본을 완전히 마스터했어. 이 지식을 바탕으로 더 멋진 앱을 만들어 나갈 수 있을 거야. 화이팅! 💪

5. 마무리 및 다음 단계 🎬

축하해! 🎉 우리는 지금까지 Flutter와 WebRTC를 이용해 기본적인 화상 채팅 앱을 만들어봤어. 정말 대단한 여정이었지? 이제 너는 실시간 통신 앱 개발의 기초를 완전히 마스터했어!

5.1 우리가 배운 것 📚

• Flutter 프로젝트 설정 및 기본 구조 만들기
• WebRTC의 기본 개념과 동작 원리
• 시그널링 서버와의 통신 방법
• 피어 연결 설정 및 관리
• 로컬 및 원격 비디오 스트림 처리
• 기본적인 화상 통화 UI 구현

5.2 앱 개선을 위한 다음 단계 🚀

물론, 우리가 만든 앱은 아직 완벽하지 않아. 실제 프로덕션 레벨의 앱을 만들기 위해서는 더 많은 작업이 필요해. 다음은 앱을 더 개선하기 위한 몇 가지 아이디어야:

1. 사용자 인증: 로그인/회원가입 기능을 추가해 사용자를 식별하고 관리하자.
2. 연락처 관리: 사용자가 연락처를 추가하고 관리할 수 있는 기능을 만들어보자.
3. 채팅 기능: 텍스트 채팅 기능을 추가해 더 풍부한 커뮤니케이션을 가능하게 하자.
4. 통화 품질 개선: 네트워크 상태에 따라 비디오 품질을 조절하는 기능을 추가해보자.
5. 화면 공유: 사용자가 자신의 화면을 공유할 수 있는 기능을 추가해보자.
6. 푸시 알림: 백그라운드에서도 통화를 받을 수 있도록 푸시 알림을 구현해보자.
7. UI/UX 개선: 더 아름답고 사용하기 쉬운 인터페이스를 디자인해보자.
8. 보안 강화: 엔드-투-엔드 암호화를 구현해 통신의 보안을 강화해보자.
9. 다자간 통화: 여러 명이 동시에 참여할 수 있는 그룹 통화 기능을 추가해보자.
10. 녹화 기능: 사용자가 통화를 녹화할 수 있는 기능을 추가해보자.

5.3 마지막 조언 🌟

앱 개발은 끝없는 여정이야. 항상 새로운 기술과 트렌드가 나오고 있지. 그러니 계속해서 학습하고 실험하는 것을 두려워하지 마. 그리고 가장 중요한 건, 사용자의 피드백을 경청하는 거야. 사용자들이 실제로 어떤 기능을 원하는지, 어떤 점을 불편해하는지 파악하고 그에 맞춰 앱을 개선해 나가는 게 중요해.

또한, 개발 과정에서 어려움을 겪는다면 주저하지 말고 도움을 요청해. 개발자 커뮤니티나 재능넷 같은 플랫폼을 활용해 전문가의 조언을 구하는 것도 좋은 방법이야.

자, 이제 너의 앱을 세상에 선보일 준비가 됐어! 🚀 너의 창의력과 열정으로 만든 앱이 많은 사람들에게 사랑받길 바라. 앞으로의 개발 여정에 행운이 함께하기를!

화상 채팅 앱 개발의 세계로 뛰어든 너의 용기에 박수를 보내! 👏 이제 너는 실시간 통신의 마법사가 됐어. 이 경험을 바탕으로 더 멋진 프로젝트들을 만들어나갈 수 있을 거야. 항상 호기심을 갖고, 새로운 도전을 즐기면서, 개발의 즐거움을 느껴보길 바라!

그럼, 다음 프로젝트에서 또 만나자! Happy coding! 😊👨‍💻👩‍💻