[프로젝트] 모이소 : PC 멀티리모콘 앱 개발기 - 2

본선 진출

 어찌 어찌해서 본선 진출에 성공했다. 이 대회가 좋은 것이라면 본선 진출, 결선 진출할 때마다 개발 지원금을 받게 된다는 것이다. 결선은 얼마인지 모르겠으나 본선 진출자들은 팀당 30만 원씩 받게 되었다. 이 돈은 이후에 초밥 회식으로 사용될 예정이다.

 

 본선부터는 본격적으로 개발을 시작했다. 그런데 본선 진출자 발표일로부터 과제 제출일까지 불과 2주밖에 시간이 없었기에 어느정도 퀄리티로 앱을 완성해야 할지 가늠이 안 잡혔다. 우선 서버 개발보단 핵심 기능인 PC를 원격으로 조종하는 기능부터 완성하기로 했다.

 

---

UI 시안

 UI 프로토타입, 정확히는 와이어프레임 수준의 UI가 디자인되었다. 이 부분은 비전공자인 팀원 2명이 진행하였고 생각했던 것보다 잘 만들었다는 생각이 들었다.

 상세한 색상, 디자인은 아니더라도 버튼의 위치, 어떤 레이아웃 등을 사용해야할지가 정해졌고 나머지는 우선 시간이 없으므로 클라이언트 앱을 개발하는 나의 재량에 맡기기로 했다.

 

---

안드로이드 앱 개발 (소켓 클라이언트)

1. UI

 우선적으로 시안이 나온대로 UI부터 제작하기 시작했고 테마 색깔은 내가 좋아하는 파랑 계열의 색상들을 주로 사용했다.

 음.... 다른 기타 상업용 앱들에 비해 디자인 퀄이 떨어지는 것은 어쩔 수 없는 것 같다. 팀 내에 디자이너가 따로 있는 것도 아니라서.... 그나마 이런 팀 프로젝트를 몇 번 진행해봤던 경험을 살려서 최대한 깔끔하게 보이도록 만들려고 노력했다.

 UI 구현 시 집중했던 부분은 MVVM 패턴의 사용, 즉 제트팩 라이브러리의 ViewModel과 Databinding을 사용하는 것이었다. 개념은 알고 있었으나 직접 적용해본 적이 없었기에 이번 기회에 사용해보자 해서 그룹 리스트, 키보드 리스트 등을 보여주는 RecyclerView를 사용할 때 적용하였다.

 

2. 키보드 커스텀

 해당 기능은 PC 리모트 컨트롤 때부터 기획하였으나 완성하지 못했었다. 쉽게 말해 드래그 앤 드롭 방식으로 키보드 버튼을 끌어와 배치 후 사용자의 편의대로 사용할 수 있게 한다는 것이다. 

 우선 드래그앤드롭으로 버튼들을 끌 수 있게 구현을 하였고 해당 버튼들의 위치는 로컬 DB에 생성된 커스텀 키보드 별로 저장해놓았다. 그리고 버튼들을 삭제하는 것은 역시나 드래그 앤 드롭으로 휴지통 모양의 Floating Action button에 끌어다 놓으면 자동으로 삭제되게 하였다.

로컬 DB의 Relational 모델

커스텀 화면

 

 

3. 소켓 통신

 UI를 만들고, 핵심적인 기능인 PC와의 소켓 통신을 구현해야했다. 기존의 'PC 리모트 컨트롤' 앱을 개발할 때 만들어 놓은 기반이 있었기에 구현 자체는 크게 어렵지 않았고 다만 소켓 통신을 담당하는 모듈을 만드는 데 집중했다. 그리고 무엇보다 소켓 통신을 할 때에는 PC 앱과의 프로토콜을 짜는 것이 핵심적인 과제였다. 

 

 마우스, 키보드를 제어할 때 어떤 메시지를 주고 받아야할지도 정해야 했지만 가장 중요한 것은 양방향의 연결 유지였다. 소켓 통신이라는 것이 서버, 클라이언트 둘 중 어느 한 곳이 먼저 맘대로 종료해버리면 다른 한쪽에선 Exception이 발생하기 마련이다. 때문에 둘 중 어느 하나가 연결을 종료하기 전 무조건 상대방에게 연결 종료를 알리는 메시지를 보내게 하였고 특히나 클라이언트는 따로 스레드를 생성해서 항상 종료 신호를 받을 수 있게 대기시켜놓았다.

소켓 통신 관련 문서

 

---

PC 앱 개발 (소켓 서버)

 1. UI

 PC 앱은 인텔리 J에서 자바를 이용하여 개발했다. 어차피 PC앱은 신호를 수신하고 처리하기만 하면 되기 때문에 UI에는 크게 신경쓰지 않고 최소한의 정보만 표시하도록 했다. 

 

