멋쟁이 사자처럼 프론트엔드 심화과정 4기 - 2차 최종 프로젝트 회고

식샤의 메인 페이지

프로젝트 개요

• 기간: 2024.05 ~ 2024.06 (약 4주)
• 주제: 동네 이웃과 함께 나누는 식재료 및 공동 장보기
• 목표: 이전과 다른 이웃과의 소통 문제 완화 및 늘어난 1인가구에 대응하는 식재료 나눔 플랫폼
• 역할: 팀원, UI 디자인, DB 모델링, 채팅 시스템 구현, 3D 나눔함 페이지 구현
• 배포 : https://www.sik-share.com/

---

기술 스택

• Frontend: Next.js, TypeScript, react-three/fiber, shadcn-ui, tailwind css,
• Backend: postgreSQL, Prisma, Node.js, Next.js

---

기획 의도와 주제 선정 과정

• 이전까지는 뭔가를 만드려고 할때 단순히 편리한 것이나 하고 싶은것에 집중했다면, 이번에는 조금 더 사회적으로 가치를 주는 플랫폼을 만들어보고 싶었다.
• 서울에서 올라와서 살다보니 물가가 높은것도 체감이 되었다. 배달음식을 시켜먹지 않고 마트에서 장보고 직접 해먹더라도 생각보다 밥값으로 소모되는 비용이 되게 많았다.
• 그것에서 영향을 주는 부분은 물가 상승률도 당연히 있고, 1인가구가 많은데에 비해 소량만 구매하려고 하면 식재료가 비싸기 때문에 상승한 물가 + 소량 구매 때문에 생각보다 많은 비용을 식대에 사용하고 있었다.

통계청 - 소비자 물가 상승량

1인가구의 증가 및 사회 단절 문제에 대한 이미지

 

• 이것을 해결하려고 하는 외국의 플랫폼들은 되게 많았다. 아무래도 우리나라보다 외국에는 조금 더 사회적 가치에 포커스를 맞춘 플랫폼이 많았던 것 같다. 하지만 우리나라에서 이런 플랫폼은 찾아보기 힘들었고, 아마 식품안전법에도 아슬아슬한 부분들이 있기 때문에 실제 시장에 서비스하기 쉽진 않은 것 같기는 하다.
• 하지만 이렇게 실제 사업으로 뛰어들기 전에, 무언가 한번 사회적으로 가치를 창출할 수 있는 플랫폼을 만들어보고 싶어졌고, 우린 이러한 사회적 문제점들에 대해 접근하게 되면서, 식샤(食 + share)를 시작하게 되었다.

---

내가 맡은 역할

1. UI 디자인 (Figma)

• 웹 / 모바일 반응형을 고려하여 구현 (거의 모바일 기기 중심으로 구현하긴 했다)
• 그래도 지난번 보다 팀원들에게 많은 도움을 받고 디자인을 할 수 있었고, 피그마에 대해서 조금 더 배울 수 있었다.

2. 프론트엔드 개발

• 웹소켓을 사용한 채팅 시스템 구현(개인 채팅, 단체 채팅)
• react-three/fiber를 사용한 3D 나눔함 페이지 구현

3. 백엔드 개발

• 클린아키텍처 기반의 설계
• DB 모델링
• 채팅과 나눔함 페이지의 백엔드 구현
• 채팅 서버를 따로 관리하기 위해 채팅 웹 서버 구현

---

주요 기능

 

기능명	설명
회원 등록하기	SNS 계정으로 간편한 회원가입 및 최초 1회 동네 등록으로 위치 기반 서비스 제공
동네 기반 클러스터링	사용자의 현재 위치를 기준으로 가까운 이웃 정보 반영, 클러스터 킬릭시 해당 지역의 나눔&장보기 리스트 출력
나눔&장보기 등록	남은 식재료 나눔 또는 장보기 모집을 간편하게 등록, 동네 이웃에게 실시간으로 정보 노출
3D 식재료 관리	보유중인 식재료를 3D로 시각화 하여 표현, 식재료 클릭 시 간략 정보 제공 및 나눔 신청 가능
실시간 1:1 & 그룹 채팅	이웃과 즉시 소통할 수 있는 실시간 채팅 기능 제공, 예약 및 후기 작성 등 부가 기능 지원, 실시간 읽음 확인 가능
마이페이지	나눔&장보기 이력을 한눈에 확인 가능, 나눔 지수를 기반으로 성장하는 캐릭터를 확인 가능

 

---

기술적 도전

• 나는 이번에 @react-three/fiber, drei로 3D 화면을 구성해보고 웹소켓을 사용해 실시간 채팅을 구현하는 업무를 맡았다.
• 웹소켓은 채팅페이지에서만 연결을 시키기 위해서 도메인을 분리하려고 했고, 웹 소켓 서버는 별도로 클라우드타입을 이용해 배포를 한 뒤, 채팅 페이지에서만 연결되게 만들었다. 그리고 채팅에서 사용자에게 더 좋은 경험을 주기 위해 Optimistic UI 도 도입했다.

채팅

• 3D 페이지는 Spline의 3D 에셋들을 활용했고, 카메라 제어를 통해 회전초밥(?)과 비슷한 형태를 띄도록 만들었다.

3D 나눔함 페이지

---

프로젝트 과정에서 겪은 고민과 시행착오

