ㅅㅈㅍ ㅈㅂㅈㅇ (신제품 정보좀요)

빈도 높은 하이레벨 소개에 따르면, 오른쪽에 있는 '프로퍼티 패널'에서 선택한 위젯 또는 페이지에 대한 옵션을 설정할 수 있어요.

프로퍼티 패널에는 페이지와 위젯에 대한 옵션이 나타나고, 위젯에 대한 옵션은 해당 위젯의 구성에 따라 달라집니다.

추가적으로, 페이지와 위젯 프로퍼티에 대한 자세한 내용은 다음 영상에서 다룰 예정이에요.

페이지 속성은 페이지 맨 위에서 시작되며, 페이지 매개변수는 페이지간 데이터 전달 시 사용돼요.

iOS, Android 앱 및 웹에서 사용할 수 있으며 라우트 설정과 함께 네비게이션 기능을 제공합니다.

페이지 복제, 삭제, 이름 설정 등의 옵션이 있으며 탭을 통해 페이지 속성 및 위젯 속성 설정을 할 수 있습니다.

또한, 액션은 애플리케이션 논리를 정의하는 곳으로, 백엔드 호출, 애니메이션 트리거, 로컬 상태 변수 업데이트 등을 다룹니다.

백엔드 쿼리는 데이터베이스나 API 호출과 같은 백엔드 서비스에 데이터를 바인딩하는 곳이죠.

위젯이나 디자인 시스템 속성을 보기 위해서는 위젯을 클릭하면 됩니다.

위젯 이름을 명명하는 것이 중요한데, 검색 및 식별에 유용한 이름을 사용하는 것이 좋아요.

여기에서는 디자인 시스템에 대한 3가지 옵션이 있으며, 각각 위젯을 재사용 가능한 구성 요소로 만들어줘요.

테마 위젯으로 저장하면, 이전에 저장된 스타일과 동일하게 현재 스타일을 적용할 수 있어요.

선택한 위젯을 구성 요소로 저장하면, 어느 페이지에서든 사용 가능하고, 마지막으로, 여러 프로젝트에서 사용할 위젯이나 구성 요소를 템플릿으로 저장할 수 있습니다요.

웹 위젯의 공통 속성은 조건부 가시성, 반응형 가시성, 패딩 및 정렬로 구성돼요.

특정 위젯의 속성은 해당 위젯에만 적용되며, 조건부 가시성은 위젯을 언제 보이고 숨길지에 대한 설정이에요.

반응형 가시성은 장치별로 보일지 숨을지를 결정하며, 패딩과 정렬은 일반적인 레이아웃 속성이죠.

또한, 모든 위젯에서 볼 수 있는 공통 기능은 변수 아이콘이에요.

이 아이콘은 값의 설정을 위한 대화 상자를 제공하고, 동적인 값을 바인딩하는 것이 중요하답니다.

마지막으로 문서화와 접근성 및 의미 레이블은 위젯에 관한 주석 및 설명을 추가하는 옵션이에요.

이는 팀원들과의 조직화를 위해 유용하며, 접근성과 SEO에도 도움이 돼요.

위젯에서 다중 자식 요소를 가질 수 있는 경우, 다이나믹 자식 요소를 생성하는 옵션을 제공해요.

예를 들어, API 호출 또는 로컬 상태 배열 변수에서 항목을 가져와 자식 요소를 생성할 수 있어요.

API 반환된 배열을 기반으로 카드 또는 텍스트 목록을 생성할 수 있어요.

설정은 플루터플로우의 프로퍼티 패널에서 설정할 수 있어요.

FlutterFlow에서 앱은 위젯으로 이루어져 있어요.

주요 위젯과 각 위젯의 타입에 대해 알려줄게요.

유저 인터페이스(UI) 빌더에서 2가지 주목할 만한 점은: 첫번째, 위젯의 타입, 두번째로 위젯이 가질 수 있는 자식 수이에요.

플러터플로우에서 위젯을 4가지 카테고리로 나누는데, 초보자가 많이 사용하는 것은 'Commonly Used' 위젯입니다.

