웹 서비스
HIS
사진·음성·문장만 넣으면 말하는 영상이 만들어지는 서비스에서, 처음 쓰는 사람도 따라갈 수 있는 입력과 결과 확인 흐름을 만들었습니다.
- 2023 SW중심대학 공동해커톤
- 2위
- 영상 1개 생성 시간
- 1~3분
- 지원 파일 형식
- JPG · PNG · MP3 · WAV
업무 배경과 해결 과정
- 배경
사용자가 입력한 문장을 자신의 사진과 목소리로 읽어주는 영상을 만드는 서비스입니다. 비슷한 목소리와 톤의 발음을 따라 할 수 있도록 기획한 2023 SW중심대학 공동해커톤 프로젝트(2위)로, 웹에서 파일과 입력값을 받아 영상 생성 서버에 연결하는 부분을 맡았습니다.
직접 만든 것
사진·음성 파일 관리, JSON 요청 전송, 서버가 반환한 생성 영상을 표시하는 웹 기능을 구현했습니다.
- 01
사진·음성 업로드 파일 관리
사용자의 사진과 음성 파일을 영상 생성에 활용할 수 있도록 업로드 파일 관리 기능을 구현했습니다. 서비스 소개 페이지와 함께 사용자가 파일과 문장을 입력하는 웹 화면을 구성했습니다.
- 02
JSON 기반 영상 생성 요청
웹에서 입력받은 데이터를 JSON 형식으로 변환해 프로젝트의 Django 백엔드에 전달했습니다. 사용자 입력을 서버의 영상 생성 처리로 연결하는 웹 요청 기능을 담당했습니다.
- 03
서버 응답과 생성 영상 표시
백엔드의 응답을 받아 생성된 영상을 웹 화면에 표시했습니다. 사용자가 제출한 사진·음성과 입력 문장을 바탕으로 나온 결과를 브라우저에서 확인할 수 있도록 연결했습니다.
사용 기술JavaScript · Django · TTS API · HTML · CSS
화면
담당 범위
- 서비스 소개 페이지와 사진·음성 업로드 파일 관리 기능 구현
- 웹 입력값을 서버 요청으로 변환하고 생성 결과를 표시하는 연동 기능 개발
처리 흐름
- 파일·문장 입력
사용자가 사진·음성 파일과 영상에서 읽을 문장을 제공합니다.
- 생성 요청 전달
웹 입력값을 JSON으로 변환해 영상 생성 서버에 전달합니다.
- 영상 결과 표시
서버 응답을 받아 생성된 영상을 웹 화면에 표시합니다.
한계와 남은 과제
- 사진·음성 입력 방식 개선
당시 파일 업로드의 사용 편의성을 충분히 다듬지 못했습니다. 사진과 음성을 한 번에 업로드하는 방식은 후속 개선안으로 남겼습니다.
- TTS 목소리 유사도 검증
영상 생성 결과값은 확보했지만, 원본 목소리와 TTS 결과의 유사도를 확인하는 검증은 추가 과제로 남았습니다.
다시 만든다면 (개선 설계안)
구현 내용을 바탕으로 확장해 검토한 설계안입니다.
- 업로드 검증과 요청 실패 후 복구
파일 형식·용량과 필수 입력을 먼저 검증하고, 입력 오류와 영상 생성 요청 실패를 구분해 안내하는 개선안을 검토할 수 있습니다. 요청 실패 시 입력 문장을 유지하고 필요한 파일을 다시 선택해 재시도할 수 있도록 하는 설계안입니다.