현재 재학중인 대학교에서 우연치 않게 팀 프로젝트를 마주하게 되었습니다. 소프트웨어 공학이라는 전공인데 팀별로 투두리스트 앱을 만드는 것이 과제로 주어졌습니다. 저희 팀은 아이폰 개발을 하시던 분이 있었기 때문에 아이폰 앱을 만드는 반향으로 진행하였습니다.
#벡엔드Frame work: springboot 2.7.1
DB: MySql
Was: AWS (EC2, RDS) Design : Figma
▲ 유즈케이스 다이어그램
백엔드 2분 디자인 2분 프론트엔드 1분으로 역할 분담을 하였고 저는 Figma를 이용한 디자인이 처음이었지만 맡게 되었습니다.
▲ Figma
Figma는 아이폰 앱을 디자인을 할 수 있는 개발 도구로 코딩할 필요가 없는 것이 장점이며 개발 툴의 가시성이 좋기 때문에 입문자도 쉽게 이해하고 개발할 수 있습니다.
Figma 의 개발 툴
개발 툴을 보시면 여러가지 아이콘이 있는데요. 가장 먼저 해야할 일을 # 모양의 아이콘을 눌러 프레임을 생성하는 것입니다.
Frame 생성
Frame을 누르면 마우스 커서의 모양이 바뀌게 되고 흰색 사각형 모양의 프레임을 생성할 수 있습니다. 이 때 아이폰의 기본 사이즈인 가로 375 세로 812로 만들어 줍니다.
Design Tool
생성된 프레임을을 클릭하면 오른쪽에 프레임에 관한 디자인을 관리할 수 있는 탭이 생기실 겁니다. 여기서 W(가로) H(세로) 를 조절해 줍니다.
Design Tool 2
Design 탭을 보시면 Fill은 프레임을 색깔을 임의로 정하여 가득 채울 수 있습니다. Stroke는 테두리 색을 변경할 수 있으며, Effects를 통해 그림자 효과를 넣을 수도 있습니다.
Figma Plugins
먼저 디자인을 쉽고 조금 있어보이게(?) 하고 싶으신 분들은 플러그인을 이용하시면 됩니다. 위 탭의 Find more plugins를 누르시고 Unsplash 플러그인을 설치해 줍니다.
Unsplash을 이용한 디자인
프레임을 우클릭하여 Plugin 탭의 Unsplash를 누르시면 오른쪽 창과 같은 화면이 보이실 겁니다. Unsplash는 제공하는 이미지를 프레임에 스킨으로 사용하게 해주는 아주 착한 플러그인 입니다.
Unsplash 적용
저희 조의 컨셉은 파스텔 컬러 중 연보라 색을 이용한 앱이었기 때문에 보라색 배경으로 정해 보았습니다. 위 프레임은 첫 프레임인 로그인 창입니다.
텍스트
개발 툴에서 T모양의 아이콘을 누르시면 텍스트를 입력할 수 있는 상자를 만들 수 있습니다.
텍스트 디자인
텍스트 디자인은 프레임과 마찬가지로 텍스트를 클릭하면 오른쪽에 디자인 툴이 생성됩니다. 저는 기존 정해놓은 디자인에 가장 어울리는 Fira Sans Condensed를 선택하였습니다.
도형 도구
다음은 도형 도구를 이용하여 로그인 창을 디자인 해보겠습니다. 도형 도구를 이용하면 다양한 도구들을 프레임에 생성하고 디자인 할 수 있습니다.
로그인 화면 디자인
아이디와 비번을 입력하는 창은 사각형을 생성하여 가장자리를 둥글게 만들고 흰색으로 채워서 흔히 보던 입력창을 만들었습니다. LOG IN 버튼과 Sign up 버튼은 사각형 도형을 사이즈에 맞게 생성하여 버튼 모양을 만들고 투명도를 높여서 배경과 어우러 지게 디자인 했습니다.
디자인 샘플
Figma의 또 한가지 엄청난 장점은 디자인을 서로 공유하고 프레임내의 버튼이나 그림 하나 단위로 복사하여 사용할 수 있다는 것입니다. 다른 유저분들이 만들어 놓으신 디자인을 참고하고 사용하여 디자인을 개선할 수 있습니다. 디자인들은 피그마 커뮤니티에 게시되어 있습니다.
To Do List 메인화면
위의 디자인을 참고하여 다음과 같이 비슷한 디자인의 작업물을 만들어 보았습니다. 기존 버튼은 사이즈를 조절하여 그대로 사용하고 플러그인 중에 아이콘을 만들어 사용할 수 있는 iconify 플러그인을 설치하여 폴더, 쓰레기통, + 버튼과 같은 아이콘을 추가하였습니다.
To Do List 앱 최종 디자인
앱을 사용할 때 나올 수 있는 경고메세지 화면도 프레임의 명암과 투명도를 조절하면 쉽게 만들 수 있습니다. 메세지 박스와 버튼 등은 도형 도구를 이용하여 생성하면 됩니다.
프로토타입
프로토타입이란 도구가 있는데 이것은 프레임 내의 어떤 버튼을 누르거나 그림을 클릭하면 다른 프레임으로 넘어가게 해주는 도구입니다. 프로토타입을 생성하면 각 요소들을 이을 수 있는 라인이 생기는데 이것을 순서대로 이어주기만 하시면 됩니다. 하지만 저는 이번 개발에서는 사용하지 않았습니다.
디자인에 기능 개발까지 추가한 완성 앱
.
여기까지 투두앱을 개발하면서 Figma의 기본툴은 다룰 수 있게 되었습니다. 입문자도 쉽게 사용할 수 있고, 디자인을 하면 화면에 바로 나타나기 때문에 만족감도 매우 높았습니다. 처음 접하시는 분들은 제 포스팅을 참고하셔서 도움을 받으시면 좋을 것 같습니다.
