Modal

Feature flag

모달은 페이지 콘텐츠 위에 표시되는 창을 사용해 사용자의 주의를 하나의 작업이나 정보 조각에 독점적으로 집중시켜요. 사용자와 시스템 간의 대화인 다이얼로그(dialog)의 한 유형으로, 중요 정보를 제시하거나 워크플로 완료에 필요한 사용자 입력을 요청하는 데 사용됩니다.

출처: Modal

본문

AI 라벨이 있는 모달 with AI label이 이제 안정(stable) 버전이 됐어요. 이 추가는 컴포넌트의 시각적 모양을 바꾸고, 컴포넌트에 AI가 있을 때 AI 설명 가능성 기능을 도입합니다. 자세한 내용은 AI 존재(AI presence) 섹션을 참고하세요.

개요 (Overview)

모달은 사용자와 시스템 간의 대화이기 때문에 다이얼로그(dialog)의 한 유형이에요. 모달을 사용해 사용자의 워크플로 완료에 필요한 중요 정보를 제시하거나 사용자 입력을 요청하세요. 모달은 편집이나 관리 작업 같은 짧고 자주 발생하지 않는 작업 동안 사용자의 워크플로를 중단시킵니다. 모달이 열려 있으면 사용자는 페이지 콘텐츠에서 차단되어, 모달 작업이 완료되거나 사용자가 모달을 닫을 때까지 이전 워크플로로 돌아갈 수 없습니다. 올바르게 사용하면 효과적이지만, 모달은 사용자를 방해하는 것을 제한하기 위해 아껴서 사용해야 해요. 따라서 사용자가 작업을 반복적으로 수행해야 한다면 그 작업을 메인 페이지에서 완료할 수 있게 만드는 것을 고려하세요.

언제 사용할까요 (When to use)

사용자의 즉각적인 응답 요구 (Require an immediate response from the user)

사용자가 시작한 프로세스를 시스템이 계속하는 것을 막는 정보를 요청하려면 다이얼로그를 사용하세요.

긴급 정보 알림 (Notify the user of urgent information)

모달을 사용해 사용자의 현재 작업과 관련된 긴급 정보를 알리세요. 모달은 시스템 오류를 보고하거나 사용자 액션의 결과를 전달하는 데 주로 사용됩니다.

사용자 결정 확인 (Confirm a user decision)

모달을 사용해 사용자 결정을 확인하세요. 확인되는 액션을 명확히 설명하고 그로 인해 발생할 수 있는 잠재적 결과를 설명하세요. 제목과 버튼 모두 일어날 액션을 반영해야 해요. 액션이 파괴적이거나 되돌릴 수 없다면 트랜잭션 danger 모달을 사용하세요.

변형 (Variants)

변형 (Variant)	용도 (Usage)
Passive	사용자가 현재 워크플로에 관해 알아야 할 정보를 제시. 사용자가 취할 액션이 없음.
Transactional	모달이 완료·닫히기 위해 액션이 필요함. 취소와 기본 액션 버튼을 포함.
Danger	파괴적이거나 되돌릴 수 없는 액션에 사용되는 transactional 모달의 특정 변형.
Acknowledgment	시스템이 사용자의 정보 확인을 요구함. 보통 OK인 단일 버튼만 포함.
Progress	닫히기 전에 여러 단계를 완료해야 함. 취소, 이전, 다음 또는 Complete·Done 같은 완료 버튼을 포함.

기능 플래그 (Feature flags)

기능 플래그(feature flag)가 모달 컴포넌트에 추가되어 접근성을 개선하고 시각적 모양이 아닌 일부 기능을 변경했어요. 코드 특정 기능 플래그 정보는 코드(Code) 탭을 참고하세요. 현재 모달은 폐기되지 않지만, 팀은 앞으로 제품에 기능 플래그 모달을 사용하도록 권장됩니다. 향후 다음 주요 릴리스(v12)가 출시되면 이 기능 플래그가 컴포넌트의 기본 버전이 됩니다.

포맷 (Formatting)

구조 (Anatomy)

모달에는 헤더, 본문, 푸터의 세 가지 구분된 영역이 있어요. 데이터 테이블, 폼, 프로그레스 인디케이터 같은 컴포넌트는 모달의 전체 너비를 차지할 수 있습니다.

헤더(Header): 제목, 선택적 라벨, 닫기 아이콘을 포함해요.
본문(Body): 모달 작업 완료에 필요한 정보, 컨트롤 또는 둘 다를 포함. 메시지 텍스트와 컴포넌트를 포함할 수 있어요.
푸터(Footer): 모달 작업을 완료하거나 취소하는 데 필요한 주요 액션을 포함. 버튼 그룹은 모달 변형에 따라 달라집니다.
x: 닫기 x 아이콘은 데이터를 제출하지 않고 모달을 닫아요.
오버레이(Overlay): 페이지 콘텐츠를 가리는 화면 오버레이.

크기 (Sizing)

extra small, small, medium, large의 네 가지 반응형 모달 크기(modal sizes)가 있어요. 가진 모달 콘텐츠의 양에 가장 잘 맞는 크기를 선택하세요. 짧은 텍스트가 있는 모달은 긴 단일 줄을 피하기 위해 extra small 또는 small이어야 하고, 데이터 테이블 같은 복잡한 컴포넌트에는 default 또는 large 모달이 더 적합합니다.

최대 높이 (Max heights)

적절한 창 비율을 유지하기 위해 각 모달 크기는 최대 높이(maximum height)를 가져요. 최대 높이 제한 때문에 모달에 스크롤이 너무 많다면 다음 모달 크기로 올리는 것을 고려하세요. large 모달 높이로도 공간이 부족하다면 대신 전체 페이지가 필요할 수 있습니다.

정렬 (Alignment)

더 큰 브레이크포인트(larger breakpoints)를 가진 모달에서 제목을 포함한 body copy는 20%의 margin-right를 사용해요. 그러나 폼 입력과 다른 컴포넌트는 모달의 전체 너비로 확장됩니다.

전체 너비 콘텐츠 (Full-width content)

구조화된 리스트나 테이블 같은 특정 컴포넌트는 모달의 마진으로 확장되어 컨테이너 가장자리에 딱 붙게 정렬될 수 있어요. 이러한 컴포넌트는 보통 텍스트나 아이콘 너머로 확장되는 테두리 구분선이나 컨테이너를 가집니다. 어떤 종류의 라벨이나 텍스트도 모달 마진에 있어서는 안 됩니다.

콘텐츠 (Content)

IBM Style에서 모달은 다이얼로그(dialog)라고 부릅니다.

제목 (Title)

모달의 작업이나 목적을 설명하는 간결한 동사구를 사용하세요.
모달이 버튼 클릭으로 접근된다면 버튼 라벨을 모달 제목으로 사용하세요: 예를 들어 사용자가 Create access group 버튼을 클릭해 모달을 열면, Create access group이 모달 제목입니다. 모달은 메뉴 항목이나 아이콘을 클릭해 접근할 수도 있어요.
버튼 또는 아이콘 라벨과 모달 제목을 섞고 싶어지는 상황을 주의하세요. 예를 들어 아이콘 이름이 New user라면, Create user가 아니라 New user를 모달 제목으로 사용하세요.
제품이 더 대화체 톤이라면 버튼 라벨에 관사가 없더라도 모달 제목에 관사(a, an, the)를 사용하세요. 예를 들어 Create an access group.
때로는 모달을 위한 컨텍스트 정보를 제공해야 할 수 있어요. 예를 들어 모달로 수행되는 액션이 특정 항목에 적용되고, 액션이 어느 항목에 적용되는지 명확히 하고 싶을 때입니다. 이 경우 제목 위에 표시되는 선택적 라벨을 사용할 수 있어요.
예를 들어 사용자가 편집 중인 객체의 경로를 알아야 한다면 그 경로를 선택적 라벨에 둘 수 있습니다.

모달의 목적이나 목표가 쉽게 드러나지 않으면, 사용자가 모달을 이해하도록 돕거나 모달 사용 방법을 설명하는 예시를 제공하는 한두 문장의 내장 도움말(embedded assistance)을 제공하세요. 모달의 목적이 객체를 편집하는 것일 때 제목이 Edit object처럼 제목과 목적이 명확하다면 설명은 필요하지 않습니다.

