[팝업종류별정의]모달 팝업,토스트팝업,드롭다운팝업 등 총정리

파화면설계서 작업 중 가장 많이 사용 UI가 팝업입니다.

화면 및 상황에 따라 노출되어야 하는 팝업의 종류와 기능이 모두 다르기에 기획자라면 반드시 숙지하고 있어야 합니다.

 

주요 팝업 종류

1. 모달 팝업 (Modal Popup)
   모달 팝업은 웹 개발, 특히 리액트(React)와 같은 프론트엔드 라이브러리에서 자주 사용되는 UI 요소입니다. 모달 팝업은 사용자의 주의를 끌고 특정 작업을 완료하도록 강제하는 데 사용됩니다. 모달 팝업의 주된 특징은 다음과 같습니다.
   
   1. 강제성: 사용자가 모달 팝업이 열려 있는 동안은 배경의 다른 요소와 상호작용할 수 없게 만듭니다. 이를 통해 중요한 메시지나 입력을 사용자가 무시할 수 없게 합니다.
   2. 배경 흐림: 모달 팝업이 활성화되면 배경을 흐리게 처리하여 팝업 창에 집중할 수 있도록 합니다. 일반적으로 배경은 반투명 검정으로 설정됩니다.
   3. 중심 배치: 팝업은 보통 화면의 중앙에 나타나며, 사용자가 즉시 눈에 띄게 됩니다.
      

      

      모달팝업

      
      
      
   리액트에서 모달 팝업을 구현할 때는 주로 상태(state)와 이벤트 핸들러를 사용하여 팝업의 열림과 닫힘을 제어합니다.
   
   • 설명: 모달 팝업은 화면 중앙에 나타나며, 사용자가 팝업을 닫기 전까지 다른 화면 요소와 상호작용할 수 없습니다.
   • 용도: 중요한 알림, 경고, 사용자 확인이 필요한 경우
   • 예시: 로그인 창, 중요한 알림
     
     
2. 비모달 팝업 (Non-Modal Popup)
   • 설명: 비모달 팝업은 사용자가 팝업 외부를 클릭하거나 다른 작업을 수행할 수 있게 합니다.
   • 용도: 참고 정보, 도움말
   • 예시: 도움말 팝업, 툴팁
3. 토스트 팝업 (Toast Popup)
   • 설명: 화면 하단이나 상단에 잠깐 나타났다 사라지는 작은 알림 창입니다.
     보통 시간을 정하고 "3분"후 사라진다는 정책으로 확인 버튼 / 닫기 버튼이 별도 없습니다.
   • 메시지는 길지 않고 결과를 명료를 알려줄 수 있는 한 줄 메시지를 적용합니다.
   • 용도: 간단한 알림, 상태 메시지
   • 예시: 메시지 전송 성공, 저장 완료
     

     

     토스트 팝업

4. 드롭다운 팝업 (Dropdown Popup)
   • 설명: 버튼을 클릭하면 하단에 나타나는 메뉴형 팝업입니다.
   • 용도: 메뉴 선택, 옵션 제공
   • 예시: 네비게이션 메뉴, 옵션 선택
5. 사이드바 팝업 (Sidebar Popup)
   • 설명: 화면 측면에서 슬라이드로 나타나는 팝업입니다.
   • 용도: 추가 정보, 부가 메뉴
   • 예시: 채팅창, 알림 패널
6. 풀스크린 팝업 (Fullscreen Popup)
   • 설명: 화면 전체를 차지하는 팝업입니다.
   • 용도: 집중이 필요한 작업, 중요한 메시지
   • 예시: 설문 조사, 중요 공지
7. 레이어(Fullscreen Popup)

   "레이어 팝업"이라는 용어는 웹 디자인이나 앱 개발에서 흔히 사용되는 개념입니다. 레이어 팝업은 사용자 인터페이스(UI)에서 현재 화면 위에 새로운 레이어를 올려놓아 표시하는 팝업 창을 의미합니다. 이 팝업 창은 사용자가 현재 작업 중인 화면의 내용에 영향을 주지 않고, 추가적인 정보를 제공하거나 상호작용할 수 있도록 돕습니다.

   웹 개발에서는 HTML, CSS, 그리고 JavaScript를 사용하여 레이어 팝업을 구현할 수 있습니다. 보통 다음과 같은 방법으로 레이어 팝업을 만들 수 있습니다:

   1. HTML: 팝업의 구조를 정의합니다.
   2. CSS: 팝업의 스타일과 애니메이션을 설정합니다.
   3. JavaScript: 팝업을 열고 닫는 동작을 제어합니다.

레이어 팝업의 경우 레이어 즉, 부모 화면을 컨트롤 한 상태에서 뜨는 팝업으로

모달 팝업과 유사, 동일합니다.

동일한 개발 방식으로 기획자, 개발자 마다 모달, 레이어 혼돈되어 사용하지만 같은 방식이라고 이해하면 쉽습니다.

