2022년 1월 10일(월) ~ 2022년 2월 18일(금), 7주간 진행했던 SSAFY 2학기 공통 프로젝트를 회고하고자 한다. 지금까지 '포트폴리오 만들어야지', '정리해야지' 말로만 하다가 이번에 정말 제대로 된 프로젝트를 해보면서, 이번 만큼은 기필코 정리해보고자 이 회고를 작성한다.

1. Drawing Dream

비대면 통합 교육 플랫폼 "Drawing Dream"은 학생부터 교사, 모두에게 필요한 맞춤형 학습 도우미 입니다. 이 프로젝트를 결정한 이유는 다음과 같습니다.
현재 고등학생들은 수업을 듣기 위해, 다양한 플랫폼을 이용하고 있습니다. 주변에 아는 고등학생 친구가 있어 물어보니 다음과 같이 답을 해주었습니다.

1. 선생님한테 공지 받는 방법 : 카카오톡
2. 수업 자료 받는 방법 : 카카오톡 또는 구글클래스 플랫폼
3. 출석체크하는 방법 : 구글클래스 플랫폼
4. 화상 수업 들어가는 방법 : 구글클래스 플랫폼에 선생님이 줌 링크 게시 > 줌 입장

1. 선생님한테 공지 받는 방법 : 카카오톡
2. 수업 자료 받는 방법 : 구글클래스 플랫폼
3. 출석체크하는 방법 : 구글클래스 플랫폼
4. 화상 수업 들어가는 방법 : 구글 미트

위와 같이 여러 프로그램을 동시에 사용하기 때문에, 현재 상용화된 비대면 교육 서비스들은 학생의 입장에서 많이 번거롭습니다.
따라서 이러한 문제를 해결하기 위해, 저희는 Drawing Dream을 출결관리, 소통, 화상 강의 등 다양한 작업을 하나의 플랫폼에서 해결할 수 있는 “all-in-one 통합 사이트”로 개발하고자 했습니다.

2. 프로젝트 기획

이 프로젝트를 생각하게 된 계기는 아이디어 회의를 하면서, 코로나 시대에 맞게 비대면과 관련된 주제를 하기로 결정하었습니다. 그러다가 팀원의 친구분께서 도움을 주셔서 구체화된 아이디어가 두서에 오르게 되었습니다. 그 프로젝트가 바로 저희가 개발한 비대면 통합 교육 플랫폼입니다.

3. 와이어 프레임

3-1. 로고

서비스 로고는 드로잉 드림의 초성을 교육 플랫폼에 맞게 연필로 형상화해서 사용했습니다.
컬러는 노란색이 두뇌 활동을 자극하고 신체 활동을 왕성하게 만들어주는 색으로 알려져있기 때문에 학생들을 위한 저희 서비스에 적합한 색이라고 생각해서 포인트 컬러로 결정했습니다.

3-2. 위젯

저희는 정말 많은 기능을 탑재하고 있는데 그 중에서 대표할 수 있는 것이 바로 위젯 기능입니다.
그 이유는 Drawing Dream이 단순히 수업을 듣기 위한 공간이 아닌, 자율적으로 학습할 수 있는 공간을 핵심 코어로 두었기 때문입니다. 또한 해당 위젯들은 원하는 것들을 넣고 뺄 수 있도록 구성하였습니다.

위젯 종류

• 오늘의 수업
  오늘의 수업을 볼 수 있고 교사가 수업을 개설하면, 수업 자료 다운 및 강의실 입장이 가능
• 학사 일정
  한 달 간의 일정을 볼 수 있고, 학사 일정 표시 및 D-DAY를 표시
• 체크리스트
  체크리스트 추가 및 삭제 체크 표시를 할 수 있음
• 메모
  textarea로 메모 추가 및 수정 삭제 가능
• 성적 추이
  교사가 성적을 입력하면 학년 / 학기 / 중간, 기말 순으로 평균을 표시
• 오늘의 공부시간
  타이머를 이용하여 공부시간을 잴 수 있고, 각 시간 별 공부시간을 가로 막대 그래프로 표시
• 시간표
  한 학기 시간표를 표시

4. 회고

4-1. 잘한 점

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

• Mattermost
  

Mattermost에서 컨설턴트님과 코치님도 볼 수 있도록 서로의 의견을 공유하며, 자유로운 커뮤니케이션을 하였습니다. 덕분에 코치님도 우리 프로젝트의 상황을 실시간을 알 수 있어서 피드백을 원활히 줄 수 있었고, 좋은 인상을 남길 수 있었습니다.

• Notion
  

Notion에 참고자료, 회의록, API 명세서 등의 자료를 남겨서 모두가 참고할 수 있도록 관리하였습니다. Notion을 제대로 활용한 것이 이번이 처음이라, 나중에 관련 자료를 찾아볼 때 도움이 많이 되어서, 노션 관리를 잘하면 좋다는 것을 느꼈습니다.

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

