[UX/UI 컴포넌트] 모달의 개념 Modal + 다이얼로그

 

모달의 개념

컨테이너 컴포넌트 알기 위한 필용한 속성

 

아토믹 시스템의 원리

원자들을 모아서 하나의 분자를 만드는 개념. 파운데이션 요소로 컴포넌트를 만듦.

 

컴포넌트를 모아 또 컴포넌트를 만드는 경우도 있다.

 유기체가 되지 못하고 아직도 컴포넌트인 상태. 버튼 컴포넌트에 폰트 스타일, 컬러 스타일, 여백 및 간격, 곡률 등이 합쳐졌음에도 유기체가 아니라 다시 컴포넌트가 됨. 대표적인 예가 '다이얼로그'. (→ 아토믹시스템의 문제) 그래서 합성 컴포넌트라는 개념이 등장하게 됨.

 

• 합성 컴포넌트는 대부분 버튼 컴포넌트에 파운데이션 또는 컴포넌트가 여러개 합쳐진 형태
• 이런 합성 컴포넌트들은 대부분 특정한 맥락을 담고 있기 때문에, 컨테이너 컴포넌트라고도 불러요.
• 컨테이너 컴포넌트에는 바텀시트, 다이얼로그, 리스트, 카드 등 복잡한 구조의 컴포넌트들이 있어요.

 

대표적인 컨테이너 컴포넌트 '다이얼로그'

 

모달 (Modal) 

팝업의 개념 : 화면 위에 새로운 화면을 띄우는 걸 일반적으로 팝업이라고 한다. Pop-up (톡 튀어나온다는 뜻).

웹에서 인스타그램을 사용 → 로그인 화면이 뜨고, 무신사는 → 설치 화면을 띄움. 쓱 웹사이트는 로그인을 누르면 새로운 인터넷 창이 열린다.

 

무신사 앱은 이벤트 화면이 아래에서, 쿠팡은 이벤트 안내가 화면 가운데에 새로 뜬다.

 

팝업의 유형

✅ 일반적으로 팝업이라고 부르는 것과 UI 관점에서 팝업은 차이가 있다. 모달의 개념을 이해하기 위해 팝업을 먼저 알아봐야 함.
✅ 팝업은 현재 화면 위에 새로운 화면을 띄우는 것
✅ 팝업의 2가지 유형 - 윈도우 팝업, 레이어 팝업

 

윈도우 팝업

• 쓱 처럼 **새로운 윈도우(브라우저 창)**을 띄워주는 방식
• 일반적으로 팝업이라고 부르는 건 이 방식

광고, 악성코드 등을 방지하기 위해 브라우저에서 팝업을 차단하고 새로운 인터넷 창이 뜬다는 건 사용자 입장에서 굉장히 불편하기 때문에 점점 사용하지 않는 추세

 

레이어 팝업

• 현재 화면에서 코드로 만든 컴포넌트를 보여주는 방식
• 대부분의 서비스는 이 방식으로 팝업을 보여줌
• 새로운 창을 띄우는 것이 아니라, 현재 화면에서 컴포넌트로 만든 레이어(층)를 하나 더 보여주는 개념.

 

모달의 개념

웹으로 인스타그램을 접속하면, (로그인 하지 않았을 때) 다음과 같은 화면이 나온다. 이 화면에서, 사용자는 로그인 화면 뒤쪽에 숨겨진 피드 게시물을 누르거나 스크롤 할 수 없다.

뒤쪽에 있는 게시물은 누르거나 스크롤할 수 없다는 걸 어떻게 아는 걸까?

로그인 화면과 가려진 원래의 화면 사이에 있는 반투명한 까만 층이 원래의 화면을 살짝 어둡게 가리면서 ‘지금은 여기는 작동하지 않아’ 라는 걸 알려주고, 로그인 화면에 시선을 집중시킨다.

모달의 개념 :
사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것을 뜻한다.

까맣게 가려진 뒤쪽 화면은 조작할 수 없다.

 

실제로 현업 디자이너들도 레이어 팝업과 모달을 같은 뜻으로 혼용하는 경우가 많음. 또 회사마다 팝업을 모달이라고 부르는 경우도 있을 수 있다. (말이 라는 것은 사용하는 사람들의 합의로 이루어지는 것이 때문에 틀리다고 하기 어렵다.) 따라서 디자이너가 팝업과 모달의 차이를 정확히 알고 있어야 가이드라인도 만들 수 있다.

