교육기관에 맞는 사용자 정의된 브랜드를 생성하면 직접적으로 로고, 색상 및 중요한 정보를 사용자에게 확장할 수 있습니다. 사용자 지정된 브랜드는 교육기관의 성격, 메시지, 약속 및 서비스를 전달합니다. 브랜드를 사용자정의하는 방법은 간단한 방법부터 복잡한 방법까지 다양합니다.

브랜드를 사용자 정의하기 전에 먼저 사용자 정의 목표를 식별하고 접근법을 계획해야 합니다.

  • 사용자 정의 범위를 식별하고 목표를 달성하기 위한 가장 쉽고 효과적인 방법을 선택합니다. 예를 들어 단지 교육기관의 색상 및 로고를 추가하기 위해 사용자 지정된 시스템 테마를 생성할 필요는 없습니다. 대신 기본 브랜드를 사용자 지정하여 색상을 변경하고 로고를 추가해 보십시오.
  • 교육기관의 이미지를 조사하여 규정된 브랜딩 및 스타일 가이드라인을 준수하는지 확인합니다.
  • 사용자 정의 로그인 페이지, 게이트웨이 페이지 및 시스템 테마를 디자인할 때 모형을 생성합니다.
  • 사용자 정의 색상표 및 테마를 디자인하고 테스트하기 위한 적절한 개발 일정을 수립합니다.
  • 사용자 정의 시스템 테마를 위한 QA 및 유지보수 계획을 수립합니다.

사용자 지정 로그인 페이지 및 게이트웨이 페이지

사용자 정의 로그인 페이지 - 로그인 페이지를 사용자 정의하면 간단하게 브랜드를 사용자 정의할 수 있습니다. 로그인 페이지는 자체적인 CSS와 수정 가능한 마크업이 다수 포함된 단일 파일입니다. 로그인 페이지를 다시 디자인해도 다른 애플리케이션에는 영향이 가지 않으므로 변경 범위가 작습니다. 사용자 정의된 로그인 페이지를 생성하려면 HTML 및 CSS 관련 사전 지식이 필요합니다. 또한 연계된 모든 이미지를 저장하는 위치를 잘 결정해야 합니다. 자세히 알아보려면 로그인 페이지 사용자 지정을 참조하십시오.

게이트웨이 페이지 - 게이트웨이 페이지는 이 설정을 건너뛰지 않는 한 사용자가 Blackboard에 접근할 때 가장 먼저 보게 되는 웹 페이지입니다. 사용자 정의된 시작 메시지 및 이미지를 추가하는 것은 물론, 중요하고 시기적절한 정보가 포함된 모듈도 추가할 수 있습니다. 사용자 정의된 모듈을 생성하려면 HTML 및 CSS 관련 사전 지식이 필요합니다. 자세한 내용은 모듈 및 게이트웨이 페이지 사용자 지정을 참조하십시오.

포털 페이지를 디자인하는 가장 좋은 방법

나의 교육기관 페이지 등의 포털 페이지는 일반적으로 사용자가 Blackboard Learn에 접근했을 때 처음 표시되는 페이지입니다. 이 페이지의 모듈 콘텐츠를 신중히 디자인하고 배열하면 브랜드를 강화하고 사용자 환경을 개선할 수 있습니다. 이를 위해서는 다음 두 가지의 일반적인 단계를 따르면 됩니다.

  1. 모든 모듈 콘텐츠를 검토하여 새로 적용되는 브랜드와 충돌하지 않는지 확인합니다. 모듈 콘텐츠를 디자인할 때 교육기관의 테마 및 색상표에 규정된 규칙을 따르도록 합니다. 모듈 텍스트가 테마 및 색상표에 정의된 색상과 글꼴 스타일에 대응하도록 모듈을 HTML로 코딩하도록 합니다. 모듈은 하나의 큰 이미지(웹사이트의 배너 광고와 유사)를 사용하여 메시지를 전달하기도 합니다. 페이지에 활기를 불어넣으려면 이미지가 필요하지만, 헤더 텍스트, 단락 텍스트 및 그래픽으로 가득 채워진 "배너 광고"의 디자인은 브랜드에서 사용되는 테마 및 색상표와 조화를 이루지 못할 수도 있습니다. HTML을 사용하면 모듈이 유연해지며 브라우저 창의 크기가 조정되면 콘텐츠 크기도 그에 맞춰 조정됩니다.
  2. 사용자가 페이지를 쉽게 검색하고 실행 가능한 콘텐츠를 찾을 수 있도록 시각적 계층을 정의해 보십시오. 말처럼 쉽지 않을 수도 있습니다. 포털은 다양한 콘텐츠가 포함된 여러 모듈을 포함하므로 대개 여러 내부 이해관계자의 요구를 충족해야 합니다. 이해관계자가 각자 본인의 자료를 부각하려고도 합니다. 일반적으로 모든 모듈이 동일하게 우수하다면 차별성이 떨어져 사용자에게 혼동을 유발할 수 있습니다. 전반적인 시각으로 페이지를 고려하여 사용자가 주요 콘텐츠를 쉽게 찾을 수 있도록 모듈을 배열하십시오.

