썸네일러 베타버전 개발 회고록
gparkkii
2022년 05월 22일 20:50
이전 회사의 웹 서비스에 PDF 생성 및 인쇄 기능을 구현해야하는 업무가 있었는데 그 때 Canvas API에 대해 처음 알게됐다. 화면에 그리는거라고는 CSS 밖에 몰랐는데 동적인 그래픽 조작이 가능한 API를 라이브러리 없이 HTML에서 지원하다니… 호기심이 마구마구 생겨서 다음에 프로젝트를 하게된다면 Canvas API를 이용한 프로젝트를 하나 해야겠다 마음먹었다.
그리하야 시작한 썸네일 메이커 만들기.
Canvas API를 사용해서 만들 수 있는 기초적인 서비스가 뭐가 있을까 생각했을 때, 사용자가 캔버스 엘리먼트를 그림판처럼 사용하고 이미지를 다운로드하는 기능이 바로 떠올랐다.
백엔드가 필요없는 서비스이고 한 페이지로 제작 가능하니 개인 프로젝트로 딱 좋았다.
목표 설정
- 프론트엔드 기술만을 사용하여 구현한다. 백엔드 기술은 사용하지 않는다.
- 사용자의 편의성을 높이기 위한 UX/UI 디자인을 고려한다.
- 사용자가 쉽게 이미지 파일을 업로드하고, 썸네일을 생성할 수 있도록 한다.
- 이미지 파일의 크기와 비율을 조정하여 다양한 필터링 옵션을 제공하여 사용자가 원하는 썸네일을 생성할 수 있도록 한다.
- 썸네일에 텍스트나 로고를 추가하는 기능을 제공하여 사용자가 자신만의 콘텐츠를 만들 수 있도록 한다.
- 모바일 및 데스크톱에서 모두 사용 가능한 반응형 웹으로 구현한다.
목표 설정 후, UI 디자인 틀만 잡고 개발에 돌입했다.
개발 목표
- 이미지 사이즈
- 이미지 크기 조절 기능
- 이미지 패딩 조절 기능
- 데스크탑, 태블릿, 모바일 사이즈 제공
- 줌 인, 아웃 기능
- 배경 커스터마이징
- 단색, 그라데이션 색상 기능
- 원하는 배경 이미지 업로드 기능
- 텍스트 커스터마이징
- 문구 입력 폼 제공
- 폰트, 폰트 굵기, 크기, 색상, 정렬 필터
그렇게 개발 목표를 설정하고 차근차근 구현했다. 우선적으로 UI 컴포넌트를 만들고, 이후에 사용자에게 입력받을 Form을 구현했다. Form을 구현할 때 꼭 체크하는 것. 렌더링 최적화. 여러 Input들을 입력받게 될 때 불필요한 렌더링이 일어나지 않도록 memoization을 사용하곤 한다.
Canvas API를 이용할 경우에도 렌더링에 대한 고려가 필요하다.
고려해야 할것들
Canvas API는 API를 통해 동적으로 이미지를 생성하기 때문에 이미지 컨테이너로 간주된다. React는 Virtual DOM 업데이트 매커니즘으로 UI를 관리하기 때문에 Canvas 엘리먼트를 직접 조작하게 되면 React 업데이트 추적 매커니즘을 우회하게 되고, 해당 엘리먼트 내부의 변경사항을 추적하지 못하는 문제가 발생한다. 결과적으로 React는 해당 엘리먼트의 변경된 부분을 실제 DOM에 렌더링 하는 것으로 인식하여 관련 컴포넌트를 전체적으로 재렌더링 하기 때문에 성능적인 측면에서 좋지 않다.
개발을 시작하기 전 이러이러한 이유로 프리뷰를 어떤식으로 구현할까 고민이 됐다.
생각해본 대안은 React 컴포넌트를 사용하여 사용자 입력을 처리하고 프리뷰를 제공한 후, 다운로드 클릭 시 Canvas API를 사용하여 이미지를 생성하고 다운로드하는 방식이다.
베타버전에서는 Canvas API를 실시간으로 업데이트하는 기능을 사용하면서 어떤 동작이 원활하게 작동하고 어떤 문제가 발생하는지 확인하고자 우선 Canvas API에 실시간 업데이트하는 방식으로 배포를 했다.
베타 버전을 만들고 주변인들에게 보내줬는데 예상외로 어떻게 써야하는지 모르겠다는 답변이 꽤 있었다. 나름 전형적인 디자인 툴(우측에 컨트롤러가 있고 왼쪽에 캔버스가 있는)을 참고해서 만들었는데 어떻게 써야할 지 모르겠다니 ㅠ
그런 피드백을 받고보니 UX가 복잡한가 싶기도 하여 어떻게 개선해야할지 고민이 된다.
앞으로
- 실시간 업데이트 방식 개선
- 이미지 업로드 기능 제공
- 소개 및 FAQ 페이지 개발
- 배경 랜덤 생성 및 배경 패턴 지원
여담
회고록을 써놓고 업데이트를 하려고 보니 베타 버전을 배포한지 벌써 한달이 지났다. UI/UX를 어떻게 바꿀까 고민하다보니 썸네일러에 대한 우선순위가 미뤄졌던것 같다. 아무래도 그쪽의 전문가는 아니다 보니… 6월 한달간은 개인적인 일들로 바쁘기도 바빴다. 너무 바빴어서 벌써 한 달이 지난게 충격… 블로그 기능들도 얼른 업데이트 해야하는데 큰일이다아. 이제는 팀, 개인 프로젝트들에 다시 몰입해봐야겠다.