gluestack의 실제 핵심 Button 및 Input 생성자, 명시적인 v5 시맨틱 색상, 완전한 React Native Web 소스를 사용해 야외 활동 장비 체크리스트를 만드세요. 유효성 검사, 키보드 동작, 안정적인 항목 식별, 로컬에서 계산되는 짐 꾸리기 진행률을 확인하세요.
React Native Web 0.21.3을 통해 실제 @gluestack-ui/core 5.0.15 동작을 사용합니다. 현장용 키트 레이아웃, 아트워크 및 상태 모델은 독자적인 OpenDesign 작업입니다. 이 직접 생성기 기반 브라우저 예제는 명시적 스타일을 사용합니다. CLI에서 생성한 NativeWind/Uniwind 컴포넌트 집합이 아니며 iOS나 Android에서 테스트되지 않았습니다. · 구현 레퍼런스
02
gluestack UI 디자인 시스템 디자인 참조
이 참조는 문서화된 v5 라이트 색상과 설치된 core 생성기 API를 구분합니다. 직접 생성기를 사용해도 CLI 테마가 자동 적용되지 않습니다. 미리보기에서는 목록의 색상을 독자적인 스타일에 명시적으로 연결하고, 더 뚜렷한 사용자 지정 포커스 윤곽선을 사용합니다. 형태와 아트워크는 애플리케이션에서 결정합니다.
gluestack은 여러 계층으로 구성됩니다. 기본 설치 흐름은 스타일이 적용된 컴포넌트를 애플리케이션에 생성합니다. 반면 이 예제에서는 설치된 코어 패키지에서 createButton과 createInput을 가져오고 React Native Web 호스트를 전달합니다. 이 차이는 중요합니다. core만 설치한다고 해서 생성된 버튼 변형이나 완전한 테마가 제공되는 것은 아닙니다.
실행 예제는 core 5.0.15와 utils 5.0.6을 고정해 사용합니다. React Native Web 어댑터는 실제 컴포넌트이고, 셸과 상태는 독자적으로 구성했습니다. 완전한 Expo 또는 Next.js 애플리케이션을 만들려면 설치 문서를 참고하고, 이 특정 브라우저 예제를 재현하려면 여기에 있는 전체 파일을 사용하세요.
gluestack UI 디자인 시스템의 시맨틱 색상과 명시적 스타일링
장식을 정하기 전에 역할을 조합하세요
페이지는 흰색 캔버스에 어두운 주요 동작, 차분한 보조 영역, 뚜렷한 테두리 역할을 사용합니다. 이 값은 문서에 명시된 v5 라이트 팔레트에서 가져온 뒤 React Native 스타일과 일반 CSS을 통해 명시적으로 지정합니다. 런타임 provider가 이 값을 암묵적으로 적용하지 않습니다.
잘못된 필드는 파괴적 색상의 아웃라인, 읽기 쉬운 설명, 포커스 복귀를 함께 사용합니다. 원본 포커스 아웃라인은 문서에 명시된 기본 링보다 더 어둡습니다. 따라서 스타일시트에서는 이 선택을 라이브러리 토큰인 것처럼 제시하지 않고 별도로 표시합니다.
마이그레이션은 신중하게 진행하세요
숫자로 된 팔레트 이름을 사용하는 이전 예제를 v5 시맨틱 용어와 무작정 혼용하지 마세요. 토큰 이름을 바꾸기 전에 설치된 생성 구성과 업그레이드 가이드를 확인하세요. 생성기를 직접 살펴보는 예제로 동작을 확인할 수는 있지만, 애플리케이션 전체의 마이그레이션이 완료되었음을 증명하지는 않습니다.
gluestack UI 디자인 시스템의 Button 구성과 키보드 동작
생성기에 모든 호스트를 전달하세요
createButton은 Pressable, Text, View, ActivityIndicator와 아이콘 호스트를 받습니다. 그리고 Button과 Text, Group, Spinner, Icon 하위 컴포넌트를 반환합니다. 완전한 예제에서는 누를 수 있는 루트에 일반 문자열을 넣는 대신 Button.Text를 사용합니다.
포장은 동기식 상태 전환이므로 로딩 스피너나 저장 지연을 임의로 만들어 넣지 않습니다. 각 동작의 접근성 레이블에는 항목 이름이 포함됩니다. 눈에 보이는 동작 문구는 Pack item과 Unpack 사이에서 바뀌어 다음 동작을 명확히 보여 줍니다.
렌더링된 동작을 확인하세요
Tab 키로 Pack item 동작에 포커스를 옮긴 뒤 Space 키를 누릅니다.
포장 상태를 나타내는 텍스트와 진행률 값이 모두 바뀌는지 확인합니다.
Unpack을 사용한 뒤 같은 항목이 목록에 남아 있는지 확인합니다.
마우스 오버만으로 키보드 지원을 판단하지 말고 포커스 아웃라인을 확인하세요.
gluestack UI 디자인 시스템의 Input 컨텍스트와 완전한 검증
저장할 값을 검증하세요
value와 onChangeText를 사용해 입력을 제어합니다. 항목을 추가할 때는 먼저 초안에서 앞뒤 공백을 제거하고, 결과가 비어 있으면 거부한 다음, 대소문자를 구분하지 않고 이름을 비교합니다. 값이 거부되면 사용자가 수정할 수 있도록 필드에 그대로 남겨 둡니다.
루트에는 isInvalid와 isRequired를 전달하고, 실제 필드에는 레이블, 설명 참조, 포커스 복원용 ref를 전달합니다. 검증은 애플리케이션의 책임입니다. core input을 필수로 표시해도 중복 이름 규칙이 자동으로 적용되지는 않습니다.
눈에 보이는 필드 상태를 모두 처리하세요
초기 상태: 필드가 비어 있고 글자 수 안내가 표시됩니다.
오류 상태: 설명이 알림으로 나타나고 필드에 포커스가 이동합니다.
편집 상태: 사용자가 초안을 수정하면 이전 오류 텍스트가 지워집니다.
입력 승인: 포장을 풀지 않은 새 행이 추가되고 필드가 비워지며 상태 메시지에 추가된 항목이 표시됩니다.
gluestack UI 디자인 시스템의 안정적인 식별자와 파생 진행률
항목을 저장하고 요약을 계산하세요
각 항목에는 안정적인 숫자 id, 이름, 포장 여부를 나타내는 플래그가 있습니다. 새 id는 ref에서 가져오며, 표시 이름을 React key로 사용하지 않습니다. 전환할 때는 id를 기준으로 매핑하므로 서로 관련 없는 두 UI 업데이트가 실수로 다른 행을 변경할 수 없습니다.
진행률의 분자는 포장된 항목의 플래그를 기준으로 계산하고, 분모는 현재 목록을 기준으로 계산합니다. 포장하지 않은 항목을 추가하면 이미 포장된 항목은 그대로 유지되면서 백분율이 낮아질 수 있습니다. 이는 체크리스트가 커진 데 따른 올바른 결과이지 애니메이션 오류가 아닙니다.
초기화를 명시적인 로컬 동작으로 만드세요
초기화하면 샘플 항목 세 개가 복원되고, 작성 중인 내용과 오류가 지워지며, 다음 ID가 초기화되고 결과가 안내됩니다. 페이지를 다시 불러와도 샘플 상태로 시작합니다. 이 미리보기에는 서버, 계정 동기화 또는 영구 저장소가 없습니다.
gluestack UI 디자인 시스템 반응형 레이아웃과 오리지널 아트워크
호스트 동작과 페이지 레이아웃을 구분하세요
데스크톱 레이아웃에서는 체크리스트와 입력 패널을 나란히 배치합니다. 너비가 700픽셀이 되면 한 열로 바뀝니다. 필요한 경우 행이 줄바꿈되고 긴 항목 이름도 사용 가능한 공간 안에서 줄바꿈됩니다. 고정 너비의 작업 버튼이 문서 전체를 옆으로 밀어내지 않도록 하세요.
노트와 연필은 gluestack 브랜드 에셋을 복사한 것이 아니라 새로 제작한 CSS 도형입니다. 카드의 14픽셀 둥근 모서리, 패널 간격 24픽셀, 제목 크기 체계도 이 예제를 위해 정한 것입니다. 참고 표에서는 이를 문서에 정의된 색상 역할과 구분합니다.
gluestack UI 디자인 시스템 브라우저 접근성과 플랫폼 범위
실제로 다루는 환경을 테스트하세요
미리보기는 React Native Web을 렌더링하며 브라우저에서 확인했습니다. 이로써 네이티브 iOS 또는 Android에서의 동작이 검증된 것은 아닙니다. Expo 애플리케이션에서는 터치 대상, 스크린 리더 알림, 키보드 회피 동작, 플랫폼 탐색을 별도로 확인해야 합니다.
진행률 요소에는 이름, 최솟값, 최댓값, 현재 값이 포함됩니다. 라이브 상태 알림은 독자가 체크리스트에서 벗어나지 않고도 완료된 작업을 확인할 수 있게 합니다. 제출이 거부되면 양식은 작성 중인 내용을 유지하고 입력 필드로 포커스를 돌려보냅니다. 이러한 동작은 네이티브 코어 동작을 바탕으로 애플리케이션에서 구현해야 합니다.
gluestack UI 디자인 시스템 전체 빌드 및 의존성 범위
이 예제를 그대로 재현하기
Component Examples의 파일 네 개를 모두 한 디렉터리에 저장하고 아래에 표시된 고정 버전 패키지를 설치하세요. 코어 내부에서 모듈 이름으로 react-native를 가져오므로 빌드 설정에서 react-native를 react-native-web으로 별칭 처리합니다. 소스에서는 브라우저 호스트를 직접 가져오며 Expo 런타임은 불러오지 않습니다.
웹 전용 하위 구성요소를 설치할 때는 레거시 피어 의존성 해석을 사용합니다. 이는 완전한 네이티브 애플리케이션을 위한 권장 방식이 아닙니다. 전체 라이브러리는 네이티브, SVG, 안전 영역 통합을 위한 피어 의존성을 지정하지만, 이 두 크리에이터로 구성된 번들에서는 사용하지 않습니다. 구성요소를 확장할 때는 필요한 피어 의존성을 추가하세요.
한 번에 한 계층씩 변경하세요
파일을 변경하지 않고 빌드한 다음 항목 추가, 중복 거부, 포장, 초기화를 확인하세요.
크리에이터 연결은 유지하면서 기존 레이아웃이나 애플리케이션 콘텐츠를 변경하세요.
생성형 NativeWind 구성요소를 도입하려면 스타일링과 프로바이더 설정을 별도의 통합 단계로 교체하세요.
변경 후 키보드 동작과 실제 대상 플랫폼을 다시 확인하세요.
gluestack UI 디자인 시스템 구성요소 예제
app.jsx — 코어 구성요소 전체 예제
실제 크리에이터 연결과 전체 체크리스트 상태 모델입니다.
jsx
import React,{useState,useRef} from 'react';
import{createRoot}from'react-dom/client';
import{Pressable,Text,View,TextInput,ActivityIndicator}from'react-native-web';
import{createButton}from'@gluestack-ui/core/button/creator';
import{createInput}from'@gluestack-ui/core/input/creator';
const Button=createButton({Root:Pressable,Text,Group:View,Spinner:ActivityIndicator,Icon:View});
const Input=createInput({Root:View,Input:TextInput,Slot:Pressable,Icon:View});
const seed=[{id:1,name:'Sketchbook',packed:true},{id:2,name:'Pencil roll',packed:false},{id:3,name:'Water bottle',packed:false}];
function App(){const[items,setItems]=useState(seed),[name,setName]=useState(''),[error,setError]=useState(''),[message,setMessage]=useState('Pack each item when it is ready.');const next=useRef(4),field=useRef(null);const count=items.filter(x=>x.packed).length;
function add(){const v=name.trim();if(!v||items.some(x=>x.name.toLowerCase()===v.toLowerCase())){setError(!v?'Enter the name of an item.':'That item is already in the kit.');field.current.focus();return}setItems([...items,{id:next.current++,name:v,packed:false}]);setName('');setError('');setMessage(v+' added to this local kit.')}
return <main><header><p className="eyebrow">GLUESTACK UI / CORE COMPONENT STUDY</p><h1>A small kit.<br/>A clearer start.</h1><p className="intro">Prepare a drawing kit with actual gluestack core Button and Input creators. Your checklist stays in this browser session.</p></header><div className="layout"><section className="panel"><div className="sectionhead"><h2>Your field kit</h2><span className="badge">{count} of {items.length} packed</span></div><div className="meter" role="progressbar" aria-label="Packed items" aria-valuemin={0} aria-valuemax={items.length} aria-valuenow={count}><i style={{width:100*count/items.length+'%'}}/></div><ul>{items.map(item=><li key={item.id}><div><strong>{item.name}</strong><span>{item.packed?'Packed and ready':'Still to pack'}</span></div><Button onPress={()=>{setItems(items.map(x=>x.id===item.id?{...x,packed:!x.packed}:x));setMessage(item.name+(item.packed?' marked to pack.':' marked packed.'))}} style={item.packed?styles.secondary:styles.primary} aria-label={(item.packed?'Unpack ':'Pack ')+item.name}><Button.Text style={{color:item.packed?'#171717':'#fafafa',fontSize:14,fontWeight:600}}>{item.packed?'Unpack':'Pack item'}</Button.Text></Button></li>)}</ul><p className="status" role="status">{message}</p></section><aside className="panel"><div className="drawing" aria-hidden="true"><span className="book">FIELD<br/>NOTES</span><i className="pencil"/></div><h2>Add one useful thing</h2><label htmlFor="kit-name">Item name</label><Input isInvalid={!!error} isRequired style={styles.input}><Input.Input id="kit-name" aria-label="Item name" aria-describedby={error?'kit-error':'kit-hint'} ref={field} value={name} onChangeText={v=>{setName(v);setError('')}} onSubmitEditing={add} maxLength={60} style={styles.field}/></Input><p id="kit-hint" className="hint">Use a short, unique name. Maximum 60 characters.</p>{error&&<p id="kit-error" className="error" role="alert">{error}</p>}<Button onPress={add} style={styles.primary}><Button.Text style={styles.primaryText}>Add to kit</Button.Text></Button><Button onPress={()=>{setItems(seed);setName('');setError('');setMessage('Example kit restored.');next.current=4}} style={styles.reset}><Button.Text style={{color:'#737373',fontSize:14}}>Reset example kit</Button.Text></Button></aside></div><p className="scope">Native @gluestack-ui/core 5.0.15 behavior rendered through React Native Web. Original OpenDesign layout and artwork; explicitly styled with documented v5 light color roles. This is a web-only study, not an Expo build or the CLI-generated NativeWind component set.</p></main>}
const styles={primary:{backgroundColor:'#171717',paddingVertical:12,paddingHorizontal:16,borderRadius:8,alignItems:'center',justifyContent:'center'},secondary:{backgroundColor:'#f5f5f5',paddingVertical:12,paddingHorizontal:16,borderRadius:8,alignItems:'center',justifyContent:'center'},primaryText:{color:'#fafafa',fontSize:14,fontWeight:600},input:{borderWidth:1,borderColor:'#e5e5e5',borderRadius:8,marginTop:8},field:{padding:12,fontSize:16,color:'#0a0a0a',outlineStyle:'none'},reset:{paddingVertical:16,alignItems:'center'}};
createRoot(document.getElementById('app')).render(<App/>);
createButton/createInput 및 React Native Web 호스트를 사용해 gluestack core 5.0.15 브라우저 예제를 완성하세요. 안정적인 ID, 제어되는 작성 중 텍스트, 공백 제거 및 중복 유효성 검사, 포커스 복원, 계산된 포장 개수, 로컬 초기화, 명시적인 v5 라이트 색상 역할 매핑을 유지하세요. 오리지널 레이아웃 선택 사항은 라이브러리 기본값과 구분하세요. 네이티브 모바일 테스트나 백엔드 영구 저장 기능이 있다고 주장하지 마세요.
05
gluestack UI 디자인 시스템 출처와 범위
React Native Web 0.21.3을 통한 실제 @gluestack-ui/core 5.0.15 동작입니다. 필드 키트의 레이아웃, 아트워크, 상태 모델은 OpenDesign에서 새로 제작했습니다. 이 브라우저 예제는 크리에이터를 직접 사용하고 스타일을 명시적으로 지정합니다. CLI에서 생성한 NativeWind/Uniwind 구성요소 세트가 아니며 iOS 또는 Android에서 테스트되지 않았습니다.
