위코드에서 진행한 기업 협업 과정을 통한 다비수디지탈에서의 1달간의 인턴 활동에 대한 회고이다.
다비수는 유아, 초등 수학 중심의 교육 회사이다. 기존의 유초등 수학 중심의 교육에서 다른 과목까지 확장하려 하는 중이다.
프로젝트 소개
먼저 한달간 만들 프로젝트에 대해 설명해주셨는데 내용은 다음과 같다.
Target : 외국인 대상의 한국어 회화 학습 페이지
Copy : 한국어를 배우는 가장 빠른 지름길
차별점 :
- 체계적이지 않고 비전문적인 기존의 한국어 교육 app 시장에서 한국인이 직접 만든 체계적인 교육 app service를 제공한다.
- 한글 창제 원리를 그대로, 누구나 '즐기면서' 쉽게 한글을 배우자
- 한국어 관심 유입 대표주자였던 'k-문화', 엔터테인먼트로 배우는 한국어
구현할 것
처음 소개해주신 기획안 중 우리가 구현해야 할 핵심 기능은 두 가지였다.
1. 한국 드라마/영화/예능 등의 영상으로 학습하기
1페이지
- 영상 넣기
- 영상 자막 넣기
- 영상과 싱크 맞춰 자막에 하이라이트 효과 주기
2페이지
- 앞의 영상 그대로 유지
- 영상의 대사를 문제로 출제
- 한국어 대사를 단어로 쪼개 완성된 문장 만들기
3페이지
- 앞의 영상 그대로 유지
- 해당 대사를 녹음 후 녹음한 것 듣기
- 녹음한 유저의 발음을 평가 후 점수 반환
2. 실생활 대화 학습
- 각 대화를 주제/상황에 따라 분류
- 대화를 텍스트로 보여줌
- 음성 버튼을 누르면 tts활용해 음성 플레이
기술 스택
Front : React
Back : TypeScript, Express, MySQL, Redis, AWS S3
개발 인원
Front 1명
Back 4명
내가 한 것
일단 프런트 1명, 백 4명으로 좀 불균형이 있었다. 그래서 개발 초반부터 서버 개발을 빠르게 마치고 프런트 영역을 도와줄 생각을 했고 실제로 그렇게 되었다..
개발 시작 전..
개발을 시작하기 전에 회사 측에서 기존에 쓰던 기술 뿐만 아니라 다른 것들도 활용해보라는 제안이 있어서 팀원들과의 회의 후에 typescript, redis, graphQL 등을 학습하고 검토하는 시간을 가졌다.
-
먼저 타입스크립트는 기존에 사용하던 js와 크게 다른 것이 없고 바뀐 언어 때문에 개발을 못하는 경우는 없을 것이라 판단해 도입하기로 했다. 처음엔 js와 비슷하게 짜더라도 기능을 우선 구현해보고 이후 타입스크립트의 여러 기능들을 활용해 보았다.
-
Redis도 도입해보기로 했다. 기존에 사용했던 mysql같은 관계형 db 뿐만 아니라 다른 형태(key-value)의 db라 매력적이었고 이번에 만들 프로젝트의 성격에도 잘 맞았다. db에 저장할 데이터들이 대부분 최초에 한 번 저장하고 이후엔 같은 데이터를 반복해서 호출하는 경우가 많았기 때문이다.
-
GraphQL은 처음 봤을 때 신기했고, 프로젝트에 사용할 수 있을 지 판단하기 위한 정도로만 공부했기 때문에 자세힌 모르지만 나중에 다시 활용해보고 싶었다. 그러나 이번 프로젝트에선 쓰지 않기로 했다. 왜냐면 GraphQL 학습을 시작한 시점에 이미 rest api 기준으로 각자 맡을 api를 분배했기 때문이다.
구글 TTS
(음성버튼을 누르면 한글을 읽어준다. 벨로그 영상 올리는 법을 찾다가 gif로 올려 소리가 안나온다;;)
이 페이지에서 음성 버튼을 눌렀을 때 나오는 음성 파일을 미리 만들었다.
미리 db에 저장한 한글 텍스트들을 구글 tts를 활용해 음성파일을 제작했다.
구글 클라우드 설정만 잘 되면 코드는 예시 코드 활용해 금방 짰던 것 같다.
유저 발음 평가
(마이크 버튼을 누르고 녹음 후 스피커 버튼을 누르면 녹음한 것을 들을 수 있다. 동시에 발음 정확도 점수가 나온다)
가장 오랜 시간이 걸린 기능이다.
개발을 하려고 보니 파일의 형태, 전송 방법 등에 대해 모르고 있었다. 이미지나 json 등은 이전에도 여러 번 처리해봤지만 유저가 녹음한 음성 파일은 어떤 형식으로 저장되고 전송해야 하는지 몰랐다.
백엔드 api를 짜야 하는데 위의 내용들을 알 수 없었고, 프런트도 1명이라 해당 파트까지 구현하려면 시간이 한참 필요했다.
그래서 직접 녹음 기능을 구현해보기로 했다. 프런트는 바닐라js로 해본 것이 다라 React는 처음이었지만 조금씩 자료를 찾으면서 구현해봤다.
결국엔 녹음과 플레이 버튼 2개짜리 페이지를 만들었고 파일이 어떤 식으로 저장되는지 테스트해 볼 수 있었다.
구체적인 구현 과정은 전에 정리한 글 참고..
https://velog.io/@songhyun/NodeJs-%EB%B0%9C%EC%9D%8C-%EC%A0%95%ED%99%95%EB%8F%84-%ED%8F%89%EA%B0%80-%EC%A0%95%EB%A6%AC
이후 프런트 분이 작업할 때 간단하게 붙여넣는 정도로 페이지를 완성할 수 있었다.
자막 싱크
원래 맡았던 위의 두 기능을 끝내고 남은 시간 동안 프런트를 도왔다.
위 페이지에서는 영상의 대사를 자막으로 나오게 하고, 영상 싱크에 맞춰서 하이라이트를 주는 기능이 필요했다.
먼저 제작한 vtt파일을 서버에서 넘겨 받아 각 단어의 시간 정보와 영상의 재생 시간을 비교해 단어의 시간 정보 안에 영상 재생 시간이 있으면 하이라이트 효과를 주도록 했다.
React를 완벽하게 이해하진 못했지만 조금씩 찾아보면서 최대한 목표한 기능을 구현하는 데 집중했다.
기타
PM을 맡아 DB 설계를 하고 그날그날 팀원의 작업 내용을 확인하고 일정 조율을 했다.
프로젝트 최종 발표를 맡아 회사에서 한 번, 함께 수료한 동기들 앞에서 한 번 하게 되었다.
회고
좋았던 점
살면서 팀에서 리더 역할을 한 적이 거의 없었던 것 같은데, 어쩌다보니 이번에 PM을 맡게 되었다.
위코드에서 1차 프로젝트 이후로 내가 맡은 부분만이 아니라 전체 프로젝트를 내가 한다는 느낌을 가지고 하려고 했던 것이 도움이 되었던 것 같다. 그러면서 팀원이 작업할 때 어떤 부분에서 실수가 나올 수 있는지, 어떻게 해야 실수를 줄일 수 있는지를 보는 눈이 조금 생긴 것 같다.
이전 프로젝트와 달리 초반에 공부해야 할 것이 많아 개발 시작 시점이 늦춰질 수 밖에 없었는데, 내가 맡았던 부분을 적절하게 시간 내에 마쳤고, 처음에 계획한 대로 프런트에도 도움을 줄 수 있었던 부분이 좋았다.
또, 새로운 기술들을 공부하고 도입하려 할 때, 그냥 도입한 것이 아니라 도입해야할, 또는 하지 말아야 할 근거를 가지고 결정했던 것이 맘에 들었고, 결과적으로 무리하지도, 부족하지도 않았던 것 같아 만족스럽다.
아쉬웠던 점
PM을 맡으면서 디테일한 부분까지 신경쓰지 못한 점이 있었던 것 같다. 예상은 했지만 생각만 하고 넘어간 경우 대부분 실제로 문제가 생겼던 것 같다.
일을 기한 안에 완성한다는 관점에서 예상 가능한 모든 부분에 신경을 쓰고 개입을 하는 것이 좋았을 것이라고 생각한다.
그러나 오로지 그러한 관점에서 이번 프로젝트를 임하진 않았던 것 같다. 따라서 그러한 부분에서 생긴 문제로 시간이 조금씩 지체되었고 blocker가 되었다.
여전히 모든 부분에 신경쓴다고 했을 때의 기회비용, 즉 나의 작업 시간과 위의 blocker를 비교했을 때 어느 것이 우선인지 잘 모르겠다.
총평
그럼에도 불구하고 기업 협업, pm, 발표 모두 좋은 경험이었다.
특히 실제 기업에서 일해보면서 일하는 방식이나 분위기를 느끼며 내가 어떤 환경에서 일하고 싶은지를 좀 더 구체적으로 정해볼 수 있었던 것 같다. 또 여전히 학습할 것이 너무나 많다는 것을 기술 세미나를 통해 깨달았고 차근차근 그동안 미뤄왔던 알고리즘, 자료구조 등 cs 이론을 공부해보려 한다.
오