풍선

참고 항목

이 디자인 가이드는 Windows 7용으로 만들어졌으며 최신 버전의 Windows용으로 업데이트되지 않았습니다. 지침의 대부분은 여전히 원칙으로 적용되지만 프레젠테이션과 예제는 현재 디자인 지침을 반영하지 않습니다.

풍선은 컨트롤의 중요하지 않은 문제 또는 특수 조건을 사용자에게 알리는 작은 팝업 창입니다.

일반적인 풍선입니다.

풍선에는 아이콘, 제목 및 본문 텍스트가 있으며 모두 선택 사항입니다. 도구 설명 및 인포 팁과 달리 풍선에는 원본을 식별하는 꼬리도 있습니다. 일반적으로 원본은 컨트롤인 경우 소유자 컨트롤이라고 합니다.

풍선은 사용자에게 중요하지 않은 문제를 알리지만 소유자 제어가 발생할 수 있지만 문제를 방지하지는 않습니다. 사용자가 작업에 커밋을 시도할 때 처리되지 않은 모든 문제는 소유자 UI(사용자 인터페이스)에서 처리해야 합니다.

풍선은 일반적으로 텍스트 상자 또는 콤보 상자, 목록 보기 및 트리 뷰와 같은 값을 변경하기 위해 텍스트 상자를 사용하는 컨트롤과 함께 사용됩니다. 다른 종류의 컨트롤은 충분히 제한되며 추가 피드백 풍선이 필요하지 않습니다. 또한 다른 유형의 컨트롤에 문제가 있는 경우 풍선이 적합하지 않은 상황이 여러 컨트롤 간의 불일치를 수반하는 경우가 많습니다. 텍스트 입력 컨트롤만 제한되지 않으며 단일 지점 오류의 일반적인 원인입니다.

알림은 알림 영역 아이콘으로 표시되는 특정 유형의 풍선입니다.

참고: 알림, 도구 설명 및 정보 설명 및 오류 메시지와 관련된 지침은 별도의 문서에 제공됩니다.

이것이 올바른 컨트롤인가요?

다음 질문을 고려하여 결정하십시오.

• 정보가 문제 또는 특수 조건을 설명하나요? 해당하지 않을 경우, 다른 컨트롤을 사용합니다. 풍선을 사용하여 컨트롤에 대한 추가 정보를 표시하지 마세요. 정적 텍스트, 정보 설명, 점진적 공개 또는 프롬프트를 대신 사용하는 것이 좋습니다.
• 입력 시 또는 소유자 컨트롤이 입력 포커스를 잃을 때 문제 또는 특수 조건을 즉시 검색할 수 있나요? 그렇지 않은 경우 작업 대화 상자 또는 메시지 상자에 표시되는 오류 메시지를 사용합니다.
• 문제의 경우 문제가 중요합니까? 이 경우 작업 대화 상자 또는 메시지 상자에 표시되는 오류 메시지를 사용합니다. 이러한 오류 메시지에는 상호 작용(중요한 오류에 적합)이 필요하지만 풍선은 그렇지 않습니다.
• 특별한 조건의 경우 조건이 유효하지만 의도하지 않은 것일 가능성이 있나요? 그렇다면 풍선이 적절합니다. 조건이 유효하지 않은 경우 애초에 이를 방지하는 것이 좋습니다. 의도된 조건의 경우 아무 것도 할 필요가 없습니다.
• 문제 또는 특수 조건을 간결하게 표현할 수 있나요? 해당하지 않을 경우, 다른 컨트롤을 사용합니다. 풍선은 자세한 설명을 하거나 추가 정보를 제공할 수 없습니다.
• 정보가 현재 가리키고 있는 컨트롤을 설명하나요? 그렇다면 사용자가 메시지와 상호 작용해야 할 수 있는 경우가 아니면 팁을 대신 사용합니다.
• 정보가 사용자의 현재 활동과 관련이 있나요? 그렇지 않은 경우 알림 또는 대화 상자를 대신 사용하는 것이 좋습니다. 사용자는 현재 활동 외부의 풍선을 간과할 가능성이 높으며, 기본적으로 풍선은 10초 후에 시간이 초과됩니다.
• 정보는 단일 특정 원본에서 제공됩니까? 문제 또는 조건에 원본이 여러 개 있거나 특정 원본이 없는 경우 대신 현재 위치 메시지 또는 대화 상자를 사용합니다.

