1년 동안 주니어 프론트엔드 개발자의 사이드 프로젝트 성장기

---

들어가면서

어느덧 1년이 지나고 2년 차에 접어든 주니어 프론트엔드 개발자입니다. 지난 1년 동안 사이드 프로젝트를 진행하며 성장했던 경험을 공유해보려고 합니다. 영어 회화 관련 서비스를 만들었고 1인 개발로 기획부터 배포까지 진행했습니다. 깊은 인사이트를 드리기에는 아직 부족하지만, 프론트만 알았던 주니어가 어떻게 하나의 (미)완성된 서비스를 만들어가는지 그 간략한 과정을 살펴보시면 좋을 것 같습니다. 어쩌다 프로젝트를 진행하게 되었고, 어떻게 프로젝트를 진행했는지, 무엇을 느꼈는지 나눠 보겠습니다.

 

 

 

목차

1. 사이드 프로젝트를 시작한 이유

2. 어떻게 프로젝트를 진행했나
3. 사이드 프로젝트 회고

 

 

 

사이드 프로젝트를 시작한 이유

A-Z 까지 혼자 경험해보기

전체적인 웹 개발 프로세스를 경험하면서 개발 시야를 넓히고 싶었습니다. 입사 후에 간단한 백엔드 작업이나 다른 분야의 개발자분들과 소통할 때 스스로 부족한 부분이 많다고 느꼈습니다. 다른 분야에 대한 기초 지식이 있어야 지금 다니는 회사에서 더 효율적으로 프론트 업무를 하겠구나 생각했습니다. 그렇게 '하나의 완성된 서비스를 만든다'는 야심찬 목표로 프로젝트를 시작하게 됩니다.

 

 

 

어떻게 프로젝트를 진행했나

작업은 기획-프론트-백엔드-배포(인프라) 4단계로 진행했습니다. 사실 처음부터 이렇게 계획적으로 작업하진 않았습니다. 일단은 개발부터 하면서 의식의 흐름대로 프로젝트를 진행했습니다. 시간이 지날수록 기획이나 문서화를 안 하면 혼란이 가중되어 프로젝트를 원활하게 진행하기 어려웠습니다.

 

 

기획하기

1년 동안 만든 앱은

2개의 프로젝트를 만들었고 모두 영어 회화 관련된 서비스를 만들었습니다. 첫 번째 프로젝트는 학습한다는 것에 초점을 두고 6개월 동안 여러 기능을 만들었습니다. 첫 프로젝트를 끝낸 후 직접 서비스를 운영해보면 좋겠다는 생각이 들어, 기존의 프로젝트를 개선할지 새로 프로젝트를 다시 만들지 고민을 하다가 새 프로젝트를 만들기로 결정했습니다. 첫 프로젝트는 학습용으로 시작했다보니 리팩터링할 코드도 많았고, 구현되어 있는 많은 기능을 그대로 배포하면 혼자 유지 보수하기 벅찰 것 같았습니다. 또한 SEO에 유리한 NextJS를 써보고 싶은 마음이 컸습니다. 

 

 

기획을 꼭 해야하나?

- 기획을 해야 시간과 에너지를 효율적으로 쓸 수 있습니다. 첫 프로젝트는 기획을 하지 않고 진행했는데, 어느 정도의 단계까지는 의식의 흐름대로 진행이 잘 되었지만 의식의 흐름이 끊기기 시작하고 방황을 많이 했습니다. '다음에 뭘 해야 하지?' 이 고민이 반복되었습니다. 동시에 회사를 다니면서 프로젝트를 했기 때문에 굉장히 불규칙적으로 작업했는데, 오랜만에 프로젝트를 다시 해야 할 땐 뭐부터 해야 할지 혼란스러웠습니다. 매번 이런 고민을 하는 게 시간적, 정신적으로 비효율적이라고 생각해서 간단하게 노션으로 문서화를 했습니다. 프로젝트 진행상황을 체크할 수 있다보니 혼란도 줄고 프로젝트를 지속할 수 있는 힘이 생겼던 것 같습니다.

 

 

 

 

 

기획 어떻게 해야 할까?

1. 비즈니스 목표 설정 후 기능 정의

