피그마(Figma)로 안드로이드 앱 디자인 하기 (Kotlin Guide)

지금까지 3개의 앱을 구글 플레이에 출시했다.

2020/09/30 - [코드리뷰/코틀린 리뷰] - 로또 931회 당첨번호 예상! (안드로이드 로또 앱)

로또 931회 당첨번호 예상! (안드로이드 로또 앱)

2020/10/20 - [코드리뷰/코틀린 리뷰] - 안드로이드 마사지 앱 게시하다 (Awesome Vibrator)

안드로이드 마사지 앱 게시하다 (Awesome Vibrator)

2020/12/13 - [코드리뷰/코틀린 리뷰] - 안드로이드 QR/바코드 스캐너 앱 게시하다.(Scan All)

안드로이드 QR/바코드 스캐너 앱 게시하다.(Scan All)

안드로이드 스튜디오에서 대략적인 화면을 디자인하고 코드에 중점을 두었는데, 그러다 보니 코딩 완료 후 디자인을 다시 입히는 과정이 매끄럽지 않았다. 디자인을 일부 수정하기라고 하면 코드까지 얽혀 버리기도 했다.

이번에 디자인을 피그마를 이용해 먼저해보았다. 놀라운 확장성과 호환성에 불구하고 심플한 메뉴와 구조로 기능을 쉽게 익힐 수 있다. 정말 매력적인 툴이다. 디자인 툴이기도 하지만 시나리오 형태로 화면을 기획할 수 있어 콘셉트를 구현할 수 있다. 

코틀린 개발 가인드 앱 디자인

코틀린 가이드 초기화면이다. 상단 네비게이션 툴바와 메인화면은 리사이클러뷰 형태로 구성했다. 

Figma로 구현한 디자인 콘셉트

 

네비게이션 툴바

네비게이션 툴바 이미지와 타이틀로 구성했다. 툴바 이미지를 클릭하면 네비게이션 드로우 화면이 나타나야 한다. 

 

메인 화면 구성

그리드에 이미지와 텍스트가 들어간다. 반복되는 화면은 피그마에서 콤포넌트로 등록하면 일괄 수정이 가능하다. 즉, 컴포넌트 Grid1을 카피해서 8개를 구성했는데, Grid1에 디자인 색상이나 크기를 변경하면 8개 전부 일괄 변경된다. 

 

미리 보기 

피그마 오른쪽 상단에 "Present" 아이콘을 눌러 준다. 화면이 많을 경우 순서 및 이벤트 처리도 가능하다. 

 

피그마 Present화면

안드로이드 스튜디오 디자인 xml 추출도 가능하다. 

피그마 Inspect 클릭 후 

안드로이드 선택하면 XML 코드가 나타난다.