2주 프로젝트 회고

i do as i say·2020년 8월 17일

2주 프로젝트가 끝난 지 오래이지만 회고를 작성하지 못 했는데, 어떻게든 짧게라도 써 보고 싶어서 당시에 짧게 남겼었다. 그것을 토대로 회고를 길게 남겨 보려고 한다. 왜냐하면 회고는 나의 쉬는 시간이니까.
슬랙에 짧게 남겼었던 2주 프로젝트 회고

슬랙에 짧게 남겼었던 2주 프로젝트 회고

기획 의도

2주라는 짧은 프로젝트이지만 내가, 나의 팀이 첫 번째로 만드는 보물 같은 프로젝트였기 때문에 장르를 정하는 데에 꽤 많은 시간과 공을 들였다. 여러 가지 조건을 두고 고민했었는데, 대표적으로는 다음과 같다.

내가 꼭 필요한 것
2주 안에 완성할 수 있는 규모
나중에 리팩토링 후 배포했을 때 사람들이 많이 사용할 것 같은 것
새로운 것을 만드는 것보다, 기존에 있는 아이디어 사용

개발자의 걸음을 걷기 전의 내가 어떠한 게 제일 필요했나 생각을 해 보았고, 두 번째로는 개발자의 걸음을 걷는 지금의 나는 어떠한 게 제일 필요한가 생각했다. 항상 "색"에 약했던 나는 해외 컬러 팔레트 사이트들을 전전하며, 그 사이트에서 일궈 놓은 색상들을 뽑아서 그림을 그리곤 했고, 그것은 정말 신기하게도 개발자로 전향하면서 웹 사이트를 만드는 개발자의 나에게도 해당이 되었다. 프론트냐, 백이냐를 따지지 않고 내가 원하는 것을 개발하려고 했을 때 디자인에 입문하면 항상 부딪히는 과정이었기 때문이었다. 이러한 이유들로, 나도, 그리고 개발자 및 나와 같았던 길을 걷고 있는 미술 계열 종사자에게도 쉽고 편한 한국어 컬러 팔레트 사이트를 만들자며 시작했다.

쉽고 편한 사이트?

어떠한 것을 이용하고, 자주 사용하고, 좋아하게 되면 단점과 장점은 아주 빨리 캐치가 된다. 그렇기에 기존의 사이트들을 사용하며 개인적으로 불편했던 점들을 보완하기로 했다. 일차적으로는 내가 아주 애용할 사이트이기 때문이다.

컬러 팔레트 이외의 기능은 사용하지 않을 것.

페이지를 많이 만들지 말 것.

회원가입이 편할 것.

가입을 하지 않은 사람도 볼 수 있게 할 것.

해당 팔레트를 다운로드를 할 수 있게 할 것.

스크랩이 가능하게 할 것.

보기 쉬운 디자인을 사용할 것.

팔레트 만드는 게 쉬울 것.

색갈피

주요 기능

컬러 팔레트 조회
컬러 팔레트 생성 / 편집 / 삭제
컬러 팔레트 저장 (HEX, RGB, 이미지, 링크, click copy)
회원가입 / 로그인 / 로그아웃 / 마이 페이지
관리자: 유저 삭제 및 팔레트 삭제

맡은 업무

초기 기획
FrontEnd
- SCSS와 styled-component를 이용한 CSS
- 유저 회원가입 / 로그인 / 로그아웃 / 관리자 페이지
- 로그인 유지

사용 스택

React (+hooks, +router)
Axios
SCSS
styled Component
Antd

백엔드 네 명과 프론트엔드 두 명, 총 네 명이 화백이라는 팀으로 활동했다. 본인은 프론트엔드 파트를 담당했는데, 전체적인 CSS, UI/UX와 유저 페이지를 맡았다. 새로운 스택을 쌓는 것보다 기존의 스택을 조금 더 단단하게 하고 자연스럽게 쓰고 싶어서, 지금까지 배웠던 손에 익은 언어를 사용했다. 이로써 조금 더 완성도 있는 결과물을 만드는 게 팀의 최종 목표였다.

우당탕탕 2주

