서랍Drawer
화면 가장자리에서 서랍이 미끄러져 나와요. 뒤에 있는 페이지 일부가 계속 보이죠.
딱 맞는 용어를 찾아요.
아이디어를 만들어 봐요.
떠올릴 수는 있지만 이름을 모르는 화면이나 흐름을 설명해 보세요. Vibulary가 알맞은 용어와 그림 예시를 찾아 명확한 개발 요청으로 정리합니다.
자신의 말로 사용하세요. 그것이 무엇인지, 무엇을 하는지, 언제 필요한지 살펴봅니다.어떻게 물어봐야 할지 모르겠나요? 시도해 보세요
MCP · Connect to your AI559안내서10주제들10언어들128라이브 데모
보고, 이름을 알아보세요.직접 사용해 보기
Drawer.
화면 옆에서 미끄러져 나오는 패널.
느낌에서 구체적인 아이디어로.Atlas
아이디어를 만드는 데 필요한 단어를 배우세요.
우리는 각 용어가 어디에서 왔는지 보여줍니다. 표준, 공식 가이드, 일반 산업 용어에는 다른 레이블이 있습니다.
버튼Button
버튼은 현재 화면에서 무언가를 하게 만들려고 누르는 조종 장치예요.
모달 대화상자Modal Dialog
모달 창은 정신을 집중하게 해주는 창이에요. 누군가 닫거나 끝낼 때까지 현재 화면을 가로막아요.
바닥 시트Bottom Sheet
바텀 시트는 터치하기 편한 패널이에요. 화면 아래에서 올라오다가 정해진 높이에서 멈출 수도 있죠.
명령 팔레트Command Palette
커맨드 팔레트는 키보드로 쓰기 편한 검색 패널이에요. 여러 동작, 페이지, 최근 항목을 열어줘요.
글래스모피즘Glassmorphism
글래스모피즘은 투명한 레이어 표면을 가진 시각적 스타일입니다. 블러, 밝은 테두리 및 작은 깊이감을 사용합니다.
스프링 애니메이션Spring Animation
스프링 애니메이션은 물리 모델을 따릅니다. 강성, 감쇠, 질량, 초기 속도가 움직임을 제어합니다.
디자인 토큰Design Token
디자인 토큰은 단 하나의 디자인 선택에 이름을 붙여요. 예를 들어 색상, 여백, 글꼴, 또는 움직임의 속도가 있어요.
접근성Accessibility
접근성은 다른 능력을 가진 사람들이 제품을 이해하고 사용하도록 도와줘.
제품 목표Product Goal
제품 목표는 제품이 사용자나 비즈니스에 어떤 도움을 줄지 말해줘요.
검색 보강 생성Retrieval-Augmented Generation
검색 보강 생성(RAG)은 실행 시 외부 증거를 찾습니다. 모델이 작성하기 전에 그 증거를 제공합니다.
API & 엔드포인트API & Endpoint
API는 소프트웨어끼리 대화하는 규칙의 모음이에요. 엔드포인트는 그 API에 있는 하나의 주소이자 하나의 동작이죠.
CSS 그리드CSS Grid
CSS 그리드는 행과 열을 함께 배치하는 레이아웃 시스템입니다. 고정된 영역을 설정하거나 공간이 변경될 때 영역을 변경할 수 있습니다.
양식 검증Form Validation
양식 검증은 규칙과 메시지를 사용하여 누락되거나 잘못된 답변을 찾아 방지하고 설명합니다.
토스트 알림Toast
Toast는 짧은 상태 메시지야. 화면을 막지 않고 보통 혼자 사라져.
Git, 저장소, 브랜치 및 커밋 — 학습 번들Git, Repository, Branch & Commit — Learning Bundle
이 학습 번들은 네 가지 Git 개념을 연결합니다. Git은 버전 관리 시스템입니다. 저장소는 객체와 참조를 저장합니다. 브랜치는 작업의 라인을 이름 짓습니다. 커밋은 메타데이터와 함께 프로젝트 상태를 기록합니다. 이 번들은 하나의 Git 용어가 아닙니다.
축소된 움직임Reduced Motion
축소된 움직임은 접근성 설정 및 디자인 모드입니다. 사람들이 필요하지 않은 움직임을 제거하거나 단순화합니다.
문제 설명Problem Statement
문제 정의는 누가 언제 문제를 겪는지, 그리고 왜 이 문제를 풀아야 하는지를 말해요.
작업에 맞는 패턴을 선택하세요.
두 패턴은 비슷하게 보일 수 있지만 다른 작업을 수행합니다. 이 짧은 규칙이 선택에 도움이 됩니다.
↯↗
버튼 · Link
버튼이 여기에서 무언가를 변경합니다. 링크는 당신을 다른 곳으로 안내합니다.
□▯▱
모달 대화상자 · 서랍 · 바닥 시트
한 가지 결정을 위해 다이얼로그를 사용하고, 부수적인 작업에는 드로어를 사용하며, 작은 화면에서는 몇 가지 작업을 위해 바텀 시트를 사용하세요.
▤◌
Skeleton · Spinner
Skeleton은 로딩 중인 내용의 모양을 보여줘. Spinner는 그냥 앱이 일하고 있다는 것만 보여줘.
☑◉⊙
Checkbox · Switch · Radio Group
체크박스는 여러 항목을 선택할 수 있습니다. 스위치는 설정을 즉시 변경합니다. 라디오 버튼은 하나의 항목만 선택합니다.
UI 패턴의 이름을 말할 수 있나요?
상황을 읽고 가장 명확한 용어를 선택하세요. 함정 질문은 없습니다.
점수 0 / 2
상황 · 1/2
'임시 저장'을 누르면 사이트가 변경 사항을 저장하고 성공 여부를 알려줍니다.
UI 용어를 명확한 빌드 요청으로 전환하세요.
필요한 것을 적으세요. 그런 다음 UI가 무엇을 할지, 어떻게 보일지, 어떻게 움직일지 선택하세요. 우리는 그것을 복사할 수 있는 요청으로 바꿉니다.
누가 이것이 필요한지, 무슨 일이 일어나고 있는지, 다음에 무엇이 일어나야 하는지 말하세요.
VIBULARY / 요청● ● ●
누가 이것이 필요한지, 무슨 일이 일어나고 있는지, 다음에 무엇이 일어나야 하는지 말하세요.누가 이것이 필요한지, 무슨 일이 일어나고 있는지, 다음에 무엇이 일어나야 하는지 말하세요.
V.✦
단어 지우기, 유용한 예제
각 가이드는 간단한 의미와 명확한 예제로 시작합니다. 기술적 이름은 구축하는 데 도움이 될 때만 나타납니다.