2022년 4월 11일(월) ~ 2022년 5월 20일(금), 6주간 진행했던 SSAFY 2학기 자율 프로젝트를 회고하고자 한다. 공통, 특화 때 React를 했던 경험으로 이번 프로젝트를 진행할 때는 나름 수월하게 진행했다고 생각한다.

1. 알고풀자

알고리즘 문제 추천 서비스 "알고풀자"는 나의 현재 알고리즘 능력을 분석하고 취약점을 파악해 이를 보완하기 위한 문제를 추천해주는 서비스입니다.
막 풀지 말고 ❌ 알고 풀자❗

2. 프로젝트 기획

2-1. 기획 의도

이 프로젝트를 기획한 의도는 다음과 같습니다.
요즘 IT 직무에 대한 선호도가 높아졌습니다. 이로 인해 개발자 채용 시장이 확대되고 있다는 기사들을 많이 볼 수 있습니다. 이는 기사 뿐만 아니라 실제 채용 공고로도 확인할 수 있는 사실입니다.
개발자로 취직하기 위해 꼭 거쳐야 하는 과정은 무엇일까요?
바로 코딩 테스트입니다. 코딩 테스트가 중요해짐에 따라 1일 1 알고리즘이라는 말도 생겨나고 있습니다. 이에 따라 알고리즘 문제 자체를 제공해주는 사이트는 많이 있습니다.
하지만 문제가 많아서 풀 문제를 고르는 데에도 시간이 걸린다는 단점이 있습니다.
이 외에도 알고리즘 문제를 계속해서 풀며 현재 나의 알고리즘 실력을 객관적으로 파악하기 힘들다는 점 등의 단점이 있었습니다. 그래서 저희는 이런 단점을 보완할 수 있는 서비스를 고안했습니다.
사용자의 풀이 내역을 기반으로 취약한 알고리즘 문제 유형을 분석하고 사용자별 맞춤형 문제를 추천해줍니다.

2-2. Solved.ac와의 차별점

Solved.ac처럼 BOJ에 의존하고 있는 것은 맞지만, 알고리즘 문제 최대 사이트인 BOJ의 데이터를 활용하는 것은 그만큼 의의가 있다고 생각했습니다. Solved.ac는 데이터를 통계적으로 표현하는 것에 그치는 반면 저희는 데이터를 분석해서 유저에게 인사이트를 제공하려고 했다는 점이 큰 차이입니다. 더군다나 저희는 유저가 편리하게 학습에 전념할 수 있도록 추천 서비스와 위젯을 제공하며, 차후 더욱 다양한 콘텐츠로 찾아뵐 예정입니다.

3. 개발 페이지

3-1. 로고

알고풀자의 영자인 Algopulza의 A를 따왔습니다. 오른쪽은 연필 모양으로 알고리즘 문제를 푸는 것을 암시합니다.

3-2. 랜딩 & 로그인 페이지

알고풀자의 페이지에 접속하면 첫 화면으로 랜딩 페이지이자 로그인 페이지를 볼 수 있습니다.
로그인, 비회원으로 이용, 회원가입 3가지 버튼이 있습니다.
랜덤과 검색 페이지를 사용해보고 추천 문제를 제공받고 싶다! 하면 회원가입을 진행합니다.

3-3. 비회원 & 회원가입 페이지

비회원으로 이용 버튼을 누르면 모달창이 나타납니다.
모달창에서는 회원가입 유도 버튼과 계속 비회원으로 이용하는 버튼이 있습니다.

3-4. 비회원 로그인

비회원은 로그인을 안 하기 때문에 ‘로그아웃’ 버튼 대신 ‘뒤로가기’ 버튼으로 랜딩
페이지로 이동 가능합니다.

비회원으로 이용하면 추천 서비스를 이용할 수 없기 때문에 랜덤 페이지로 이동합니다.
여기서는 오른쪽 상자인 ‘수준에 관계 없는 추천’과 유형 별, 레벨 별 랜덤 문제를 추천 받을 수 있습니다.
그리고 검색 페이지까지 이용 가능합니다.
추천 페이지나 마이페이지를 이용하려면 로그인이 필요합니다.

3-5. 추천 페이지

1) 첫 화면

알고풀자 아이디로 로그인을 하면 추천 페이지에 추천 문제들이 제공되는 것을 확인할 수 있습니다.

2) 선물 상자 클릭

먼저 배너의 선물상자를 누르면 위와 같이 카드를 추천해줍니다.
왼쪽은 수준을 고려해서 추천을 해주고, 오른쪽은 수준에 관계없이 랜덤으로 문제를 추천해줍니다.
버튼을 누를 때마다 선물상자와 새로운 문제를 추천해줍니다.

3) 추천 카테고리

