<aside>

📘 UI 패턴 & 컴포넌트 가이드

패턴 사용자가 특정 작업을 수행할 수 있도록 여러 UI 요소와 화면이 하나의 흐름으로 구성된 화면 플로우

컴포넌트 화면을 구성하는 버튼, 탭, 카드 등 개별적인 인터페이스 요소로 특정 기능이나 정보를 전달하는 디자인 요소

패턴과 컴포넌트는 분류 내에 가나다순으로 정리되어 있어 원하는 항목을 빠르게 찾아 확인할 수 있습니다!

</aside>

🎲 UI 패턴


플레이/콘텐츠

결과 화면

결과화면.png

<aside>

인게임 플레이 이후 스테이지 클리어 여부, 점수, 획득 보상 등을 보여주는 화면 패턴이에요. 플레이 결과를 요약해 보여주고 다음 행동(재도전, 보상 수령 등)을 유도하는 역할을 해요. 플레이 행위의 결과를 보여준다는 점에서 보상 패턴과는 차이가 있어요.

</aside>

경험치/레벨업

경험치:레벨업.png

<aside>

플레이어의 성장 상태와 능력치 상승 과정을 보여주는 화면 패턴이에요. 레벨 상승 시 증가한 능력치, 해금 요소, 강화 가능 상태 등을 함께 노출해 성취감과 성장 동기를 강화하고, 수치 변화, 업그레이드 연출 등을 활용해 성장에 대한 즉각적인 보상을 전달해요.

</aside>

꾸미기/배치

꾸미기:배치.png

<aside>

오브젝트나 가구를 원하는 위치에 배치하며 공간을 커스터마이징하는 화면 패턴이에요. 배치 가능 영역, 미리보기, 회전·이동 기능 등을 제공해 직관적인 편집 경험을 지원하고, 플레이어의 취향과 개성을 반영할 수 있어 몰입감과 공간 소유감을 강화해요.

</aside>

도감

도감.png

<aside>

캐릭터, 몬스터, 아이템 등의 수집 현황과 정보를 확인할 수 있는 컬렉션 화면 패턴이에요. 플레이어가 획득한 콘텐츠를 정리해 보여주고 수집 목표를 제시하는 역할을 해요.

</aside>