들어가며
가벼운 마음으로 사이드 프로젝트를 시작한지 어느새 두 달이 지났다. "한 달 안에 프로토타입을 뽑겠어!" 라며 의욕이 넘쳤는데 정작 프로젝트는 이제야 조금씩 진행이 되고 있다. 왜 지난 두 달간 프로젝트는 멈춰 있었을까? 훗날 같은 실수를 하지 않기 위해 그 기록을 남긴다.
목표
취업 준비를 하면서 포트폴리오 하나는 있어야 한다는 생각으로 프로젝트를 시작했다. 배포를 목표로 하기보단 이런걸 만들어 봤다. 에 초점을 맞췄다. 먼저 프론트엔드 개발자로서 한번 쯤 구현해보면 좋겠다 싶은 기능들을 나열해봤다.
- 회원가입/탈퇴
- 로그인
- OAuth2.0 인증
- 로그인 여부에 따라 개인화 된 화면 제공
- 즐겨찾기
- 시간에 따른 게시물 정렬
- 태그에 따른 게시물 필터링
- 게시글 권한
- 무한 스크롤링
- 대시보드
- 반응형 디자인
이렇게 나열해보니 트위터가 적합하다는 생각이 들었다. 클론만하지 말고 나만의 뭔가를 더하고 싶다는 생각도 잠시 있었지만 일단 만들다보면 떠오르지 않을까 싶어서 바로 개발을 시작했다.
즐거웠던 시작
로그인, 메인, 대시보드 정도로 구현할 화면을 정하고 그때그때 필요한 컴포넌트들을 만들어 나갔다. flex 를 사용하는게 복잡하게 느껴져 만든 <FlexContainer>. 좀 더 디자인을 간편하게 바꾸고 싶어 styled-components 를 사용해 만든 <DefaultButton>, <DefaultInput>. 이 외에도 게시글에 들어갈 카드 등등... 이때까지는 재미도 있고 재사용성이 있는 컴포넌트를 만들고 있다는 뿌듯함이 있었다.
CSS, Back-end, Database, ...
언제나 그렇듯 이미 할 줄 아는 것들을 금방금방 쳐내고나면 곧 모르는 지점에 부딪히게 된다. 나에겐 CSS 가 그랬다. 이미 있는 디자인을 따라 만들 뿐인데 아무리 수치를 조정해도 딱 맞게 디자인이 떨어지질 않았다. 요소의 크기는 같은데 폰트와 다른 요소의 경계가 나란하지 않거나, 이미 정렬을 해뒀던 부분이 다른 요소를 추가하자 흐트러지거나, 부모 요소에서 자식으로 상속이 될거라 생각했던 속성이 상속되지 않거나... 하나하나 기억이 안 날 정도로 자잘자잘한 실수가 많았다.
CSS 를 더 공부하려다가 당장 아는 정도로 어떻게든 아쉬운 디자인을 마무리하고 게시글에 들어갈 데이터를 고민하기 시작했다. 가볍게라도 직접 만든 서버에서 받아보고 싶은 욕심에 node express 를 사용해 GET, POST 정도만 받는 서버를 만들었다. 서버를 만들고 나니 데이터베이스에 욕심이 생겼다. 데이터베이스까지만 어떻게 연결하면 전체 흐름을 직접 볼 수 있다는 것도 매력적이었다. 그렇게 데이터베이스 연결도 알아보기 시작했다.
몇몇 독자들은 이미 느꼈겠지만 이렇게 점점 뻗어나간 관심사는 애초 프로젝트에서 계획했던 목적을 벗어나고 있었다. 하지만 이때의 나는 그걸 느끼지 못하고 있었다. 모든 관심사가 프로젝트에 필요하다고 느꼈고 면접에서 어떻게든 어필 할 요소가 되지 않을까 하는 기대를 품고 있었다.
하지만 사람이 활동할 수 있는 시간은 한정되어 있고 공부할 수 있는 양도 한계가 있다. 그런데 분야마저 넘나들기 시작하니 각 분야마다 학습 맥락이 뚝뚝 끊기고 개발도 느려졌다. 당장 구현한 부분들도 학습에 깊이가 없으니 각각이 엉성했다. 그렇게 학습도 프로젝트도 점점 진도가 나가지 않고 마음이 뜨기 시작했다.
다시 초점을 맞추다.
그러던 중 이러다 진짜 프로젝트 하나도 완성 못 하겠다.는 경각심이 들었다. 그때부터 하나 둘 씩 프로젝트를 다듬기 시작했다. 무엇보다 중요한 건 목표를 되찾는 것이었다. 분야를 막론하고 뻗어나간 관심사와 학습에 프로젝트 초기 목표는 이미 희미해질대로 희미해져 있었다. 나는 우선 프론트엔드 개발자가 되겠다.에 초점을 맞추고 다른 관심사들은 마음 한 구석에 밀어놨다. 그리고 코딩을 시작하기 전 오늘 만들고자 하는 기능과 프로젝트의 목적을 다시 상기하는 시간을 가졌다.
공부도 HTML, CSS, Javascript, React 중심으로 돌아왔다. 어렴풋이 알고 있다고 생각했던 부분들을 다시 짚어나가고 있다. 그러다보니 생각보다 더 엉성했구나 하는 자각도 생기고 더 알고 싶은 마음도 생겨났다. 특히 프론트엔드에 한정해 공부하다보니 각 공부가 서로 도음을 줘서 기분이 좋았다. CSS 를 공부해도 스타일링 뿐 아니라 컴포넌트를 정리할 때 도움이 되고 Javascript 를 공부해도 React 를 이해하는데 도움이 되는 식이었다.
다음은 프로젝트 폴더와 파일, 주석들을 정리했다. 백엔드와 데이터베이스, 프론트엔드를 오가다보니 웹 쪽을 구현하러 돌아올 때마다 진행상황을 파악하는게 힘들어 그때그때 적어 둔 주석들, 나눠 놓은 폴더들이 많았다. 프로젝트를 열었을 때 되도록 한 눈에 들어와야 한다.는 목표로 불필요한 기록이나 폴더, 파일들을 지워나갔다.
이렇게 멈췄던 프로젝트는 다시 조금씩 굴러가고 있다.
지금이야 과거를 돌아보는 느낌으로 회고하고 있지만 그 당시에는 공부도 프로젝트도 영원히 끝나지 않을 것만 같았다. 물론 당장이라도 긴장을 풀면 그렇게 돌아갈 수도 있다. 그래서 요즘은 이 선순환을 유지할 방법에 대해 고민하고 있다. 모각코도 하고, 프로젝트도 작은 부분이라도 매일 진행하고, 공부한 내용은 잊어버리지 않게 정리해서 남기려 한다.
머잖아 프로젝트를 마치고 배운 점들을 글로 남길 때를 기대한다.
세 줄 요약
- 막히는 부분에서 눈을 돌려 관심사를 넓히다보니 학습도 프로젝트도 느려졌다.
- 개인의 목표와 프로젝트의 목표를 분명하게 하고 상기하자.
- 한번 탄 좋은 흐름을 유지하기 위해 노력하자.
