테오의 스프린트 11기

시니어 프론트엔드 개발자 테오가 한두달에 한번씩 운영하는 구글 스프린트 11기가 열렸다. 테오의 프론트엔드 카톡방에서 이전 기수 분들이 해온 작업물을 보면서, 그리고 테오가 올려주는 후기를 보면서 나도 꼭 한번 참여해보고 싶다고 생각해왔는데 이번에 기회가 되어 참여하게 되었다.

스프린트 결과물

이후 이어질 내용은 기억 보관을 목적으로 소소한 이야기까지도 담겨있어서 결과물을 먼저 공유한다. 결과물은 이후에 업데이트 될 수 있다.

• 웹서비스 : Daily Receipt - 하루 영수증 (개발자모드 모바일사이즈로 보는 것을 권장)
• 깃허브(서비스 설명) : README.md

1일차

1일차가 시작하기 전에 참여자는 아이디어를 하나씩 준비해와야 한다. 나는 daily receipt이라는 하루 일과를 영수증으로 출력해주는 아이디어를 준비했다. 감사하게도 최종 아이디어 4개 중 하나로 선정이 되었고 나 포함 7명6명의 팀원이서 함께 하게 되었다. (아쉽게도 한명이 개인 사정으로 하차하게 되었다.)

갓생이라는 요즘 많이 들리는 키워드와 RECEIPTIFY라는 스포티파이 플레이리스트로 영수증을 만들어주는 서비스에서 아이디어를 얻어서, 사용자가 그날 어떤 하루를 살았는지를 영수증으로 보여주는 서비스를 기획해보았다. 일정(할일)관리 + 영수증이 메인인 서비스이다.

게더타운에 모인 우리조 7명 + 테오.

블루불페(파란여우라는 뜻)라서 파란 늑대가 된 블루, 화이트라서 하얗게 옷을 입은 화이트, Remon(lemon)이라서 노란 옷을 입은 Remon, 해적과 쿠키가 되어버린 Madang과 DAN까지.. 종잡을 수 없는 의상 덕에 시작부터 벌써 웃겼다.

MC를 맡은 블루불페가 엄청난 진행력을 가져서 첫만남에 정말 즐겁게 참여할 수 있었다.
블루가 본인이 낯가리는 편이라고 했는데 사실이라면 그야말로 비대면 인싸력 최강자.

이번 스프린트에서 프론트엔드 파트로 참여하고 싶었기에 우리팀에 제발 디자이너가 있길 바라며 디자인 전공인걸 숨겼는데 놀랍게도 아무도 없었다. 블루가 진행하면서 디자인할 줄 알면 숨기지말고 나와달라고 했는데 거짓말을 하자니 마음이 찔려서 사실대로 얘기했다.
다행히 Remon과 DAN이 디자인 경험이 있다고 해서 갑자기 든든해졌다.

누가 뚱이를 그렸길레 옆에 스폰지밥의 외곽 형태만 그려놨는데 잠깐 피그잼 보드의 다른 쪽에 갔다온 사이에 온 사이에 누가 얼굴을 완성해놨다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ너무 웃겼다. 스폰지밥 눈 스티커 아래에는 뭔가 광기가 느껴지는 초롱초롱한 눈이 숨어있다.

수많은 얘기를 지나 무려 새벽 3시 반에 끝… 직장인인 마당과 아침부터 싸피에 참여해야 하는 Woo를 향한 걱정과 함께 1일차 마무리..

테오가 내일 모임 전까지 해야할 숙제도 알려주었다.

2일차

어제의 전체적인 리뷰와 숙제 리마인드를 담은 테오의 메일이 아침에 도착했다.

테오의 메일을 읽다보면 세상은 아직 따뜻하다는 생각이 든다.

함께하는 사람들도 너무 좋고 테오의 메일에 힘도 얻어서 즐거운 마음으로 2일차 숙제 끝! 사용자가 todo를 영어로만 쓴다는 보장이 없기에 영수증에 메인으로 사용할 영문 폰트와 잘 어울리는 한글 폰트를 고민해야한다.. 나중에 테스트 이미지를 만들면서 확인해봐야겠다. 그리고 알아보다 보니까 영수증 이미지를 만들기 위해 canvas를 사용해야 할 것 같다.

