표준 아이콘

참고

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

표준 아이콘은 Windows의 일부인 오류, 경고, 정보 및 물음표 아이콘입니다.

4개의 표준 아이콘 스크린샷

표준 오류, 경고, 정보 및 물음표 아이콘입니다.

표준 아이콘에는 다음과 같은 의미가 있습니다.

  • 오류 아이콘. UI(사용자 인터페이스)에서 발생한 오류 또는 문제가 표시됩니다.
  • 경고 아이콘. UI는 나중에 문제를 일으킬 수 있는 조건을 제공합니다.
  • 정보 아이콘. UI는 유용한 정보를 제공합니다.
  • 물음표 아이콘. UI는 도움말 진입점을 나타냅니다.

표준 아이콘은 작업 대화 상자, 메시지 상자, 풍선 및 알림과 같은 많은 Windows API(애플리케이션 프로그래밍 인터페이스)에 내장되어 있기 때문에 주목할 만 합니다. 또한 현재 위치 메시지상태 막대에서도 일반적으로 사용됩니다.

참고:아이콘과 관련된 지침은 별도의 문서에 제공됩니다.

설계 개념

적절한 표준 아이콘을 선택하는 데는 몇 가지 요인이 있는데, 이 아이콘은 왜 잘못 사용되는지 부분적으로 설명합니다. 가장 일반적인 실수는 다음과 같습니다.

  • 사소한 오류에 대한 경고 아이콘 사용. 경고는 "부드럽게" 오류가 아닙니다.
  • 아무 아이콘도 사용하지 않는 것이 더 좋을 때 표준 아이콘을 사용합니다. 모든 메시지에 아이콘이 필요한 것은 아닙니다.
  • 사소한 문제에 대한 경고를 제공하거나 일상적인 질문을 경고로 제시하여 사용자를 놀라게 합니다. 이렇게 하면 프로그램이 위험해 보이고 진정으로 중요한 문제가 손상됩니다.

이 섹션의 나머지 부분에서는 이러한 일반적인 실수를 방지하기 위해 표준 아이콘에 대해 생각하는 방법을 설명합니다.

메시지 유형 및 심각도

기본 문제의 심각도가 아니라 메시지 유형을 기반으로 표준 아이콘을 선택합니다. 메시지 유형은 다음과 같습니다.

  • 오류. 발생한 오류 또는 문제입니다.
  • 경고. 나중에 문제를 일으킬 수 있는 조건입니다.
  • 정보. 유용한 정보입니다.

따라서 오류 메시지에 오류 아이콘이 표시될 수 있지만 경고 아이콘은 없을 수 있습니다. 사소한 오류를 "부드럽게" 하는 방법으로 경고 아이콘을 사용하지 마세요. 따라서 심각도의 차이에도 불구하고 "잘못된 글꼴 크기"는 오류이지만 "이 작업을 계속하면 집이 불에 타게 됩니다"라는 경고가 표시됩니다.

적절한 메시지 유형 결정

일부 문제는 강조 및 구문에 따라 오류, 경고 또는 정보로 표시될 수 있습니다. 예를 들어 웹 페이지에서 현재 Windows 인터넷 Explorer 구성에 따라 서명되지 않은 ActiveX 컨트롤을 로드할 수 없다고 가정합니다.

  • 오류. "이 페이지는 서명되지 않은 ActiveX 컨트롤을 로드할 수 없습니다." (기존 문제로 표현되었습니다.)
  • 경고. "Windows Internet Explorer 서명되지 않은 ActiveX 컨트롤을 로드하도록 구성되지 않았으므로 이 페이지가 예상대로 작동하지 않을 수 있습니다." 또는 "이 페이지에서 서명되지 않은 ActiveX 컨트롤을 설치하도록 허용하시겠습니까? 신뢰할 수 없는 원본에서 수행하면 컴퓨터에 해를 끼칠 수 있습니다." (둘 다 향후 문제를 일으킬 수 있는 조건으로 표현되었습니다.)
  • 정보. "서명되지 않은 ActiveX 컨트롤을 차단하도록 Windows 인터넷 Explorer 구성했습니다." (사실의 진술로 표현됩니다.)

적절한 메시지 유형을 확인하려면 사용자가 알고 있거나 조치를 취해야 하는 문제의 가장 중요한 측면에 초점을 맞춥니다. 일반적으로 문제가 사용자를 계속 진행하지 못하게 하는 경우 오류로 표시됩니다. 사용자가 계속 진행할 수 있으면 경고입니다. 해당 포커스를 기반으로 기본 명령 또는 기타 해당 텍스트를 만든 다음 텍스트와 일치하는 아이콘(표준 또는 기타)을 선택합니다. 기본 명령 텍스트와 아이콘은 항상 일치해야 합니다.