• Gitlab
  

Gitlab을 프로젝트로 하면서 제대로 활용해본 것 같습니다.
처음에는 어떻게 해야할지 감이 안 잡혔으나, 컨벤션을 정하고 하나 하나 규칙을 정하며 행하다 보니 익숙해졌습니다.
이를 통해 1,000 커밋 달성도 이룰 수 있어서 너무 뿌듯했습니다.

Branch 컨벤션

• master
  • 배포할 완성 프로젝트 브랜치
• develop
  • 개발 완료한 기능(feature 브랜치)을 통합하는 브랜치
• feature/~~
  • 기능 단위로 개발을 진행하는 브랜치
• release/~~
  • develop 브랜치를 가져와서 배포 전 최종적으로 확인하고 new version으로 확립하는 브랜치

Commit 컨벤션 ( 🖇️https://udacity.github.io/git-styleguide/ 참고 )

• feat: A new feature
  • 새로운 기능
• fix: A bug fix
  • 버그 수정
• docs: Changes to documentation
  • 문서 내용
• style: Formatting, missing semi colons, etc; no code change
  • 세세한 변경 사항
• refactor: Refactoring production code
  • 코드 리팩토링 (성능 차원)
    test: Adding tests, refactoring test; no production code change
  • 테스트 코드
    chore: Updating build tasks, package manager configs, etc; no production code change
  • 빌드 및 설정 파일

Rules

• feat: ~~ 형태로 작성한다.
• 끝에 마침표를 사용하지 않는다.

• Jira
  

이번 프로젝트에서 처음 다뤄 보는 것이 정말 많았던 것 같습니다.
Jira 역시 처음 다뤄보는 툴 중 하나였습니다. 프로젝트 관리 툴로 프로젝트 진행 상황을 쉽게 파악하고 관리할 수 있었습니다. 스프린트, 에픽, 스토리의 개념을 제대로 안 잡고 시작을 해서 처음에는 많이 헷갈렸지만 쓰다보니 알 수 있었습니다.
초반에는 스프린트는 시작을 했는데 repoter나 estimate 설정을 안 건들여서 코치님이 팀장님 혼자서만 일한다고 말씀을 해주셔서 잘못된 것을 알 수 있었습니다.
덕분에 subtask나 다른 기능들도 알 수 있었고, 갈수록 Jira에 익숙해져 갔습니다. 최종적으로는 위와 같이 아름다운 우하향 그래프가 나오게 되었습니다.

Sprint

• 업무 기간 단위
  • duration 1 week (1주 단위로 진행)
• Epic
  • 업무의 큰 분류 (카테고리 느낌)
  • 여러 Story들의 집합
  • ex) 회원 관리 기능
• Story
  • 작은 업무를 구체적으로 명시
  • Epic에 속하는 업무 단위
  • 하나의 Sprint 안에서는 완료할 수 있도록 구성
  • [FE] , [BE], [공통] 라벨링 사용
  • ex) [FE] 로그인 페이지 구현
  • ex) [BE] 로그인 REST API 구축
• Sub Task
  • Story 하위 작업
  • Story 단위가 클 경우, Story 진행에 있어 필요한 작업을 Sub Task로 등록
  • Sub Task가 모두 완료되어야 Story 완료
• Assignee
  • 해당 업무의 담당자
  • FE / BE 팀별 회의로 담당자를 배정
• Estimate
  • 해당 업무의 점수
  • 업무를 진행하는데에 걸리는 시간 ( 난이도 유추 가능 )
  • FE / BE 팀별 회의로 해당 업무에 대한 점수를 부여
  • 최대한 각 인원이 균등한 점수를 달성할 수 있도록 역할 분담
    

(3) Front : Figma, JS, React

• Figma
  

이번 프로젝트에서 피그마 역시 처음으로 제대로 다뤄본 와이어 프레임 프로토 타입이었습니다. 이전에는 카카오 오븐으로 해보았으나 이번에 제대로 프로젝트를 해보면서 피그마에 도전해봤습니다. 팀원 중에 피그마를 써본 사람이 없어서, 먼저 나서서 기능들을 빠르게 살펴서 알아보았습니다. 그렇게 팀원들에게 알려주고 나니 다들 빠르게 익숙해져서 와이어 프레임을 완성할 수 있었습니다.
덕분에 처음 기획에서 세부적으로 많은 와이어 프레임을 빠르게 만들 수 있었습니다.

• JS
  자바스크립트는 1학기에 잠깐 사용한 적은 있지만 제대로 사용해 본 적은 없었습니다. 이번 프로젝트에서 자바스크립트를 제대로 사용해 보면서 자바스크립트 문법에 좀 더 익숙해지는 기회를 가지게 되었습니다.

