팝업 디자인 가이드: 모달·토스트 선택부터 닫기 동작까지

팝업은 사용자가 진행하던 화면 위에서 추가 정보나 선택을 제공할 때 사용합니다. 중요한 결정을 받아야 한다면 모달, 작업을 멈추지 않고 결과만 알려야 한다면 토스트, 입력값을 고쳐야 한다면 해당 필드 옆의 안내가 적합합니다. 먼저 메시지를 띄울 모양보다 사용자가 다음에 해야 할 행동을 정하세요.

팝업 자체뿐 아니라 열리기 전과 닫힌 뒤의 화면까지 인터랙티브 프로토타입으로 연결하면 취소, 실패, 재시도 흐름을 함께 검토할 수 있습니다. 이 글에서는 팝업 유형의 차이와 문구·닫기·초점 이동을 설계하는 방법을 설명합니다.

1. 팝업 디자인의 목적과 선택 기준

1.1 팝업 디자인이란?

팝업 디자인은 추가로 나타나는 영역의 내용, 표시 시점과 닫는 방법을 정하는 작업입니다. 현재 과업에 필요한 정보를 제공하되, 진행 중인 작업을 불필요하게 방해하지 않아야 합니다.

1.2 어떤 경우에 사용할까요?

• 삭제처럼 중요한 결과를 확인하거나, 현재 작업에 필요한 선택을 받아야 할 때 사용할 수 있습니다.
• 공지나 이벤트를 보여 줄 때는 모든 방문자에게 매번 노출하기보다 대상과 빈도, 시점을 정하세요.
• 새 브라우저 창을 여는 방식과 페이지 안에 표시하는 방식은 동작이 다릅니다. 정보의 중요도와 필요한 조작에 맞는 형태를 선택합니다.

사용자가 해야 할 일에 따른 안내 방식

상황	적합한 방식	설계할 내용
공유 파일을 영구 삭제하기 전 확인	모달	대상 이름, 삭제 영향, 취소와 삭제 버튼
파일 이름 변경 완료	토스트 또는 화면 안 상태 표시	변경된 이름과 완료 여부. 다시 확인할 정보는 화면에도 남기기
잘못 입력한 이메일 주소	입력 필드 옆 오류 안내	문제 위치와 수정 방법. 입력값 유지
여러 항목을 작성하는 긴 신청서	별도 페이지 또는 단계형 화면	진행 상황, 이전 단계, 저장·이탈 처리

저장에 실패했는데 토스트만 사라지면 사용자는 작업이 끝났다고 생각할 수 있습니다. 반대로 사소한 저장 완료마다 모달을 띄우면 다음 작업이 막힙니다. 응답이 필요한지, 놓쳐도 되는지, 나중에 다시 확인할 수 있는지를 기준으로 선택하세요.

2. 팝업의 주요 유형

2.1 새 창

기존 페이지와 별도의 브라우저 창으로 내용을 보여 주는 방식입니다. 사용자가 새 창이 열릴 것을 예상할 수 있도록 안내하고, 원래 작업으로 돌아갈 수 있게 구성하세요.

2.2 브라우저 대화상자

JavaScript의 alert, confirm, prompt는 브라우저가 제공하는 대화상자입니다. 안내, 확인·취소, 텍스트 입력 등 필요한 응답에 따라 쓰임이 다릅니다.

alert는 메시지를 보여 주고 사용자의 확인을 받습니다. confirm은 확인 또는 취소를 선택하게 하며, 선택 결과에 따라 다음 동작을 처리할 수 있습니다.

prompt는 짧은 텍스트를 입력받을 수 있는 대화상자입니다. 입력 조건이나 추가 설명이 많은 경우에는 페이지 안의 폼으로 구성하는 편이 적합할 수 있습니다.

2.3 레이어 팝업

페이지의 기존 내용 위에 별도 영역을 표시하는 방식입니다. 배경을 가리는지, 배경과 상호작용할 수 있는지, 어떤 조작으로 닫히는지를 함께 정해야 합니다. ‘레이어’는 표현 방식이고 ‘모달’은 다른 작업을 제한하는 동작을 가리키므로, 둘을 서로 배타적인 유형으로 볼 필요는 없습니다.

2.4 모달

모달은 열린 동안 배경의 다른 작업을 제한하고 현재 대화상자의 과업에 집중하게 합니다. 확인, 취소와 닫기 동작을 명확히 설계하세요.

열릴 때 초점을 대화상자 안으로 이동시키고, 닫은 뒤에는 시작한 위치로 돌려주는 동작도 필요합니다. 키보드 사용자가 같은 작업을 수행할 수 있어야 합니다.

2.5 토스트

토스트는 저장 완료처럼 짧은 상태 메시지를 잠시 보여 주는 방식입니다. 사용자의 흐름을 크게 끊지 않고 결과를 알려 줄 때 적합합니다.

메시지를 읽을 시간과 표시 위치를 정하고 주요 조작을 가리지 않게 하세요. 반드시 읽거나 응답해야 하는 중요한 내용은 잠시 나타났다 사라지는 토스트에만 담지 않는 편이 좋습니다.

3. 팝업의 문구와 동작 설계하기

3.1 이유와 행동을 구체적으로 쓰기

제목에는 상황을, 본문에는 필요한 설명을, 버튼에는 실행할 행동을 적습니다. 제목과 버튼을 똑같이 반복하기보다 “파일을 삭제할까요?”와 “삭제”처럼 역할에 맞게 표현하세요.

