서문 - 앱들이 새로운 기능을 계속 출시하면서도, 적어도 개인적으로는 전혀 사용하지 않는 디자인과 레이아웃 변경을 너무 자주 도입한다는 점에 좌절감을 느꼈습니다.

그래서 저는 기존의 기능은 전혀 변경하지 않으면서 기존 UI를 편집 가능하게 만들어 이 문제를 해결하면 어떨까 생각했습니다.

그렇게 Symbiotic-UI가 탄생했습니다.

그렇다면, Symbiotic-UI란 무엇인가요?

Symbiotic-UI는 최종 사용자가 애플리케이션의 외관과 느낌을 커스텀할 수 있게 해주는 UI 프레임워크입니다 (현재 Expo만 지원).

사용자는 자신이 원하는 변경 사항을 자연어 (Natural Language)로 설명하기만 하면 됩니다. LLM (대규모 언어 모델)이 요청을 분석하여 수행해야 할 UI 작업 (UI operations)을 생성합니다. 그러면 런타임 UI 변이 엔진 (Runtime UI mutation engine)이 해당 작업들을 적용하고 인터페이스를 즉시 업데이트합니다.

전체 데모 보기 - LinkedIn | X (Twitter)

어떻게 이것을 구현했나요?

현재 지원되는 작업

• 숨기기 및 보이기 (HIDE & SHOW) : 컴포넌트의 가시성 (Visibility)을 변경합니다.

• 스타일링 (STYLE) : 배경색, 텍스트 색상, 테두리, 간격(Spacing), 배치(Positioning)와 같이 지원되는 디자인 토큰 (Design tokens)을 사용하여 선택된 UI 요소의 외관을 업데이트합니다.

• 순서 변경 (REORDER) : 레이아웃 내에서 UI 요소의 위치를 이동합니다. Flexbox와 함께 사용할 때 특히 효과적입니다.

사용 방법

저는 개발자 경험 (Developer Experience)이 그대로 유지되도록 신경을 썼습니다. (AI의 세계에서 이 말이 구식처럼 들릴 수 있다는 것을 알지만, 저는 여전히 이를 중요하게 생각합니다.)

개발자는 편집 가능하게 만들고 싶은 레이아웃이나 JSX를 단순히 <SymbioticUI />로 감싸기만 하면 됩니다.

그런 다음, LLM이 각 섹션이 무엇을 나타내는지(예: header, footer, 또는 profile-btn) 이해할 수 있도록 **sym-name (컴포넌트 이름)**과 **버튼, 이미지 또는 컨테이너와 같은 요소에 대한 의미론적 sym-id (semantic sym-ids)**를 제공합니다.

그러면 LLM은 "프로필 버튼을 왼쪽으로 옮겨줘." 와 같은 사용자 프롬프트를 파싱(parse)합니다.

그리고 JSON Operations 객체를 반환합니다.

개발자는 useSymbiotic() 훅을 사용하여 다음 두 가지 작업을 수행할 수 있습니다:

• addOperations() : UI를 업데이트하고 작업을 로컬 스토리지(local storage)에 저장합니다.

• resetOperations(): 저장된 모든 작업을 지우고 원래 UI로 복구합니다.

현재의 장애물

Symbiotic-UI는 현재 GitHub에 프로젝트 내 프레임워크 (in-project framework) 형태로 존재합니다. npm 패키지로 출시할 계획이지만, 그전에 여러분의 피드백과 제안을 정말 감사히 받겠습니다.

제가 여전히 해결하려고 노력 중인 몇 가지 과제는 다음과 같습니다:

• LLM 환각 (hallucinations)
• React 상태 관리 (state management) 및 UI 하이드레이션 (hydration)의 예외 케이스

기술 스택 (Tech Stack)

• Expo React Native
• TypeScript
• Tailwind (NativeWind)
• OpenAI
• Express.js

GitHub: SymbioticUI (아이디어가 마음에 드셨다면 ⭐를 눌러주세요)

왜 이름이 Symbiotic-UI냐고요?

이 이름은 **마블의 베놈 심비오트 (Marvel's Venom Symbiote)**에서 영감을 받았습니다. 끊임없이 적응하고 형태를 바꾸는 유동적이고 역동적인 존재 말이죠.

저는 UI도 똑같이 동작하기를 원했습니다.

이 아이디어와 프로젝트에 대한 여러분의 생각을 매우 소중히 듣겠습니다.

바보 같다고 말해도 괜찮습니다 — 저는 진심으로 솔직한 피드백을 원합니다.

저와 연결하기: LinkedIn | Twitter/X