[TIL] 2023/10/05

Today I Learned

벨로그 포스팅을 할 때 썸네일을 만들어주는 웹 사이트 제작 해보기

• 순수 VanillaJS 로만 작성한다.
• 최대한 심플해야한다.

https://velog-thumbnail-maker.vercel.app/

기획 및 목표

• 벨로그 썸네일 생성기를 만들자
• width : 768px & height : 402px 로 고정이다.
• canvas를 굳이 활용할 필요는 없다. div로 만든 다음에 image로 만들 때 canvas에서 drawImage를 쓰면 될듯하다.
• 어차피 크기가 정해져 있기에 오히려 편할 것 같다.
• 세부 기능 요약
  - div 안에 제목, 부제목, contents 형식으로 세가지 레이어를 고정적으로 쌓아놓는다.
  - 이 때 제목이 일정량을 넘어가면 내 기준에서 별로라고 생각되므로(미적으로) 한줄이나 두줄 정도 혹은 글자수에 제한을 걸자(나머지도 마찬가지 애초에 썸네일에 글을 많이 쓰는게 말이 안됨)
  - 컬러는(배경) 컬러 picker 같은 라이브러리를 써서 선택할 수 있도록 한다. 이 때 결정하기 귀찮을 수 있으니까 랜덤 선택도 되게한다.
  - 배경은 단색
  - 그라디언트
  ⇒ linear-gradient 속성을 활용한다.
  - 직접 이미지 업로드
  ⇒ 768px & 402px로 리사이즈드 센터 크롭한다.
  이렇게 3개의 방법으로 가능하게 한다.
• 구성
  - 제목, 부제목, 컨텐츠
  - 제목, 부제목
  - 제목