포털 페이지를 디자인할 때 적용할 수 있는 또 다른 좋은 방법은 한 페이지 유형에 국한할 것이 아니라 브랜드의 모양과 느낌을 정의했을 때 고려했던 사항을 포함하는 것입니다.

접근성

  • 접근 가능한 대비율 사용
  • 적절한 글꼴, 크기 및 줄 간격을 선택하여 텍스트 가독성 향상
  • 텍스트에 이미지 사용 피하기
  • 질감이 있는 배경 사용 피하기
  • 링크에 '여기를 클릭'이 아닌, 의미 있는 이름을 지정
  • W3C 및 접근성 페이지 링크 포함

심미성

  • 브랜드 및 테마에 맞는 색상 사용
  • 가독성이 높은 글꼴 사용
  • 고화질 그래픽 사용
  • 모듈이 페이지를 채우도록 배열
  • 콘텐츠 검색이 쉽도록 시각적 계층 생성
  • 복잡하고, 화려하며, 답답한 페이지 디자인/레이아웃 사용 금지
  • 정기적으로 페이지 콘텐츠 갱신
  • 가능한 경우 콘텐츠의 크기가 다양한 표시에 맞게 적절히 조정되도록 반응형 디자인 기술을 적용하십시오.

Learn의 기본 모듈 레이아웃만으로는 충분하지 않다고 생각되는 경우 하나의 고유한 HTML 모듈로 채워진 하나의 열이 사용되도록 포털 페이지를 수정해 보십시오. 다른 인덱스 페이지의 경향과 비슷하게 원하는 레이아웃이 사용되도록 단일 모듈에서 사용자 지정 HTML을 수정할 수 있습니다.

GUI(시각적 사용자 인터페이스) 컨트롤

GUI 컨트롤 - Learn 설치에 사용할 일련의 색상 및 레이아웃 옵션 집합을 선택하여 브랜드의 디자인을 쉽게 변경할 수 있습니다. 다음 작업을 수행할 수 있습니다.

  • 한정된 UI 요소 세트의 색상 변경
  • 로고 이미지 지정 및 특정 URL에 링크로 연결
  • 시스템 탭 색상 및 레이아웃 옵션 선택

HTML 또는 CSS를 잘 몰라도 이러한 작업을 할 수 있습니다. 시스템 전체에 변경 사항을 적용하기 전에 미리 보기 창에서 선택 사항을 확인할 수 있습니다. 모든 색상 선택사항은 색상표로 저장할 수 있습니다.

색상표 및 시스템 테마

색상표 - Blackboard Learn에서는 12개 이상의 색상표가 제공됩니다. 이 중 하나를 선택하여 기본 브랜드에 사용할 수 있습니다. UI를 사용하여 색상표의 색상을 변경할 수도 있고, 색상표를 다운로드하고 텍스트 수정 또는 CSS 수정 도구를 사용하여 변경할 수도 있습니다.

시스템 테마 - 시스템 테마는 교육기관의 디자인을 정의하는 CSS 레이어입니다. Blackboard Learn에서 제공되는 테마를 선택할 수도 있고 고유한 테마를 디자인할 수도 있습니다. 고유한 테마를 생성하는 가장 쉬운 방법은 기존 테마를 다운로드하여 템플릿으로 사용하는 것입니다. 텍스트 수정 또는 CSS 수정 도구를 사용하여 변경할 수 있습니다.

사용자 지정 색상표

사용자 지정 색상표 - 교육기관의 색상 구성, 로고 또는 브랜딩에 맞는 고유한 색상표를 생성하여 UI를 광범위하게 사용자 지정할 수 있습니다. Blackboard Learn에는 시스템에 다양한 색상을 적용하는 여러 색상표가 있습니다. 특정 요구사항에 맞게 기존 색상표를 수정할 수 있습니다.