• React
  React 역시 처음 써본 웹 프레임워크 였습니다. 1학기에는 vue만 사용을 해봤는데, 취업시장을 살펴보니 react를 선호하는 곳이 많아서 이번 기회에 react를 사용하게 되었습니다. 다들 제대로 써본 것은 처음이었지만 열심히 공부하면서 개발을 하여, 금새 익숙해질 수 있었습니다. 또한 styled-componenets도 사용하였는데, 처음에는 어려웠지만 쓰다보니 엄청 편한 것을 알 수 있었습니다.

(4) 공통코드

공통코드라는 존재를 모르고 있었습니다. 그러다가 ERD를 짜면서 데이터 관리에 대해서 얘기하고 있을 때 코치님과 컨설턴트님께서 공통코드에 대해 얘기해주셨습니다. 처음엔 완벽히 이해하진 못 했지만, 저희가 공통적으로 쓸 것들에 대해서 카테고리별로 분류해 알파벳과 숫자를 활용하여 관리하였습니다. 그리고 실제로 적용해보면서 공통코드를 쓰면, 코드 수정 및 관리에서 정말 편하다는 것을 느낄 수 있었습니다. 이 공통코드의 존재를 몰랐다면, 학사일정등을 수정할 때 하나 하나 수정했을 것 같다는 생각에 공통코드의 존재에 감사하게 생각하고 있습니다.

4-2. 아쉬운 점

(1) Redux

이번에 React를 사용하면서 Redux도 제대로 사용해보고 싶었습니다. vue를 다룰 때 vuex라는 전역 상태 라이브러리를 사용한 경험이 있는데, 정말 편했습니다. React 역시 Redux라는 라이브러리가 있어서 도전해보고 싶었지만, React 만으로도 많이 벅차서 제대로 못 써본 것이 많이 아쉬웠습니다. 기회가 된다면 다음 프로젝트에서는 제대로 공부해서 써보고 싶습니다.

(2) 이론 지식

React나 Javascript를 사용하면서 시간이 촉박하다고 느껴, 제대로 된 개념 이해 없이 다른 사람이 쓴 코드를 복붙하면서 원하는 부분만 바꿔서 사용하는 식으로 많이 사용하였습니다. 그래도 어느 정도 이해는 하면서 코딩을 하였지만, 밑바닥부터 직접 코딩한 것이 아니라는 게 아쉬운 부분이었습니다. 다음 프로젝트에서는 개념 공부를 더 하여서 밑바닥부터 제대로 코딩하는 모습을 보여줬으면 좋겠습니다.

(3) 개발과정

React를 잘 모른다는 핑계로 스타일에 많이 치중했습니다. 대부분의 페이지 레이아웃을 만들었지만 기능 부분은 해야겠다는 생각만 할 뿐 도전할 엄두가 안 났습니다. 그래도 중간에 팀원분들께서 저를 생각하여 '기능 부분도 개발해보는 것이 좋지 않겠냐'는 말에 기능 부분도 어느 정도 도전할 수 있었습니다. 덕분에 다크모드, 성적, 공부시간 기록, 프로필 사진 수정 등의 기능을 개발할 수 있었습니다. 다음 프로젝트에서는 처음 해보는 것에 두려워 하지 말고 도전해보는 자신이 되었으면 합니다.

4-3. 배운 점

PR, Jira, React 등 새로운 것들을 많이 배운 프로젝트였습니다. 그리고 3명 이상의 인원으로 협업을 한 경험이 오랜만이라서 기록의 중요성, 소통의 중요성을 많이 느끼게 되었습니다. 이번 프로젝트를 기반으로 다음 프로젝트에서도 Jira, convention, React, Figma 등을 효율적으로 활용할 수 있을 것 같습니다.

4-4. 향후 발전 방향

이번에 사용한 styled-components는 계속적으로 활용할 것 같고, Redux도 도전해보고 싶습니다. 그리고 Jira나 React 초기 세팅 등을 팀원한테 많이 의지 하였는데, 다음 프로젝트부터는 먼저 나서서 직접 세팅을 해보는 시간을 가져보고 싶습니다.
이번 프로젝트에서 팀원들을 너무 잘 만나서 도움을 많이 받고 성장할 수 있는 기회를 가지게 되었습니다. ㄷㄷ(Drawing Dream) 팀원들 너무 감사하고, 각자의 길에서 열심히 하여 꼭 원하는 성과를 이룰 것이라 믿어 의심치 않습니다. 다들 감사했고 계속적인 교류가 있으면 좋을 것 같습니다. 감사합니다!

5. 결과

이 글을 작성하고 얼마 안 있어, 팀장님께서 결과를 알려주셨다. 반에서 1등..! 이번 프로젝트에서는 반 별로 1, 2등을 가리기만 하기에 전국으로 올라가는 부분이 없어 많이 아쉽지만 좋은 결과에 만족합니다!