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

정현우12 2022. 6. 15. 22:12

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

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

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

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

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

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

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