위젯은 'Layout', 'Base', 'Page', 'Form'과 같이 4가지 유형으로 구분할 수 있어요.

앱의 대부분은 위젯을 쌓는 것이라서, 가장 많이 쓰이는 primitive layout 위젯과 그를 보조하는 레이아웃 위젯이 있어요.

primitive layout 위젯에는 row, column이 있으며, 2D gridview에서는 staggered view, 페이지뷰를 사용할 때는 tabs, 페이지 전체에 적용할 수 있는 Base elements가 있어요.

이렇게 기초적인 레이아웃 위젯 사용 방법에 대한 소개가 이루어진 후, 페이지 위젯들이 소개될 거에요.

FlutterFlow에서는 앱의 메인 본문(main body)에는 한 개의 자식(child) 위젯을 가질 수 있어요.

이 자식 위젯은 여러 개의 다른 자식 위젯을 가질 수 있지만, 메인 본문의 자식으로 추가하려고 시도하면 오류가 발생하죠.

다음으로, Form Element 위젯은 주로 폼과 필터링에 사용되며, Base Element 위젯은 나머지 모든 종류의 위젯을 포함해요.

FlutterFlow에서는 위젯을 카테고리별로 찾을 수 있어요.

또한, 위젯은 0개, 1개 또는 여러 개의 자식을 가질 수 있다는 점을 알아두어야 해요.

위젯은 아무 자식도 받지 않는 것이 있고, 하나의 자식만 받는 것이 있으며, 여러 자식을 받을 수 있는 것으로 나뉘어져요.

하나의 자식만 받는 위젯 예시로는 컨테이너가 있고, 여러 자식을 받을 수 있는 위젯 예시로는 컬럼, 로우, 스택 등이 있어요.

일부 위젯은 아이콘이나 이름으로 확인할 수 있지만, 명확하지 않을 수도 있으므로 실험을 통해 자식을 받을 수 있는 위젯을 확인해볼 수도 있어요.

FlutterFlow 프로젝트 내에서 페이지를 이동하는 방법을 설명합니다.

위젯 트리와 페이지 선택기가 다른 탭 또는 섹션으로 분리되어 있어 페이지를 선택하고 이동할 수 있습니다.

두 번째 방법으로는 위젯 트리와 페이지를 한 화면에 겹쳐서 볼 수 있는 기능을 제공합니다.

또한 페이지나 컴포넌트를 필터링하여 원하는 것만 표시하거나 새 폴더, 페이지, 또는 컴포넌트를 생성하는 기능을 제공합니다.

'커맨드 팔레트'가 제공되며 이를 사용하여 페이지를 빠르게 찾아 갈 수 있으며, 이를 위해서 페이지와 컴포넌트 이름에 좋은 의미론적인 이름을 붙여야 해요.

커맨드 팔레트는 command K 키를 입력하면 나타나며, 페이지, 컴포넌트 또는 탭 등 빠르게 찾을 수 있도록 도와줘요.

이를 통해 바로 원하는 페이지로 이동이 가능하며, 위와 같이 특정 검색어 입력 후 화면에서 상/하 방향키로 선택해 클릭하여 이동할 수도 있어요.

스토리보드 기능을 사용하면 앱 전체 레이아웃을 시각적으로 확인하고 네비게이션을 도와줘요.

스토리보드를 통해 페이지를 클릭하여 해당 페이지로 바로 이동하고, 마지막으로 본 페이지로 쉽게 돌아와 재개할 수 있어요.

또한, 스토리보드에서는 네비게이션 및 로그인 경로뿐만 아니라 바닥 시트 액션도 시각화돼요.

스토리보드를 사용하면 앱 내에서 사용되는 요소들의 배치를 조정하고, 큰 규모의 사용자 이동 패턴을 확인하는 데 도움이 돼요.

대부분의 위젯은 보이는 상태이지만, 탭 밑 또는 조건부 표시와 같은 이유로 숨겨진 위젯이 있을 수 있어요요.

