[Electron] 녹취록 작성기(STT).exe 개발기

오랜만에 올리는 취미 개발이다.

 

사실 그 사이에 만든 다른 게 있긴 한데.... 그 포스팅은 좀 나중에 올리기로 하고 가장 최근에 일렉트론으로 만든 녹취록 작성기 얘기를 해보려고 한다.

 

처음 일렉트론 이야기를 듣게된 계기는 지인 개발자분의 언급이었다. 얼마 전, 한창 리액트를 공부하며 재미를 느끼고 나름 나름 스터디도 진행하던 도중이었다.

 

"나중에 관심있으면 리액트로 윈도우 프로그램도 만들어보세요."

 

"네?? 그런것도 가능해요?"

 

"일렉트론이라고 node.js로 만들어진 프레임워크 있어요"

 

"오오....!"

 

최근 크롬 확장프로그램을 리액트로 만들어 보면서 리액트 생태계의 확장성에 감탄을 마지않던 차였기 때문에 '조만간 일렉트론으로 뭐라도 한 번 만들어보고 만다'라고 단단히 벼르고 있었다.

 

그러던 중, 사내 CX팀에서 비즈니스 요건때문에 녹취록을 작성할 일이 있다는 걸 알게 되었다.

 

이전에 아는 지인분이 해당 일의 고충을 토로한 기억이 있기 때문에 녹취록 작성은 5분 분량을 작성하기 위해 15분, 20분이 소요되는, 고된 일이라는 걸 잘 알고 있었다.

 

그 때문에 작년 5월에 남는 구글 크레딧도 소진할 겸, 구글 STT(Speech to Text)를 붙여 녹취록 작성을 돕는 웹을 만들어 지인분께 제공하기도 했었다. (그 분은 이제 녹취록 업무는 하고 계시지 않는다고 하더라...)

 

작년 5월쯤 만든 웹

금요일에 녹취록 업무 이야기를 듣고, 주말 간 사내 CX팀을 도와줄 수 있는 녹취록 작성 프로그램을 한 번 만들어보자는 생각을 했다.

 

마침 일렉트론으로 윈도우 응용 프로그램을 만들고 싶었기 때문에, 기능과 편의성을 보강해서 exe로 제공을 하자! 는 포부를 가지고 작업을 시작했다.

 

기존에 만든 웹은 녹음 파일을 정해진 확장자와 비트레이트로 인코딩해서 업로드하는 불편함이 있었기에, 백단에 있는 python 코드를 수정해서 비트레이트를 자동으로 수정해주도록 만들었다.

 

STT에 버킷 주소를 넘기기 전에, 음성 녹음을 버킷 업로드하는 코드.

 

record_electron.py

    """ Upload data to a bucket"""
def upload_to_bucket(blob_name, path_to_file, bucket_name):

    convert.convert_wav_to_16bit_mono(path_to_file, blob_name)
    """파일 변환"""

    storage_client = storage.Client.from_service_account_json(
        'key.json')

    bucket = storage_client.get_bucket(bucket_name)
    
    blob = bucket.blob(blob_name)
    
    blob.upload_from_filename(blob_name)


    return blob.public_url

convert에 pyaudioconvert를 사용했는데, 자꾸 sox 실행하는 부분에서 에러가 나서 코드를 수정해서 사용했다. 

 

또 변환 과정에서 손실되는 패킷들이 있다고 하길래 보정을 위해 -G 파라미터도 추가해줬다.

(안 했을 때와 비교해서 인식률 차이가 엄청 컸다.)

 

서드파티 소스코드 복붙 후 수정해서 사용.

이제 일렉트론에서는 재활용을 위해 기존 웹의 로직을 그대로 가져가고, 요청을 일렉트론 내 ajax로 넘기면 되겠지... 싶었다.

 

맨땅에서 헤딩하는 것도 좋지만, 나에겐 월요일까지 CX팀에게 해당 프로그램을 납품(!)하고 싶은 욕구가 있었기 때문에 보일러 플레이트를 찾아보았다.

 

 

electron-react-boilerplate/electron-react-boilerplate

 

애증의 존재였으나, 지금은 극호가 된 타입 스크립트까지 지원하는 보일러 플레이트이다.

 

이건 못 참지 ㅋ 바로 clone후 yarn start.

 

스크린샷 저장을 못해서 issue에 올라온 사진 가져옴.

 

구동해보니 영롱한 화면과 크롬 디버깅 탭이 나를 반긴다.

 

와... 이거 응용프로그램인데 사실상 웹이랑 똑같네? 싶을 정도로 화면을 편하게 만들 수 있었다.

 

물론 세세한 부분에서 짜증 나는 포인트들이 있긴 했는데 (build 한 결과물이랑 develope단계의 ui가 다름) 그걸 감안해도 응용프로그램을 이렇게 쉽게 만들 수 있는 게 어디야...

 

로티 컴포넌트 만들어서 로티 애니메이션도 붙여 붙여~

 

인트로 페이지도 쉽게 만들어 만들어 ~

 

하루 만에 완성해야 했기 때문에 스타일은 대충 material-ui 가져다가 썼다.

 

프로세스 진행 중엔 심심하지 않게 화면 만들어주고,

 

에러 페이지도 만들어준다.

 

혹시 모르니까 에러 로그도 txt로 받을 수 있게 했다.

 

사이드 프로젝트를 주로 하루, 길면 이틀에 끝내는 경우가 많다.

 

그러다 보니 코드를 날림으로 대충대충 작성하게 되고 또 그 과정에서 일종의 어지름의 쾌감(?)을 느끼기도 한다.

 

하지만 나중에 코드를 다시 보게 되면 부끄럽고 창피한 건 결국 나인 것 같다....

 

개발새발로 개발했고 그 결과는 다음과 같다.

 

 

 

만족할만한 퀄리티는 아니지만, 일렉트론으로 이것저것 만져보고 또 여러 가지를 배웠던 시간이었다.

 

마지막 빌드 시에 CSS 이슈가 생기면서 살짝 스트레스를 받긴 했지만...

(빌드 시에 Global CSS 적용이 되지 않았다. 원인이 뭔지 확실히 모르겠다. 바벨이나 웹팩 설정 문제일 수도...)

 

어쨌든 해당 이슈는 결국 해결했다.

(css in js방식으로 변경하니 적용되었다)

 

나름 이 정도면 뿌듯한 주말이었을지도?

 

 

p.s. 월요일에 이 프로그램을 설치하고 사용해보신 CX팀원분은 녹취록 작성에 필요한 수고가 줄어 굉장히 만족하셨다.