✅ 모달은 치트키다.
디자이너 입장에서 사용하기 편하다. 난감하거나 다루기 어려운 상황을 쉽게 해결할 수 있는 일종의 치트키와 같다. 그래서 남발하는 경우도 있음. (ex: 기능을 유저에게 설명할 때, 설명 없이 직관적으로 알 수 있는 것이 베스트지만 그렇게 잘 설계되지 않는 경우에는 모달을 이용해 사용방법을 알려줄 수 있다 → 기능을 연결하는 징검다리 역할. OR 여러가지 스텝을 나눠서 설명할 때 등등)

 

모달의 종류

• 모달은 우리가 앱이나 웹을 사용하면서 굉장히 많이 발견할 수 있는 UI들.
• 팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등 많은 UI들이 모달로 사용되고 있다.
• 대표적인 모달 중 하나가 '다이얼로그'

 

라이트박스의 UX

라이트박스 다양한 명칭 :
스크림(Scrim; 천 또는 장막), 딤드(Dimmed; 흐려진), 딤레이어(Dim Layer), 오버레이(Overlay) 등

모달 UI를 사용할 때는 일반적으로 ‘뒤에 가려진 화면은 사용할 수 없다’는 걸 보여주기 위해 반투명한 층을 만든다. 이 반투명한 층을 **라이트박스(Lightbox)**라고 한다.

라이트박스의 사용법

라이트박스는 반드시 써야하는 것은 아니에요.

• 라이트박스는 사용자에게 모달과 배경을 명확하게 분리해주고 집중해야 하는 부분을 안내하기 위한 목적이지, 모달에 반드시 같이 써야 하는 것은 아니다.
• 다만 라이트박스가 없다면 사용자가 봐야 하는 중요한 부분을 발견하기 힘들다보니 조작을 잘못 하거나 다른 부분을 누를 가능성이 높아지기 때문에, 라이트박스는 권장 사항 (이라 쓰고 반강제로 읽는다.)

매우 중요한 선택을 해야하는 순간이라 뒤로 돌아갈 수 없거나, 뒤로 돌아가면 지금까지의 진행 상황이 모두 삭제되는 경우라면 라이트박스를 눌러도 꺼지지 않도록 해야한다. (사용자의 실수로 작성한 내용이 다 사라졌을 때 어떤 결과가 발생할지 유념해야 한다.)

 

 

모달 사용할 때, 반드시 써야하는지 고민해 보자!
완전히 다른 접근으로 새롭게 풀어낼 수 있음에도 모달UI (특히 다이얼로그)로만 풀어내려고만 하면
더 나은 디자인을 할 수 있는 기회가 사라질 수 있다.

모달 사용 시 주의사항

모달 판단 기준 :
뒤에 숨겨진 화면의 동작을 할 수 있는지! 즉, 사용자가 원래 쓰고 있던 화면을 잠가버리고, 사용자가 뭔가 행동을 하기 전까진 풀어주지 X

로그인 또는 가입하기 전까진 뒤에 숨겨진 화면을 조작할 수 X

 

사용자의 자연스러운 흐름을 방해하고, 사용자가 최종 목적지까지 가는 시간이나 비용을 증가시키기 때문에 모달이 많을 수록 사용자가 불편해할 가능성이 매우 높아진다.

‘사용자를 방해하면서라도 반드시 확인해야 하는 부분이거나, 또는 그만큼 중요한 선택이 필요한 시점’에 사용해야 해야 한다.

 

다이얼로그 컴포넌트

시스템 마다 세세하게 차이가 있다. UI는 답이 없기 때문에 잘 만들어진 시스템 여러가지를 놓고 비교하며, "이거는 이런식으로 붙이는 이유가 있고, 저거는 저런 목적 때문에 저렇게 설계가 되었구나"라고 찾아내야 한다. 이렇게 해야 UI를 보는 관점이 깊어지고 제 3의 인사이트를 찾아낼 수 있다.

다이얼로그 컴포넌트 참고하기 :

머티리얼 디자인

Dialogs – Material Design 3

우버 디자인 시스템

Base Design System

카본 디자인 시스템