사용자 지정 색상표를 디자인하는 가장 좋은 방법

사용자 정의 색상표의 색상을 선택하는 경우 다음과 같은 좋은 방법들을 염두에 두십시오.

  • 교육기관의 시각적 정체성에 맞는 색상을 사용합니다. 교육기관의 스타일 설명서에서 공식 색상을 확인합니다. 선택한 색상 조합이 UI에 사용할 색상구성으로 적합한지 확인합니다.
  • 선택한 색상이 서로 잘 어우러져 시각적으로 조화로운 환경이 조성되도록 합니다. Color Matters는 단색, 근접색 및 보색 구성표에 대해 배우기 좋은 웹 사이트입니다. 색상 이론을 학습하면 교육기관에 잘 맞는 색상을 더 쉽게 선택할 수 있습니다.

사용자 지정 시스템 테마

사용자 지정 시스템 테마 - 사용자 지정 시스템 테마를 생성하여 교육기관의 Learn 설치 UI를 완전히 바꿀 수 있습니다. 이는 가장 가장 비용이 많이 들고 복잡한 사용자 정의 방법으로, 12,000개 이상의 코드 행을 검토하고 수정해야 합니다. 이 방법은 Blackboard Learn UI를 교육기관의 시각적 이미지에 맞게 구성할 수 있는 최적의 옵션이기는 하지만 모든 새로운 Learn이 출시될 때마다 지속적으로 테스트를 해야 합니다.

사용자 지정 시스템 테마를 디자인하는 가장 좋은 방법

사용자 정의 시스템 테마 디자인에는 복잡한 작업이 수반되므로 부수적 프로젝트로 간주해서는 안 됩니다. 따라서 심층적인 CSS 및 DOM 관련 사전 지식이 요구됩니다. 또한 테마를 개발, 테스트 및 유지보수할 수 있는 개발 환경도 갖춰야 합니다.

  • 색상 - 교육기관의 시각적 정체성을 조사합니다. 교육기관에는 교육기관 브랜드 색상에 대한 섹션이 포함된 스타일 설명서가 있을 것입니다. 선택한 색상 조합이 UI에 사용할 색상구성으로 적합한지 확인합니다.
  • 색상 조화 - 단색, 근접색 및 보색 색 구성표를 전반적으로 이해하고 있다면 교육기관 브랜드 색에 잘 부합하는 색상을 선택하기가 쉽습니다.
  • 접근성 요구 사항 - 최종적으로 만들어지는 시스템 테마의 대비가 충분하고 또 다른 방식으로 접근하기 쉽게 만들려면 익숙한 환경이 매우 중요합니다.
  • 글꼴 - 브랜드에 다양한 글꼴을 지정할 수 있습니다. 글꼴을 테스트하여 여러 운영 체제에서 표시될 수 있는지 확인합니다. 테마에 글꼴을 포함하고 @font-face 규칙을 사용하여 이러한 글꼴을 참조하는 방식으로 사용자 정의 글꼴을 적용할 수도 있습니다. 사용자 정의 글꼴이 가르치는 데 사용하는 언어를 지원하는지 확인하십시오.
  • 아이콘 - 특정 아이콘을 다시 디자인하여 전체 애플리케이션에서 백그라운드 이미지로 사용할 수 있습니다.

사용자 지정 시스템 테마 및 빌딩 블록

사용자 지정된 시스템 테마가 있는 경우 빌딩 블록에 포함된 새 페이지로 사용자 지정을 확장할 수 있습니다. 모든 빌딩 블록에 고유한 도구별 스타일 시트가 있는 것은 아니지만, 이러한 시트가 있는 빌딩 블록도 있습니다.

'관리자 패널'에서 사용할 수 있는 도구별 스타일 시트가 빌딩 블록에 포함되어 있는지에 대한 정보를 확인하려면 통합 섹션에서 빌딩 블록을 선택한 다음, 설치된 도구를 선택합니다. 나열된 빌딩 블록의 메뉴를 열고 구성 요소 보기를 선택합니다. 빌딩 블록에 기본 Learn 테마에 대한 도구별 스타일 시트가 포함되어 있으면 이 페이지에 테마 핸들이 표시됩니다.

설치한 하나의 Learn에 여러 브랜드 사용하기

시스템 내 역할에 따라 여러 사용자 그룹에 다양한 브랜드를 생성할 수 있습니다. 하나의 Learn 인스턴스에서 여러 브랜드를 사용하려면 사용자 지정 호스트명을 생성해야 합니다.