연세대 교내 "창의플랫폼"에 참여하여 KINI 프로젝트를 진행했습니다.
이 창의플랫폼의 주제는 "인류가 당면한 사회적 문제"를 해결하는 것이 목적이며,
IT에 관련하여야 하는 과제물을 제출해야 하는 것은 아니었습니다.
(실제 결선 진출팀 5팀 중 유의미하게 웹, 앱을 제작한 팀은 한 팀이었습니다.)
프로젝트 목적: 노인 분들이 많이 거주하시는 시골 지역에 배달 시스템이 제대로 갖추어지지 않았다는 점에서 공공배달 서비스를 기획하여 하나의 마을 커뮤니티를 형성하는 것입니다.
>개발 기간 : 2023.07.04~2023.11.16
플랫폼 : Web, Android(PWA)
개발 인원 : 7명 (개발자 4명, UI/UX 디자이너 3명)
담당 역할 : PM, 개발자 리더
> 개발 환경
언어 : HTML/CSS/Javascript
프레임워크 : React 18.2.0
데이터베이스 : Firebase
상태관리 : Context api
배포 : Vercel
API : Kakao Maps
ETC : Github, Figma, Notion
일단 팀원들 모두 학부 1학년생으로, 개발을 해본적이 없던 개발자들과 UI/UX 디자인을 해본적 없던 디자이너들이었습니다.
그렇기에 개발이 늘어지면서 팀원들의 의욕이 떨어지는 것을 우려하였습니다.
따라서 저와 개발팀 중 한 명, 디자인 팀 한 명을 기획팀으로 선정하여 [기획팀], [개발팀], [디자인팀]으로 시스템을 구축하였습니다.
또한 애자일 방법론을 채택하여 매주 스프린트를 진행했고 프로젝트를 린하게 진행하기 위해 노력하였습니다.
보다 구체적으로 기획팀은 매주 하나씩 개발하여야 할 웹 페이지를 설정, 이에 따라 디자인팀은 [Figma]를 사용하여 디자인 요소를 제작하였고, 개발팀은 이러한 디자인을 바탕으로 [Github]로 버전관리하며 웹을 제작하였습니다.
이렇게 8주간의 웹 MVP 구성 이후, 교수님께 콜드메일을 보내며 보다 확실히 웹의 방향성을 잡고자 노력했습니다. 다양한 사회복지학과 교수님들께 메일을 보내보았고, 70명의 교수님들께 보내본 결과 대략 10분 정도의 프로젝트 관련한 조언 답장메일이 왔으며, 1분의 교수님과 유의미하게 연결되어 한국 노인 인력개발원 팀장님과 연락해볼 수 있었습니다.
또한 이러한 과정 속에서 콜드메일을 보내는 경험뿐 아니라 의사소통의 중요성에 대해 다시금 깨닫게 되었습니다. 7명이라는 많은 팀원들이 각자 생각하는 프로덕트의 방향성이 달랐고, 이를 해결하며 조화롭도록 팀을 유지시키기 위해 팀 리더로서 어떻게 역할을 수행해야 하는지에 대해 배웠습니다.
(더불어 팀 규모는 적을 수록 좋다라는 점 또한 뼈저리게 느끼기도 했습니다.)
또한 구글에서 제공해주는 서버리스 서비스인 Firebase 를 통해 보다 쉽게 백엔드 서비스를 구축하였고,
이는 아이디와 비밀번호를 헷갈려하시는 노인분들을 고려하여
핸드폰 번호와 인증번호만 있으면 로그인할 수 있도록 구현하는데에 큰 도움이 되었습니다.
이를 통해 프로덕트의 UX 를 고려하여 스택을 채택하는 것이 중요한 것임을 다시 한번 깨닫게 되었습니다.
이 후 결제 프로세스, 장바구니 등의 추가적인 기능들을 구현하였으며,
노인분들은 웹보다 앱을 실질적으로 많이 쓰신다는 점에서 PWA를 사용하여 Android app으로도 출시하는 과정을 거쳤습니다.
다음 동그라미 친 부분은 이번 프로젝트에서 실제로 제가 담당했던 부분입니다.
이러한 프론트엔드 구현과 기능 구현과 같은 백엔드(카카오맵 api를 이용하여 유저가 입력한 주소를 파이어베이스 서버에 넣는 작업 등) PWA 작업 등 전반적으로 많은 것을 담당했지만, CSS 부분에서 동료들에게 큰 도움을 받았습니다. 특히 CSS 전역 충돌에서 큰 어려움이 있었습니다.
예를 들어, A라는 컴포넌트를 만들고, 그 A를 B라는 웹페이지에서 B'라는 css를 써서 나타도록 한 뒤, C라는 페이지에서 C'라는 css를 써서 A를 사용했더니 A 컴포넌트가 B에서 이상하게 바뀌어 있는 경우가 많았습니다.
동료가 알려준 css 모듈이라는 방법으로 문제를 해결하였으나 클래스 네임을 매번 다르게 설정하는 것이 매우 불편하였습니다. 공모전 일정에 맞춰 급한대로 프로덕트를 내놓기는 하였지만 다음부터는 테일윈드를 도입하여 이러한 에러를 해결해볼 계획입니다.
배움의 과정 뿐 아니라 UI/UX 단계에서 팀원들과 많은 회의를 거쳤고,
그 결과 단순히 이쁜 프로덕트가 아닌, 사용자가 편리할 수 있도록 보다 UI를 크고, 확실하게 만들기 위해 수정을 거쳤습니다.
더불어 논문을 찾아 주황/초록이 노인분들이 쉽게 볼 수 있다는 점에 착안하여 로고와 문구까지 직접 만들었습니다.
마지막으로 github와 vercel을 통한 CI/CD 과정을 통해 우리의 프로젝트를 좀 더 가시화하여 볼 수 있었습니다.
다만 모두 깃허브를 처음 써보았기에 버전 관리에 어려움이 많았습니다. 커밋 메세지 또한 어떤 것이 표준인지 몰랐기에 중구난방 식인 것이 많았고, 더불어 개발자들이 작업하는 과정에서 풀, 커밋, 푸시에 대한 이해도가 부족하여 동료들의 로컬 변경 내용이 초기화 되는 경우도 적지 않았습니다.
이러한 경험들을 통해 지속적인 통합 및 조직 내에서의 지켜야 할 기준(규율)들이 왜 필요한 지에 대해 더욱 이해할 수 있게 되었습니다.
저희는 공모전을 준비하며 동기들을 회원가입시켜 일종의 유저로서 역할하도록 하고 이 과정에서 생기는 다양한 문제들을 해결하며
실제로 서버로 제대로 데이터가 넘어가는지, 마트에서 받은 엑셀 데이터를 json으로 변경시켜서 자동으로 서버에 올라가도록 할 수 있는지
등 보이지 않는 부분까지 실제 프로덕트라면 응당 기능하여야 할 부분에도 신경써서 개발하였습니다.
아쉽게도 이번 공모전은 앱이나 웹을 개발하는 것이 아닌, 얼마나 "창의적인 기술"로 사회적 영향을 끼칠 수 있는 가를 고려하는 것이었기에 위에서 고려한 부분들을 체크하시지 않는 느낌이었고, 저희가 생각한 핏과는 맞지 않아 수상을 하지는 못했습니다.
그러나 이러한 팀 프로젝트를 하면서 얻은 수많은 경험들은 저와 제 팀 동료들에게 있어 분명한 자산이 될 것이라 확신합니다.