각자 해온 숙제를 발표하면서 발표자 외의 팀원들이 추가할 의견이나 빠진 내용을 덧붙여주어서 더 풍성하게 완성되었다. 각각의 내용을 살펴보는데 프론트엔드 팀원과 백엔드 팀원이 바라보는 관점이 완전 다르다는게 신기했다. 백엔드 팀원들은 어떤 데이터를 받을거고 어떻게 기능 구현에 사용할지의 관점으로 바라봤는데, 나랑 프론트쪽인 팀원들은 어떤 UI를 구성할거고 영수증 디자인은 어떻게 하면 좋을지의 관점으로 바라봤다. 협업해봐야 느낄 수 있는 경험이라서 의미있었고 다른 관점도 배울 수 있어서 좋았다.

팀원들이 자유롭게 소통하도록 테오는 진행할 때 외에는 자리를 비켜주신다.(아니면 다른 조를 진행하고 계신다.) 카페트 영역 밖으로 나가면 대화하는 소리가 안들리기 때문에, 우리가 꽃가루를 뿌려서 테오를 불러봤는데 팀원들의 이런 생각이 귀여워서 캡쳐했다.

앞서 발표한 개인의 생각과 토론한 내용을 바탕으로 다시한번 위 세가지 질문을 던져보았다. 서로 발표한 내용을 흡수해서 어느정도 하나의 결이 되었다.

회의를 즐겁게 만드는 팀원들의 유쾌함과 리액션 덕에 밤 11시에 시작하는 일정이지만 재밌게 할 수 있었다. (ㅋㅋㅋ)

Remon이 맨 처음에 3번 추구해야할 가치를 딱 두단어로 요약해서 “쉽고 예쁜"이라고 발표했는데, 그 이후로 팀원들은 격하게 공감하며 한마음 한뜻으로 우리의 서비스의 핵심은 이지앤뷰티(or 이지앤시크)라고 외치고 있다. 투두리스트 혹은 일정관리 서비스는 이미 좋은 것들이 꽤 많은데 우리 서비스의 차별점은 감성이 담긴 예쁜 영수증을 만들어주는 것이기 때문에 쓰기 쉽고 예쁜 결과를 보여주는 앱을 목표로 달려가고 있다.

질문을 던져보고 각 질문들을 그룹으로 묶어보았다.

핵심페이지인 투두+포모도로 페이지와 영수증 출력페이지, 그리고 로그인페이지와 마이페이지를 더해서 총 4페이지로 구성해보기로 했다.

화이트가 요약해준 2일차 회의록. 다들 필요한 역할이 있다면 자발적이고 적극적으로 참여해준다. 깔끔하게 정리된 회의록을 보며 짧은 기간이지만 이 서비스 재밌게 열심히 만들어봐야겠다고 다시한번 다짐해보았다.

3일차

3일차 숙제!

오늘의 아이스브레이킹으로 “만약 회사에 외계인이 나타난다면 그림으로 어떻게 나의 직업을 표현할 것인가?”를 진행했다. 나는 프론트엔드 개발자는 키보드로 무언가 그려내는 직업이라고 생각했기 때문에 키보드와 붓을 들고있는 사람을 그렸다.

피그잼에 숙제를 올려놓으려고 들어가봤더니 마당이 이걸 다 정리해놨다.. 우리팀의 PM역할까지 해주는 든든한 마당..<3 이후에 빠르고 분쟁없는 진행을 위해 테오가 UI/UX 결정권자와 PL을 투표로 뽑게 했다. UI/UX는 내가, PL은 정리왕 마당이 되었다.

각자 숙제로 준비해온 UI 스케치에서 마음에 드는 부분에 하트 스티커를 붙여 투표하는 시간을 가졌다. 팀원들이 어떤 UI에 어떤 생각을 하는지 알 수 있는 시간이었다.

UI/UX 결정권자가 된 덕분에 우리의 핵심 키워드 이지앤뷰티에 적합한 UI 방향을 정하는 토론을 주도할 수 있었는데 다른 사람들의 의견을 듣고 소통하며 결정하는 과정이 즐거웠다. 이지하고 뷰티풀한 서비스를 만들겠다는 하나의 목표로 다들 적극적으로 의견을 내주어서 고마웠고 그 덕에 더 재밌게 이 시간을 진행했다.

내일부터 이 내용을 바탕으로 개발을 진행하게 된다!

4일차 (개발 1일차)

댄이 함께 작업할 프로젝트 파일을 리액트 및 필요한 라이브러리와 폴더구조를 설정해서 깃허브로 공유해주었다. 이토록 모두가 적극적인 프로젝트라니.. 나도 본때(?)를 보여주고 싶어서 맡은 페이지를 멋지게 완성해야겠다고 생각했다.

