프로젝트명
소소 (Souso) : 소년소녀들의 모임
참여기간
2022.10.21 - 2022.12.20
개발스택
•
프론트엔드: Javascript, React 18, React-query, Axios, Recoil, Styled-Components
•
백엔드: Java 11, Spring Boot, JPA, QueryDSL, MySQL, Redis, AWS, Docker, CI/CD
•
그 외: Kakao Maps API, Postman/Swagger (API 테스트 및 문서화), GitHub, Notion, Figma
프로젝트 소개
소소(souso)는 가사일에 지친 어머니와 은퇴 후 삶이 무료한 아버지 등 6070 부모님 세대를 위한 동네 친구 만들기 플랫폼입니다. 부모님 세대의 일상을 ‘소소’하지만 활력있게 만들어드리고 싶다는 취지로 기획을 시작했습니다. 웹 기반 프로젝트였지만 모바일 SNS 형식을 최대한 유지하여 사용자가 모바일 앱과 유사한 경험을 할 수 있도록 구현했습니다. 본 프로젝트는 Numble이라는 사이드 프로젝트 플랫폼에서 팀을 구성하여 웹 개발 챌린지 형식으로 약 2달간 진행하였고 최종 2위를 수상했습니다.
개발 인원
총 5명 (디자이너 1명, 프론트엔드 2명, 백엔드 2명)
주요 특징
•
휴대폰 번호 인증을 통한 회원가입 및 로그인
•
카카오맵 API를 활용한 위치 기반 서비스
•
8가지 카테고리의 커뮤니티 게시판
•
좋아요 & 북마크한 게시글 모아보기
•
게시글에 댓글, 대댓글 추가 기능
프로젝트 담당
전체 시스템 설계 및 구현:
기획 단계에서 팀원들과 서비스 주제와 타겟층을 정하고 필요한 기능명세서를 작성했습니다. 정해진 개발기간동안 빠르게 MVP 개발을 하기위해 1주단위로 스프린트를 만들었고 '페이지' 단위로 작업을 나누어 디자인/FE/BE 개발을 병렬적으로 진행하는 애자일 방식으로 개발했습니다. 이를 통해 개발 병목현상을 최소화하고 효율적인 작업 흐름을 구축할 수 있었습니다.
프론트엔드:
2명의 FE 개발자로 구성된 팀에서 상대 개발자의 경험 부족을 고려해 TypeScript 대신 JavaScript를 선택했습니다. 제가 전체적인 UI와 공통 컴포넌트를 담당하였고 기능 구현은 분담했습니다. 제 담당 파트는 전체 UI 및 공통 컴포넌트 제작, Kakao Map, 피드 목록 무한스크롤 구현, multipart/form-data를 활용한 이미지 업로드 기능이었습니다.
배포 및 운영:
본 프로젝트는 Netlify를 사용해서 배포 자동화를 구현했습니다. GitHub 저장소와 연동하여 main 브랜치에 변경사항이 push될 때마다 자동으로 빌드 및 배포가 이루어지도록 설정했습니다.
프로젝트 기획서
시연 영상
프로젝트 회고
What 무엇을 했나요?
•
페이지 단위로 작업을 나누어 디자인, 백엔드, 프론트엔드 개발을 병렬적으로 진행하며 효율적인 협업 프로세스를 만들었습니다.
•
기획부터 배포까지 전체 프로덕트 개발 라이프사이클을 경험하며 전체적인 개발 프로세스를 이해했습니다.
•
디자이너, 백엔드 개발자와의 협업을 통해 효과적인 소통 방법과 협업 툴 활용법을 배웠습니다.
•
NUMBLE 웹 개발 챌린지에서 2등을 수상하는 성과를 달성했습니다.
How 어떻게 해결했나요?
•
이전 프로젝트 경험을 바탕으로 개발 방법론을 폭포수 모델에서 애자일 방식으로 전환하여 기존 문제점을 개선했습니다.
예) “(월-화) 디자인 시안 (수-목) 서버 & 프론트 개발 진행 (금) 클라이언트-서버 API 연결” 과 같은 플로우로 작업했습니다.
•
주간 스프린트 회고 시간에 BE, FE의 구현 영역을 크로스 체크하며 놓친 부분이나 개선점에 대해 피드백을 주고받았습니다.
Then 앞으로의 개선점?
•
프로젝트 초기에 더 명확한 API 명세와 디자인 가이드라인을 정하면 개발 생산성에 효율적일 것으로 예상됩니다.
•
WebP 포맷 변환 또는 이미지 지연 로딩 등 성능 최적화 과정을 추가하면 더 나은 사용자 경험을 제공할 수 있을 것입니다.
