[내일배움캠프] Day 36 - 디자인 카타 - 모달, 팝업, 스낵바, 시트

1. 모달(Modal)

🔸 정의

모달은 사용자의 현재 작업을 중단시키고, 중요한 정보를 제공하거나 사용자 결정(확인, 취소 등)을 유도하는 컴포넌트

화면의 중앙에 배치되어 사용자의 주의를 집중시키며, 사용자 입력이나 피드백을 요구. 모달이 열리면 배경 화면은 블러 처리되거나 비활성화됨

🔸 기능

• 필수 사용자 입력: 중요한 정보 전달, 사용자의 선택 필요
• 집중도 향상: 오직 한 가지 행동을 요구하여 사용자의 주의를 집중
• 배경 상호작용 제한: 모달이 닫히기 전까지 배경과 상호작용 불가

🔸 사용 시점

• 데이터 삭제, 저장과 같은 중요한 결정을 요구할 때
• 사용자 로그인/회원가입 폼
• 앱 사용 중 중대한 경고나 에러 알림

🔸 Figma 디자인 팁

• 레이어 순서를 명확히 하여 모달이 상단에 위치하도록 설정
• 블러 효과나 다크 오버레이로 배경과 구분
• 버튼은 **주요(Primary) / 보조(Secondary)**로 명확히 구분
• Auto Layout을 사용해 콘텐츠 중앙 정렬 유지

🔸 실제 예시

• 구글 Gmail에서 이메일 삭제 시 뜨는 확인 모달
• Figma 내에서 플러그인 실행 시 나타나는 설정 모달

---

2. 팝업(Popup)

🔸 정의

팝업은 사용자가 특정 행동을 할 때 추가 정보를 제공하거나 간단한 입력을 요구하는 컴포넌트. 모달과 달리 팝업은 사용자의 흐름을 방해하지 않으며, 주로 특정 UI 요소 근처에서 나타남

🔸 기능

• 도움말 제공: 사용자의 이해를 돕는 툴팁
• 옵션 제공: 필터, 드롭다운 등 간단한 선택 옵션
• 사용 흐름 유지: 배경과의 상호작용이 가능함

🔸 사용 시점

• 툴팁으로 짧은 설명을 제공할 때
• 드롭다운 형태로 옵션을 선택할 때
• 우클릭 시 나타나는 컨텍스트 메뉴

🔸 Figma 디자인 팁

• 컴포넌트 사용으로 일관성 유지
• 팝업은 화면 요소에 맞게 위치하도록 디자인
• 팝업 닫기 영역을 고려해 사용자 경험을 설계

🔸 실제 예시

• 웹사이트의 이미지 우클릭 시 나타나는 메뉴
• Figma에서 도형을 선택하고 옵션을 변경할 때 나타나는 팝업 메뉴

---

3. 스낵바(Snackbar)

🔸 정의

스낵바는 작업 완료, 상태 변경과 같은 간단한 피드백을 화면 하단에 잠시 표시하는 컴포넌트
사용자의 흐름을 방해하지 않으며, 자동으로 사라짐

🔸 기능

• 작업 피드백 제공 (예: "파일이 저장되었습니다.")
• 간단한 액션 포함 (예: "되돌리기")
• 자동으로 사라지거나 사용자가 직접 닫을 수 있음

🔸 사용 시점

• 작업 완료 알림 (파일 저장, 메시지 전송 등)
• 오류나 성공 알림
• 네트워크 상태 변화 알림

🔸 Figma 디자인 팁

• 화면 하단에 고정되도록 Auto Layout 사용
• 색상은 피드백 성격에 따라 차별화 (성공/실패/경고)
• 애니메이션 효과로 자연스럽게 등장하도록 설정

🔸 실제 예시

• 구글 드라이브에서 파일을 업로드한 후 나타나는 메시지
• Figma에서 디자인을 저장할 때 하단에 나타나는 알림

---

4. 시트(Sheet)

🔸 정의

시트는 화면의 하단(또는 옆)에서 슬라이드 형태로 등장하는 패널, 추가 정보나 선택 옵션을 제공.
사용자는 시트를 통해 필요한 정보를 빠르게 확인하거나 작업을 수행할 수 있음

🔸 기능

• 옵션 제공: 사용자에게 추가적인 선택지를 제공
• 보조 정보: 메인 콘텐츠와 관련된 세부사항 제공
• 상호작용 흐름 유지: 사용자는 시트를 닫을 수 있으며, 메인 콘텐츠와 자유롭게 상호작용 가능

🔸 사용 시점

• 옵션 선택을 요구할 때 (필터, 정렬 등)
• 상세 정보 제공 (상품 설명, 설정 등)
• 모바일 앱에서 기능 확장 시

🔸 Figma 디자인 팁

• Auto Layout으로 유연한 확장성 확보
• 슬라이드 애니메이션을 사용해 자연스럽게 등장
• 시트는 시각적 계층을 명확하게 설계 (배경과 대비)

🔸 실제 예시