사실 2주라고 표기했지만 실제로 코드를 만질 수 있는 기간은 주말 포함해서 딱 일주일이었다. 그래서 최대한 쉽게 활용하기 좋고, 러닝 커브(나 같은 경우엔 리액트를 거의 처음부터 배워야 되는 상황이었다. 학습한 기간이 있었지만 빠른 학습 텀에 이해하지 않고 넘어갈 수밖에 없었던 것들이 여러 개였기 때문에.)가 짧았으면 좋겠다 싶어서, 리액트에서는 hooks를 팀원에게 추천받았다. 결론적으로는 훅스를 쓴 게 신의 한 수 아니었나 싶다. 손도 댈 수 없었던 ComponentDidMount를 대체할 수 있는, 내가 빠르게 이해할 수 있는 범주의 코드들이 존재했기 때문이다! 처음엔 hooks의 기본인 setState를 사용하다가, 유튜브와 책을 통하여 useEffect를 배워서 사용하게 되었고, 내가 짠 코드들이 어설프지만 돌아가는 것을 볼 수 있었다. 리액트에 대한 기본적인 데이터 흐름을 파악하기에도 쉬웠고, 구조적인 것도 눈에 조금씩 보였다. 이때부터 코딩의 재미를 진짜로 느낀 게 아닌가 하는 생각이 든다.

리액트와 훅스, 그리고 useEffect

2주 프로젝트를 하면서 제일 열심히 활용한 게 어떠한 것이냐 묻는다면 단연 이것들을 뽑을 것이다. 리액트를 학습할 때 제일 어려웠던 라이프 사이클과, 리액트 다음에 학습했던 리덕스의 갈증을 어느 정도 해소시켜 주었기 때문이다. 훅스를 사용하면서 데이터들의 흐름이 눈에 보였는데, 데이터를 내려 주거나 올려 주는 것은 물론이고, 올린 것을 모아 다른 곳에 내려 주는 것까지, 내가 학습하면서 따라갈 수 없었던 부분들을 이해했고, 해냈다. 또, 따라갈 수 없어서 느끼지도 못했던 한 곳에서의 데이터 관리, 리덕스와 같은 정리 개념을 절실하게 느꼈다. 이것들을 혼자서 다 했냐고 묻는다면, 정말 당연하고 아이러니하게도 아니라고 대답할 것이다.

혼자서 한 게 아닌 모두와 함께

줄기차게 말했지만 나는 리액트에 대한 이해도가 부족했다. 그러한 상황에서 프로젝트가 시작되었고, 당연히 버벅거릴 수밖에 없었으며, 혼자의 힘으로 버거운 부분도 있었다. 그럴 때마다 제일 힘이 되어 준 것은 당연 팀원이다. 무턱대고 프론트엔드 팀원에게 의존한 것은 아니고, 나름의 배려와 이해, 그리고 학습이 있었다.

모르는 것은 당연히 학습해야 한다. 그렇지만 팁이나 조금 더 유용하게 사용할 수 있는 부분에 대해서는 피드백을 충분히 받았고, 사용했다.

제한 시간을 두고 디버깅을 했었고, 제한 시간이 지난 뒤에는 팀원과 함께 디버깅을 했다. 내가 생각했던 부분에서 오류가 난 게 아닌 것도 있었고, 오류에 대한 토론도 했으며, 내가 짠 코드가 비효율적이거나 효율적이었다면 그것에 대해서도 대화를 나눴다.

시간이 부족했던 마지막 날엔 어쩔 수 없이 급하게 팀원과 함께 처음부터 디버깅을 했었는데, 팀원이 진행하는 디버깅을 보면서 어떤 방식으로 디버깅을 해야 되는지 깨닫게 되었다.

팀으로 진행되는 만큼 팀원과 함께 하는 시너지를 최대한으로 뽑으려고 했다. 어떻게 해야 서로에게 도움이 될 수 있고, 또 마냥 받거나 가르쳐 주지 않는 수평적인 관계로 유지할 수 있는지에 대해서도 많이 알았던 것 같다. 나에게 지식을 공유해 주는 팀원은 무조건 답을 알려 주지 않고, 방법이나 방식을 위주, 레퍼런스, 블로그나 문서로 많이 공유해 주었는데, 굉장한 도움이 되었다.

