[LOGIN_PROJECT] 개발 시 발생한 문제점 및 해결 방법

로그인 프로젝트를 개발하면서 Flutter, Firebase, GitHub 등 다양한 기술을 사용하며 여러 도전과 문제에 직면했습니다. 이번 포스팅에서는 프로젝트를 진행하며 발생한 주요 문제점과 이를 해결한 방법들을 정리하였습니다. 이 과정이 비슷한 문제를 겪는 다른 개발자들에게 도움이 되길 바랍니다.

---

1. Flutter 관련 문제와 해결 방법

문제 1: flutter doctor에서 경고 메시지

Flutter 설치 후 flutter doctor 명령어를 실행했을 때, Android SDK 관련 경고가 발생:

[!] Android toolchain - develop for Android devices (Android SDK version XX.X.X)
    X Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

해결 방법:

• 명령어 실행:
• flutter doctor –android-licenses
• 표시되는 라이선스를 모두 확인하고 ‘y’를 입력해 동의.
• 설치 후 flutter doctor 명령어를 다시 실행하여 모든 경고가 해결되었는지 확인.

또한, Android Studio의 SDK Manager에서 최신 버전의 Android SDK Platform을 설치하는 것도 권장됩니다. 설치가 완료되면 경고 메시지가 사라지며 프로젝트 환경이 제대로 설정됩니다.

문제 2: Hot Reload가 동작하지 않음

Hot Reload가 예상대로 동작하지 않아, UI 업데이트를 확인하기 위해 앱을 매번 재빌드해야 했음. 이는 주로 프로젝트 구성 파일이 깨졌거나 캐시가 손상된 경우 발생합니다.

해결 방법:

1. IDE에서 Flutter 플러그인이 제대로 설치되었는지 확인.
   • VS Code: Flutter 및 Dart 플러그인을 최신 버전으로 업데이트.
   • Android Studio: Flutter 플러그인 재설치.
2. 프로젝트를 정리하고 다시 빌드:
3. flutter clean flutter pub get
4. 개발 중 디버그 모드를 사용하여 Hot Reload를 활성화.
5. flutter run –debug
6. 드물게, 앱의 main.dart 파일 변경 후 저장하지 않으면 Hot Reload가 작동하지 않을 수 있습니다. 코드 변경 시 반드시 저장 후 테스트하세요.

추가적으로, Hot Reload가 지속적으로 작동하지 않는다면 IDE 로그를 확인하거나 flutter run -v 명령어로 디버그 출력을 확인하여 문제가 되는 부분을 찾아 해결할 수 있습니다.

---

2. Firebase 관련 문제와 해결 방법

문제 1: Firebase 프로젝트 초기화 시 CLI 오류

Firebase CLI를 통해 프로젝트를 초기화하려고 할 때, 다음과 같은 오류가 발생:

Error: Cannot find project ID in Firebase configuration.

해결 방법:

1. Firebase Console에서 프로젝트 설정 확인.
   • 프로젝트 설정 페이지에서 Project ID를 정확히 확인 후, Firebase CLI 명령어를 다시 실행합니다.
   firebase use –add해당 명령어는 Firebase 프로젝트를 로컬 환경에 다시 연결하는 데 유용합니다.
2. google-services.json 또는 GoogleService-Info.plist 파일이 프로젝트의 올바른 위치(/android/app 또는 /ios/Runner)에 배치되었는지 확인.
3. firebase login 명령어로 CLI에 다시 로그인.
4. 프로젝트 디렉토리에서 .firebaserc 파일을 확인하고, 올바른 Firebase 프로젝트 ID가 연결되었는지 검토.

문제 2: Firebase 인증 실패

이메일 인증을 설정한 후 Firebase가 인증 요청을 처리하지 않음. 이 문제는 주로 Firebase 설정이 누락되었거나 초기화가 적절히 이루어지지 않은 경우 발생합니다.

해결 방법:

1. Firebase Authentication에서 이메일/비밀번호 인증 활성화:
   • Firebase Console > Authentication > Sign-in method > Email/Password 활성화.
2. 코드에서 Firebase 초기화 확인:초기화 코드가 누락되면 인증 오류가 발생할 수 있으니 main.dart 파일 상단에 적절히 추가합니다.
3. Firebase.initializeApp();
4. 테스트 환경에서 인증 오류가 발생하면 프로젝트의 규칙을 다음과 같이 임시로 수정:이 규칙은 테스트 목적으로만 사용해야 하며, 프로덕션 환경에서는 보안을 강화해야 합니다.
5. “rules”: { “.read”: “auth != null”, “.write”: “auth != null” }

문제 3: Firestore 데이터베이스 읽기/쓰기 오류

Firestore를 읽거나 쓸 때 권한 오류 발생:

PERMISSION_DENIED: Missing or insufficient permissions.

해결 방법:

