[사이드프로젝트] 개발팀 전원이 업무 외에 모여 사이드 프로젝트 한 썰

회고

[사이드프로젝트] 개발팀 전원이 업무 외에 모여 사이드 프로젝트 한 썰

devSoo 2023. 2. 8. 01:08

이번 포스팅은 22년 겨울 개발팀 전원이 업무 외에 사이드프로젝트로 기획부터 디자인까지 모두 다 해본 경험에 대한 회고입니다.

1. 배경

사건은 유난히 바빳던 10월 어느 날에 우연히 개발팀 다 같이 야근을 위해 저녁을 먹으며 시작되었다.

이런 저런 얘기를 나누던 중 모두 회사의 활기도, 개발의 열정도 예전 같지 않다는 고민들이 있었다.

"요즘 일을 너무 기계적으로 하는 것 같아요. 뭔가 재미난 일 없을까요?"
"그럼 일 말고 우리끼리 재밌는 거 기획해서 개발 해볼래요?"

그러던 중 어쩌다 그럼 다같이 재미나게 사이드 프로젝트 한 번 해보자란 얘기를 했는데, 모두 기다렸다는 듯이 너무 재미있겠다며 신나했다. 그렇게 거창한 아이디어나 목표가 아닌 뭔가 재미난 일을 벌리고 싶다 는 순수한 마음으로 즉흥적으로 시작하게 되었다.

그래도 단순히 재미만을 쫓기 위해 모두의 귀중한 시간을 쓸 수 없기 때문에, 이번 프로젝트를 위해 얻고자 하는바, 어떤 목표가 있는 지를 먼저 얘기하는 시간을 가졌다.

공통적으로 나온 얘기는,

개발자의 장점이 무엇인가? 내가 아이디어만 있다면 무에서 유를 창조하는 것 아닌가? 일에 치이다 보니 이런 순수한 창조의 열정을 잊었는데 다시 느끼고 싶다!
요즘 많이 쓴다는 새로운 기술을 써보고 싶은데 당장 서비스에 적용하기에는 무리인 것들이 많다! 요런 기회에 맘껏 써보자!
22년 들어 투자 상황이 안좋아짐과 동시에 회사의 활기가 예전 같지 않다ㅠ 연말 종무식때 회사 구성원들이 우리가 만든 것으로 조금 이나마 웃고 마음이 따뜻해졌으면 좋겠다!

그렇게 프로젝트의 목표도 세웠겠다, 무엇을 하면 좋을 지에 대한 얘기를 본격적으로 하기 시작했고

주 1회 퇴근 후에 은밀하게 모여 기획 회의를 진행했다.

은밀하게 한 이유는, 3번의 목표를 위해 연말에 우리가 만든 것을 짜잔하며 서프라이즈로 보여주고 싶었기 때문이다.

하지만 칼퇴하던 개발팀이 매 주 수요일마다 모여 작당모의(?) 하는 것을 본 사람들은 하나같이 "사이드프로젝트 뭐해요?"

라고 물어봐 우리를 당황케했다.

2. 내용

1) 기획회의

뭔가 일사천리로 진행된 것처럼 보이지만 시작만 하고 무엇을 할 지를 정하는데 굉장히 애를 먹었다.

A개발자: 이왕 개발팀 다 같이 하는거 회사에 도움되는 일을 했으면 좋겠어요!
B개발자: 음...사이드 프로젝트까지 일과 관련된 걸 하고 싶지 않은데요ㅠ

'이왕 개발팀 다같이 하는거 회사에 도움되는 일을 했으면 좋겠다'는 의견도 있었던 반면, '사이드 프로젝트까지 일과 관련되고 싶지 않다' 란 의견까지 각자가 원하는 바는 조금씩 다 달랐다.

그렇게 세 번의 미팅을 아이디어 및 의견 공유만하다 끝이 났는데, 문득 이렇게 가다간 용두사미가 될 수 있겠다는 위기감이 들었다. 지금처럼 사실 '안해도 그만' 인 모임은 순수한 마음이 앞섰던 시점이 지나가면 그 열정이 급격히 떨어지는 경우를 많이 봤기 때문이다.

그래서 우리는 투표로 여러 아이디어 중 하나를 과반수로 골랐고 그것을 먼저 애자일하게 시작한 후에 시간을 보고 나머지 아이디어를 추가하기로 결정했다.

지금 생각해 보면 현명 했던 것 같다. 그렇게 시작하지 않았다면 완벽한 기획에 대한 집착으로 아무 것도 시작할 수 없었을 것 같다.

그리고 사이드프로젝트라도 프로젝트를 이끄는 사람은 필요하다는 생각이 들어 '누가 PM 할 것인지' 에 대한 얘기를 꺼냈는데 아무도 안나서서 그냥 내가 한다고 했다.

나: PM이 필요할 것 같은데 누가 할까요?
나: 그냥 제가 하겠습니다!^^

