코드 짜기 전에,
앱의 화면과 흐름을 먼저 그리세요
화면마다 버튼과 요소를 직접 배치하고, 버튼을 다음 화면과 선으로 연결하세요. 재생 모드로 실제 앱처럼 눌러보며 흐름을 검증할 수 있습니다. 실제 앱들의 화면 템플릿·컴포넌트·기능 목록을 골라 쓰면 더 빠릅니다.
체험 모드는 브라우저에만 임시 저장됩니다. 가입하면 서버에 자동 저장돼요.
위 화면들은 모두 FlowKit 라이브러리의 실제 템플릿을 그대로 축소한 것입니다. 체험 모드에서 바로 편집해 볼 수 있어요.
3단계로 끝나는 화면 설계
화면을 만든다
템플릿에서 고르거나 빈 화면에 요소를 배치합니다. 폰 프레임 안에서 드래그·리사이즈·색상·텍스트를 바로 편집해요.
버튼을 다음 화면과 잇는다
요소 옆 파란 점을 다른 화면으로 끌어다 놓으면 화살표가 생깁니다. 인스펙터에서 '누르면 이동할 화면'을 골라도 됩니다.
재생해서 확인한다
재생 버튼을 누르면 시작 화면부터 실제 앱처럼 눌러볼 수 있어요. 흐름이 끊긴 곳은 클릭 영역 표시로 바로 찾습니다.
화면을 직접 배치
폰 프레임 위에 버튼·텍스트·입력창·리스트·탭바 등 30여 종의 요소를 드래그로 놓고 크기·색상·텍스트를 조절합니다.
버튼 → 다음 화면 연결
요소 옆 점을 다른 화면으로 끌어다 놓으면 실선(화살표)으로 이어집니다. 뒤로 가기 연결도 지원.
재생 모드
시작 화면부터 실제 앱처럼 눌러보세요. 클릭 가능한 영역 표시, 뒤로 가기, 이동 경로(브레드크럼)를 제공합니다.
실전 앱 라이브러리
화면 템플릿 33종, UI 컴포넌트 54종, 기능 목록 58종. 참고 앱과 구현 힌트까지 함께 제공합니다.
세상의 앱들을 참고한 기술 리스트
토스·쿠팡·카카오톡·인스타그램·배달의민족 등에서 공통적으로 쓰이는 화면 구성과 기능을 골라 넣으세요.
화면 템플릿 33종
더 있어요
UI 컴포넌트 54종
- 주요 버튼 (Primary)
- 보조 버튼 (Outline)
- 버튼 2개 (취소/확인)
- 카카오 로그인 버튼
- 네이버 로그인 버튼
- Google 로그인 버튼
- Apple 로그인 버튼
- 아이콘 버튼 (텍스트)
- 플로팅 버튼 (FAB)
- 하단 고정 구매 바
- 라벨 + 입력창
- 비밀번호 입력창
- 검색 바
- 인증번호 6칸
- +40
앱 기능 58종
- 소셜 로그인
- 이메일 로그인/가입
- 휴대폰 본인인증 (OTP)
- 생체 인증 (Face ID / 지문)
- PIN/패턴 잠금
- 프로필 편집
- 회원 탈퇴
- 푸시 알림
- 인앱 알림함
- 실시간 채팅 (1:1/그룹)
- 댓글 / 대댓글
- 공유하기
- 이메일/SMS 발송
- 인앱 결제 (PG)
- +44
자동 저장, 어디서나 이어서
가입하면 프로젝트가 서버에 자동 저장됩니다. 프로젝트별로 여러 앱을 관리하고 복제·이름 변경도 간단합니다.
무료로 시작하기