# gluestack UI 디자인 시스템 ## gluestack UI 디자인 시스템 인터페이스 미리보기 항목을 하나 추가하고, 포장 완료로 표시한 다음 계산된 진행 상황을 확인하세요. ## gluestack UI 디자인 시스템 디자인 참조 이 참조는 문서화된 v5 라이트 색상과 설치된 core 생성기 API를 구분합니다. 직접 생성기를 사용해도 CLI 테마가 자동 적용되지 않습니다. 미리보기에서는 목록의 색상을 독자적인 스타일에 명시적으로 연결하고, 더 뚜렷한 사용자 지정 포커스 윤곽선을 사용합니다. 형태와 아트워크는 애플리케이션에서 결정합니다. ### 문서화된 v5 라이트 색상 역할 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | background | #ffffff | 페이지 캔버스. | | foreground | #0a0a0a | 일반적인 읽기용 텍스트. | | card | #ffffff | 카드 표면. | | popover | #ffffff | 오버레이 표면입니다. 이 예제에서는 팝오버를 사용하지 않습니다. | | popover-foreground | #0a0a0a | 오버레이 표면에 사용하는 텍스트입니다. | | muted | #f5f5f5 | 원본 아트워크 패널을 포함한 보조 표면입니다. | | muted-foreground | #737373 | 보조 설명과 상태 세부 정보입니다. | | destructive | #e7000b | 잘못된 입력을 표시합니다. 오류는 텍스트로도 나타납니다. | | border | #e5e5e5 | 카드 테두리와 목록 구분선입니다. | | input | #e5e5e5 | 기본 상태의 필드 테두리입니다. | | ring | #d4d4d4 | 문서에 명시된 기본 링 색상입니다. 이 예제에서는 더 진한 원본 #737373 포커스 아웃라인을 사용합니다. | | primary | #171717 | 주요 동작 표면과 진행률 채우기입니다. | | primary-foreground | #fafafa | 어두운 동작 표면에 사용하는 텍스트입니다. | | secondary | #f5f5f5 | 강조도가 낮은 동작 표면입니다. | | secondary-foreground | #171717 | 보조 표면에 사용하는 텍스트입니다. | | accent | #f7f7f7 | 추가 강조 표면 역할입니다. | | accent-foreground | #343434 | 강조 역할에 사용하는 텍스트입니다. | ### 핵심 Button 팩토리와 상태 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | createButton | { Root, Text, Group, Spinner, Icon } | 실제 호스트 컴포넌트를 전달하세요. 생성기는 동작을 추가할 뿐, 완전한 테마를 제공하지 않습니다. | | Button.Text | Text host | 버튼 텍스트를 해당 상태 컨텍스트 안에 유지합니다. | | Button.Group | Group host | 버튼 그룹을 위한 생성된 하위 컴포넌트입니다. 이 레이아웃에서는 사용하지 않습니다. | | Button.Spinner | Spinner host | 생성된 로딩 표시 요소입니다. 즉시 처리되는 로컬 동작에는 표시하지 마세요. | | Button.Icon | Icon host | 생성된 아이콘 하위 컴포넌트입니다. 미리 보기에서는 명시적인 텍스트 동작을 사용합니다. | | Button isDisabled | boolean | 겉모습뿐 아니라 실제 누르기 동작을 비활성화합니다. | | Button data-focus-visible | true / false | 원본 CSS는 키보드 포커스가 있을 때 눈에 보이는 아웃라인을 적용합니다. | | Button data-active | true / false | 스타일링에 사용할 눌림 상호작용 상태를 노출합니다. | ### 핵심 Input 컨텍스트와 호스트 props | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | createInput | { Root, Icon, Slot, Input } | 필드 컨텍스트와 관련 슬롯을 생성합니다. | | Input.Input | TextInput host | 생성기가 반환하는 텍스트 입력 컴포넌트입니다. | | isInvalid | Input root boolean | 잘못된 컨텍스트와 aria-invalid를 필드에 전달합니다. | | isRequired | Input root boolean | 필수 상태를 전달합니다. 애플리케이션은 별도로 trim 검증을 수행해야 합니다. | | value / onChangeText | Controlled TextInput props | 초안 텍스트를 React 상태로 유지합니다. | | onSubmitEditing | TextInput callback | 이 브라우저 예제에서는 Enter 키를 누르면 항목을 추가합니다. | | maxLength | 60 in the original study | 이 애플리케이션에서 선택한 TextInput 제한값입니다. gluestack의 기본값은 아닙니다. | | aria-label | Item name in the original study | 눈에 보이는 레이블과 함께 입력 이름을 지정합니다. | ## gluestack UI 디자인 시스템 완벽 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## gluestack UI 디자인 시스템 버전, 생성기 및 생성된 컴포넌트 ### 실제 구현 경로를 선택하세요 > 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 사이에서 바뀌어 다음 동작을 명확히 보여 줍니다. ### 렌더링된 동작을 확인하세요 1. Tab 키로 Pack item 동작에 포커스를 옮긴 뒤 Space 키를 누릅니다. 2. 포장 상태를 나타내는 텍스트와 진행률 값이 모두 바뀌는지 확인합니다. 3. Unpack을 사용한 뒤 같은 항목이 목록에 남아 있는지 확인합니다. 4. 마우스 오버만으로 키보드 지원을 판단하지 말고 포커스 아웃라인을 확인하세요. ## 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, 안전 영역 통합을 위한 피어 의존성을 지정하지만, 이 두 크리에이터로 구성된 번들에서는 사용하지 않습니다. 구성요소를 확장할 때는 필요한 피어 의존성을 추가하세요. ### 한 번에 한 계층씩 변경하세요 1. 파일을 변경하지 않고 빌드한 다음 항목 추가, 중복 거부, 포장, 초기화를 확인하세요. 2. 크리에이터 연결은 유지하면서 기존 레이아웃이나 애플리케이션 콘텐츠를 변경하세요. 3. 생성형 NativeWind 구성요소를 도입하려면 스타일링과 프로바이더 설정을 별도의 통합 단계로 교체하세요. 4. 변경 후 키보드 동작과 실제 대상 플랫폼을 다시 확인하세요. ## gluestack UI 디자인 시스템 구성요소 예제 ### app.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