1. Firestore 보안 규칙 확인:초기 개발 단계에서는 위와 같은 규칙으로 설정하여 접근 권한 문제를 해결할 수 있습니다.
2. service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if true; } } }
3. 프로덕션 환경에서는 규칙을 강화해 보안 유지:
4. allow read, write: if request.auth != null;
5. 데이터베이스 경로가 정확한지 확인:
   • Firestore의 문서 경로가 코드에서 설정한 경로와 일치하는지 검토.
   • 경로 오타가 권한 오류로 이어질 수 있습니다.
6. Firestore SDK 버전과 Firebase Core 버전이 호환되는지 확인:Firebase SDK 버전 간 충돌은 권한 문제를 초래할 수 있으니 최신 버전으로 유지합니다.
7. dependencies: cloud_firestore: ^4.0.0 firebase_core: ^2.0.0

---

3. GitHub 관련 문제와 해결 방법

문제 1: Commit 후 Push 실패

GitHub에 프로젝트를 푸시하려 할 때, 다음 오류가 발생:

error: failed to push some refs to 'https://github.com/your-repo.git'

해결 방법:

1. 브랜치 충돌 확인:로컬 브랜치와 원격 브랜치 간의 충돌을 해결한 후 다시 푸시합니다. 충돌이 발생했을 경우, 변경된 파일을 비교하고 필요한 수정 사항을 적용합니다. git diff 명령어를 사용하여 충돌 원인을 분석할 수 있습니다.
2. git pull origin main –rebase
3. 강제 푸시:단, 강제 푸시는 협업 프로젝트에서는 신중히 사용해야 합니다. 강제 푸시는 기존 변경 내역을 덮어쓸 수 있으므로 팀과 상의 후 진행하는 것이 중요합니다.
4. git push -f

추가적으로, 푸시 과정에서 네트워크 연결 문제가 발생할 수 있습니다. 이 경우, 인터넷 연결 상태를 확인하거나 다시 로그인한 뒤 git remote 설정을 재확인합니다.

문제 2: GitHub Actions를 이용한 자동 빌드 실패

GitHub Actions로 Flutter 앱을 빌드하려고 할 때, Flutter SDK가 누락되었다는 오류 발생.

해결 방법:

1. flutter-action을 사용해 Workflow 파일 수정:
2. jobs: build: runs-on: ubuntu-latest steps: – uses: actions/checkout@v2 – uses: subosito/flutter-action@v2 with: flutter-version: ‘3.0.0’ – run: flutter pub get – run: flutter build apk
3. Actions 로그를 확인하여 환경 변수 또는 의존성 문제를 분석하고 해결. 로그에서 “missing dependency” 또는 “command not found”와 같은 구체적인 오류 메시지를 확인한 뒤, 관련 종속성을 추가하거나 환경 변수를 수정합니다.

추가적으로, GitHub Actions 워크플로를 재실행할 때 캐시 문제가 발생할 수 있습니다. 이 경우, 다음과 같이 캐시를 무효화하는 코드를 추가합니다:

- name: Clear Flutter Cache
  run: flutter clean

이를 통해 이전 빌드에서 남은 불필요한 데이터를 제거하고 깨끗한 환경에서 빌드가 실행되도록 설정할 수 있습니다.

GitHub Actions를 통한 성공적인 빌드는 로그를 정기적으로 점검하고, 필요한 경우 Actions 마켓플레이스에서 추가 플러그인을 탐색하여 워크플로를 개선하는 것이 중요합니다.

---

4. 개발 중 직면한 추가 오류들

문제 1: Gradle 버전 불일치

Android 빌드 시 Gradle 버전 문제로 빌드 실패:

FAILURE: Build failed with an exception.

해결 방법:

1. 프로젝트의 android/build.gradle 파일에서 Gradle 버전을 Flutter 호환 버전으로 변경.
   • build.gradle 파일 내부의 classpath 및 distributionUrl을 최신 버전으로 업데이트.
   buildscript { dependencies { classpath ‘com.android.tools.build:gradle:7.0.2’ } } distributionUrl=https\://services.gradle.org/distributions/gradle-7.0.2-bin.zip
2. 호환되는 Gradle Wrapper 사용:Gradle 버전을 업데이트한 후 프로젝트를 다시 빌드하여 버전 충돌 문제를 해결합니다.
3. ./gradlew wrapper –gradle-version 7.0.2
4. Android Studio 내에서 File > Project Structure로 이동하여 Gradle 및 SDK 버전을 수동으로 설정할 수도 있습니다. 최신 Gradle 버전과 SDK Platform Tools가 올바르게 설치되었는지 확인합니다.

Gradle 버전 문제는 프로젝트 빌드 환경이 최신 Flutter 및 Android Studio 설정과 호환되지 않을 때 주로 발생합니다. 이를 예방하려면 Flutter 및 Android Studio 업데이트 이후 Gradle 설정을 주기적으로 점검하세요.

문제 2: Flutter와 Firebase 간의 패키지 충돌

Firebase Core와 다른 Firebase 플러그인의 버전이 일치하지 않아 앱 실행 중 오류 발생. 이는 Flutter 및 Firebase 패키지가 비호환 상태일 때 빈번히 나타납니다.

해결 방법:

