서론
시간이 정말 빠릅니다. 이 기술 블로그도 제가 막 국비 학원을 다닐 때 작성하기 시작했는데, 11월 4일 자로 수료도 했고, 사실 저는 그 이전에 조기취업으로 10월 25일부터 프론트엔드 개발자로 취업을 해 회사를 다니는 중이었습니다. 시기 상 운이 좋게 10월 초부터 학원 내에 팀 프로젝트에 참여할 수 있게 되어, 팀 프로젝트도 하고, 끝나갈 때 즈음에 취업도 하고, 수료도 하고 정말 운칠기삼이란 말은 진리인 거 같습니다..
프로젝트 개요
국비, 교육 기관, 취준 개발자들의 꽃 팀 프로젝트를 진행하였습니다. 우선 프론트엔드와 백엔드가 같이 보여줄 수 있는 게 무엇일까 생각을 해 봤습니다.
프론트엔드 입장에선 헤더와 메뉴도 있어야 하고, 슬라이드도 있으면 좋겠고, 페이지가 좀 많았으면 좋겠으며, 백엔드 입장에선 회원가입과 로그인, 그리고 더 나아가 뭐 결제도 됐음 좋겠다, 다양한 이미지들을 담아두고 보여주고 싶다 등..
쇼핑몰과 예약 서비스 플랫폼 등 다양한 게 있었지만, 저희는 Simple is the best라고 가장 많이 하면서 또 기본적인 것을 모두 보여줄 수 있는 쇼핑몰을 채택하였습니다. 그리고 쇼핑몰 중에서도 퍼블리싱 작업을 할 때 최소한의 작업으로 디자인적 요소도 높게 사고 싶었고, 심플함과 모던함이 예술로 소화될 수 있는 '인테리어 쇼핑몰', 그 중에 단언 1등인 이케아를 채택하였습니다.
프로젝트 URL
http://www.aqua-talk.shop:8080/welsh/
(2022 03 20 현재, 서버를 내려 접속 불가합니다.)
업무 분담
저는 당연 프론트엔드 업무를 분담하였고, 아래와 같이 개발을 하였습니다.
Admin 페이지 개발
상세 페이지 - bedroom 개발
상세 페이지 - living 개발
상세 페이지 - kitchen 개발
상세 페이지 - dining 개발
Header 개발
Footer 개발
Login 페이지 리팩토링
Register 페이지 리팩토링
리팩토링 같은 경우는, 제가 프론트엔드 총괄을 맡아 진행하였기 때문에 퍼블리셔 분들이나 상대적으로 퍼블리싱이 취약한 부분을 이어 받아 보완 및 코드 리팩토링 작업을 하였고, Header와 Footer는 전체 페이지에 쓰일 만큼 중요하기 때문에 제가 작업을 하였습니다.
그리고 상대적으로 기능적인 부분만 구현해주면 되는 Admin 페이지와, 페이지 한 장만 만들면 수십 장을 복사하여 사용할 수 있는 상세 페이지까지 제가 개발을 하였습니다.
상세페이지 같은 경우는, 후에 ajax로 상품 이미지를 받아오는 것도 원래 제가 하기로 했어서 페이지 구조에 익숙해지기 위해 개발을 진행했는데, 막바지에 취업을 하게 되어 ajax로 이미지를 받아오는 작업에는 참여하지 못했습니다.
개발 화면 1
개발 화면 2
개발 화면 3
보완해야 할 점
개발 화면 1
원래 중간 슬라이드가 사진 5장이 제대로 전부 출력되었는데, 영상을 찍는 도중에 전부 사라졌습니다. 정말 간단한 오류고 수정 작업일 테니, 나중에 시간 내서 빠르게 고쳐야겠습니다.
개발 화면 2
이것도 상품 이미지가 잘 받아오다가 갑자기 녹화 중에 임시로 넣어 놓은 '상품 준비 중' 이미지가 출력됩니다. 서버 문제인지 백엔드 개발자 님께 급하게 카톡을 드렸으니 이 점도 빠른 시일 내에 보완해야겠습니다.
개발 화면 3
보시다시피 카카오 로그인 버튼이 자기 주장이 굉장히 강합니다. 참고로 저건 제가 넣은 버튼이 아니고 조장님께서 마지막에 합치는 과정에서 넣으면 재밌겠다고 넣으신 거고, CSS 작업을 안 하신 이유는 못 하셔서가 아니라 자랑하고 싶어서 자기주장이 강한 상태로 디자인 하셨다고 합니다. 이것 또한 기존 버튼 태그 디자인과 같게 CSS 작업을 할 계획입니다.
회고
개발자의 숙명인 협업을 무사히 끝냈습니다. 사실 학원에서 맺어준 팀과, 어느정도 강사님의 케어, 약 2~3주 내외의 짧은 작업 기간 상 큰 퀄리티도 기대하기 어렵고, 그런 조건에서부터 오는 여유로움, 더 나아가 저의 조기취업 때문에 프로젝트가 크게 휘청일까 걱정했는데요.
오히려 이런 악조건 덕분에 큰 부담 없이 프로젝트를 진행할 수 있었습니다. 의외로 너무 완벽한 조건과 아이디어, 팀원이었다면 되려 결과물이 만족스럽지 못하고 실망스러울 수 있었을 텐데, 역시 사람은 무언가 할 때 큰 기대를 하면 안 되는 거 같습니다 ㅎ 이점은 앞으로 모든 일에도 통용될 말이고요.
제가 이번 프로젝트를 통해 느낀 점은 '프론트엔드 개발자가 많으면 의외로 프로젝트가 산으로 가는 것 같다'입니다. 물론 제가 프론트엔드와 백엔드의 업무 분담을 잘 몰라서 하는 말일 수도 있지만, 코딩 스타일이 너무나도 명확하게 드러나는 포지션에 여러 명의 개발자가 투입되니 어쩌면 당연한 부분이라고 생각됩니다.
따라서 앞으로 사이드 프로젝트를 진행할 때 저를 포함해 프론트 단 개발자는 최대 2명이 가장 적절한 것 같습니다. 그리고 그렇게 개발을 진행하다 프로젝트 규모가 커진다면 그때 가서 프론트엔드나 퍼블리셔를 더 영입하거나, 프로젝트 규모를 줄이거나 하는 방향성을 취하면 될 것 같습니다. 물론 이 점도 더 배우고 개발하면서 바뀔 스탠스겠지만요 ㅎ
아무튼 이렇게 해서 투자 대비 많은 것을 배울 수 있던 가성비 좋은 프로젝트가 끝났습니다. 현재는 회사에 적응하고, 학사도 취득하고, 이젠 정말 미룰 수 없는 리액트 공부를 하느냐 바쁘겠지만, 리액트 공부가 어느정도 되었을 때 상용화까진 모르겠고, 실제 서비스가 가능하고 훨씬 더 퀄리티 높은 사이드 프로젝트로 찾아 뵙도록 하겠습니다.
댓글