# 디자인 모드 (Design Mode)

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FLzktvEHeUfGglihWSX7s%2F%E1%84%83%E1%85%B5%E1%84%8C%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AB%E1%84%86%E1%85%A9%E1%84%83%E1%85%B3.png?alt=media&#x26;token=097c5e78-b087-492b-b779-399c5089abd0" alt=""><figcaption><p>디자인 모드</p></figcaption></figure>

<table><thead><tr><th width="113" data-type="number">영역 번호</th><th width="189">영역 이름</th><th>영역 설명</th></tr></thead><tbody><tr><td>1</td><td>Design모드 탭</td><td>Design 탭을 눌러서 Design 모드로 전환합니다.</td></tr><tr><td>2</td><td>Explorer 정렬 액션버튼</td><td>Explorer의 컴포넌트의 계층 구조 전체를 펼치거나 접을 수 있습니다.</td></tr><tr><td>3</td><td>Step</td><td>시나리오의 장면을 Step이라고 합니다. Step은 3가지 종류가 있습니다. <a data-mention href="component/step">step</a></td></tr><tr><td>4</td><td>레이아웃 고정</td><td>Step 바로 하위에 있는 Group, Layout을 화면 상단 또는 하단에 고정하면 표시되는 UI입니다.</td></tr><tr><td>5</td><td>스텝버튼</td><td>Step 하단에 표시되는 버튼영역입니다.</td></tr></tbody></table>

시나리오에 사용될 컴포넌트들에 대한 디자인을 해볼게요!\
프로토타이핑을 하고 디자인 요구사항들을 입혀가면서 최적의 사용자 경험을 제공하는 앱을 만드세요!&#x20;