툴바는 앱 빌더 상단에 위치하며, 프로젝트 구성, 앱 버전 저장, 도움말 받기, 문제 보고/디버깅, 프로젝트 코멘트 보기, 앱 코드 다운로드 및 FlutterFlow에서 바로 앱 실행 등 다양한 버튼으로 구성되어 있습니다.

1. Project info

   이 섹션은 프로젝트에 대한 필수 정보를 표시합니다. 여기에서 프로젝트 이름, 현재 사용 중인 FlutterFlow 버전 및 릴리스 날짜를 쉽게 확인할 수 있습니다. 또한 프로젝트가 현재 실행 중인 Flutter 버전을 표시합니다.

   

   Project info

2. Help

   도움말 버튼을 클릭하면 앱을 만드는 동안 유용한 필수 자원 링크에 액세스할 수 있습니다.

   

   1. Join Community

      FlutterFlow에 대한 공통적인 관심을 가진 개인으로 구성된 활기찬 사용자 커뮤니티가 있습니다. 이 커뮤니티는 FlutterFlow를 중심으로 적극적으로 참여하며, 이야기를 나누고 지식을 공유하며 협업 프로젝트에 참여합니다.

   2. Feedback

      제품을 개선하는 데 도움이 되는 피드백을 제공하는 데 이 버튼을 사용할 수 있습니다. 다음과 같은 유형의 피드백이 포함됩니다:

      1. Bug Report

         

      2. Feature Request

         

      3. General Feedback

         

   3. Tutorials

      여기서부터 FlutterFlow 내에서 첫 번째 앱을 만드는 튜토리얼을 시작할 수 있습니다.

   4. FAQs and Docs

      앱을 만들 때, 공식 문서를 자주 참고해야 할 수도 있습니다. 이 버튼은 FlutterFlow 문서로 이동합니다.

      <aside> 💡 유료 사용자인 경우, 당사 빌더 내에서 바로 문서에서 검색할 수 있도록 허용합니다.

      </aside>

   5. What's New?

      FlutterFlow의 최신 기능 및 변경 사항을 모두 업데이트해 드리고자 합니다. 이 버튼을 사용하여 FlutterFlow에서 새로운 기능이나 변경 사항에 대한 업데이트를 직접 확인할 수 있습니다.

   6. Current Status/Known Issues

      FlutterFlow의 현재 상태와 알려진 문제에 대한 업데이트를 제공해 드립니다. 투명성을 보장하고 플랫폼의 성능과 잠재적인 문제에 대해 알려드립니다.

   7. Show/Hide Chat

      앱 빌더 하단 오른쪽에 있는 채팅 버튼을 표시/숨기기 하려면 이 버튼을 사용할 수 있습니다.

3. Share links to a specific page

   이제 앱 빌더에서 특정 페이지로 바로 이동할 수 있는 링크를 공유할 수 있습니다. 이 기능을 사용하면 프로젝트의 특정 페이지, 컴포넌트 및 설정을 공유하는 데 매우 유용하며 사용자가 원하는 정확한 위치로 쉽게 이동할 수 있도록 도와줍니다.

   링크 버튼을 클릭하고 해당 페이지, 구성 요소 또는 설정을 보려면 앱 빌더를 탐색할 필요 없이 누구에게나 링크를 보낼 수 있습니다.

   

4. Keyboard shortcuts

   키보드 단축키를 사용하면 위젯과 관련된 일반적인 작업을 수행하고 테스트 또는 실행 모드에서 프로젝트를 실행하는 데 몇 가지 키만으로 시간과 노력을 절약할 수 있습니다.

   

5. Command palette

   Command Palette(명령 팔레트)를 이용하면 앱 빌더를 빠르게 탐색할 수 있습니다. 단 한 번의 클릭으로 앱 테마를 열거나 코드를 볼 수 있으며, 페이지를 추가/복제할 수 있습니다.

   검색 버튼을 누르거나 Cmd/Ctrl + K를 눌러 액세스할 수 있습니다.

   

6. Canvas size

   우리는 모바일, 태블릿, 데스크탑 장치용 앱을 시각화하고 디자인할 수 있도록 허용합니다. 캔버스 크기는 픽셀 단위의 가로 x 세로 (픽셀 단위) 로 정의됩니다. 이 크기는 선택한 기기에 따라 결정됩니다. 사용자 정의 캔버스 크기를 설정하려면 캔버스 크기를 클릭하고 원하는 가로 및 세로 크기 (픽셀 단위)를 입력하십시오.

   

   Canvas Size

