[BTM] 1탄 - 리팩토링, 그리고 배포를 준비해보자.

📝 포트폴리오로써의 가치 향상

내가 React.js를 처음 배우기 시작하면서 진행했던 프로젝트가 하나 있다.

바로 이 블로그에 포스팅을 작성하며 삽입할 썸네일을 간단하게 만들기 위한 '블로그 썸네일 메이커' 다.

다른 분이 만드신 걸 보고 '재밌겠다', '나도 필요하겠다' 싶어 제작했었다. 

HTML Canvas Element를 useRef를 통해 활용하고 Color Picker 라이브러리와 이미지 저장 기능까지, React.js를 넘어 웹 애플리케이션으로써 경험해 볼 수 있는 많은 기술들을 공부할 수 있었던 즐거운 프로젝트였다.

 

하지만 몇 년 동안 사용하는 내내 신경쓰이는 몇 가지 단점이 존재했는데...

• 항상 localhost에서 열어야 하는 번거로움, 즉 배포가 안되어있음!
• 처음 시작했을 때의 목표, '이미지를 배경으로 만드는 썸네일'의 부재
• React-Select 라이브러리의 엉성한 사용

일단 가장 큰 갈증은 배포가 되어있지 않다는 거다...

 

그리고 전공심화 학사학위 과정 수업을 들으며, 더 나은 취업을 위해서는 더 나은 포트폴리오가 필요하겠다는 생각이 들었다.

원래 스스로 빌드하는 블로그에 그 초점이 맞춰져 있었지만, 블로그는 티스토리나 Velog 등 SEO를 신경쓰지 않고도 포스팅을 할 수 있는 좋은 플랫폼들이 많기 때문에 일단은 이들의 장점을 최대한 활용하는 것이 맞겠다는 생각이 들었다.

 

또한 여전히 나의 포트폴리오로 내세우는 프로젝트들은 졸작 내지는 토이 프로젝트였기 때문에 실제로 배포까지 이뤄진 프로젝트들이 없다시피 하다. 개발자로 하여금 자신의 작품이 실제 웹 상에 공개되어 다른 사람들이 직접 사용할 수 있도록 하고, 원활하게 사용할 수 있도록 관리하는 경험이 중요하다는 생각이 들었다.

 

그래서 일단 두 가지 정도를 생각하고 있는데 (나중에 밝히겠지만)

그 한 가지가 이 React.js를 처음 공부하며 만든 프로젝트인 블로그 썸네일 메이커를 다듬어서 배포를 해보자는 거다.

백엔드도 스스로 구성하고, 트랜잭션을 스스로 만들어내다 보면 배우는게 많지 않을까 싶기도 했고,

또 React.js로 만든 첫 번째 프로젝트이니만큼 손 볼 곳이 많고, 초심을 찾기에 가장 좋은 프로젝트 같았다.

 

✅ 업데이트 목표

1. Next.js 상에서 처음부터 개발하기

일단 이 썸네일 메이커는 CRA를 통해 생성된 순수한 React.js 프로젝트다.

현재 나는 Next.js를 주로 활용하고 또 공부하고 있기 때문에 Next.js 14를 통해 처음부터 다시 개발하는 느낌으로 옮겨보려고 한다.

이미지 업로드 기능을 구현하고 싶어 Node.js의 Express.js를 활용하려 하므로 

 

2. 썸네일 캔버스 기능 관련 업데이트

현재 이 썸네일 메이커는 썸네일의 크기, 폰트의 크기와 색상, 그리고 썸네일의 배경을 커스텀 할 수 있는 간단한 기능을 제공한다.

하지만 위에서 단점으로 꼽은 것이 이 캔버스를 커스텀할 수 있는 기능이 부족하다는 것이기 때문에 이것들을 좀 수정해보려고 한다.

캔버스 기능 관련해서 업데이트하고 싶은 항목들은 다음과 같다.

• 캔버스 사이즈 조절
  • 미숙하게 사용하여 커스텀조차 이루어지지 않은 React-Select 라이브러리 커스텀
  • React-Select에서 사용자가 직접 수치를 입력할 수 있는 기능 적용하기
• 캔버스 색상 변경
  • Color Picker에서는 현재 간단한 색상들만 지원하고 있는데, 해당 라이브러리의 공식 문서를 참조하여 더 다양한 색상을 편리하게 제공하는 방식에 대해 탐구하고 적용하기
• 캔버스 배경을 이미지로 
  • 썸네일 배경으로 사용자 지정 이미지를 사용할 수 있도록 기능을 구현한다.
  • 썸네일 텍스트의 가시성을 위해 이미지에 블러를 씌울 수 있는 기능을 구현한다.
  • 썸네일 배경으로 사용될 이미지의 크기를 캔버스에 크기와 적절하게 맞추도록 구현하기.

 

3. 기타 기능 업데이트

• 광고 배너 삽입
  • 카카오 애드센스 광고 배너를 활용하여 미약하게나마 수익 창출에 도전한다.

 

---

 

여기까지가 내가 기능적으로 더 향상시키고 싶은 부분이다. 

아무리 개인 프로젝트라 한들, 본격적인 취업 시장 도전 시기를 11월 중으로 보고 있기 때문에, 위에서 말한 두 가지를 모두 갖추기 위해서는 시간이 그렇게 많지 않다. 따라서 데드 라인도 그렇게 길지 않게 잡아볼까 한다.

방학이니만큼 시간이 넉넉하기도 하니 최소 8월 중순 (~ 8월 15일) 까지는 배포까지 완료되도록 작업을 진행해보고자 한다.

 

💡 마치며

 

이래저래 힘든 시기이지만, '뭐라도 해봐야지.' 하는 생각으로 고민을 하다가 불현듯 생각난 썸네일 메이커의 리팩토링이다.

새로운 것들을 만들어내는 것도 물론 좋겠지만, 새로운 것이라 하면 이미 학사 학위 과정의 졸업 작품이나 준비중인 해커톤 등 다른 곳들에서 충분히 만들고 있다는 계산이 들었고, 스스로는 내실을 다져보는 것이 어떨까 싶었다.

 

배포와 풀 스택 개발이라는 한 번도 도전해보지 않은 영역이지만서도 한 번 만들어 봤던 만큼 개척과 내실 다지기를 동시에 진행할 수 있겠다는 확신이 들었다. 

 

현재는 이 썸네일 메이커의 UI / UX를 Figma를 통해 구상하고 있다. 

앞으로 이 프로젝트에 대해서는 작업기 형식으로 진전이 있을 때마다 포스팅을 작성하여 진척을 블로그에 보고하겠다.

봐주시는 분들이 얼마나 될지 모르겠지만, 지금 내 작품을 웹 상에 올릴 생각에 걱정 30 설렘 70이다.

 

스스로와의 약속, 그리고 싸움이다.

화이팅 🍀