• 이번에는 어떻게 보면 개발자스러운? 고민을 많이 하면서 개발을 많이 했던 것 같다. 이전에는 단순히 코드를 어떻게 구현해야 하지? 라는 생각으로 항상 개발을 해왔었는데, 이번에는 로직 설계를 어떻게 해야하지? 에 대한 고민을 더 많이 했던 것 같다.
• DB 설계를 할때부터 정말 많은 시행착오를 겪었다. 예를 들면, 개인 채팅에서의 읽음 처리는 내 ID와 다른 ID가 들어오게 되면 읽음 카운트 수를 단순하게 0으로 바꾸고, 소켓에 채팅방 ID를 알게 한 뒤 두개의 유저ID가 연결되어 있다면 바로바로 0으로 만들어버리게 만들어서 읽음 처리를 구현했다. 하지만 단체 채팅을 구현할 때에는 이런식으로 구현은 불가능했다. 단순히 내가 아닌 사람이 들어왔을때 내 메세지 카운트를 빼버리자니 다른 같은 사람이 계속해서 채팅방을 나갔다 들어왔다 하면서 메세지 읽음 카운트를 내릴 수 있었다. 그래서 많은 고민을 한 결과 메세지 테이블을 알고 있는 읽음 메세지 테이블을 만들었어야 했고, 메세지 하나당 읽은 사람의 ID를 알게 하는 방식으로 단체 채팅 읽음을 구현했다. 그래서 뒤늦게 테이블도 다시 만들고, 로직도 전체적으로 수정을 많이 했다. 
• 그래서 이번에는 단순 구현을 하는 것 보다 고민을 하는 시간을 더 많이 가진 것 같다.
• 또한 기획단계에서 정말 촘촘하게 기획을 하고 넘어갔었는데, 실제로 구현을 하면서 보니 유저가 불편한 부분도 많이 보였고, 당연히 있어야 하는 기능들이 생각보다 많이 빠져있었다. 그래서 그런 부분들을 최대한 잡아가면서 디테일을 높이려고 노력했고 그 결과, 너무 좋은 결과물을 만들어 낸 것 같아서 기분이 좋다.

---

아쉬웠던 점

• 3D 페이지를 어떻게 해야할지가 너무 고민이었다. 좁은 휴대폰 화면 안에 어떻게 해야 예쁘고, 또 터치도 해야하기 때문에 거리도 생각보다는 구분되게 해야했다. 그렇게 하다가 회전초밥과 같은 형태로 구현했는데, 그렇게 하니 360도 배경이 고민이었고 하다보니 시간부족관계로 넓은 360도 배경을 넣긴 했는데, 개인적으로는 안어울릴 뿐더러 배경이 크다 보니까 로딩속도도 느리게 나오는 문제가 존재했다.
• 그리고 채팅에서의 아쉬운 부분도 있었는데, 채팅은 실시간으로 읽음 카운트 수 처리를 진행하지 못했다. 새로고침 하면 확인할 수는 있는데 실시간으로 확인하기 위해서 메세지 id를 읽어야하는데 이것도 시간이 부족해서 구현하지 못했다. 이 부분은 리팩토링 하면서 수정해보려고 한다.

---

느낀점과 성장 포인트

• 이번 프로젝트를 통해서 배운점이 있다.
• 이전에는 내가 맡은 부분만 그냥 끝내면 되지, 라는 생각을 가지고 있었는데 이번의 식샤 프로젝트를 통해서 전체 서비스 흐름을 고민하면서 진짜 '팀 프로젝트'를 했다는 느낌을 받았다.
• 그리고 이번에 정말 많은 라이브러리와 프로그램과 훅들을 사용했다. 그래서 나에게 신선하고 새로운 경험이 되었는데, 생각보다 개발을 하면 할 수록 단순하게 코드를 짠다라는 것 보다 기본적인 개념과 흐름을 고민하는것이 더 중요하다는 것을 뼈저리게 많이 배우게 되었다.

---

앞으로...

• 앞으로 해야하겠다고 생각이 든 일은 여러가지가 있는데, 첫번째로는 이제는 더 이상 다른 교육을 받기 보다는 취업을 정말로 해야겠다는 생각이 들었다. 금전적으로도 무리가 오기 시작했고 사실 이렇게 개인이나 소규모 팀프로젝트에서는 매번 똑같은 것만 반복할 것이라는 생각이 들었기 때문이다. 연차를 쌓아가면서 인정받는 개발자가 되고 싶기도 하고...
• 그래서 이제 면접과 관련한 준비를 좀 해보려고 한다. 기본적인 CS 공부를 좀 진행하려고 하고, 최대한 블로그에 기록도 남기면서 공부를 진행하려고 한다.
• 앞으로는 취업 도전을 위한 포스팅이 주를 이루게 될 것 같다. 그치만 꾸준히 학습하면서 깃헙 잔디도 채울거다.

깃허브 잔디

• 최근들어서 깃허브 잔디를 채우고 있는데, 최근에 수료를 하고 본가에 내려와서 정리할일들이 있어서 채우지 못했는데, 다시 채우려고 한다.

글을 적다보니 두서없이 좀 주저리 주저리 적은 느낌이 있지만, 조금 더 발전했고, 조금 더 성장한 것 같다고 확실히 느낀다.

 

이번에는 정말 취업에 성공해야지.