Flutter Log | Toy Project | 윷놀이 앱 만들기

Flutter 학습하면서 만들어 본 윷놀이 앱에 관한 페이지입니다.

Play Yut

Toy Project Play Yut

윷놀이 앱을 만들어 보았다.

만들게 된 배경

강의에서 주사위 이미지를 뛰워주고 버튼을 누르면 다른 이미지로 바꿔주는 앱을 플러터를 이용해 만들어보았다.

주사위 던지기 앱

사용한 기술

• StatefulWidget

스테이트풀 위젯을 상속받아 변수값에 따라 다른 이미지를 동적으로 띄워줄 수 있는 위젯을 만들었다.

• setState

React에서 사용해 본적이 있어 익숙한 setState 메서드를 이용해서 변경된 변수에 따라 이미지를 다시 불러와 띄워주도록 하였다.

• Dart:Math

math 라이브러리의 random 메서드를 이용해 난수를 만들었다. 이를 이용해서 무작위로 주사위를 띄우는 로직을 만들었다.

• BoxDecoration & LinearGradient

BoxDecoration과 LinearGradient를 이용해서 단색에서 벗어나 그라디언트 효과를 주는 배경색을 지정하였다.

윷놀이 설계 고민

위 기술을 간단히 응용하여 윷을 던지는 앱을 만든다면 2가지 방법이 있을 수 있다.

1) 6개의 이미지 (도, 개, 걸, 윷, 모, 백도)를 이용한다.

 

이 경우의 장점은 아래와 같다.

1. 사진을 선택할 때 연산이 난수 하나만 고르는 간단한 로직만 있으면 된다.

 

이 경우의 단점은 아래와 같다.

1. 이미지 리소스 수가 6개이므로 상대적으로 앱의 용량이 커진다.

2. 반복적으로 같은 이미지가 보여지기 때문에 앱이 많이 단순해 보인다.

3. 역시 반복적인 이미지 사용으로 보는 재미가 없어진다. 

2) 3개의 윷 이미지(앞면, 뒷면, 뒤로 가기 뒷면)로 4개의 윷을 조합해 보여준다.

 

이 경우의 장점은 아래와 같다.

1. 이미지가 윷을 던질때마다 다르기 때문에 실제 윷을 던지는 효과를 줄 수 있다. (이런 효과는 실제 앱 사용에 긍정적 영향을 미칠 것으로 보인다.)

2. 이미지 리소스 수가 6개에서 3개로 줄어 앱의 용량을 줄일 수 있다.

3. 다양한 규칙을 추가할 수 있다. 예) 윷과 바둑돌 2개 조합

 

이 경우의 단점은 아래와 같다.

1. 구현 로직이 복잡해 진다.

- 윷을 한 번 전지면 최소 4번의 연산이 필요하다.

- 뒤로 가기 도는 한 번만 나올 수 있으므로 매번 뒤로가기 도가 포함됐었는지 판단하는 로직이 필요하다.

선택 : 3개의 윷 이미지

3개의 윷 이미지를 이용한 앱 개발을 선택했다. 선택한 이유는.

1. 앱의 크기는 할 수 있다면 작게 만드는 게 좋다고 생각한다. 왜냐하면 차후에 다양한 기능을 추가하면서 용량이 늘어날 수 있기 때문이다.

2. 조합형이기 때문에 추후 다양한 규칙 및 기능을 추가하기 용이하기 때문이다.

윷 던지기 로직

윷은 총 3가지가 있다. 앞면, 뒷면 그리고 검은색이 그려진 뒷면

백 도 분별하기

앞면은 0, 뒷면은 1 그리고 검은색 뒷면은 4의 값을 주었다. 여태까지 나왔던 값들의 합을 구해서 4가 넘지 않을 경우엔 계속 3개 중에서 고르고, 4가 넘을 경우엔 나머지 두 개 중에서 고르는 로직을 세웠다. 0, 1, 2 세 정수 중 2가 나오면 가중치 4를 더해주고, 나머지 값들은 자체 값을 더해주었다.

4가지 종류 기억하기

리스트를 만들어 넣고, 0, 1, 2 나오는 값들을 순차적으로 넣어(대치해) 주었다. 4번의 연산이 끝나고 리스트의 값을 하나씩 꺼내면 각 자리에 알맞은 윷을 찾을 수 있다.

완성

앱 하나를 따라 만들고 바로 응용해서 만들어서 그런지 생각보다 빨리 완성되었다.

Play Yut 앱

어려웠던 점

윷 이미지를 Column 위젯 내의 Row 위젯에 놓았는데 이 녀석들이 가운데로 가지 않고 왼쪽에 치우 처져 있던 문제가 있었다.

해결방법

Column 객체의 crossAxisAligment에서 CrossAxisAlignment.center 설정을 해주면 가로폭이 Row가 사용하는 가로폭으로 한정된다.

느낀 점

역시 레이아웃 잡는 훈련을 많이 해야겠다. 레이아웃! 레이아웃!

이미지 소싱

배경이미지는 pngtree라는 서비스를 이용했다. 몇몇 이미지는 무료로 사용가능한 줄 알았는데, 하루에 딱 하나 무료이다. 그래서 윷은 직접 그렸다.

Millions of PNG Images, Backgrounds and Vectors for Free Download | Pngtree

소스코드

📁 Study > Flutter > play_yut에서 소스코드를 확인할 수 있다.

Reference

본 포스팅의 내용은 수강 중인 강의 "Flutter & Dart - The Complete Guide [2024 Edition]"를 배우고 참고하여 만들었다.