피그마에서의 팝업과 모달, 라이트박스, 다이얼로그 컴포넌트

팝업(Pop-up)

1. 팝업의 개념

• 문자 그대로 팝 하고 뛰어나온다는 뜻
• 화면 위에 새로운 화면을 띄우는 것

2. 팝업의 유형

네이버 메일 쓰기 윈도우 팝업

• 윈도우 팝업
  • 새로운 윈도우(브라우저 창)을 띄워 주는 방식
  • 점점 사용하지 않는 추세
    • 이유 1: 광고, 악성 코드 등을 방지하기 위해 브라우저에서 팝업 차단
    • 이유 2: 새로운 인터넷 창이 뜬다는 것이 사용자 입장에서 불편

네이버 메일 삭제하기 레이어 팝업

• 레이어 팝업
  • 현재 화면에서 코드로 만든 컴포넌트를 보여 주는 방식
  • 최근의 서비스에서는 적극 사용

 

모달(Modal)

모달 예시

1. 모달의 개념

• 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것
• UI를 분류하는 기준 중 하나 ("모달 속성을 가지고 있어요.")

2. 모달의 종류

• 팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등

3. 모달 사용 시 주의사항

• 사용자의 자연스러운 흐름을 방해하는 것으로, 사용자가 최종 목적지까지 가는 시간이나 비용을 증가시키기 때문에 모달이 많을수록 사용자의 불편함 증가
• 사용자를 방해하면서라도 반드시 확인해야 하는 부분이거나, 또는 그만큼 중요한 선택이 필요한 시점'에 사용

 

라이트박스의 UX

삭제하기/취소 버튼을 제외하고는 라이트박스 처리

1. 라이트박스의 개념

• 스크림(Scrim; 천 또는 장막), 딤드(Dimmed; 흐려진), 딤레이어(Dim Layer), 오버레이(Overlay)등으로도 불림
• 모달 UI를 사용할 때 일반적으로 '뒤에 가려진 화면은 사용할 수 없다'는 걸 알려 주기 위한 반투명한 층

2. 라이트박스의 사용법

• 반드시 사용해야 하는 것은 아니지만 사용자에게 혼선을 주지 않기 위해, 목적에 맞게 잘 사용하기 위해 권장되는 사항
• 라이트박스를 누르면 사용자가 취소 또는 뒤로 가려는 것으로 간주
• 매우 중요하거나 뒤로 돌아갈 수 없거나, 뒤로 돌아가면 진행 사항이 모두 삭제되는 경우에는 라이트박스 클릭을 제한

 

다이얼로그(Dialog)

1. 다이얼로그 컴포넌트의 정의

피그마로 생성해 본 다이얼로그 컴포넌트

• 컴포넌트 종류 중 컨테이너에 해당하며, 동시에 모달 속성을 가진 컴포넌트
• 사용자에게 중요한 선택을 받고, 사용자가 선택한 행동을 확인
• 사용자의 의사를 묻고 답을 얻을 때 사용

2. 다이얼로그의 구조

• 컨테이너(Container): 다이얼로그 안에 있는 요소들을 감싸고 있는 프레임
• 헤더(Header): 제목, 부가 설명 등이 들어간 제목 부분
  • 제목(Title, Heading): 다이얼로그의 제목
  • 부제목(Subtitle, Description, Hint Text): 다이얼로그의 내용을 설명하거나 제목을 뒷받침하는 보조 내용
  • 기타 썸네일 이미지, 아이콘, 닫기 버튼 등도 포함
• 액션(Action): 다이얼로그의 버튼 부분

3. 다이얼로그 설계 시 유의할 점

• 선택지의 유형에 따라 달라지는 조작법
  • A 또는 B를 선택해야 하는 상황, 경고 또는 확인 등을 표시하는 상황(Alert)이 다름
• 사용자 흐름에서 필수로 거쳐야 할 때 사용
  • 필연적으로 사용자를 방해하기 때문