Tired of GUI builders? I made a code-first alternative to Retool

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

백엔드 개발자, GUI 빌더 사용 시 불편함을 겪는 개발자

핵심 요약

• Sourcetool은 백엔드 코드에서 직접 UI를 정의할 수 있는 코드 중심 접근 방식을 제공
• WebSocket 기반 실시간 통신으로 백엔드와 프론트엔드를 연결
• Git-Friendly, 타입 안전, AI와의 시너지를 통한 개발 효율성 극대화

섹션별 세부 요약

1. GUI 빌더의 한계

• 컴포넌트 이동 시 연결 오류 발생
• Pull Request 리뷰 시 변경 사항 확인 어려움
• 새로운 팀원 교육 시간 소요
• AI 도구가 GUI 기반 설정을 지원하지 않음

2. Sourcetool의 접근 방식

• Go 언어 기반으로 UI 정의 가능 (예: ui.Markdown("## Users"))
• 별도 프론트엔드 코드, 레포지토리, 빌드 설정 필요 없음
• 백엔드와 프론트엔드 코드 통합

3. 아키텍처 구성

• 백엔드 서버: Go 코드 실행
• Sourcetool 서버: 인증 처리 및 WebSocket 브릿지 역할
• 유저 브라우저: UI 렌더링
• WebSocket을 통해 사용자 인터랙션 실시간 처리

4. AI 통합 사례

• AI 도구가 직접 폼 생성, 검증 추가, 분석 대시보드 생성 가능
• 코드 기반으로 AI 가이드 없이 작업 가능

5. 주요 이점

• Git-Friendly: 변경 이력 추적 가능
• 타입 안전: 컴파일 시 오류 검출
• IDE, 리뷰 워크플로우 활용: 기존 도구와 호환
• AI-Friendly: AI 도구와 직접 협업 가능

6. 지원 기술 스택

• Go (TypeScript, Python SDK 개발 중)
• Apache 2.0 라이선스로 오픈소스 제공 (자체 호스팅 가능)

7. 예제 코드 (폼 생성)

func createUserPage(ui sourcetool.UIBuilder) error {
    formUI, submitted := ui.Form("Create", form.WithClearOnSubmit(true))
    name := formUI.TextInput("Name", textinput.WithRequired(true))
    email := formUI.TextInput("Email", textinput.WithRequired(true))
    if submitted {
        _ = createUser(name, email)
        return nil
    }
}

결론

Sourcetool은 GUI 빌더 대신 코드 중심의 UI 개발을 통해 백엔드 개발자에게 실시간 UI, Git 통합, AI 협업 가능성을 제공합니다. Go 기반으로 오픈소스이며, 자체 호스팅이 가능합니다.