1. 요구사항 정리와 라이브러리 선정하기

1. 개발 시작

회사에서 진행하는 프로젝트에서 챗봇 메시지에 들어가는 이미지를 편집, 저장, 관리할 수 있는 기능을 만들게 되었다. 총 기한은 3주(스프린트 1개) 이고 React와 Javascript를 기반으로 개발을 진행했다.

2. 요구사항 정리

받은 요구사항은 다음과 같다.

1) 배경화면

배경화면에 이미지를 삽입, 크롭, 각종 속성(명암, 대조도) 등을 조정할 수 있어야 한다.

2) 이미지

여러 이미지들을 삽입하고, 각 이미지의 크기, 투명도, 명암, 회전, 크롭 을 수정할 수 있어야 한다. 

3) 텍스트

여러 텍스트들을 삽입하고, 각 텍스트의 크기, 글꼴, 글씨 크기, 색깔 등의 속성을 수정할 수 있어야 한다.

4) 공통

각 이미지, 텍스트들 간의 Z축 위치를 조정

뒤로가기, 앞으로 가기 기능

이미지 저장, 서버 저장, 불러오기

3. 라이브러리 선정

위 기능들을 구현하기 위해서 처음엔 Canvas API 사용을 고려했다. 그러나 Canvas API의 경우, 이미지,텍스트의 크기 조절 상자, 드래그 이벤트, 회전 상자를 일일이 구현해줘야 해서 시간 내에 구현하기 힘들 것이라 생각했다.

Transformer 라는 object를 통해 크기 조절, 회전을 구현하기 쉽게 해주고, 드래그 이벤트 들이 기본적으로 구현이 되어 있는 Konva.js라는 라이브러리를 발견했다.

Konva.js는 또한 홈페이지에 다양한 예제들 (크롭, 속성 변경) 등을 제공하여 개발에 쓰기 적합하다고 생각하여 이를 사용하여 개발에 들어갔다.