공대생(미알못)의 앱 디자인 - Figma 간단히 사용해본 후기

이번에 졸업작품 하다가 알게 된 피그마

앱 / 웹 디자인을 할 수 있다. (사이트에 직접 들어가도 ok지만, 윈도우에 설치하면 짱 편합니다 설치 추천)

 

 

이번에 앱으로 졸업작품을 진행하게 되었다. 

디자인 전공은 아니지만, 그래도 이왕 만들꺼 좀 예쁘게 만드는거 어떤가 싶어서 이것저것 디자인 툴을 찾아보았다.

(물론 내가 노력해도 디자인 전공하신 분들이 만드신 시안들의 발끝에도 못 미치지만,,, )

그래도 디자이너들과 협업할 때 혹은 스스로 구현하고자 하는 아이디어를 시각화시켜 팀원들에게 보여줄 때 유용하다. 소프트웨어라는건 결국 완성되기전까지는 형체가 없으니까 같이 회의한 팀원이어도 서로 다른 걸 상상할 때가 많기 때문이다. 

 

그래서 디자인 툴을 기록할겸 나처럼 그냥 간단한 디자인만 할건데 피그마 사용법 영상까지 보기는 너무 귀찮은 사람들을 위한 포스팅이다... (나는 실력자 절대 아니고 그냥 디자인을 참고할만한 무언가를 ....야매로 만들 수 있다 정도...ㅎㅎ)

 

1. 카카오 오븐 

ovenapp.io/

OvenApp.io

- 단순하다. 굉장히 직관적인 버튼이나 view를 제공해줘서 상대적으로 사용이 간편.

그렇기 때문에 엄청난 퀄의 무언가를 만들긴 좀 힘들다. 그치만 딱히 뭐 알아야 할것도 없고,,,

사용이 간편한게 최고의 강점. 정말 스케치용으로 쓸거라면 카카오 오븐도 나쁘지 않다. 

 

2. zeplin

zeplin.io/

Zeplin

- 아마 좀 이 친구가 가장 유명하지 않을까 싶다. 근데 좀 어려워보이고 막 포토샵 연동하는 내용나오고,,,, 나는 그 흔한 일러스트레이터나 포토샵 이런 미술쪽 툴을 다뤄본적이 없다. 게다가 뭔가 초반에는 계획세우고 하는게 마음이 급급해서 이 친구를 선택하지 않았다..

 

3. Figma

 

www.figma.com/

Figma: the collaborative interface design tool.

- 얘가 제플린보다 사용법이 간단하지 않나 싶어서 이친구로 디자인 툴을 결정했다. (제플린과의 난이도 차이는 모르겠지만 유튭 안보고 그냥 뚝딱뚝딱 만들기가 가능했다) 하도 코로나로 인해 온라인 강의만 들었더니 이제는 유튜브로 강의 찾아듣고 하는것도 지겹다. 그래서 일단 코딩해보는 것처럼 시안도 일단 만들어보기로 했다. 

 

- 졸작에 쓰인 시안은 그대로 포스팅하긴 좀 그러니 그냥 평범하게? 독서 기록용 앱에 쓸 수 있는 프로젝트를 학교 gmail계정으로 만들어보았다. 물론 고퀄은 아니지만...ㅎㅎ(아래 나오는 글)

 

- 피그마는 한 무료계정당 한 프로젝트만 만들 수 있는데, 이 프로젝트 안에서 페이지 생성하는데에는 제한이 없으니 그냥 학생들이 무난히 쓰기 적합하다. 유료로 쓰면 공유 인원이나 플젝 개수에 제한이 없을텐데 나는 디자이너는 아니니까...^^...........

 

 

 

 

처음 시작 화면. 

저기 #모양 버튼을 클릭하면 frame을 추가할 수 있다. 

#을 누르면 frame/slice를 추가할 수 있는데 오른쪽 처럼 선택이 가능하다. iphone 11 pro를 눌러보았다.

 

 

이렇게 view가 나타난다. 오른쪽 창을 보면 x, y값은 지금 만든 iphone 프레임의 위치를 나타내고, w랑 h는 크기!

위치 원점으로 맞춰줘도 되고 이건 뭐 자율,,, (근데 이 페이지에 여러개의 프레임을 그릴거라면 원점으로 맞춰주는게 편할수도 있다) 그리고 오른쪽 더 아랫부분의 Fill을 누르면 위 사진처럼 색을 바꿀 수 있다. 나는 핑크색을 제일 좋아하니까 (tmi)핑크로 바꿔주었다.  

 

 

직접 색깔 코드로 입력도 가능하다. 100%는 투명도 조절용! 100%가 불투명 상태이고 숫자가 적어질수록 투명해진다. 

이걸로 투명한 버튼이나 이런거 만들 때 사용하면 된다. 

 

 

 

Rectangle 을 그린다. 어플리케이션 상단바를 표현하고 싶으니 색은 흰색으로 맞춰주었다. 

사각형의 사이즈는 오른쪽에서 직접 지정해도 되지만 그냥 드래그해서 그릴 수도 있다. 