• 모바일 앱에서 사진을 업로드할 때 선택 옵션을 제공하는 시트
• Figma에서 플러그인 사용 시 나타나는 사이드 패널

---

OS별 명칭과 차이점

컴포넌트	구글 (Material Design)	애플 (Human Interface Guidelines)
모달	Dialog	Modal View
팝업	Popup Menu, Tooltip	Popover, Tooltip
스낵바	Snackbar	Toast
시트	Bottom Sheet	Action Sheet

 

---

Figma에서 컴포넌트 활용 팁

1. 컴포넌트화: 자주 사용하는 모달, 팝업, 스낵바, 시트는 컴포넌트로 만들어 재사용성 확보
2. Auto Layout 활용: 반응형 디자인을 위해 Auto Layout을 적극 활용
3. Interaction 설계: 프로토타이핑에서 각 컴포넌트의 열림, 닫힘 애니메이션을 세밀하게 설계
4. 플러그인 활용: Figma 플러그인을 사용하여 모달, 시트 등을 효율적으로 관리

 

---

 

1. 모달 (Modal)

올바른 사용 사례

• 중요한 결정 유도 : 사용자가 삭제, 저장, 결제와 같은 중대한 결정을 내려야 할 때
  예시 : "정말로 이 파일을 삭제하시겠습니까?"
• 중요한 정보 입력 : 회원가입, 결제 정보 입력과 같이 완료 전까지 사용자 진행을 멈추게 할 때
  예시 : 로그인, 비밀번호 변경
• 긴급한 경고 : 사용자의 행동이 되돌릴 수 없는 경우
  예시 : "이 작업은 되돌릴 수 없습니다. 계속하시겠습니까?"

사용 이유

• 사용자 집중 유도 : 배경을 블러 처리하여 오직 모달에만 집중하게 함
• 의사결정 요구 : 사용자가 필수적인 선택을 내려야 하는 상황에서 효과적
• 일관성 유지 : 일관된 디자인으로 사용자의 혼란 방지

---

2. 팝업 (Popup)

올바른 사용 사례

• 도움말/설명 제공 : 버튼이나 아이콘에 마우스를 올렸을 때 간단한 정보를 제공할 때
  예시 : 버튼에 마우스를 올렸을 때 나타나는 "파일 다운로드" 설명
• 옵션 선택 : 우클릭 시 나타나는 컨텍스트 메뉴, 필터링 드롭다운
  예시 : "보기 옵션"을 선택하기 위한 드롭다운 메뉴
• 신속한 피드백 : 짧은 알림 또는 즉시 제공되어야 할 정보
  예시 : "복사 완료"와 같은 간단한 메시지 팝업

사용 이유

• 사용자의 흐름 방해 최소화 : 모달처럼 사용자의 진행을 멈추지 않음
• 보조 정보 제공 : 사용자가 필요할 때만 정보를 제공해 불필요한 복잡성 제거
• 빠르고 유연한 사용성 : 특정 행동을 했을 때 빠르게 정보를 표시 가능

---

3. 스낵바 (Snackbar)

올바른 사용 사례

• 작업 완료 알림 : "파일이 저장되었습니다."와 같은 작업 성공 알림
• 단순한 피드백 제공 : 사용자의 행동에 대한 즉각적인 피드백
  예시 : "메시지가 전송되었습니다."
• 간단한 행동 제시 : "되돌리기"와 같은 행동을 유도하는 피드백
  예시 : "메일이 삭제되었습니다. [되돌리기]"

✅ 사용 이유

• 사용자 경험 방해 최소화 : 사용자가 현재 작업을 멈추지 않고도 피드백을 받을 수 있음
• 시간 제한형 알림 : 일정 시간이 지나면 자동으로 사라져 사용자에게 부담이 되지 않음
• 간단한 행동 제시 : 필요한 경우 추가 행동을 유도할 수 있음

---

4. 시트 (Sheet)

올바른 사용 사례

• 옵션 선택 또는 설정 : 사용자가 선택해야 할 항목이 많을 때
  예시 : "필터 옵션 선택"을 위한 바텀 시트
• 추가 세부 정보 제공 : 메인 화면을 벗어나지 않고 세부 정보를 보여줄 때
  예시 : 상품 상세정보, 댓글 목록
• 사용자 행동 유도 : 시트를 통해 다음 행동을 유도할 때
  예시 : "배송 방법 선택"

사용 이유

• 사용자 흐름 유지: 메인 화면을 유지하면서 추가적인 정보나 선택을 할 수 있음
• 명확한 계층 구조 제공: 정보의 우선순위를 명확히 할 수 있음
• 반응형 UX 제공: 모바일 화면에서 자연스럽게 확장/축소되어 사용자 경험을 향상시킴

 

---

 

[마무리]

 

오늘은 아침 디자인 카타 시간에 조별 발표를 하고

그 뒤로 쭉 개인과제 진행중인데
테스트 자료 정리가 시간이 너무 많이 들어갔다

이제 문제 정리하고 디자인해야되는데 진이 빠짐ㅠㅠ