7. Project history

   Versions

   버전은 프로젝트의 이름이 지정된 버전을 저장할 수 있도록 합니다. 무언가 잘못되었을 때(페이지/컴포넌트를 삭제하거나 구성을 실수로 제거하는 경우 등), 이전에 저장된 프로젝트 상태로 롤백 할 수 있습니다.

   Snapshots

   빌드하는 동안 스냅샷이 자동으로 저장됩니다.

   <aside> 💡 무료 사용자는 스냅숏에 하루 동안만 액세스 할 수 있지만 유료 사용자는 7 일 동안 스냅숏에 액세스 할 수 있습니다.

   </aside>

   1. 버전 저장하기

      최신 변경 사항을 저장하면 버전 관리에서 현재 앱 상태가 저장됩니다. 미래에 문제가 발생하면 현재 저장된 상태로 앱을 복원할 수 있습니다.

      <aside> 💡 이상적으로는 중요한 작업을 완료할 때마다 버전을 저장하는 것이 좋습니다. 예를 들어 페이지 작업을 완료한 후, 구성을 추가한 후 등등.

      </aside>

      현재 버전을 저장하려면:

      1. 프로젝트를 일부 수정합니다.
      2. 버전 드롭다운을 클릭합니다. 이렇게 하면 팝업 메뉴가 열립니다. (이것이 버전을 처음 저장하는 경우 V1로 표시됩니다.)
      3. 저장 버튼을 클릭합니다. 이것은 새로운 팝업을 엽니다.
      4. 이 버전을 설명하는 메시지를 입력합니다.
      5. 버전 저장을 클릭합니다.

      

      Saving version

   2. 버전 복구하기

      이전 버전으로 복원하려면:

      1. 버전 드롭다운을 클릭합니다. 팝업 메뉴가 열립니다.
      2. 이전에 저장된 버전 목록에서 복원하려는 버전을 식별하고 클릭합니다.
      3. 선택 사항: 복원하기 전에 이전 버전의 변경 사항을 보고 싶을 수 있습니다. 이를 위해 Peek 버튼을 클릭합니다. 이 버튼은 새 탭에서 해당 버전을 엽니다. 또한 이 버전의 코드를 로컬 장치에 다운로드하여 코드를 시도할 수도 있습니다.
      4. 버전을 복원하려면 복원 버튼을 클릭합니다.
      5. 확인 팝업이 나타납니다. 예, 복원 버튼을 클릭합니다.

      <aside> 💡 이전 버전으로 복원하면 현재 버전을 저장한 다음 복원할 버전에서 변경 사항을 로드합니다.

      </aside>

      Restoring project version

      Restoring project version

8. Project issues

   현재 프로젝트에서 빌드 실패나 앱 충돌이 발생할 수 있는 문제나 경고가 있다면, 이 섹션에서 표시됩니다. 각 문제에 대한 간단한 설명을 보고 해당 문제를 수정할 수 있는 위치로 이동하려면 해당 문제를 클릭하십시오.

   

   Project Issues

9. Project comments

   이 기능을 사용하면 프로젝트 팀이나 클라이언트와 함께 특정 위젯에 대한 생각, 의견, 질문 또는 피드백을 남길 수 있습니다. 댓글을 추가하면 사용자를 태그할 수 있으며, 그들은 대화 스레드를 만들어 응답할 수 있습니다.

   의견을 추가하려면 피드백을 공유하려는 위젯을 선택하고 댓글 상자를 열고 쓰기 아이콘을 클릭한 다음 피드백을 공유할 수 있습니다. 사용자를 태그하려면 @ 기호를 선택하고 프로젝트 팀 멤버를 선택하세요.

   

   write icon

   만약 댓글에서 태그되었다면 할당된 탭에서 할당된 댓글 수를 확인할 수 있습니다. 그곳에서 댓글에 대해 답변하고 문제를 해결할 수 있습니다. 팁: 댓글을 열면 UI 빌더에서 사용자가 댓글을 게시한 위젯이 자동으로 선택됩니다.

   

   Adding a comment

   

   Reply & Resolve a comment

   선택한 탭은 현재 선택한 위젯에 대한 모든 코멘트를 보여줍니다. 해결된 탭은 모든 해결된 코멘트를 보여주며, 필요한 경우 다시 열린 상태로 변경할 수 있습니다.

   

   Resolved tab

   

   Selected tab

