패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프_과정 종료 회고

파이널 프로젝트가 끝나면서 7개월의 부트캠프 과정이 끝이 났습니다. 길다면 길고 짧다면 짧을 수 있는 시간인데 부트캠프를 진행하기 이전의 저와 수료한 이후의 저는 완전 다른 사람이 된 것 같아요. 사실 처음 시작할 때는 기본적인 클론 코딩도 버거워하던 저였는데 이제는 혼자서 프로젝트를 기획하고 개발하면서 이번엔 어떤 기술을 적용해볼까 행복한 고민을 하고 있어요. 이번 포스팅은 저번에 포스팅 했던 파이널 프로젝트의 결과를 공유해보고, 제가 패스트캠퍼스 X 야놀자 부트캠프를 진행하면서 어떻게 달라졌는지 회고해보려고 해요. 추가로 좋은 소식도 하나 자랑해보려고 합니다. ㅎㅎ.

파이널 프로젝트 끝!

패스트캠퍼스 X 야놀자 부트캠프에서 진행한 RFP기반 기업 연계 프로젝트가 끝이 났습니다. 이번 프로젝트는 확실히 기획 분들과 디자이너 분이 계셔서 프론트엔드에서 와이어프레임을 짜고 디자인 했을 때보다 확실히 결과가 잘 나온 것 같아요! 만들어진 사이트를 보면서 “와! 진짜 서비스하고 있는 사이트처럼 생겼다”라고 생각했습니다. 저희가 부트캠프의 마지막을 장식한 프로젝트 결과물을 함께 감상해봐요.

사이트 핵심 기능

저번 포스팅에서 투표 기반 여행 일정 앱을 만든다고 했었죠? 우리 앱의 핵심 기능은 다음과 같습니다. 하나씩 살펴봐요.

1) 여행지 투표

2) 투표 기반 일정 작성

3) 루트 최적화

4) 여행 정보 검색

랜딩 페이지 생성 및 마케팅

기획분들 덕분에 마케팅도 경험할 수 있었어요. 랜딩 페이지를 만들고 인스타그램과 페이스북 같은 SNS 마케팅을 통해 사람들에게 저희 앱을 노출시키고 랜딩페이지로 유도하여 사전 예약을 받게 하였습니다.

약 일주일 간 랜딩페이지 방문자 413명, CTA 입력폼 섹션 도달 인원 50명, 사전 출시 알림 신청 인원 41명으로 전환율 10%를 달성했습니다!

트립 보트 소개 영상

https://www.youtube.com/watch?v=9d4K_1AzSAA

부트캠프 후 나는 어떻게 달라졌을까?

부트캠프를 진행하면서 총 4번의 협업 프로젝트를 통해 학습 기간 익혔던 기술들을 적용해볼 수 있었습니다. 부트캠프 이전과 달리 프로젝트마다 적용하게 되었거나 프로젝트를 통해 새로 얻게 된 지식들이 많은 것 같아요. 또 협업 프로젝트로 인해 다른 사람들과 어떻게 함께 개발해야 하는지를 알게 된 것이 너무 좋았습니다.

1) 웹표준 및 웹접근성 적용

저는 패스트캠퍼스 X 야놀자 부트캠프에서 마크업 언어를 배우면서 특히나 웹표준과 웹접근성을 중요하게 생각했던 것 같아요. 어떻게 하면 시멘틱한 마크업을 할 수 있을까, 또 어떻게 해야 모든 사람에게 정보를 공유할 수 있을까 고민했습니다.

웹표준을 지키기 위해 시멘틱한 마크업을 하려고 했고, 그러기 위해서는 각 태그별 특징을 명확히 인지할 필요가 있었습니다. 특히 각 태그의 특징을 아는 것은 웹 접근성 확보를 위해서도 꼭 필요한 부분이었기 때문에 단순한 기능 구현보다는 의미있는 코드를 작성하려고 노력하게 되었어요.

예를들어 ol과 ul의 차이점에서 스크린리더가 어떻게 읽어주는지를 고려한다면 같은 리스트 태그라도 어떤 것을 쓰는게 맞을지 한번 더 고민했습니다. 또 스크린리더 사용자를 고려하는 코드들을 프로젝트마다 적용하게 되었어요. 특히나 각 섹션별 설명을 p태그로 넣어두고 디자인 요소를 해치지 않기 위해 accessibility hidden 스타일을 적용하여 읽어주기만 한다던가 반대로 디자인적으로만 사용되는 이미지 요소이기에 스크린리더가 읽어줄 필요가 없는 상황에서는 aria-hidden 속성을 적용하게 되었습니다.

2) 다양한 스타일 라이브러리와 프레임워크 경험

