Kgeul - 기업협업 회고

다비수디지탈이라는 회사에서 했던 4주간의 기업 협업(인턴십)에 대한 회고이다.

 

다비수디지탈은 2018년에 설립된 회사이고 그 이전에는 다른 회사명으로 교육 사업을 진행해왔다.

주로 유아, 초등학생 대상의 교육 콘텐츠 사업을 주력으로 삼고있는데

그동안 축적된 교육 노하우를 활용, 에듀 테크 사업으로 확장을 도모하고 있는 상태였다.

에듀테크 전환의 일환으로 ‘외국인을 위한 한국어 학습 app 제작’ 프로젝트를 진행하고 있었고

제품 출시에 앞서 좋은 아이디어를 얻기 위해 우리에게 프로젝트의 일부를 맡겼다.

1. 프로젝트 소개

• 외국인을 위한 한국어 회화 학습 하이브리드 앱 제작
• 기간 : 2022.12.12 ~ 2023. 1. 5 (4주)
• 인원 : FE 1명, BE 4명
• Stack
  • 공통 : Node.js, npm
  • Front : Javascript, React, Sass, HTML
  • Back : Typescript, express.js, mySQL, Amazon S3, Redis

구현할 주요 기능과 UI의 기본 골격은 정해져 있었다. 하지만 이미 완성된 프로토타입의 코드에는 접근 권한이 없었기 때문에 기능 구현 로직과 UX를 우리가 독자적으로 설계했다.

필수 기능

• 한국어 회화 학습을 위한 녹음 파일 생성(google TTS)
• 한국 드라마, 예능 등 영상의 재생 속도에 맞게 대화 음성과 대화 text의 synchronize & highlight 처리
• 사용자의 음성 녹음 내용에 대한 발음 평가

UI

• UI는 내부 정보로, 우리에게도 프로토타입이 공개되지 않았음. (A4 1장에 이미지만 출력하여 공유해주심)

2. 나의 역할

2.1 회화(conversation) 학습 정보 조회 API 작성 및 화면 구현

담당했던 API는 회화 학습에 필요한 정보(대화 text와 음성 등) 조회(GET) 요청을 처리하는 것이었다.

하지만 활용 가능한 음성파일이 없었기 때문에 음성파일을 직접 만들어야 했고

'대화 text'를 제작하여 해당 text를 음성으로 변환해주는 tts기술을 사용하기로 했다.

text를 음성으로 변환하는 방법은 많았으나 상업적, 무료로 이용이 가능한 구글의 tts(text to speech)를 사용하기로 했다.

구글의 tts는 node.js에서 사용 가능한 sdk 코드를 모듈화하여 사용하였다.

여러 개의 음성 파일을 동시에 만들고 만들어진 음성 파일을 체계적으로 관리하기 위해 파일의 네이밍 컨벤션을 정하여 코드를 작성했다.

 

이렇게 만들어진 음성 파일은 aws S3에 업로드하였고 main DB에는 s3에 저장되어 있는 해당 파일의 경로를 저장했다.

 

또한, 학습 정보는 자주 요청 되는 정보이면서 내용 수정이 적은 정보이기 때문에

잦은 요청에 의한 main DB의 부담을 덜고 빠른 응답을 위해 redis를 활용해 캐싱했다. (Look Aside, Write Around 전략 사용)

 

 

그리고 이번 프로젝트는 프론트엔드가 1명이었기 때문에 우리 팀이 구현하는 모든 기능의 화면을 혼자 완성하는 것은 무리가 있었다.

따라서, 프론트엔드 팀원의 부담을 덜어주고자 React를 학습했고 담당한 api를 요청하는 화면도 담당하여 위 영상과 같이 구현했다.

화면을 구현할 시간에 다른 학습을 할 수도 있었지만 프론트 개발을 선택한 이유는 다음과 같았다.