틀림:

이 예제에서는 사용자 이름 또는 암호에 문제가 있을 수 있지만 풍선 문제를 보고하면 암호만 문제가 있음을 시각적으로 알 수 있습니다. 따라서 잘못된 사용자 이름을 입력하는 피드백은 오해의 소지가 있습니다.

풍선은 인포 팁, 대화 상자 및 현재 위치 메시지의 대안입니다. 도구 설명 및 인포 팁과는 대조적으로 다음을 수행합니다.

• 풍선은 현재 포인터 위치와 독립적으로 표시될 수 있으므로 원본을 나타내는 꼬리가 있습니다.
• 풍선에는 제목, 본문 및 아이콘이 있습니다.
• 풍선은 대화형일 수 있지만 팁을 클릭하는 것은 불가능합니다.

모달 대화 상자와는 대조적으로:

• 풍선은 입력 포커스를 도용하거나 상호 작용이 필요하지 않습니다.
• 풍선은 단일 특정 원본을 식별합니다. 모달 대화 상자에는 여러 원본이 있거나 특정 원본이 전혀 없을 수 있습니다.

현재 위치 메시지와는 대조적으로 다음을 수행합니다.

• 풍선이 더 눈에 띄습니다.
• 풍선에는 사용 가능한 화면 공간이나 현재 위치 메시지를 표시하는 데 필요한 동적 레이아웃이 필요하지 않습니다.
• 풍선은 시간 제한 후에 자동으로 제거됩니다.

사용 패턴

풍선에는 다음과 같은 사용 패턴이 있습니다.

사용	예시
입력 문제 단일 소유자 컨트롤(일반적으로 텍스트 상자)에서 오는 중요하지 않은 사용자 입력 문제입니다.	오류 메시지에 풍선을 사용하면 입력 포커스를 훔치지 않지만 소유자 컨트롤에 입력 포커스가 있는 경우에도 여전히 눈에 띄습니다. 문제를 해결하려면 사용자가 입력을 변경하거나 다시 입력해야 할 수 있습니다. 그러나 소유자 컨트롤이 잘못된 입력을 무시하는 경우 사용자는 전혀 변경하지 않을 수 있습니다. 문제가 중요하지 않으므로 오류 아이콘 이 필요하지 않습니다. 중요하지 않은 사용자 입력 문제를 보고하는 데 사용되는 풍선입니다.
특수 조건 소유자 컨트롤이 입력에 영향을 주는 상태입니다. 이 상태는 의도하지 않은 상태일 수 있으며 사용자가 입력이 영향을 받는다는 사실을 인식하지 못할 수 있습니다.	풍선을 사용하여 발생하는 즉시 사용자에게 특별한 조건을 경고하여 좌절을 방지합니다(예: 최대 입력 크기를 초과하거나 실수로 캡 잠금 설정). 이러한 조건은 의도적인 것일 수 있으므로 입력 포커스를 훔치거나 상호 작용을 강요하지 않고 이러한 피드백을 제공하는 것이 중요합니다. 이러한 풍선은 암호 및 핀 상자에 특히 중요하며, 사용자는 최소한의 피드백으로 작업합니다. 이러한 풍선에는 경고 아이콘이 있습니다. 특수 조건을 보고하는 데 사용되는 풍선입니다.

가이드라인

표시 시기

