AppLess: 물어보면 화면이 즉석에서 생성되는 앱 없는 스마트폰 실험

AppLess 소개

스마트폰의 홈 화면은 설치한 앱 아이콘으로 가득합니다. 원하는 일을 하려면 먼저 맞는 앱을 찾아 열고, 그 앱의 메뉴 구조를 익혀야 합니다. AppLess는 이 전제를 뒤집습니다. 설치할 앱도, 배울 메뉴도, 아이콘으로 채워진 홈 화면도 없습니다. 앱을 열고 원하는 것을 말하면 그 화면이 즉석에서 생성됩니다. 날씨 대시보드, 실시간 검색이 붙은 맛집 목록, 예약 폼, 채팅 스레드가 요청하는 순간 만들어지고, 무언가를 누르면 다음 화면도 미리 생성돼 즉시 나타납니다.

AppLess는 생성형 UI 운영체제(generative UI operating system) 가 어떤 느낌일지 보여주기 위한 데모로, OpenUI 위에 전적으로 구축돼 있습니다. OpenUI는 LLM이 생성하는 인터페이스를 위한 오픈 표준입니다. 여기서 모델은 JSON이나 손으로 짠 화면을 돌려주지 않습니다. 대신 스트리밍에 최적화된 간결한 UI 언어인 openui-lang을 작성하고, OpenUI 렌더러가 이를 살아 있는 상호작용형 네이티브 컴포넌트로 바꿉니다.

만든 팀은 AppLess가 OpenUI 제작진이 생성형 UI의 한계를 밀어붙여 보려고 만든 실험이며, 뒤에 실제 연동은 없다고 분명히 밝히고 있습니다. 화면의 내용 은 모델이 생성하며, 선택적 웹·이미지 도구를 켜면 실제 데이터(실제 장소·가격·뉴스·사진) 에 근거할 수 있지만, 도구가 없으면 그럴듯한 허구입니다. 그리고 동작 은 언제나 시뮬레이션입니다. "주문 완료", "항공권 예약됨", "결제 전송됨" 같은 표시는 아직 아무것도 연결돼 있지 않아 실제 상태를 바꾸지 않습니다. 즉 AppLess는 생성형 UI 운영체제가 어떤 느낌일지 엿보게 하는 데모이지, 여러분의 앱을 대체하는 완성품이 아닙니다.

아래는 AppLess가 실제로 화면을 생성해 네이티브 UI로 렌더링하는 데모입니다.

AppLess가 사용자의 요청에 따라 네이티브 화면을 생성하는 데모 화면

AppLess의 동작 원리

AppLess의 핵심은 단 하나의 컴포넌트 계약(contract) 입니다. ui/contract.tsx 는 모델이 사용할 수 있는 모든 컴포넌트의 이름과 프로퍼티(props), 설명을 담은 단일 진실 공급원입니다. 이 계약이 시스템 프롬프트를 생성하므로, 모델은 앱이 렌더링할 수 있는 UI 어휘를 항상 정확히 알고 있습니다. 모델이 토큰을 스트리밍하는 동안 OpenUI 렌더러는 openui-lang을 점진적으로 파싱해, 응답이 끝나기도 전에 실제 네이티브 컴포넌트를 화면에 그려 나갑니다.

계약과 디자인 언어를 일부러 분리한 점도 중요합니다. 하나의 계약을 두 개의 디자인 시스템이 각각 구현하기 때문에, 동일하게 생성된 화면이 프롬프트를 전혀 바꾸지 않고도 iOS에서는 Cupertino, Android에서는 Material 3로 네이티브하게 렌더링됩니다. 행이나 칩, 버튼을 누르면 다음 화면이 스트리밍되며, 앱은 이동할 만한 목적지를 미리 가져와(prefetch) 내비게이션이 즉각적으로 느껴지게 합니다.

화면이 실제 사실(뉴스·가격·실제 장소) 을 필요로 할 때는 모델이 스트리밍 도중에 Exa 기반의 web_search 도구를 호출해 그 결과로 화면을 구성하고 출처를 함께 표기합니다. 이미지는 앱이 기기에서 해석하는 시맨틱 질의로 참조됩니다.

AppLess를 떠받치는 OpenUI 스택

AppLess 자체는 OpenUI 런타임 위에 얹힌 얇은 네이티브 껍데기이며, 무거운 일은 대부분 OpenUI 스택이 담당합니다.

패키지 역할
@openuidev/react-lang 스트리밍 openui-lang을 파싱해 교체 가능한 컴포넌트 라이브러리로 렌더링하는 OpenUI 런타임. 앱 전체의 핵심입니다.
@openuidev/cli 컴포넌트 계약으로부터 시스템 프롬프트를 생성합니다(npm run generate:prompt).
expo / react-native 네이티브 앱 런타임(Expo SDK 54, New Architecture).
react-native-svg 두 디자인 시스템이 공유하는 차트 지오메트리.
expo-secure-store 사용자 API 키의 온디바이스 저장(Keychain / Keystore).
zod 컴포넌트 계약의 프로퍼티 스키마.

화면 생성은 Cerebras 가, 실시간 검색은 Exa 가 담당하며 둘 다 사용자 키를 직접 넣는 방식(bring-your-own-key) 입니다.

AppLess 설치 및 사용법

저장소를 받아 의존성을 설치한 뒤 iOS 또는 Android로 실행합니다.

git clone https://github.com/thesysdev/appless.git
cd appless
npm install            # postinstall이 react-lang 패치를 적용
npm run ios            # 또는: npm run android, Expo Go는 npm start

첫 실행에서 앱은 무료 Cerebras API 키를 요청하고 이를 기기(Keychain / Keystore) 에 저장합니다. 생성은 휴대폰에서 모델로 곧장 이뤄지며, 배포할 백엔드가 없습니다. 개발 중 키 입력 화면을 건너뛰거나 선택적 도구를 켜려면 프로젝트 루트에 .env.local 을 두면 됩니다.

EXPO_PUBLIC_CEREBRAS_API_KEY=csk-...    # 첫 실행 키 화면 건너뛰기
# EXPO_PUBLIC_EXA_API_KEY=              # web_search 도구 활성화 (Exa)
# EXPO_PUBLIC_UNSPLASH_ACCESS_KEY=      # 실제 시맨틱 사진 (없으면 LoremFlickr)
# EXPO_PUBLIC_GENOS_MODEL=gemma-4-31b

모델이 실제 서비스와 연결돼 있지 않을 뿐이므로, 개발팀은 화면 하나를 골라 실제 데이터를 돌려주는 도구와 동작을 보낼 곳을 붙이면 데모가 동작하는 앱이 된다고 설명합니다. 예를 들어 Google Places API를 연결하면 "근처 식당" 이 실제 장소·영업시간·사진·리뷰를 반환하고, Google Calendar API를 연결하면 "오늘 내 하루는 어때" 가 실제 일정이 됩니다. 저장소의 ui/contract.tsx 에서 모델이 쓸 수 있는 컴포넌트 어휘를, ui/cupertino/ui/material/ 에서 플랫폼별 렌더러를 확인할 수 있습니다.

AppLess의 라이선스

AppLess는 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다.

:framed_picture: AppLess 데모 및 OpenUI 표준

:github: AppLess 프로젝트 GitHub 저장소

:books: OpenUI 오픈소스 저장소

더 읽어보기




이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. :hugs:

:pytorch:파이토치 한국 사용자 모임:south_korea:이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일:love_letter:로 보내드립니다! 텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다. :smiley:

:wrapped_gift: 아래:down_right_arrow:쪽에 좋아요:+1:를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ :star_struck: