[KUSITMS] 큐시즘 28기 기업프로젝트 회고

1. 프로젝트 소개

큐시즘 첫 활동이자 내 인생에서도 처음이라고 할 수 있는 팀 프로젝트를 2023.08.29 ~ 2023.09.17 동안 진행했다.

의약품 복약지도 SaaS를 제공하는 회사 HDmedi에서, 현재 노션으로 리다이렉팅되는 홈페이지를 웹 페이지로 만들어 달라는 기업 과제였다.

3주라는 짧은 시간동안 무에서 유를 창조해야 했고, 모든 팀원이 정말 열심히 해줘서 성공적인 결과를 얻었다고 생각한다! (기프팀 진짜 최고)

2. 회고 방법

현재 프로젝트 회고 스터디를 진행하면서 배운 KPT회고 방법을 사용하려고 한다.

KPT회고

Keep, Problem, Try의 약자로 Keep은 잘 한 것, Problem은 아쉬운 것, Try는 K와 P 기반으로 무엇을 할지에 대해 작성합니다

K : 잘 해와서 유지하고 싶은 것
P : 어려움을 느껴서 개선하고 싶은 것
T : 구체적인 시도할 내용

내가 개발을 한 뒤로 사실상 첫 프로젝트이고, 기획x디자인x개발이 참여한 첫 프로젝트이기도 해서 꼭 회고를 하고 싶었다. 그리고 무엇보다 배운게 많았다!

2-1. 사용한 기술 스택

React, TypeScript, Axios, Recoil, React-query, AOS 등

2-2. 내가 맡은 부분과 역할

기획1, 디자인1, 프론트2, 백2로 구성된 팀이었고, 프론트엔드 파트를 담당하였다.
주도적으로 무언가를 하고 싶었지만, 팀 프로젝트가 처음이었기에 열정을 가득 담아서 성공적인 결과물을 만드는 데 주력하였다.

전체 홈페이지의 페이지 중 절반을 맡아서 개발을 진행했다.
상세 페이지로는 홈페이지, 헤더, lms, 인재상, 채용공고, 회사정보, 공지사항 등!
그리고 홈페이지는 반응형으로도 만들었다. 적고보니 꽤 작구나..

어쩌다보니 개발파트 발표와 시연도 내가하게 되었다..!

2-3. 잘한 점

1. 누구보다 열심히 참여하고 노력한 점

첫 프로젝트기도 하고, 다른 팀원들에 비해 경험과 실력이 부족하다고 생각했다. 그래서 내가 폐를 끼치지 않으려면 그만큼 열심히 해야겠다고 생각했고 실제로 엄청난 노력을 부었다.

그래서 학교 수업을 따라가지 못해서 열등생이 되어버렸지만, 열심히 참여하여 좋은 결과물을 얻었다는 점에서는 매우 만족스럽다.

2. 체계적인 개발 및 협업 시스템을 사용해 본 점

체계적이라기에는 기초적인 개발 방법이지만, git-flow 전략을 사용한다든지 커밋, 이슈, 브랜치, PR을 생성할 때 컨벤션을 정하여 개발을 진행했다.

남들은 다 해봤겠지만, 나에게는 처음이었기 때문에 가치있었다.

3. TypeScript를 적절하게 사용한 점

타입스크립트를 사용하고는 있었지만, tsc에서 적절한 타입 추론을 해 주기 때문에 마땅히 사용하지 않았다. 그리고 다음과 같은 두 가지 상황에서 매우 유용하게 사용했다.

• 자식컴포넌트에 props를 넘겨줄 때
  타입스크립트를 쓰는 이유인 정적 타입체크를 통해 오탈자를 사전에 방지할 수 있고, 자동완성으로 인해 효율성도 증가했다.
  
• api를 받아올 때
  백에서 api를 가져올 때는 타입추론이 완전 불가능하기에, api명세서를 통해 interface를 만들어서 사용하였다. (사실 시도했는데 시간상 이유로 못했다..ㅋㅋㅋ)
  

4. 기획x디자인이 원하는 결과물을 만들어 줄 수 있었던 것

