인터페이스를 확실히 넘겨주기 위해서 WYSIWYG 도구를 안티그래비티에서 만들고 있습니다.

그림으로 와이어프레임 넘기는데는 확실히 한계가 있기 때문에

각 컴포넌트의 위치 비주얼적인 값, 역할 설명을 같이 넘겨는데 중점을 두어 만들고 있습니다.

요즘 AI들이 좋아하는건 xml도 아니고 json인거 같지만.. 둘다 내보내게 만들었습니다.

괄호가 적으니 json이 확실히 눈에 보기 좋더라구요.

{
  "canvas": {
    "width": 800,
    "height": 600,
    "flexible": false,
    "title": "New Design"
  },
  "elements": [
    {
      "id": "elem_1",
      "type": "tab",
      "name": "tab_1",
      "description": "",
      "x": 423,
      "y": 107,
      "width": 356,
      "height": 425,
      "properties": {
        "style": "default"
      }
    },
    {
      "id": "elem_2",
      "type": "section",
      "name": "section_2",
      "description": "",
      "x": 0,
      "y": 0,
      "width": 800,
      "height": 90,
      "properties": {
        "text": "섹션",
        "style": "default"
      }
    },
    {
      "id": "elem_3",
      "type": "section",
      "name": "section_3",
      "description": "",
      "x": 0,
      "y": 548,
      "width": 800,
      "height": 52,
      "properties": {
        "text": "섹션",
        "style": "default"
      }
    },
    {
      "id": "elem_4",
      "type": "table",
      "name": "table_4",
      "description": "",
      "x": 14,
      "y": 109,
      "width": 395,
      "height": 417,
      "properties": {
        "style": "default"
      }
    },
    {
      "id": "elem_5",
      "type": "label",
      "name": "label_5",
      "description": "",
      "x": 332,
      "y": 562,
      "width": 137,
      "height": 24,
      "properties": {
        "text": "(C) 뻘글주식회사",
        "style": "default"
      }
    },
    {
      "id": "elem_6",
      "type": "label",
      "name": "label_6",
      "description": "",
      "x": 14,
      "y": 23,
      "width": 130,
      "height": 44,
      "properties": {
        "text": "뻘글DB:",
        "style": "default"
      }
    },
    {
      "id": "elem_7",
      "type": "dropdown",
      "name": "db_bbulgul_dropdown",
      "description": "DB에서 뻘글 테이블을 표시 및 선택",
      "x": 149,
      "y": 27,
      "width": 150,
      "height": 36,
      "properties": {
        "text": "선택하세요",
        "style": "default"
      }
    },
    {
      "id": "elem_8",
      "type": "switch",
      "name": "switch_8",
      "description": "토글시 라이트모드 테마",
      "x": 651,
      "y": 12,
      "width": 128,
      "height": 30,
      "properties": {
        "text": "라이트모드",
        "style": "default"
      }
    }
  ]
}
​​

아직은 다듬을 부분이 많지만...

완성하고 나면 이제 정말 간단히 앱을 만들 수 있겠군요 ㄷㄷ

컴포넌트마다 설명달아 넘기고, 대략적인 앱 기능을 말하면 말입니다.

오늘도 GO Wails 와 함께 HTML의 아버님 팀 버너스리 님을 예찬하며~ 글을 마치겠습니다.