1. pubspec.yaml에서 Firebase 플러그인 버전 업데이트:Firebase 공식 문서에서 각 플러그인의 호환 가능한 최신 버전을 확인한 후 설정합니다.
2. dependencies: firebase_core: ^2.0.0 firebase_auth: ^4.0.0
3. 이후 패키지 다시 설치:
4. flutter pub upgrade flutter pub get
5. 만약 플러그인 간 종속성 충돌이 해결되지 않는다면, 종속성 그래프를 확인:여기서 충돌하는 패키지를 확인한 후 개별적으로 업데이트하거나 제거합니다.
6. flutter pub deps –style=compact
7. 호환되지 않는 Firebase SDK로 인해 GoogleService-Info.plist 또는 google-services.json이 제대로 로드되지 않을 수 있습니다. 이 경우, Firebase Console에서 최신 파일을 다시 다운로드하여 올바른 경로에 배치합니다.
8. Firebase 및 Flutter CLI를 최신 상태로 유지하는 것이 중요합니다. CLI 업데이트 명령어:
9. dart pub global activate firebase_cli

Flutter와 Firebase는 지속적으로 업데이트되므로, 각 릴리스 노트를 검토하여 호환성을 점검하는 습관을 들이세요.

---

5. 최종 테스트 및 배포 중 발생한 문제

문제 1: 디바이스 간 UI 차이

Android와 iOS에서 UI가 다르게 렌더링되어 불일치가 발생. 특히, 텍스트 크기와 마진, 일부 위젯의 정렬 방식이 서로 달라보이는 문제가 많았습니다.

해결 방법:

1. Material과 Cupertino 위젯을 적절히 사용해 플랫폼에 맞는 디자인 적용.
   • 예를 들어, iOS 스타일의 네비게이션 바를 위해 CupertinoNavigationBar를 사용하고, Android에서는 AppBar를 사용하는 방식으로 구현.
2. 디바이스의 해상도 및 화면 크기를 고려한 반응형 디자인을 적용:
   • MediaQuery를 활용하여 화면 크기에 따라 위젯 크기를 동적으로 조정.
   double screenWidth = MediaQuery.of(context).size.width; double screenHeight = MediaQuery.of(context).size.height;
3. 디버그 모드에서 테스트 후 릴리스 모드에서도 확인:
4. flutter run –release
5. flutter doctor 명령어를 사용하여 사용 중인 Flutter 버전과 관련 패키지의 호환성을 점검.
6. 플랫폼별 차이를 줄이기 위해 flutter_platform_widgets와 같은 라이브러리를 사용하는 것도 권장됩니다.

추가적으로, 특정 위젯의 디자인이 일관되지 않게 렌더링되는 경우, 각 플랫폼에서 실행되는 앱 스크린샷을 비교하면서 개선점을 도출하는 것이 중요합니다.

문제 2: Firebase Hosting에서 이미지 로드 문제

Firebase Hosting에 배포한 웹 애플리케이션에서 이미지 경로 오류가 발생했습니다. 이 문제는 주로 정적 자산의 경로를 잘못 지정하거나 Firebase Hosting의 캐싱 규칙 설정이 잘못되었을 때 발생합니다.

해결 방법:

1. Firebase 프로젝트의 firebase.json 파일에 캐싱 규칙 추가:
2. “headers”: [ { “source”: “**/*.@(jpg|jpeg|gif|png)”, “headers”: [ { “key”: “Cache-Control”, “value”: “max-age=31536000” } ] } ]
3. 이미지 경로가 상대 경로로 설정되어 있는지 확인.
   • 경로 지정 시 오류를 방지하기 위해 이미지 경로를 절대 경로나 동적으로 처리.
   <img src=”/assets/images/sample.png” alt=”Sample Image”>
4. Firebase Hosting의 배포 명령어 실행 후, 호스팅 URL에서 로드되는 이미지를 직접 확인:
5. firebase deploy –only hosting
6. 브라우저의 개발자 도구(F12)를 활용하여 네트워크 요청 및 응답을 점검하고, 캐시 문제가 있는지 확인합니다.
7. 만약 위의 방법으로 해결되지 않을 경우, 로컬에서 Flutter 웹 빌드를 다시 실행한 후 경로와 파일 구조를 재점검:
8. flutter build web

이 외에도, Firebase Hosting에서 제공하는 “미리보기 채널” 기능을 사용하여 변경 사항을 프로덕션 배포 전에 테스트하는 것이 유용합니다.

---

결론

Flutter와 Firebase, GitHub를 활용한 로그인 프로젝트는 초기에는 여러 문제에 부딪혔지만, 이를 해결하면서 많은 것을 배울 수 있었습니다. UI 차이 해결을 위해 반응형 디자인과 플랫폼별 위젯 사용을 학습했으며, Firebase Hosting의 문제를 디버깅하며 웹 배포 프로세스에 대한 이해를 심화할 수 있었습니다. 위에서 소개한 문제와 해결 방법이 비슷한 과정을 겪고 있는 개발자들에게 도움이 되었으면 합니다. 프로젝트를 진행하며 겪었던 경험과 노하우를 블로그를 통해 계속 공유하겠습니다.