숨겨진 위젯이 있다면, 격자 아이콘이 나와요요.

'이 위젯은 숨겨져 있지만 내부에 있는 네비게이션을 확인할 수 있다'는 것을 알 수 있어요요.

페이지를 선택하면 라우트들이 강조되어 페이지 내 유저 네비게이션과 위젯에만 집중할 수 있어요요.

위젯 위치를 변경한 후, 초기 레이아웃으로 다시 시작하려는 경우, Reset 버튼을 클릭하면 가능해요요.

FlutterFlow 프로젝트 내에서 위젯 및 네비게이션을 관리하는 데 유용하게 활용할 수 있어요요.

FlutterFlow의 위젯 트리는 웹 및 앱 UI를 구성하는 위젯들의 구조와 레벨을 시각적으로 확인할 수 있어요.

위젯 트리에서는 현재 앱 바와 홈 페이지만 존재하며, '버튼'을 통해 더 많은 위젯을 추가할 수 있어요.

추가된 위젯은 계층 구조에 따라 더 들여쓰인 선으로 표시되고, 일부 위젯은 자식 위젯을 추가할 수 있는 '아이콘'을 가지고 있어요.

또한, 위젯 트리에 위젯을 직접 추가할 수도 있고, 애니메이션 효과가 적용된 아이콘이 나타나요.

하단의 UI 빌더에서도 위젯을 추가할 수 있는데, 해당 기능은 단축키(Command + F)를 사용하여 수행할 수 있어요.

위젯을 추가할 때, 강조된 위젯은 형제 또는 자식으로 추가되는 기준이에요.

또한 위젯을 드래그하여 추가할 때, 아이콘을 통해 형제 또는 자식으로 추가되는지 확인할 수 있어요.

보라색과 두 개의 동일한 막대는 형제 관계를 나타내며, 아래 짧은 막대는 자식 관계를 나타내요.

위젯을 추가하는 경우, 자식으로 추가할 수 있는 경우 먼저 자식으로 추가되며, 형제로 추가하고자 할 경우에는 더 오래 누르고 있어야 해요.

FlutterFlow에서는 가끔씩 원하는 조직이 허용되지 않아서 동등한 값이 있는 형제를 추가할 수 없어요.

그렇지만 오류만 발생하는 것이 아니라, 문제가 무엇인지와 해결 방법을 알려주는 팝업 창이 뜨죠.

예를 들어, 형제로 추가하려는데 Flutter의 규칙에 어긋나서 루트 위젯은 하나의 자식만 가질 수 있다는 것을 알려줘요.

그러면 문제를 설명한 후에 문제를 해결할 수 있는 몇 가지 옵션을 제시해줘요.

FlutterFlow는 "container와 column을 형제로 가지려면 무언가로 감싸야 한다.

column, row, stack 중 하나로 감싸면 된다"라고 말하죠.

위젯 축소됐을 때는 화살표 아이콘 눌러 확대 가능.

잠금 아이콘은 기본 위젯 선택 패턴 정의가 목적임.

기본 위젯 선택 시 자동으로 스크롤되는데, 이를 잠금 아이콘으로 제어 가능.

일반적으로 잠금 해제하고 사용하나, 작업 중인 위젯 위치 확인할 시 잠금 사용할 수 있음.

스크롤 유지 시에는 잠금 유용.

그렇지 않다면 작업하면서 자동으로 위치 바뀌게 해제해도 되어요.

위젯 트리에서 아이템을 드래그하여 순서를 바꿀 수 있고, 우클릭 시 옵션을 제공해요.

계층 구조 파악이 쉬워 유용하며, 중요한 요소를 파악하며 선택할 수 있어요.

창고에는 정보가 부족할 때, 위젯 트리에서 작업하면 도움이 돼요.

루트 위젯을 복사하여 다른 페이지에 적용할 수 있어요.

이 때 빈 페이지에서 복사를 해야 한다요.

FlutterFlow에서 Canvas 기능을 자세히 알려줘요.