본문 콘텐츠 (Body content)

현재 작업 완료에 관련된 필드, 컴포넌트, 내장 도움말만 포함하세요.
텍스트가 모달 너비의 80%가 되도록 하세요. 컴포넌트는 너비의 100%까지 확장될 수 있습니다.
IBM Documentation 링크를 추가하려면 모달 본문에 링크로 포함하세요. Learn more about topic이나 IBM Docs 같은 명확한 라벨을 사용하세요.
URL이 쉽게 업데이트되도록 하세요.

버튼 (Buttons)

액션 버튼 라벨에는 Add, Delete, Save처럼 모달의 목적을 설명하는 능동적인 단어를 사용하세요. 승인된 액션 라벨 목록은 Carbon 콘텐츠 가이드라인을 참고하세요.
Done이나 OK 같은 모호하거나 수동적인 단어를 피하세요.

넘침 콘텐츠 (Overflow content)

모달 콘텐츠가 모달 높이보다 길면 헤더와 푸터는 제자리에 고정된 채 본문 섹션은 세로로 스크롤되어야 해요. 콘텐츠는 모달 본문 영역 끝에서 시각적으로 희미해져 보이지 않는 추가 콘텐츠가 있음을 나타내야 합니다.

모달 콘텐츠는 절대 가로로 스크롤되면 안 되며, 대신 더 큰 크기의 모달을 사용하세요.

메시지로서의 제목 (Title as message)

짧고 직접적인 메시지의 경우 제목이 전체 메시지를 포함해, 반복적인 제목과 본문 메시지에 시각적 명확성을 추가할 수 있어요. 이 스타일을 사용할 때는 다른 본문 카피는 포함할 수 없습니다.

추가 가이드 (Further guidance)

더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.

공통 동작 (Universal behaviors)

트리거 (Trigger)

모달은 사용자의 액션 결과로 트리거되며 시스템 생성이 아닙니다. 모달을 트리거할 수 있는 흔한 컴포넌트로는 버튼, 링크, 아이콘이 있어요. 키보드에서 Enter 또는 Space를 선택하면 모달이 실행되어야 합니다.

포커스 (Focus)

모달이 열리면 사용자 입력을 받는 첫 번째 위치에 초기 포커스를 설정하세요. 예를 들어 모달이 폼을 포함한다면 열릴 때 첫 번째 필드에 자동으로 포커스가 설정되어야 해요. 본문 섹션에 폼 입력이 없는 transactional 모달이라면 첫 번째 포커스는 기본 버튼에 있어야 합니다.

포커스는 닫힐 때까지 다이얼로그 안에 갇혀(trapped) 있어야 해요. 키보드로 탐색할 때 Tab과 Shift-Tab은 모달 밖으로 포커스를 이동시키지 않아야 합니다.

로딩 (Loading)

작업 완료 액션은 즉시 일어나야 해요. 더 긴 로딩 기간이 필요하다면 로딩 스피너(loading spinner)와 오버레이가 콘텐츠를 비활성화한 채 모달 본문 영역 위에 나타나야 합니다. 로딩이 진행되는 동안 기본 액션 버튼은 비활성화되어야 해요.

빠른 로딩 기간이 필요하다면 기본 버튼에 인라인 로딩(inline loading) 동작을 사용해 데이터가 처리되고 있음을 나타내세요.

검증 (Validation)

모달이 닫히기 전에 사용자의 입력을 검증하세요. 입력이 유효하지 않으면 모달은 열린 채로 유지되어야 하며 입력은 오류 상태로 표시되고 인라인 오류 메시지를 포함해야 합니다. 메시지는 사용자에게 무슨 일이 일어났는지 알리고 다음 단계나 가능한 해결책에 대한 지침을 제공해야 해요. 효과적이고 즉각적인 오류 메시징은 사용자가 문제를 이해하고 고치는 데 도움이 됩니다.

