포트폴리오 목록으로 돌아가기

Featured Portfolio

노코드 앱 개발툴 - SuperBuild

Flutter 앱을 Flutter로 만드는 노코드 개발툴입니다. 오랫동안 앱 서비스를 만들어 온 경험으로 직접 시작한 자체 제품이었고, 5개월 동안 만들었지만 출시하지 못하고 종료했습니다.

앱을 만들 때마다 디자인을 하고, 그 디자인을 다시 코드로 옮기고, 기능을 붙이고, 운영을 위한 연동을 하는 반복이 있었습니다. 이미 눈에 보이게 만든 결과물을 코드로 한 번 더 만들어야 한다는 점을 문제로 보고, 툴에서 정형화된 디자인을 만들면 엔지니어는 데이터 연동만 하면 되는 구조를 목표로 삼았습니다.

2023/06/01자체제작Flutter노코드에디터

결과 화면

SuperBuild 에디터의 위젯 트리, 캔버스, 속성 패널 화면
왼쪽 위젯 트리, 가운데 캔버스, 오른쪽 속성 패널로 구성한 SuperBuild 에디터입니다.
패딩, 마진, 글자 스타일 등을 다루는 SuperBuild 속성 패널 디자인
패딩, 마진, 글자 스타일처럼 서로 얽힌 속성을 충돌 없이 다루기 위해 여러 번 다시 설계한 속성 패널입니다.

프로젝트 배경

앱을 만드는 과정에는 디자인, 디자인의 코드 재구현, 기능 구현, 운영 연동처럼 필수적이면서 반복되는 단계가 많습니다.

그중에서도 이미 시각적으로 완성된 화면을 코드로 다시 만드는 일이 가장 아깝다고 생각했습니다.

해결 방식

기능과 디자인 테마를 화면에서 눈으로 보면서 만들고, 보이는 앱을 그대로 빌드해 코드로 내보내는 것을 목표로 SuperBuild라는 이름을 붙이고 시작했습니다.

에디터, 위젯 트리, 속성 패널, 테마 에디터처럼 나뉘는 요소가 많았는데, 모두 Flutter로 만들었습니다. 웹, macOS 앱, Windows 앱으로 함께 쓸 수 있도록 멀티 플랫폼을 염두에 두고 진행했습니다.

가장 오래 걸린 것은 에디터였습니다. 여러 위젯 사이의 드래그와 편집 같은 상호작용, 기본 위젯과 커스텀 위젯의 속성을 다루고 실제로 화면에 표현하는 일은 설계와 프로토타입 단계부터 시간이 많이 들었습니다.

속성 패널은 패딩, 마진, 정렬, 글자 스타일처럼 수많은 속성이 서로 충돌하지 않도록 하나씩 디자인하고 구현해야 해서, 정말 많은 시간이 필요했습니다.

구축 범위

  • 위젯 트리와 캔버스 에디터
  • 위젯 속성 패널
  • 테마(디자인 시스템) 에디터
  • Flutter 기반 멀티 플랫폼 구조 (웹·macOS·Windows)

핵심 기술

FlutterDart

결과와 회고

실패한 이유는 분명합니다. 시장조사를 하지 않았습니다. 이런 툴과 고성능 처리에 대한 이해는 깊었지만, 시장에는 이미 노코드 바람이 크게 불고 있었고 엄청나게 많은 기능을 가진 서비스도 많았습니다.

차별화와 자금 조달을 생각하면 초기 아이템으로는 버겁다고 판단했고, 아쉽지만 프로젝트를 종료했습니다.

이 경험 이후로는 무엇을 만들지보다 누가 왜 쓰는지를 먼저 확인합니다. 고객 프로젝트에서 화면보다 업무 분석을 먼저 하는 방식도 여기서 왔습니다.