개요
이 프로젝트의 프로토타입을 python 을 이용해 완성시킨 후 kotlin 언어를 이용한 Android 앱 개발 공부를 시작했다.
그리고 마침내 enphago 프로젝트의 최종 목표인 모바일 앱 이식의 첫번째 발걸음을 내딛을 수 있게 되었다.
첫 날은 욕심내지 않고 어플의 대략적인 구조와 UI 를 머릿속으로 구상한 후 이를 Android Studio 내에서 구현하는 것을 목표로 잡았다. 그런데 욕심내지 않았던 것 치고는 그래도 꽤 시간이 걸렸다. 안드로이드가 아니더라도 UI 작업이라는 것은 아무래도 많이 해보는거 밖에는 답이 없는 것 같다.
내부 기능을 신경쓰지 않고 겉모습과 구성을 정함으로써 어느정도 어플의 개요와 밑바탕이 잡혔다.
스플래쉬 이미지
우선 첫번째로 어플을 실행하면 오프닝 화면처럼 스플래쉬 이미지 를 전체화면 으로 띄우고 싶었다. 우선 이 스플래쉬 이미지는 아래와 같이 만들었다.
앱 테마 자체를 NoActionBar 로 하여 액션 바를 지우고 추가 소스코드를 해당 액티비티 에 작성하여 상단 바를 숨겼다.
이 화면은 앱 최초 실행 시 단어 데이터 를 로드하기 위한 로딩 페이지로 쓰이며 그 이후에는 2초 뒤에 자동으로 메인 화면으로 넘어가기 위해 거치는 오프닝 용도이다.
메인 화면
메인 화면은 4가지 버튼과 1개의 이미지 구성으로 다음과 같이 제작했다.
메인 화면을 만들고나니 너무 허전한 것 같아 이것저것 효과들을 추가해봤다.
우선 drawable 에 색상 xml 을 작성하고 액티비티에 애니메이션 코드를 삽입하여
배경을 전체적으로 그라데이션이 움직이는 애니메이션 형태로 만들었다.
또한 엔파고의 로고 이미지의 rotation 값을 thread 를 통해 지속적으로 바꿔주며
움직이게끔 하였다.
나머지는 4가지 버튼인데 이 앱의 대략적인 기능을 유추할 수 있다.
게임 화면
실제로 게임이 진행되는 방식은 enphago 와 채팅을 하는 듯한 형식으로 구현할 계획이다.
유저 레이아웃
Enphago 레이아웃
실제 게임 화면
실제 게임 화면은 어느 정도 기능 구현이 완료된 후 추가한 사진이다.
채팅방은 크게 툴바 와 리사이클러뷰 로 구현하였다. 리사이클러뷰의 holder 를 2개 만들어 유저의 채팅과 엔파고의 채팅을 구분하였다.
상단에는 툴바 를 구현하고 좌측에는 도움말, 우측에는 항복 버튼을 넣고 중앙에는 턴 수 진행 상황을 표시하도록 하였다.
게임 설명
게임 설명 화면에는 enphago 의 기능과 게임 규칙, 버전 정보 등등을 알차게 넣었다.
또한 오픈소스로 진행하는 만큼 github 레퍼지토리 주소도 넣었다.
배경은 메인화면과 동일하게 그라데이션 애니메이션을 적용하였다.
전적 기록
전적 기록 화면은 정말 대충 깔끔하게 구현했다. 본래 게임의 승패와 진행 턴 수를 기록하고 나열해서 보여주는 형태도 생각하였으나 부가적인 기능이므로 추후 업데이트 내용으로 넣기로 하고 우선 핵심 기능 구현을 우선하기로 했다.
마찬가지로 배경엔 메인화면에 들어간 그라데이션 애니메이션 효과를 넣었다.
마무리
이렇게 어플의 대략적인 겉모습과 틀을 잡고나니 드디어 프로젝트가 시작됐다는 느낌이다. 또, Kotlin 과 Android 를 배우고 나서 처음으로 도전하는 프로젝트인 만큼 설레기도 한다. 지금은 어플 타이틀 화면만 봐도 뿌듯한 상황이다. 다음에는 게임 화면에 사용자와 enphago 의 대화가 번갈아 등장하게끔 구현하는 것이 목표이다. 이제부터 쉽지만은 않을 것 같지만 기대가 된다.
Github 저장소: https://github.com/yjyoon-dev/enphago-android