Modal
화면 가운데 창이 뜨고
뒤쪽은 어두워져서 멈춰요
LOOPinno-mall.kr
INNO 몰배송 안내
배송 안내
10월 3일은 쉬는 날이라
다음 날 출발해요
확인
이럴 때 써요
- 쇼핑몰에서 '배송 안내'를 눌렀을 때 뜨는 창
- 로그인 버튼 누르면 가운데 뜨는 로그인 창
- 대시보드에서 항목을 눌러 자세히 볼 때
#모달#Modal#팝업창#안내창
Alert dialog
'정말 삭제할까요?' 하고
한 번 더 물어보는 작은 창이에요
이럴 때 써요
- 사진 앱에서 사진 지우기 직전
- 장바구니 전체 비우기 누를 때
- 문서 저장 안 하고 나가려 할 때
#확인창#AlertDialog#경고창#삭제확인
Bottom sheet
화면 아래에서 창이 쓱 올라와요
아래로 쓸어내리면 다시 닫혀요
이럴 때 써요
- 쇼핑몰에서 옷 사이즈 고를 때
- '공유하기' 누르면 나오는 창
- 배달앱에서 정렬 순서 바꿀 때
#바텀시트#BottomSheet#모바일UI#오버레이
Action sheet
할 수 있는 일 몇 개가
'취소'와 함께 아래에서 떠요
LOOP내 프로필
프로필 사진 바꾸기
사진 찍기
앨범에서 선택
사진 지우기
취소
이럴 때 써요
- 프로필 사진 바꿀 때 '사진 찍기 / 앨범에서 선택'
- 카톡 메시지 길게 눌렀을 때 나오는 선택지
- 글 오른쪽 '…' 눌러 수정·삭제 고를 때
#액션시트#ActionSheet#선택창#모바일
Full-screen overlay
화면 전체를 통째로 덮어서
그것 하나에만 집중하게 해요
LOOPINNO 몰🔍
✕
🔍 무엇을 찾으세요?
최근 검색어
운동화캠핑 의자가을 니트선물 세트
이럴 때 써요
- 쇼핑몰에서 돋보기 누르면 열리는 검색 화면
- 영상 앱에서 전체 메뉴를 열 때
- 홈페이지 메뉴 버튼 누르면 화면 가득 펼쳐지는 메뉴
#전체화면덮개#FullScreenOverlay#오버레이#검색화면
Side panel
목록은 그대로 둔 채
오른쪽에서 자세한 내용이 나와요
LOOPadmin.inno-mall.kr
주문 목록
#1024김민지배송 중
#1025박서준준비 중
#1026이하늘완료
#1027최유나배송 중
주문 상세✕
#1025 · 박서준
호텔 수건 세트
₩24,000
준비 중서울 마포구 ○○로 12
이럴 때 써요
- 관리자 화면에서 주문 한 줄 눌러 상세 볼 때
- 메일함에서 메일을 눌러 옆에서 읽을 때
- 대시보드에서 숫자를 눌러 근거 자료 볼 때
#사이드패널#SidePanel#상세보기#대시보드
Popover
누른 버튼 바로 옆에
꼬리 달린 작은 창이 붙어 떠요
LOOPinno-mall.kr
👜
가죽 미니백₩89,000무료 배송 · 내일 도착구매하기공유 ↗
이럴 때 써요
- 상품 페이지에서 '공유' 누르면 나오는 링크 복사·카톡
- 달력에서 날짜 눌러 일정 미리 볼 때
- 표 머리글 옆 'ⓘ' 눌러 계산 기준 볼 때
#팝오버#Popover#말풍선창#공유하기
Tooltip
아이콘 위에 마우스를 올리면
작은 말풍선으로 이름을 알려줘요
이럴 때 써요
- 글자 없는 하트·공유 아이콘이 뭔지 알려줄 때
- 엑셀 버튼 위에 마우스 올렸을 때 뜨는 설명
- 대시보드 그래프 위에 숫자 띄울 때
#툴팁#Tooltip#도움말#아이콘설명
Coach mark
화면이 어두워지고 버튼 하나만 밝게
'여기를 눌러요' 하고 짚어줘요
LOOP내 일정🔔
10:00 주간 회의
14:00 고객사 미팅
17:30 운동
+
여기를 눌러 새 일정을 만들어요
1 / 2다음 ›
이럴 때 써요
- 앱을 처음 깔고 열었을 때 나오는 사용법 안내
- 새 기능이 생겼을 때 '새로워요' 알려주는 말풍선
- 사내 대시보드를 처음 보는 사람에게 보는 법 안내
#코치마크#CoachMark#사용법안내#첫사용
Lightbox
작은 사진을 누르면 까만 바탕에
크게 펼쳐지고 옆으로 넘겨 봐요
이럴 때 써요
- 쇼핑몰 후기 사진을 눌러 크게 볼 때
- 블로그 여행 사진 넘겨 볼 때
- 상세페이지 제품 사진 확대해 볼 때
#라이트박스#Lightbox#사진크게보기#갤러리
Popup notice
사이트에 들어오자마자 공지가 뜨고
'오늘 하루 보지 않기'로 닫아요
LOOPinno-mall.kr
INNO 몰로그인 · 장바구니
공지
추석 연휴
배송 안내
10/3~10/9 주문은
10/10부터 순서대로 보내요
오늘 하루 보지 않기닫기 ✕
이럴 때 써요
- 쇼핑몰의 '추석 연휴 배송 안내' 창
- 은행 사이트의 '시스템 점검 안내'
- 회사 홈페이지에 행사·채용 소식 띄울 때
#공지팝업#PopupNotice#오늘하루보지않기#공지사항
Cookie banner
화면 아래에 띠가 올라와서
방문 기록 저장을 허락받아요
LOOPnews.inno.kr
🍪쿠키를 사용해도 될까요?
방문 기록을 저장해 둘게요
이럴 때 써요
- 해외 사이트 들어가면 아래에 뜨는 '모두 허용'
- 처음 들어간 뉴스 사이트의 쿠키 안내
- 해외 고객도 보는 회사 홈페이지 만들 때
#쿠키동의배너#CookieBanner#개인정보#동의받기
Announcement bar
페이지 맨 위에 얇은 띠로
할인·공지를 한 줄로 알려요
LOOPinno-mall.kr
🎁 첫 구매 10% 할인 쿠폰 받기 ›✕
INNO 몰신상품베스트세일
가을 신상 모음
이럴 때 써요
- 쇼핑몰 맨 위 '첫 구매 10% 쿠폰 받기'
- '오늘 밤 12시 점검이 있어요' 같은 공지
- 홈페이지에 신제품 출시 소식 걸어둘 때
#띠배너#AnnouncementBar#상단배너#할인안내
Picture-in-picture
영상이 구석의 작은 창으로 줄어서
다른 걸 보는 동안에도 계속 나와요
이럴 때 써요
- 유튜브 보다가 아래 댓글 내릴 때
- 쇼핑 라이브 보면서 상품 고를 때
- 강의 영상 띄워 두고 자료 페이지 볼 때
#작은화면재생#PictureInPicture#영상#동시보기
Card
사진·이름·가격을 한 상자에 묶어
같은 모양으로 나란히 보여줘요
LOOP🍊
제주 감귤 5kg
₩19,900
★ 4.8 · 후기 312
🍎
청송 사과 3kg
₩24,500
★ 4.9 · 후기 208
이럴 때 써요
- 쇼핑몰 상품 목록의 상품 하나하나
- 뉴스 앱에 기사가 한 장씩 놓인 모습
- 대시보드에 숫자를 상자별로 나눠 둘 때
#카드#Card#정보묶음#상품목록
Accordion
질문을 누르면 답이 아래로 펼쳐지고
다른 걸 열면 앞의 건 접혀요
이럴 때 써요
- 쇼핑몰 '자주 묻는 질문' 목록
- 상세페이지의 '배송·교환 안내' 접힌 칸
- 긴 문서를 항목별로 접어 정리할 때
#아코디언#Accordion#접고펼치기#자주묻는질문
Read more
긴 글은 두세 줄만 보여주다가
'더보기'를 누르면 끝까지 펼쳐요
LOOP★★★★★ 김**10.21
평소 입는 사이즈로 샀는데 딱 맞아요. 원단이 생각보다 두껍고 부드러워서 가을까지 입기 좋아요. 세탁기에 돌려도 줄어들지 않았고, 색도 사진이랑 거의 같아요. 배송도 하루 만에 와서 엄마 선물로 하나 더 주문했어요. 다음엔 다른 색도 살게요!
더보기 ⌄
이럴 때 써요
- 쇼핑몰 상품 후기의 '더보기'
- 인스타그램 긴 글 아래 '… 더 보기'
- 상세페이지 긴 제품 설명 접어둘 때
#더보기접기#ReadMore#펼치기#후기
Carousel
한 자리에서 여러 장이
옆으로 한 장씩 넘어가요
LOOP10월 한정
가을 신상 30% 할인
보러 가기 ›
처음 오셨나요?
가입하면 5천원 쿠폰
보러 가기 ›
10월 한정
가을 신상 30% 할인
보러 가기 ›
이럴 때 써요
- 쇼핑몰 첫 화면의 돌아가는 할인 배너
- 배달앱 맨 위 이벤트 배너
- 카드뉴스를 옆으로 넘겨 보여줄 때
#캐러셀#Carousel#슬라이드배너#이벤트배너