[한 주에, 한 주제] 배너 생성기 제작 - 1일차

김민석·2021년 11월 1일
0

한 달에, 한 주제

목록 보기
2/19

회사에서의 프로젝트를 위해 학습할 것이 있어 1주가 미뤄졌다...하하

오늘과 내일은 설계를 하는 겸, 계획을 짜는 일을 해야겠다.


1일차

우선 배너 생성기는 기본적으로 다음의 형태와 기능을 가지면 좋겠다.

  • 화면 하단에서 화면을 구성하고, 사용자가 구성하고자 하면을 상단에서 큼지막하게 실시간으로 보여주어야 한다.
  • 이후 화면 구성이 끝나면 다운로드 버튼을 '똑'하고 눌러서 화면에 보여지는 그대로를 이미지로 다운받을 수 있어야 한다.

레이아웃은 매우 단순하지만 문제는 기능이다.

여기서 구현해야하는 기능은 두 가지다.

  1. 사용자가 선택하는 색과 글씨를 실시간으로 렌더링
  1. 렌더링된 이미지를 다운로드

내가 우선적으로 알아볼 것은 2번이다.
렌더링된 것을 다운로드를 할 방법을 찾으면 1번의 방법이 떠오를 것이라 생각했기 때문이다.

이에, 구글링 했을 때 노출되는 배너 생성기들을 우선 훑어본 후 좀 더 검색을 해야겠다.


동일🥲 ...한 것이 있어서 이곳을 읽어보았다.

내 프로젝트에 영향을 끼칠까 자세히 일어보진 않았지만 html canvas란 것을 사용한 것으로 보였다.

이에, canvas를 다운로드 할 수 있는 방법을 찾아보았다.

참고
1. 티스토리의 어느 짧은 글
2. MDN

얼추 구현방식이 그려졌다.

그리고 ```storybook```이 사용하고 싶어졌다...

0개의 댓글