서버와 동기화 — Google Calendar API 연동하기

2025. 6. 6. 09:00·Flutter/Flutter 캘린더 앱 만들기
728x90
반응형

Flutter로 만든 캘린더 앱이 진짜 ‘앱’이 되기 위해 필요한 건 클라우드와의 동기화다.

이번 글에서는 Google Calendar API를 사용해 Flutter 앱과 구글 캘린더 간 일정 동기화를 구현하는 흐름을 소개한다.


📌 Google Calendar API란?

Google이 제공하는 공식 캘린더 API로,
캘린더 조회, 일정 생성/삭제, 알림 설정까지 REST 방식으로 조작할 수 있다.

  • 기본 프로토콜: HTTPS REST
  • 인증 방식: OAuth 2.0
  • 사용 예: Google Calendar 앱과 일정 동기화

📦 필요한 패키지

dependencies:
  googleapis: ^13.1.0
  googleapis_auth: ^1.4.0
  http: ^0.13.5

Flutter에서는 직접 API 요청을 보내거나, Google API 패키지를 사용할 수 있다.


🔑 OAuth 2.0 인증 구성

Google Cloud Console에서 OAuth 클라이언트 ID를 발급받아야 한다.

  1. https://console.cloud.google.com 접속
  2. API 및 서비스 → 사용자 인증 정보
  3. OAuth 클라이언트 ID 생성 (앱 타입: Android or iOS)
  4. Redirect URI 등록
// 예시 인증 로직 (googleapis_auth)
final accountCredentials = ServiceAccountCredentials.fromJson(r'''
{
  "private_key_id": "...",
  "private_key": "...",
  "client_email": "...",
  ...
}
''');

final scopes = [CalendarApi.calendarScope];

final authClient = await clientViaServiceAccount(accountCredentials, scopes);
final calendarApi = CalendarApi(authClient);

OAuth 인증이 완료되면 API 사용이 가능해진다.


📅 일정 목록 가져오기

final events = await calendarApi.events.list("primary");

for (var item in events.items!) {
  print("${item.summary} at ${item.start?.dateTime}");
}

구글 캘린더에 등록된 모든 일정을 가져올 수 있다.


➕ 일정 추가하기

final event = Event()
  ..summary = "Flutter 회의"
  ..start = EventDateTime(dateTime: DateTime.now().add(Duration(hours: 2)))
  ..end = EventDateTime(dateTime: DateTime.now().add(Duration(hours: 3)));

await calendarApi.events.insert(event, "primary");

Flutter 앱에서 일정 등록 시, Google Calendar에도 바로 반영된다.


📌 동기화 UX 설계 팁

  • 구글 로그인 → 일정 동기화 버튼으로 흐름 분리
  • Local ↔ Server 충돌 시 시간 기준으로 병합
  • 구글 캘린더의 recurringEventId 활용으로 반복 이벤트도 처리 가능

🧘 마무리하며

Flutter 캘린더 앱이 구글 캘린더와 동기화되는 순간, 그건 단순한 개인 앱을 넘어선 일정 관리 플랫폼이 된다.

로컬을 넘어서, 서버까지 연결된 경험을 Flutter로 완성해보자.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 캘린더 앱 만들기 여정입니다.

728x90
반응형

'Flutter > Flutter 캘린더 앱 만들기' 카테고리의 다른 글

사용자 맞춤 컬러 태그 시스템 구현  (0) 2025.06.07
다크 모드 캘린더 디자인 적용  (0) 2025.06.05
이벤트 반복 설정 구현 — 매주, 매달 반복 어떻게 할까?  (0) 2025.06.04
할 일 완료 체크 및 삭제 기능 추가  (2) 2025.06.03
이벤트 알림 기능 — Flutter Local Notification 활용하기  (0) 2025.06.02
'Flutter/Flutter 캘린더 앱 만들기' 카테고리의 다른 글
  • 사용자 맞춤 컬러 태그 시스템 구현
  • 다크 모드 캘린더 디자인 적용
  • 이벤트 반복 설정 구현 — 매주, 매달 반복 어떻게 할까?
  • 할 일 완료 체크 및 삭제 기능 추가
코드를 걷는 사람
코드를 걷는 사람
devwanderer 님의 블로그 입니다.
  • 코드를 걷는 사람
    터미널 밖으로 나온 개발자
    코드를 걷는 사람
  • 전체
    오늘
    어제
    • 분류 전체보기
      • Flutter
        • Flutter 게시판 앱 만들기
        • Flutter 뉴스 앱 만들기
        • Flutter 메모 앱 만들기
        • Flutter 캘린더 앱 만들기
        • Flutter 날씨 앱 만들기
      • Next.js
      • Ruby On Rails
  • 블로그 메뉴

    • 홈
    • 태그
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    정적사이트
    Nextjs
    flutter개발
    백엔드개발
    감성앱
    Flutter
    UI디자인
    캘린더앱
    rails보안
    RubyOnRails
    메모앱
    flutter기초
    개발블로그
    다크모드
    UIUX
    table_calendar
    북마크기능
    flutter상태관리
    Firebase
    fluttertips
    코드를걷는사람
    openweather
    flutter디자인
    flutterui
    flutter게시판
    ActiveRecord
    모바일앱개발
    날씨앱
    뉴스앱
    flutter앱개발
  • 최근 댓글

  • 최근 글

  • 반응형
    250x250
  • hELLO· Designed By정상우.v4.10.3
코드를 걷는 사람
서버와 동기화 — Google Calendar API 연동하기
상단으로

티스토리툴바