• 문제 또는 특수 조건이 감지되는 즉시 풍선을 표시합니다( 반복적으로라도 눈에 띄는 지연 없이).
  • 개별 문자 또는 최대 입력 크기와 관련된 문제의 경우 입력에 풍선을 즉시 표시합니다.
  • 입력 값과 관련된 문제(비어 있는 값이 아닌 값 필요 포함)의 경우 소유자 컨트롤이 입력 포커스를 잃을 때 풍선을 표시합니다. 그렇지 않으면 사용자가 잠재적으로 유효한 입력을 입력하는 동안 풍선을 표시하면 방해가 되고 짜증이 날 수 있습니다.
• 한 번에 하나의 풍선만 표시합니다. 여러 풍선을 표시하는 것은 압도적 일 수 있습니다. 단일 이벤트로 인해 여러 문제가 발생하는 경우 모든 문제를 한 번에 표시하거나 가장 중요한 문제만 보고합니다.

틀림:

이 예제에서는 두 가지 문제가 동시에 잘못 표시됩니다.

표시할 기간

• 다음과 같은 경우 풍선을 제거합니다.
  • 문제가 해결되었거나 특수 조건이 제거되었습니다.
  • 사용자가 유효한 데이터를 입력합니다(입력 문제).
  • 풍선 시간이 초과되었습니다. 기본적으로 풍선은 10초 후에 제거되지만 사용자는 SPI_MESSAGEDURATION 시스템 매개 변수를 수정하여 이를 변경할 수 있습니다.
• 사용자가 문제가 해결될 때까지 계속할 수 없는 경우 시간 제한을 제거합니다. 개발자: Win32에서는 TTM_SETDELAYTIME 메시지를 사용하여 표시 시간을 설정할 수 있습니다.

표시하는 방법

• 소유자 컨트롤 아래에 풍선을 표시합니다. 이렇게 하면 사용자는 소유자 컨트롤 및 해당 레이블을 포함하여 컨텍스트를 볼 수 있습니다. Microsoft Windows는 풍선 위치가 화면에 완전히 표시되도록 자동으로 조정합니다. 기본 동작은 알림과 마찬가지로 소유자 컨트롤 위에 풍선을 표시하는 것입니다.

옳음:

틀림:

잘못된 예제에서는 풍선이 소유자 컨트롤 위에 어색하게 표시됩니다.

암호 및 PIN 텍스트 상자

• 다음 예제의 텍스트를 사용하여 Caps Lock이 켜진 것을 나타내려면 풍선을 사용합니다.

이 예제에서 풍선은 PIN 텍스트 상자에 Caps Lock이 있음을 나타냅니다.

• 풍선을 사용하여 사용자가 최대 입력 크기를 초과하려고 할 때를 나타냅니다. 일반 텍스트 상자보다 암호 및 PIN 텍스트 상자에서 최대 입력 크기에 도달하는 것이 훨씬 덜 분명합니다.

이 예제에서 풍선은 사용자가 최대 입력 크기를 초과하려고 했음을 나타냅니다.

• 풍선을 사용하여 사용자가 잘못된 문자를 입력할 때를 나타냅니다. 그러나 암호 또는 PIN의 보안을 줄이기 때문에 이러한 제한을 사용하지 않는 것이 좋습니다. 정보 공개를 방지하기 위해 풍선은 유효한 암호 또는 PIN에 대해 문서화된 사실만 언급해야 합니다.

이 예제에서 풍선은 PIN에 숫자가 필요했음을 나타냅니다.

기타 텍스트 상자

• 풍선을 사용하여 사용자가 초보 사용자를 대상으로 하는 중요하고 짧은 텍스트 상자의 최대 입력 크기를 초과하려고 할 때를 나타내는 것이 좋습니다. 사용자 이름 및 계정 이름을 예로 들어 있습니다. 사용자가 최대 입력을 초과하려고 하면 텍스트 상자에 경고음이 표시되지만 초보 사용자는 경고음의 의미를 이해하지 못할 수 있습니다.