가장 위에는 최근 많이 푼 문제 유형을 추천받을 수 있습니다.
바로 아래에서는 반대로 적게 푼 문제 유형을 추천받을 수 있습니다.
또한 풀었던 문제에서의 추천, 다른 사용자가 많이 푼 문제 유형에 따른 추천을 받아볼 수 있습니다.

3-6. 랜덤 페이지

1) 유형 랜덤

유형 랜덤을 누르면 코딩테스트 빈출 유형 8가지를 선정해 유형별 랜덤 문제를 제공합니다.
배너 아래에 #구현, #다이내믹 프로그래밍, #그래프, #그리디, #정렬, #너비 우선 탐색, # 깊이 우선 탐색, #조합론 순서대로 각 유형 당 5개씩 문제를 추천해줍니다.

2) 레벨 랜덤

레벨 랜덤을 누르면 배너 아래에 #브론즈 #실버 #골드 #플래티넘 문제 순서대로 각 유형 당 5개씩 문제를 추천해줍니다.
문제 카드를 클릭하면 문제를 풀 수 있는 백준 사이트로 이동하게 됩니다.

3-7. 검색 페이지

1) 첫 화면

검색 페이지에서는 모든 문제를 확인하고, 레벨과 태그별, 문제 제목으로 필터링할 수 있습니다.
검색 페이지에서도 마찬가지로 문제 제목을 클릭하면 문제를 풀 수 있는 백준 사이트로 이동하게 됩니다.

2) 필터링

좌측 상단에 티어, 레벨, 유형에 대해서 필터링을 하면 해당 조건에 맞는 검색 결과들만 보여집니다.

3) 검색

우측 상단에 검색을 한 뒤 엔터나 돋보기 모양을 누르면 좌측 상단의 조건과 더불어 해당 검색어가 들어간 결과까지 같이 필터링되어 보여집니다.

3-8. 마이 페이지

1) 첫 화면

단순히 추천만 받는다면 현재 내 상태가 어떤지 알 수가 없습니다. 이는 마이페이지를 통해 해소할 수 있습니다.
마이 페이지는 사용자의 데이터를 기반으로 현재 상태를 분석, 기록 등을 해주는 페이지 입니다.

2) 경험치 등급표

경험치 등급표는 좌측 상단 뱃지를 누르면 모달창으로 띄워지면서 경험치 등급 체계에 대해서 설명을 해줍니다.

3) 타이머

시간 관리는 코딩 테스트에서 중요한 부분 중 하나입니다. 타이머는 풀이하는 데에 걸리는 시간을 체크하고 저장해둘 수 있습니다.
제출 버튼을 누르면 현재 상태와 더불어 제출 여부에 대한 모달창이 뜹니다.

4) 핵심 유형 분석

분석 탭은 크게 6개로 나뉩니다.
핵심 유형 분석은 주요한 8개의 태그에 대해서 각 태그 당 몇 문제씩 풀었는지 %로 나타내줍니다.

주요 유형별 해결비율 = (유형별 해결 문제 수) / (유형별 전체 문제 수)

5) 유형별 해결 문제 개수

유형별 해결 문제 개수는 많이 풀었던 유형에 대해서 해결 문제 수를 보여줍니다.

6) 사용언어 비율

사용언어 비율은 제출한 언어에 대한 % 비율을 보여줍니다.

7) 월별 문제 풀이 개수

월별 문제 풀이 개수는 매년마다 그룹을 묶어서 월별로 문제 풀이 개수를 보여줍니다.

8) 취약점

취약점은 유저가 적게 푼 유형과 유형별 취약점수 계산해 워드 클라우딩으로 취약점을 보여줍니다.
취약점수 = (실패비율) * (태그별 가중치)

실패비율 = (태그별 tried 수) / (태그별 전체 제출 횟수)
태그별 가중치 = (태그별 문제 수) / (전체 문제 수)

9) 도움말

도움말은 마이 페이지를 처음 이용하는 사람들에게 해당 분석 서비스를 이용하는 방법에 대한 설명 문구를 넣어놨습니다.
풀이 기록이 없는 사람은 도움말이 먼저 보이도록 처리하였습니다.

10) 즐겨찾기 & 풀이기록

마지막 기록 부분은 각 문제에 대해서 즐겨찾기를 한 문제들을 카드 형식으로 보여줍니다. 즐겨찾기 기능은 다시 풀어볼 문제를 체크해둘 때 유용하게 사용할 수 있습니다. 추천 페이지나 랜덤 페이지에서 별모양을 클릭하면 여기서 확인할 수 있습니다.
풀이 기록은 타이머를 이용해 제출한 문제들을 기록해줍니다.
만약 백준에서 이미 풀이한 풀이 기록 정보를 저장하고, 추천 데이터로 이용하고 싶다면 풀이 기록 등록을 통해서 할 수 있습니다.

4. 기대 효과

