Modal과 Dialog의 차이

 

요즘 디자이너와의 최종 팀프로젝트를 진행 중이다.

 

나는 MVP 구현 단계에서 시스템 컴포넌트 제작을 맡았다.

그동안 팀프로젝트에서 각자 맡은 페이지의 컴포넌트는

알아서 만드는 식으로 진행했었다.

 

이번 기회에 공용 컴포넌트를 만들어보는 좋은 경험을 할 것 같다.

겸사겸사 storybook도 배워두면 좋을 것 같다.

 

공용 컴포넌트를 어떻게 만들어야

다른 팀원이 편하게 쓸지... 고민을 많이 해보는 중이다.

 

 

 

 

오늘 시스템 디자인 도안이 나와서 둘러보던 중,

다이얼로그를 보게 되었는데

개발자들은 이걸 모달이라고 부르는 것 같은데

무슨차이가 있는지 궁금해졌다.

 

 

Modal과 Dialog는 비슷한 개념이지만 약간의 차이가 있다.

둘 다 사용자와 상호작용할 수 있도록 도와주는 창이다.

 

1. Modal (모달):
   • 모달은 사용자가 현재의 작업을 계속하기 전에 반드시 그 창을 닫아야 하는 창
   • 화면의 나머지 부분은 덮여져서 사용자가 다른 작업을 할 수 없게 된다.
   • 예를 들어, "저장하지 않은 변경사항이 있습니다. 저장하시겠습니까?" 같은 메시지가 모달로 나타날 수 있다.
2. Dialog (다이얼로그):
   • 다이얼로그는 좀 더 넓은 의미로 사용되는 용어이다. 기본적으로 사용자와의 상호작용을 위한 작은 창
   • 다이얼로그는 모달일 수도 있고, 그렇지 않을 수도 있다. 즉, 모달은 다이얼로그의 한 종류라고 할 수 있다.
   • 예를 들어, 사용자에게 선택지를 제공하는 확인 메시지나 폼이 다이얼로그가 될 수 있다.

 

 

간단히 말하면,

모달은 사용자가 상호작용을 하기 위해 반드시 닫아야 하는 다이얼로그를 의미하고,

다이얼로그는 더 일반적인 상호작용을 위한 창을 말한다.