공유 파일 삭제라면 대상과 영향을 함께 보여 줍니다. 제목은 “‘봄 캠페인’ 파일을 삭제할까요?”, 설명은 “이 파일을 공유받은 팀원도 더 이상 열 수 없습니다.”, 버튼은 “취소”와 “파일 삭제”로 구성할 수 있습니다. 복구 가능 여부는 실제 제품 동작에 맞게 적습니다. 되돌릴 수 없는 작업을 “확인”이라는 버튼만으로 진행하게 하지 마세요.

3.2 닫기와 취소 방법 제공하기

사용자가 원할 때 과업을 취소하거나 이전 화면으로 돌아갈 수 있게 합니다. 닫기 버튼을 찾기 쉽게 표시하고 키보드 조작과 초점 이동도 함께 검토하세요.

입력 중인 폼에서는 닫기와 저장을 분리해야 합니다. 파일 이름을 바꾼 뒤 닫았다면 변경을 버리는지, 임시 상태로 남기는지 정하세요. 입력값을 잃을 수 있는 모달을 배경 클릭만으로 조용히 닫지 않습니다. 아직 입력하지 않은 상태와 수정한 상태에 같은 이탈 처리가 필요한지도 따져 보세요.

W3C의 모달 대화상자 패턴(영문)은 대화상자 안에서 Tab과 Shift+Tab으로 이동하고, Escape로 닫으며, 닫힌 뒤 알맞은 위치로 초점을 돌리는 동작을 설명합니다. 삭제 후 시작 버튼이 없어졌다면 다음 항목이나 목록 제목 등 작업을 이어 갈 수 있는 위치를 정합니다.

3.3 내용과 화면에 맞는 크기

팝업 크기는 내용의 양과 기기의 화면 크기에 맞춰 정합니다. 긴 내용이 있다면 스크롤 영역을 분명하게 하고, 좁은 화면에서도 주요 버튼이 잘리지 않게 구성하세요.

모바일에서는 소프트웨어 키보드가 열린 상태도 확인해야 합니다. 오류 안내가 입력 필드에서 멀어지거나 제출 버튼이 화면 밖으로 밀리는지 살펴보세요. 복잡한 입력 과업이 좁은 모달에 들어가지 않는다면 글자를 줄여 맞추기보다 전체 화면으로 전환하는 편이 낫습니다.

3.4 팝업의 중첩 줄이기

팝업 위에 다시 팝업을 띄우면 현재 위치와 돌아갈 방법을 이해하기 어려워집니다. 여러 단계가 필요하다면 같은 영역 안에서 진행하거나 별도 페이지로 연결하는 구조를 검토하세요.

저장 중에는 처리 상태를 표시하고 중복 실행을 막습니다. 실패하면 사용자가 입력한 내용을 유지한 채 원인과 다음 행동을 안내하세요. 연결 오류로 저장되지 않은 이름을 완료 화면에 먼저 반영하면 실제 상태와 화면이 어긋날 수 있습니다.

4. Pixso에서 파일 이름 변경 흐름 검토하기

팝업 자체뿐 아니라 열리기 전 화면과 닫힌 뒤 화면을 함께 만들어 보세요. 메시지를 읽고 행동한 다음 어디로 돌아가는지까지 검토할 수 있습니다.

Pixso에서 파일 목록과 이름 변경 모달을 만들고, 정상 완료·취소·오류 상태를 나눠 프로토타입으로 연결합니다. 다음과 같이 각 상태에 실제 문구와 다음 화면을 적어 두면 팀이 같은 동작을 논의하기 쉽습니다.

파일 이름 변경 모달의 상태와 전환

상태	화면에 보여 줄 내용	다음 동작
열기	현재 파일 이름이 입력된 필드	이름을 수정하거나 취소
이름이 비어 있음	필드 옆 “파일 이름을 입력해 주세요.”	입력 후 다시 저장
저장 중	“저장 중…” 상태와 중복 실행 방지	결과를 기다림
저장 실패	입력값을 유지한 오류 안내	재시도 또는 취소
저장 완료	닫힌 모달, 목록에 반영된 새 이름	변경한 파일에서 다음 작업

팀원에게 “이 파일의 이름을 바꿔 주세요”라고 요청하고 버튼 이름이나 클릭 순서를 알려 주지 않은 채 흐름을 살펴보세요. 저장을 누르기 전에 결과를 예상하는지, 실패한 뒤 같은 내용을 다시 입력해야 한다고 생각하는지, 취소 후 목록으로 돌아오는지 확인합니다. 이름 변경의 판단을 검토하는 프로토타입이지, 서버 저장을 구현한 화면은 아니라는 점은 개발 전달 메모에서 구분합니다.

화면 위 댓글에 막힌 위치와 수정 이유를 남기고, 변경 후 같은 조작을 다시 시험하세요. 시각적 구성과 함께 표시 조건, 닫기 방식, 개발 단계의 접근성 요구도 공유합니다.

Pixso에서 팝업 흐름 만들기

필요한 정보만, 적절한 순간에

팝업은 정보를 강조하는 만큼 사용자의 흐름을 끊을 수 있습니다. 표시할 이유가 분명한지, 행동을 이해할 수 있는지, 쉽게 닫고 원래 작업으로 돌아갈 수 있는지를 먼저 확인하세요. 저장 완료에는 짧은 안내를, 중요한 결정에는 명확한 선택을, 입력 오류에는 문제 위치의 설명을 제공하는 것이 출발점입니다.