피그마 모달·팝업 디자인 체크리스트: 기획자가 놓치기 쉬운 7가지
피그마 모달·팝업 설계, 기획자가 놓치는 7가지 피그마 모달·팝업 설계, 기획자가 놓치는 7가지 모달과 팝업, 디자이너에게 넘기기 전에 기획서에서 반드시 확인해야 할 7가지 체크포인트를 정리했습니다. 오버레이 처리부터 접근성까지, 실무에서 자주 빠뜨리는 항목을 사례 중심으로 다룹니다. 📌 목차 기획서엔 있는데 화면엔 없는 것들 모달, 팝업, 토스트는 다르다 흔한 실수 사례 기획서에 반드시 넣어야 할 7가지 체크리스트 실무 팁 1. 닫힘 규칙은 문장으로 남긴다 실무 팁 2. 포커스 이동, 기획 단계에서 정의한다 실무 팁 3. 모바일 전환 기준은 미리 합의한다 마무리 FAQ 기획서엔 있는데 화면엔 없는 것들 기획서에 "확인 모달 노출"이라고 한 줄 적어두고 디자이너에게 넘긴 적, 다들 한 번쯤 있을 겁니다. 문제는 QA 단계에서 터집니다. 오버레이를 클릭했을 때 닫히는지, 배경 스크롤은 잠기는지, 아무도 정의하지 않았기 때문입니다. 결국 개발자와 디자이너가 각자 판단해서 구현하고, 화면마다 동작이 미묘하게 달라집니다. 재작업은 그때부터 시작됩니다. 모달, 팝업, 토스트는 다르다 세 용어를 섞어 쓰는 팀이 생각보다 많습니다. 하지만 인터랙션 설계 관점에서는 명확히 구분해야 합니다. 모달(Modal) — 화면을 가리고 사용자의 다음 행동을 강제하는 요소. 확인/취소 없이는 뒤 화면으로 못 돌아갑니다. 팝업(Popup) — 정보 전달 목적이 강하고, 모달보다 닫힘 경로가 자유로운 경우가 많습니다. 토스트(Toast) — 사용자 행동을 막지 않고 일정 시간 후 자동으로 사라지는 알림입니다. 이 구분이 애매하면 디자이너와 개발자 모두 "이거 모달이에요, 팝업이에요?"를 매번 물어보게 됩니다. 용어를 기획서 초반에 정의해두는 것만으로도 커...