잠시만 대학교 조별과제 할 때도 조장 누가할 지 내가 물어보고 항상 내가 했던 기억이 있는데 나의 숙명인가...

2) 기획내용

우리가 과반수로 우선 선택한 아이디어는 내가 제안한 연말결산 이 되었다. 즉 1년 간의 데이터를 가지고 개인별 연말 결산 데이터를 시각적으로 보여주는 것이다. 이름도 멋드러지게 술담화 마셔보고서 로 지었다.

여러 레퍼러스 중 배달의 민족 연말결산이 디자인적으로 제일 예뻐서 이것은 참고 컨셉 삼기로 했다.

연말결산이라는 주제도 정했고 디자인 컨셉도 정했다. 이제 어떤 데이터를 보여줄 지만 정하면 된다. 논의 끝에 우리는 아래의 7가지 데이터를 보여주기로 결정했다.

가장 많이 주문 요일
주문한 맛의 순위
가장 많이 주문한 전통주
담화배송 주문 횟수
선물하기 주문 비중
가장 많이 주문한 술 주종(증류주,약청주,과실주,탁주)
주문대비 리뷰한 비중

웨 페이지들은 복잡한 기능이 아닌 단순히 데이터를 보여주는 것이기 때문에 자칫 밋밋할 수 있다는 의견이 나왔다. 그래서 페이지는 무조건 애니메이션을 과다하게(?) 사용해서 동적으로 만들기로 했다. 기존의 사이트가 애니메이션 사용할 일이 그리 많지 않았기 때문에 좋은 경험이 될 것 같았기 때문이다.

그리고 하이라이트 페이지는 따로 있었는데, 그건 바로 "본인이 받은 22년 칭찬 리스트" 이다.

각자가 22년에 받은 모든 칭찬을 긁어 모아 보여주는 페이지를 만들기로 했다.

1월부터 ~ 12월까지 각자가 받은 칭찬을 통해 한 해를 돌아보며 스스로 "잘달려 왔구나, 수고 많았다." 라는

자부심과 감동을 느끼게 해주고 싶었다.

3) 새로운 기술

이번 사이드프로젝트의 또 다른 목표 중 하나는 그동안 써보고 싶었던 새로운 기술들을 마음껏 써보는 것이었다. 그래서 크게 TailWind,SWR, Recoil 세 가지 기술을 이번 프로젝트에서 사용해보았다(프론트 기준).

3-1) TailWind

출처: https://2022.stateofcss.com/en-US/css-frameworks/

TailWind.css는 이번 프로젝트에서 제일 써보고 싶었던 기술이었다. stateofcss의 데이터를 보면 매년 꾸준히 관심과 사용양이 증가하고 있는 css 프레임워크로 최근에는 카카오 엔터테인먼트에서 도입했을 정도로 최근에 핫한 기술이다.

우리는 상용 서비스에 tailwind를 도입하고자 시도한 경험이 있지만 기존에 사용중인 material UI와의 호환성 문제로 철회한 경험이 있기 때문에 더 궁금했다.

실제로 사용해보니 확실한 장점을 느낄 수 있었다.

클래스 이름을 고민하지 않아도 되고 바로 적용만 하면 된다
개발자의 일이 중 변수 이름을 짓는 것에 5할이라는 우스개소리가 있을 정도인데 적어도 css에서는 그럴 필요가 없어졌다!
스타일 파일과 html파일을 번갈아 보며 개발하지 않아도 된다!
반응형 페이지 구현과 커스터 마이징이 쉽다!

확실히 1번의 이유가 가장 큰 메리트인 것 같다. 클래스를 지정하고 해당 클래스에 스타일 속성을 정의할 필요가 없기 때문에

굉장히 빠른 속도로 개발을 할 수 있다는 것이 큰 장점이다.

하지만 단점 또한 느낄 수 있었는데,

코드 가독성이 안드로메다....
css코드를 한눈에 파악하기 힘들었다. 특히 남이 작업한 코드을 볼 때는 선뜻 이해하기가 어려웠다.
적응시간 필요
tailwind에 정의된 스타일 속성을 그대로 가져다 쓰는 것이기 때문에 스타일 조회하기 위해 tailwind 사이트를 백번은 들어간 것 같다.

사이드프로젝트로 짦게 경험한 주관적인 의견으로는 편리함보다 불편함이 조금 더 컸지만 혼자 프로젝트를 빨리 해야하는 경우라면 효율적인 프레임워크라는 생각이 들었다.

4) 내가 맡은 역할

A. 확실한 역할분담, 일정 준수 시키기

우선 어찌됐던 내가 PM을 하기로 했기 때문에 나의 제일 큰 역할은 이 프로젝트가 소기의 목적을 잃지 않는 것과 일정을 맞추는 것이라고 생각했다.