가능하면 제출 전에 사용자의 데이터를 검증하세요. 이런 종류의 인라인 검증(일명 클라이언트 측 검증)은 필드가 포커스를 잃는 즉시 일어나야 해요. 이렇게 하면 수정해야 할 요소를 쉽게 식별하는 데 도움이 됩니다. 폼 기준이 충족되면 필드 내 오류 메시지는 사라져야 합니다. 서버 측 문제로 데이터를 제출할 수 없었다면 인라인 알림이 나타나야 합니다.

Passive 모달은 사용자가 현재 워크플로에 관해 알아야 할 정보를 제시해요. 사용자가 취할 액션이 없고, 제출해야 할 데이터도 포함해서는 안 됩니다. 시스템 오류 보고나 사용자 액션의 결과 전달 같은 긴급 정보를 알리는 일종의 알림 역할을 합니다.

Passive 모달 닫기 (Dismissing a passive modal)

Passive 모달은 다음 방법 중 하나로 닫힐 때까지 지속됩니다.

x: 오른쪽 위의 닫기 x 아이콘을 클릭하면 데이터를 제출하지 않고 모달이 닫히고 이전 컨텍스트로 돌아갑니다.
다른 곳 클릭(Click elsewhere): passive 모달 영역 밖을 클릭하면 모달이 자동으로 닫힙니다.
Esc: 키보드에서 ESC 누르기.

Transactional 모달은 사용자 결정을 검증하거나 사용자로부터 보조 확인을 얻는 데 사용돼요. Transactional 모달은 모달이 완료·닫히기 위해 액션이 필요합니다. 취소와 기본 액션 버튼을 포함합니다.

Transactional 모달 닫기 (Dismissing a transactional modal)

Transactional 모달은 다음 방법 중 하나로 닫힐 때까지 지속됩니다.

작업 완료(Task completion): 기본 액션을 클릭하면 작업이 완료되고 모달이 자동으로 닫힙니다.
취소 버튼(Cancel button): 취소 버튼을 클릭하면 모달이 닫히고 이전 컨텍스트로 돌아갑니다. Cancel은 적용된 모든 변경을 되돌립니다.
x: 오른쪽 위의 닫기 x 아이콘을 클릭하면 데이터를 제출하지 않고 모달이 닫히고 이전 컨텍스트로 돌아갑니다.
Esc: 키보드에서 ESC 누르기.

두 개 버튼 (Two buttons)

두 개의 버튼을 사용할 때 보조 버튼은 왼쪽에, 기본 버튼은 오른쪽에 배치돼요. 각 버튼은 모달의 50%를 차지하고 가장자리까지 꽉 차도록(bleed) 확장됩니다.

세 개 버튼 (Three buttons)

세 개의 버튼이 필요한 드문 경우, 각각 모달 너비의 25%이며 모달 오른쪽에 정렬됩니다. 가장 바깥 오른쪽 버튼만 기본 버튼이 될 수 있고 나머지 두 개는 보조 버튼이에요. 세 액션 모두 무게가 같다면 세 개 모두 보조 버튼이어야 합니다.

Danger 모달은 파괴적이거나 되돌릴 수 없는 액션에 사용되는 특정 종류의 transactional 모달이에요. Danger 모달에서는 기본 버튼이 danger 버튼으로 대체됩니다. 우발적으로 수행되면 상당한 데이터 손실을 초래할 액션에 대한 확인으로 높은 영향의 순간에 자주 사용됩니다.

Acknowledgment 모달은 시스템이 제시된 정보를 사용자가 확인하도록 요구할 때 사용돼요. 보통 OK인 단일 버튼만 포함합니다. 사용자가 기본 버튼을 클릭하면 확인이 완료됩니다.

Acknowledgment 모달 닫기 (Dismissing an acknowledgment modal)

Acknowledgment 모달은 다음 방법 중 하나로 닫힐 때까지 지속됩니다.

작업 완료: 기본 액션을 클릭하면 작업이 완료되고 모달이 자동으로 닫힙니다.
x: 오른쪽 위의 닫기 x 아이콘을 클릭하면 사용자의 확인을 제출하지 않고 모달이 닫히고 이전 컨텍스트로 돌아갑니다.
Esc: 키보드에서 ESC 누르기.

단일 버튼 (Single button)