다만, 모바일의 경우 모달, PC의 경우 레이어라는 명칭을 저의 경우 사용합니다.

레이어팝업

상황별 팝업

확인,입력,옵션으로 크게 3가지로 구분할 수 있습니다.

팝업의 구분과 예	확인 팝업		알림팝업	입력팝업	옵션팝업
인터럽트	하드웨어 인터럽트		배터리 부족
	소프트웨어 인터럽트		오류	오류 에 대해 어떤 오류인지 메시지 입력
이벤트 (사용자 동작/상황)	상태 알림		회원가입 완료	​ ​
	동작 재확인		닫기 예 / 아니오

 

"인터럽트"는 컴퓨터 시스템 및 소프트웨어 개발에서 중요한 개념입니다. 일반적으로 "인터럽트"는 특정 작업을 일시 중단하고 다른 작업을 수행하도록 하는 신호를 의미합니다. 이 개념은 하드웨어와 소프트웨어 모두에서 사용됩니다.

하드웨어 인터럽트

하드웨어 인터럽트는 컴퓨터의 하드웨어가 CPU에게 특정 작업을 처리하라고 알리는 신호입니다. 예를 들어, 키보드나 마우스 이벤트, 네트워크 패킷 수신, 하드 드라이브의 데이터 전송 완료 등이 하드웨어 인터럽트의 예입니다. 하드웨어 인터럽트는 다음과 같은 과정을 거칩니다:

1. 인터럽트 발생: 하드웨어 장치가 CPU에게 신호를 보냅니다.
2. 인터럽트 요청: CPU가 현재 작업을 중단하고 인터럽트 처리 루틴으로 전환합니다.
3. 인터럽트 처리: CPU는 인터럽트 요청을 처리하고, 필요한 작업을 수행합니다.
4. 복귀: 인터럽트 처리가 완료되면 CPU는 이전의 작업으로 돌아갑니다.

소프트웨어 인터럽트

소프트웨어 인터럽트는 프로그램에서 의도적으로 시스템 호출을 통해 특정 작업을 수행할 때 사용됩니다. 예를 들어, 프로그램이 운영 체제의 기능을 사용하거나 입출력 작업을 수행할 때 소프트웨어 인터럽트를 사용합니다. 이는 다음과 같은 과정을 포함합니다:

1. 인터럽트 호출: 프로그램이 특정 기능을 요청하기 위해 소프트웨어 인터럽트를 발생시킵니다.
2. 시스템 호출 처리: 운영 체제는 소프트웨어 인터럽트 요청을 처리하고 필요한 작업을 수행합니다.
3. 결과 반환: 요청된 작업이 완료되면, 결과를 프로그램에 반환합니다.

예시

1. 하드웨어 인터럽트 예시: 컴퓨터의 키보드에서 키를 누르면, 키보드 하드웨어는 인터럽트를 발생시켜 CPU가 현재 작업을 중단하고 입력된 키를 처리하게 합니다.
2. 소프트웨어 인터럽트 예시: 운영 체제의 파일 입출력 함수 호출이 소프트웨어 인터럽트를 통해 이루어질 수 있습니다. 프로그램이 파일을 읽거나 쓸 때, 소프트웨어 인터럽트를 발생시켜 운영 체제에게 해당 작업을 요청합니다.

인터럽트와 관련된 용어

• 인터럽트 서비스 루틴 (ISR): 인터럽트가 발생했을 때 CPU가 실행하는 코드 블록입니다.
• 프리엠션 (Preemption): 현재 실행 중인 작업을 중단하고 더 높은 우선순위의 작업을 처리하는 것을 의미합니다.
• 디스패칭 (Dispatching): CPU가 새로운 작업을 실행하기 위해 작업 큐에서 작업을 선택하고 실행하는 과정입니다.

인터럽트는 시스템의 응답성과 효율성을 높이는 데 중요한 역할을 하며, 다양한 하드웨어 및 소프트웨어 작업을 관리하는 데 필수적인 메커니즘입니다.

 

• 소프트웨어 인터럽트 팝업

소프트웨에 오류는 보통 하드웨어에서 이슈가 발생 했을 경우 소프트웨어 단에서 표현해 주어야 할 때 나타나는 팝업이다.

다만, 어떤 오류인지 사용자에게 일일이 알리기 어렵기도 하고, 개발자도 변수에 대한 모든 케이스를 사전에 정의하기 어렵다.

 

인터럽트 팝업

오류팝업 보다는 원페이지로 보여주기도 하고,

필자는 어떤 오류 이던지 사용자화면에서는 원페이지로 오류임을 알리는 페이지(팝업X) 를 제공한다.

---

 

기획은 검정색입니다.

"졸업 가운의 색이 검정인 이유는 검정이 성취와 권력의 색이기 때문입니다."

 

질문 환영합니다. 댓글 남겨주세요.
thinkhub