Lucy Flutter Studio image

Lucy Flutter Studio

Lucy는 기획자, 디자이너, 개발자, AI가 실시간으로 협업하여 UI앱을 개발할 수 있는 UI/UX 스튜디오입니다

Lucy Services Parts

  • Studio
    • Responsive Design
    • Interaction Design
    • Motion Design
    • Vector Graphic
    • Cross-platform Dev
    • Native Code Generator
  • Data Stream
    • Data Structure Design
    • Data Stream Design
    • Stream to Component
  • Team Cloud
    • Real-time Collaboration
    • Cloud Workspace
    • Workspace History
    • Sync to #Slack
  • AI Assistor
    • Images to UI Design
    • Styling Assist
    • Data Design Assist
Responsive Design image

Responsive Design

Lucy Studio에는 Response UI Design을 지향하는 기능이 준비되어 있으며, Single Design으로 다양한 플랫폼에 대응할 수 있습니다

Size / Constraints / Position / Align / Flexible / Margin / Padding

Motion Design

Visual Component에 Gesture와 Motion을 설정하여 역동적인 Interactive Screen을 구현할 수 있습니다

Gesture
Gesture Image
  • Tap
  • Tap Down
  • Tap Up
  • Double Tap
  • Long Press
  • Fling
  • Pull
  • Drag
  • Pinch
  • Rotate
Motion
Motion Image
  • Move
  • Scale
  • Rotate
  • Opacity
  • Color
  • Shadow
  • Border
  • Radius
  • Scroll

Based on Flutter

Based on Flutter Image

Flutter는 Mobile, Web, Desktop, Embedded에서 single code로 Native App을 빌드할 수 있는 Google의 UI toolkit 입니다. Lucy Studio는 Flutter를 기반으로 작성되어 있으며, Flutter가 지향하는 UI 경험을 고스란히 담고 있습니다

  • Framework

    Dart

    • Material
    • Cupertino
    • Widgets
    • Rendering
    • Animation
    • Painting
    • Gestures
    • Foundation
  • Engine

    C/C++

    • Service Protocol
    • Composition
    • Platform Channels
    • Dart Isolate Setup
    • Rendering
    • System Events
    • Dart Runtime Mgmt
    • Frame Scheduling
    • Asset Resolution
    • Frame Pipelining
    • Text Layout
  • Embedder

    Platform-specific

    • Render Surface Setup
    • Native Plugins
    • App Packaging
    • Thread Setup
    • Event Loop Interop

Native Code Generator

Native Code Generator Image

Design 시점에서 생성된 Flutter Widget Code와 Code Generator로 작성된 Source는 동일한 코드로써, Design시점과 Run시점의 결과가 동일합니다

  • Studio Run Time
    • Stack Widget
    • Image Widget
    • Rich Text Widget
  • Design Time
    • Stack Objet
    • Stack Properties
    • Image Objet
    • Image Properties
    • Rich Text Objet
    • Rich Text Properties
  • Native Code Generator
    • Flutter Code Generator » Flutter Encoder Map
    • Flutter Encoder Map » Stack Encoder
    • Stack Encoder » Code Generator
    • Image Encoder » Code Generator
    • Rich Text Encoder » Code Generator
  • Text Code
    • Stack Widget Code
    • Image Widget Code
    • Rich Text Widget Code

Cross-Platform

Cross Platform image

Studio에서 반응형으로 디자인되어진 결과물은 Desktop, Phone, Tablet, Watch 등의 다양한 형태의 기기에서 추가적인 작업없이 최적의 상태로 작동합니다.
디자인결과물을 순수한 Flutter Native Code로 변환하여 Single-code로 다양한 OS에 배포할 수 있습니다.

Compatible Operating System
  • Android
  • iOS
  • Windows
  • macOS
  • Linux
  • Fuchsia

Stream to Component

Stream to Component image

Query를 Component에 연결하여 Query와 상호작용이 가능합니다. 이는 Trigger 발생시 Component의 Value가 Query로 Query의 응답은 Component로 전달됨을 의미합니다.

RestAPI를 Design 할 수 있습니다. RestAPI를 쉽게 구성하고 Component 에 연결 할 수 있으며 Project에서 공유되어 자산을 효율적으로 관리할 수 있습니다

Real Time Collaboration

Real Time Collaboration image

전체 팀이 한곳에서 함께 작업 할 수 있고 편집 가능한 참여자들을 지정하여 접근 통제가 가능합니다.

Feedback시점에서 메모를 빠르게 만들고 토론하고 저장하며 변동사항이나 메모를 #Slack과 연동하여 협업진행사항을 공유합니다

Turn Images to UI Design

Turn Images to UI Design image

CNN, LSTM 방법으로 Image의 구성 요소를 분석할 수 있습니다. Cloud를 통해 지속적으로 학습 정보를 수집하고 축적된 학습경험을 토대로 사용자의 UI Design 작업을 보조합니다

  • 1. Image로부터 Asset 추출
  • 2. Image로부터 Component 후보군 추출
  • 3. 추출된 Component에 Interactive 요소 추천

Difference from others

Difference from others image

Query를 Component에 연결하여 Query와 상호작용이 가능합니다. 이는 Trigger 발생시 Component의 Value가 Query로, Query의 응답은 Component로 전달됨을 의미합니다

RestAPI를 Design 할 수 있습니다.
RestAPI를 쉽게 구성하고 Component에 연결 할 수 있으며 Project에서 공유되어 자산을 효율적으로 관리할 수 있습니다

Ripple effect

Ripple Effect image

UI App 개발에서 큰 비중을 차지하는 곳은 화면 개발, Business Logic 개발 입니다.
Device(Smart Phone, Tablet, Watch), 운영 체제(Android, iOS, macOS, Windows), Browser (Edge, Chrome, Firefox)와 같은 UI App이 실행되는 Platform이 지속적으로 다변화 되면서 화면 개발의 비중은 점차 늘어가고 있습니다. 화면 개발의 비중에 의존적인 Business Logic 개발의 비중도 늘어가고 있습니다.

디자인된 source를 화면 개발 code로 변환하는 과정을 자동화하고 Single-Code로 단순화 하면 UI App 개발에 필요로 하는 전체 Workflow의 분량과 기간을 획기적으로 단축할 수 있습니다.

Lucy Studio는 UI Design을 할 수 있는 Tool 입니다. Design 산출물을 Single-Code의 Native Source로 변환할 수 있으며, 협업에 필요한 기능과 AI의 적극적인 보조를 지원합니다. UI App 개발의 Workflow 분량과 기간을 단축할 수 있으며, 이는 UI App의 질적 향상을 기대할 수 있습니다.