2차 프로젝트 회고록

• 오늘로써 위코드에서 실시한 2차 프로젝트의 끝이 났다. 1차 프로젝트와는 다르게 내가 클론할 홈페이지를 파악하는 PET 단계에서부터 백엔드에서 정하는 ERD에 대한 정보 확인, 피그마 없는 UI 구현과 생전 처음써보는 기능 구현까지, 추석 때문에 추가된 1주라는 시간 덕분에 3주 간 2차 프로젝트를 할 수 있었지만, 이 3주동안 여러가지 일이 많았던 것 같았다.

• 처음 2일 차까지는 뭔가 마음의 여유가 좀 있었던 것 같았다. 실제로 내가 1차 프로젝트 처럼 단순하게 UI만 구현하는 것이 아니라 이 홈페이지에서는 왜 이런 기능을 웹 사이트에 구현을 하였는가라던가, 기획자는 왜 이렇게 홈페이지를 구성했는가 라는 생전 해보지도 못했던 생각을 해보는 시간이 있었기에 그 때까지는 블로그도 작성하고, 살짝 여유도 가지면서 있었던 것 같았다.

• 그런데 이제 본격적으로 한 사이트를 토대로 클론을 하기 위해서 같은 프론트엔드 작업자와 페이지를 나누고, 이 페이지를 어떻게 구현할지, 어떤 컴포넌트를 만들고 이 컴포넌트는 어떻게 구성해야할지에 대한 고민이 들어가자마자 내가 이 이틀동안 너무 행복한 시간을 보냈구나.. 라는 것을 다시 한번 깨달았던 것 같았다.

• 1차 프로젝트 때는 이미 디자이너 분들이 만들어둔 작품에, Input 이나 Button에 대한 Component화가 그렇게 복잡하지도 않았고, 무엇을 어떻게 만들지에 대해 확실했었기에 좀 어려움이 덜 했었었는데 실제로 한 홈페이지에서 재활용하기 위해 Button과 Input 을 Component화 하기 위해서 내가 구현해야할 페이지와, 나중에 추가할 지도 모를 페이지에 대해 어디에 어떤 버튼과 인풋이 쓰였나 찾아보며 정리해보니 피그마에 지정되어있던 것들과는 달리 가지각색의 색깔과 여러 크기, 형태 들이 너무나 다양했었다.

• 이 버튼과 인풋들을 그냥 내가 원하는대로 딱 정해놓고 만들기에는 여기서는 이렇게 쓰이니까 이 크기로 해줘야 하고, 저기서는 저렇게 쓰이니까 저 크기로 해줘야한다는 것을 느끼고 나니까 이걸 하나하나 구분한다는게 쉬운 일이 절대 아니라는 것을 다시한번 느꼈던 것 같았다.

• 페이지의 UI를 그리고, 기능 구현을 하기 전 페이지에 대한 시나리오를 정하고, 버튼의 종류, 색깔, 형태 등등을 정리하고, 인풋에 대해 정리한다고 시간을 정하는데도 적지 않은 시간이 들었던 것 같다.

1. React Component화에 대해서...

• 1차 프로젝트 때는 잘 몰라서, 꼭 필요한지 몰랐어서 Component화 라는 개념에 크게 진지하지 못했었던 것 같다. 단순하게 생전 처음 만들어보는 UI에 대해서 당장 구현하는게 중요했지, 재활용하는 객체들을 빼서 Component화를 한다는 생각은 전혀 하지 않았었던 것 같았다.

• 그런데 React에서 한 세션이나 같은 파운데이션 팀이었던 형님이나, 현재 현직에서 일하고 있는 친구마저도 React에서 Componenet 를 빼면 굳이 React를 쓸 이유가 없다는 말을 계속 해왔다. 그래서 나도 좀 중요한 것이구나 라는 것을 한번 더 느꼈던 것이고, 우리 파운데이션 팀들은 컴포넌트를 나눈다는 것의 중요성을 알고 있었지만, 2차 프로젝트로 인해 다들 뿔뿔이 흩어지고 다른 프론트엔드 분들과 팀이 되어보니, 컴포넌트화를 크게 중요하지 않게 생각하고 있는 사람이 있다는 것을 알 수 있었다.