나는 초보자라 드래그로 그린다...

 

 

그리고 맨 위의 place image를 눌러서 내가 아이패드로 그려둔 아이콘을 넣었다. 

그리고 맨 아래에 메뉴 바 역할을 위한 흰 사각형을 하나더 그려주었다. 왼쪽 창에서 복사붙여넣기해도 된다. 

 

 

그럼 현재 이런상황이다. 그런데 그냥 Rectangle1,2 이렇게 되어있으니 각각의 역할이 잘 구분이 안가니까, 이름을 간단하게 바꿔줘보자. 

 

간단하게 rename누르면 바꿀수 있다. 

 

바뀐 이름은 아래사진과 같다. 

 

 

이제 헤더부분에 글씨를 넣어보자 

 

T를 누르면 글상자를 만들 수 있다. 

 

파워포인트 글상자처럼 네모를 그릴 수 있고, 그 안에 글을 쓸 수 있다. 

 

 

아까 도형 컬러 바꿨던 것처럼 글씨 크기, 위치, 색, 글꼴, 글자 간격 등을 조절할 수 있다. 

(꽤 직관적이라 금방 찾을 수 있다...) 색은 청록색으로 바꾸고 글씨 크기와 글꼴을 약간 바꿔주었다. 

이렇게 헤더를 만들었으니 헤더뷰에 이 친구들(사각형, 글꼴)을 다 넣어주려 한다. 

아까 프레임 만드는 방법과 똑같이 하되, 왼쪽에서 기종 선택하지 말고 저 헤더 직사각형 크기만큼만 드래그해서 프레임을 만들어주면 된다. 

 

 

저기 프레임안에 picture이 들어갔는데 저친구는 빼주면 다시 나온다..

(picture가 frame크기 벗어난 공간에 있기 때문에 안 보이는것) 그리고 frame의 이름을 headerview로 바꿔주었다.

 

현재 상황

 

이제 헤더는 건드릴게 없으므로 왼쪽 자물쇠 클릭해서 잠궈주었다. 

 

 

 마우스로 괜히 잘 배치해둔 것들을 잘못 건드리는 불상사를 막을 수 있다. 

 

 

 

로고 밑에 책 내용 쓸 수 있는 칸을 만들어주었다(BookContents) 

투명도를 45%로 조절하면 사진과 같은 느낌이 난다. 

 

 

그리고 약간 모서리를 둥글게 처리하고 싶어서 저 사각형 오른쪽 속성창에서 위 사진처럼 20이라고 지정해줬다. 

 

 

모서리가 둥글게 처리된것을 확인할 수 있다. 

그리고 이 picture과 bookcontents를 또 다시 새로운 프레임을 만들어서 넣었다. 

(약간 안드로이드 스튜디오 xml에서 계속 뷰 만들고 닫고 하는것처럼)

 

 

이렇게 하고 이친구도 잠궈줬다. 마지막 남은 MenuBar에는 간단한 아이콘을 넣어보려 한다. 

(근데 생각해보니까 내가 그려놨던 아이콘이 다 흰색이라... 다시 메뉴 색상을 변경해주었다ㅎㅎ,,,)

 

 

 

이제 각각의 아이콘을 넣을건데, 저 아이폰 프레임 가로가 375이고 아이콘 3개 넣을거라 각 frame을 125사이즈로 맞추고, 그 frame안에 image를 넣으면 된다. 

 

이런 느낌으로!

frame만들고 place image누르고! 순서는 상관없다. frame하위에 image가 들어가게끔 왼쪽에서 조절해주면 된다. 

 

아이콘을 다 놨으면 마지막으로 언더 바 크기만큼의 frame을 만들어주고, 언더바 사각형, 저 아이콘이 소속된 프레임 3개를 다 넣어주면 된다. 

 

 

 

이 때 저 사각형(MenuBar)가 아래에 있어야 이미지들이 보인다. 위에 있을수록 나중에 그려지는거라서 그렇다

(저 사각형이 맨 위에 그려지면 다 가려져서 안 보임)

 

 

이제 다 만들었다면 Android 용 xml을 추출해보자!

 

 

오른쪽의 inpsect로 가서 css대신 android를 선택하면된다. 

 

 

그럼 이런식으로 각 frame에 관련한 xml파일을 추출해낼 수 있다! ㅎㅎ

figma에서 디자인 한 내용을 기반으로 안드로이드 스튜디오의 레이아웃을 제작할 때 편리한 기능이다. 

별 기능을 사용한건 아니지만 그럼에도 그럭저럭 봐줄만한? 디자인을 만들어볼 수 있다. (css, ios로도 추출가능)

(물론 디자이너분이 팀에 있으면 매우x100 좋다)

 

 

개발자로써 이런 툴도 알아두면 협업에도 도움이 되고, 또 내가 생각하는 아이디어들을 시각적으로 보여줄 수 있어서 참 좋은 툴인것 같다. 사용법도 간단하기도 하고 나중에 앱 개발할때 자주 사용할것 같다.

쨌든 오늘의 포스팅 끝 :-D