[회고] 비대면 술자리 플랫폼 "노가리" (WINK X STACK)

# 기간

• 2021년 1학기~ 여름방학

# 시작하며

 군 복학을 마치고 학교로 돌아왔을때 뭔가를 해야겠다는 불안감과 더불어 내가 뭘해야하는지도 몰랐다. 그래서 일단 할 수 있는건 다 해보자라는 생각을 가지고 있었고 "WINK"라는 과동아리에서 조형대분들과 협업을 할 수 있는 좋은 기회를 얻을 수 있었다. 복학 직후라서 그런지 요즘 최신기술의 트랜드도 잘 몰랐고, 또 지금과 같은 개발지식도 가지고 있지 않았다. 그래서 팀내에서 주도적인 위치에있기 보다는 팀장(PM)이 할당해주는 TASK를 성실히 수행하는 것을 목표로 잡았다. 학기와 병행하려니 정말정말 힘들었지만 비대면이었기에 프로젝트에 더 많은 시간을 투자 할 수 있지 않았나 싶었다.

 

# 프로젝트 개요

## 주제 선정

프로젝트의 방향성을 제시하는 '주제'는 정해진게 없었다. 그냥 백지부터 시작해서 우리가 아이디어도 모아가면서 구체화시켜야했다. 그래서 팀원들과 주단위로 회의를하면서 첫번째로는 주제를 선정하고 구체화 해나갔다. 여기서 꽤 신기했던게 그냥 주먹구구식으로 아이디어를 정하는게 아니라 아이디어를 정해가는 과정에도 방법이 있다는걸 알았다. 우리팀은 '코로나와 비대면'라는 키워드를 잡고 각자 생각나는 아이디어를 적었다. 

 내 생각을 미로보드에 구체화시켜나가는 과정을 거쳤다. 신기하게도 내 생각을 정리해나가면서, 코로나가 악영향만을 끼친 것은 아니다라는 생각을 했었다. 내 아이디어는 "비대면으로인해서 사람을 못만나게되고 우울해진다"라는 결론에 도달했다. 

### 데스크 리서치

그 다음회에서는 "데스크 리서치"라는 것을 진행했다. 내가 내린 결론에 대해서 어떻게 해결할 수 있을까라는 해결방도와 더불어서 현재 시장에서는 이러한 것들을 어떻게 해결되고 있는지에 대한 조사였다.

이렇게 큰 틀을 기준으로 나름의 시장을 분석해보았다. 그렇게 우리팀은 온라인 모임 플랫폼을 만들기로 결정했다.

이름이 나와서 앞부분을 조금 잘라냈다

그리고 다시 한번 아이디어 구체화를 위해 생각을 정리하는 시간을 가졌다.

난 오프라인에서의 모임이 온라인으로 이어지면서 재미를 가지게 하기 위해서 생각해보면서, 온라인은 오프라인에서의 오감의 만족을 줄 수는 없다고 생각했고, 오프라인에서만 할 수 있는 컨텐츠를 위해서 구체화시키기 위해서 집중했었다. 그렇게 온라인과 오프라인 두개를 충족시키는 온라인 놀이터를 만들기 위해서 필수적인 요소들에대해 고민했었다.

여튼 이렇게 아이디어가 어느정도 구체화될 무렵, 디자인팀분들이 아이디어어 대한 유저인터뷰를 했다. 온라인모임에 대해서 어떻게 생각하는지와 뭐가 필요할까라는 답을 얻기 위해서였고 이를 바탕으로 "비대면 술게임"에 맞는 컨텐츠를 구체화시키기 위해서 잦은 회의를 가졌다.

## 개발

### 게임 정하기

 개발자의 입장에서 컨텐츠를 제작하는 회의를 참가하게 되니까 항상 "개발의 난이도"를 고려하게 됐다. 사실 이때쯤 현업에서도 정말 많은 마찰이 있고 그래서 소통을 잘하는 개발자 소통을 잘하는 팀원을 강조하는 이유를 알 수 있었다.

 모두들 재미있는 게임을 많이 제시했지만 우리 개발팀은 개발의 난이도와 재미도에 따라서 게임을 나누었고 게임을 추렸다.

특히 노래관련 게임이 재밌을거 같다는거에 모두가 동의했지만 개발 외적으로 저작권과 관련된 이슈도 생각해 보아야 했다. 여튼 세부게임이 정해졌고 디자인팀들은 게임에 맞는 스토리와 플로우를 계속히 만들어 넘겨주었고 우리는 받아서 하나씩 개발을 진행했다. 이 외에도 게임의 부가요소를 위한 작은 요소들이 들어갔는데, 이런게 게임즐기는사람은 정말 소소한 재미겠지만은 개발하는 입장에서는 메인보다 어려웠던것 같다.. 

 

