라이트박스 vs. 모달
짧은 답변
라이트박스는 사진이나 영상을 보여주는 특별한 창이에요. 보통 창은 선택지, 양식, 짧은 작업을 담아요.
사진이나 비디오를 확대하려면 라이트박스를 사용하세요. 주요 작업이 행위하거나 결정을 내리는 것이라면 모달을 사용하세요.
각 패턴이 무엇을 하는지 확인하세요
각 예제를 시도해 보세요. 그런 다음 그것이 수행하려는 작업에 대해 읽어보세요.
Lightbox
↗ 라이트박스
라이트박스가 사진이나 영상을 크게 띄워주고 주변은 어둡게 만들어요.
<dialog>사진을 선택하여 캡션과 함께 전체 크기 보기로 엽니다. 이전, 다음, 닫기 버튼이 있습니다.
- 사용할 때
- 이것은 갤러리에서 현재 위치를 잃지 않으면서 미디어를 자세히 살펴보는 데 사용하세요.
- 다음 경우에는 사용하지 마세요
- 복잡한 편집이나 병렬 비교가 필요한 작업에는 절대 사용하지 마세요.
- 코드에서 사용된 이름
<dialog>
Modal Dialog
↗ 모달 대화상자
모달 창은 정신을 집중하게 해주는 창이에요. 누군가 닫거나 끝낼 때까지 현재 화면을 가로막아요.
계정 삭제의 경우, 키보드 포커스는 대화 상자 안에 머무릅니다. 사용자가 취소하면 포커스는 대화 상자를 연 버튼으로 돌아갑니다.
- 사용할 때
- 완전한 주의가 필요한 짧은 선택이나 작은 작업에 사용하십시오.
- 다음 경우에는 사용하지 마세요
- 한 다이얼로그를 다른 다이얼로그 위에 열지 마세요 또는 일반적이고 저위험 정보에 다이얼로그를 사용하지 마세요.
- 코드에서 사용된 이름
<dialog> / role="dialog" aria-modal="true"
빠른 비교
| UI 패턴 | 이런 경우에 가장 좋아요 | 대상 아님 | 코드에서 사용된 이름 |
|---|---|---|---|
| 라이트박스Lightbox | 이것은 갤러리에서 현재 위치를 잃지 않으면서 미디어를 자세히 살펴보는 데 사용하세요. | 복잡한 편집이나 병렬 비교가 필요한 작업에는 절대 사용하지 마세요. | <dialog> |
| 모달 대화상자Modal Dialog | 완전한 주의가 필요한 짧은 선택이나 작은 작업에 사용하십시오. | 한 다이얼로그를 다른 다이얼로그 위에 열지 마세요 또는 일반적이고 저위험 정보에 다이얼로그를 사용하지 마세요. | <dialog> / role="dialog" aria-modal="true" |
출시하기 전에
- 01
그 사람이 해야 할 일을 적으세요.
- 02
키보드, 포커스, 터치, 확대/축소, 로딩, 비어 있음, 오류 상태를 테스트하세요.
- 03
사람들이 마우스 오버나 동작 없이 동일한 정보를 얻을 수 있도록 하세요.
- 04
작은 화면과 큰 화면에서 실제 콘텐츠로 테스트하세요.
04
비교 요청 복사 가능
팀이 패턴 사이에서 선택하는 데 도움이 필요할 때 이것을 복사하세요.
실제 사용자 흐름에 가장 적합한 패턴을 라이트박스 (Lightbox)、모달 대화상자 (Modal Dialog)에서 선택하세요. 이 규칙 사용: 라이트박스는 사진이나 영상을 보여주는 특별한 창이에요. 보통 창은 선택지, 양식, 짧은 작업을 담아요. 작업, 콘텐츠 양, 흐름 중단 비용을 기록하세요. 키보드, 터치, 로딩, 오류, 축소 동작을 확인하세요. 선택 이유를 설명한 후 프로젝트 디자인 시스템으로 가장 작은 접근 가능한 버전을 만드세요.