영화 자막 썸네일 프로그램 만든 썰
React 연습 프로젝트
얼마전에 chatGPT 한테 썸네일 프로그램 만들게 코드 좀 짜달라고 했다 ㅋ 관련 포스팅은 아래 글.
그래서 얘가 준 코드를 기반으로 프로그래밍을 완료했다 ㅋ
완료한 프로그램으로 만들어 본 썸네일 ㅋ
꼬박 주말 포함 3일 정도 걸렸나? 생각했던 것보다 빨리 끝냈다. 만약 chatGPT가 제공해준 기본 코드가 없었다면 더 오래 걸렸을 것 같다. chatGPT가 기본적인 코드를 짜준게 있으니까 그거 보면서 공부도 하고 적용도 해볼 수 있었다. chapGPT가 있으니까 공부하기도 수월해지고 개발하기도 수월한 너낌 ☺️
영화 자막 썸네일 이미지 프로그램 페이지 바로가기 >>
아직 리액트 배운지 얼마 안되서 구현 부분에서 좀 부족한 측면이 있지만(근데 뭐가 부족한지 모르는게 함정) 그래도 이거 개발하면서 리액트랑 많이 친해졌다. 강의 보는 것보단 부딪히면서 찾아서 배울때 훨씬 내것이 되는 것 같다... 그래서 프로젝트 완료되었으니 정리할겸 썸네일 프로그램 개발 후 회고(?)를 적어보려고 한다.
기본 화면은 씸플하다. 사실 UI가 좀 구리다. 마음에 안든다. UX 공부해야되 ㅠ 기본 구조는 사진을 업로드하고, 사진을 불러와서 자막을 넣고 최종적으로 이미지를 저장한다. 자막도 1줄만 가능하고, 영화자막 느낌의 자막 서체로만 적용했다. 첫 리액트 프로젝트로 이걸 하기로 마음 먹은건, 실제로 내 브런치 블로그에 넣을 이미지로 쓰려고 했기 때문이당.
첫 화면1. 메인 파일 thumbnail-editor.jsx
첫 화면 코드이다. 상태를 관리해줄 file만 변수로 두었다. 컴포넌트는 ImageUploader와 ImageCanvas 두개를 만들었다. 그래서 ImageUploader에서 파일을 올리면, handleFileChange 함수가 작동하고, useState로 file의 상태를 변경해준다. 변경된 file은 ImageCanvas 컴포넌트에서 받는다.
그리고 canvas 화면 자체가 width가 정해져있어서 모바일에서는 보기가 힘들었다. 그래서 Pc와 Mobile 뷰를 따로 두었다. 이렇게 media 에 따라서 그 값을 받을 수 있는 라이브러리인 react-responsive 를 사용했다.
2. 미디어(화면 view 포인트) 관리 파일 Media.jsx
3. 이미지 업로드 파일 ImageUploader.jsx
이미지 파일을 업로드해서 file를 넘겨주는 컴포넌트다. 특별할 게 없다. type="file"인 input 으로 파일을 받고, change 이벤트가 일어나면, 그 파일을 onImageChange 로 받았던 콜백함수로 넘겨준다. ** 극뽁 못한거 1 - input 태그에서 onChange 이벤트가 파일명이 같은 똑같은 파일을 연속 두번 업로드했을 때, 두번째 이벤트를 인식 못했다. 이 부분을 어떻게 해야 할지 모르겠더라능 ㅠㅠ. 이건 결국 극뽁 몬함..
4. 자막을 입히고 저장하는 파일 ImageCanvas.jsx
canvas 태그로 이미지를 불러온다. 거기에 자막을 입히고 사용자가 입력한 자막으로 수정이 가능하다. canvas 태그를 처음 써보기도 하고, 이미지를 핏하게 맞추는 것, 그리고 자막 위치를 조절하는 등의 코드 계산이 많이 들어갔다. 많은 블로그들을 참고했다.
여기서 한가지 발견했던 문제가, 내가 설정한 아래 코드였다.
context.font = "italic bold 72px Gulim"
이게 내 윈도우 컴에서는 잘 보이는데, 맥에서는 제대로 폰트가 보이지 않았다. 왜그럴까 구글 서칭을 하다가 뾰족한 답이 안나와서 chatGPT한테 물어봤다. ㅋ
html canvas tag에서 context.font 로 폰트 설정을 하는데, gulim 서체로 설정했더니 mac os 에서는 서체가 적용이 안되.
chatGPT :
HTML Canvas의 context.font 속성을 사용하여 글꼴을 설정하면, 사용자의 컴퓨터에 설치된 글꼴 중에서 사용 가능한 글꼴을 찾아서 적용합니다.
따라서 사용자의 컴퓨터에 Gulim 글꼴이 설치되어 있지 않을 경우, 해당 글꼴을 사용할 수 없습니다. Mac OS의 경우, Gulim 글꼴이 기본적으로 설치되어 있지 않으므로 이와 같은 문제가 발생할 수 있습니다.
해결책으로는, 사용자의 컴퓨터에서 사용 가능한 다른 글꼴을 찾아서 적용하거나, 웹 폰트를 사용하는 것입니다. 웹 폰트를 사용하면, 해당 폰트를 웹 서버에 업로드하여 사용할 수 있으며, 모든 사용자가 동일한 폰트를 볼 수 있도록 보장할 수 있습니다.
예를 들어, 다음과 같이 웹 폰트를 사용하여 Gulim 글꼴을 적용할 수 있습니다. 아래 코드에서는 @font-face 를 사용하여 Gulim 글꼴을 웹 폰트로 지정하고, <canvas> 요소에 font-family 속성을 설정하여 해당 폰트를 사용합니다.
아니 너무 기본적인거였잖아...희희희
웹폰트를 가져오려니 마땅한게 없어서 ttf 파일을 다운받아서 폴더에 업로드하고 @font-face를 main.less 파일 코드에 넣어주었다. ** 극뽁 못한 거 2 - 사실 이 이후에도 font 로딩이 느려서 처음 로딩때 불러오지 못하는 문제가 있어서 chatGPT와 설전을 벌이다가 '이거 안되는데 왜 안되는지 모름?' 물어봤더니 '똑바로 경로를 넣었으면 될텐데' 라고 해서 음 한계를 느끼고 포기 ㅠㅠ 결국 처음 로딩되는 문장을 없애고 업데이트하는형식으로바꿈...하..
멋지기도 하지만 가끔은 벽을 느껴. 너...결과물
요로코롬 자막이 달린다!요렇게 개발 완료! 재미있었다. 실제로 이거 써서 블로그 글도 써봤는데 엄청 편했다. 예전에 포토샵으로 작업했었던 일이었는데 넘 편한것... 내가 필요한 앱이어서 빨리 만든것 같기도 하다 ㅋ 다음엔 좀 더 업그레이드 해보면 좋겠다는 생각이 든다. 실제로 썸네일 프로그램은 유튜브할때 많이 쓰던데 그 용도에 맞는 썸네일 프로그램이 하나 더 있어도 좋겠다는 생각. 하지만 낫 나우 ㅋ 아우 canvas 넘나 빡세 언젠가 다시 해봐야겠다. :)
