디자인 가이드 없이 UI 개발이 어려웠는데
Flutter Gen Zeplin Extension 🚀
덕분에 편하게 개발하고 있습니다.
iOS용 Sketch 파일 받아서 Zeplin Plugin으로 Export 하고
Flutter Gen Extension 추가해서 사용하고 있습니다.
widget 위치나 크기 지정할때 pt 단위가 아닌 % 단위로도 표시되서 다양한 크기에 디바이스에 대응하기도 좋습니다.
잘못된 형식의 이미지 링크입니다.
그리고, Color값도 class 형태로 자동으로 네이밍 되서 작업할때 너무 편합니다.
잘못된 형식의 이미지 링크입니다.
Zeplin은 한 계정당 한 프로젝트까지는 무료이고 50명까지 공유 할 수 있습니다.
혹시, 필요하신분 있으시면 댓글 남겨주세요. 공유해드리겠습니다.
* Sketch
* iOS Design Resource
https://files.design/templates/ios14gui
* Zeplin
* Flutter Gen Zeplin Extension
처음이라 익숙해지려면 시간이 필요하니, 파일 관리자 앱이라도 하나 만들고 진행할까 생각이 드네요. 몇 주째 계속 기술 조사를 하고 있어요. 그 이외에 Sketch 등으로 UI의 윤곽을 잡으면 Supernova.io에서 Flutter 코드로 변경하는 툴을 만들고 있던데 얼리액세스이고, 데스크탑용 디자인 도구는 아직 공개된건 못찾네요. 플래터의 데스크탑앱 지원은 알파 버전이라서 아직 지원을 받기엔 좀 이른가 싶기도 하고요. 플래터로도 원하는 방향으로 못가면.. 아마도 닷넷...
화면 크기는 조절 가능합니다. 사용자가 화면 크기를 못 하게 할 수도 있구요.
아무래도 모바일 하고는 화면 사이즈를 다르게 가져가야 해서 디자인 레이아웃을 width 기준으로 재 정렬 하는 방식으로 구현 하고 있습니다.
평소 안드로이드 네이티브 대비해서 flutter 자체만으로도 디자인구성이 쉽다고 느꼈는데
작성해주신 글 보고 좋아보여서 바로 적용해보았습니다.
그런데 실제 써보니, 주로 boxDecoration, border, 기본 폰트/색/사이즈 정도 외에는 가져올수있는 정보가 없어보이는데,
물론 이정도만 써도 기본 UI가 전반적으로 깔끔해지긴하지만,
이정도 사용성에 만족하시는것인지, 아니면 제가 아직 사용에 미흡한것인지 여쭈어보고싶습니다.
저는 사용해보신 기본 정보하고 추가로 이미지 리소스를 png(1x,2x,3x), svg 형태로 다운받는 부분과
전체 스크린 사이즈에서 widget 높이를 % 센트로 표시되는 부분을 참고해서 다양한 디바이스에 대응할 수 있게 해주는 부분을 사용하고 있습니다.
그리고, 무엇보다 가장 좋은 점은 컬러나 텍스트 크기 같은 부분에서 아무 생각 없이 개발이 가능하다는 부분에 만족하고 있습니다. ^^