• 추석이 아니었다면 2주라는 시간, 추석 덕분에 1주를 더 벌어 3주라는 시간 동안 처음 구현해보는 기능을 적용하고, UI를 만드는데도 적지않은 시간이 들어갈 것이고, 백엔드와 통신도 하면서 프로젝트를 진행하려면 컴포넌트화를 따로 할 시간이 있겠느냐라는 것이었다.

• 나도 다른 팀들은 프론트엔드가 3명씩인데, 나는 나 포함 두명이었기에 좀 걱정이 들기도 했다. 하지만 이게 꼭 해야할 작업이고 내가 만약 취직을 한다면 꼭 알아야 될 지식이었기에 시간이 좀 타이트하더라도 하나라도 더 해서 가져가보자는 생각이 더 컸었던 것 같다.

• 버튼의 여러 형태들, 인풋의 여러 형태들을 각 페이지를 보면서 크기, 형태, 모양 등등을 생각하면서 만들어야 했기 때문에 컴포넌트들을 만드는데만 이틀은 사용한 것 같았다. 이 시간을 사용하면서 만들었지만 홈페이지를 본격적으로 컴포넌트를 이용해 만들면서 추가한 것도 많았다..

• 하지만 이번에 해본 컴포넌트화 작업 덕분에 컴포넌트화라는 것에 조금 더 알아갈 수 있었던 시간인 것 같았다. 지금 하는 것은 클론 코딩으로써 이미 만들어진 홈페이지의 버튼과 인풋 스타일이었지만 3차때는 아예 0부터 시작해서 기획 단계부터 해가기 때문에 뭔가 더 간결해지지 않을까라는 생각이 들었다.

• Button을 만들다보니 Icon으로 된 Button이 나와 IconButton을 만들고, Button을 만들다보니 Chip이라는 생소한 버튼이 있어 또 나누고, 정말 홈페이지를 디자인한 디자이너 분들이나 그 디자인을 토대로 만들었을 프론트엔드들에게 정말 존경의 박수를 보내고 싶었다.

• 1차 때 사용했기에 2차 때도 sass를 사용한 스타일링을 했다. 3차 때는 sass가 아닌 다른 스타일 툴을 사용해서 만들어보고 싶은데 스타일드 컴포넌트나, 테일 윈드 같은 라이브러리가 있다고 해서 3차 때는 그걸 활용해 2차 때보다 더 이쁘고 멋진 홈페이지를 제작해보고 싶었다.

• 근데 내가 이 소제목을 적은 이유는 동기들 중에서 React를 사용하지만, Component의 중요도를 좀 중요하게 생각하지 않는 것 같기에 좀 느낌이 이상했다. 물론 기능 개발도 중요하지만 React를 사용하는 가장 큰 이유 중 하나가 컴포넌트 화인데 그걸 중요하게 생각하지 않는다는 것이... 뭐 어차피 각자의 생각이 있는 것이기 때문에 내가 그들에게 뭐라고 할 수는 없는 것이긴 하지만 말이다..

2. 혼자 공부할 때와 팀으로 진행할 때의 다른 점

• 이번에는 파운데이션을 함께했었던 사람과 프로젝트를 진행했었던 1차 프로젝트와는 달리 아예 처음 겪어보는 사람과 프로젝트를 진행했는데 솔직히 나는 처음부터 멘탈이 좀 나가있던 것 같았다. 다른 팀들은 3명인데, 우리만 2명인 이 상황에서 잘 할수 있을지도 걱정이었고 시간에 맞추어 UI나 기능을 구현할 수 있을지에 대한 걱정이 너무 컸던 것이었다.

• 혼자서 유튜브 강의를 들으며 공부할 때는 남의 눈치, 시간 같은 건 크게 신경쓰지 않으며 진행했었었지만 이번에는 처음보는 사람과 정해진 시간 안에 프로젝트를 진행해야 했기에 조급했던 것도 좀 있던 것 같았다.