디버깅

제일 취약했던 부분은 단연코 디버깅이라고 말할 수 있다. 이해도가 높을수록 디버깅은 빨리, 효율적으로 된다. 오류가 나게 되면 기본적으로 두 시간은 삽질 아닌 삽질을 하게 되는데, 이 언어의 기본적인 틀과 구조에 미숙했기 때문에 문법적 오류 같은 아주 단순한 것에도 시간을 오래 잡았다. 또, 콘솔로그를 이용한 디버깅이 주를 이뤘는데 콘솔로그로 되지 않는, 보이지 않는 뒷세계(??)의 오류를 접할 때엔 시간이 배로 걸렸다. 여러 가지 디버깅에 대한 연구가 필요했다. 짧은 시간에 구조 파악을 끝낸 후, 다양한 방법으로 족집게처럼 오류난 곳을 잡아내는 팀원을 보며 단순히 오류가 뜨자마자 오류 코드를 복사해서 구글에 쳤던 과거의 나를 반성하게 하는 아주 강력한 동기가 되었다.

CSS

미대를 나와서, 취미로 가끔씩 건드렸던 CSS가 밑거름이 되어 디자인이나 UI/UX는 내가 맡았다. SCSS와 styled-comp를 사용하고, Antd를 라이브러리로 사용했다. 사실 처음 잡았을 땐, 막연하게 일찍 끝날 것이라고 생각을 했다. 많이 써 본 거니까 속도도 빠를 거고, 미적 감각(????)도 있으니까 보기 좋은 배치를 쉽게 할 수 있지 않을까? 하지만 오산이었다. 오산이었다!!!!!!!! 생각보다 CSS가 프론트엔드에서 컸다. 아니, 매우매우 컸다. 아무리 좋은 기능을 만들어도 사용할 때 불편하면 사용하지 않게 된다. 여러 번 엎고, 엎고, 엎었던 것 같다. 좋은 배치와 보기 좋은 형태를 만들기 위해 머리를 싸매는 시간이 굉장히 많았다. 깔끔하고 일관된 디자인을 위해 Antd를 사용한 것인데, 이것도 제대로 사용하려면 (내가 원하는 모습으로 수정하려면) 러닝 커브가 꽤 길어서 Antd의 날것 그대로 사용했던 것도 꽤 아쉬웠다. 또, SCSS와 styled-comp의 특징을 미처 파악하지 못하고 혼용했을 때 나오는 오류들도 뒤늦게 알아 버려서 시간을 많이 버렸었다. 이렇듯 제일 자신 있었던 부분이 계속 안 되거나 다르게 되거나, 막힐 때마다 멘탈이 계속 무너지고 흔들렸었다. 팀원들 보기에도 쪽팔렸고. 그 무너지는 멘탈을 유지해야 되는 게 이 파트에서 가장 큰 부분이 아니었나 싶다. 악으로 깡으로 버텼었는데, 끝난 후 지금 다시 생각해 보니 조급했던 마음이 컸던 것 같다. 그리고 미술을 했을 때, 나를 책망하기만 했었던 버릇도 나왔던 것 같고. 매일 밤샘 작업으로 인한 초조한 마음이 멘탈을 더 짓눌렀던 것이다. 조금 더 나에게 관대해지되, 고집을 어느 정도 꺾고 다른 빠른 대처 방안을 찾는 것도 좋았을 것 같다고 생각한다.

첫 프로젝트, 느낀 점은?

