README.md

블로그 썸네일 생성기

블로그 썸네일을 만들어주는 생성기 프로젝트입니다.

목차

1. 개요
2. 제작 동기
3. 웹사이트 설명

1. 개요

• 프로젝트 명 : 블로그 썸네일 추출기
• 프로젝트 지속 기간 : 2023.12.2 ~ 2023.12.3
• 개발 언어 : javascript(react)
• 사용 라이브러리 : html2canvas, react, styled-components
• 개발자 : 김광현

2. 제작 동기

취업에 도움이 될 수 있게 벨로그를 써가고 있는데, 썸네일을 어떤 이미지로 지정할 지 고민이 많았습니다.

그래서 그냥 제곧내(제목이 곧 내용) 형식으로 제목을 그대로 ppt 제목처럼 이미지화 하는 생성기가 있었으면 좋겠다는 생각이 들어 개발하게 되었습니다.

항상 부트캠프를 수강하면서 주어진 형식이나 요구사항 대로 개발했었는데, 이번 기회에 직접 기획하여 자유로운 형식으로 개발해 보고 싶었습니다.

익숙하지 않던 styled-components를 연습 해보고 싶어 다뤄 볼 기회라 생각했고, 재밌는 npm의 패키지를 사용해 볼 기회라 생각하여 실력 향상을 도모한 토이 프로젝트를 제작하게 되었습니다.

3. 웹사이트 설명

배경색 초기화

배경색을 하얀 색으로 바꿔줍니다.

배경색 랜덤 지정

배경색을 랜덤으로 가져와 지정해줍니다.

입력창

텍스트를 입력하면 만들 썸네일에 그대로 반영됩니다.

썸네일 추출 버튼

만들 썸네일의 박스를 이미지로 추출하며, 모달창이 뜨며 이미지를 저장할 수 있습니다.

이미지는 png 형식으로 저장할 수 있습니다.

개발 기록

https://velog.io/@terran5736/%EB%B8%94%EB%A1%9C%EA%B7%B8-%EC%8D%B8%EB%84%A4%EC%9D%BC-%EC%83%9D%EC%84%B1%EA%B8%B01

벨로그에서 확인 할 수 있습니다.