와이어프레임과 디자인이 너무 이쁘게 나왔었다. 딱 보고 느낀 것은 "이대로만 만들 면 진짜 이쁘겠다"였다. 다행히 내 화면으로 봤을 때는 원하는 결과물을 만들었다고 생각했다. 물론 반응형이 박살나서 감점을 먹었지만. 모두가 만족스럽게 진행한 프로젝트였다.

2-4 아쉬운 점

1. 협업에 필요한 타 파트에 대한 이해도 부족

기획, 디자인과 협업을 했지만 해당 파트에 대한 이해도가 많이 부족했다. IA, MVP, 와이어프레임도 뭔지 몰랐다. 무엇보다 기획 및 디자인 툴로 전부 피그마를 사용했는데, 기본적인 사용법도 익히지 못해 사소한 작업도 부탁을 했다.

그리고 올바른 협업을 위해서는, 타 파트에게 설명할 때 알아들을 수 있는 용어로 풀어서 설명하는 것이 좋다. 다만 다른 파트에 대해서 기본적인 이해는 가져야 한다고 생각하기에, 두 관점이 만나는 경계선이 어디인지는 궁금하다.

와이어프레임이 뭔지는 개발이 알아야 하고, IA나 MVP같은 건 몰라도 되지 않을까..?

지금은 조금이나마 알아들을 수 있다. 물론 피그마는 아직도 어렵고, 평생 어려울 것 같다.

2. 반응형에 대한 이해 부족

나는 반응형의 개념만 알고 있었을 뿐이지, 좋은 반응형 프로그램을 짜는 방법에 대한 이해가 전혀 없었다.
모바일과 데스크탑에서 둘다 보일 수 있으면 반응형이지! 라고 생각하고 만들었을 뿐이라, 다른 해상도를 가진 데스크탑의 화면에서 올바르게 보이지 않을 수 있다는 점을 간과했다.

실제로 내 15인치 그램에서는 매우 이쁘게 보였지만, 대표님이 보셨을 큰 모니터로 평가를 할 때는 엉망진창이었을 것이다. 그래서 개발에서 감점을 엄청 먹었다..ㅜ

그래서 이번에는 완벽한 반응형을 만들기 위해, 절대크기, 상대크기에 대한 개념을 숙지하고, 모바일화면과 데스크탑 화면의 구조를 다르게 가져가 보도록 해야겠다.

3. 시간에 쫓겨 스파게티 코드 공장이 되어버림

3주, 개발 기간만 따지면 10일 남짓 되는 시간동안 웹페이지를 만들어 내야 했다. 개발 경험도 그닥 많지 않은데다, 시간에 쫓겨 페이지를 찍어내다보니 margin과 padding을 조금씩 넣어가며 위치를 맞추고, 내 화면에서만 잘 돌아가는 코드를 만들어 내기 급급했다.

이건 물리적으로 시간이 부족했다보니 해결할 수 있는 문제는 아니지만, 다음 프로젝트에서는 개발 기간을 길게 잡고 코드리뷰, 머지퍼미션 등을 적극적으로 적용하여 좋은 코드를 작성해 보고 싶다!

2-5. 다음에 시도할 점

1. 협업을 위한 타 파트 기본적 지식 갖추기

기획적인 내용도 중요하지만, 피그마 사용법을 모른다는 것이 큰 문제라고 생각했다.
다행히 이번 플젝을 진행하면서 기본적인 사용법을 익힐수 있었다.

전체 선택 - 우클릭 - Select Group - Svg Export는 평생 까먹지 않을 듯!

2. 상대 크기인 rem만을 사용하기

rem이 무엇인지는 알고 있었는데, 반응형 웹을 위해 많이 사용한다는 점은 처음 알았다. px과 rem의 차이도 자세히 알게 되었으니 다음 프로젝트에는 rem을 전부 사용해야겠다.

3. 효율적이고 깔끔한 코드 작성하기 by 코드리뷰

최종 프로젝트인 밋업데이 프론트 팀원으로 나보다 경험 많고 잘하는 팀원을 만나게 되었다..! 주기적으로 코드 리뷰도 하고 많은 점을 배워가면서, 깔끔한 코드를 지향해 보도록 하자.