버튼을 활용한 탐색 및 상호작용

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.

Sigma에서 AI 앱 소개

SkillTag.level.beginnerSkillTag.label

4.9+

1장에서는 Sigma에서 AI 앱을 구축하는 데 필요한 기초 개념을 소개하며, 특히 앱이 사용자 입력을 통합해 동작 중심의 워크플로를 구동하는 방식에 초점을 맞춥니다. 여기서 가장 중요한 구성 요소 중 하나인 연결된 입력 테이블에 큰 비중을 둡니다. 웨어하우스 데이터와 사용자가 입력한 값을 나란히 보여 주어 기본 데이터셋과 직접 상호작용할 수 있게 해 주는 연결된 입력 테이블을 만드는 방법을 살펴봅니다. 또한 어떤 데이터 유형을 입력할 수 있을지 제어하고, 테이블을 언제 편집 가능하게 할지 정의하는 등 사용자 입력을 관리하기 위한 모범 사례도 다룹니다. 이 장을 마치면 앱 내 데이터 무결성을 유지하면서 사용자 입력을 안전하고 효율적으로 수집하는 방법을 탄탄히 이해하게 됩니다.

Exercise 1: AI 앱이란 무엇인가요?Exercise 2: 대출 승인용 완성 앱 살펴보기 Exercise 3: 대출 담당자 승진 심사용 완성된 앱 Exercise 4: 링크된 입력 테이블로 기존 데이터를 보강하기 Exercise 5: 연결된 입력 테이블 이해하기 Exercise 6: 연결된 입력 테이블 만들기 Exercise 7: 승진 추천 수집하기 Exercise 8: 연결된 입력 테이블 동작 테스트 Exercise 9: 연결된 입력 테이블의 데이터 입력 관리 Exercise 10: 대출 담당자 입력 테이블 편집 관리

2장에서는 모달과 액션 시퀀스를 사용해 AI 앱을 더 상호작용적이고 반응형으로 만드는 방법을 배웁니다. 모달은 앱 안에 집중된 팝업 창을 제공해, 메인 인터페이스를 복잡하게 만들지 않으면서 추가 정보를 제공하거나 더 자세한 입력 공간을 제공합니다. 모달이 사용성을 높이고 사용자가 특정 작업을 단계적으로 수행하도록 어떻게 안내하는지 확인해 볼 거예요. 또한 액션 시퀀스를 소개합니다. 이는 버튼 클릭이나 테이블 행 선택과 같은 사용자 행동에 앱이 동적으로 반응하도록 해 줍니다. 단일 상호작용으로 여러 효과를 트리거하는 법을 익혀, 워크플로를 자동화하고 사용자 경험을 간소화할 수 있어요. 모달과 액션 시퀀스를 함께 활용하면 직관적이고 상호작용적이며 목적성이 뚜렷한 앱을 구축하는 강력한 도구를 갖게 됩니다.

Exercise 1: 모달로 결정과 사용자 입력 받기 Exercise 2: 승진 추천을 위한 모달 만들기 Exercise 3: 앱 워크플로를 위한 작업 시퀀스 활용 Exercise 4: 기본 액션 시퀀스 이해하기 Exercise 5: 모달 열기 액션 시퀀스 만들기 Exercise 6: 모달 열기와 닫기 트리거하기 Exercise 7: 컨트롤 값으로 모달 채우기 Exercise 8: 모달에 대출 담당자 ID 채우기 Exercise 9: 액션 시퀀스로 추천 기록 남기기 Exercise 10: 조건부 액션 시퀀스 추가하기 Exercise 11: 중복 지명 방지하기

3장에서는 AI 앱의 사용자 인터페이스와 전반적인 사용자 경험을 다듬는 데 집중합니다. 먼저 필터 메뉴를 숨기거나 필요한 순간에만 상황별 정보를 표시하는 다용도 UI 요소인 팝오버를 배웁니다. 이를 통해 필요한 제어와 정보를 쉽게 제공하면서도 앱을 깔끔하게 유지할 수 있어요. 또한 사용성과 시각적 완성도를 높여 주는 다양한 디자인 및 구성 기능을 살펴봅니다. 내비게이션 버튼, 구분선, 탭 컨테이너를 활용해 콘텐츠를 구조화하고 사용자가 앱을 더 효율적으로 탐색하도록 안내하는 방법을 익힙니다. 3장을 마치면 레이아웃과 디자인을 신중하게 선택하는 것이 AI 앱을 더 직관적이고 세련되며 사용하기 좋게 만드는 데 어떻게 기여하는지 이해하게 됩니다.

Exercise 1: Popover로 앱 인터페이스를 간결하게 만들기 Exercise 2: 페이지 제어를 담는 팝오버 구성하기 Exercise 3: 버튼을 활용한 탐색 및 상호작용

현재 연습

Exercise 4: popover에 'Clear filters' 버튼 추가하기 Exercise 5: 구성을 위한 UI 및 레이아웃 요소 추가 Exercise 6: 대출 담당자 승진 추천 앱 다듬기 Exercise 7: 모든 것을 하나로 정리하기 Exercise 8: 마무리