GLUESTACK UI / CORE COMPONENT STUDY

A small kit.
A clearer start.

Prepare a drawing kit with actual gluestack core Button and Input creators. Your checklist stays in this browser session.

Your field kit

{count} of {items.length} packed
    {items.map(item=>
  • {item.name}{item.packed?'Packed and ready':'Still to pack'}
    • )}

{message}

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.

} 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(); ``` 코드 참조 ### style.css — 오리지널 레이아웃과 명시적인 라이트 색상 역할 완전한 반응형 셸, 아트워크, 상태 윤곽선, 브라우저 포커스 스타일을 포함합니다. ``` *{box-sizing:border-box}body{margin:0;background:#fff;color:#0a0a0a;font-family:Arial,sans-serif}main{max-width:1100px;margin:auto;padding:40px}.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:700}.intro{max-width:62ch;color:#737373;line-height:1.6}h1{font-size:52px;line-height:1.03;letter-spacing:-.045em;margin:24px 0}h2{font-size:22px;margin:0 0 20px}.layout{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;margin-top:32px}.panel{border:1px solid #e5e5e5;border-radius:14px;padding:24px;min-width:0}.sectionhead{display:flex;gap:12px;justify-content:space-between;align-items:baseline;flex-wrap:wrap}.badge{font-size:12px;background:#f5f5f5;padding:6px 10px;border-radius:20px}.meter{height:6px;border-radius:8px;background:#f5f5f5;margin:6px 0 24px;overflow:hidden}.meter i{display:block;height:100%;background:#171717}ul{list-style:none;padding:0;margin:0}li{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid #e5e5e5}li>div:first-child{min-width:0;flex:1}li strong{display:block;font-size:16px;overflow-wrap:anywhere}li span{display:block;font-size:13px;color:#737373;margin-top:8px}.status{font-size:14px;line-height:1.6;margin-top:24px}.hint,.scope{font-size:12px;line-height:1.6;color:#737373}.scope{margin-top:28px}.error{font-size:14px;color:#e7000b;line-height:1.5}label{font-size:14px}.drawing{height:130px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:24px}.book{display:block;background:#171717;color:#fafafa;border-left:5px solid #737373;width:80px;height:96px;padding:22px 12px;font-size:12px;line-height:1.6;transform:rotate(-8deg)}.pencil{height:90px;width:8px;background:#a3a3a3;transform:rotate(14deg)}[data-focus-visible=true]{outline:3px solid #737373;outline-offset:3px}[data-invalid=true]{border-color:#e7000b!important}input:focus-visible{outline:2px solid #737373!important;outline-offset:3px}@media(max-width:700px){main{padding:20px}h1{font-size:40px}.layout{grid-template-columns:1fr}.panel{padding:20px}li{gap:12px;flex-wrap:wrap}li>div:first-child{flex-basis:120px}} ``` 코드 참조 ### build.mjs — 웹 번들러 전체 설정 app.jsx에서 호스트를 React Native Web으로 가져오더라도 네이티브 가져오기 별칭은 필요합니다. ``` import { build } from 'esbuild'; await build({entryPoints:['app.jsx'],bundle:true,minify:true,outfile:'app.js',alias:{'react-native':'react-native-web'},resolveExtensions:['.web.js','.js','.jsx','.ts','.tsx','.json'],loader:{'.js':'jsx'},define:{'process.env.NODE_ENV':'"production"'}}); ``` 코드 참조 ### index.html — 브라우저 진입점 전체 파일 이 파일을 style.css 및 생성된 app.js와 같은 위치에 두세요. ``` gluestack field kit
``` 코드 참조 ## gluestack UI 디자인 시스템 에이전트 설정 ### 구현 시작점 먼저 파일 네 개를 모두 저장하세요. 이 설정은 예제에 포함된 브라우저 하위 구성요소만 대상으로 하며 NativeWind, Uniwind, Expo 또는 생성형 구성요소 레지스트리를 초기화하지 않습니다. ``` npm init -y npm install react@19.3.0 react-dom@19.3.0 react-native-web@0.21.3 @gluestack-ui/core@5.0.15 @gluestack-ui/utils@5.0.6 esbuild@0.28.2 --legacy-peer-deps node build.mjs python3 -m http.server 8000 # Open http://localhost:8000/ ``` ### 프로젝트를 위한 프롬프트 ``` createButton/createInput 및 React Native Web 호스트를 사용해 gluestack core 5.0.15 브라우저 예제를 완성하세요. 안정적인 ID, 제어되는 작성 중 텍스트, 공백 제거 및 중복 유효성 검사, 포커스 복원, 계산된 포장 개수, 로컬 초기화, 명시적인 v5 라이트 색상 역할 매핑을 유지하세요. 오리지널 레이아웃 선택 사항은 라이브러리 기본값과 구분하세요. 네이티브 모바일 테스트나 백엔드 영구 저장 기능이 있다고 주장하지 마세요. ``` ## gluestack UI 디자인 시스템 출처와 범위 React Native Web 0.21.3을 통한 실제 @gluestack-ui/core 5.0.15 동작입니다. 필드 키트의 레이아웃, 아트워크, 상태 모델은 OpenDesign에서 새로 제작했습니다. 이 브라우저 예제는 크리에이터를 직접 사용하고 스타일을 명시적으로 지정합니다. CLI에서 생성한 NativeWind/Uniwind 구성요소 세트가 아니며 iOS 또는 Android에서 테스트되지 않았습니다. - 설치 생성형 구성요소의 표준 설치 절차입니다. - v5 시맨틱 토큰 현재 라이트 색상 역할 및 사용자 지정 방법입니다. - 버튼 API 버튼의 구조, 상호작용, 상태 속성입니다. - 코어 Button 팩토리 설치된 5.0.15 크리에이터의 정확한 구현입니다. - 코어 Input 구현 제어되는 입력 필드, 유효하지 않은 상태, 접근성 연결입니다. - v5로 업그레이드 버전 마이그레이션 및 이름 변경 사항입니다. ## gluestack UI 디자인 시스템 관련 자료 ### Headless UI Headless UI는 대화상자, 목록 상자, 스위치에 사용할 스타일이 없는 React 상호작용 구성 요소를 제공합니다. 이 가이드에서는 문서 공유 흐름을 예제로 삼아 일반 CSS와 함께 기본 포커스, 선택 및 팝업 동작을 구성하는 방법을 중점적으로 살펴봅니다. ### HeroUI 실제 시맨틱 CSS 변수, 복합 React 컨트롤, 라이트 및 다크 배경 레이어, 바로 사용할 수 있는 이미지 내보내기 레시피를 제공하는 HeroUI v3 참고 자료. ### Ionic Framework 색상 역할, iOS 및 Material 슬라이더 범위의 기하 구조, 실제 세그먼트 및 스위치 동작이 검증된 네이티브 Ionic 읽기 설정 인터페이스입니다. 글꼴, 크기, 종이 설정에 따라 기사 표시도 달라집니다. - [구현 레퍼런스](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx) - [출처](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens) - [출처](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx) - [출처](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/input/creator/Input.jsx) - [코드 참조](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx) - [코드 참조](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens) - [코드 참조](https://github.com/gluestack/gluestack-ui) - [설치 생성형 구성요소의 표준 설치 절차입니다.](https://gluestack.io/ui/docs/home/getting-started/installation) - [v5 시맨틱 토큰 현재 라이트 색상 역할 및 사용자 지정 방법입니다.](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens) - [버튼 API 버튼의 구조, 상호작용, 상태 속성입니다.](https://gluestack.io/ui/docs/components/button) - [코어 Button 팩토리 설치된 5.0.15 크리에이터의 정확한 구현입니다.](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx) - [코어 Input 구현 제어되는 입력 필드, 유효하지 않은 상태, 접근성 연결입니다.](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/input/creator/Input.jsx) - [v5로 업그레이드 버전 마이그레이션 및 이름 변경 사항입니다.](https://gluestack.io/ui/docs/guides/more/upgrade-to-v5)