[기타]혼동되는 용어 정리(modal, pop-up, dialog 등)

디자인 시스템이나 프로덕트에 따라 여러 요소를 컴포넌트로 정의하기도하고 스타일을 나눠서 쓰기도한다. 정답은 없으므로 요소의 형태를 잘 분리하고 정의해서 알맞게 잘 활용하는 것이 제일 중요하다.

 

• 모달(Modal) :  사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것(즉, UI를 분류하는 기준 중 하나)
  • 사용자가 원래 사용하던 화면을 잠궈 액션을 하기전까지 풀어주지 않음
    → 사용자의 흐름을 방해할 수도 있으므로 최종 목적지까지 가는 시간, 비용을 줄이기 위해 모달을 줄이는 게 좋음. but 방해를 해서라도 반드시 확이해야하는 부분 or 중요한 선택이 필요한 시점에 적절하게 사용하는 것이 관건
• 팝업(Pop-up) : 현재 화면 위에 새로운 화면을 띄우는 것
  • 윈도우팝업 : 새로운 브라우저 창을 띄워주는 방식(요즘은 사용하지 않는 추세)
  • 레이어 팝업 : 현재 화면에서 컴포넌트로 만든 레이어 층을 하나 더 보여주는 개념
• 팝오버(Popover)(Infotip) : 아이콘 요소(Trigger)를 클릭했을 때 주위에 작게 말주머니 형태로 뜨는 컴포넌트. 주로 보조 설명을 하며 링크, 이미지,아이콘 등 다양한 요소를 사용하여 추가정보를 제공함. mouse click 인터랙션으로 작동(모바일보단 PC에서 사용, 내용이 많을 경우엔 dialog나 popup을 사용하는 것이 좋음)
• 툴팁(Tooltip) : 텍스트요소만 담을 수 있으며 주로 단어 또는 짧고 간결한 하나의 문장만 제공. mouse hover 인터랙션으로 작동
• 라이트박스(Light box) : 모달 UI를 사용하기 위해 뒤에 가려진 반투명한 층을 뜻함(같은말로 스크림Scrim, 딤드Dimmed, 딤레이어Dimlayer, 오버레이Overlay 등이 있음)
• 다이얼로그(Dialog) : 컨테이너 컴포넌트면서 동시에 모달 속성을 가진 컴포넌트로 사용자의 의사를 묻고 답을 얻을 때 주로 사용함(현업에서 모달은 실제 다이얼로그를 지칭할 때가 많음)  주로 요소를 감싸는 컨테이너와 그안에 헤더와 액션버튼으로 이루어져 있음. 라이트 박스 영역을 누르면 닫을 수 있음
• 얼럿(Alert) : 사용자에게 주의나 경고 또는 확인 등을 일방적으로 표시할 때 사용. 다이얼로그와 다르게 라이트박스를 눌러도 닫히지 않으며 사용자가 반드시 버튼을 눌러 확인하거나 직접 취소를 눌러서 닫아야함.
• 토스트(스낵바) : 사용자가 반드시 확인해야하지만 다이얼로그나 얼럿만큼의 중요성이 아닐 경우에 사용. 주로 사용자가 선택한 행동의 결과 또는 처리결과를 안내할 때 사용
• Confirm : 사용자의 행위에 대해 true/false로 선택 가능하며 다음행동을 결정할때 사용. 사용자에게 한번더 생각하거나 취소할 여지를 줌.