[Blog Thumbnail Makr] 썸네일 메이커를 만들어보자

---

근 3개월 간 블로그에 포스팅을 작성하지 않았었다. 

JLPT N2 시험 준비로 프로젝트와 블로그에 신경을 쓸 여력이 없었기 때문인데, 2021년 12월 5일, 2021년 2회차 JLPT 시험을 무사히 치르고 나서 시간적 여유가 생겨 밀렸던 포스팅을 해볼까 한다.

 

Blog Thumbnail Maker란?

항상 블로그에 포스팅을 작성할 때마다 나만의 통일된 썸네일을 갖고 싶다는 생각을 종종 해오곤 했다. 나의 포스팅만의 정체성을 좀 확립하고 싶기도 하고... 그래서 최근에 공부하기 시작한 'React.js를 어떻게 잘 사용해볼 수 없을까?' 라는 고민이 맞물려 이 프로젝트를 시작하게 되었다.

 

Blog Thumbnail Maker 프로젝트란 말 그대로 블로그 썸네일을 생성해주는 도구이다. 우리가 자주 접하는 짤방 생성기 등과 원리가 동일하지 않을까 싶은 생각이 들었고, HTML의 <canvas>를 사용하기에 React.js를 사용해도 무리없이 제작을 할 수 있겠구나 싶었다. 

 

하지만, 언제나 세상에는 나보다 앞선, 나보다 대단한 사람들이 만들어 둔 것이 세상에 존재한다. 그것을 그대로 사용해도 문제는 없지만, 나는 프로그래밍을 공부하고 있는 사람인만큼 내 필요에 의한 도구는 스스로 만들어보고 싶다는 욕심에 이 프로젝트를 진행하게 되었다.

 

참고가 된 것들

velog 배너 생성기

▲ ddark님의 velog 배너 생성기

 

▲ cat meme generator

 

내가 주로 참고한 레퍼런스는 위의 두 가지이다. ddark님의 velog 배너 만들기 포스팅을 처음 접하면서 어떤 식으로 만들어 나가면 좋을지 큰 틀을 그렸고, 주요 기능 구현에 관해서는 cat meme generator를 React.js와 HTML <canvas>를 이용하여 빌드한 해외 유튜버의 영상을 참고하였다.

 

---

STARGAZER Thumbnail Maker

이 프로젝트의 포스팅은 만들어나가면서 작성하는게 아니라 어느정도 기능 구현이 완료된 것에 덧붙여가는 느낌으로 작성할 생각이다. 일단 어느정도 진행 된 프로젝트의 상태는 위와 같다.

 

구현된 기능

• 썸네일 배경 색상 선택 기능
• 썸네일 텍스트 입력 기능

정말 기본적인 기능만 구현이 되어있는 상태이다. 현재 이 포스팅에 사용된 썸네일 정도만 제작할 수 있는 정도이다. 따라서 실사용을 하기엔 무리가 있으면서...? 무리가 없다...

 

구현하고 싶은 기능

• 썸네일 배경 이미지 삽입 기능
• 서버 상에서 실시간 서비스

서버에 올려서 누구든지 접속 가능한 서비스로 발전시키는 것 또한 생각 중에 있다. 하지만 이 부분에 대해서는 차차 개인 포트폴리오용 웹페이지를 만들며 동시에 진행할 생각이다.

 

앞으로의 포스팅에서는 여기까지의 구현을 어떻게 했는지를 다루고 여기까지의 구현을 다 다루면 기능을 차차 추가시켜나가도록 하겠다.