[MINI_TETRIS] GITHUB에 배포하기 및 테스트

안녕하세요! 오늘은 제가 Flutter로 만든 미니 테트리스를 GitHub에 배포하고 테스트한 과정을 공유하려 합니다. GitHub Pages를 활용하여 Flutter 프로젝트를 웹에서 실행 가능하도록 설정하는 방법과, 테스트 과정에서 겪었던 이슈 및 해결 방법에 대해 설명드리겠습니다.

1. GitHub를 통한 배포 준비

1-1. GitHub 저장소 생성

먼저, 프로젝트를 배포할 GitHub 저장소를 생성했습니다.

  1. GitHub 계정에 로그인합니다.
  2. 새로운 저장소를 생성하고 이름을 mini_tetris로 설정했습니다.
  3. 저장소를 공개(public)로 설정하여 누구나 접근 가능하게 했습니다.

1-2. Flutter 프로젝트 GitHub에 Push

Flutter 프로젝트를 GitHub 저장소에 업로드하기 위해 다음 단계를 진행했습니다.

  1. Git 초기화 프로젝트 디렉토리에서 git init 명령어를 사용하여 Git을 초기화했습니다.
  2. git init
  3. 파일 추가 및 커밋 모든 프로젝트 파일을 추가하고 커밋했습니다.
  4. git add . git commit -m “Initial commit: Mini Tetris”
  5. GitHub 원격 저장소 연결 생성한 GitHub 저장소를 원격 저장소로 연결했습니다.
  6. git remote add origin https://github.com/yourusername/mini_tetris.git
  7. Push 명령 실행 프로젝트 파일을 GitHub 저장소로 푸시했습니다.
  8. git branch -M main git push -u origin main

2. Flutter 프로젝트를 웹으로 빌드

GitHub Pages를 사용하기 위해 Flutter 프로젝트를 웹으로 빌드해야 했습니다.

  1. Flutter 웹 지원 활성화 Flutter에서 웹을 활성화하기 위해 다음 명령어를 실행했습니다.
  2. flutter config –enable-web
  3. flutter build web
  4. 웹 빌드 실행 Flutter 프로젝트를 웹으로 빌드하기 위해 다음 명령어를 사용했습니다.빌드 완료 후, build/web 디렉토리가 생성되었습니다. 이 디렉토리에는 웹에서 실행 가능한 HTML, CSS, JavaScript 파일이 포함되어 있습니다.
웹빌드 실행시 파일 생성 완료

3. GitHub Pages로 배포

3-1. GitHub Pages 설정

  1. GitHub 저장소로 이동하여 Settings 메뉴를 클릭했습니다.
  2. Pages 섹션에서 다음 설정을 했습니다:
    • Source: main 브랜치를 선택하고, 디렉토리를 /root로 설정.
  3. 저장소에 Push한 build/web 폴더의 내용을 웹 페이지로 배포했습니다.

3-2. 배포 확인

GitHub Pages URL을 통해 웹 브라우저에서 프로젝트가 잘 작동하는지 확인했습니다.

4. 테스트 과정 및 결과

4-1. 테스트 시나리오

다양한 기기와 브라우저에서 정상적으로 동작하는지 확인하기 위해 아래 테스트를 진행했습니다:

  • 데스크톱: Chrome, Firefox, Edge 브라우저에서 테스트.
  • 모바일: Android와 iOS 기본 브라우저에서 UI와 기능 테스트.

4-2. 테스트 결과

  1. 데스크톱 브라우저
    • 모든 기능이 정상 작동.
    • 일부 브라우저에서 화면 해상도가 작을 경우 UI가 잘리는 현상 발견 → CSS를 조정하여 해결.
  2. 모바일 브라우저
    • UI는 정상적으로 표시되었으나, 터치 기반 컨트롤이 부자연스러움 → 터치 이벤트를 추가 개발 계획에 포함.
  3. 성능 테스트
    • GitHub Pages를 사용하여 웹에서 실행할 경우 로드 시간이 다소 길었음. CDN을 활용하거나 파일 최적화를 통해 개선할 수 있을 것으로 판단.

5. 배포 후 개선점

GitHub Pages를 활용해 프로젝트를 성공적으로 배포했지만, 테스트 과정에서 발견된 문제점과 개선점을 기록했습니다.

5-1. 발견된 문제

  1. UI 해상도 문제: 작은 화면에서 일부 요소가 잘리는 현상이 있었습니다.
  2. 모바일 터치 이벤트 부족: 모바일에서 플레이하기 어려운 점이 있었습니다.
  3. 로딩 속도: 초기 로딩 속도가 느리다는 피드백을 받았습니다.

5-2. 개선 계획

  1. 반응형 디자인을 적용하여 다양한 화면 크기에서 UI를 최적화.
  2. 터치 기반 컨트롤을 추가하여 모바일에서도 자연스럽게 플레이 가능하도록 개선.
  3. 빌드 파일 최적화를 통해 로딩 속도를 단축.

6. 마무리

이번 글에서는 Flutter로 개발한 미니 테트리스를 GitHub Pages를 통해 웹에 배포하고 테스트한 과정을 공유했습니다. GitHub Pages는 간단하면서도 무료로 웹 프로젝트를 호스팅할 수 있는 좋은 방법이었습니다.

다음 글에서는 개발 과정에서 발생한 문제점 및 해결 방법, 그리고 추가 개발 예정 기능에 대해 다룰 예정입니다. 앞으로 이 프로젝트를 더욱 발전시켜, 점수 랭킹제와 멀티플레이 기능도 지원할 계획입니다.