• 1차 프로젝트 때도 프론트 / 백엔드 끼리의 소통이 잘 안되던 부분이 좀 있어 2차 프로젝트 때는 조금 더 신경써야 겠다고 생각을 했었는데 결국 이번 프로젝트에서도 소통의 부재는 동일했던 것 같다. 당장 내가 하는 일에만 신경쓰다보니 백엔드는 얼마나 했는지, 같은 팀원은 얼마나 진행되었는지에 대해 신경쓰지 않게 되었고 프로젝트 종료 전날이 되어서야 백엔드의 오류 문제 탓에 할 수 없는 것이 생겨버렸다. 프로젝트 간 팀원들의 소통이 중요하다는 것을 한번 더 깨닫게 된 것 같았다.

• 아침에 해야하는 미팅을 왜 해야하는 것인지, 트렐로 같은 것들로 현재까지의 진행상황들을 왜 정리를 해야하는지에 대해서 3차 때는 만약 팀원들의 말이 없으면 내가 직접 요청해서라도 해야겠다는 생각이 들었다.

• 이번 프로젝트를 진행하면서 다른 팀원들의 결과물을 보는데, 우리 팀의 결과물은 메인페이지를 너무 신경을 안쓴 것 같은 느낌이 조금 강하게 들었다. 다른 페이지를 구현하고 기능을 붙여야 하기 때문에 크게 신경을 못 쓴것도 사실이기는 하지만 다른 페이지는 그럭저럭 제품의 이미지 때문이라도 크게 이상하다는 느낌은 받지 못했었는데 메인페이지는 홈페이지를 처음에 들어가면 가장 먼저 보이는 페이지였기 때문인지 항상 메인페이지를 거칠 때마다 뭔가 크게 아쉬움이 남은 것도 사실이었다.

• 웹사이트마다 메인페이지를 왜 그렇게 공들이는 것인지, 메인 페이지 제작을 위한 기능들의 라이브러리가 왜 따로 있는지 다시 한번 느끼게 된 계기가 되었다. 3차 프로젝트에서는 메인에 꼭 시간을 조금 더 들여서라도 내가 마음에 들 정도로 꾸미고 싶었다.

3. 이번 프로젝트를 진행하면서 기억에 남는 코드들

• 사실 React를 배우고 1차 프로젝트 때는 기능 구현을 할 게 별로 없었기 때문에 이번 프로젝트 때는 정말 구글 검색들도 열심히 하면서 내가 맡았던 페이지의 기능 개발을 하기 위해 노력 했었던 것 같다.

• 처음으로 Button과 Chip이 onClick 이벤트로 하는 것은 같긴 하지만 엄연히 다른 Component 라는 것도 이번에 배웠고, 결제하기 페이지의 기능을 구현하면서 useLocation과 useNavigation 을 이용해서 데이터를 넘길 수 있는 것도 알게되었고, 쿼리스트링을 이용해 제품의 ID만 으로 백엔드에게 해당 제품에 대한 데이터를 넘겨받아 UI를 뿌릴 수 있다는 것도 직접 해보면서 확실히 배운 게 많았던 프로젝트였다.

• 하지만, 내가 직접 구현하지 못해 아쉬운 것들도 많았다. 메인에서 정렬하는 기능, 검색 기능, 페이지네이션, 상품 클릭 시 상세 페이지 이동, 좋아요 기능, 제일 중요한 장바구니 기능, 선택 삭제, 전체 삭제 같은 제일 중요한 기능들은 직접 내가 해보지 못한게 너무 아쉬웠다.

• 어떻게 보면 홈페이지에서 제일 중요한 기능들을 못한 것이나 마찬가지기는 하지만, 내가 구현한 기능들도 페이지에서 중요한 코드들이기 때문에 크게 중요도는 나누면 안될 것 같았다. 2차 프로젝트에서 못한 기능들은 3차 프로젝트에서 구현할 수도 있을 것이고, 안되면 혼자서 공부하면서 해보는 방식도 있기 때문에 아쉬움은 빠르게 접어두고 다음 프로젝트를 생각하기로 했다.

4. 프로젝트를 마치고 느낀 점