10. Developer menu

    개발자 메뉴에서는 프로젝트 코드를 볼 수 있으며, GitHub에 연결하고 프로젝트 소스 코드를 다운로드 할 수 있습니다.

    

    1. View Code

       이 옵션을 사용하면 FlutterFlow 프로젝트의 모든 화면에 대한 Dart 코드를 표시할 수 있습니다. 여기에서 앱에서 사용되는 종속성도 확인할 수 있습니다.

    2. Connect GitHub Repo (Paid Feature)

       이 옵션을 사용하여 프로젝트를 GitHub 계정과 연결하고 GitHub 저장소에 업로드할 수 있습니다. 이 옵션을 클릭하면 설정 및 통합 > 통합 > Github 섹션으로 이동합니다.

       이 페이지에서 프로젝트에 GitHub 통합을 추가할 수 있습니다. 이를 통해 전체 앱 코드베이스를 'flutterflow'라는 새 브랜치에 저장소에 업로드할 수 있습니다.

       <aside> 💡 GitHub와 연결하는 데 대한 자세한 단계별 가이드는 여기를 참조하세요.

       </aside>

    3. Download Code (Paid Feature)

       FlutterFlow로 생성된 Flutter 앱의 전체 코드베이스를 코드 다운로드 옵션을 사용하여 다운로드 할 수 있습니다. 이것은 .zip 파일을 다운로드합니다. 수정을 위해 어떤 코드 편집기를 사용하여 내용을 열 수 있습니다. 코드를 다운로드하는 동안, 의존성을 가져오고 일부 코드를 생성하기 위해 실행해야하는 몇 가지 명령을 표시합니다.

       <aside> 💡 시스템에 플러터가 설치되어 있는지 확인하세요. 플러터를 다운로드하는 방법은 여기를 참조하세요.

       </aside>

       

       Download Code

    4. Download APK (Paid Feature)

       앱의 릴리스 빌드를 생성하려면 APK 다운로드 버튼을 사용할 수 있습니다. 빌드 프로세스가 완료되면 .apk 파일이 자동으로 다운로드됩니다. 빌드 프로세스가 시작되면 다음 창이 표시됩니다:

       

       Download APK

       APK는 모든 Android 기기에서 앱을 쉽게 테스트하는 데 사용할 수 있습니다.

       <aside> 💡 FlutterFlow에서 APK를 다운로드하기 전에 팝업을 허용했는지 확인하세요. 팝업을 허용하는 방법은 여기에서 볼 수 있습니다.

       </aside>

11. Share project

    프로젝트를 공개하여 다른 사용자가 프로젝트를 볼 수 있고 복제할 수 있습니다. 프로젝트를 공유하기 전에 민감한 정보가 제거되었는지 확인해주세요.

    

    <aside> 💡 팁:

    • 당신이 소유한 프로젝트만 공유할 수 있습니다.
    • 공유 기능을 사용하여 마켓플레이스 항목을 만들 수 있습니다. 여기에서 더 자세한 정보를 확인할 수 있습니다. </aside>

12. Preview

    가상 장치에서 앱을 빌드 기다리지 않고 빠르게 시험해보려면 미리보기 모드를 사용할 수 있습니다. 이는 앱에 추가한 탐색 및 애니메이션에 대한 좋은 개요를 얻는 데 도움이 됩니다. 또한 다크/라이트 모드에서 앱을 미리보고 다양한 모바일, 태블릿 및 데스크톱 장치에서 시각화할 수 있습니다.

    <aside> 💡 이 모드에는 몇 가지 제한 사항이 있습니다. Preview 모드에서 Firebase를 사용하거나 API 호출을 수행할 수 없습니다. 그러나 onDoubleTap, onLongPress 및 onSubmit은 이 모드에서 작동합니다.

    Preview mode에서는 지원되지 않는 기능 목록이 알려진 문제 메뉴에 표시됩니다.

    </aside>

    

    Preview mode

13. Testing

    이 메뉴를 사용하면 프로젝트의 테스트 모드 또는 실행 모드 인스턴스를 만들 수 있습니다.

    1. Test Mode
    2. Run Mode