- 한 줄로 정리하면 '비즈니스 목표를 세우고 이를 토대로 기능과 UI를 만든다' 입니다. 제 경우에는 비즈니스 목표가 '2030 세대가 영어 문장을 스스로 만들고 말하는 것'이었습니다. 따라서 어떤 기능을 만들어야 2030세대 사용자들이 스스로 영어 문장을 만들고 말하도록 유도할 수 있을까? 이런 고민을 하면서 기능을 정했습니다. 그렇게 한글 문장만 보고 영어문장을 만들어 보거나, 질문에 답변하는 인터뷰 기능 등을 기획했습니다. 또한 딱딱한 영어 자료들 보다는 2030대들이 공감하고 재미를 느낄만한 내용들을 위주로 콘텐츠를 구성하고 있습니다. 사용자들이 내용에 공감하면서 능동적인 학습 방향으로 영어 말하기 연습을 했으면 좋겠다고 생각했습니다.

 

 

 

 

 

 

 

 

 

 

2. UI 디자인 하기

- 기능이 정리되었다면 이제 UI를 만들 차례입니다. 꼼꼼하게 기획하진 않았고 레이아웃과 컬러에 중점을 두고 화면을 기획했습니다. 옆에 UI 화면은 아래의 과정을 거쳐 만들었습니다.

 

1. 레퍼런스 참고하면서 아이디어를 얻는다.
- 비슷한 서비스 혹은 dribbble, pinterest 같은 사이트에서 레퍼런스 참고하여 레이아웃과 컬러를 정한다.

2. 레퍼런스 자료들을 참고하면서 UI 디자인을 한다. 

- 만약 디자인 시스템(antd, material-ui 등)을 사용한다면 디자인 시스템을 함께 참고하며 UI 디자인을 한다. Tool은 피그마를 사용했습니다.

 

 

 

 

 

 

프론트

기술 스택을 정했던 과정들

첫 프로젝트는 '회사 기술 스택' 위주로 결정했습니다. 회사에 적응이 필요한 시기였습니다. 두 번째 프로젝트에서는 나름 고민을 해보고 기술 스택을 정했습니다. 감당할 수 있는 학습 범위 내에서 새로운 기술을 도입하고 싶었습니다. 원활한 프로젝트 진행을 위해서입니다. 프로젝트를 진행하면서 배우는 것도 중요하지만 결과물을 만들어 내는 것도 중요하다고 생각합니다.

 

두 번째 프로젝트는 실 서비스를 목표로 몇 가지 고민을 했습니다. SEO, 디자인 시스템 2가지를 고려했습니다. 사용자에게 페이지 노출이 원했기에 SEO 부분을 해결해줄 수 있는 Next JS를 선택했습니다. 타깃한 2030 세대는 특히 더 디자인에 민감하기에 중요한 요소라고 생각했습니다. Grommet이라는 매력적인 디자인 시스템을 찾았는데 장점이 많았습니다. 우선은 디자인이 좋았고 '반응형'을 지원한다는 특징이 있었습니다. 뿐만 아니라 접근성을 고려하여 컴포넌트가 제작되었습니다. 자료가 워낙 없고 얼마나 안정적인지 판단할 수 없어서 고민이 되기도 했지만 여러 니즈를 충족시키기에 사용해보기로 결정했습니다.

 

 

백엔드

첫 백엔드 도전.

일단 언어적으로는 JS가 익숙하기 때문에 nodeJS를 선택했습니다. 첫 학습의 시작은 유튜브에서 간단한 튜토리얼을 따라 만들며 API 서버를 만들고 DB를 연동해보는 실습을 해봤습니다. 우선은 서버가 어떻게 요청을 받고 어떻게 응답을 해주는지 전체적인 흐름을 파악하는데 주력했습니다. 학습하는 고통보다는 무엇을 학습해야하는지 모르는 고통이 더크기 때문에 흐름을 파악하려고 했습니다. 기초학습 이 후에는 원하는 기능을 바로 만들기 시작했고 막히는 부분은 구글이나 책을 보면서 보충했습니다.

 

두 번째 프로젝트에서는 nestJS 프레임워크를 사용했습니다. nestJS를 선택했던 이유는 아키텍처를 제공해주었기 때문입니다. 첫 프로젝트에서 node.js로만 개발했을 때는 폴더구조나 아키텍처가 너무 자유로운것이 백엔드 초보인 저에게는 오히려 혼란스러웠습니다. 그래서 학습 비용이 들어도 프레임워크를 활용해야겠다고 생각했습니다. 

 

 

