XMLUI, 웹 개발의 새로운 패러다임: 시각적 컴포넌트로 쉽게 앱 제작 가능

XMLUI 소개 1990년대 중반에는 전문 코더가 아니더라도 유용한 소프트웨어를 만들 수 있었다. Visual Basic과 다양한 컴포넌트 생태계가 있었기 때문에 비전문 개발자들도 이 컴포넌트들을 연결해 앱을 만들 수 있었다. 그러나 웹 컴포넌트는 Visual Basic 시절과 같은 접근성을 제공하지 않았다. 오늘 소개하는 프로젝트인 XMLUI는 현대의 웹과 React 기반 컴포넌트 생태계에 Visual Basic 모델을 적용한다. XMLUI는 React와 CSS를 감싸고 XML 마크업으로 컴포넌트를 조합할 수 있는 일련의 컴포넌트를 제공한다. 아래는 런던 지하철 노선 상태를 확인하는 간단한 앱 예시이다. ```xml ``` 이 코드는 12줄의 XML로 구성되어 있으며, React나 CSS에 대한 지식 없이도 반응형이고 테마화된 깨끗한, 현대적인 컴포넌트 기반 앱을 만들 수 있다. 이는 코드의 가독성과 유지보수성을 크게 높여준다. 컴포넌트 저의 가장 많이 인용된 BYTE 기사인 1994년 커버 스토리 "Componentware"는 전문 개발자가 만든 컴포넌트들이 비즈니스 개발자들에게 널리 사용되는 것을 다루었다. Visual Basic은 차트, 네트워크 통신, 데이터 접근, 오디오/비디오 재생, 이미지 스캔/편집 등 다양한 컴포넌트를 제공했으며, UI 컨트롤도 버튼, 대화상자, 슬라이더, 그리드, 텍스트 에디터, 트리 및 리스트, 탭 뷰 등을 포함했다. 이러한 컴포넌트들은 포인트-오브-세일 시스템, 스케줄링 및 프로젝트 관리 도구, 의료 및 법률 실무 관리 시스템, 판매 및 재고 보고서 등을 만드는 데 사용되었다. 웹 생태계에서는 이러한 컴포넌트 생산자와 소비자의 관계가 이어지지 않았다. 현재 웹 컴포넌트의 주요 플레이어는 React이며, React 컴포넌트를 만들거나 사용하려면 전문 코더가 필요하다. XMLUI는 React 컴포넌트를 감싸 thereby, 비전문 개발자들도 이를 사용할 수 있게 한다. 사용자 정의 컴포넌트 XMLUI는 모든 종류의 상호작용 컴포넌트와 백엔드 컴포넌트를 포함하며, 쉽게 사용자 정의 컴포넌트를 만들 수 있다. 아래는 TubeStops 컴포넌트의 마크업 예시이다. ```xml {$props.line} ``` 이 컴포넌트를 두 번 사용하여 옆으로 배치할 수도 있다. xml <HStack> <Stack width="50%"> <TubeStops line="victoria" /> </Stack> <Stack width="50%"> <TubeStops line="waterloo-city" /> </Stack> </HStack> XMLUI 마크업은 짧은 경우에도 쉽게 읽고 유지보수할 수 있지만, 코드가 길어지면 관리하기 어려워진다. 그러나 컴포넌트가 너무 큰 경우 리팩토링하면 해결된다. 이 과정은 비용이 들지만, LLM 조수들의 도움으로 유동적이고 지속적으로 할 수 있다. 반응성 React 개발자가 아니라면 XMLUI 스타일의 반응성이 도전적일 수 있다. 위의 앱 예시에서 Select 컴포넌트는 id="lines" 속성을 선언하여 lines를 반응형 변수로 만든다. DataSource의 url 속성은 lines.value를 참조하여 선택이 변경되면 새로운 데이터를 가져온다. Table의 data 속성은 tubeStations (DataSource)를 참조하므로 자동으로 새로운 데이터를 표시한다. 이 패턴은 '반응형 데이터 바인딩'으로 알려져 있으며, 스프레드시트에서 한 셀의 변경이 다른 셀에 전파되는 것과 유사하다. 테마 XMLUI 팀이 처음 테마 시스템을 보여줬을 때 저는 큰 관심을 가지지 않았다. 디자이너가 아닌 저는 색상 선택에 능숙하지 않으므로, 디폴트 테마가 제공되길 원했다. XMLUI는 CSS나 CSS 스타일 및 레이아웃 지시문 없이 모든 것이 보기 좋고 세련되게 동작하도록 설계되었다. 필요한 경우 인라인 스타일을 적용할 수 있지만 대부분의 경우 필요하지 않으며 사용해서도 안 된다. 각 컴포넌트는 텍스트 색상, 폰트, 배경색, 여백, 테두리, 패딩 등을 제어하는 테마 변수를 제공한다. 이 변수들은 전역적으로 또는 점점 더 세부적으로 작용할 수 있도록 명명 규칙을 따르며, XMLUI는 가장 구체적인 설정부터 가장 일반적인 설정까지 적용하여 버튼 등의 컴포넌트를 렌더링한다. 예를 들어, 기본 설정인 backgroundColor-Button-primary는 $color-primary-500로 정의되어 있다. 이는 UI의 중요한 역할을 하는 색상 범위의 중간값이다. 이러한 세マン틱 역할은 Surface, Primary, Secondary 등으로 구분되며, 각각 중립적인 배경 및 컨테이너, 중요한 요소와 액션을 강조, 시각적인 지원을 제공한다. 이 외에도 단일 중간값으로 완전한 팔레트를 생성할 수 있다. yaml name: Earthtone id: earthtone themeVars: color-primary: "hsl(30, 50%, 30%)" color-secondary: "hsl(120, 40%, 25%)" color-surface: "hsl(39, 43%, 97%)" 스크립팅 Visual Basic 개발자는 전문 코더가 아니더라도 몇 가지 스크립팅을 할 수 있어야 했다. XMLUI에서도 마찬가지이다. JavaScript 언어를 사용하여 TubeStops와 같이 간단한 스크립팅을 할 수 있다. xml <Fragment when="{$item.wifi === 'yes'}"></Fragment> TubeStops는 DataSource의 transformResult 속성을 사용하여 더 복잡한 코드를 실행한다. javascript function transformStops(stops) { return stops.map(stop => { const getProp = (key) => { const prop = stop.additionalProperties && stop.additionalProperties.find(p => p.key === key); return prop ? prop.value : ''; }; return { name: stop.commonName, zone: getProp('Zone'), wifi: getProp('WiFi'), toilets: getProp('Toilets'), lines: stop.lines ? stop.lines.map(line => line.name).join(', ') : '' }; }); } 이는 복잡하지만 로켓과학처럼 어렵지는 않다. LLM 조수의 도움으로 이런 코드를 작성할 수 있으므로, XMLUI는 비록 100% 선언적이지는 않지만, JavaScript 산업 복잡성에 대해 알거나 알고 싶어하지 않는 솔루션 빌더에게도 접근 가능하다. 모델 컨텍스트 프로토콜 (MCP) AI 시대에 LLM들이 React 앱을 작성해주는 것과 XMLUI를 사용하는 것 사이에 어떤 차이가 있을까? 이는 유효한 질문이다. Claude가 30초 만에 작성한 React 앱은 놀랍도록 완성도가 높았지만, 이 과정에서 저는 동등한 파트너로 참여하지 못했다. React의 useEffect, useContext 등에 대한 지식이 부족하여, 이러한 패턴을 사용하는 JavaScript 코드를 검토하거나 유지보수할 수 없었다. 이와 같은 불리함은 CSS에서도 나타난다. 그러나 XMLUI는 이를 해결하여 개발자가 LLM이 작성한 코드를 검토하고 유지보수할 수 있게 한다. MCP 서버는 LLM 조수들과 XMLUI 앱을 작업하면서 그들의 주의력을 방향성 있게 유도하는 데 도움을 준다. MCP는 LLM들이 다음과 같은 질문을 할 수 있도록 설계되었다. [X] 기능을 하는 컴포넌트가 있나요? [X]의 문서에서 [Y] 주제에 대해 무엇이라고 말하고 있나요? [X]는 소스 코드에서 어떻게 구현되었나요? [X]는 다른 앱에서 어떻게 사용되었나요? MCP 서버는 XMLUI 저장소, 개발 중인 XMLUI 앱 저장소, 그리고 XMLUI Invoice와 같은 참조 앱이 포함된 저장소와 함께 배치된다. 이는 LLM들이 자주 범하는 실수를 줄이는 데 도움이 된다. LLM와 협업 이런 구조는 대부분 예상보다 효과적이었다. 최상의 실천 방법과 패턴을 포함하는 앱 스위트를 구축하면서, 에이전트 협업이 개선되었다. 이는 LLM 조수들이 규칙을 기억하도록 지속적으로 상기시키는 것이 중요하다는 점에서 여전히 제약이 있지만, LLM 친화적인 문서가 새 입문자와 AI 조수들의 학습 곡선을 평평하게 만들 것이라는 기대가 있다. 컨텐츠 관리 XMLUI는 앱을 만드는 도구로 소개되지만, 사실 앱과 웹사이트의 경계는 모호하다. Vercel의 Next.js와 같은 프레임워크를 사용해 만든 웹사이트는 종종 앱과 같은 역할을 한다. XMLUI는 이런 웹사이트를 만드는 데도 React와 CSS 전문 개발자가 필요하지 않다. XMLUI는 앱과 문서가 동일한 물질로 만들어질 수 있도록 하는 좋은 시너지를 제공한다. 개발자는 앱 내부에서 실시간 데모를 문서에 포함시킬 수 있다. 확장성 XMLUI는 기본적으로 여러 React 컴포넌트를 감싸지만, 필요한 컴포넌트가 포함되지 않은 경우 어떻게 해야 할까? 이는 저의 이전 경험에서 많은 도전이었다. React 코드를 층층이 파고들었지만, 목표를 달성하지 못했다. XMLUI에서는 Tiptap 에디터를 포함하는 것이 주요 목표였는데, 이를 성공적으로 달성했다. 예제로 TableEditor를 살펴보면, Markdown으로 작성된 텍스트와 테이블을 편집할 수 있는 시각적 에디터를 XMLUI 컴포넌트로 활용할 수 있다. 배포 TableEditor의 최소 배포 구조는 다음과 같다. TableEditor ├── Main.xmlui ├── index.html └── xmlui └── 0.9.67.js index.html은 XMLUI의 최신 스탠드얼론 빌드를 소스로 지정한다. ```html ``` Main.xmlui는 다음과 같다. xml <App var.markdown=""> <Card> <TableEditor id="tableEditor" size="xs" onDidChange="{(e) => { markdown = e.markdown }}" /> </Card> <Card> <HStack> <Text variant="codefence" preserveLinebreaks="{true}"> { markdown } </Text> <SpaceFiller /> <Button icon="copy" variant="ghost" size="xs" onClick="navigator.clipboard.writeText(markdown)" /> </HStack> </Card> </App> 정적 웹서버를 사용하여 앱을 호스팅할 수 있으며, AWS 버킷에서도 실행할 수 있다. XMLUI Invoice와 같은 앱에는 localhost 전용 정적 서버와 sqlite, CORS 프록시를 포함한 테스트 서버를 제공한다. 필요한 경우 비슷한 기능을 XMLUI 앱에 추가할 수 있지만, 최소 배포는 매우 간단하다. 웹 개발의 민주화 XMLUI는 /n software의 창립자인 Gent Hito가 개념화했다. /n software의 미션은 네트워크 통신을 쉽게 만드는 것이고, CData의 미션은 데이터 접근을 쉽게 만드는 것이다. 이제 XMLUI는 UI를 쉽게 만드는 것을 목표로 한다. "우리는 백엔드 개발자입니다,"라고 Gent는 말한다. "간단한 비즈니스 UI를 만들 때 얼마나 어렵고 답답한지 놀랐습니다." Visual Basic 시절을 기억하는 사람들은 항상 그런 것은 아니었음을 안다. 그러나 웹 플랫폼은 UI를 만드는 솔루션 빌더들에게 친화적이지 않았다. 이는 전문가들이 복잡성을 이해하고 관리할 수 있는 전문 개발자의 게임이 되었다. 그러나 그렇게 될 필요는 없다. 일부 앱은 특별한 전문 지식이 필요할 수 있지만, 많은 앱들은 그렇지 않다. XMLUI를 통해 당신의 팀이 자체적으로 고객 인터페이스를 만드는 것이 가능해졌다. XMLUI는 저에게 이전에는 접근할 수 없었던 인터페이스를 만들 수 있는 재미있는 도구를 제공한다. 당신도 같은 경험을 할 수 있을까? 시도해보고 어떻게 진행되는지 알려주시기 바랍니다. 산업 내부자의 평가: XMLUI는 React와 CSS의 복잡성을 단순화하면서도 효율적인 UI 개발을 가능하게 하는 혁신적인 접근법을 제시한다. /n software와 CData의 경험이 결합되어, 비전문 개발자들이 쉽게 사용할 수 있는 강력한 도구로 발전했다. XMLUI는 웹 개발의 민주화를 통해 더 많은 사람들이 현대적인 앱을 만들 수 있게 하는 잠재력을 가진 프로젝트이다.