알고풀자를 통해 얻을 수 있는 기대 효과는 3가지로 말씀드릴 수 있습니다.

1) 객관적으로 실력을 파악할 수 있습니다. 실제 풀이 기록을 바탕으로 한 데이터를 제공해 객관적으로 실력을 파악하고, 더 나은 방향으로 학습이 가능합니다.
2) 효율적으로 실력을 향상시킬 수 있습니다. 개인별 맞춤 문제를 풀며 문제를 고르는 데 소비하는 시간을 절약할 수 있습니다.
3) 1일 1알고리즘 습관 형성이 가능합니다. 위젯 사용과 등급 체계를 바탕으로 문제풀이 습관을 형성할 수 있습니다.

5. 회고

5-1. 잘한 점

(1) 커뮤니케이션 : Gather, Notion

• Gather
  이번에도 게더타운에서 회의를 진행했습니다. 다같이 회의도 가능하고 원하는 사람하고만 대화도 가능해서 협업에서 유용하다고 생각했습니다.

• Notion
  

이번에 노션을 이용할 때 깔끔하게 양식을 만들어서 사용하였습니다.
다들 노션을 잘 이용해줘서 협업과 데일리 스크럼할 때 편했습니다.

(2) 협업 툴 사용 : Gitlab, Jira

• Gitlab
  
  

이번에 git도 지난 프로젝트와 마찬가지로 체계적으로 구조를 짰습니다.
특히 이번에는 FE/BE/Bigdata 등 큰 카테고리가 많았기 때문에 각자 feature 브랜치를 파서 작업을 하고 해당 브랜치로 머지시켰습니다.

Branch 컨벤션

• master : 배포할 완성 프로젝트 브랜치
• develop : 개발 완료한 기능(feature 브랜치)을 통합하는 브랜치
• frontend-nextjs : nextjs 기능을 통합하는 브랜치
• frontend-test : frontend 빌드 테스트용 브랜치
• backend : 개발 완료한 backend 브랜치
• bigdata : 개발 완료한 bigdata 브랜치
• feature/[티켓넘버] : 그 외 개발 브랜치

Commit 컨벤션

• Jira
  

이번 자율 프로젝트 지라도 우하향 그래프를 잘 찍었습니다. 그리고 매주 estimate를 40시간 기준으로 잡아서 시간 조절을 잘 하였습니다.

EPIC : 큰 기능

• STORY : 개발 작업
  • SUB-TASK : 기능 구현 단위
• TASK : 개발 외 작업
  • SUB-TASK : 개발 외 작업에 대한 SUB-TASK
    

• 스프린트
  • 1주일 단위 진행
  • 매주 월 오전 스크럼에서 어떤 에픽 생성할지 논의
  • 각자 생성 후 검토, 오후 1시에 스프린트 시작
• 에픽
  • 기능명세 페이지구분 사용
  • 태그 []는 기획, 개발 등 완전히 다른 업무를 기준으로 나눔
  • 해당 태그 내에서 기능별 업무/페이지별로 다시 나눔
• 스토리
  • 기능명세 세부기능명 사용
  • 개발 에픽 : [MO], [BE] 등 도메인별 태그와 상세 구현 내용 기입
  • 개발 외 에픽 : 구체적 내용만 기입
• 태스크
  • 기타 문서작업 등 (ppt 제작, 발표, 회의참석 등)
• Estimate
  • 인당 주 40시간 이내로 작성
  • 한 STORY 당 4시간 이내 권장 (넘는 경우 세분화 고려)

예)

• EPIC
  • [기획]
  • [설계]
  • [사전학습]
  • [개발]
  • [배포]
  • [산출물]
• STORY
  • BE
  • FE
  • DA

(3) Front : Figma, React

• Figma
  

중간 중간 기획이 바뀔 때마다 피그마에 와서 배치를 바꿨습니다.
덕분에 수월하게 협업하면서 소통하고 코드를 짤 수 있었습니다.

• React => Nextjs, TypeScript
  이번에도 React로 프로젝트를 진행하였습니다. 프로젝트를 진행하던 중 새로운 도전을 하기 위해 TypeScript를 도입하였습니다. 처음에는 타입을 다 지정해 줘야 하는 점이 많이 불편했지만, 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거하기 위해 사용했습니다.
  Next.js는 컨설턴트님께서 SEO의 이유를 들면서 이번 기회에 한 번 해보라는 말을 해주셨습니다.
  우리는 고민하다가 백엔드가 API로 바빠서 상대적으로 여유롭던 3주차에 과감하게 새롭게 Next.js로 다시 짜기로 마음 먹었습니다.
  처음에는 많이 헤맸지만 TypeScript와 마찬가지인 이유로 이번 기회가 아니면 새로운 걸 배울 기회가 언제 있을지 몰라서 도전하게 되었습니다.

