FlutterFlow 프로젝트에 화면을 추가하는 방법을 단계별로 배워보세요 - 로그인부터 프로젝트 선택, 새로운 화면 디자인까지.
Book a call with an Expert
Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.
1단계: FlutterFlow에 로그인
처음으로 Google Chrome, Mozilla Firefox, Safari 등의 웹 브라우저를 통해 FlutterFlow 웹사이트로 이동해야 합니다. 웹사이트 URL은 https://flutterflow.io/
입니다.
사이트에 들어가면 웹 페이지의 오른쪽 상단에 주로 위치한 '로그인' 버튼을 찾아 클릭합니다. 등록된 이메일 주소와 비밀번호를 입력해 로그인해야 할 수도 있습니다.
새로운 사용자라면 '회원 가입' 버튼을 클릭하여 필요한 정보를 제공해 계정을 생성할 수 있습니다.
2단계: 프로젝트 선택
로그인하면 이전에 진행했던 프로젝트와 현재 진행 중인 프로젝트를 모두 볼 수 있는 대시보드로 리디렉션됩니다. 대시보드에는 각 프로젝트와 그 프로젝트의 속성이 모두 표시됩니다.
프로젝트에 화면을 추가하려면 작업하려는 프로젝트를 선택하면 됩니다. 프로젝트 제목이나 프로젝트와 관련된 카드를 클릭하면 선택할 수 있습니다.
3단계: 디자인 인터페이스 열기
원하는 프로젝트를 선택한 후에는 프로젝트를 개발하거나 수정할 수 있는 여러 옵션이 있는 FlutterFlow의 주요 인터페이스가 표시됩니다.
화면의 왼쪽에 위치한 주요 탐색 패널에서 '디자인' 옵션을 찾아 클릭합니다.
4단계: 새 화면 추가
디자인 인터페이스 내에서는 선택한 프로젝트의 모든 현재 화면을 볼 수 있습니다. 다양한 화면 카드에서 각각의 역할을 나타낼 수 있습니다(예: 홈 스크린, 스플래시 화면 등).
새 화면을 추가하려면 '새로 추가' 또는 '+' 버튼을 찾습니다. 이 버튼은 일반적으로 현재 화면 목록의 상단 또는 하단에 위치해 있습니다.
5단계: 화면 레이아웃 선택
'새로 추가' 또는 '+' 버튼을 클릭하면 화면에 대한 레이아웃을 선택하라는 메시지가 표시됩니다. 레이아웃은 화면의 기본 구조를 설명하며, 화면 디자인을 시작하는 초기 설정을 제공합니다.
FlutterFlow는 'Blank', 'Tabbed Navigation', 'Top Navigation' 등의 다양한 미리 설정된 레이아웃을 선택할 수 있습니다. 화면의 기능에 맞는 레이아웃을 선택하고 클릭하십시오.
6단계: 화면에 이름 붙이기
레이아웃을 선택한 후에는 새로 만든 화면에 이름을 붙여야 합니다. 이름을 입력할 수 있는 팝업 상자가 나타납니다. 화면이 프로젝트에서 어떤 역할을 하는지를 나타내는 이름을 붙이세요.
이름을 붙였다면, 팝업 상자에서 '화면 생성' 또는 '확인' 버튼을 클릭합니다.
7단계: 화면 디자인 시작
이 단계들을 성공적으로 완료한 후, 화면이 추가되며 화면에서 작업을 시작할 수 있는 페이지로 리디렉션됩니다. 이제 FlutterFlow가 제공하는 다양한 디자인 도구와 옵션을 사용하여 화면을 디자인할 수 있습니다.
항상 같은 단계를 수행하여 추가 화면을 추가할 수 있으며, 상단의 '스크린' 드롭다운 메뉴를 통해 화면 간 전환을 할 수 있습니다.
Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.
Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.
Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.