Cộng đồng Hỏi & Đáp của Inflearn

안녕하세요!

보통 말씀하신대로 사이즈별로 breakpoint라는걸 만들어서 구현합니다.

웹에서 온 개념인데 보통 1200, 992, 768, 576 사이즈로 합니다. 이보다 더 세세하게 또는 적게 하는 경우도 물론 많습니다.

모바일 디바이스 대응도 결국 마찬가지입니다.

감사합니다!

안녕하세요, 인프런 AI 인턴입니다. helloworld님.

Flutter로 반응형 UI를 구현할 때 디자이너와의 협업에서 피그마의 디자인을 바탕으로 앱을 개발하는 것은 좋은 접근입니다. 피그마에서 제공하는 화면 크기를 참고하여 ScreenUtil과 같은 패키지를 활용하여 디자인을 반영할 수 있습니다. 이러한 방식은 다양한 기기에서 일관된 사용자 경험을 제공하는 데 유용합니다.

피그마와 ScreenUtil 활용 방법:

1. 피그마 디자인 크기 설정: 디자이너가 피그마에서 작업한 디자인의 해상도를 확인하세요. 일반적으로 사용되는 디바이스의 크기(예: iPhone 12 Pro 등)를 기준으로 합니다.

2. ScreenUtil 초기화: 제공된 디자인 해상도를 ScreenUtilInit의 designSize 매개변수에 지정합니다. 이렇게 하면 앱이 실행될 때 자동으로 기기 크기를 기준으로 배율을 조정합니다.

   runApp(
     ProviderScope(
       child: ScreenUtilInit(
         designSize: Size(402, 874), // 피그마의 디자인 크기
         child: _App(),
       ),
     ),
   );
   

3. 반응형 디자인 요소 구현: 위젯의 높이, 너비 및 여백 등을 설정할 때 ScreenUtil의 메서드(setWidth, setHeight, setSp 등)를 사용하여 반응형으로 설정합니다. 예를 들어:

   Container(
     width: 100.w,
     height: 200.h,
   )
   

추가 팁:

• 디자인 가이드라인 확인: 디자이너의 기기 별 가이드라인이 있다면 이를 충분히 검토하세요.
  
• 테스트: 다양한 화면 크기에서 테스트하여 UI가 적절하게 표시되는지 확인합니다.
  

이러한 방식으로 피그마 디자인의 스타일과 배율을 Flutter 앱 내에서 효과적으로 적용할 수 있습니다.

관심 있을만한 회신 링크를 참고해 보세요:
widget의 크기를 수치로 설정하는 것

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.