PL 마당이 우리의 진행 상황을 한눈에 알 수 있도록 피그잼에 정리해두었다. 각 팀원이 본인이 진행 중인 목록을 표시하고 색깔로 진척도를 표시한다. 해당 태스크를 맡은 사람이 큰 태스크를 더 작은 단위로 쪼개가며 진행하였다.

개발 첫째날 회고. 프로젝트가 잘 진행되는 것도 좋았지만 무엇보다 함께하는 사람들 덕에 정말 즐거웠고 그 사람들 역시 행복하게 이 프로젝트를 수행한다는 생각에 기뻤다.

에센셜 플레이리스트 틀어놓고 게더에서 춤추면서 모각코하는 팀원들이 귀여워서 캡쳐.

개발 1일차 내가 진행한 내용 - 사용자가 추가한 투두 항목 개수나 영어 명언 API에서 받아오는 문장의 길이에 따라서 영수증 길이가 유동적이도록 CSS로 영수증을 그렸다.(영수증 위아래 뾰족한 부분도 그렸다.) 우리 서비스와 비슷한 서비스의 차별점이 사용자의 하루 일정이 “예쁜” 영수증을 만들어주는 것에 있어서 오늘 하루는 예쁘고 안정적인 영수증 레이아웃을 구현하는 것에 시간을 많이 쏟았다. 바코드는 실제로 인식되는 것은 아니지만 댄이 daily receipt를 이진법으로 변환해서 만들어준 바코드이다. 우리 서비스의 이스터에그 같은 느낌!

5일차 (개발 2일차)

오늘도 따뜻한 테오의 메일. 좋은 동료와 함께 성공적인 협업을 경험해보는 것이 목적인 이 스프린트.. 이미 성공했다고 생각하며 힘차게 오늘 개발도 스타트!

스프린트를 진행하면서 잘 질문하는 것과 서로 질문할 수 있는 분위기를 만들어주는 것이 정말 중요하다고 느꼈다. 블루와 레몬이 적극적으로 다양한 질문을 던져주었는데 다들 싫은 기색 한번 없이 자신이 아는 것은 화면공유까지 해가면서 알려주었다. 특히 댄의 친절함은 모두가 편안하게 질문을 던지는 분위기를 만드는데 큰 영향을 주었다고 생각했고 본받고 싶었다. 이런 분위기 속에서 블루가 질문한 것을 마당이 답해주다가 우리가 놓치고 있는 중요한 문제를 발견하기도 해서 더 중요하다고 생각하게 되었다.

개발 2일차 내가 진행한 내용 - 영수증을 출력해주는 페이지(위 이미지 두번째 페이지)를 맡아 완성하고 저장 버튼을 누르면 html을 canvas로 변환하는 라이브러리를 사용하여 이미지로 저장될 수 있도록 구현했다. 또한 다른 팀원들이 각자 기능을 맡아 구현해준 투두리스트 페이지의 UI 완성도를 높였다. 개인적으로 마음에 드는 부분은 영수증의 뾰족한 디테일을 하단 버튼에 반영한 것이다. 영수증을 출력하는 페이지로 넘어가는 버튼이라서 디테일을 살려보았는데 디테일을 추가하고 높아진 완성도에 기분이 좋았다.

모바일을 염두에 두고 만들었지만 사용자가 큰 스크린으로 보게되어도 레이아웃이 망가지는 문제가 없도록 반응형으로 만들었다.

6일차 (개발 3일차 + 마지막날)

오늘 외부로 공유되기전에 꼭 한번 챙겨보길 바래요.

1. title, favicon, og태그를 챙기자!
2. github readme를 잘 꾸미자.

-테오의 마지막 날 메일 중

오늘은 발표 전에 만드는 프로젝트가 데모로써의 역할을 충실히 할 수 있도록 완성도를 높이는 것에 집중해야하는 날이었다. 아직 해결하지 못한 여러 문제가 있지만 그걸 다 해결해내는 것 보다 기간 내에 그럴 듯한 데모를 선보이는 것이 더 중요하다고 얘기해주셨다. 팀원들이랑 머리를 맞대고 이번 발표에서는 준비 중인 기능이라고 처리할 내용, 우선 제외할 내용 등을 실시간으로 정해가며 정신없이 모이는 시각인 밤 11시까지 달렸다.