## 내가 맡은 TASK

난 정말 이시기에는 프론트앤드, 백앤드가 정확히 어떤일을 하게 되는지도 몰랐고 그나마 프론트가 쉬울거 같아서 프론트를 한다고 했다. 그렇게 개발 스택은 React(리액트)로 정해졌고 진짜 인프런도보고 유튜브도보고 구글도보고 볼 수 있는거란 있는거 다보면서 리액트 공부했다. 이때 JS도 처음 써봤다.. 사실 너무 의욕만 앞선건 아닌가 싶어 조금 무기력해지기도 했는데, 디자인팀분들이 뽑아오신 결과물을 보면서 이건 정말 열심히 해야겠구나 동기부여를 받았다.

노가리 기본 캐릭터

이런거 하나하나 만드시는데 어떻게 개발을 열심히 안할 수 있었을까..

### 게임 인트로(스토리)

첫번째로 게임이 시작하면 나오는 스토리를 만들었다. 지금 만들라면 금방 만들겠지만 이 당시에는 개발개념이 전무해서 이것도 어려웠다. 특히 글자들 위치 잡아주는거랑 크기다르게하고 이런게 정말 시간을 많이 잡아먹었다. 그래도 여긴 금방 끝냈다.

### 게임 대기실

이렇게 입장대기실을 구현하는 작업이 진짜 제일 오래 걸렸다. 유저들 FLEX로 나오게하는거 게임선택버튼 누르면 게임바뀌고 메인화면에도 바뀌게 하는거 또 느낌표 누르면 게임 상세 내용들 뜨게 하는거 마우스 올리면 호버링되는 것 등등 개발할게 너무도 많았다. 이때 처음으로 "모달"이라는 용어가 존재하는지도 알았고 그 용어를 앎과 동시에 커스텀 모달도 만들었다.

 

### 랭킹

그리고 랭킹창도 만들었는데 저 뱃지보이게 뿌리는거 우리 게임 최대인원은 6명이라 다음창으로 넘어가게 하는거 등등 요구하는 기능들을 하나씩 다 만들었다. 

 

### 벌칙룰렛

저기 룰렛들에 상한안주를 고르면 그 사람이 술래가 되는 게임이다. 게임 로직은 쉬운데 자잘한게 state로 관리하면서 변하게 하는게 어려웠다. 

 

# 결국

 그래도 성공적(?)으로 개발을 끝냈다. 성공적이라는 뜻은 뭐 돌아가면 되는거 아니겠는가! 나름 주어진거 하라는건 다 구현했다. 이쯤 리액트에서 그래도 꽤 많은 것들을 할 수 있게 됐고 무엇보다 할 수 있다는 자신감이 생겼다. 그리고 웹 프론트는 나하고 안맞는다는 것을 깨닫는 순간이었다. 처음에는 개발하는게 눈에 바로바로 보여서 정말 좋았는데, 이 UI하나 처리하고 움직임 하나 처리하기위해서 고생하는 모습에 뭔가 현타(?)가 오면서 내 길은 아니라고 생각이 들었다. 

 깃허브도 처음써보면서 엄청 잘 썼다고는 아니었지만 이런 흐름으로 쓴다는 것을 알게 됐고, 프로젝트 처음부터 모든 과정에 참여하면서 그냥 코드만 치는 것이 아닌, 기획에 단계에 참여해봤기에 어떤식으로 프로젝트가 기획되고 진행되는지 알 수 있었다. 또 팀원들과 협업하면서 협업이 얼마나 어려운것인지 알 수도 있었다. 난 당연히 뭐든 같이하면 좋은건줄 알았는데 같이하기 위해서 테스크를 분배하는 것 또한 일이었다.  

 여튼 팀원 모두가 유기적으로 잘 맞물려 돌아갔기 때문에 프로젝트가 성공적으로 마무리 되어 전시회까지 무사히 끝냈다. 개발적으로 많이 성장하는 원동력이 된 프로젝트임과 동시에 할 수 있다는 자신감을 얻었던  나의 첫 프로젝트라 기억에 많이 남는다.

 

# 깃허브

 

GitHub - ho-jun99/nogari: 노가리

 

깃허브가 잘 정리 돼 있지는 않다..

 

# 추가 

꽤 지난 프로젝트이지만, 미로보드를 참 유용하게 사용했었는데, 한국을 타겟으로 더욱 서비스를 다듬는다는 미로 마케터분에게 이야기를 들었습니다. 혹시 아이디어들을 정리해야할때 적절할 툴이 없다면, 미로를 한번씩 사용해보셨으면 합니다!

모든 팀을 위한 시각 협업 플랫폼 | Miro