아무리 친해도 일로 만난 사이에서 일이 아닌 프로젝트를 진행하는 것은 쉽지 않은 일이다.

왜냐면 이 일은 어떠한 부담과 베네핏이 없기 때문에 모두가 끝까지 맡은 바를 하게 하는 것, 그리고 주어진 것보다 더 욕심낼 수 있게 동기를 부여하는 것이 중요했다.

그래서 우선 매 주 회의에서 확실하게 다음주까지 해와야 하는 것에 대한 역할분담을 철저히 하려고 했다. 또 주어진 테스크 완료에 대한 약간의 긴장감을 가질 수 있도록 '커피 사기' 등을 만들어 맡은 바는 꼭 해오는 분위기를 조성했다.

그리고 제일 중요한 것이 있는데 내가 제일 열심히 해야 팀원들이 따라온다는 것이다. 아무리 역할분담과 분위기 조성을 잘해도 자발적으로 열심히 하게 만드는 건 누군가가 열심히 하는 모습을 보고 자극 받는 것이기 때문이다.

B. 프로젝트 세팅, 레이이웃

같은 맥락으로서 다른 분들이 실질적인 개발에만 집중할 수 있도록 그 밖에 일들은 자처해서 처리했는데, 먼저 프로젝트 초기 설정, 레포 생성, 초대 등 프로젝트에 필요한 기본적인 세팅을 했다.

다음으로 모두가 작업한 조각들이 큰 퍼즐을 이를 수 있도록 맞추는 일을 했는데, 바로 레이아웃 잡는 일이었다.

디자이너가 없기 때문에 이것을 먼저 안하고 개발을 시켰다면, 모두 각기 다른 디자인의 페이지를 개발 후 모았을 때 추후에 다시 작업할 게 뻔했기 때문이다.

C. 인트로, 로딩, 신년인사, 엔딩크레딧 페이지

사실 우리가 기획 단계에서 논의한 것은 모두 알맹이(내용)에 대한 것이었다.

그것을 어떤 박스에 넣고 어떤 포장지로 감쌀 지에 대한 기획은 하지 않았기 때문에
자칫 노력은 노력대로 하고 결과물이 이쁘지 않을 수도 있겠다는 걱정이 있었다.

그래서 나는 동료들이 만든 정성스런 알맹이가 더욱 빛날 수 있는 포장지 페이지를 만드는데 주력했다.

레이아웃을 배경으로 우주 이미지를 넣었는데 뒤에 별똥별 애니매이션이 들어가면 인트로부터 눈에 띄지 않을까?(인트로)
마지막 엔딩 전에 축하포의 애니메이션과 함께 2022년에 정말 수고 많았고 2023년도 화이팅 해보자는 페이지를 만들면 어떨까?(신년인사)
모든 페이지가 끝나고 영화의 마지막처럼 멋진 bgm과 함께 개발팀의 메시지가 엔딩 크레딧으로 올라가는 애니메이션은 어떨까?(엔딩크레딧)

물론 처음부터 저걸 다 생각한 것은 아니다. "이렇게 하면 더 이쁘지 않을까? 실제로 봤을 때 이렇게 하면 더 임팩트가 있지 않을까?" 라는 욕심이 계속 생겨 추가 했던 것 같다.

D. 가장 많이 주문한 요일 페이지

그래도 실질적인 메인 페이지를 하나 정도는 나도 하고 싶어서 "가장 많이 주문한 요일" 페이지는 내가 담당하기로 했다.

단순히 가장 많이 주문한 요일을 보여주는 것은 재미없기 때문에 어떻게 하면 조금이라도 재미나게 표현할 수 있을까를 고민했다.

그러다 요일을 카드로 둬서 한장씩 뒤짚어가며 다 보여주고 가장 많이 주문한 요일만 마지막에 불쑥 올라오면 재밌겠다는 생각이 들었다.

코드로는 day-cards라는 클래스를 찾아서 순서대로 미리 정의해둔 animate-rotate-effect를 먹여준 것 뿐이다.

E.서프라이즈를 위한 담당자와 소통

이 사이드프로젝트는 처음부터 명확한 타겟과 릴리즈 일정이 정해져 있던 프로젝트였다. 타겟은 술담화 구성원이고 릴리즈 일정은 종무식때 서프라이즈로 공개하는 것을 목표로 했다. 하지만 종무식 중간에 우리 마음대로 오픈 할 수는 없기 때문에 종무식을 준비 해주시는 동료분과 미리 협의하는 과정이 필요했다.

다행히 그 동료 분은 우리가 기획한 것을 엄청 좋아 해주셨고 적극적으로 언제, 어떻게 공개하면 좋을 지 아이디어까지 주셨다.

단순히 보여주는 것보다 보는 사람과 상호작용하며 진행하면 더 재밌을 것 같고 하셔서 상품을 거는 이벤트 형식으로 가기로 했다.

그렇게 모든 준비는 끝이 났다.