24.12.05 TIL

t2024-m0156@t2024-m0156ui-MacBookAir flutter_firebase_blog_app % flutterfire configure
i Found 1 Firebase projects.                                                               
✔ Select a Firebase project to configure your Flutter application with · flutter-blog-app-d9b30 (flutter-blog-app) 
✔ Which platforms should your configuration support (use arrow keys & space to select)? · android, ios 
? Which Android application id (or package name) do you want to use for this configuration,
✔ Which Android application id (or package name) do you want to use for this configuration, e.g. 'cohttp://m.example.app'? · com.example.flutter_firebase_blog_app 
i Firebase android app com.example.flutter_firebase_blog_app registered.                   
i Firebase ios app com.example.flutterFirebaseBlogApp registered.                          
Exception: /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require': cannot load such file -- xcodeproj (LoadError)
        from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
        from -e:1:in `<main>'

t2024-m0156@t2024-m0156ui-MacBookAir flutter_firebase_blog_app % flutterfire configure
i Found 1 Firebase projects.                                                               
✔ Select a Firebase project to configure your Flutter application with · flutter-blog-app-d9b30 (flutter-blog-app) 
✔ Which platforms should your configuration support (use arrow keys & space to select)? · android, ios 
? Which Android application id (or package name) do you want to use for this configuration,
✔ Which Android application id (or package name) do you want to use for this configuration, e.g. 'cohttp://m.example.app'? · com.example.flutter_firebase_blog_app 
i Firebase android app com.example.flutter_firebase_blog_app registered.                   
i Firebase ios app com.example.flutterFirebaseBlogApp registered.                          

Firebase configuration file lib/firebase_options.dart generated successfully with the following Firebase apps:

Platform  Firebase App Id
android   1:524163853313:android:447030db5986f21ee92400
ios       1:524163853313:ios:c712d26364086a5ee92400

Learn more about using this file and next steps from the documentation:
 > https://firebase.google.com/docs/flutter/setup
t2024-m0156@t2024-m0156ui-MacBookAir flutter_firebase_blog_app %

 

특강 - 피그마와 친해지기

 

1. UI 만들기

 - 1x 해상도 mpdi로 작업 = 화면비율대로 작업을 해야 후폭풍이 없다

 - 오토레이아웃 Shift + A

 - 그리드 쉬프트 + G

 - 스타일, 폰트, 색상 통일성 유지

 - 컨스트레인트, 프레임 내 위치 설정

 

PART2. 디자인, 맨땅에 헤딩하지 마세요

 

라이브러리 기능 이용, 구글 애플 피그마 ui키드 이용가능

assets 기능, 버튼,아이콘, 폰트 등등 활용 가능하다

 

피그마는 확장성이 좋다 = 플러그인이 다양하다

아이콘

Iconfy, Icons8, Tossface

이미지

Lummi, Unsplash

스타일

 

AI 툴 추천

Codia Ai = 스크린샷 UI 클론

AI Design Copilot, UXpilot = 와이어프레이밍

Rapidate = 실시간 서베이, 디자인 검증

 

피그마생태계

-피그잼

-슬라이드

-커뮤니티

 

마지막 팁

-3D 디자인

-자주 쓰는 것들 = 피그마 단축키, 폰트, 프리텐다드, Option 복사 가이드라인 확인가능

-피그마에서 웹 배포 = pigma.to.website

 

쉬프트 + A = 오토레이아웃 기능

오토레이아웃 안에 오토레이아웃 걸수있따

 

타 서비스의 피그마 참조

무딘, 유아이 보울

https://mobbin.com/ 

https://uibowl.io/

유아이볼 | 매일 하루에 한개씩 업데이트 되는 패턴과 친해져요!

Auto Layout : Shift + A

Layout: Shift + G

 

그리드를 칼럼으로 바꾸고, 6 나 4칼럼으로 만든다

좌우가 붙지 않게 마진값을 준다

 

플러그인 위젯 눌러서 설치가능하다

 

codia ai design 에서 이미지를 구성품으로 바꾸어준다