프로젝트명
Kicks - P2P 스니커 거래 플랫폼
제작기간
2022.04.18 - 2022.05.20
개발스택
•
프론트엔드 : Typescript / React / Recoil
•
백엔드 : Spring Boot, Security, Data JPA / QueryDSL / Mysql
프로젝트 기획
1. 팀 빌딩
디자이너, 프론트엔드, 백엔드 개발자들과 팀을 이루어 프로젝트 기획부터 배포까지 경험해볼 수 있는 [숏폼 영상 서비스 디자인-개발 챌린지]에 참여하게 되면서 프로젝트를 시작하게 되었습니다.
숏폼 영상 서비스 디자인-개발 챌린지]에 참여하게 되면서 프로젝트를 시작하게 되었습니다.2. 주제 선정
기존에 대중적으로 사용하는 ‘Youtube, ‘Tiktok’과 같은 영상 서비스가 있기 때문에 다양한 컨텐츠를 담는 서비스보다는 아이덴티티를 명확하게 정하자는 쪽으로 의견이 모아졌습니다.
다양한 주제 토론끝에 ‘착용샷을 다각도로 보고싶을 때’가 있다는 의견이 나와 중고거래라는 큰 틀을 정하고 그 중에서도 마니아층이 뚜렷하고 한정판 거래, 리셀테크 등 중고거래 성향이 두드러진 ‘스니커즈 중고거래’로 범위를 좁혀 주제를 선정하게 되었습니다.
3. 기능 명세서 제작
디자인 설계와 개발 시작에 앞서 실제 사용자를 가정하고 서비스를 어떻게 이용할지, 무슨 기능이 필요한지에 대한 시나리오를 작성하였습니다.
프로젝트 소개
개요
Kicks는 스니커즈를 좋아하는 사람들을 위한 숏폼 형식의 중고거래 플랫폼입니다. 웹 기반 프로젝트지만 스와이프 조작과 직관적인 인터렉션을 통해 사용자가 모바일 앱과 유사한 경험을 할 수 있도록 구현했습니다. 영상 기반으로 상품 정보를 제공하여 기존 중고거래 서비스와 차별화를 두었고 텍스트와 이미지만으로는 전달하기 어려운 스니커즈의 실제 상태를 생생하게 보여주도록 했습니다. 본 프로젝트는 Numble이라는 사이드 프로젝트 플랫폼에서 디자이너, FE 개발자, BE 개발자로 팀을 결성하여 1달간 진행했습니다.
개발 인원
총 6명 (디자이너 1명, 프론트엔드 2명, 백엔드 3명)
사용 기술 및 Tools
•
프론트엔드: Typescript, React, Recoil, SWR, Styled-Components, Swiper
•
백엔드: Spring Boot, Spring Security, Spring Data JPA, QueryDSL, MySQL
•
그 외: OAuth 2.0 (인증), Socket.io (통신), AWS EC2, S3 (배포), GitHub, Notion, Figma (협업 툴)
Business Model
•
판매 콘텐츠 n회 스와이프 당 광고 콘텐츠 1회 노출
•
광고 시청 시 리워드(서비스 내 거래 시 사용 가능한 포인트) 제공. 거래(포인트 사용) 유도
주요 기능
1.
카카오/구글 계정을 활용한 소셜 로그인 기능
2.
영상 스와이프 기능 (상하/좌우)
3.
키워드 기반 영상 검색 및 필터링
4.
Socket.io를 활용한 실시간 채팅
5.
좋아요, 팔로우, 팔로워 기능
6.
관리자 대시보드 (유저 및 영상 관리)
프로젝트 담당
전체 시스템 설계 및 구현
기획단계에서 팀원들과 주제를 정하고 주 타겟층, 비즈니스 모델 등을 논의했습니다. 1달의 개발기간동안 빠르게 MVP 개발을 하기위해 각 파트별로 1주단위의 스프린트를 작성했으며 이후 프로세스는 전체 디자인 완성 후 모든 API 명세 작성, 그 다음 프론트엔드 개발을 하는 순차적 접근법으로 진행했습니다.
프론트엔드:
2명의 프론트엔드 개발자가 각자 업무를 분담하여 개발을 진행했고 그 중 제가 담당했던 파트는
공통 컴포넌트 UI 제작, Swiper 기능, Socket.io를 활용한 실시간 채팅 구현, Firebase로 구글 OAuth 로그인 구현입니다.
배포 및 운영:
프로젝트 초기에는 Netlify로 배포를 했으나 Next.js OAuth 로그인 기능 호환성 문제가 발생하여 Vercel로 변경 후 배포했습니다.
프로젝트 구현 사항
1. 회원가입
카카오 및 구글계정으로 회원가입을 할 수 있으며 최초 1회에 한해 관심 카테고리를 설정할 수 있습니다.
1.
카카오 계정 로그인
2.
관심 카테고리 설정
3.
프로필 설정
•
Google Authentication
Firebase의 인증 provider로 구글 계정 인증을 하고 인증된 로그인 유저의 정보는 sessionStorage에 저장
•
코드 미리보기
// components/Login/GoogleLogin.tsx
import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
import { useNavigate } from 'react-router-dom';
import { auth } from 'server/firebase';
import * as S from './styles';
export const GoogleLogin = () => {
const navigate = useNavigate();
const login = async () => {
try {
const provider = new GoogleAuthProvider();
const res = await signInWithPopup(auth, provider);
if (res) {
const profile = {
name: res.user.displayName,
photoURL: res.user.photoURL
};
navigate('/');
sessionStorage.setItem('kicks-user', JSON.stringify(profile));
}
} catch (error) {
console.log(error);
}
};
return <S.GoogleButton onClick={login}>...</S.GoogleButton>;
};
JavaScript
복사
2. 숏폼 플랫폼 형식 메인페이지 구성
•
Swiper라는 React 라이브러를 활용해서 2가지 형태의 슬라이더를 만들었습니다. (메인페이지 : 상하 / 검색페이지 : 좌우)
•
코드 미리보기
// pages/MainPage.tsx
<Swiper direction="vertical">
{videoList?.map(video => (
<SwiperSlide key={video.id}>
<ContentsWrap videoData={video} />
</SwiperSlide>
))}
</Swiper>
TypeScript
복사
3. 채팅 기능
•
메인 화면 비디오 컴포넌트의 채팅 아이콘을 클릭하면 채팅방이 개설됩니다.
•
특정 포맷으로 날짜 변환을 해주는 함수dateConverter 와 날짜별로 채팅을 나누는 dividedByDate 유틸함수를 만들어 활용했습니다.
•
코드 미리보기
export const dateConverter = (date: Date) => {
const recieved = dayjs(date).format('YYYY-MM-DD');
const today = dayjs(new Date()).format('YYYY-MM-DD');
return recieved === today
? dayjs(date).format('h:mm A')
: dayjs(date).fromNow();
};
TypeScript
복사
4. 그 외 페이지
업로드페이지
프로필페이지
어드민페이지•
전체 유저 현황
•
특정 유저 정보 확인 (대쉬보드)
•
전체 영상 현황
•
특정 영상 정보 확인
프로젝트 회고
What 무엇을 했나요?
•
기획부터 배포까지 전체 프로덕트 개발 라이프사이클을 경험하며 전체적인 개발 프로세스를 이해했습니다.
•
디자이너, 백엔드 개발자와의 협업을 통해 효과적인 소통 방법과 협업 툴 활용법을 배웠습니다.
•
소셜 로그인, 실시간 채팅 등 다양한 기술적 도전을 통해 기술적 역량을 향상시켰습니다.
How 어떻게 해결했나요?
•
디자인과 API가 완성되지 않은 상황에서 빠른 개발을 위해 json-server를 활용한 목서버를 구축했습니다.
•
웹에서 모바일 앱 같은 UX를 제공하기 위해 Swiper와 터치 이벤트를 활용하여 직관적인 UI를 구현했습니다.
•
매주 주간보고서 작성 및 회고를 통해 기술적 어려움에 대해 논의했습니다.
Then 앞으로의 개선점?
•
폭포수에서 애자일로 : 본 프로젝트는 전체 디자인 완성 후 모든 API 명세 작성, 그 다음 프론트엔드 개발을 하는 순차적 접근법으로 개발을 진행했습니다. 그 결과 실제 FE 개발 기간은 1주 남짓 밖에 되지 않아 충분한 구현과 테스트에 어려움을 겪었습니다. 앞으로는 기능별로 디자인-BE-FE 작업을 병렬 진행하는 애자일 방식을 택하여 개발 효율성을 높이고 더 완성도 높은 결과물을 만들고 싶습니다.
