4 Posts found
![[Thumbs Up] v1.0 - 썸네일 제작 도구](https://nullisdefined.s3.ap-northeast-2.amazonaws.com/images/96853286d6745f087ef00bf2d48b8a3d.png)
블로그에 사용할 1:1 비율의 썸네일 제작 도구가 필요해 개발하게 된 프로젝트 1:1, 4:3, 16:9 비율의 레이아웃을 제공한다. 그라디언트, 단색, 이미지 배경 지원 셔플 버튼을 통해 랜덤 그라디언트 생성 이미지 배경 선택 시 크롭 기능과 블러 효과 강도 조절 무료 상업용 한글 폰트 지원 Gmarket Sans, 나눔스퀘어 네오,...
![[Thumbs Up] 이미지 다운로드 및 클립보드 복사 기능 구현하기](https://nullisdefined.s3.ap-northeast-2.amazonaws.com/images/e4d9c6192e594bafdd13406bff5c0257.png)
썸네일 제너레이터 도구를 완성하면서 결과물을 즉시 활용할 수 있는 기능이 있으면 좋겠다고 생각했다. 그래서 이미지 다운로드와 클립보드 복사 기능을 추가해 사용자가 손쉽게 썸네일을 저장하거나 붙여넣을 수 있도록 구현했다. canvas에서 생성된 이미지를 PNG 파일로 저장할 수 있도록 구현했다. canvas.toDataURL 다운로드 링크 생성 이미지를...
![[Thumbs Up] 배경 커스터마이징 기능 구현하기](https://nullisdefined.s3.ap-northeast-2.amazonaws.com/images/c80c482a1207d43b83b93c6cb8a2558b.png)
배경에서는 그라디언트, 단색, 이미지로 커스터마이징할 수 있게 구현했다. 특히 색상 선택의 어려움을 해결하기 위해 셔플 버튼으로 미리 준비된 색상 조합을 제공하는 기능을 추가했다. 그라디언트 배경: 두 가지 색상 조합으로 그라디언트를 설정한다. 단색 배경: 단순한 색상으로 배경을 채운다. 이미지 배경: 사용자가 이미지를 업로드하고 크롭하거나 블러...
![[Thumbs Up] 텍스트 커스터마이징 기능 구현하기](https://nullisdefined.s3.ap-northeast-2.amazonaws.com/images/a32305c4997a041b5d69663a3a99fe2c.png)
텍스트 커스터마이징 기능을 구현한 과정이다. 텍스트 스타일 텍스트 레이아웃 폰트 선택 사용자가 입력한 텍스트를 상태로 관리하며 스타일을 바로바로 조정할 수 있도록 했다. 텍스트 상태를 text로 관리하고, 굵기와 기울임 여부를 isBold, isItalic 상태로 관리했다. Input 컴포넌트로 텍스트와 색상을 입력받고, Toggle 컴포넌트로 스타일...