이 예제에서 풍선은 사용자가 최대 입력 크기를 초과하려고 했음을 나타냅니다.

상호 작용

• 사용자가 풍선을 클릭하면 다른 UI를 표시하거나 다른 부작용이 발생하지 않고 풍선을 해제하면 됩니다. 알림과 달리 풍선에는 닫기 단추가 없어야 합니다.

아이콘

• 사용 패턴에 따라 아이콘을 선택합니다.

  패턴	Icon
  입력 문제	아이콘이 없습니다. 여기에 오류 아이콘을 사용하지 않는 것은 Windows 톤 지침과 일치합니다.
  특수 조건	표준 16x16 픽셀 경고 아이콘입니다.

접근성

제대로 사용하면 풍선이 접근성을 향상시킵니다. 풍선에 액세스할 수 있는 경우:

• 사용자의 현재 활동과 관련된 풍선만 표시합니다.
• 풍선 텍스트를 간결하게 유지합니다. 이렇게 하면 시력이 낮은 사용자가 풍선 텍스트를 더 쉽게 읽을 수 있으며 화면 읽기 프로그램에서 읽을 때 중단이 최소화됩니다.
• 문제 또는 조건이 재발할 때마다 풍선을 다시 표시합니다.

Text

제목 텍스트

• 입력 문제 또는 특수 조건을 명확하고 간결하고 간결한 특정 언어로 간략하게 요약하는 제목 텍스트를 사용합니다. 사용자는 최소한의 노력으로 풍선의 목적을 신속하게 이해할 수 있어야 합니다.
• 문장 부호를 끝내지 않고 텍스트 조각 또는 전체 문장을 사용합니다.
• 문장 스타일 대/소문자를 사용합니다. 자세한 내용은 용어집을 참조하세요.
• 지역화를 수용하려면 48자 이하(영어로)를 사용합니다. 타이틀의 최대 길이는 63자이며 지역화를 수용하려면 30% 이상 확장할 수 있어야 합니다.

본문 텍스트

• 본문 텍스트의 첫 번째 문장을 사용하여 사용자와 명확하게 관련된 방식으로 문제 또는 조건을 명시합니다. 타이틀의 정보를 반복하지 마세요. 더 이상 추가할 항목이 없으면 생략합니다.
• 두 번째 문장을 사용하여 사용자가 문제를 해결하거나 상태를 되돌리기 위해 수행할 수 있는 작업을 설명합니다. 스타일 및 톤 지침에 따라 이 문에서 Please라는 단어를 사용할 필요가 없습니다. 첫 번째 문장과 두 번째 문장 사이에 두 줄 바꿈을 배치합니다.

이 예제에서는 표준 풍선 텍스트 레이아웃을 보여 줍니다.

• 해당 설명이 명백한 경우에도 문제를 해결하거나 상태를 되돌리는 방법을 설명하지만 문제 설명과 해결 방법 간의 중복성은 생략합니다. 예외:
  • 간결하게 또는 상당한 중복성 없이 표현할 수 없는 경우 해결을 생략합니다.
  • 잘못된 문자가 무시되는 경우와 같이 사용자가 수행할 작업이 없는 경우 해결 방법을 생략합니다.
• 문장 부호가 끝나는 전체 문장을 사용합니다.
• 문장 스타일 대문자를 사용합니다.
• 지역화를 수용하려면 200자 이하(영어로)를 사용합니다. 본문 텍스트의 최대 길이는 255자이며 지역화를 수용하려면 30% 이상 확장할 수 있어야 합니다.

설명서

풍선을 참조하는 경우:

• 대문자를 포함하여 정확한 제목 텍스트를 사용합니다.
• 구성 요소를 알림이나 경고가 아닌 풍선으로 참조합니다.
• 가능하면 굵은 텍스트를 사용하여 제목 텍스트의 서식을 지정합니다. 그렇지 않으면 혼동을 방지하기 위해 필요한 경우에만 제목을 따옴표로 묶습니다.