[SSAFY] 공통프로젝트 회고 (feat. 최우수상🏆)

7주간의 공통프로젝트가 끝났다!! 열심히 달려왔고 목표로 했던 수상, 그것도 1등을 해서 너무 뿌듯한 프로젝트로 기억에 남을 것 같다. 이대로 보내주기 아쉽지만 보내줄 때가 되었으니 회고를 써보려 한다.

프로젝트 소개

서비스명은 키즈링크, 유치원과 학부모를 연결하는 서비스이다.

 

유치원 선생님이 겪는 잡무와 학부모의 갑질 문제를 해결하고, 학부모의 입장에서 아이의 안전에 대한 걱정과 상담을 위해 유치원을 방문해야 하는 번거로움을 줄이기 위해 이 프로젝트를 기획했다. 핵심 기능은 AI 아이별 사진분류, 화상상담 예약 자동 일정 조율, 실시간 화상상담, 상담 중 폭언 감지, 등하원버스 실시간 위치 확인이고 부가 기능은 알림장, 성장일지, 서류관리, 일정관리가 있다.

 

이 프로젝트에서 나는 선생님용 서비스의 전체적인 디자인과 프론트엔드 개발을 담당했고, 프론트엔드 파트 리더로서 기술 선택과 작업 분담을 통해 프로젝트를 성공적으로 이끌었다.

 

 

프로젝트에 대한 자세한 내용은 아래 (전국 UCC 경진대회에서 입상한) UCC와 Github 링크에서 볼 수 있다. 

 

https://github.com/minseonkkim/KidsLink

GitHub - minseonkkim/KidsLink: 🧒🏻 유치원-학부모 연결 플랫폼 [SSAFY 공통프로젝트 최우수상]

 

---

기획

WebRTC를 필수로 사용해야 하는 웹기술 트랙을 선택했기 때문에 화상 기능이 들어간 아이디어를 생각하느라 굉장히 애를 썼다.. 팀원들 각자 아이디어를 하나씩 생각해오기로 했고, 나는 대기열 관리 시스템을 포함한 팬싸인회 관련 아이디어를 냈다. 이후 컨설턴트님과 코치님들이 특히 긍정적으로 평가해 주신 팬싸인회와 유치원 아이디어 중에서 고민 끝에 유치원을 주제로 최종 선택하게 되었다.

 

학부모와 유치원 교사들을 대상으로 설문조사를 통해 불편 사항을 수집하였고, 이를 SW 기술을 통해 해결할 수 있는 방법을 고민하며 서비스의 방향성을 정립해 나갔다.

 

 

디자인

우리 팀은 학부모와 선생님을 위한 서비스를 모바일과 웹으로 각각 제공하기로 해서, 30~40개의 많은 페이지를 구성해야 했다. Figma로 목업을 제작하던 중, 백엔드와 프론트엔드 간에 화면 구성 요소를 통일할 필요가 있어서, 팀원 모두가 함께 와이어프레임 제작에 참여했다. 이후, 이 와이어프레임을 기반으로 Figma에서 목업을 완성했다.

 

개발

개발을 시작하기에 앞서 사용할 기술을 선택하는 시간을 가졌다. 기술을 선택할 때에는 ‘이 기술이 문제 해결에 얼마나 적합한가?’라는 질문을 항상 염두에 두었다. 기술을 먼저 고민하기보다는 현실적인 문제를 우선적으로 파악하고 이를 해결하기 위한 최적의 기술을 도입하는 방식으로 접근했다.

 

결과적으로 프론트엔드 기술 스택으로는 React와 Typescript를 채택했다. 편의성을 위해 유치원 선생님을 위한 서비스는 웹으로, 학부모를 위한 서비스는 앱으로 제공하기로 했기 때문에 PWA 기술을 적용했다. 스타일링은 Tailwind css를 사용했고, 상태관리도구로 zustand를 사용했다. 

 

사실 전부 이번 프로젝트에서 처음 접하는 기술들이었지만, 팀원들과 함께 적극적으로 학습하며 빠르게 익혔다. 처음에는 익숙하지 않아 개발 속도가 느리기도 했지만, 점차 익숙해지면서 생산성을 향상시킬 수 있었다.

 

 

협업 툴로는 Git과 Jira를 사용했다. Git은 커밋 컨벤션과 브랜치 전략을 정하고 이를 실천했으며, PR 시에 코드 리뷰를 통해 코드 품질을 유지했다. Jira를 통해 매주 목표량을 설정하고 스프린트를 진행하여 프로젝트가 계획된 일정 내에 완료될 수 있도록 관리했다. 이와 같은 체계적인 접근이 프로젝트의 성공적인 완료에 큰 기여를 했다.

 

 

또한, 우리 팀은 문제 상황이 한 시간 이상 지속되면 팀원들에게 공유 및 도움 요청을 하자는 팀 규칙을 정해 실천했다. 문제 상황은 노션에 공유하여, 모든 팀원이 함께 해결방안을 고민했다.

 

이 중 내가 겪은 문제 몇 개를 소개해보자면,,

 

