🧐 공통 프로젝트?
공통 프로젝트는 싸피 2학기의 첫 프로젝트이다!
프로젝트 기간은 2024.07.02(화) ~ 2024.08.16(금)로 약 7주간 진행한다.
나는 팀 구성을 꼭 FE 3 + BE 3으로 구성하고 싶었기에 적극적으로 팀 빌딩을 했다.
자기소개 자료를 빨리 만들어서 mattermost에 올리고 함께 할 팀원들을 찾았다.
그 결과인지 다들 열심히 하는 팀원들을 만날 수 있었고, 좋은 결과까지 나와 기쁘당😄
💡 아이디어 해커톤
초반에 아이디어 해커톤을 진행하는데 하루만에 아이디어 논의하고 피그마 만들고 발표자료까지 만들어서 발표해야 돼서 힘들닷..🥲
우리팀은 '독립 지원 서비스'를 주제로 발표했다. 아이디어 해커톤에서 1, 2등을 뽑는데 우리 팀은 순위권에 들지 못해 우리 주제가 별론가 고민하게 되었다.
결국 주제를 바꾸기로 결정하였고, 우리반에서도 아이디어 해커톤에서 1, 2등한 팀 빼고는 대부분 주제를 바꾼 것 같다.
결과적으로 우리팀은 주제 바꾼 게 훨씬 괜찮았다!
📑 기획
정말 기획이.. 제일 싫다..
더 이상 아이디어가.. 없어요..ㅜ
아이디어 고민해서 정리하고..
컨설턴트님께 상담받고.. 코치님께 여쭤보고..
이 아이디어 저 아이디어 내고 고민하고 또 내고 고민하고..
고통의 시간 끝에 결국 아이디어가 결정되었고.. 이쯤 되니 어렵게 정한 아이디어를 절대 바꾸고 싶지 않았다..
차라리 디벨롭을 시키면 몰라도ㅠ-ㅠ
결국은 유치원 통합 관리 서비스로 결정되었다.
⚾ 설계
1. 사용자 역할
주제를 정하고 보니 사용자 롤이 3개가 나와버렸당.. (유치원 원장님, 유치원 선생님, 학부모)
3개 모두 빠질 수 없는 역할이기에 어쩔 수 없었다.
역할 너무 귀찮아서 담엔 역할 하나만 해야지 했는데 특화도 결국 역할 3개
2. 볼륨
자연스럽게 프로젝트 볼륨도 커졌다. 사실 스쿨버스랑 알림 기능도 있었는데 시간상으로 감당할 수 없어서 버렸다..
기능을 뺏는데도 API가 90개 정도였다. 진짜 많다 많다 그 페이지들 다 만드느라 정말 ㅜ_ㅜ
3. 화면 설계
피그마도 진짜 열심히 해서 다음엔... 이렇게까지 못하겠다 싶었다😭
4. 컴포넌트 설계
이전까지는 컴포넌트를 나누는 데에 뚜렷한 기준이 없었고 컴포넌트를 재사용도 제대로 하지 못했다. 프로젝트 경험이 적고 프론트엔드를 거의 1-2명이 개발하다 보니 그런 점에 대해 고려하지 않고 그냥 개발했었다. 이전 프로젝트에서 제일 아쉬웠던 점이 컴포넌트를 재사용하지 않았던 것이고, 이번 프로젝트에서는 꼭 컴포넌트 재사용을 고려하면서 개발해보고 싶었다.
마침 공통 프로젝트 초반에 'Atomic Design'을 주제로 한 싸피 라이브 특강이 있었는데 해당 특강을 듣고 아토믹 디자인을 고려하게 되었다. 아토믹 디자인에 대해서는 kakao FE 기술 블로그를 주로 참고했다.
처음에는 Atom, Molecule, Organism의 기준을 잡기 위해 같이 상의하면서 몇 개를 나눠보았다. 하지만 모든 컴포넌트를 하나하나 다 상의하면서 나누기에는 시간이 너무 오래 걸려서 어느 정도의 기준이 생긴 이후에는 간단한 건 각자 생각대로 나누었다. 스스로 생각해 보았을 때 쉽게 답이 나오지 않는 것은 팀원들과 상의해 보면서 분류하였다.
Atom은 보통 명확한 편이었는데 Molecule이냐 Organism이냐가 너무 헷갈렸다. 예를 들어 단순한 Button이나 Input은 가장 작은 단위의 컴포넌트이므로 Atom인 것이 명확했다. Input Bar 같은 경우도 Atom이 모여 하나의 기능적 단위를 이루기에 Molecule인 것이 명확했다. 우리에겐 유저 아이템 종류가 많았는데 이 컴포넌트의 경우에는 Molecule인지 Organism인지 애매했다. 이거에 대해 팀원들과 많이 이야기해 보았는데 처음엔 Molecule이라고 생각했다가 얘기를 해보니 Organism일 수도 있겠다는 생각이 들었다. 근데 또다시 생각해 보니 Molecule 같기도 했다. 그래서 이런 모호한 것들은 정답이 있는 게 아니니 우리 팀만의 기준을 세워야겠다고 생각했다.
뚜렷한 기준에 대해서는 대답하기 애매하지만.. 그나마 우리끼리 정한 특징은 아래와 같다.
- 더 이상 쪼갤 필요가 없는 컴포넌트는 Atom으로 분류했다.
- 여러 개의 Atom을 합쳐서 만든 컴포넌트는 Molecule(또는 Organism)로 분류했다.
- 아이템 요소는 Molecule로 분류하고 해당 아이템의 묶음은 Organism으로 분류했다.
- 특정 영역을 차지하는 컴포넌트(헤더, 모달 등)는 Organism으로 분류했다.
3. 플로우
설문조사에서 아이에게 일어난 일을 복기하기 어렵다는 답변이 많았는데, 이를 해결할 방법에 대해 많이 고민했다.
유치원 선생님은 유치원에서 여러 아이들을 돌보며 앱을 이용해야 하는 것이니 최대한. 최대한. 최대한! 간편하게 기록할 수 있도록 하고 싶었다.
우리가 내놓은 그에 대한 방안은 최대한 쉽게 접근하고 빠르게 등록할 수 있도록 하는 것이었다.
원래는 홈에서 메뉴들 중에 메모 메뉴를 누르면 메모 타임라인을 조회하고 메모 등록 버튼을 누르면 메모 등록 페이지로 이동하는데, 홈 화면에 메모 등록 버튼을 만들어 앱에 들어오자마자 메모를 바로 등록할 수 있도록 하였다.
메모 등록할 때는 시간은 현재 시간을 기본값으로 설정해놓고 태그, 원생, 수업, 기타 중에 하나라도 선택 및 입력하면 메모를 등록할 수 있도록 하였다.
하루의 메모를 보여주는 것도 어떤 방식으로 보여주는 게 좋을지 고민했는데 타임라인 형태가 가장 좋을 것 같았다.
메모가 핵심 기능이라 메모 등록 방식, 태그 등록 방식, 메모를 보여주는 형식 등 가장 고민을 많이 했다.
🖥️ 개발
1. React, TypeScript + pwa
리액트는 오랜만이지만 이전에 사용해본 적이 있었다.
다만 타입스크립트는 이번 프로젝트에 처음 써보는 거였다. 타입스크립트는 유튜브 코딩앙마님 강의 싹 훑어보긴 했는데 직접 개발해 본 것은 아니라 살짝 걱정이 되기도 했다. 그래서 이번엔 익숙한 자바스크립트 쓰고 다음 프로젝트 때 타입스크립트를 쓰자는 얘기도 나왔었는데, 컨설턴트님의 어차피 쓸 거라면 빨리 쓰라는 조언을 듣고 타입스크립트를 쓰기로 하였다..! 결과적으로 좋은 선택이었다. 타입스크립트를 완전 잘 활용했다고는 못하겠지만 이번 프로젝트를 통해 확실히 타입스크립트에 익숙해질 수 있었고, 컨설턴트님 말씀대로 어차피 쓸 거라면 빨리 도입해서 적응하는 게 더 좋은 것 같다!
모바일에 적합한 기획이라 pwa를 도입했는데 생각보다 pwa 앱으로 내는 것은 간단했다! 다만 알림 같은 pwa를 활용한 기능은 해보지 못해 다음 프로젝트엔 해당 부분을 해보고 싶다.
2. Tailwind CSS
Tailwind와 styled component 중에 고민을 하다가 Tailwind로 사용하게 되었다. styled component를 사용하는 게 동적으로 스타일을 적용하는 데에 더 유리할 것 같다는 생각이 들었지만, styled component를 사용하면 grid를 모두 작성해줘야 하기 때문에 불편할 것 같다고 생각했다. Tailwind를 사용하는 게 개발기간이 단축될 것 같았고 성능 면에서도 더 유리할 것 같았다. 이전에 bootstrap이나 ant design vue를 써봤기에 tailwind를 쓰는 것도 비슷하다고 느껴져 쉽게 적응했다.
3. Storybook
스토리북은 UI 컴포넌트 개발 도구이다. 아토믹 디자인 패턴을 사용하기로 하면서 같이 얘기가 많이 나오는 스토리북을 찾아봤다. 찾아보니 스토리북은 학습 소요 시간을 걱정하게 되는 툴이 아니라 오히려 우리에게 도움을 주는 툴 같아서 사용하기로 하였다. 나 같은 경우는 페이지를 구현할 때 바텀업 방식으로 개발했기 때문에 더욱 유용했다. 한 컴포넌트를 구현할 때, 페이지에 import 하지 않고도 스토리북에서 내가 방금 구현한 컴포넌트를 확인할 수 있어서 편했다. 또한, 컴포넌트를 재사용하고 싶을 때도 다른 팀원들이 만들어 놓은 컴포넌트를 스토리북에서 쉽게 확인할 수 있어 문서화 측면에서도 편했다. 나 또한 팀원들에게 내가 구현한 컴포넌트에 대해 일일이 알리지 않아도 팀원들이 스토리북을 통해 내가 만든 컴포넌트를 확인해서 사용하니 편리했다.
4. Recoil, React Query
상태 관리 라이브러리는 Recoil을 썼는데 나중에 찾아보니 Recoil은 메인 개발자가 빠지고 업데이트 주기도 느려서 이제 잘 사용하지 않는다고 한다.. 이 때는 Redux와 Recoil을 비교하는 글만 찾아봐서 그런 글을 보지 못했었다..ㅜ-ㅜ 다음 프로젝트 때는 Jotai와 Zustand 중에 고민해 봐야겠다고 생각했다.
react query를 사용했는데 데이터 캐싱 외에는 제대로 활용하지 못한 것 같아 다음엔 react query를 더욱 활용해봐야겠다.
🐣 프로젝트 소개
그렇게 완성된 프로젝트를 소개합니다..............!
짜잔!
유치원 통합 관리 서비스, KidWe 🥝
(키위임 키드위 아님)
🐤 주제
아이 돌봄, 관찰, 학부모와의 소통 등 여러 업무로 야근에 시달리는 선생님에게 도움의 손길을 내미는 유치원 통합 관리 서비스
🐤 기획 배경
유치원 선생님에게 과중된 업무를 덜어주자!
- 전국 유치원 학급 당 평균 아동 수: 16.1명
- 유치원 교사 하루 근무시간 평균: 9시간 18분
어린이집/유치원 관련 종사자 대상 설문조사 실시
- 원생 관리에 도움이 필요한 서비스는?
- 알림장 작성의 간편화 기능
- 유치원 내의 일정 공유 기능
- 알림장 작성할 때 겪는 어려움은?
- 아이에게 일어난 일을 복기하기 어려움
- 근무 시간 중 작성할 시간이 부족함
🐤 기능
간략하게 소개하자면 [알림장, 공지사항, 출석부, 메모, 식단, 투약의뢰서, 귀가동의서, 반 관리, 일정, 마이페이지] 요러케 있다^__^
우리는 그중에서도 메모&알림장을 주요 기능으로 밀었다.
상세한 기능은 ↓ ↓ ↓
사용자 인증 ✔
- 회원가입
- 원장님👸은 본인의 유치원을 등록할 수 있어요.
- 선생님👩🏫과 학부모💑는 본인의 유치원을 검색할 수 있어요.
- 로그인
알림장 📒
- 알림장 조회
- 원장님👸은 반을 선택해서 월별로 특정 반을 조회할 수 있어요.
- 선생님👩🏫과 학부모💑는 월별로 서로의 알림장을 확인할 수 있어요.
- 사진 썸네일을 클릭하면 여러 장의 사진을 스와이프하며 확인하고 저장할 수 있어요.
- 원장님👸, 선생님👩🏫, 학부모💑는 알림장에 댓글을 남기고 답글을 달 수 있어요.
- 알림장 작성
- 선생님👩🏫이 학부모💑에게, 학부모💑가 선생님👩🏫에게 작성할 수 있어요.
- 선생님👩🏫은 오늘 하루 작성한 메모를 기반으로 알림장을 자동 생성할 수 있어요.
- 여러 장의 사진을 첨부할 수 있어요.
- 먼저 작성하고 예약 전송을 통해 나중에 전송할 수 있어요.
- 알림장 수정, 삭제
- 예약 전송 시간 5분 전까지 수정할 수 있어요.
- 본인이 작성한 글과 본인이 작성한 댓글만 삭제할 수 있어요.
공지사항 📢
- 공지사항 조회
- 원장님👸은 반을 선택해서 월별로 특정 반을 조회할 수 있어요.
- 선생님👩🏫과 학부모💑는 전체 공지와 소속반 공지만 확인할 수 있어요.
- 사진 썸네일을 클릭하면 여러 장의 사진을 스와이프하며 확인하고 저장할 수 있어요.
- 원장님👸, 선생님👩🏫, 학부모💑는 공지사항에 댓글을 남기고 답글을 달 수 있어요.
- 공지사항 작성
- 원장님👸은 전체 공지를, 선생님👩🏫은 반별 공지를 남길 수 있어요.
- 여러 장의 사진을 첨부할 수 있어요.
- 작성하다가 만 글을 임시 저장할 수 있어요.
- 임시 저장한 글은 임시 보관함에서 확인하고 불러올 수 있어요.
- 공지사항 수정, 삭제
- 본인이 작성한 글을 수정할 수 있어요.
- 본인이 작성한 글과 본인이 작성한 댓글만 삭제할 수 있어요.
출석부 ⏰
- 출석 처리
- 선생님👩🏫은 소속반의 원생들을 출석, 결석 처리할 수 있어요.
- 결석 처리할 때는 결석 사유를 입력할 수 있어요.
- 여러 명의 원생을 선택하거나 전체 선택을 통해 일괄 출석 처리할 수 있어요.
- 잘못 선택했다면 출석 처리한 학생을 다시 미처리로 돌릴 수 있어요.
- 출석 미처리한 학생과 처리 완료한 학생을 구분할 수 있어요.
메모 📋
- 메모 타임라인 조회
- 선생님👩🏫은 하루 동안 작성한 메모를 타임라인 형태로 볼 수 있어요.
- 이 메모는 알림장 자동 생성의 자료로 사용돼요.
- 메모 작성
- 선생님👩🏫은 태그를 활용해 메모를 간편하게 작성할 수 있어요.
- 현재 일어난 일을 바로 기록할 수 있도록 날짜와 시간은 현재 시간이 기본값이에요. 선생님이 임의로 수정할 수도 있어요.
- 태그, 원생, 수업, 기타 중에 하나만 선택/입력해도 메모를 등록할 수 있어요.
식단 🍚
- 식단 조회
- 원장님👸, 선생님👩🏫, 학부모💑는 일자별 식단을 조회할 수 있어요.
- 점심, 간식, 저녁에 대해 메뉴와 알레르기 정보, 알레르기 주의 학생을 확인할 수 있어요.
- 식단 등록할 때 선택한 알레르기 정보와 학부모가 아이를 등록할 때 선택한 알레르기 정보를 바탕으로 알레르기 주의 학생을 표시해요.
- 식단 등록
- 원장님👸과 선생님👩🏫은 선택한 날짜에 대해 식단(점심, 간식, 저녁)을 등록할 수 있어요.
- 각 식단에 메뉴 이름들을 입력하고 해당 메뉴의 알레르기 정보를 선택해요.
- 식단 수정, 삭제
투약의뢰서 💊
- 투약의뢰서 조회
- 원장님👸과 선생님👩🏫은 학부모💑가 작성한 투약의뢰서를 월별로 확인할 수 있어요.
- 투약의뢰서 작성
- 학부모💑는 투약 정보(투약일, 증상, 약 사진, 약 이름, 약 종류, 투약 용량, 투약 횟수, 투약 시간, 약 보관 방법, 비고)를 입력하여 투약의뢰서를 작성할 수 있어요.
- 서명을 완료해야 투약의뢰서를 등록할 수 있어요.
- 투약의뢰서 삭제
귀가동의서 🏠
- 귀가동의서 조회
- 원장님👸과 선생님👩🏫은 학부모💑가 작성한 귀가동의서를 월별로 확인할 수 있어요.
- 보호자와 비상연락처 전화번호를 따로 찾을 필요 없이 전화 버튼을 누르면 해당 번호로 바로 전화 걸 수 있도록 도와줘요.
- 귀가동의서 작성
- 학부모💑는 귀가 정보(귀가일, 귀가 시간, 귀가 방법, 보호자 관계와 전화번호, 비상연락처 관계와 전화번호)를 입력하여 귀가동의서를 작성할 수 있어요.
- 서명을 완료해야 귀가동의서를 등록할 수 있어요.
- 귀가동의서 삭제
유치원 관리 🏫
- 교사 관리
- 원장님👸이 교사 등록 요청에 대해 승인, 거절할 수 있어요.
- 선생님이 유치원 등록을 요청하면 대기 목록에 떠요.
- 원장님👸이 선생님👩🏫을 퇴원 처리할 수 있어요.
- 원장님👸이 교사 등록 요청에 대해 승인, 거절할 수 있어요.
- 원생 관리
- 선생님👩🏫이 아이 등록 요청에 대해 승인, 거절할 수 있어요.
- 학부모가 유치원에 아이 등록을 요청하면 대기 목록에 떠요.
- 선생님👩🏫이 원생을 퇴원 처리할 수 있어요.
- 선생님👩🏫이 아이 등록 요청에 대해 승인, 거절할 수 있어요.
- 반 관리
- 원장님👸은 유치원의 반을 추가할 수 있어요.
- 반 이름을 변경할 수 있어요.
일정 📆
- 일정 조회
- 원장님👸, 선생님👩🏫, 학부모💑는 날짜를 클릭하면 해당일의 일정을 볼 수 있어요.
- 일정 등록
- 원장님👸은 전체 일정울, 선생님👩🏫은 반별 일정을 등록할 수 있어요.
마이페이지 👶
- 사용자 정보
- 원장님👸, 선생님👩🏫, 학부모💑는 사용자 정보를 확인할 수 있어요.
- 자신의 프로필 이미지, 비밀번호, 전화번호를 변경할 수 있어요.
- 아이 정보
- 학부모💑는 아이의 정보를 확인할 수 있어요.
- 아이의 프로필 이미지, 이름, 생년월일, 성별, 알레르기 정보를 수정할 수 있어요.
🐣 서비스 화면
메인 화면, 일정 관리, 공지사항
식단, 메모 등록, 알림장 자동 생성
출석, 투약의뢰서, 귀가동의서
🏆 우수팀 선정
부족함이 많았지만, 열심히 준비한 덕분인지 반 1등을 했다!
우리 팀원 6명 모두 엄청 열심히 하고 고생 많이 했는데 좋은 결과 나와서 기쁘다.
여명 808 최고 👍
'SSAFY' 카테고리의 다른 글
[SSAFY] 수료 앨범 촬영 후기 (시현하다 비즈니스 단체 촬영) (6) | 2024.10.31 |
---|---|
[SSAFY] 11기 2학기 특화 프로젝트 (+ 우수팀 선정, 반 1등) (5) | 2024.10.31 |
[SSAFY] 11기 1학기 관통 프로젝트 (+ 최우수상) (1) | 2024.06.26 |
Notion으로 알고리즘 정리하기 (+ 템플릿 공유) (2) | 2024.04.16 |
[SSAFY] 일타싸피를 걱정하는 당신께. (1) | 2024.03.18 |