Overview

Brand

Foundations

Components

Accordion

Bottom Sheet

Buttons

Checkbox

Dropdown

Label

Modal

Pagination

Radio Button

Select

Snackbar

Table

Tabs

Text Field

Textarea

Toast

Tooltip

Components

Overview

Brand

Foundations

Components

Accordion

Bottom Sheet

Buttons

Checkbox

Dropdown

Label

Modal

Pagination

Radio Button

Select

Snackbar

Table

Tabs

Text Field

Textarea

Toast

Tooltip

Components

Overview

Brand

Foundations

Components

Accordion

Bottom Sheet

Buttons

Checkbox

Dropdown

Label

Modal

Pagination

Radio Button

Select

Snackbar

Table

Tabs

Text Field

Textarea

Toast

Tooltip

Components

Overview

Brand

Foundations

Components

Accordion

Bottom Sheet

Buttons

Checkbox

Dropdown

Label

Modal

Pagination

Radio Button

Select

Snackbar

Table

Tabs

Text Field

Textarea

Toast

Tooltip

Components

Overview

Brand

Foundations

Components

Accordion

Bottom Sheet

Buttons

Checkbox

Dropdown

Label

Modal

Pagination

Radio Button

Select

Snackbar

Table

Tabs

Text Field

Textarea

Toast

Tooltip

Modal

Modal

Modal

Modal은 사용자가 특정 작업에 집중하도록 돕기 위해 화면의 중앙에 표시되는 오버레이(overlay) 요소입니다. 주로 확인, 입력 혹은 중요한 정보 전달에 사용됩니다. 모달은 화면의 다른 부분과의 상호작용을 차단하여 사용자의 집중을 유도합니다.

Modal

Modal은 사용자가 특정 작업에 집중하도록 돕기 위해 화면의 중앙에 표시되는 오버레이(overlay) 요소입니다. 주로 확인, 입력 혹은 중요한 정보 전달에 사용됩니다. 모달은 화면의 다른 부분과의 상호작용을 차단하여 사용자의 집중을 유도합니다.

Modal

Modal은 사용자가 특정 작업에 집중하도록 돕기 위해 화면의 중앙에 표시되는 오버레이(overlay) 요소입니다. 주로 확인, 입력 혹은 중요한 정보 전달에 사용됩니다. 모달은 화면의 다른 부분과의 상호작용을 차단하여 사용자의 집중을 유도합니다.

Anatomy

ESSENTIAL

1. 헤더

모달의 핵심 메시지나 주제를 전달하는 영역입니다. 제목을 중심으로 구성되며, 필요에 따라 아이콘을 함께 사용할 수 있습니다.

2. 푸터

사용자가 수행해야 하는 주요·보조 액션을 배치하는 영역입니다. 액션의 우선순위는 시각적으로 명확하게 구분되어야 합니다.

3. 백드롭

모달 활성화 시 배경을 어둡게 처리하는 영역입니다. 배경 콘텐츠와의 상호작용을 차단하고, 사용자의 시선을 모달에 집중시킵니다.

OPTIONAL

4. 바디

모달의 주요 콘텐츠 영역입니다. 제목을 보완하는 설명, 입력 필드, 선택 UI 등 다양한 요소를 포함할 수 있으며, 콘텐츠 성격에 따라 높이와 레이아웃이 유연하게 확장됩니다.

  1. 다시 보지 않기 옵션

동일한 모달의 재노출 여부를 사용자가 결정할 수 있도록 돕는 옵션입니다. 사용자의 선택 상태를 저장할 수 있습니다.

Anatomy

ESSENTIAL

1. 헤더

모달의 핵심 메시지나 주제를 전달하는 영역입니다. 제목을 중심으로 구성되며, 필요에 따라 아이콘을 함께 사용할 수 있습니다.

2. 푸터

사용자가 수행해야 하는 주요·보조 액션을 배치하는 영역입니다. 액션의 우선순위는 시각적으로 명확하게 구분되어야 합니다.

3. 백드롭

모달 활성화 시 배경을 어둡게 처리하는 영역입니다. 배경 콘텐츠와의 상호작용을 차단하고, 사용자의 시선을 모달에 집중시킵니다.

OPTIONAL

4. 바디