심각도

심각도는 오류, 경고 및 정보 아이콘 중에서 선택할 때 고려 사항이 아니지만 심각도는 표준 아이콘을 사용해야 하는지 여부를 결정하는 요소입니다.

아이콘은 시각적으로 통신하는 데 사용할 때 가장 잘 작동합니다. (접근성상의 이유로 이 시각적 통신은 항상 텍스트 또는 소리와 같은 다른 형식과 중복되어야 합니다.) 사용자는 정보의 특성과 응답의 결과를 한눈에 알 수 있어야 하므로 중요한 오류와 경고를 일반 오류와 구분해야 합니다. 중요한 오류 및 경고에는 다음과 같은 특성이 있습니다.

  • 다음 중 하나 이상의 잠재적 손실이 수반됩니다.
    • 데이터 손실 또는 재정적 손실과 같은 중요한 자산입니다.
    • 시스템 액세스 또는 무결성.
    • 기밀 정보에 대한 개인 정보 보호 또는 제어
    • 사용자의 시간(30초 이상 등)입니다.
  • 예기치 않은 결과나 의도하지 않은 결과가 있습니다.
  • 실수를 쉽게 해결할 수 없고 돌이킬 수 없기 때문에 지금 올바른 처리가 필요합니다.

중요하지 않은 오류와 경고를 중요 오류와 구분하기 위해 대개 중요하지 않은 메시지는 아이콘 없이 표시됩니다. 이렇게 하면 중요한 메시지에 주의를 기울이고, 중요 메시지와 중요하지 않은 메시지를 시각적으로 구분하며, Windows 톤과 일치합니다.

모든 메시지에 아이콘이 필요한 것은 아닙니다. 아이콘은 메시지를 데코레이트하는 방법이 아닙니다.

다음은 이전에 정의된 특성을 충족하기 때문에 중요한 경고의 좋은 예입니다.

데이터를 백업하는 경고 스크린샷

이 예제에서 중요한 경고는 잠재적인 돌이킬 수 없는 데이터 손실을 사용자에게 경고합니다.

그러나 다음 예제는 의도적이고 결과를 쉽게 실행 취소할 수 있으므로 중요하지 않습니다.

잘못된 예:

경고 아이콘의 잘못된 사용 스크린샷

이 예제에서는 의도적이고 쉽게 실행 취소할 수 있으므로 이 확인 은 중요하지 않습니다.

일반적인 UI에서 대부분의 오류는 사용자 입력 오류와 관련이 있습니다. 대부분의 사용자 입력 오류는 쉽게 수정되므로 중요하지 않으며 사용자는 계속하기 전에 수정해야 합니다. 또한 사소한 사용자 실수에 너무 많은 주의를 기울이는 것은 Windows 톤과 반대입니다. 따라서 사소한 사용자 입력 오류는 일반적으로 오류 아이콘 없이 표시됩니다. 중요하지 않은 특성을 강화하기 위해 이를 사용자 입력 문제라고 합니다.

사용자에게 올바른 입력을 알리는 스크린샷

이 예제에서는 이 사소한 사용자 입력 문제가 중요하지 않으므로 대화 상자에 표시될 때 아이콘이 필요하지 않습니다.

과부하 방지

Windows 프로그램에서 덮어 줍니다. 일반적인 Windows 프로그램에는 거의 의미가 없는 항목에 대해 경고하는 경고 아이콘이 사방에 있습니다. 일부 프로그램에서는 거의 모든 질문이 경고로 표시됩니다. 과용하면 프로그램을 사용하는 것이 위험한 활동처럼 느껴지며 진정으로 중요한 문제를 방해합니다.

데이터 손실 가능성만으로는 경고 아이콘을 호출할 수 없습니다. 또한 바람직하지 않은 결과는 예기치 않거나 의도하지 않아야 하며 쉽게 수정할 수 없습니다. 그렇지 않으면 잘못 답변된 질문에 대해 해석되어 어떤 종류의 데이터가 손실되고 경고 아이콘이 될 수 있습니다.

진정으로 중요한 문제에 경고 아이콘을 집중하려면 다음을 수행합니다.

  • 문제가 사용자의 관심을 고조시키는지 확인합니다. 일상적인 확인 및 질문에는 경고 아이콘이 없어야 합니다.
  • 사용자가 경고 아이콘의 결과로 다르게 동작할 가능성이 있나요? 사용자가 결정을 더 신중하게 고려할 가능성이 있나요?

잘못된 예:

불필요하게 사용되는 경고 아이콘의 스크린샷