Carbon Design System

라이트닝 디자인 시스템

Modals - Lightning Design System

 

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

• 컴포넌트의 종류 중 컨테이너에 해당하는 컴포넌트
• 컨테이너 컴포넌트이면서, 동시에 모달 속성을 가진 컴포넌트

✅ 다이얼로그는 사용자에게 중요한 선택을 받고, 사용자가 선택한 행동을 확인하는 컴포넌트.
✅ 다이얼로그(dialog)의 뜻은 대화(conversation)예요.
✅ dia(between) + logos(speaking) = dialog(-ue)

✅ 즉, 다이얼로그 컴포넌트는 대화 그 자체라는 뜻. 제품은 어떤 선택을 할 지 묻고, 사용자는 버튼을 통해 답한다.. 사용자가 어떤 선택을 해야 할 때, 제품은 다이얼로그의 형태로 어떻게 할 건지를 물어본다. 사용자는 선택지를 버튼의 형태로 제품에 답변을 준다. 다이얼로그를 쓴다는 건 사용자의 의사를 묻고 답을 얻을 때 사용.

👉🏻 현업에서 모달이라는 말은 실제로 다이얼로그 컴포넌트를 가리킬 때가 많다.

 

 

다이얼로그의 구조

컴포넌트 구조의 이름은 만드는 사람들마다 조금씩 차이가 있다. 이름보다는 각 영역이 어떤 기능을 하는지에 초점을 맞추고 비교하자.

1. 컨테이너(Container) - 다이얼로그 안에 있는 요소들을 감싸고 있는 프레임

2. 헤더(Header) - 다이얼로그의 제목, 부가설명 등이 들어간 제목 부분

• 제목(Title, Heading): 다이얼로그의 제
• 부제목(Subtitle, Description, Hint Text): 다이얼로그의 내용을 설명하거나 제목을 뒷받침하는 보조 내용

헤더 부분에는 썸네일 이미지나 아이콘, 닫기 버튼 등이 들어갈 수도 있다. (인비전 뉴스레터. 출처 - UI Patterns)

 

3. 액션(Action) - 다이얼로그의 버튼 부분

액션 부분에는 버튼이 여러개 들어갈 수도 있다.

 

다이얼로그 설계에서 유의할 점

✅ 선택지의 유형에 따라 조작법이 달라진다.

• • 사용자가 A 또는 B를 선택해야 하는 상황과, 사용자에게 경고 또는 확인 등을 표시할 때가 달라요.
  • 일반적으로 전자의 경우를 다이얼로그라고 부르고, 후자의 경우를 "얼럿(Alert)"이라고 불러요.

다이얼로그의 경우에는 라이트박스를 누르면 취소 또는 닫기를 누른 것과 동일
즉, 라이트박스를 누르면 다이얼로그가 닫힘.

반면에, 얼럿Alert의 경우에는 사용자가 반드시 알아야 하는 중요한 서비스 상태와 관련이 깊기 때문에, 사용자가 반드시 버튼을 눌러 확인하거나 직접 취소를 눌러 닫힘.

왼쪽이 다이얼로그, 오른쪽이 얼럿. 내용을 확인해보자!

 

✅ 사용자 흐름에서 필수로 거쳐야 할 때 사용해요.

• 다이얼로그는 필연적으로 사용자를 방해함.
• 그만큼 중요한 시점에 쓰거나 반드시 받아야 하는 정보만 받아야 한다.

→ 만약 사용자가 반드시 확인해야 하는 정보가 아니라면 다이얼로그나 얼럿을 피해야 한다.

☘️ 이런 경우에 사용하는 요소로는 토스트(스낵바). 사용자가 선택한 행동의 결과 또는 처리 결과를 안내할 때 사용한다.

 

피드백을 잘 전달했다는 이야기는 다이얼로그나 얼럿으로 하지 않는 것이 바람직함

 

다이얼로그 만들기 실무 팁

다이얼로그는 다양한 경우에 사용하기 때문에 내용을 컴포넌트로 미리 만들어 놓기 어려움.. 따라서 헤더와 액션만 컴포넌트로 만들고, 내용 부분만 따로 만들면 유연하게 사용할 수 있다.  (헤더와 액션을 분리해서 만들고, 따로 관리하게 만들어 주어야 한다.)