1. react-calendar css 겹침

학부모 서비스와 선생님 서비스 모두에 react-calendar 라이브러리를 사용하여 캘린더 기능을 구현했다. 두 서비스의 캘린더 스타일을 각각 다르게 적용하고자 했는데, 동일한 라이브러리를 사용하면서 CSS 스타일이 충돌하는 문제가 발생했다. 초기 해결 방법으로는 module.css를 사용해 각 서비스의 스타일 파일을 분리했다. CSS 모듈을 사용하면 클래스 이름이 고유하게 생성되어 CSS가 겹치지 않도록 하는 것이 일반적인 방법이다. 그러나 이 방법으로는 스타일 충돌 문제를 해결할 수 없었다. 이 문제를 해결하기 위해 styled-components를 도입했다. styled-components는 CSS-in-JS 라이브러리로, 스타일을 컴포넌트에 직접 결합하여 작성할 수 있게 해준다.  styled-components를 사용하면 각 스타일이 컴포넌트 수준에서 캡슐화되어 전역 스타일 충돌을 피할 수 있으며, 스타일이 실제로 사용되는 곳에만 적용되도록 할 수 있다. 이를 통해 두 서비스의 캘린더가 독립된 스타일을 가지게 되었고, 스타일 충돌 문제를 해결할 수 있었다. 결과적으로, 학부모와 선생님 각각의 요구에 맞는 커스터마이징된 캘린더를 안정적으로 제공할 수 있게 되었다.

 

2. 모달 리렌더링

useModal 훅을 사용해 모달을 구현할 때, 사진 업로드 미리보기 이미지가 제대로 표시되지 않는 문제가 발생했다. 사용자가 사진을 업로드해도 모달 컴포넌트가 리렌더링되지 않아 새로 업로드한 사진의 미리보기 이미지가 화면에 반영되지 않았다. 이 문제의 원인은 모달 컴포넌트 외부에서 사진 업로드와 관련된 상태를 관리하고 있었기 때문이었다. 상태가 변경되더라도 모달 컴포넌트가 자동으로 리렌더링되지 않아서, 새로운 상태가 반영되지 않는 상황이 발생했다. 이를 해결하기 위해, 사진 업로드와 관련된 상태를 모달 컴포넌트 내부에서 관리하도록 변경했다. 모달 컴포넌트 내에서 상태를 독립적으로 관리하면서 사진 업로드 기능이 기대한 대로 동작하게 되었다.

 

3. 이미지 로딩 최적화

페이지에서 사진이 로드되는 속도가 느려 사용자 경험에 부정적인 영향을 미치는 문제가 있었다. 이를 해결하기 위해 브라우저 캐싱을 도입하여 페이지 로딩 속도를 크게 개선했다. 브라우저 캐싱은 사용자가 웹 페이지를 처음 방문할 때 다운로드한 리소스를 로컬 저장소에 저장하고, 이후 동일한 리소스가 필요할 때 서버에서 다시 다운로드하지 않고 로컬 저장소에서 불러오는 기술이다. 이 방법을 적용함으로써, 사용자가 페이지를 재방문하거나 페이지 내에서 이동할 때 이미지가 빠르게 로드될 수 있도록 했다.

---

프로젝트 tip

최우수상을 수상할 수 있었던 비결은 크게 세 가지가 있었다고 생각한다.

 

1. 귀여운 캐릭터

서비스명 '키즈링크'의 줄임말인 '키링'을 따서, '키링이 된 다람쥐'를 주제로 캐릭터를 만들었다. (매일 가방에 달고 다니는 키링처럼 항상 함께하는 서비스라는 의미!!) 캐릭터는 Chat GPT로 생성했고, 원하는 이미지를 얻기 위해 구체적이고 자세한 설명을 제공했다. 귀여운 캐릭터는 사람들이 서비스나 제품을 더 쉽게 기억하게 도와준다. 키링이, 키린이 덕분에 발표에서 큰 관심을 받을 수 있었다 ㅎㅎ

 

2. 빠른 기획과 개발

나는 항상 프로젝트 초반에 빠르게 개발하고, 후반에 여유로운 것을 좋아한다. 이번 프로젝트도 1주차에 디자인을 거의 끝내고 2주차에 개발을 시작할정도로 초반에 힘을 많이 쏟았다. 내가 보기에 아무리 완벽해도 컨설턴트님과 코치님들께 피드백을 받을 때마다 개선할 부분을 많이 말씀해 주셨기 때문에 결국 최종 발표 전날에 밤을 샜지만, 초반에 빠르게 진행한 덕분에 처음에 설계했던 것들을 전부 구현하고 수정 보완까지 하여 더 완성도있는 서비스를 만들어낼 수 있었다고 생각한다.

 

3. 환상의 팀워크

가장 큰 수상 비결은 최고의 팀원들이 아닐까?! 무엇보다 팀 분위기가 정말 좋았고, 덕분에 갈등 없이 마무리할 수 있었던 것 같다. 좋은 결과를 낼 수 있게 해준 팀원들에게 너무너무 감사하다😊