figma를 사용하여 설계한 졸업프로젝트 "매직박스" ui이다. ↓
안드로이드 어플리케이션을 제작할 때, 기획단계에서 내가 항상 하는것은 바로 UI를 설계하는 것이다.
"어플이 성능만 좋으면 됐지 굳이 사이트까지 써가면서 UI를 설계할 필요가 있나?" 라고 반문할 수 있지만, UI 설계는 단순히 디자인을 예쁘게 뽑기 위해서만 하는 것이 아니다. UI를 설계해봄으로써, 내가 만들 어플리케이션의 전체적인 flow, 인터페이스를 직관적으로 볼 수 있게 된다. 이과정에서 설계오류/비효율성을 발견하고 다시 기획할 수 있는 기회를 얻게된다!
그런의미에서 오늘은 내가 UI를 설계할 때 자주 사용하는 figma라는 사이트의 사용방법에 대해 작성하려고한다.
Figma: the collaborative interface design tool.
Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.
www.figma.com
1.회원가입
위에 적어놓은 사이트로 들어가자.
여기서 signup을 통해 회원가입을 한다.
2.마이페이지
회원가입을 하고 로그인을 하면 위처럼 마이페이지가 뜬다. 여기서 drafts를 누르면 새로운 ui설계를 시작할 수 있다.
3.frame 만들기
frame이란, 내가 디자인할 프로젝트(핸드폰 어플, 컴퓨터 어플, 웹페이지 등등 종류는 다양하다)의 화면틀이라고 생각하면 된다. 지금 우리가 만들어볼 안드로이드 어플리케이션에 대입해서 설명하자면 핸드폰 화면이라고 할 수 있다.
새로운 draft를 생성하면 이렇게 빈 설계화면이 뜬다.
여기서 '#' 버튼을 클릭하고 frame을 선택한다.
frame을 선택하면 오른쪽에 다양한 디자인을 선택할 수 있다. 우리는 안드로이드 어플리케이션 ui제작을 목표로 두고 있기 때문에, phone카테고리에서 맨 밑에 있는 android를 선택한다.
4.화면 ui 구성해보기
이제 본격적으로 어플 화면을 구상해보자.
일반적인 어플리케이션 구성을 생각해보면, 화면 맨위에 툴바가 있는 경우가 있다.(현재 figma 화면만 봐도 맨 위에 툴바가 있다) 이를 구성해보자.
1. figma툴바에서 네모버튼은 여러가지 도형을 디자인 할 수 있는 툴이 들어있다. 이를 이용하여 툴바부터 시작해서 복잡한 형태의 layout을 구성할 수도 있다.
여기서 rectangle를 선택하자.
도형을 만들고 나면 오른쪽에 도형편집툴이 나온다. 도형의 사이즈, 위치, 색상등 여러가지를 설정할 수 있다.
그중에서 아래 화면에서 파란박스로 쳐져있는 것은 도형의 모서리를 둥글리는 툴이다. 딱딱하지 않고 깔끔하고 캐치한 ui구성 시 자주 사용된다.
2. 툴바에서 T버튼을 통해 텍스트를 화면에 넣을 수 있다.
추가적으로, 화면을 구성해나가면서 여러 도형을 하나로 묶어서 디자인하고 싶을 수 있다. 이런 경우에는 묶고 싶은 도형들을 동시에 선택한 후 우클릭 > group selection을 통해 하나로 묶어줄 수 있다.
완성된 간단한 핸드폰 화면ui이다. ↓
이런식으로 나의 안드로이드 어플리케이션에 들어가는 화면들을 디자인 할 수 있으며, 화면과 화면사이의 관계를 화살표등으로 표현하여 플로우차트를 그리는 것도 가능하다.
밑의 화면은 내가 현재 졸업프로젝트에서 팀원들과 개발하고 있는 "매직박스"라는 어플리케이션의 ui 디자인이다.
5.다른사람과 협업하는법
내가 figma를 사용하는 이유는 직관적으로 디자인할 수 있다는 점도 있지만, 팀원들과 같이 협업하여 ui를 설계할 수 있다는 점도 있다. 다른 사람과 함께 figma에서 ui설계를 하고 싶다면, 맨위 툴바에서 오른쪽에 있는 share버튼을 통해 다른 사용자에게 초대링크를 보낼 수 있다.
6.figma에서 만든 layout 안드로이드 스튜디오에 적용하는 법
figma에서 ui를 구성해보았으면, 이를 토대로 안드로이드 스튜디오에서 디자인을 구성해야할 것이다. figma에서 만든 ui를 안드로이드 스튜디오에 적용하는 방법에는 총 2가지가 있다.
1. figma에서 코드 복사해가기
figma에서는 내가 만든 layout을 프로그램툴에서 그대로 구현하려면 어떻게 코드를 짜야하는지를 친절히 알려준다.
step1.
코드를 알고싶은 layout을 왼쪽에서 선택한 후, 오른쪽에 뜨는 툴창에서 inspect카테고리를 선택한다. 그러고 밑에 화면과 같이 뜨는데, 우리가 보고싶은것은 안드로이드 스튜디오에서 작성할 코드이므로, android를 선택한다. 그러면 밑에 코드가 android에 맞게 바뀌고, 이를 복사한다.
step2.
figma가 제공해준 코드는:
안드로이드 스튜디오의 내 어플리케이션 프로젝트파일들 중에서 1) res > layout, 2) res > drawings 두 곳에 알맞게 나누어서 붙여넣어야한다. 참고로 간단히 얘기하자면 실제 layout의 모양구성하는 코드는 drawings에 / 화면에서 원하는 위치에 layout을 놓는 코드는 layout쪽에 작성해야한다.
2. png파일로 다운받기
코드를 붙여넣기 애매하거나 잘 작동하지 않는 경우에는 오른쪽 툴창의 design카테고리 맨밑에서 export를 통해 png파일로 다운받을 수 있다. 이를 다운받아서 안드로이드 스튜디오 프로젝트 파일에서 res > drawings파일에 넣어주면 된다!