보충 설명이 필요한 내용은 Modal을 사용해서 UX를 높임

모달 도입 이유?

• 페이지 상 중요 내용은 아니었다. (LRAT 이론을 사용하게 된 배경)
• 그러나 UX를 생각했을 때, 사용자가 이해하기 어려울 수 있을 것 같았다.
• 정보가 궁금한 사용자는 글자를 클릭함으로써 → 정보를 보기 쉽게 정리해서 보여주고 → ‘확인’이나 ‘X’ 버튼을 누르면 다시 메인 페이지로 가는 플로우로 짜면 되겠다.
• 그러면 Modal 을 도입하면 되겠지!

 

모달의 역할?

• FE 포지션 친구와 얘기하면서 친구가 보통 모달은 알림창이나 입력창으로만 봐서 추가정보도 띄워주는 것인지? 의문을 제기해줬다.
• 그래서 의문을 해결하기 위해 모달 컴포넌트는 왜 사용하는지, 역할이나 목적은 어떤 게 있는지 검색해봤다.

Modal과 Popup의 차이를 먼저 알아봤다.

두 가지 모두 사용자에게 정보를 보여주거나 상호작용을 유도하는 데 사용된다.

• Popup은 친구가 보통 봐왔던 광고나 알림 메시지 등 짧은 정보를 표시하는 데 주로 사용된다.
• Modal은 팝업과 비슷하게 사용자에게 정보를 보여주거나 추가 작업을 유도하는 데 사용하지만, 뷰포트 안에 콘텐츠를 중앙에 위치시켜 모달 외부의 요소에 대한 상호작용이 일시적으로 막히는 특징이 있다. 그래서 추가적인 정보를 제공, 정보를 입력받는 양식으로 주로 사용되며 사용자의 주의를 집중시키는 힘이 팝업보다 강하다.

정리하면,

Popup은 현재 창을 벗어난 새 창으로 나타나지만, Modal은 현재 창인 뷰포트 안에 나타난다.

참고: https://brunch.co.kr/@minakoro/156, https://www.coneboy.kr/54/?idx=18153167&bmode=view

 

검색한 결과를 토대로 친구와 다시 얘기해본 결과,

• 현재 띄워줄 추가 정보는 Popup이 아니라 Modal로 만들면 알맞을 것 같다는 의견으로 일치되었다.
• Front-end 개발자는 사용자가 보기 쉽게 화면을 구성하는 것도 중요하지만, 사용하려는 컴포넌트가 내가 의도하는 역할과 상응하는지 검토하는 작업도 필요하다는 것을 깨달았다.

 

모달 사용 시 신경 쓴 점

• 필요한 경우에만 사용
  • 사용자의 결정으로 필요할 때만 띄워주기
• 간결하고 명확하게 집중할 수 있게 함
  • 모달 표시 내용은 한 눈에 이해할 수 있도록 디자인하기
  • 모달을 띄웠을 땐 메인 페이지의 스크롤은 막아놓기
• 쉽게 닫을 수 있어야 함
  • 사용자가 쉽게 닫을 수 있도록 ‘닫기’나 ‘확인’버튼을 명확하게 하기
  • 모달 바깥 배경을 클릭해서 모달을 닫는 옵션도 제공하기

 

개발과정

src/components/Modal

→ 모달은 한 번 만들어 두면 나중에 또 쓰일 것 같아서 공통 컴포넌트 폴더에 생성했다.

 

React에서 기본적으로 제공해주는 createPortal api를 사용

모달을 띄웠을 땐 메인 페이지 body의 스크롤은 막아놓기

모달 바깥 배경을 클릭해서 모달을 닫는 옵션 제공하기