안녕하세요! 오늘은 제가 Flutter로 만든 미니 테트리스를 GitHub에 배포하고 테스트한 과정을 공유하려 합니다. GitHub Pages를 활용하여 Flutter 프로젝트를 웹에서 실행 가능하도록 설정하는 방법과, 테스트 과정에서 겪었던 이슈 및 해결 방법에 대해 설명드리겠습니다.
1. GitHub를 통한 배포 준비
1-1. GitHub 저장소 생성
먼저, 프로젝트를 배포할 GitHub 저장소를 생성했습니다.
- GitHub 계정에 로그인합니다.
- 새로운 저장소를 생성하고 이름을 mini_tetris로 설정했습니다.
- 저장소를 공개(public)로 설정하여 누구나 접근 가능하게 했습니다.
1-2. Flutter 프로젝트 GitHub에 Push
Flutter 프로젝트를 GitHub 저장소에 업로드하기 위해 다음 단계를 진행했습니다.
- Git 초기화 프로젝트 디렉토리에서 git init 명령어를 사용하여 Git을 초기화했습니다.
- git init
- 파일 추가 및 커밋 모든 프로젝트 파일을 추가하고 커밋했습니다.
- git add . git commit -m “Initial commit: Mini Tetris”
- GitHub 원격 저장소 연결 생성한 GitHub 저장소를 원격 저장소로 연결했습니다.
- git remote add origin https://github.com/yourusername/mini_tetris.git
- Push 명령 실행 프로젝트 파일을 GitHub 저장소로 푸시했습니다.
- git branch -M main git push -u origin main
2. Flutter 프로젝트를 웹으로 빌드
GitHub Pages를 사용하기 위해 Flutter 프로젝트를 웹으로 빌드해야 했습니다.
- Flutter 웹 지원 활성화 Flutter에서 웹을 활성화하기 위해 다음 명령어를 실행했습니다.
- flutter config –enable-web
- flutter build web
- 웹 빌드 실행 Flutter 프로젝트를 웹으로 빌드하기 위해 다음 명령어를 사용했습니다.빌드 완료 후, build/web 디렉토리가 생성되었습니다. 이 디렉토리에는 웹에서 실행 가능한 HTML, CSS, JavaScript 파일이 포함되어 있습니다.

3. GitHub Pages로 배포
3-1. GitHub Pages 설정
- GitHub 저장소로 이동하여 Settings 메뉴를 클릭했습니다.
- Pages 섹션에서 다음 설정을 했습니다:
- Source: main 브랜치를 선택하고, 디렉토리를 /root로 설정.
- 저장소에 Push한 build/web 폴더의 내용을 웹 페이지로 배포했습니다.
3-2. 배포 확인
GitHub Pages URL을 통해 웹 브라우저에서 프로젝트가 잘 작동하는지 확인했습니다.

4. 테스트 과정 및 결과
4-1. 테스트 시나리오
다양한 기기와 브라우저에서 정상적으로 동작하는지 확인하기 위해 아래 테스트를 진행했습니다:
- 데스크톱: Chrome, Firefox, Edge 브라우저에서 테스트.
- 모바일: Android와 iOS 기본 브라우저에서 UI와 기능 테스트.
4-2. 테스트 결과
- 데스크톱 브라우저
- 모든 기능이 정상 작동.
- 일부 브라우저에서 화면 해상도가 작을 경우 UI가 잘리는 현상 발견 → CSS를 조정하여 해결.
- 모바일 브라우저
- UI는 정상적으로 표시되었으나, 터치 기반 컨트롤이 부자연스러움 → 터치 이벤트를 추가 개발 계획에 포함.
- 성능 테스트
- GitHub Pages를 사용하여 웹에서 실행할 경우 로드 시간이 다소 길었음. CDN을 활용하거나 파일 최적화를 통해 개선할 수 있을 것으로 판단.
5. 배포 후 개선점
GitHub Pages를 활용해 프로젝트를 성공적으로 배포했지만, 테스트 과정에서 발견된 문제점과 개선점을 기록했습니다.
5-1. 발견된 문제
- UI 해상도 문제: 작은 화면에서 일부 요소가 잘리는 현상이 있었습니다.
- 모바일 터치 이벤트 부족: 모바일에서 플레이하기 어려운 점이 있었습니다.
- 로딩 속도: 초기 로딩 속도가 느리다는 피드백을 받았습니다.
5-2. 개선 계획
- 반응형 디자인을 적용하여 다양한 화면 크기에서 UI를 최적화.
- 터치 기반 컨트롤을 추가하여 모바일에서도 자연스럽게 플레이 가능하도록 개선.
- 빌드 파일 최적화를 통해 로딩 속도를 단축.
6. 마무리
이번 글에서는 Flutter로 개발한 미니 테트리스를 GitHub Pages를 통해 웹에 배포하고 테스트한 과정을 공유했습니다. GitHub Pages는 간단하면서도 무료로 웹 프로젝트를 호스팅할 수 있는 좋은 방법이었습니다.
다음 글에서는 개발 과정에서 발생한 문제점 및 해결 방법, 그리고 추가 개발 예정 기능에 대해 다룰 예정입니다. 앞으로 이 프로젝트를 더욱 발전시켜, 점수 랭킹제와 멀티플레이 기능도 지원할 계획입니다.