모달의 주요 콘텐츠 영역입니다. 제목을 보완하는 설명, 입력 필드, 선택 UI 등 다양한 요소를 포함할 수 있으며, 콘텐츠 성격에 따라 높이와 레이아웃이 유연하게 확장됩니다.

  1. 다시 보지 않기 옵션

동일한 모달의 재노출 여부를 사용자가 결정할 수 있도록 돕는 옵션입니다. 사용자의 선택 상태를 저장할 수 있습니다.

Anatomy

ESSENTIAL

1. 헤더

모달의 핵심 메시지나 주제를 전달하는 영역입니다. 제목을 중심으로 구성되며, 필요에 따라 아이콘을 함께 사용할 수 있습니다.

2. 푸터

사용자가 수행해야 하는 주요·보조 액션을 배치하는 영역입니다. 액션의 우선순위는 시각적으로 명확하게 구분되어야 합니다.

3. 백드롭

모달 활성화 시 배경을 어둡게 처리하는 영역입니다. 배경 콘텐츠와의 상호작용을 차단하고, 사용자의 시선을 모달에 집중시킵니다.

OPTIONAL

4. 바디

모달의 주요 콘텐츠 영역입니다. 제목을 보완하는 설명, 입력 필드, 선택 UI 등 다양한 요소를 포함할 수 있으며, 콘텐츠 성격에 따라 높이와 레이아웃이 유연하게 확장됩니다.

  1. 다시 보지 않기 옵션

동일한 모달의 재노출 여부를 사용자가 결정할 수 있도록 돕는 옵션입니다. 사용자의 선택 상태를 저장할 수 있습니다.

State

State

State

Properties

Header icon

false, true

Close icon

false, true

Body

false, true

Breakpoint

PC,MO

Properties

Header icon

false, true

Close icon

false, true

Body

false, true

Breakpoint

PC,MO

Properties

Header icon

false, true

Close icon

false, true

Body

false, true

Breakpoint

PC,MO

Spec


Height

모달의 높이는 뷰포트에 따라 유동적으로 조정됩니다.
화면 높이의 80%를 최대 높이로 제한합니다.


Scroll Behavior

바디 영역에 스크롤이 발생하는 경우,
헤더에 border-bottom을 적용해 영역 구분을 명확히 합니다.


Spec

Height

모달의 높이는 뷰포트에 따라 유동적으로 조정됩니다. 화면 높이의 80%를 최대 높이로 제한합니다.


Scroll Behavior

바디 영역에 스크롤이 발생하는 경우, 헤더에 border-bottom을 적용해 영역 구분을 명확히 합니다.

Spec


Height

모달의 높이는 뷰포트에 따라 유동적으로 조정됩니다.
화면 높이의 80%를 최대 높이로 제한합니다.


Scroll Behavior

바디 영역에 스크롤이 발생하는 경우,
헤더에 border-bottom을 적용해 영역 구분을 명확히 합니다.


Usage

Do

콘텐츠가 단순한 경우, 바디를 생략하고 헤더와 푸터만으로 구성할 수 있습니다.

Don't

close(닫기)와 취소하기 버튼을 동시에 사용하지 않습니다.


Don't

인풋이 있는 경우, [취소하기] 버튼 대신 Close(닫기) 아이콘 버튼을 사용해야 합니다.
모달은 키보드(ESC)로도 닫을 수 있어야 합니다.

Usage

Do

콘텐츠가 단순한 경우, 바디를 생략하고 헤더와 푸터만으로 구성할 수 있습니다.

Don't

close(닫기)와 취소하기 버튼을 동시에 사용하지 않습니다.


Don't

인풋이 있는 경우, [취소하기] 버튼 대신 Close(닫기) 아이콘 버튼을 사용해야 합니다.
모달은 키보드(ESC)로도 닫을 수 있어야 합니다.

Usage

Do

콘텐츠가 단순한 경우, 바디를 생략하고 헤더와 푸터만으로 구성할 수 있습니다.

Don't

close(닫기)와 취소하기 버튼을 동시에 사용하지 않습니다.


Don't

인풋이 있는 경우, [취소하기] 버튼 대신 Close(닫기) 아이콘 버튼을 사용해야 합니다.
모달은 키보드(ESC)로도 닫을 수 있어야 합니다.

Prev

Label

Prev

Label

Prev

Label

Next

Pagination

Next

Pagination

Next

Pagination

Contact Us

©Codeit

Contact Us

©Codeit

Contact Us

©Codeit