하루y

1.1), 1.2) 내용을 숙지하고,

 1) UI 디자인은 Adobe XD로 작성하고

 2) supernova로 import후 앱디자인을 수정후 export 해서

 3) Android Studio에서 빌드 및 디버깅 함.

- UI가 간단하면 supernova가 없어도 될 것 같은데, 디자인품질면서 XD작업 후, sueprnova가 없으면 일이 귀찮을 듯함.

1. UI 디자인을 위해서 알아야할 지식

   (한글: flutter-ko.dev/ 사이트, 영문: flutter.dev/ , 현재 영문만 flutter2 문서가 업데이트 되었음)

 1)  flutter-ko.dev/docs 에서 UI 디자인 부분 참조하기. 초보자를 위한 Flutter 관련 서적에 있는 수준임.

 2) 특히, flutter-ko.dev/docs/development/ui/layout 에서 위젯을 이용해서, 레이아웃을 어떻게 구성하는지 알아야 함.

 3) 다양한 디자인은 아래 사이트 참조할 것.

   . flutter.dev/docs/development/ui/widgets : 관련 widget 목록. 가능한 자원을 알아야 레이아웃 구성에 도움이 됨.

 4) 디자인 가이드

 - 구글 가이드 : material.io/design

 - 애플 가이드: developer.apple.com/design/human-interface-guidelines/

                       developer.apple.com/kr/design/tips/#graphics

2. UI 디자인 관련 도구

UI 디자인 관련 유명한 툴은 아래와 같음.

 - Adobe XD : UI 디자인과 와이어프레임 구성이 가능하고, 개인은 무료로 사용이 가능함. 협업까지 하려면, 유료임.

    다양한 라이브러리 자산을 통해서 에셋(디자인부품같은)을 통해서, CSS 처럼 자원을 관리가 가능함.

    디자인 편의성이 많음.

   . 많은 라이블러기 유료로 구매 가능함.

 - Figma: 웹도구로 UI 디자인과 와이어프레임 구성 및 협업이 가능함.  개인 무료, 협의까지 하려면 유료.

 - sketch: UI디자인과 와이어프레임 작성 및 협의 가능. 30일 무료. 이후 유료.

 - supernova : UI디자인 및 export를 통해서 Flutter, iOS, Android,React Native 소스코드를 생성할 수 있음.(export 후 디버깅 필요함)

3. 앱개발 UI 참조사이트

 - screenlane.com/ : 앱 디자인 마켓. 여러 디자인을 참조 할 수 있음.

#관련링크

 - Flutter Visual Design tools for Non Developers

 - Flutter 관련링크 모음

- adobe XD, supernova, andrioid Studio 를 이용한 UI 작업.

www.youtube.com/watch?v=Lldzw4d_tFg