2. 소켓 통신

 기존의 'PC 리모트 컨트롤'의 PC앱과 다른 점이라면 '다수의 사용자가 동시에 접속' 해야하기에 멀티 스레드로 구현을 해야 한다는 점이다. 우선 무분별하게 사용자들이 접속을 하게 되면 성능에 악영향을 주기 때문에 최대 접속 가능 수는 20명으로 제한했고 그에 따라 PC앱의 최대 스레드 수도 20개로 제한되었다.

 배열을 이용하여 나름의 '스레드 풀 (Thread Pool)' 을 만들었고 메인 스레드에서 ServerSocket이 연결 요청을 기다리다가 요청이 들어오면 socket을 생성 후 스레드 풀의 스레드에 순차적으로 socket을 넘겨서 신호를 수신하게 하였다.

 

 우려했던 것과 달리 잘 작동하였고 서로 비정상적으로 종료가 되더라도 문제가 생기는 일이 없게 만들어졌다.

음... UI가 너무 후잡하긴 하다..

 

---

제출

 원했던 기능들은 완성을 했고 PPT로 현재까지의 진행경과와 기능들에 대해 설명하고 앞으로의 개발 계획을 적었다. 그리고 데모 영상을 찍는 것으로 마무리했다. 다만 불안한 점은 아직까지 백엔드의 구현과 연동이 하나도 되지 않았다는 점이었다. 하지만 기능적으로 중요한 부분은 마무리했다고 생각하고 제출하였다.

 

 제출 후 약 1주일 반 정도의 시간이 흘렀고 결과를 통보받았다.

응 탈락이야

 결과는 탈락이였다. 이젠 '많은 열정을 보여주신 것에 크게 감사드립니다'라는 멘트에 노이로제 걸릴 것 같다.

 

---

결론

 결선에 진출하기만 하면 수상은 무조건 확정이기에 많이 아쉬웠다. 내심 기대도 하고 있었는데....

 

 탈락 이후 사유에 대해서 나름 고민을 해보았다. 우선 첫 번째는 아이디어가 심사위원들에게 크게 어필하지 못 했다는 점이다. 첫 번째 글에서 얘기했던 아이디어가 갖춰야 할 3가지 요소 중 사실 크게 어필이 가능한 것은 공익성이다. 우린 공익성은 아예 배제했고 편의성인 면에서도 아마 참신하다는 어필을 못 했을 거라고 생각한다.

 두 번째는 상대적인 앱 퀄리티의 부족함이다. 온라인으로 진행되는 대회 특성상 다른 팀들이 어느 정도로 앱을 개발했는지를 알 수가 없다. 다만 확실한 것은 아이디어만 보는 예선에 비해 본선에 진출한 사람들은 분명 실력 있는 경쟁자 들일 것이고 우리는 그에 대해 너무 안일한 개발을 했다는 것이다. 목표했던 기능을 개발하고 시간이 남았지만 이 정도만 해도 되겠지라는 마음에 개발을 더 진행 안 하고 결선 진출하면 해야지라는 생각이 패인이었던 것 같다.

 

 뭐가 어찌됐든 우리보다 더 나은 실력을 가진 사람들이 결선에 진출했다는 점은 변함이 없을 것이다. 수상하지 못했다는 실망이 크게 맴돌았지만 적어도 본선까지 들여온 시간이 헛되지 많은 않도록 적어도 완성은 해서 출시하자는 생각에 개발을 마무리하기로 했다.

 

---

출시

 개발 완성을 앞두고 백엔드는 결국 구현하지 않기로 했다. 사실 크게 필요한 기능은 아니긴 하다. 사용자 입장에선 로그인을 해야하는 과정이 오히려 더 번거로울 수도 있다. 출시를 앞두고 로고의 제작이 필요했다. 이런저런 고민 끝에 하늘색 단색 배경에 'MOISO'라는 글자를 쓰되 중간에 'I'는 리모컨 모양의 아이콘으로 대신하는 것으로 디자인을 하기로 했다. 자고로 원래 로고란 깔끔한 단색 배경에 폰트만 멋들어지게 써도 절반은 간다.

 그렇게 탄생한게 해당 로고다.

M자가 다른 글자들과 크기가 안 맞아서 빈 틈이 생겼는데 손가락 터치 아이콘을 끼워넣었다.

 현재 플레이스토어에 업로드되었다.

 

 그렇게 프로젝트는 마무리 했고 앞으로 유지보수를 계속해나가야겠지만 나름 어찌 됐든 '마무리를 한 프로젝트'라는 점에서 의의를 두고 있다. 그리고 프로젝트를 진행하면서 평소에 공부만 해놓았던 기술들을 적용도 해보았고 실력적인 향상도 있었던 것 같다. 우리를 짓밟고 대신해서 올라간 팀들은 좋은 성적을 거두길 바란다.

 

 

구글 플레이 스토어

Moiso 모이소 - Google Play 앱

 

깃허브

Sky-Titan/Moiso