이 예제에서는 경고 아이콘으로 인해 사용자가 이 질문에 다르게 대답할 가능성이 있나요?

  • 수행해야 할 몇 가지 중요한 조치 또는 결정을 내릴 수 있습니까? 작업이 없는 경고는 사용자가 편집증을 느끼게 합니다.

잘못된 예:

미리 알림과 함께 사용되는 경고 아이콘의 스크린샷

이 알림이 경고인 이유는 무엇인가요? 사용자가 해야 할 일(걱정 외)?

Context

컨텍스트 자체는 정보를 전달하기 때문에 컨텍스트는 표준 아이콘을 사용할 때도 고려해야 합니다. 특히 다음에 대한 내용을 설명합니다.

  • 대화 상자(작업 대화 상자 및 메시지 상자 포함) 및 알림에는 중요하지 않은 오류에 대한 아이콘이 필요하지 않지만 현재 위치 오류에는 항상 오류 아이콘이 필요합니다. 그렇지 않으면 이러한 비모달 피드백은 간과하기가 너무 쉽습니다.
  • 현재 위치 경고는 항상 일반 텍스트와 구분하기 위해 경고 아이콘이 필요합니다.
  • 대화 상자, 알림 및 풍선은 정보를 명확하게 표시하므로 정보 아이콘이 필요하지 않습니다. 반면 배너에는 16x16 픽셀 정보 또는 기타 아이콘이 필요합니다. 이러한 비모달 피드백은 간과하기가 너무 쉽기 때문입니다.

컨텍스트는 아이콘 사용의 중요한 요소이므로 이 문서의 표준 아이콘 지침은 컨텍스트 측면에서 제공됩니다.

표준 아이콘 적합성 평가

UI 텍스트를 평가할 때 표준 아이콘도 읽습니다. 오류 아이콘을 "오류!"로 읽고 경고 아이콘을 "경고, 여기서 매우 주의하세요!"로 읽고 정보 아이콘을 "주의!"로 읽습니다. 그런 다음, 기본 명령, 콘텐츠 영역 및 커밋 단추와 같은 나머지 컨텍스트를 계속 읽습니다. 각 표준 아이콘의 의미와 톤이 컨텍스트의 의미와 톤과 일치하는지 확인합니다. 그렇지 않으면 문제가 발견되었습니다.

한 가지만 수행하면...

각 표준 아이콘의 의미와 톤이 컨텍스트의 의미와 톤과 일치하는지 확인합니다. 일치하지 않는 경우 아이콘을 변경하거나 제거합니다.

지침

참고: 다음 지침의 경우 "현재 위치"는 마법사, 속성 시트 또는 제어판 항목 페이지의 콘텐츠 영역 내와 같은 일반 창 화면에서 를 의미합니다.

일반

  • 기본 문제의 심각도가 아니라 메시지 유형을 기반으로 표준 아이콘을 선택합니다.
    • 오류. 발생한 오류 또는 문제입니다.
    • 경고. 나중에 문제를 일으킬 수 있는 조건입니다.
    • 정보. 유용한 정보입니다.
  • 문제가 다른 메시지 유형에 걸쳐 있는 경우 사용자가 조치를 취해야 하는 가장 중요한 측면에 집중합니다.
  • 아이콘은 항상 기본 명령이나 기타 해당 텍스트와 일치해야 합니다.

올바름:

오류 텍스트와 함께 사용되는 오류 아이콘의 스크린샷

잘못된 예:

오류 텍스트와 함께 사용되는 경고 아이콘의 스크린샷

잘못된 예제에서 표준 경고 아이콘이 기본 명령과 일치하지 않습니다(오류가 발생).

아이콘 크기

  • 컨텍스트에 따라 표준 아이콘 크기를 선택합니다.

    Context 사용 시기
    대화 상자
    콘텐츠 영역 아이콘에는 32x32픽셀을 사용합니다. 각주 영역 아이콘의 경우 16x16픽셀입니다.
    현재 위치
    오류 페이지에는 32x32 픽셀을 사용합니다. 다른 모든 아이콘에 대한 16x16 픽셀 아이콘입니다.
    공지
    16x16 픽셀 아이콘을 사용합니다.
    풍선 도움말
    16x16 픽셀 아이콘을 사용합니다.
    배너
    16x16 픽셀 아이콘을 사용합니다.

