[포스코x코딩온] 웹 풀스택 과정 10,11주차 회고 | 프로젝트#2

 

Node.js 수업이 마무리되고, 새로운 팀원들과 2차 프로젝트를 진행하였다.

💡 프로젝트 주제 정하기

첫번째 팀회의에서 아래의 3가지 아이디어가 나왔다.

아이디어 1) 대중교통 이용 시, 이용객 각자의 하차역을 알 수 있는 웹페이지
아이디어 2) 스터디 모집 플랫폼
아이디어 3) 챗GPT를 활용한 IT 면접 연습

 

대중교통 이용객의 하차역을 표기하는 웹페이지의 경우, 유저를 끌어들일 수 있는지를 생각했을 때, 그 활용도가 높지 않을 것으로 생각되어, 다른 두 아이디어를 중점으로 계속해서 논의를 진행하였다.
스터디 모집 플랫폼의 경우, 실제로 스터디원을 모집하려는 사람들에게 유용한 페이지가 될 것이라는 장점이 있지만, 이미 여러 플랫폼에서 제공하고 있는 기능이라 망설여졌다. 챗GPT open ai를 활용하여 IT분야 취업을 위한 면접 연습 기능을 제공하는 페이지의 경우, 최신 기술을 활용할 수 있다는 점과 아직 유사한 서비스가 없다는 점이 가장 좋았지만, 제공 서비스가 너무 단순해질 수 있다는 아쉬움이 있었다.

 

팀원들과 논의하면서 이렇게 장단점을 짚어 나가다보니, 이 두가지 아이디어를 합치면, 서로의 단점을 보완해줄 수 있을 것이라는 생각이 들었다.

이렇게 해서 정해진 프로젝트 주제는 아래와 같다.

• 주제: 개발자를 위한 IT면접 기반의 스터디 플랫폼 (Do-IT)
  챗GPT가 면접관이 되어 특정 CS과목의 면접을 실행한다. 사용자는 면접 답변의 점수에 따라 포인트를 획득할 수 있으며, 해당 포인트를 이용하여 스터디를 개설하거나 참여할 수 있다.
  면접 연습을 통해 포인트를 획득한 사용자만 스터디에 참여할 수 있다는 점에서, 일반적인 스터디 플랫폼과 차별점이 있다고 생각되었다.

📌 협업 툴

• git
• fork
  git을 관리하는 데에 굉장히 유용했다. 기능마다 이슈를 생성하여 브랜치명과 일치시켰고, 기능 구현이 완료되었을 때 merge 하는 방식으로 진행했다. 해당 기능을 구현하기 위해, 어떤 코드가 수정되었는지 비교적 쉽게 파악할 수 있어 협업에 큰 도움을 받았다.
• figma
  기본적인 모바일, 웹버전의 디자인을 만들어와주신 팀원분 덕분에 페이지가 사용자에게 어떻게 보여질지, 여기서 어떤 기능을 수정하는 것이 더 편할지를 그려보기 수월했다. 추후 CSS 작업에 있어서도, 피그마 상에서 디자인한 폰트 크기, 위치, 간격 등을 확인하며 그대로 구현하면 된다는 점에서 굉장히 유용했다.
• slack
• miro
• notion

📌 기술스택

• JavaScript
• Node.js
• aws EC2
• SASS (+BEM 구조)
  SASS의 mixin기능을 사용하여, 중복되는 디자인의 코드를 간결하게 수정할 수 있었다.
• RDS
• chat GPT (open ai)
• slack bot (api)

📌 협업방식

• 스크럼을 통한 애자일 방법론 실천
• 스프린트 (프로젝트 기간 2주 동안 1주일을 기준으로 잡아 스프린트 진행)
• MVP (minimum vehicle practice)

💡 1) 주제 선정

회고록 초반에 언급한 바와 같이, 회의를 통해 '개발자를 위한 IT 면접 기반의 스터디 플랫폼'을 주제로 선정하였다.

💡 2) 기능 로직 및 DB 구조 설정

구현하고자 하는 기능의 자세한 로직을 설정한 뒤, 그에 필요한 DB 구조를 설정하였다.

 

※ 주요기능

chat GPT를 활용한 CS 면접 연습

• 연습하고자 하는 CS 주제를 선택하면, GPT가 면접관이 되어 면접이 시작된다.
• 총 3개의 질문이 주어지며, 마지막 답변이 전송되면 사용자의 답변에 대한 점수와 피드백을 확인할 수 있다. 사용자는 점수만큼 포인트를 획득할 수 있다.

