AINOS DESIGN · 디자인 시스템
모든 화면이 하나의 디자인 언어로 말합니다.
드래그 앤 드롭으로 폼을 구성하고, 기본 제공 스타일 클래스로 모양을 한 번에 정합니다. 색상, 여백, 테마, 반응형 동작은 디자인 시스템에서 제공되므로 모든 모듈이 일관되게 보입니다.
- 드래그 앤 드롭 폼
- 기본 제공 스타일
- 다국어
- 라이트 및 다크 테마
- 반응형
Ainos Studio프로필: Live main 로그아웃 다이얼로그/코드ET AI 미리보기
프로젝트
AT01IAAMS01IAA
고객 카드
여기에 놓기
고객 코드
여기에 놓기
고객명
여기에 놓기
도시
여기에 놓기
등록일
여기에 놓기
전화
여기에 놓기
이메일
버튼을 여기에 놓으세요
취소저장인스펙터
Text
01시작빈 폼과 기본 제공 컴포넌트가 준비되어 있습니다. 그리드 레이아웃이 필드를 자동으로 정렬합니다.
Ainos Studio · 대표 UI, 샘플 데이터
기본 제공 스타일
한 번의 선택으로 기업다운 모양을.
버튼과 컴포넌트는 기업 디자인 언어에서 나온 기본 제공 스타일 클래스로 꾸며집니다. 한 번의 선택으로 색상, 크기, 상태를 바꾸면 모든 화면에서 동일하게 보입니다. 아래에서 직접 해 보세요.
변형
크기
상태
고객 기록을 승인하시겠습니까?
취소저장
스타일은 Ainos Design에서 제공 · 모든 화면에서 동일
반응형 및 접근성
한 번 디자인하면 모든 화면에서 올바르게 보입니다.
같은 화면이 데스크톱에서는 넓게, 태블릿에서는 터치하기 편하게, 휴대폰에서는 한 손으로 쓸 수 있게 표시됩니다. 레이아웃이 기기에 맞게 스스로 조정되므로 별도의 디자인 작업이 필요 없습니다.
- 2열 그리드, 넓은 필드
- 상단 바에 검색 및 계정 메뉴
- 오른쪽에 작업 버튼, 빠른 키보드 이동
WCAG 기준 명암 대비키보드 및 포커스스크린 리더 라벨44 px 터치 영역
자주 묻는 질문
디자인 시스템은 어떤 도움이 되나요?
모든 모듈이 동일하게 보이고 동작하도록 하여, 새 화면을 더 빠르고 일관되게 만들 수 있습니다.
우리 브랜드에 맞게 조정할 수 있나요?
네. 토큰(색상, 타이포그래피)을 변경하면 전체 인터페이스가 자동으로 맞춰집니다.
접근성이 포함되어 있나요?
명암 대비, 키보드 탐색, 포커스 상태가 컴포넌트에 기본으로 내장되어 있습니다.
개발 환경과는 어떻게 연동되나요?
IDE의 드래그 앤 드롭 디자이너가 동일한 컴포넌트와 토큰을 사용하므로, 디자인과 코드가 하나의 시스템에서 만납니다.
화면의 모양을 바꾸려면 코드가 필요한가요?
아니요. 버튼과 컴포넌트의 색상, 크기, 상태는 기본 제공 스타일 클래스에서 선택합니다. 모양은 디자인 시스템에서 제공되며 모든 화면에서 동일하게 유지됩니다.