오류 아이콘

  • 오류 또는 문제가 발생한 경우에만 오류 아이콘을 사용합니다.

    Context 사용 시기
    대화 상자
    중요한 오류에만 사용합니다. (중요하지 않은 오류에는 표준 아이콘을 사용하지 마세요.)
    오류 메시지와 함께 사용되는 오류 아이콘을 보여 주는 스크린샷
    현재 위치 오류
    모든 오류에 를 사용합니다.
    오류 메시지와 함께 사용되는 오류 아이콘의 스크린샷
    공지
    중요한 오류에만 사용합니다. ( 작업 실패의 경우)
    알림 오류 메시지와 함께 사용되는 오류 아이콘을 보여 주는 스크린샷
    풍선 도움말
    사용하지 마세요. 풍선은 중요한 오류에 사용하면 안 되며 중요하지 않은 오류에 대한 오류 아이콘이 필요하지 않습니다.
    배너
    사용하지 마세요. 배너는 오류에 사용하면 안 됩니다.
  • 일반적으로 중요하지 않은 사용자 입력 문제에는 오류 아이콘이 필요하지 않습니다. 그러나 현재 위치 오류에는 아이콘이 필요합니다. 그렇지 않으면 이러한 상황별 피드백을 간과하기가 너무 쉽기 때문입니다.

  • 작업 대화 상자의 경우 오류 각주 아이콘을 사용하지 마세요. 오류 아이콘은 콘텐츠 영역에만 표시되어야 합니다.

경고 아이콘

  • 나중에 조건이 문제를 일으킬 수 있는 경우에만 경고 아이콘을 사용합니다.

    Context 사용 시기
    대화 상자
    모든 경고에 를 사용합니다.
    파일 이름 확장명 변경에 대한 스크린샷 경고
    현재 위치 경고
    를 사용하여 텍스트를 경고로 식별합니다.
    사용 가능한 공간이 충분하지 않다는 경고 스크린샷
    공지
    모든 경고에 를 사용합니다. ( 중요하지 않은 시스템 이벤트의 경우)
    배터리 부족 경고 알림의 스크린샷
    풍선 도움말
    특수 조건에 사용합니다.
    캡 잠금의 풍선 경고 스크린샷
    배너
    배너에 주의를 끌기 위해 를 사용합니다.
    tpm 누락 경고가 포함된 배너 스크린샷
  • 경고 아이콘을 사용하여 중요하지 않은 오류를 "부드럽게" 사용하지 마세요. 오류는 경고가 아니라 오류 아이콘 지침을 대신 적용합니다.

  • 질문 대화 상자의 경우 중요한 결과가 있는 질문에만 경고 아이콘을 사용합니다. 일상적인 질문에는 경고 아이콘을 사용하지 마세요.

올바름:

시스템 복원을 중지하지 않는 스크린샷 경고

잘못된 예:

미리 알림 해제에 대한 경고 스크린샷

잘못된 예제에서는 경고 아이콘이 일상적인 질문에 잘못 사용됩니다.

  • 작업 대화 상자의 경우 경고 각주 아이콘을 사용하여 사용자에게 위험한 결과를 경고할 수 있습니다. 그러나 콘텐츠 영역이나 각주 영역에서 경고 아이콘을 사용하지만 둘 다 사용하지는 않습니다.

안전하지 않을 수 있는 파일의 스크린샷 경고

이 예제에서는 각주에 노란색 보안 방패가 사용됩니다.

정보 아이콘

  • 컨텍스트가 정보를 명확하게 표시하지 않는 경우에만 정보 아이콘을 사용합니다.

    Context 사용 시기
    대화 상자
    사용하지 마세요.
    현재 위치
    사용하지 마세요. 대신 일반 정적 텍스트 또는 배너를 사용합니다.
    공지
    사용하지 마세요.
    풍선 도움말
    사용하지 마세요.
    배너
    배너에 주의를 끌기 위해 를 사용합니다.
    설정 정보가 포함된 배너 스크린샷
  • 대화 상자, 알림 및 풍선에는 정보 아이콘이 필요하지 않습니다. 컨텍스트가 사용자에게 정보를 제공하고 있음을 충분히 전달하기 때문입니다.

  • 작업 대화 상자의 경우 정보 각주 아이콘을 사용하지 마세요. 각주가 충분히 볼 수 있으며 정보라는 것은 말할 나 마찬가지입니다.

물음표 아이콘

  • 도움말 진입점에 대해서만 물음표 아이콘을 사용합니다. 자세한 내용은 도움말 진입점 지침을 참조하세요.
  • 물음표 아이콘을 사용하여 질문을 하지 마세요. 다시 말하지만 도움말 진입점에 대해서만 물음표 아이콘을 사용합니다. 물음표 아이콘을 사용하여 질문을 할 필요가 없습니다 어쨌든 질문으로 기본 지침을 제시하기에 충분합니다.
  • 물음표 아이콘을 경고 아이콘으로 정기적으로 바꾸지 마세요. 물음표 아이콘을 중요한 결과가 있는 경우에만 경고 아이콘으로 바꿉니다. 그렇지 않으면 아이콘을 사용하지 않습니다.