붉은거위 노트 (redgoose note)

컴포넌트 제작 프로세스

Nest
Graphics
Category
Design
Hit
161
Star
2

어후.. 그림자 에디터 부분을 겨우 디자인 작업 끝냈다.

좁은 공간속에 많은 요소들을 담으려 하니 결국 피그마의 형태랑 비슷한 형태로 만들어졌다.
이렇게 디자인 하지않고 곧장 코딩을 시작해버리면 코딩을 하면서 UI에 대한 고민하게되면서 방향이 흔들리는 폭이 커져버린다.

그래서 결국에는 과정을 지키면서 작업을 하게된다.

IMG_0514.webp

screenshot-2022-09-17-13-56-23.png

그림자 편집 컴포넌트의 구조가 그다지 단순하지만은 않다보니 작은 공간에 많은 요소들을 구겨넣기 위하여 많은 고민이 필요하게 되었다.
그래서 일단 가장 쉽게 모양을 만들 수 있는 방식인 종이 그려보면서 이게 괜찮은 방법인지 고민해보고 이렇게 정해졌다 싶으면 디자인툴로 진짜로 만들어지는 수준으로 작업하고 마지막으로 기능을 만든다.

이렇게 번거로운 과정을 거치치 않았으면 분명히 돌이키기 힘든 일들을 많이 경험했을지도 모른다.
아무래도 그림자 에디터 부분은 구조가 변하면 되돌아가기 어려워 보이는 부분들이 존재해서 돌아가는 액션을 먼저 최대한 상상해보면서 괜찮은 방법을 찾아봐야했다.

UI 제작은 많은 사용 경험과 상상력이 요구된다.
그래서 쉬울수도 있지만 굉장히 어려울 수 있는 작업이며 이 과정이 재미있어서 다행인 셈이다.