섬네일을 만들어보자!

💡만들게 된 배경

블로그 작성 과정에서 필요한 섬네일 이미지 선택에 대한 고민이 생겨, 이 문제를 해결하기 위해 직접 섬네일 생성기를 개발하였습니다. 이 프로덕트는 '미니 픽(Mini Pick)'이라는 이름으로 명명되었는데, 이 이름은 ChatGPT로부터 제안 받은 10가지 이름 중에서 가장 적합하다고 판단하여 선택하였습니다.

⚒️ 기술 스택

Next.js , TypeScript, TailwindCSS, html-to-image , file-saver,Vercel

주요 기능

배경 설정 - 단색, 그라데이션 배경, 이미지 url 배경을 설정할 수 있습니다.
텍스트 설정 - 텍스트에 그림자를 주거나, 흰색 또는 검정색으로 설정할 수 있습니다.
반응형 디자인 - 반응형으로 설계되어, 저장하는 이미지의 넓이를 창의 크기에 따라 조절할 수 있습니다.
빠른 저장 - 저장하기 버튼 클릭했을 때, 바로 저장됩니다.

🖥️ 구현 과정

1. 프로젝트 생성

아래 명령어로 프로젝트를 생성합니다.

npx create-next-app@latest

세부 설정은 아래와 같습니다.

What is your project named? image-generator
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use src/ directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes

2. 프로젝트 구현

전체 프로젝트 구현 과정은 아래와 같습니다.

전체 레이아웃 구성
1. 제목이 표시될 부분과 이미지 생성기가 표시될 부분을 구현했습니다.
제목 컴포넌트 구현
1. 제목을 나타낼 Title 컴포넌트를 구현했습니다.
이미지 생성기 컴포넌트 구현
1. 섬네일에 들어갈 문구를 입력 받는 부분을 구현했습니다.
2. 배경 스타일을 설정하는 부분을 구현했습니다.
  1. 단색, 그라데이션, 이미지 배경이 가능합니다.
  2. 이미지 배경의 경우, 모달을 통해 입력받습니다.
3. 텍스트 스타일을 설정하는 부분을 구현했습니다.
  1. 텍스트에 그림자를 추가할 수 있습니다.
  2. 텍스트 색상을 흰색 또는 검정색으로 설정할 수 있습니다.
4. 이미지로 변환하기 전, 미리 보기할 부분을 구현했습니다.
  1. 넓이가 고정되어 있지 않아, 다양한 크기로 저장 가능합니다.
5. 이미지를 저장할 저장하기 버튼을 구현했습니다.
  1. file-saver를 이용해서, 버튼을 눌렀을 때, 바로 저장되도록 구현했습니다.

3. 리팩토링

이미지 생성기 컴포넌트 분할
- 초기에는 하나의 컴포넌트 안에서, 값 설정과 미리 보기를 함께 진행했습니다. 이를 두 개의 컴포넌트가 나누어 처리하도록 분리했습니다.
html2canvas 에서 html-to-image로 전환
- 초기에는 html2canvas를 이용해서, 미리 보기 div를 이미지로 저장하고자 했습니다. 해당 라이브러리 사용 시, url로 배경 이미지를 지정하면 이미지를 저장했을 때, 배경이 저장되지 않는 이슈가 생겼습니다. 이를 해결하기 위해, html2canvas 대신에, html-to-image로 전환했습니다.

구현 결과

아래 링크를 클릭하면 직접 확인하실 수 있습니다.

※ 전체 소스 코드는 여기서 확인할 수 있습니다.

감사합니다.