0108_figma (+팝업과 모달)

1. 모달

1) 합성 컴포넌트와 컨테이너 컴포넌트

그런데, 파운데이션 요소만으로는 만들 수 없고, 컴포넌트를 모아 또 컴포넌트를 만드는 경우가 있다.

이런 컴포넌트들을 합성 컴포넌트(Compound Component)라고 한다.

- 합성 컴포넌트는 대부분 버튼 컴포넌트에 파운데이션 또는 컴포넌트가 여러개 합쳐진 형태예요.

- 이런 합성 컴포넌트들은 대부분 특정한 맥락을 담고 있기 때문에, 컨테이너 컴포넌트라고도 부른다

- 컨테이너 컴포넌트에는 바텀시트, 다이얼로그, 리스트, 카드 등 복잡한 구조의 컴포넌트들이 있다

 

2) 모달(Modal)

*팝업의 개념

팝업(Pop-up)은 문자 그대로 팝하고 튀어나온다는 뜻

인터넷이나 앱을 쓰다보면 정말 많은 화면들을 보게 돼요.

화면 위에 새로운 화면을 띄우는 걸 일반적으로 팝업이라고 함

 

2) 팝업의 유형

팝업은 현재 화면 위에 새로운 화면을 띄우는 것

-1) 윈도우 팝업

새로운 윈도우(브라우저 창)을 띄워주는 방식

윈도우 팝업은 점점 사용하지 않는 추세

 

- 1) 광고, 악성코드 등을 방지하기 위해 브라우저에서 팝업을 차단한다.

팝업이 차단됨에 따라, 윈도우 팝업 역시 그 효용성이 많이 떨어졌어요.

-2) 새로운 인터넷 창이 뜬다는 건 사용자 입장에서 굉장히 불편해요.

 

2) 레이어 팝업

현재 화면에서 코드로 만든 컴포넌트를 보여주는 방식

레이어 팝업은 새로운 창을 띄우는 것이 아니라, 현재 화면에서 컴포넌트로 만든 레이어(층)를 하나 더 보여주는 개념이에요.

3) 그래서 모달은 무엇일까?

이 화면에서, 우리는 로그인 화면 뒤쪽에 숨겨진 피드 게시물을 누르거나 스크롤 할 수 없어요.

 

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

이 까만 층이 하는 일은 다음과 같아요.

원래 화면에서 로그인을 보여주면서, 뒤쪽의 화면은 잠시 멈춘다는 걸 안내해요

 

2) 로그인 화면에 시선을 집중시켜요.

중요하지 않은 다른 것들은 가려서 사용자가 현재 해야 하는 가장 중요한 부분만 볼 수 있도록 해줘요.

모달의 개념

모달은 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것을 뜻해요.

모달(Modal)이라는 건 UI의 이름이 아니라, UI를 분류하는 기준 중 하나라는 뜻이에요.

로그인 화면에서 뒤에 가려진 부분을 조작할 수 없다면, 로그인 화면은 모달이에요.

 

모달의 종류

모달은 우리가 앱이나 웹을 사용하면서 굉장히 많이 발견할 수 있는 UI들이에요.

팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등 많은 UI들이 모달로 사용되고 있어요.

 

3) 라이트박스의 UX

모달 UI를 사용할 때는 일반적으로 ‘뒤에 가려진 화면은 사용할 수 없다’는 걸 보여주기 위해 반투명한 층을 만들어 줘요.

이 반투명한 층을 라이트박스(Lightbox)라고 불러요.'

 

2) 라이트박스의 사용법

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

라이트박스는 사용자에게 모달과 배경을 명확하게 분리해주고 집중해야 하는 부분을 안내하기 위한 목적이지, 모달에 반드시 같이 써야 하는 것은 아니에요.

다만 라이트박스가 없다면 사용자가 봐야 하는 중요한 부분을 발견하기 힘들다보니 조작을 잘못 하거나 다른 부분을 누를 가능성이 높아지기 때문에, 라이트박스는 권장 사항이에요!

 

- 2) 라이트박스를 누르면 사용자가 취소 또는 뒤로 가려는 것으로 간주해요

라이트박스를 누르면 모달을 열기 전으로 다시 되돌려주는 것이 일반적인 방법이에요.

다만, 매우 중요한 선택을 해야하는 순간이라 뒤로 돌아갈 수 없거나, 뒤로 돌아가면 지금까지의 진행 상황이 모두 삭제되는 경우라면 라이트박스를 눌러도 꺼지지 않도록 해야 해요.

 

4) 모달 사용 시 주의사항

모달은 뒤에 숨겨진 화면의 동작을 할 수 있는지가 모달인지 아닌지를 판별하는 기준

즉, 사용자가 원래 쓰고 있던 화면을 잠가버리고, 사용자가 뭔가 행동을 하기 전까진 풀어주지 않아요.

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

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