• 이 프로젝트는 인하대학교 종합설계(캡스톤) 프로젝트를 통해 만든 노코드를 통한 유저들이 간단한 UI배치만으로도 모바일에서 동작 가능한 콘텐츠를 제작 할 수 있는 플랫폼 입니다.

배포 완료

https://boya.run.goorm.site/

차현규 : 웹, 앱 애플리케이션

이상민 : API 서버 개발, 크롤러 개발

이재원 : API 서버 개발, 서버 관리 및 구축

간단한 동작 예시

10분만에 계산기 앱 만드는 예시

• 모바일 환경에서 각 사용자에게 필요한 기능들의 요구사항은 증가하는 반면에 실제로 출시되는 애플리케이션들은 상용성이 없다면 만들지 않는다. 하지만 정말로 간단한 기능들이 필요한 사용자들은 이를 구현할 기술이 없고 개발자들이 구현해 주기를 기다려야만 한다. 하지만 BYOA를 통해 전문지식이 없는 비개발자들도 노코드를 통해 간단한 UI배치 만으로도 간단하게 자신만의 기능을 만들 수 있다. 또한 각 사용자들이 만든 모든 앱화면은 공유되기에 굳이 자신이 만들지 않아도 타인이 만든 기능을 사용할 수 있다.

1. 웹사이트에 접속한 후 제공되는 템플릿을 통해 UI를 배치한다.
2. 두번째 화면에서 그림판 툴을 이용해 배치한 위젯들에 대한 기능 설명을 적는다.
3. 모바일 화면에 보여줄 [타이틀, 배너이미지, 서브타이틀, 앱 설명, 카테고리]를 적는다.
4. 모바일 앱화면에서 자신이 만든 앱을 확인한다.

• 간단하게 개인이 원하는 앱 화면을 심플하게 디자인하여 즉각적으로 기능을 사용할 수 있다.
• 모든 데이터는 클라우드에 저장되기에 사용자들은 따로 저장에 관련해서 신경쓰지 않아도 된다.
• 기능을 추가할때는 [함수, 동작방식]을 생각할 필요 없이 간단한 텍스트 설명만으로 AI가 자동으로 추론하여 기능을 만들어 주기에 적은 시간으로 높은 수준의 기능을 만들 수 있다.

• 웹 애플리케이션 개발

  • 로그인 및 회원가입 기능

  • 모바일 화면을 꾸밀 수 있는 제공되는 템플릿 Layout 기능

    • BOX CONTAINER
      • 너비, 높이, 색상을 변경 할 수 있습니다.
    • Row-divider
      • 굵기, 색상, 너비
    • Col-divider
      • 굵기, 색상, 높이
    • Text
      • 텍스트 내용, 폰트 사이즈, 폰트 굵기, 색상
    • Image (네트워크 이미지)
      • 이미지 URL, 너비, 높이
    • Button
      • 버튼 텍스트, 너비, 높이, 그림자, 색상, 폰트 색상
    • Icon
      • 아이콘 변경, 사이즈, 색상
    • ListTile
      • 타이틀, 서브 타이틀, Leading text, Trailing text, 폰트 사이즈, 색상
    • Check box
    • TextField
    • RadioButton
  
  

  • 배치한 UI위에 그림을 그릴 수 있는 화면

    • 지우개
    • 선 그리기
    • 텍스트
    • 이미지 배치
    • 도형 배치 [Line, Arrow, Double Arrow, Rectangle, Oval]
  
  

  • 모바일 화면 등록 페이지

    • 타이틀
    • 배너 이미지 등록
    • 서브 타이틀
    • 설명
    • 카테고리

• 로그인 및 회원가입 기능
• 홈 화면
  • 각 사용자들이 만든 앱 화면 리스트들이 ListView형태로 나열 되도록 구현
• Drawer
  • 사용자 닉네임 / 카테고리 / 로그아웃
• 마이 페이지
  • 내가 만든 앱 리스트들을 확인 할 수 있음

### 구현에 사용한 Pakages

+ flutter_native_splash: ^2.3.2 // 앱 화면 스플래쉬 화면

+ flutter_colorpicker: ^1.0.3 // 앱내에 컬러를 설정하는 패키지

+ get: // 상태관리 패키지

+ cached_network_image: ^3.3.0 // 네트워크 이미지를 가져오는 패키지

+ flutter_iconpicker: ^3.2.4 // 아이콘을 선택하도록 도와주는 패키지

+ http: // 서버 통신 패키지 API 호출 등

+ fluttertoast: ^8.2.3 // 메세지를 편하게 출력하게 해주는 패키지

+ dio: ^4.0.0 // 서버 통신 패키지

+ http_parser: ^4.0.2 // 서버 통신 패키지

+ collection: ^1.15.0 // 기능 확장 패키지

+ phosphor_flutter: // 그림판 패키지

+ file_picker: // 파일 불러오기 패키지

• getx tag 기능

  • 각 템플릿을 화면에 배치하고나서 배치된 위젯을 클릭했을때 properties(상세 설정)을 하기 위해 각 클래스의 고유값을 넣어서 각각 관리를 해주어야 하는데 이를 tag값을 넣어서 관리를 하는 방식으로 구현 하였다.

• RepaintBoundary (웹 스크린샷)사용 Flutter 웹 같은 경우 아직 부족한 점이 많은지라 pub.dev에 많은 패키지가 올라와있지만 web관련 패키지는 이미 3년전에 업데이트가 되거나 지원이 되지 않는 경우가 많았다. 그래서 위 기능(기본 제공 기능)을 통해 스크린샷을 찍었다.

  이미지는 Dart의 이미지 포맷인 Uint8List로 저장이 되고 압축률이 생각보다 좋았던 것 같다. 그리고 이미지를 서버에 multipart/form-data 형태로 전송하는 방식으로 구현하였다. (Dio 패키지 사용)

• Dragable을 사용할때 드래그 할시 보여줄 이미지들은 외부 이미지를 사용하였는데 저작권 문제로 직접 손으로 그려서 assets에 적용하였다.

  •