공지 팝업
서비스 공지를 빠르게 이해하고 닫을 수 있는 공지 팝업 UI를 AI 프롬프트로 설계하세요.
2026.07.16
·
공지 팝업
GPT 이미지 2· Image
웹사이트와 앱에 쓰는 공지 팝업 UI 템플릿. 밝은 회색 화면 중앙에 흰색 세로 모달 카드 하나, 상단에 남색 알림 종 아이콘, 그 아래 제목용 빈 줄 하나와 본문용 빈 줄 세 개, 하단에는 크기가 같은 청록색 기본 버튼과 흰색 보조 버튼. 우측 상단에 단순한 X 닫기 아이콘. 8픽셀 그리드, 일관된 모서리 반경과 그림자, WCAG 대비, 정면 UI 목업. 생성 문자, 로고, 사진, 워터마크, 왜곡된 아이콘 없음. flat brand symbol design, clean silhouette, restrained palette, no mockup background. three-quarter view with clear silhouette and subtle depth. bright friendly palette suitable for Korean mobile UI. Make the subject immediately recognizable at thumbnail size. Use clean composition, purposeful details, and no watermark. Keep the result crisp, scalable, and easy to recognize; avoid busy scenes and unreadable micro details.
공지 팝업
GPT 이미지 2· Image
Clean modern website announcement popup UI mockup centered on a soft neutral background, rounded white card with abstract decorative shapes and clearly empty text areas reserved for later copy, polished product design presentation, accessible high contrast layout, square image, no actual words, no watermark
공지 팝업의 역할
공지 팝업 AI 프롬프트는 점검, 정책 변경, 기능 출시와 긴급 안내를 사용자가 빠르게 파악하도록 모달 구조를 설계합니다. 제목, 짧은 본문, 기본 행동, 보조 행동과 닫기 버튼의 관계를 명확히 합니다. 모든 방문에 반복 노출하기보다 중요도와 기간, 사용자 상태에 맞는 조건을 먼저 정합니다.
명확한 UI 계층
흰색 모달 상단에 알림 종 아이콘, 제목 영역 한 줄, 본문 영역 세 줄을 배치하면 시선 흐름이 단순해집니다. 기본 버튼은 채운 청록색, 보조 버튼은 흰색과 테두리로 구분합니다. 우측 상단 닫기 아이콘은 충분한 클릭 영역을 갖추고 키보드와 스크린 리더에서도 식별되어야 합니다.
접근성과 반응형 규칙
본문과 배경은 WCAG 대비를 확보하고 색만으로 상태를 설명하지 않습니다. 모달 폭은 모바일 화면에서 좌우 안전 여백을 남기며 긴 제목과 번역 문장이 줄바꿈되어도 버튼이 가려지지 않아야 합니다. 포커스는 모달 내부에서 순환하고 닫은 뒤 원래 호출 요소로 돌아가도록 개발 단계에서 구현합니다.
배포 전 기능 검수
생성된 종과 X 아이콘의 선 두께, 버튼 크기, 모서리 반경, 간격과 그림자를 확인합니다. 실제 문구를 넣은 뒤 날짜, 링크, 행동 레이블과 노출 종료 시점을 검수합니다. 닫기, Escape 키, 바깥 영역 클릭 정책을 정하고 모바일 확대, 다크 모드와 스크린 리더에서도 시험합니다.
