임찬수 김자운 김용성
김금동 김주영 이도연
최세영 조은비
2조:: 오아오팀
oao-voice.com
올보이스: 전문 성우 오디오 매칭
we make voice: 텍스트 기반 AI 음성 제작
Mewpot: 부분 유료 효과음 제공
기존 보이스기반 서비스들
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
오아오
전문성이 요구되는 기존 서비스의 허들을 낮추고
자유롭게 목소리로 커뮤니케이션 할 수 있는 서비스로
보다 편하고 재미있게
목소리 재능을 소비할 수 있는
플랫폼을 만들고자 하였습니다.
하나뿐인 나의 목소리를 뽐내고 홍보도 하고 수익도 내보자 !
특별한 목소리가 필요한데?
특별한 목소리가 필요하면 직접의뢰를 해보세요!
목소리로 자유롭게 커뮤니케이션이 가능해요!
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
아키텍처
아키텍처
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
공통목표: 모든 디바이스에서 재생 가능한 환경 제공
데스크탑, 모바일(Android, iOS)
모든 디바이스에서 목소리 데이터를
재생 가능한 환경 만들기
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
공통목표: 모든 디바이스에서 재생 가능한 환경 제공
Android 녹음본 iOS에서 재생 불가
from Android
from
iOS
from Android
from
iOS
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
공통목표: 모든 디바이스에서 재생 가능한 환경 제공
MIME Type or 확장자의 문제?
브라우저 지원 상태의 문제?
컨버팅 문제?
컨버팅 프로그램을 사용한 경우
모든 디바이스 호환이 보장됨
을 통한 컨버팅 방법을 모색
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
공통목표: 모든 디바이스에서 재생 가능한 환경 제공
from
Android
from
iOS
컨버팅
from
Android
from
iOS
Android 녹음본만 컨버팅
S3
converted
audio
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
공통목표: 모든 디바이스에서 재생 가능한 환경 제공
호환성이 높은 mp3 포맷을 선택
클라이언트에
부담 줄이기
프론트엔드 목표
1.
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
브라우저 로딩이 길어지거나 이로 인해
업로드 등의 작업이 실패할 경우 대비
글로벌
상태관리
2.
플레이어, 채팅기능을 모든 페이지에서
재생하거나 알림을 받을 수 있도록하여
좀 더 편리한 앱사용을 가능하게함.
스켈레톤UI & 무한스크롤
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
많은 양의 데이터를 조회 해야하는 카테고리분류, 검색, 채팅 페이지에서 데이터를 한번에 받아오면 로딩 시간이 길어지고 브라우저가 렌더링 할 수 있는 양 보다 데이터가 많아질 수도 있는 위험성이 있음
사용성이 좋고 모바일 환경에서도 콘텐츠를 보여주기에 가장 직관적인 무한스크롤 적용
스켈레톤UI & 무한스크롤
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
많은 양의 데이터를 조회 해야하는 카테고리분류, 검색, 채팅 페이지에서 데이터를 한번에 받아오면 로딩 시간이 길어지고 브라우저가 렌더링 할 수 있는 양 보다 데이터가 많아질 수도 있는 위험성이 있음
사용성이 좋고 모바일 환경에서도 콘텐츠를 보여주기에 가장 직관적인 무한스크롤 적용
녹음 시 메모리 누수 관리
url등록되는 부분
해제
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
클라이언트에
부담 줄이기
프론트엔드 목표
1.
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
브라우저 로딩이 길어지거나 이로 인해
업로드 등의 작업이 실패할 경우 대비
글로벌
상태관리
2.
플레이어, 채팅기능을 모든 페이지에서
재생하거나 알림을 받을 수 있도록하여
좀 더 편리한 앱사용을 가능하게함.
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
글로벌 상태관리: 목소리 플레이어
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
글로벌 상태관리: 목소리 플레이어
GlobalPlayer Component�
const getPlayerInstance = () => {
const player = PlayerRef.current.audio.current;
dispatch(playerActions.setPlayer(player));
};
Redux store - globalPlayer module
const initialState = {
playerInstance: null,
play_list: [],
now_track: {},
};
각 컴포넌트에서 플레이 정보를 렌더링 할때�playerIntance.pause 상태 / now_track 정보를 참조하여
다시 그려질 화면정보를 바꾸어줌
컴포넌트 마운트 시점에서 audio 정보를 리덕스 상태에 저장
오디오가 플레이 될때마다 현재 재생되고있는 오디오 정보를 저장
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
글로벌 상태관리: 실시간 채팅 메시지
useEffect(() => {
const uid = newGetCookie("uid");
if (!uid) {
return;
}
chat?.on("list", (data) => {
receiveGlobalMessage(data);
});
}, [chat]);
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
백엔드 개발 목표
보안 구성 강화
1.
비용절감 서버 구축
2.
To recover your lost Database send 0.005 Bitcoin (BTC) to our Bitcoin address: bc1qwdv2mky6a5cqcspg4yju2zhtmk3msxrqdwdagh After this, contact us by email with your Server IP or Domain Name and a Proof of Payment (Payment ID). Your Database is downloaded and backed up on our servers. Backups that we have right now: Z_README_TO_RECOVER, voice. Any email without your server IP Address or Domain Name and a Proof of Payment together will be ignored. If we don’t receive your payment in the next 10 Days, we will delete or leak your sensitive information.
Database 해킹 이슈
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
보안 구성 강화
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
보안 구성 강화
비용절감 서버 구축
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
원인 : t2.medium 서버 사용
해결 : t2.micro 서버로 변경
1. 젠킨스로 build할때 프론트 서버 다운
t2.medium => t2.micro변경하면서 생기는 문제
2. (ndriver controller+ 젠킨스) 서버 다운
3. 성능문제
서버 비용 과다 부과
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
t2.medium=>t2.micro변경하면서 생기는 문제 _ 1
→ 젠킨스로 build할때 프론트 서버 다운
프론트 build 안하고 있을때 메모리 사용량 : 138MB
젠킨스로 프론트 build할 때 메모리 사용량 : 757MB ~ 950MB
비용절감 서버 구축
ㅇㅇ메모리 부족
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
kswapd0(가상메모리 관리 프로그램) → cpu과다점유 → 프론트 빌드 서버 다운
비용절감 서버 구축
t2.medium=>t2.micro변경하면서 생기는 문제 _ 1
→ 젠킨스로 build할때 프론트 서버 다운
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
원인 : ngrinder-controller(550MB) + jenkins(500MB)> t2.micro(1GB)
비용절감 서버 구축
t2.medium=>t2.micro변경하면서 생기는 문제 _ 2
→ (ngrinder controller+ 젠킨스) 서버 다운
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
안정적
불안정적
동시접속 100명 5분 요청
t2.medium
t2.micro
비용절감 서버 구축
t2.medium=>t2.micro변경하면서 생기는 문제 _ 3
→ t2.micro 서버의 성능 문제
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
불안정하지만 서버 유지
3분 후 서버다운
동시접속 150명 5분요청
t2.medium
t2.micro
비용절감 서버 구축
t2.medium=>t2.micro변경하면서 생기는 문제 _ 3
→ t2.micro 서버의 성능 문제
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
해결 방안 : auto scaling 적용 후 부하 테스트 진행
scale out/in 조건
�5분에 cpu 40% 이상 이면 ec2하나씩 늘어남
�5분에 cpu 10% 이하 되면 ec2하나씩 줄어듦
비용절감 서버 구축
t2.medium=>t2.micro변경하면서 생기는 문제 _ 3
→ t2.micro 서버의 성능 문제
동시접속 50명, 30분
scale out (MAX 3ea)
동시접속 100명, 30분
scale out (MAX 4ea)
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
0.0576USD/hour * 1198 won/USD * 24hour *7(t2.medium)
= 11,592won
ec2 유지비용 85%절감
0.0288USD/hour * 1198won/USD * 24hour *2(t2.small) + 프리티어(0원)
= 1,656won
비용절감 서버 구축
t2.medium=>t2.micro변경하면서 생기는 문제 _ 3
→ t2.micro 서버의 성능 문제
t2.medium
t2.small�t2.micro�(+ auto scaling)
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
전
프로필 편집 후 우측 하단의
건너뛰기 버튼을 누르게 된다는
사용자 의견
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
전
후
프로필 편집 후 우측 하단의
건너뛰기 버튼을 누르게 된다는
사용자 의견
ux를 고려하여 버튼 위치와 크기 변경
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
전
채팅을 어디서 해야할지 모르겠다는 사용자 의견
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
전
후
채팅을 어디서 해야할지 모르겠다는 사용자 의견
다른 페이지에도 버튼을 추가하여
경로를 더 직관적으로 보이게 함
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
전
채팅에서 샘플요청 할 수 있다는 것을 인지하지 못함
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
전
후
채팅에서 샘플요청 할 수 있다는 것을 인지하지 못함
기능을 학습할 수 있는 ui로 변경
OAO 팀의 개발 스토리가 궁금하시다면
2조 부스를 찾아주세요!
끝까지 들어주셔서 감사합니다.
만족스럽지 않은 결과이고 이를 개선하기 위해
필요하지않은 주석 및 콘솔을 삭제하고 렌더링 최적화를
위해서 노력하겠습니다. 그리고 로딩이 길어도 지루하지
않도록 SkeletonUI를 만들어 로딩중에도 심심하지 않게
만들었습니다.
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
4. 재방문율을 높이기 위해 랭크 시스템을 만들어보았습니다.
5. 공급자와 수요자(의뢰자)간의 직접연결을 위하여 채팅기능을 넣었습니다.
사용자간의 원활한 수요 공급이 이루어 질 수 있도록 하였습니다.
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
1. MYSQL, sequelize 사용
�
2. 녹음 파일 컨버팅
�
3. helmet, express-rate-limit, hpp 사용
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
4. 공통된 요소를 모듈화 하려고 노력
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
5. jenkins를 이용한 자동배포 인프라 구축
개발용 테스트 서버 스크립트
프로덕션용 서버 스크립트
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
6. 프론트 자동배포를 위한 노력
젠킨스에서 프론트 빌드를 한 후 정적파일을 aws s3에 올린 후
aws cloudfront가 CDN서버에서 정적파일을 제공하는 구조�
7. 개발자가 Private subnet에 있는 RDS와 통신하는 방식
실제 젠킨스 서버가 실행하는 스크립트
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
8. Auto scaling의 scale out/in의 기준
CPU 사용률
50명 동시접속 5분=>cpu 50%�(2번요청)
100명 동시접속 5분=>cpu 70%
6분
12분
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
9. Auto scaling group의 Launch template버전 문제
�
Auto scaling group에 적용된 사용자 데이터
Project 배경
Project 소개
기술
고객반응 / 개선점
Frontend
Backend
최종성과 / 지표
Appendix
One And Only Voice
10. socket-io 를 활용한 채팅 기능 구현
�
트러블 슈팅 관련
글로벌 플레이어 상태 동기화
DB 해킹 이슈
Checkbox 중복 불가 처리
!
녹음 데이터 업로드
!
!
태그 삭제 시 데이터 관리하기
!
!
에러 미들웨어 customized
!
트러블 슈팅
Input Checkbox 기능
그인풋의 데이터를 하위컴포넌트로 넘겨준다 ,
하위컴포넌트에서 querySelectorAll 을 사용해 모든 인풋을 불러오고
all인풋의 checked된 속성이 >=1 일때
상위에서 불러온 인풋만 빼고 all인풋을 checked 속성을 false로 만들어 주었습니다 .
트러블 슈팅
목소리 녹음 기능
�글로벌 플레이어 상태관리
const getVoiceBlobUrl = () => {
const voice_blob = new Blob(chunks, { type: "audio/mp4" });
const url = URL.createObjectURL(voice_blob);
// 실제 서버로 넘길 보이스 파일 데이터 객체
setVoiceFile({
file: voice_blob,
type: "record",
url,
});
return url;
};
<audio /> 참조�playerRef.current.src = url
chunks data -> blob object
트러블 슈팅
목소리 녹음 기능
�글로벌 플레이어 상태관리
GlobalPlayer Component�
// 컴포넌트 마운트 시점에서 audio 정보를 리덕스 상태에 저장
const getPlayerInstance = () => {
const player = PlayerRef.current.audio.current;
dispatch(playerActions.setPlayer(player));
};
Redux store - globalPlayer module
const initialState = {
playerInstance: null,
play_list: [],
now_track: {}, // 오디오가 플레이 될때마다 현재 재생되고있는 오디오 정보를 저장
};
각 컴포넌트에서 플레이 정보를 렌더링 할때�playerIntance.pause 상태 / now_track 정보를 참조하여
다시 그려질 화면정보를 바꾸어줌
트러블 슈팅
선택한 태그들을 history.push로 url값에 넣어서 받아오는 걸로 구현하려고 했다.
내가 생각한 로직
1.useParams를 사용해서 태그들을 가져온다.
2.가져온 params값을 useEffect와 useState를 이용해서 바뀐 tag값을 만들어 주고 tag를 map돌려서 출력
->삭제버튼에 onclick을 달아서 필터링하여
삭제기능을 구현
문제
url값이 삭제되지 않아 이 방법으로는
구현하기가 어려울 것 같음
최종=>
1.history를 이용하여 객체형태로 state넘기기
2.props로 넘겨준 state를 받아와서 삭제된 데이터를 다시 dispatch하고 다시 load해오기
태그 삭제하기
1
3
2