팀!
사람이 제일 중요하다. 이렇게 핏이 맞는 팀원을 찾는 것도 힘들 것 같다고 느낄 정도로 손발이 맞았는데, 어떠한 의견에 충돌했을 때도 왜 이렇게 생각했는지, 나의 역량은 어디까지인지, 내가 맞출 수 있는 부분은 어디인지 충분한 회의를 통해서 서로 양보하거나 강력하게 주장하고, 또는 의견을 철회하며 팀을 이끌었다. 나는 리덕스를 반대했고, 프론트엔드 팀원은 Hooks를 찬성했으며 Antd와 다른 라이브러리를 견주었다. 백엔드간의 데이터 협의가 제일 치열했는데, 어떠한 데이터를 어떻게 받을지, 왜 받아야 되는지에 대해 논의했던 점이 가장 기억에 남았다. 소통이 원활해서 할 수 있었던 것들이었다.
초기 기획!
코드를 빨리 치고 싶은 마음에 초기 기획을 도입부만 짜고, 중반과 후반은 틀만 만들어 놓은 뒤 진행하면서 짜기로 했는데, 아주아주 실패했던 계획이었다. 중반부터 수많은 오류와 생성되는 페이지들에 정신이 없어서 따라가는 것만으로도 아주 벅찼다. 또, 초기 기획을 수정하는 일과 삭제, 추가하는 부분들이 많아져서 했던 업무를 지워야 하는 일이 굉장히 많았다. 전부 다 계획하고 들어가는 게 아주 좋은 방안이라고 생각하지만, 그렇게 할 수 없는 아주 짧은 시간일 땐 굵직한 것들이라도 세세하게 짜고, 그 과정으로 들어가기 전에 다시 세세하게 나누는 것을 추천한다.
변수 설정!
변수 설정이 아주아주 중요하다고 계속 주변에서 누누이 말했었고, 그것도 주기적으로 보았었는데 항상 a나 b 같은 걸로 때웠던 적이 많았다. 나만 알면 되는 것이 아닌가? 하는 아주 작은 이기심(..)으로 인해 사용하는 것이었는데, 이번은 팀 작업이고, 또 다른 사람들도 알아야 되는 것이기 때문에 BEM도 적극적으로 사용했고 직관적으로 보일 수 있게 노력했다. 고 초반에는 생각을 했는데, 역시 사람은 겪어 봐야 안다고, 아주 안일한 생각이었다.
CSS를 위한 버튼 변수를 만들었었다. 메인 페이지는 main_btn, 헤더 페이지에는 00Header_btn 이런 식으로 처음에 사용했었는데, 페이지가 많아지니 너무 헷갈리는 거다. 이게 어떤 모양인지 감이 잡히지 않아서 코드를 주의깊게 읽어야 되는 것은 물론이고, 나중에 버튼 모양을 모듈화시키려니 어디서부터 손을 대야 될지 감이 잡히지 않았다. 계속 렌더링 페이지와 코드를 번갈아서 보는 비효율적인 시간이 많아졌다. 그래서 bigSqure이나 circle처럼 그 버튼이 어떻게 생겼는지 한눈에 알아볼 수 있게 바꾸었더니 훨씬 나았다. 이렇게 작은 프로젝트도 한 번에 알아볼 수 있는 변수가 필요한데, 대형 프로젝트로 가게 되면 변수라는 게 얼마나 중요한지 단박에 깨닫는 사례가 되었다.

마지막으로

생각보다 치열했고, 어설펐고, 노련했다. 팀을 잘 만난 탓에 수고를 많이 덜었던 것도 있었겠다. 마냥 일만 하는 쪽이 아니고 잘 노는 쪽에도 해당이 되었었던 팀이었다. 아마, 일만 하고 서로간의 대화가 없는 삭막한 팀이었다면 아마도 굉장히 힘든 2주를 보내지 않았을까.
하루 종일 감탄사만 내뱉는 일과였다. 이건 이래서 그렇구나, 저건 저래서 그렇구나. 이건 이래서 안 되는구나. 이렇게 하면 안 되는구나. 이렇게 해야지만 되는구나. 다음부터는 이렇게 해야지, 혹은 이렇게 하지 말아야지. 몇 개월간 했었던 이론이나 작은 과제들을 했다고 말할 수 없을 정도로 아주 무지했고, 초보였다. 그러나 그게 없었다면 이 정도의 깊이까지 나오지 않았을 것이고. 이제부터 시작이라는 말이 딱 맞는다. 2주 프로젝트를 기점으로, 진짜 내가 개발이라는 게 무엇인지 처음으로 실감을 하게 되었다. 뿌듯하고, 행복했다. 이 사이트는 앞으로도 디벨롭을 거듭해 정식으로 배포할 계획이다.