📸 PicPiCo

SW 정글 5기 나만의 무기

프로젝트 기간: 2022.12.22 ~ 2023.01.28

팀원: 강성우, 김재현, 이원희, 정나린, 최다봄

1. 소개

PicPiCo : take Pictures with Peer Connection

‘친구들과 실제로 만나서 즉석 사진 찍고 꾸미기’를 모바일 App으로 !

시연 및 발표 영상 : YouTube Link
팀스페이스 : Notion Link
PC 크롬환경에서 가장 잘 동작합니다 : PicPiCo 해보기

2. 주요 기능

1. 음성 채팅 (Peer to Peer - N:N Mesh 구현)

📍 각 페이지 전반에 걸친 음성 채팅 기능

2. 사진 찍는 PicPiCo Booth

Drag and Drop 시연	PicPiCo Booth 주요 기능
	📍 실제로 같이 있는 것처럼 합성된 캠화면 제공 📍 카카오톡 API를 활용한 참여자 리스트 확인 📍 참여자 리스트 상 순서에 따라 화면에서 참여자들의 앞, 뒤 순서가 정해짐 📍 Drag and Drop으로 이 순서를 조작 가능 📍 참여자간 음소거 여부 및 촬영 횟수 동기화 📍 링크 모달로 카카오톡 공유하기

3. 사진 고르는 Select Pic

📍 촬영한 사진 중 Best 4컷 선택

4. 사진 꾸미는 Decoration

Drawing 시연	Sticker 시연	Decoration 주요 기능
		📍 각 참여자가 어떤 사진을 꾸미고 있는 지 실시간 공유 (상단 닉네임 폰트 색 == 꾸미고 있는 사진 테두리의 색) 📍그리기 및 GIF 스티커 붙이기 동시 작업 지원 📍 가상 배경 추가 가능

5. GIF 결과를 확인하는 Download

GIF Download 시연	Download Page 주요 기능
	📍 꾸민 결과가 화면상에 보여지고, GIF형식으로 유저 각자의 로컬에 저장 가능 📍 모바일 환경에서는 기기의 사양에 따라 GIF 생성 완료까지 20~30초 시간 소요 📍 GIF 생성이 완료되면 다운로드 버튼이 나타남

3. 기술 스택과 라이브러리

1. 기술 스택

기술스택	설명
	자바스크립트 런타임
	웹프레임워크
	웹 프론트엔드 프레임워크
	인메모리 저장소 (캐시)
	화상 공유 및 음성 채팅(N:N Mesh)
	시그널링, 룸 입장, 사진 촬영 및 꾸미기 이벤트 처리
	Proxy 서버
	자체 TURN 서버 구축

2. 주요 라이브러리

라이브러리	설명
	배경 제거를 위한 인물 segmentation
	gif 생성
	방 번호 랜덤 생성
	클라이언트-서버 간 이미지 데이터 parsing
	촬영된 개별 이미지 합성 처리
	컴포넌트간 상태 관리
	컴포넌트간 상태 관리
	클라이언트-서버간 실시간 통신
	chroma-key 처리를 위한 webgl 사용

4. 시작하기

BE

Nginx 설치와 설정, 실행

Redis 설치와 실행

$ git clone https://github.com/TeamWooMoo/picpico-server.git

$ cd picpico-server

$ npm i

$ npm run start

FE

Nginx 설치와 설정, 실행

$ git clone https://github.com/TeamWooMoo/picpico-client.git

$ cd picpico-client/front-src

$ npm i

$ npm run build

$ cd ..

$ npm i

$ npm run start

5. 포스터