Modal은 UX디자인에서 가장 많이 사용하는 컴포넌트 중 하나로, 사용자의 시선을 집중시킬 때 사용합니다. 예를 들어, 메일을 삭제하는 것과 같이 유저의 특정 행위 이후에 기존의 데이터를 더 이상 복구하거나 볼 수 없는 경우 Modal을 사용하여 사용자에게 다시 한 번 행위에 대한 진행 여부를 물어봅니다.
팀원가 대화를 할 때 Modal과 Popup을 혼용하여 사용하는 경우가 많습니다. 이 둘은 분명히 다른 차이점이 존재했습니다.
Popup은 이벤트, 사과문, 안내문 등 처음 페이지에 진입했을 때 바로 노출되는 것을 의미합니다. 페이지 내의 메인서비스와 관계없이 뜨는 독립적인 창 등이 팝업에 해당된다고 할 수 있습니다. 반면에 Modal은 서비스와 관련해 다음 단계로 나아가기 위한 필수적인 창입니다. Modal에 진입한 사용자는 서비스의 흐름에서 벗어나, Modal내 컨텐츠에 집중한 후, Modal을 벗어나는 순간 다시 원래 컨텐츠(부모)의 위치로 돌아갈 수 있어야 합니다.
Modal과 Page의 차이점 또한 여럿 있습니다. Modal이 띄어지면 사용자는 부모 화면을 컨트롤할 수 없습니다. Modal 내 컨텐츠를 완료하거나 닫아야 부모 화면에 접근할 수 있습니다. 그에 반해 Modal이 없는 Page는 부모 화면을 사용자가 컨트롤할 수 있습니다.
프로젝트 이슈 중, 포즈 사진에 대한 상세 정보 페이지를 Modal로 구현할 지, Page로 구현할 지에 대해 고민한 적이 있습니다. 물론 이 사항은 여러 문제들이 복잡하게 얽혔었지만, 상세 정보 페이지같은 경우 Modal이 아닌 페이지로 구성되어야 한다고 생각합니다.
만약 상세 정보페이지가 리뷰나, 구매 같은 다른 작업이 없는 엔드포인트였다면 Modal을 사용해도 아무런 문제가 없을 지도 모릅니다. 하지만 상품 상세 페이지는 사용자가 더욱 깊이 탐색할 수 있으며, 위에 말했듯 다양한 추가 작업등을 수행할 수 있기 때문에, 명확한 엔드포인트가 없고, 서비스 흐름에서 벗어나는 것이 아니며, 주요 서비스 흐름의 일부분입니다. 따라서 Modal이 아닌 Page 단위로 처리하는 것이 올바른 것 같습니다.