bam-j / thumbnail-maker

블로그 썸네일(배너) 메이커

Thumbnail Maker 🎨

Thumbnail Maker (썸네일 메이커)
ver 1.1.0

---

프로젝트 정보 💬

• Thumbnail Maker는 블로그 등에서 사용할 수 있는 썸네일을 생성할 수 있는 웹페이지입니다. ✅
• 간결한 UI를 통해 누구나 쉽게 썸네일을 생성할 수 있습니다. ✅
• 주 타겟층: 심플한 섬네일을 필요로하지만, 디자인 툴을 사용하기 어려워하는 사람들. ✅

'썸네일'은 콘텐츠를 축약해서 보여주는 대표 이미지입니다. 그렇기에 썸네일을 달아두면 지나가던 사람들의 주목을 끌 수 있는 좋은 수단이 됩니다.

그러나 포토샵 등을 배우지 않은 이상 깔끔한 썸네일을 만들기란 쉽지 않습니다. 그렇기에 누구라도 쉽게 썸네일을 만들어서 사용할 수 있도록 프로젝트를 기획하고 제작하게 되었습니다.

---

사용법 ✅

• 웹 페이지에서 바로 사용하는 경우는 링크 에서 확인하실 수 있습니다.
  
  
• 또는 git clone 사용
  1. git clone 'https://github.com/Bam-j/Thumbnail-Maker.git'
  2. yarn install 또는 npm install로 패키지 다운로드
  3. yarn start 또는 npm start

---

사용 기술 🔨🔧

주력 기술

HTML5, CSS3, JavaScript, React.js

기타 라이브러리

• SCSS: CSS의 재사용성이나 개발 효율을 위해서 사용했습니다.
• html2canvas: 완성된 썸네일의 다운로드를 위해 사용했습니다.
• React Colorful: 폰트 및 배경색의 선택을 위해 사용했습니다.
• React Icons: 폰트 및 배경색 선택 버튼의 아이콘에 사용했습니다.
• styled-components: CSS 파일의 관리를 편하게 하기 위한 CSS-in-JS 방식을 위해 선택했습니다.

---

기타 ✍

• 프로젝트에 대한 더 자세한 설명은 블로그 글을 참조해주세요.
• GitHub Wiki

---

예정 개선 사항

• UI를 좀 더 심플하고 깔끔한 디자인으로 변경 (mui나 ant design의 라이브러리 사용도 고려) (적용 완료!)
• 점진적인 UI 개선
• 배경에 이미지를 첨부할 수 있게 조정
• 다크 모드와 라이트 모드 구현
• JSX -> TSX 변환
• 배경색, 글자색 선택 상태가 Picker 값에 설정되지 않음.
• 배경색, 글자색 버튼 UI 개선. (버튼 크기, 디자인 일관성)

thumbnail-maker's Issues

요소들의 크기 문제

1. 로컬에서 실행했을 때와 GitHub Pages에서 호스팅을 해서 열었을 때 나타나는 요소들의 크기가 다름.
2. transform: scale(x, y)를 이용했더니 크기만 커질 뿐 클릭 또는 터치가 제대로 먹히지 않음.
3. 추가적으로 폰트와 폰트 크기를 설정하는 드롭다운 리스트의 크기도 늘릴 필요가 있음.