인프라

개념을 꼼꼼히 공부하자

도메인 설정, CI/CD를 구성하고 프론트, 백엔드 프로젝트를 배포하는 것이 목표였습니다. 이 부분도 일단 블로그와 튜토리얼 영상들을 보며 흐름을 먼저 파악했습니다. 조금 다른 게 있다면 용어 공부를 많이 했던 거 같습니다. 일단 용어를 알아야 참고 자료들이 이해가 잘 되기 때문에 모르는 용어들을 계속 정리했습니다. 배포같은 경우에는 프로젝트마다 환경이 달라서 튜토리얼을 간단하게 학습한 후 여러 자료를 읽으면서 필요한 부분을 학습하며 채워나갔습니다. 첫 프로젝트를 배포 하면서 정말 많은 에러를 경험했었습니다. 특히 첫 프로젝트에는 다양한 외부 API를 활용했었는데 audio 관련 이슈 하나 때문에 배포가 2주 정도 늦어지기도 했습니다. 무사히 배포를 성공하긴 했지만 다시는 과욕으로 프로젝트를 진행하면 안되겠다고 다짐했었습니다. 마지막으로 배포를 하면서 이용했던 인프라 서비스들을 정리해봤습니다. 

 

1. 도메인 - Route 53

- Route 53에서 구입하고 연결해서 등록했습니다.

 

2. 클라이언트 배포  - EC2

- EC2로 배포했습니다. 

- 비하인드 얘기를 하자면 사실 처음에는 이전 React프로젝트처럼 S3와 CloudFront로 NextJS를 동일한 환경으로 배포했었습니다. 하지만 NextJS를 S3로 정적 호스팅을 하면 server 쪽 API들을 사용하지 못하기 때문에 serverless 같은 라이브러리를 활용해 추가로 설정하거나 배포 방식을 변경해야 했습니다. 그래서 후자를 선택했습니다.

 

3. 백엔드 배포 - AWS EB

- AWS EB(Elastic Beanstalk) 서비스를 이용했습니다. 이번 프로젝트를 하면서 처음 알게 되었는데 전반적인 인프라 구성을 자동으로 해준다고 하여 사용해봤습니다. 배포 과정이 매우 간단했고, HTTPS 설정, CI/CD 구성도 쉽게 설정할 수 있었습니다. 관심 있으신 분들을 위해 아래 자료 참고 남겨 놓았습니다.

 

Deploy a NestJS with AWS EB

Link

 

 

사이드 프로젝트 회고 

얻은 점들 

- 기술적 성장 (회사 기술 스택, 새로운 기술 스택을 배우고 익힐 수 있었다)

- 개발 시야 확보 (웹 개발의 전체 흐름을 경험할 수 있었다)

- 겸손함 (아직 부족한 게 많다)

- 새로운 배움에 대한 부담감 감소 (모르는 건 배우면 알게 된다) 

- 결과물 (학습 발자취)

 

 

느낀 점들

- 빠른 포기를 위해서는 과한 욕심을 갖자

- 최소한의 기획으로 일단 결과물을 완성하고 보충해나가자 (끝이 안 보이면 지치고 의욕 상실한다)

- 실 서비스를 염두하고 진행하면 배울게 풍성해진다. (CORS, 서버 비용, API 비용, 개인정보 등등 고민의 깊이가 달라진다)

- 정제된 학습 자료를 봐야 한다 (블로그나 강의도 좋지만 책처럼 정제된 자료를 보는 게 좋다)

- 이론 공부의 필요성 (많이 구현해보는 것도 중요하지만 깊이 있는 개발자가 되기 위해서는 이론 공부도 해야 한다)

- 기록은 다시 볼 가치가 있는 것만 한다. (마구잡이 기록을 피하자)

 

 

마치며

1년 차는 넓게 공부해왔다면 2년 차에는 깊게 공부하며 성장하는 것이 목표입니다. 블로그를 쓰면서 중요한 주제들을 깊게 파보고, 임팩트있는 경험들을 정리해보면 좋을 것 같습니다. 남들에게 공유할 가치있는 글을 쓰다보면 스스로도 많이 성장할 것이라 생각합니다.