-
Flutter 관련 링크 모음 [UI 디자인 관련]프레임워크/Flutter 2020. 6. 6. 20:53
Flutter는 프론트엔드를 구현하기 좋은 편인데요, 아무래도 개발자가 디자인까지 하기는 쉽지 않지만,
여러 사이트를 참고하면 그럴싸한 디자인으로 앱을 만들 수 있습니다.어플리케이션의 UI/UX를 구성하는데 참고할 수 있는 사이트들을 모아놓았습니다.
1. 슈퍼노바 supernova
Supernova Studio | The World's First Design to Code Platform
Accelerate the app development workflow for mobile designers and developers. Supernova converts any mobile design into full-fledged native applications, giving the developers extra time to do actual coding. For iOS, Android, React Native and Flutter.
supernova.io
서비스 소개
디자인을 하면 그대로 Flutter 코드로 자동생성해주는 툴. 일일히 코드를 입력해주지 않아도 디자인을 코드로 import해줍니다.
adobe xd에서 바로 import할 수 있습니다.
주요 컨텐츠
아래와 같이 디자인한 layout을 import해주는 기능이 있습니다.
2. 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
서비스 소개
피그마는 디자인을 보다 쉽게 할 수 있는 협업툴 입니다. 개발을 할 때 와이어프레임을 혼자서만 작성하지 않는 경우가 많아서, 다른 사람과 같이 작업을 할 때 사용하는 경우가 많습니다.
주요 컨텐츠
아래와 같이 여러명이서 와이어프레임을 디자인할 수 있습니다.
3. 어도비 XD
https://www.adobe.com/kr/products/xd.html
서비스 소개
어도비 XD 또한 와이어프레임을 구성하는 협업툴입니다. 다만, 어도비는 혼자서 사용하는 데는 돈이 들지 않지만, 여럿이서 사용하려면 요금을 지불해야합니다. 하지만 어도비라는 디자인쪽으로 유명한 회사에서 만든 툴이기 때문에 디자이너분들은 단축키가 UX가 비슷해서 그런지 바로 적응해서 잘 사용하시더군요. 확장성도 나름 좋은 편입니다.
주요 컨텐츠
아래와 같은 여러 특징이 있습니다.
4. 구글 머터리얼 디자인
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
서비스 소개
구글의 머터리얼 디자인이란 구글이 만든 디자인 가이드입니다. "어플리케이션은 이런식으로 디자인하는 것이 좋다."를 가이드라인을 제시한 것인데요, UX측면에서 사람들이 어떻게 하면 잘 사용할 수 있는 지에 대해 잘 정리되어 있는 편입니다.
주요 컨텐츠
아래의 페이지는 구글의 머터리얼 디자인이 어떤 목표를 가지고 만들었는 지에 대해 설명이 되고 있네요. 실제로 보면, 레이아웃은 어떻게 구성할 것인지, 색깔은 어떻게 줄지, 글씨, 소리, 아이콘 등등 세부적으로 디자인 가이드라인을 제시해놓았습니다.
material.io/design/introduction#goals
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
material.io
5. Rive
https://rive.app/Rive - Bring your apps and games to life with real-time animation.
rive.app
서비스 소개
마지막으로 Rive인데요, 어플리케이션내에 애니메이션 이미지를 적용합니다. 쉽게 말하자면 Vector형식으로된 GIF파일 같은 걸 앱내에 넣는 것입니다.
주요 컨텐츠
사진상으로는 안 보이겠지만 아래와 같이 움직이는 형식의 아이콘이라든지 배경같은 것을 비교적 손쉽게 적용할 수 있도록 해줍니다.
기타 UI참고 사이트
1. uimovement
UI Movement
Only the best UI design inspiration, right in your inbox
uimovement.com
서비스 소개
UI 디자인을 참고할만한 사이트 입니다. 다만, 소스코드로 되어있지는 않습니다.
주요 컨텐츠
카테고리별로 추천하는 UI를 띄워줍니다.
2. inspired UI
https://android.inspired-ui.com/
Inspired UI - Mobile Apps Design Patterns
A showcase of the best examples of beautifully designed mobile apps - iPhone, iPad, Android, UI Patterns
inspired-ui.com
서비스 소개
안드로이드 / IOS의 디자인들을 참고해 볼 수 있습니다.
주요 컨텐츠
아래와 같이 안드로이드, IOS Theme으로 카테고리별 추천하는 UI를 띄워줍니다.
3. Codemagic
https://codemagic.io/start/Codemagic - CI/CD for Flutter and mobile app projects
Boost your mobile app development with continuous integration and delivery. With codemagic.yaml, you can automate the whole build, test and release pipeline of your Flutter and iOS, Android projects to get to the market in record time.
codemagic.io
서비스 소개
이 서비스를 여기다가 넣어야하나는 고민을 했는데, 일단 UI Testing을 지원하기 때문에 넣어봤습니다. 사실 UI 뿐만아니라 CI/CD 툴인데요, 테스팅 자동화툴이기도 해서 어느정도 숙련된 분들이 사용하시는 게 좋을 것 같습니다.
주요 컨텐츠
이 사이트를 이 목록에 집어 넣은 이유입니다.
https://blog.codemagic.io/flutter-ui-testing/
Flutter UI Testing custom
How to set up UI testing for Flutter apps.
blog.codemagic.io
여기까지가 제가 찾아보았던 혹은 사용했던 사이트들의 목록입니다. 앞으로도 더 좋은 사이트가 있다면 추가할 예정입니다.
혹시나 수정사항이 있거나 추가해야할 내용이 있으면 댓글로 남겨주시기 바랍니다 :)'프레임워크 > Flutter' 카테고리의 다른 글
Flutter 관련 링크 모음 [라이브러리 관련] (0) 2020.06.07 Flutter 관련 링크 모음 [프레임워크 관련] (0) 2020.05.16