미니픽

💡 만들게 된 배경

블로그를 작성할 때, 섬네일 이미지를 선택해야 하는 경우, 어떻게 만들지에 대한 고민이 생기기 마련인데, 이 문제를 해결하기 위해 직접 섬네일 생성하는 웹 서비스를 구현했다.

간단하게 선택해서 이미지를 생성한다는 의미를 담아 미니픽(Mini Pick) 으로 프로젝트 이름을 정했다.

⚒️ 기술 스택

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

📋 주요 기능

1. 배경 설정 - 단색, 그라데이션 배경, 이미지 url 배경을 설정할 수 있습니다.

2. 텍스트 설정 - 텍스트에 그림자를 주거나, 흰색 또는 검정색으로 설정할 수 있습니다.

3. 반응형 디자인 - 반응형으로 설계되어, 저장하는 이미지의 넓이를 창의 크기에 따라 조절할 수 있습니다.

4. 빠른 저장 - 저장하기 버튼 클릭했을 때, 바로 저장됩니다.

⌨ 구현 과정

프로젝트 생성

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

npx create-next-app@latest

프로젝트 구현

1. 전체 레이아웃 구성

   • 제목이 표시될 부분과 이미지 생성기가 표시될 부분을 구현했습니다.

2. 제목 컴포넌트 구현

   • 제목을 나타낼 Title 컴포넌트를 구현했습니다.

3. 이미지 생성기 컴포넌트 구현

   • 섬네일에 들어갈 문구를 입력 받는 부분을 구현했습니다.
   • 배경 스타일을 단색, 그라데이션, 이미지 배경 중 선택할 수 있게 구현했습니다.
   • 이미지 배경의 경우, 모달을 통해서 url을 입력 받게 구현했습니다.
   • 텍스트 스타일을 그림자를 추가하거나, 흰색 또는 검은색 글씨색을 설정할 수 있게 구현했습니다.

4. 미리보기 컴포넌트 구현

   • 이미지로 변환하기 전, 미리 보기할 부분을 구현했습니다.
   • 넓이가 고정되어 있지 않아, 다양한 크기로 저장 가능합니다.

5. 저장하기 컴포넌트 구현

   • 이미지를 저장할 저장하기 버튼을 구현했습니다.
   • file-saver를 이용해서, 버튼을 눌렀을 때, 바로 저장하는 로직을 추가했습니다.

개선 사항 및 이슈 해결

1. 이미지 생성기 컴포넌트 분할

   • 처음에는 하나의 컴포넌트 안에서, 섬네일에 들어갈 값을 설정하는 것과 미리 보기를 함께 구현했습니다. 이를 두 개의 컴포넌트로 분리했습니다.

2. html2canvas 에서 html-to-image로 전환

   • html2canvas를 이용해서, 미리 보기 div를 이미지로 저장하도록 구현했습니다. 해당 라이브러리를 사용했을 때, 배경 이미지를 url로 지정하면, 배경이 저장되지 않는 이슈가 발생했습니다. 이를 해결하기 위해, html2canvas 대신 html-to-image를 적용해서 이슈를 해결했습니다.

💻 구현 결과

미니픽(바로가기)