2. 액션 정의하기, 앱 구조와 화면 레이아웃 잡기

편집기를 개발할 때 onDragEnd 이런 액션들을 미리 정리하고, 앱의 구조를 잡고가면 좋을 것 같다는 PM님의 의견에 따라서 해당 작업을 진행했다.

1. 액션 정의

사용자가 편집기를 사용할 때 어떤 행동들을 하는지 (ex: onClickBackground, onDragNode) 를 미리 표 형태로 정리하고 프로젝트의 문서들을 올리는 Confluence에 올리고 백엔드 개발자분과 함께 보면서 리뷰했다.

액션 정의 형태는 다음과 같다.

액션
onClickBackground	편집기 배경 클릭	노드(이미지, 텍스트) 선택 해제
onDragNode	노드 드래그	노드 이동

 

2. 앱 구조

편집한 이미지를 저장하고, 추후에 다시 편집할 수 있도록 해달라는 요구사항이 있었다.

그래서 딱 이미지 1개만 통으로 저장하는 대신에, 통으로도 저장하고, 각 배경화면, 텍스트, 이미지들의 속성(ex: width, height, x,y, color 등..)들을 상태로 관리하고, 얘네들을 백엔드에 저장하는 식으로 기본 구조를 잡았다.

 

3. 화면 레이아웃

기획, 디자인이 나온 게 없이 진행을 해야해서 화면의 기초적인 레이아웃을 잡고 시작해야 했다. 그림판이나 파워포인트, 여러 이미지 편집 툴 들의 디자인을 참고해서 레이아웃을 잡았다.

이미지 편집기 레이아웃

이렇게 잡았는데 개발을 하다보니까 좀 많이 못 생겨졌다.