| 팀장 | 팀원 | 팀원 | 팀원 |
|---|---|---|---|
| 😎박지훈 | 😆조현재 | 😃천희영 | 🥰최수연 |
 |
 |
 |
 |
메가바이트스쿨: K-Digital Training FE/BE 개발자 양성 과정 2기수강생과패스트캠퍼스 UI/UX 교육과정 3기수강생이 함께했습니다.AI Park는 본 프로젝트 파트너 기업입니다. AI Park는 AI 기술을 활용한 아바타 영상 제작을 서비스하고 있습니다.- (홈페이지: https://www.aipark.co.kr)
- 본 프로젝트에서는 AI Park 서비스를 모델로 하는
Hi Avatar서비스의 웹페이지와 서버가 구축되었습니다.
Hi Avatar는 사용자가 더 쉽고 빠르게 영상을 제작할 수 있도록 돕는 서비스입니다.- 코로나19와 디지털 전환으로, 비대면 영상 커뮤니케이션의 수요는 날마다 증가하고 있습니다.
- 그러나 영상 제작에는 많은 비용이 필요하고, 자주 제작하는 경우라면 부담은 더 늘어납니다.
Hi Avatar는 이러한 불편을 해소하기 위해 기획되었습니다.- 쉽고 빠른 스크립트 편집 → 영상 제작 과정 편의성 향상
- 실시간 아바타 영상 생성 → 빠른 결과물 확인 가능
- 음성 모델, 아바타 자유롭게 변경 → 영상 수정 편의성 향상
- 이미지와 캐치프레이즈를 이용해 서비스를 빠르게 소개
- 각 섹션에
지금 시작해보세요버튼을 배치하여 서비스 사용을 유도
- 최근 생성한 프로젝트와 영상을 확인
프로젝트 생성버튼을 눌러 새로운 프로젝트 시작- 기존 프로젝트를 눌러 마지막 작업 상태로부터 작업 시작
- 영상 위 툴바를 이용해 작은/큰 화면으로 재생 가능
Download버튼을 눌러 생성된 영상 다운로드
음성 파일 업로드하기와텍스트로 입력하기중 스크립트 입력 옵션을 선택텍스트로 입력하기선택 시 텍스트 입력 modal 창 팝업음성 파일 업로드하기선택 시 사용자 음성파일 업로드 창 팝업
- 줄글 텍스트를 복사 및 붙여넣기하여 영상에 사용할 스크립트 텍스트를 입력
- 텍스트는 마침표를 기준으로 분리되어 텍스트 편집 페이지에 문장별 컴포넌트를 생성
- 문장별 텍스트 편집, 문장 간 호흡 간격 조정 가능
- 새로운 문장 컴포넌트 추가, 기존 컴포넌트 삭제 가능
- 문장별 음성 미리듣기 가능
- 현재 작업을 진행 중인 문장을 전체 텍스트에서 하이라이트 처리
- 전체 텍스트 음성 미리듣기 및 다운로드 가능
- 현재 편집하고 있는 스크립트를 전체적으로 확인하는
전체 텍스트탭바 - TTS(Text-To-Speech) 음성(성별, 언어, 음성 모델)을 선택하는
음성 모델탭바 - 발화 속도, 톤(피치), 호흡 간격을 전체적으로 조정하는
음성 옵션탭바' - 위 3개 탭바를 텍스트 편집 페이지에 통합
- 아바타 종류(얼굴), 아바타 스타일(의상, 주요 제스처, 자세 등), 영상 배경 선택 가능
- 선택한 옵션에 따른 미리보기 이미지 생성
- 이전 페이지(텍스트 편집)에서 선택한 음성 모델, 음성 옵션을 재확인 가능
완료버튼 클릭 시, 백엔드 서버에 영상 합성을 요청
배포 주소
깃헙
협업툴
UI/UX
- 컴포넌트 간의 용이한 데이터 전달을 위해 전역 상태 관리가 필요했습니다
- immer, thunk 등의 패키지 의존성을 줄일 수 있습니다
- Redux의 단점인 보일러 플레이트가 줄어듭니다
- 컴포넌트 코드와 비동기 요청 코드의 분리가 필요했습니다
- 로딩, 에러 상태 관리가 간편합니다
- 데이터 캐싱을 지원합니다
- props를 활용한 동적 스타일링이 간편합니다
- global theme로 스타일링 코드 재사용과 통일성을 높일 수 있었습니다
2022.9.2 ~ 2022.10.14
회의
- 노션을 사용하여 회의 로그를 관리하였습니다.
개발
- 자체적인 커밋, 이슈, PR 컨벤션을 정하여 개발을 진행했습니다
- 코드 리뷰를 통한 PR을 진행했습니다
- 프론트와 백엔드가 지속적인 소통을 통해 필요한 API 목록들을 확정했습니다.
- API 명세서를 작성하여 개발의 효율성을 높였습니다.