• Next.js 사용 이유
  여기서 Next.js에 대해 좀 더 알아봤습니다.
  대부분 사람들이 말하기를, SEO(Search Engine Optimization)를 위한 Server-Side Rendering(SSR)을 가능하게 하기 때문에 Next.js를 사용한다고 합니다. 왜냐하면 React는 기본적으로 Client Side Rendering(CSR)을 하기 때문입니다.
  React는 웹사이트를 요청했을 때 빈 html을 가져와 script를 로딩하기 때문에, 첫 로딩 시간도 오래걸리고 SEO에 취약하다는 단점이 있습니다.
  반면, next.js는 pre-reloading을 통해 미리 데이터가 렌더링된 페이지를 가져올수 있게 해주므로 사용자에게 더 좋은 경험을 주고, 검색 엔진에 잘 노출 될 수 있도록 해주는 SEO에서도 장점을 얻을 수 있습니다.
  이 경험으로 인해 한 번에 새로운 것들을 2개나 시도해서 애를 많이 먹었지만, 추후에는 적응하여 무사히 프로젝트를 마무리 지을 수 있어서 다행이라고 생각합니다.

(4) 라이브러리 적용

이번에 코드를 짜면서 다양한 라이브러리를 이용하였습니다.
styled-componenets, MUI, ApexCharts, Slick 등을 사용하였는데 이전에는 다른 분이 양식을 잡아준 것을 고쳤습니다. 그러나 이번에는 공식문서를 제대로 참고하면서 옵션을 이것저것 바꿔가면서 다양한 시도를 해봤다는 점이 잘했다고 생각합니다.
덕분에 에러가 날 때 빠르게 에러를 파악하고 해결할 수 있었습니다.

(5) 시연 시나리오 및 Readme 기술 스택 작성

• 시연 시나리오
  시연 시나리오를 작성하면서 우리 페이지의 동작에 대한 이해도를 높였습니다. 모든 기능들을 실행하고 캡쳐하면서 설명을 달았는데 두루뭉실하게 넘어갔던 기능들도 다시금 생각하게 되는 시간이었습니다.

• 기술 스택 작성
  처음에는 FE의 기술스택만 작성하려고 했습니다. 그러나 작성하면서 잘 작성하고 싶은 욕심이 났습니다. 그래서 기술 스택을 뱃지와 테이블을 이용해서 보기 좋게 작성하였습니다.
  ㅤ

  
  
  

5-2. 아쉬운 점

(1) Recoil

이번에도 상태 관리 라이브러리는 Redux가 아닌 Recoil을 사용하였습니다.
원래는 Redux를 도전해보고 싶었으나 프로젝트 남은 기간이 2주 밖에 안 남았던 점과 같이 협업하는 팀원이 둘 다 안 해봤기 때문에 상대적으로 쉽다고 생각한 Recoil로 코드를 짜게 되었습니다.
특화 프로젝트에서 봤던 경험이 있었기 때문에 이번에는 빠르게 적응할 수 있었습니다.

5-3. 배운 점

이미 두 번의 React 경험과 저번 특화 프로젝트의 빅데이터 도메인 프로젝트를 진행해본 바가 있어서 이번 프로젝트를 진행할 때 많이 수월했던 것 같습니다. 이번에 배운 점은 지난 프로젝트들과 달랐던 점인 TypeScript, Next.js 를 적용했던 점입니다. 처음 써보는 언어였지만 협업하는 팀원과 같이 적용해 나갔던 점이 인상 깊었습니다. 또한 ApexCharts는 공통 때 써봤던 라이브러리 였는데 이번에 본격적으로 여러 차트를 다뤄보면서 제대로 써봤습니다. 에러와 계속 싸운 덕분에 해당 라이브러리에 대한 이해도 많이 올라갔습니다. 다음에 새로운 것에 도전하게 된다면 그 때도 동료들과 같이 잘 해결할 수 있을 것 같습니다.

5-4. 향후 발전 방향

이번에 FE 팀장을 맡으면서 많은 작업을 했던 것 같습니다. 그러면서 다양한 것들을 적용시켜 봤는데, 앞으로 해볼 프로젝트에서도 이것저것 시도해보면서 자신한테 맞는 라이브러리를 사용할 수 있을 것 같습니다.
또한 이번 프로젝트에 대한 피드백들을 사용자에게 받고 이번에 같이 작업했던 팀원분들과 같이 이어서 좀 더 튼튼한 웹사이트를 만들어 갈 예정입니다.
큰 이슈 없이 서로 좋게 마무리 잘 할 수 있어서 좋았습니다. 결과를 떠나서 너무 좋았던 프로젝트 였습니다. 팀원분들께 정말 감사합니다.

6. 결과

3등 이내에 들지 못 했지만 개인적으로 만족했던 프로젝트였습니다.