단일 버튼은 오른쪽에 배치되고 모달의 50%를 차지하며 가장자리까지 확장됩니다. 대부분의 시나리오에서 버튼이 하나 필요할 때는 기본 버튼이 사용됩니다.

더 긴 작업에는 progress 모달을 사용해 집중된 흐름 안에서 사용자에게 완료감과 방향 감각을 주세요. 복잡한 선택이 있는 복잡한 흐름에는 모달 대신 전체 페이지 사용을 고려하세요. Progress 모달은 과도한 모달 콘텐츠에 대한 해결책이 아닙니다. 정보를 더 소화 가능하고 집중된 덩어리로 제시하는 데에만 사용해야 해요.

Progress 모달 닫기 (Dismissing a progress modal)

Transactional 모달은 다음 방법 중 하나로 닫힐 때까지 지속됩니다.

작업 완료: 기본 액션을 클릭하면 작업이 완료되고 모달이 자동으로 닫힙니다.
취소 버튼: Cancel 버튼을 클릭하면 모달이 닫히고 이전 컨텍스트로 돌아갑니다. Cancel은 적용된 모든 변경을 되돌립니다.
x: 오른쪽 위의 닫기 x 아이콘을 클릭하면 데이터를 제출하지 않고 모달이 닫히고 이전 컨텍스트로 돌아갑니다.
Esc: 키보드에서 ESC 누르기.

버튼 그룹 (Button group)

Progress 모달 푸터에는 Cancel, Previous, Next의 세 버튼이 있어요. 각 버튼의 너비는 모달 창의 25%이며 꽉 차도록 확장됩니다. Previous와 Next는 함께 그룹화되어 다이얼로그의 오른쪽 절반에 배치되며, Previous는 보조 버튼, Next는 기본 버튼입니다. 시퀀스의 마지막 단계에서는 Next 버튼 라벨이 최종 액션을 반영하도록 바뀌어야 합니다. Cancel 버튼은 모달 왼쪽에 정렬되며 고스트 버튼을 사용합니다.

AI 존재 (AI presence)

모달 컴포넌트에는 전체 컨테이너에 AI가 있을 때 AI 시각적 스타일링을 취하는 수정(modification)이 있어요. 모달의 AI 변형은 AI 라벨이 추가된 것 외에는 다른 모달 변형과 동일하게 동작하며, AI 라벨은 시각적 표시이자 설명 가능성 팝오버의 트리거 역할을 합니다.

모달의 AI는 두 가지 방식으로 나타날 수 있어요: 광범위하게 모달 전체에, 또는 집중적으로 모달의 특정 부분에만. 모달 전체가 AI용으로 스타일링되면 사용자에게 모달의 모든 측면에 AI가 존재함을 나타냅니다. 모달 콘텐츠의 일부만 AI로 생성된다면 모달 전체가 아닌 해당 컴포넌트만 AI 존재 스타일링을 받아야 해요.

AI용 디자인에 대한 자세한 내용은 Carbon for AI 가이드라인을 참고하세요.

Light mode
Dark mode

모달 대 알림 (Modal versus notification)

모달은 매우 방해가 되며 사용자가 닫을 때까지 작업을 차단해요. 모달은 사용자의 작업과 즉시 관련된 중요 정보를 제공할 때만 알림의 형태로 사용해야 합니다. 중요하지 않은 메시징에는 모달 대신 토스트(toast)나 인라인 알림 사용을 고려하세요. 토스트와 인라인 알림은 워크플로를 깨지 않으면서 비방해적 피드백이나 액션 상태를 제공합니다.

컴포넌트 (Components)

Notification

패턴 (Patterns)

Dialogs
Notifications

더 알아보기 (Learn more)

모달은 중요 정보 제시와 사용자 입력 요청을 위해 사용자의 작업을 일시 중단시키는 다이얼로그예요. 사용자 작업을 중단시키므로 아껴서 사용하고, 반복 작업은 메인 페이지에서 처리하세요. Passive·Transactional·Danger·Acknowledgment·Progress 변형을 상황에 맞게 고르고, 포커스 트래핑과 검증을 신경 써야 합니다.