나는 title, favicon, og를 챙기고, 영수증에 들어간 URL(www.daily-receipt.com)과 동일한 도메인을 구입하고, 로그인페이지 UI를 만들고 레이아웃 오류를 점검하며 11시를 맞이했다. 팀원들이 각자 리드미, 서버 구현, 스케줄 확인 및 조율, 데이터 저장 및 로그인 구현 등을 맡아서 데모를 완성했다.

영수증 디자인에 URL이 들어가기도 하고 도메인이 있는게 서비스의 완성도가 높아보일 거라는 생각이 들어서 팀원들과 함께 구입하게 되었다.

대망의 발표시간이 왔고 게더타운에서 진행하였다. 각 조에서 한두명씩 다른 조로 이동해가면서 다른 조에서 설명을 들었다. 조에 남은 사람들은 우리 조를 구경하러 오신 분들께 서비스를 설명하게 된다.

뿌듯 모먼트! 나 말고도 설명에 참여한 다른 팀원들도 프로젝트에 애정이 있고 잘 이해하고 있어서 오신 분들께 잘 설명해주셨다.

다른 조의 작업을 구경하는데 다들 6일동안 열정을 쏟아냈다는게 느껴졌고 애정을 가지고 자신의 서비스를 소개해주는 모습들이 너무 보기 좋았다.

테오가 테스트한 영수증.

회고

드디어 회고의 시간이 왔다. 엄청나게 높은 밀도로 진행했는데 서로 응원하고 격려하며 지치지않고 이 시간까지 올 수 있었다.

사실 발표 직전 문제가 생겨서 오픈하지 못한 로그인이나 투두 삭제 기능 등이 있어서 아쉬움이 있었는데 이후에 이 서비스를 최소한 목표한 것 까지는 모여서 더 완성도를 높여보기로 했기에 마음 놓고 참여했다. 그리고 우리가 무슨 일이 있어도 구현해야한다고 생각했던 투두 페이지와 영수증 페이지, 그리고 영수증 출력은 구현했기에 만족하며 회고의 시간을 보냈다.

협업을 한다는 것은 갈등을 겪을 수도 있는 일이지만 함께하는 만큼 시너지가 있고 서로에게 배울 수 있다고 생각한다. 이번 협업을 통해 다른 사람의 장점을 보고 조금이라도 흡수하려고 해볼 수 있었다. 그리고 누가 코드를 한줄 더 썼고 못썼고 이런게 중요한게 아니라 다같이 자신의 장점을 살려서 목표한 곳까지 올 수 있도록 이끌어갔다는게 중요하다는 것을 배울 수 있었다.

이번 경험을 통해 나는 개발도 재밌고 디자인도 좋아한다는 것을 새삼 느꼈다. 팀원들의 호응과 응원 속에서 용기도 얻고 그 덕에 재미도 많이 느낄 수 있었다. 조건없이 참여한 사람들에게 스프린트 경험을 제공하는 테오가 대단하다고 생각했다. 나도 계속해서 도전하고 무럭무럭 성장해서 다른 사람들에게 선한 영향력을 끼치는 내공있는 개발자가 되어야겠다고 다짐해보았다.

6일간 서로 알아가고 함께 고민한 흔적들. 영수증 아이디어를 선택하고 함께 해준 모든 팀원들에게 진심으로 고마운 마음이 있다.

새로운 시작

아직 가시지 않은 스프린트의 여운과 프로젝트를 완성해내고 싶다는 욕심이 만나 마무리 다운 마무리를 해보기로 했다. 프린스 우(우가 유일한 백엔드 개발자여서 우리가 프린스라고 부른다.)가 스프린트 동안 고생하면서 백엔드의 많은 것을 구현해주었는데 발표 직전 문제가 생겨서 사용하지 못한 것도 많이 아쉬웠다. 우는 지금 아쉬움에 열정이 활활 불타는 중이다. 덕분에 이후 스프린트를 더 진행해보는데 동력이 되었다.

오늘 다시 게더타운에 모여서 마당이 준비해준 주제를 따라 회의하고 있는데 테오가 깜짝방문해서 이후에 우리가 어떻게 진행하면 좋을지에 대한 조언과 귀중한 스프린트 팁을 주고 가셨다. (기쁨의 인증샷~)

새롭게 나아가는 이 프로젝트의 끝이 어디를 향하게 될지가 참 많이 기대가 된다. 이번 스프린트에서 해왔던 것 처럼 개인의 욕심보다는 팀의 목표를 생각하고, 서로를 배려하며 각자의 최선으로 임하는 시간이 되기를 소망해본다.