작업창 외부로 UI Builder를 이동하여 팝 아웃 기능을 사용하여 빠르게 작업 가능합니다.

리사이즈 핸들바를 사용하여 화면 사이즈를 조절하고, 리사이즈 스냅 기능을 사용하여 원하는 사이즈로 요소를 배치할 수 있습니다.

또한, 다국어 기능을 사용하여 다양한 언어로 작업하고, 번역 기능으로 실시간 확인이 가능합니다.

UI 디버깅을 위해 오버플로우 에러 확인 아이콘을 클릭하면 해당 컴포넌트의 오버플로우 에러를 확인할 수 있어요.

'앱 바'와 '네비게이션 바' 옵션도 추가됐어요.

해당 옵션들에 대한 설명은 '앱 바'와 '네비게이션 바' 영상에서 다루었어요.

캔버스에서 작업한 내용은 실제 페이지에 반영되며, 항목을 끌어서 재정렬할 수 있어요.

이 때, 항목 이동 위치를 알려주는 선이 표시됩니다.

몇몇 위젯에서는 컨트롤 핸들을 사용할 수 있어요.

캔버스에서 마우스 우클릭을 하면 다양한 옵션을 사용할 수 있어요.

또한, 필자는 Command-D를 추천하며 이를 활용하여 쉽게 복제할 수 있다고 말해요.

Wrap은 자주 사용하는 단축키 중 하나인데, 컨테이너로 감싸는 것 대신 Wrap을 사용하면 쉽게 원하는 위젯을 감쌀 수 있어요.

또 하나의 단축키는 'Replace'인데, 기존 위젯을 다른 위젯으로 바꾸거나 디자인을 테스트하는 데 유용하죠.

마우스 우클릭 메뉴에서는 위젯의 계층 구조를 확인할 수 있어 오브젝트의 부모를 선택하는 데 도움이 되어요.

그리고 FlutterFlow 내에서 사용되는 모든 단축키들은 'Command+Z'를 사용하여 언제든지 이전 상태로 되돌릴 수 있어요.

디자인 시스템에서 기어 아이콘을 클릭해 네비게이션 바 설정을 시작해요.

따라서, 네비게이션 바 예제가 있는 옵션에서 'Show your nav bar'를 선택하고, 페이지가 적어서 경고가 떴다면 'Add another page' 언더라인을 클릭하여 새 페이지를 하나 더 추가해야 해요.

그리고 그 페이지에서 네비게이션 바를 추가해주어야 하는데, 이 때 어떤 페이지를 추가할지는 네비게이션 바 스타일에 따라 제한이 있어요.

스타일과 네비게이션 바에 추가할 페이지 수를 설정하는 방법을 소개해드릴게요.

어디에서든 'Nav bar' 버튼을 찾아 클릭하고, 페이지를 추가하면 돼요.

마지막으로 'Settings'으로 돌아가 작업을 마무리하면 됩니다.

Flutter에서 네비게이션 바를 스타일링하는 과정에서는 nav bar, Google nav bar, floating nav bar 3가지의 옵션이 있어요.

스타일링을 다양하게 변경할 수 있으며, 선택한 옵션에 따라 다양한 옵션을 사용할 수 있어요.

특히, floating nav bar을 선택하면 nav button margin 설정으로 인해 플로팅한 디자인을 만들어낼 수 있어요.

또 네비게이션 바 스타일링 외에도 layout과 다른 스타일링 옵션도 사용 가능해요.

프로필 페이지에서 네비게이션 바 항목의 라벨과 아이콘을 'profile'로 변경해주고, 미리보기 창에서 네비게이션 설정을 확인할 수 있어요.

네비게이션 바에서 항목을 재정렬하려면 드래그하면 돼요.

네비게이션 바를 페이지에 표시하되, 네비게이션에는 포함하지 않고 싶은 경우 'always show navbar on page' 옵션을 끄고, 현재 페이지를 네비게이션에서 제외시킬 수 있어요.

반응형 가시성 설정에서는 네비게이션 바를 어떤 기기에서 보여줄지 선택할 수 있어요.