<aside>
📘 UI 패턴 가이드
모바일&웹사이트 서비스에서 반복적으로 등장하는 화면을 패턴 기준으로 정리한 가이드예요. 각 패턴은 사용자가 서비스를 이용하면서 수행하는 행동과 화면의 목적을 기준으로 분류되어 있어요. 이 가이드를 통해 다양한 서비스의 UI 구조를 이해하고 각 패턴이 어떤 상황에서 사용되는지 쉽게 확인할 수 있어요. 총 60개의 UI 패턴이 있으며 실제 서비스에서 반복적으로 등장하는 화면 구조를 기반으로 정의되었어요.
패턴과 컴포넌트는 가나다순으로 정리되어 있어 원하는 항목을 빠르게 찾아 확인할 수 있습니다!
</aside>
목차
<aside>
AI 기능을 활용해 콘텐츠를 생성하거나 도움을 받을 때 사용하는 화면 패턴이에요. 사용자는 질문을 하거나 텍스트, 이미지를 입력해 AI로부터 결과를 받을 수 있어요. 최근 많은 서비스에서 추천, 생성, 자동화 기능에 활용되고 있어요.
</aside>
모바일에만 있는 패턴
<aside>
iPhone 환경에서 실제 앱 화면을 캡처한 UI 사례예요. 다양한 서비스에서 사용되는 실제 인터페이스를 참고하기 위해 제공되는 자료예요. 유아이볼에서는 패턴을 이해하기 위한 실제 사례로 활용돼요.
</aside>
<aside>
복잡한 결제 과정을 줄이고 빠르게 결제를 진행할 수 있도록 만든 화면 패턴이에요. 사용자는 미리 등록된 카드나 결제 수단을 선택해 몇 번의 터치만으로 결제를 완료할 수 있어요. 쇼핑이나 서비스 결제 과정에서 자주 등장하는 패턴이에요.
</aside>
<aside>
원하는 정보를 빠르게 찾기 위해 사용하는 화면 패턴이에요. 사용자는 검색창에 키워드를 입력해 특정 콘텐츠나 기능을 찾을 수 있어요. 대부분의 앱에서 정보를 찾는 기본적인 방법으로 사용돼요.
</aside>