또 다양한 스타일 라이브러리와 프레임워크를 경험하면서 “어떨 때 어떤 것을 써야겠다”하는 자신만의 기준도 생기게 되었습니다. 예를 들어 생산성이 중요한 프로젝트에서는 tailwindCSS와 같은 유틸리티 퍼스트 스타일 프레임워크를 통해 빠른 개발을 할 수 있었고, 충분한 기획과 디자인 시스템 아래에서 시작된 개발에서는 Sass를 이용하여 다양한 함수와 mixin을 통해 디자인 시스템에 맞춰 세팅을 해두고 개발에 들어간다면 훨씬 수월하게 개발이 진행된다는 것을 경험했어요.

또 차크라 ui와 MUI와 같은 라이브러리를 통해 보다 쉽게 ui 컴포넌트를 구현해볼 수 있었습니다. 다만 ui 컴포넌트 라이브러리의 경우 커스터마이징이 오히려 생개발보다 힘든 경우도 있었기 때문에 기획의 디자인이 라이브러리 테마와 거리가 멀다면 오히려 적용하지 않거나 headless ui를 적용하는 것이 좋겠다는 생각을 했습니다.

3) 다양한 협업 툴과 git 전략 이용 경험

총 4번의 협업프로젝트를 진행했습니다. 디자인, 기획, 백엔드, 프론트엔드가 함께 프로젝트를 경험하게 되면서 실제 기업에서 어떻게 함께 일하게 될지를 미리 경험해본 느낌이었어요. 또 다양한 협업 툴을 통해 일정을 관리하고 소통하면서 커뮤니케이션 능력을 익혔구요.

또 프로젝트마다 다양한 프로젝트 관리 전략을 적용해보면서 협업을 경험할 수 있었습니다. jira나 github project 경험, 그리고 gitflow와 같은 브랜치 관리 전략 등을 적용해보면서 이제 실무에 들어가서도 다른 사람과 함께 협업할 능력을 갖추었다는 자신감을 가질 수 있게 되었습니다.

4) 스스로 학습하는 방법을 익힘

패스트캠퍼스 X 야놀자 부트캠프는 온라인으로 진행되었습니다. 제공된 강의를 통해 정해진 커리큘럼을 따라가면서 자기가 원하는 공부를 추가적으로 진행할 수 있었던 점이 저에게는 정말 큰 성장의 발판이 되었던 것 같아요.

개발을 공부하다보면 배운 지식들에서 새로운 가지들이 자꾸 나오는 것을 경험했습니다. 이것들을 ‘앨리스의 토끼굴’이라고 표현하더라구요. 그래서 그런 지식들까지 다 공부해서 섭렵해버리겠다! 라는 생각을 제 모토로 삼았습니다. 그래서 제 프로필 소개가 ‘토끼굴을 정복하는 개발자’에요 ㅎㅎ.

강의를 통해 html5를 배우면서 웹 접근성이라는 개념을 알게 되었고, 이렇게 연결된 지식들을 더 공부하기위해 WCAG2.1을 공부하면서 더 깊은 이해가 가능했어요. 만약 다른 커리큘럼 진행만을 강요하는 부트캠프였다면 이런식의 공부가 힘들었을 것 같아요.

5) 유저 뿐만이 아니라 기업의 입장에서도 코드를 작성할 수 있게 됨

프론트엔드 개발자가 유저 중심의 코드를 작성해야 한다는 것은 모두가 알고 계실 내용일 것 같아요. 그런데 기업의 입장에서도 고민을 해보는 것이 필요하다고 생각합니다. 여러 프로젝트를 진행하고 또 배포와 관련하여 여러 비용 처리를 경험하게 되면서 기업의 입장에서 코드를 작성하는 것이 필요한 일이라는 것을 깨닫게 되었습니다.

예를들어 서버 비용을 줄이기 위해 서버에 fileList를 그대로 전달하는 것이 아닌 S3의 Presigned URL을 이용하여 따로 업로드하고, 그 url만 서버에 전달해주어 서버 비용을 낮출 수 있었어요.

부트캠프 수료!!!!!

드디어 부트캠프를 수료하게 되었네요. 7개월이 짧은 시간은 아니지만 저에게는 정말 순식간에 지나간 것 같습니다. 그만큼 부트캠프에 몰입하고 있었던 것 같아요. 좋은 사람들을 많이 만날 수 있었고, 함께 성장할 수 있었어요. 이런 기회를 준 패스트캠퍼스에 정말 감사하는 마음 뿐이랍니다.

내가 최우수 수료생!!

너무나 감사하게도 이번 부트캠프 최우수 수료생으로 선정되었습니다. 과정 진행 동안의 프로젝트와 과제, 퀴즈 등을 종합하여 선정되었는데, 정말 수강생 분들끼리의 점수 차이가 미미하더라구요. 운이 좋았다는 생각과 동시에 그만큼 열심히 한 나 자신을 칭찬해주고 싶었습니다. 최우수 수료생에게는 모의 면접과 모의 코딩테스트 등 여러가지 취업을 위한 추가적인 혜택이 있었어요. 잘 활용해서 꼭 원하는 곳에 취업하도록 노력하겠습니다. 그 동안 감사했습니다!