[MINI_TETRIS] 개발 시 문제점 및 해결, 추가 개발 예정

안녕하세요! 이번 글에서는 Flutter와 GitHub를 이용해 미니 테트리스 프로젝트를 진행하면서 겪었던 문제점과 이를 해결했던 방법을 공유하고, 앞으로의 추가 개발 계획에 대해 설명하려고 합니다. 프로젝트를 진행하면서 많은 시행착오가 있었지만, 이 과정을 통해 더 많은 것을 배울 수 있었습니다.

1. 개발 과정에서의 주요 문제점과 해결 방법

1-1. Flutter 레이아웃 및 반응형 디자인 문제

문제:

다양한 화면 크기(데스크톱, 모바일)에서 게임 보드와 UI 요소가 잘 맞지 않아 레이아웃이 깨지는 문제가 있었습니다.
모바일 화면에서는 블록 크기와 간격이 이상하게 표시되는 경우가 발생했습니다.

해결:

Flutter의 MediaQuery와 LayoutBuilder를 활용하여 반응형 디자인을 적용했습니다.
화면 크기에 따라 블록 크기와 보드 크기를 동적으로 계산하도록 설정했습니다.

double blockSize(BuildContext context) {
  double screenWidth = MediaQuery.of(context).size.width;
  return screenWidth / 10; // 10칸 기준으로 블록 크기 계산
}

개선 결과:

다양한 화면 크기에서도 UI가 깨지지 않고 잘 동작하도록 수정되었습니다.

1-2. 블록 충돌 감지 로직의 오류

문제:

블록이 다른 블록과 겹치지 말아야 하는데, 충돌 감지가 제대로 작동하지 않아 블록이 서로 겹치는 문제가 발생했습니다.

해결:

충돌 감지 로직을 다시 작성하여 현재 블록의 좌표와 고정된 블록의 좌표를 정확히 비교하도록 수정했습니다.

bool checkCollision(List<List<int>> block) {
  for (var pos in block) {
    int row = pos[0];
    int col = pos[1];
    if (row >= 20 || col < 0 || col >= 10 || board[row][col] == 1) {
      return true;
    }
  }
  return false;
}

개선 결과:

블록이 제대로 충돌을 감지하고 고정되는 동작이 안정적으로 구현되었습니다.

1-3. GitHub Pages 배포 시 로딩 속도 문제

문제:

GitHub Pages에 배포 후, 웹 브라우저에서 초기 로딩 시간이 길다는 피드백이 있었습니다.
특히, Flutter의 기본 빌드 파일 크기가 커서 발생한 문제였습니다.

해결:

빌드 파일 최적화를 위해 다음과 같은 작업을 진행했습니다:
1. Flutter의 –release 옵션을 사용하여 릴리스 빌드로 크기를 줄였습니다.
2. 불필요한 리소스를 제거하고 경량화된 코드로 수정했습니다.

flutter build web --release

개선 결과:

초기 로딩 속도가 눈에 띄게 개선되었습니다.

1-4. 키 입력 처리와 모바일 터치 지원

문제:

데스크톱에서는 키보드 입력이 잘 동작했지만, 모바일 환경에서는 터치 컨트롤이 부자연스러웠습니다.

해결:

GestureDetector 위젯을 사용하여 모바일 환경에서도 직관적인 터치 동작이 가능하도록 수정했습니다.

GestureDetector(
  onPanUpdate: (details) {
    if (details.delta.dx > 0) {
      moveBlock('right');
    } else if (details.delta.dx < 0) {
      moveBlock('left');
    }
  },
  onTap: () {
    rotateBlock();
  },
)

개선 결과:

모바일에서도 블록 이동과 회전이 매끄럽게 이루어졌습니다.

2. 추가 개발 예정 기능

2-1. 점수 랭킹 시스템 구현

구현 계획:
- Firebase Firestore를 활용하여 점수를 저장하고, 다른 사용자들과 점수를 비교할 수 있는 랭킹 시스템을 추가할 계획입니다.
- 게임 종료 시 사용자 점수를 Firebase에 저장하고, 랭킹 리스트를 실시간으로 불러오도록 구현할 예정입니다.

FirebaseFirestore.instance.collection('scores').add({
  'username': playerName,
  'score': playerScore,
  'timestamp': FieldValue.serverTimestamp(),
});

기대 효과:
- 사용자에게 도전 의식을 주고, 더 흥미로운 게임 경험을 제공합니다.

2-2. 멀티플레이 기능 지원

구현 계획:
- WebSocket 또는 Firebase Realtime Database를 사용하여 실시간 멀티플레이 기능을 구현할 예정입니다.
- 두 명 이상의 사용자가 동시에 게임을 즐길 수 있도록 하며, 상대방의 진행 상황이 화면에 표시되도록 설정합니다.
기대 효과:
- 친구나 다른 사용자와 경쟁하며 더 재미있게 게임을 즐길 수 있습니다.

2-3. AI 대결 모드

구현 계획:
- 간단한 AI 알고리즘을 만들어 플레이어가 AI와 대결할 수 있는 모드를 추가할 계획입니다.
- AI는 블록을 최적의 위치에 배치하여 플레이어와 경쟁합니다.
기대 효과:
- 혼자 플레이하는 경우에도 도전 의식을 느끼며 게임을 즐길 수 있습니다.

3. 배운 점 및 느낀 점

이번 프로젝트를 통해 Flutter의 강력한 기능과 GitHub Pages를 활용한 배포 방법을 배울 수 있었습니다. 특히, 문제를 해결하며 Flutter에 대한 이해도가 많이 높아졌습니다. 앞으로 추가 기능들을 구현하며 프로젝트를 더욱 발전시킬 계획입니다.

4. 마무리

Flutter로 미니 테트리스를 개발하며 다양한 문제를 경험하고 이를 해결할 수 있었던 것은 큰 배움이었습니다. 점수 랭킹, 멀티플레이, AI 대결 모드 등 추가 기능들을 하나씩 구현하며 이 프로젝트를 더 완성도 높게 만들어 갈 예정입니다.

이 프로젝트는 단순한 학습용 프로젝트로 시작했지만, 앞으로는 Flutter의 다양한 가능성을 보여줄 수 있는 하나의 사례가 될 수 있기를 기대합니다.