스터디 개설 및 참여 (포인트 차감)

• 사용자는 획득한 포인트를 이용하여, 스터디 개설을 신청하거나 이미 개설된 스터디에 대한 참여를 신청할 수 있다.
• 면접 연습을 통해 획득한 포인트를 이용하여, 무작위한 스터디 참여를 방지할 수 있다.(신규 스터디 개설 신청: 100포인트 / 기존 스터디 참여 신청: 30포인트)
• 스터디 개설자는 참여를 신청한 사람의 증빙링크(github, velog, tistory 등)를 확인할 수 있으며, 확인 후 스터디 참여 승낙 여부를 결정할 수 있다.

운영진의 스터디 개설 승인

• 사용자가 신규 스터디를 개설 신청한 경우, 슬랙봇을 통해 운영진에게 스터디 신청 내용과 신청자의 기본 정보가 전달된다.
• 운영진은 신청된 스터디 소개 내용과 신청자의 기본정보에 포함된 증빙링크(github, velog, tistory 등)를 확인 할 수 있다.
• 운영진은 확인된 정보를 기반으로 승인 또는 거절을 할 수 있다.

마이페이지 - 나와 관련된 스터디 확인

• 로그인 후, 마이페이지에서 자신과 관련된 스터디를 모두 확인할 수 있다.
• 자신이 개설 신청 또는 참여 신청한 스터디의 승낙여부를 확인할 수 있다.

💡 3) 페이지별 레이아웃 설정

• 메인페이지 - 헤더, 면접 소개, 스터디 소개, 스크롤 인터렉션
• 면접 진행 페이지 - 주제 선택, 기본적인 채팅 구조
• 스터디 목록 페이지
• 스터디 개설 페이지
• 스터디 상세 페이지 - 스터디 상세 내용, 개설자 및 참여자 정보 확인 가능 (개설자: 신청한 사람 확인 가능)
• 마이페이지 - 기본 정보 확인 및 수정, 관련 스터디 목록

💡 4) 담당 기능 구현

내가 담당한 기능은 아래와 같다.

• 사용자, 스터디, 스터디원의 n:n 관계를 다루어 스터디 개설 및 참여신청 기능 구현
• 마이페이지 생성

💡 5) CSS 작업

각자 담당한 페이지에 대한 CSS 작업을 진행하였다.
1차 프로젝트 때 받았던 피드백에 따라, 모바일 버전의 CSS 작업을 먼저 진행한 뒤에 웹 버전을 작업하였다.
모바일에서는 hover가 작동하지 않기 때문에, 이러한 불필요한 코드는 작성하지 않는 것이 좋다는 피드백도 반영하였다.

 

📌 후기

'아, 개발에서 협업은 이렇게 하는 것이구나' 배울 수 있었던 프로젝트였다고 한마디로 정리할 수 있을 것 같다. 혼자서 수업만으로 알 수 없었던 새로운 라이브러리, 협업 툴을 알 수 있었다. 특히, 매일 진행했던 스크럼 회의를 통해, 팀원 전체의 프로젝트 작업 진행 정도를 파악하고 보충이 필요한 부분을 서로 공유할 수 있었다.

잘 풀리지 않았던 부분을 스크럼 회의에서 공유하여, 팀원들의 아이디어를 얻을 수 있었고, 구현된 기능에 대해 말하면서 새롭게 수정하거나 추가하면 좋을 것 같은 부분들에 대하여 실시간으로 논의할 수 있었다. 매번 회의 때마다, 서로의 작업을 공유하면서 팀원들 모두 적극적으로 새로운 아이디어를 공유하였고, 다른 팀원의 피드백을 거리낌없이 받아들이고 고려하는 태도 덕분에 지속적으로 프로젝트가 발전하는 방향으로 흐를 수 있었다.

 

스크럼 회의에 더불어, 일주일 동안 기본적인 기능을 모두 구현하는 것을 목표로 스프린트를 진행하였다. 확실히, 단기 목표를 세우니 프로젝트에 대한 집중도가 월등히 높아질 수 밖에 없었다. (그리고 생각보다 이런, 고도의 집중력을 요구하는 타이트한 작업이.. 내 적성에 맞는 것 같다.)

 

개발 경험이 나보다 풍부한 팀원들에게 민폐가 되지 않도록 개인적으로 더 열심히 노력했던 프로젝트였는데, 노력한 만큼의 성과가 따라준 것 같아 다행이다.