핵심 프로토콜 구조

시스템 통신을 위한 다층 구조 설계

// 저코드 플랫폼 프로토콜 스택
interface LowCodeProtocolStack {
  // 1. 네트워크 계층
  network: NetworkProtocol;
  // 2. 데이터 표현 규약
  dataModel: DataModelProtocol;
  // 3. UI 구성 요소 정의
  uiComponent: UIComponentProtocol;
  // 4. 동작 처리 규칙
  actionProcessing: ActionProcessingProtocol;
  // 5. 협업 메커니즘
  collaborationMechanism: CollaborationProtocol;
}

네트워크 통신 설계

차등 업데이트 프로토콜

// 차등 업데이트 메시지 형식
interface DeltaMessage {
  version: string;           // 프로토콜 버전
  type: 'full' | 'delta';    // 전체/차등
  timestamp: number;         // 타임스탬프
  sessionID: string;         // 세션 식별자
  operations: Operation[];   // 변경 내역
}

// 작업 유형 정의
interface Operation {
  id: string;                // 작업 식별자
  type: 'create' | 'modify' | 'remove' | 'reposition';
  path: string;              // JSON 경로
  oldValue?: any;            // 이전 값
  newValue?: any;            // 새 값
  affectedComponents?: string[]; // 영향받는 컴포넌트
}

// 웹소켓 메시지 형식
interface WSMessage {
  messageType: string;               // 메시지 유형
  sequence: number;                  // 순번
  payload: any;                      // 데이터 본문
  metadata: {
    userID: string;
    pageID: string;
    version: number;
  };
}

// 메시지 유형 열거형
enum WSMessageType {
  SYNC_DATA = 'sync_data',        // 데이터 동기화
  OPERATION = 'operation',           // 작업
  BROADCAST = 'broadcast',           // 브로드캐스트
  LOCK = 'lock',                     // 잠금
  SNAPSHOT = 'snapshot'              // 스냅샷
}

이진 전송 프로토콜

// Protocol Buffers 정의
syntax = "proto3";

package lowcode;

// 차등 업데이트 메시지
message DeltaMessage {
  string version = 1;
  int64 timestamp = 2;
  string session_id = 3;
  repeated Operation operations = 4;
}

message Operation {
  string id = 1;
  OperationType type = 2;
  string path = 3;
  bytes old_value = 4;  // 이진 데이터 저장
  bytes new_value = 5;
  repeated string components = 6;
}

enum OperationType {
  CREATE = 0;
  MODIFY = 1;
  REMOVE = 2;
  REPOSITION = 3;
}

// 이진 데이터 모델
message BinaryDataModel {
  map components = 1;
  map data_sources = 2;
  repeated Event events = 3;
  Layout layout = 4;
}

message Component {
  string id = 1;
  string type = 2;
  bytes properties = 3;  // 직렬화된 속성
  repeated Component children = 4;
}

데이터 표현 규약

기본 데이터 모델

{
  "$schema": "https://lowcode.dev/schema/v1.json",
  "version": "1.0.0",
  "metadata": {
    "name": "사용자 관리 페이지",
    "description": "사용자 목록 및 조작 인터페이스",
    "author": "developer@company.com",
    "createdAt": "2024-01-01T00:00:00Z",
    "updatedAt": "2024-01-01T00:00:00Z"
  },
  "dataModel": {
    "definitions": {
      "User": {
        "type": "object",
        "properties": {
          "id": { "type": "string" },
          "name": { "type": "string" },
          "email": { "type": "string" },
          "status": { "type": "string", "enum": ["active", "inactive"] }
        }
      }
    }
  },
  "pageModel": {
    "layout": {
      "type": "grid",
      "columns": 24,
      "gutter": 8
    },
    "components": [
      {
        "id": "user_table",
        "type": "Table",
        "version": "1.0.0",
        "binding": {
          "data": "{{dataSource.userList}}",
          "pagination": "{{pagination}}"
        },
        "constraints": {
          "minWidth": 6,
          "maxWidth": 24,
          "resizable": true,
          "draggable": true
        }
      }
    ]
  }
}

UI 구성 요소 정의

요소 메타데이터

component:
  name: "DataTable"
  version: "1.2.0"
  category: "data"
  description: "데이터 표 보여주는 컴포넌트"
  
  # 기능 선언
  capabilities:
    - "정렬 가능"
    - "필터링 가능" 
    - "페이지 분할"
    - "선택 가능"
  
  # 속성 정의
  props:
    - name: "dataSource"
      type: "DataSource"
      required: true
      description: "데이터 소스 설정"
    
    - name: "columns"
      type: "Column[]"
      required: true
      schema:
        type: "array"
        items:
          type: "object"
          properties:
            title: { type: "string" }
            dataIndex: { type: "string" }
            width: { type: "number" }
  
  # 이벤트 정의
  events:
    - name: "rowClick"
      payload:
        rowData: "object"
        rowIndex: "number"
    
    - name: "selectionChange"
      payload:
        selectedRows: "object[]"
  
  # 메서드 정의
  methods:
    - name: "reload"
      description: "데이터 재로딩"
    
    - name: "setPagination"
      parameters:
        page: "number"
        pageSize: "number"
  
  # 스타일 정의
  styles:
    cssVariables:
      - "--table-header-bg"
      - "--table-row-hover-bg"
    
    className: "lowcode-data-table"
  
  # 의존성
  dependencies:
    - "axios@^1.0.0"
    - "lodash@^4.0.0"
  
  # 호환성
  compatibility:
    frameworks:
      - "vue@^3.0.0"
      - "react@^18.0.0"
    platforms:
      - "web"
      - "mobile"