1. 벡앤드 개발자로서 프론트엔드 기능 구현을 어떻게 하는지 이해하고 있으면, 추후에 협업에 도움이 될 것이라고 생각했다.
2. 언젠가는 프론트엔드 개발도 할 줄 알아야 한다고 생각했고 특히 주니어라면 특정 분야의 깊은 이해보다 넓은 이해가 성장에 더 도움이 될 것이라고 생각했다.
3. 취업을 한 이후, 신입 개발자로 처음 맡게 되는 일들이 내가 모르는 것일 가능성이 높기 때문에 '빠르게 학습하여 아웃풋 내기'를 연습하고 싶었다.

기본적인 레이아웃은 프론트엔드 팀원이 만들어주었고

기능 구현은 useState, useEffect 등의 hook, props, 조건부 랜더링 등의 개념을 활용하였다.

제대로된 화면 개발은 처음이었기 때문에 쉽지는 않았다.

또한 빠른 학습과 아웃풋에 집중했기 때문에 완벽히 이해하고 만들지 못한 것은 아쉽지만

틈틈히 바닐라 자바스크립트로 화면을 개발하는 연습을 하여 react 학습을 위한 기본을 다져야겠다는 생각이 들었다.

2.2 기술학습 및 전파

이번 프로젝트에서는 redis, aws s3, typescript 등 경험해보지 못한 기술 스택을 활용했다.

따라서, 학습과 초기 세팅에 많은 리소스가 투입될 가능성이 높았고 이는, 빡빡한 프로젝트 일정을 완수 하는데 block 요인으로 작용할 것으로 예측이 되었다.

마침 담당한 API도 하나여서 아쉬워했던 참이었기 때문에 새로운 기술들을 다양하게 공부할 수 있는 기회로 삼고자 했다.

그래서 새로운 기술 스택을 활용하기 위한 초기 세팅 및 활용 방법, 해당 기술 스택의 활용 목적 등

학습해야 할 내용을 조사, 정리하여 팀원과 공유하였다.

3. 회고 종합

[만족스러운 점]

• 기업 협업 동안 '프로덕트, 고객 관점에서 다양한 문제들을 기술적으로 해결해보는 경험을 꼭 해보아야 겠다'고 생각했다. 그래서 프로젝트를 하는 중간중간 의사결정의 순간에 "고객, 프로덕트"를 중심으로 두고자 노력했다.
• 담당한 API는 하나였지만, 그만큼 새로운 기술들을 다양하게 공부할 수 있는 기회였습니다. 팀원이 학습할 내용을 대신 조사, 정리하여 전달하면서 맡지 않은 기능 구현을 위한 기술들도 익히고자 노력했다.
• 협업 막바지에 이르러서는 React에도 도전해서 회화 학습 페이지의 기능을 구현했다.

[아쉬웠던 점]

• 코드를 작성하기 전에 구체적이고 명확한 로직을 먼저 세우고 코드로 녹여내는 역량이 아직 많이 부족하다고 느꼈다. 왜 그렇게 못했을 까 생각해보니 아래의 아쉬웠던 점과 연결이 된다.
• 새로운 기술을 학습할 때 ‘빠른 학습과 아웃풋(코드 작성)’에만 치중하여 기술의 정의와 원리를 정확히 이해하고 적용하지 못했다.
  • 물론, 다른 팀원과 공유하기 위해 따로 정리하며 학습자료를 만들었지만, 완벽히 이해하지 못했기 때문에 반복해서 자료를 다시 찾아보게 되었다. 한 번 학습할 때 곱씹었다면, 반복 학습에 들어간 시간을 줄여 코드를 리펙토링하거나 기능을 섬세하게 다듬을 시간으로 활용했을 텐데.
  • 오히려 학습해야 할 내용이 많을수록 급하면 안될 것 같다. 학습에 필요한 시간을 구체적으로 정해 놓고 정해진 시간 내에 차근차근 정리하면서 학습한 내용을 내 것으로 만들고 나서 아웃풋에 집중하는 것이 효율적일 것 같다. 아웃풋을 위한 학습이 잘 되어 있을 수록 아웃풋을 내기 위해 필요한 시간이 줄어든다는 것을 경험했다.