• 1차, 2차 프로젝트를 마치고 나니 프로젝트라는 것이 정말 팀으로 움직이기 때문에 팀과의 소통이 정말 중요하다는 것을 다시 한번 깨달은 것 같다. 우리 팀도 소통의 부재로 인해 서로 간의 상황이나 진행도 등등을 모른 상태로 프로젝트 마지막 날까지 왔는데 다른 팀도 몇몇 팀을 제외하고는 소통의 부재로 인해서 여러 문제를 겪는 다는 이야기를 들으니 이젠 정말 경각심을 가지고 팀원들과 소통하기 위해 노력해야겠다는 생각을 하게 되었다.

• 홈페이지에는 수많은 페이지가 있고, 이 페이지를 구성하기 위해서는 정말 다양한 기술이 사용되고 소비자를 생각 하면서 페이지를 제작해야 한다는 것을 깨닫게 된 것 같다. 단순히 클론 코딩을 한 것이긴 하지만 지금 구현하지 못할 것들을 빼면서 페이지를 구성해보니 메인 페이지가 실제로 엄청 비어보였고, 보기에도 매우 좋지 않은 결과물이 나왔기 때문이다.

• 소비자들은 자신이 원하는 제품을 찾아 홈페이지를 찾아 들어오지만, 실제로 무언가 홈페이지에 들어왔는데 메인 페이지를 포함한 홈페이지가 빈약해보이면 이 홈페이지가 가짜 홈페이지는 아닐까? 하는 생각이 들 수도 있지 않을까? 그렇기에 기획자들이 소비자들이 제일 먼저 보게되는 메인페이지를 중요시하게 생각하는 것이 아닐까? 라는 생각을 하게 되었다.

• 기능 구현도 물론 중요하기는 하지만, 제일 소비자들이 제일 먼저 보게될 UI도 중요하지 않을까? 근데 기능 구현이 되지 않은 UI는 놔두는게 맞는 것일까? UI는 그대로 있되 기능 준비중입니다 라는 문구를 띄우면 이건 괜찮은 걸까? 내가 만약 개발자가 아닌 소비자로써 이 홈페이지에 들어왔을 때 저런 상황이 발생하면 어떤 생각을 하게 될까? 답이 없는 의문만이 내 머릿속을 가득채웠다. 누군가는 기능이 없는 UI는 소비자에게 혼란이 오기 때문에 없는 게 맞다는 사람이 있고, 비어 있는 것보단 차라리 뭐라도 있는 것이 낫다는 사람도 있다. 과연 정답은 무엇일까 ...?

5. 개발 한 달 후기

• 처음 해보는 코딩 공부, 처음 해보는 사람들과의 협업 프로젝트... 어느 덧 한 달이란 시간이 흘러갔다. 아직까지도 솔직히 모르겠다. 내가 생각하고 검색하고 구현해낸 기능들이 정상적으로 작동될 때, 백엔드와의 통신이 성공했을 때 기분이 좋다. 하지만 내가 모르는 기능들을 구현할 때, 무언가가 잘 풀리지 않을 때, 검색 했는데 배운 것이 아닌 방식으로 짜여있는 코드들이 나열되어 있을 때는 사실 멘탈이 바사삭하고 터지는 게 사실이기는 하다.

• 그래도 고민하고 고민해서 결국 원하는 결과물을 얻게 됬을 때의 그 희열은 너무나 기분이 좋다. 1, 2차 프로젝트에 내가 구현하지 못했던 기능들도 어서 구현해보고 싶고, 이론 상으로만 듣고 설명들었던 내용들을 직접 코딩해서 되는지도 확인해보고 싶고 .. 모르는 것도 산더미고 알고싶은 것도 산더미인 상황이다 지금은.

• 앞으로 내가 알아야 할 정보들이 얼마나 많을 지 공부해야 할 범위가 얼마나 많을 지... 평생 공부해야 하는 직업 중 하나가 개발자라던데.. 고작 한 달 했다고 내가 무슨 말을 하겠는가! 그런 생각할 시간에 코드를 한 줄 더 짜보는 것이 나한테 더 도움이 될 것 같다. 더 열심히 해야겠다 .