단순 반응형 디자인 소개

현재 많은 장치 화면 크기가 있습니다. 사용자에게 옵션을 제공하는 것은 대체로 좋은 일이지만, 우리는 개발자(및 디자이너)로서 이러한 다양한 화면 크기를 지원해야 하기 때문에 종종 어려움을 겪습니다(웃음).

웹 개발 세계에서 12 그리드 시스템에서 대중적인 선택이 있습니다. 그러나 앱 개발 세계에서 12 그리드 응답 시스템도 그다지 인기가 없습니다(이유가 궁금합니다).

이에 대한 예는 iphone 및 ipad 앱입니다. 다운로드할 때 꽤 많은 "ipad"앱이 있으며 잘린 "iphone"보기에서만 레이아웃을 표시합니다.

단순히 반응하는 디자인을 입력하십시오.

Simply Responsive Design은 제가 만든 용어입니다(창의적인 이름이 맞죠?). 이 디자인 시스템은 대부분 머티리얼 디자인에서 파생/영감을 얻었으며 Flutter 개발자인 저의 맥락에서 구축했습니다.

12 그리드 시스템과 달리 SRD(Simply Responsive Design)는 고정된 상단 및 하단 바/앱 바와 함께 화면에 최대 3개의 열만 있다고 가정합니다. 이 단순화에는 장점과 단점이 모두 있습니다. 기본적으로 SRD는 유연성을 개발 속도와 맞바꿉니다.

SRD에는 3가지 종류의 화면 크기가 있습니다.

모바일(너비 600픽셀 미만)

태블릿(너비 600 - 767px)

데스크톱(>= 너비 768px)

보시다시피 UI(또는 flutter의 위젯) 배치는 화면 크기에 따라 어느 정도 예측 가능합니다. 이렇게 하면 프로젝트 초기에 논리를 추상화하기 위해 사용자 정의 스캐폴드를 이미 만든 경우 개발 속도가 더 빠르고 쉬워집니다. 이렇게 하면 후속 코드가 즉시 반응하기가 훨씬 쉬워집니다.

/// Prototype of SRD as an abstracted out flutter widget
return SimplyResponsiveScaffold(
  title: 'MyTitle'
  leftContents: <Widget>[],
  centerContents: <Widget>[],
  rightContents: <Widget>[],
);

해당 위젯을 사용하면 앱이 실행 중인 화면 크기에 관계없이 TheSimplyResponsiveScaffold는 화면 크기에 따라 왼쪽, 중앙 또는 오른쪽 위치를 자동으로 결정합니다.

(이렇게 하면 회전할 때 앱이 자동으로 작동합니다.)

=====

여기까지가 Simply Responsive Design의 소개 부분입니다. 향후 기사에서는 UI 요소 상호 작용 SRD에 대한 자세한 설명을 추가할 예정입니다. 또한 SRD를 더 쉽게 구현할 수 있도록 사용자 지정 flutter 라이브러리를 작성할 계획입니다.

감사합니다. 다음 기사에서 만나요!