[With Me] 간단한 타이머 만들기 S01.ep.01. - Figma 디자인

아무리 무계획에 가까운 토이프로젝트라고는 하지만, 그래도 작업을 하다보면 머릿 속으로 구상만 한 것과 실제 디자인 시안이 있는 것 간에는 큰 차이가 존재하는 것 같다. 아무래도 물리적으로 보이거나 구상한 상세한 것들이 없는 경우에는 보정이 많이 들어가기 마련이고, 그러다보니 완성도가 떨어지는 경향이 있었다. 물론 세밀한 디자인을 요구하는 것도 아닌 만큼 피그마를 써보는 연습도 할 겸 한번 직접 디자인 시안을 만들어 보았다.

 

https://www.figma.com/community/file/1180078437631253537

타이머 구현 프로젝트 | Figma Community

 

원래는 구글 타임 타이머 라고 하는 것을 만들어 보고자 하였지만, 아무래도 디자인이 결국 svg를 건들 수 밖에 없는 상황이였고, 아직 svg에 익숙하지 않은 필자에게 이는 프로젝트 진행에 있어 부담으로 다가왔다. 물론 svg도 공부하면서 이번 프로젝트를 진행하는 것이 좋을 수 있다는 것을 알고 있지만, 이번 연재 시리즈가 처음인데 너무 늘어지면 그것도 그 나름대로 문제가 있을 수 있다고 판단해서 취소하였다.

 

그렇게 고민 끝에 가장 심플하면서도 필자가 생각한 것들을 담을 만한 디자인을 생각했고, 그 결과물이 위 디자인이다.

 

아무래도 처음 제작한 피그마 디자인이다보니 단순함에도 불구하고 디자인에 일관성 또는 디자인에 있어 고려되어야할 UI적 사항들이 반영되어 있지는 않다. 그럼에도 불구하고 혹여나 필자의 이 시리즈를 본인의 토이프로젝트로 삼아 진행하실 예정인 분들에게 조금이나마 도움이 되셨으면 하는 마음에 공유를 드린다.

 

다음 포스팅에서는 위 디자인을 기획하면서 고려했던 기능적인 사항들을 요구 명세 느낌으로 작성하고자 한다.

 

감사합니다.