배너, 블록/공지 또는 비디오에 대한 스타일 지정 컨텐츠 생성

  • 릴리스 버전: Washingtondc
  • 업데이트 날짜 2024년 02월 01일
  • 읽기9분

    • 스타일 컨텐츠 유형을 사용하여 배너, 블록/공지 또는 비디오를 작성하고 텍스트 색, 텍스트 정렬, 링크, 배경색 및 이미지와 같은 설정을 사용자 지정합니다.

    시작하기 전에

    필요한 역할: sn_cd.content_manager

    새 컨텐츠 양식 필드를 채웁니다. 서식 있는 컨텐츠 만들기 참조

    모듈 또는 열을 사용하여 페이지 레이아웃을 생성합니다.

    이 태스크 정보

    이 콘텐츠 유형은 다음 세 가지 옵션을 제공합니다.
    • 배너: 페이지 상단에 나타납니다.
    • 블록: 페이지의 위젯에 나타납니다
    • 비디오: 배너 대신 상단을 포함하여 페이지의 아무 곳에나 표시할 수 있습니다.
    컨텐츠 라이브러리는 다음과 같은 유형의 비디오를 지원합니다.
    • HTML5
      주:
      가리키기 텍스트 또는 도구 설명은 현재 HTML5에서 지원되지 않습니다.
    • YouTube
    • Vimeo

    스타일 컨텐츠를 사용하여 배너를 만들거나 편집하면 이미지를 외부에서 편집한 다음 임포트하는 대신 배경 이미지를 보고 편집할 수 있습니다.

    양식의 왼쪽 상단에 있는 양식 컨텍스트 메뉴(양식 컨텍스트 메뉴)는 컨텐츠 생성 시 작업을 빠르게 수행할 수 있는 기능을 제공합니다. 아이콘을 선택하면 다음 선택 항목이 나타납니다.
    • 클론: 컨텐츠 기록을 복제합니다.
    • 삭제: 컨텐츠 기록 및 이와 연결된 예약된 컨텐츠 기록을 제거합니다.
    • 컨텐츠 기록 보기: 컨텐츠 기록에 액세스하고 확인합니다.
    주:
    양식 컨텍스트 메뉴 선택 항목이 활성화되기 전에 기본 컨텐츠 기록을 저장해야 합니다.

    프로시저

    1. 다음으로 이동 콘텐츠 게시 > 콘텐츠 라이브러리 > 새로 작성.
    2. 플랫폼 선택 열에서 포털을 선택합니다.
    3. 컨텐츠 형식 선택 섹션에서 스타일 지정 컨텐츠를 선택합니다.
    4. 계속을 선택합니다.
    5. 새 컨텐츠 양식의 필드에 내용을 입력합니다.
      표 1. 설계
      필드 설명
      컨텐츠 이름 생성하거나 편집 중인 컨텐츠를 설명하는 이름입니다.
      주문 포털 및 스타일 컨텐츠가 컨텐츠 목록에 나타나는 순서를 나타내는 숫자입니다.
      활성 컨텐츠가 활성 상태이며 사용할 수 있음을 나타냅니다.
      컨텐츠 스타일 컨텐츠가 다음과 같은지 식별합니다.
      • 배너
      • 블록
      • 비디오
      컨텐츠
      사용자 참조 테이블 블록 컨텐츠의 텍스트를 개인화하는 데 사용할 수 있는 변수를 결정합니다.
      sn_hr_core_profile 테이블에서 변수를 선택하려면 HR 프로파일을 선택하십시오.
      주:
      Human Resources Scoped App: Core(com.sn_hr_core) 플러그인을 활성화하면 HR 프로파일만 표시됩니다.

      Sys_user 테이블에서 변수를 선택하려면 사용자를 선택하십시오.
      헤드라인 컨텐츠에 표시할 제목입니다.
      배너에 그래픽만 표시하려는 경우에는 이 필드가 필요하지 않습니다.
      주:
      이 필드는 컨텐츠 경험 위젯을 사용하는 경우에만 나타납니다.
      헤딩 텍스트 헤드라인에 추가 정보 또는 명확성을 제공하는 텍스트입니다.
      본문 텍스트 배너 위에 표시할 상세 메시지입니다.
      사용자 열 HR 프로파일[sn_hr_core_profile] 테이블과 함께 조건을 평가할 때 사용자를 필터링합니다.

      이 필드는 사용자 참조 테이블 필드에서 HR 프로파일을 선택한 경우에만 표시됩니다.
      텍스트 색상 본문 텍스트를 진한 색이나 연한 색으로 표시할지 여부를 나타냅니다.
      주:
      배너 컨텐츠 스타일의 경우 진한 색과 연한 색이 모두 지원됩니다. 블록 컨텐츠 스타일은 배경 위 텍스트 필드가 활성(녹색)인 경우에만 연한 색이 지원됩니다.
      텍스트 정렬 텍스트를 표시하는 방법을 나타냅니다. 왼쪽, 가운데 또는 오른쪽 맞춤을 선택할 수 있습니다.
      아이콘 아이콘을 표시할지 여부를 결정합니다. 오른쪽으로 밀어 아이콘을 선택합니다.

      컨텐츠 스타일에서 블록을 선택한 경우에만 나타납니다.
      아이콘 선택 표시할 아이콘을 선택합니다.

      이 필드는 아이콘 필드를 녹색으로 변경한 경우에만 나타납니다.
      아이콘 크기 아이콘의 크기를 나타냅니다.

      이 필드는 아이콘 필드를 녹색으로 변경한 경우에만 나타납니다.

      아이콘의 권장 크기는 다음과 같습니다.
      • 주제 아이콘: 56 x 56px
      • 하위 주제 아이콘: 28 x 28px
      동작 호출 단추나 링크를 표시할 것인지 선택합니다.
      버튼 제목 버튼 위에 나타나는 텍스트입니다.

      이 필드는 버튼을 선택한 경우에만 나타납니다.
      버튼 링크 단추를 선택할 때 사용자가 이동하는 링크입니다.

      링크 목록을 보려면 아래쪽 화살표를 선택합니다.

      이 필드는 아이콘 필드를 녹색으로 변경한 경우에만 나타납니다.
      링크 제목 링크에 표시되는 텍스트입니다.

      이 필드는 링크를 선택한 경우에만 나타납니다.
      링크 링크를 선택할 때 사용자가 이동하는 링크입니다.

      링크 목록을 보려면 아래쪽 화살표를 선택합니다.

      이 필드는 링크를 선택한 경우에만 나타납니다.
      비디오 링크 포털에 표시할 비디오에 대한 링크입니다.
      이 필드는 컨텐츠 스타일에서 비디오를 선택한 경우에만 나타납니다.
      주:
      현재는 YouTube 및 Vimeo 비디오만 지원됩니다. 포함된 비디오 링크를 사용해야 합니다.
      배경
      배경색 배너 또는 블록 텍스트의 배경색입니다. 색상을 정의하려면 다음을 사용할 수 있습니다.
      • 16진수 색상 코드
        주:
        16진수 색상 코드 목록은 16진수 색상 코드를 참조하십시오.
      • CSS 색상 값이며 키워드, 이름, RGB 10진수 또는 RGB 16진수 색상을 포함합니다.
        주:
        자세한 내용은 HTML 색 이름(W3CSchools)을 참조하십시오.
      배경 이미지 이미지를 배경으로 나타낼 것임을 나타냅니다. 오른쪽으로 밀어 추가 이미지 필드를 표시합니다.
      이미지 파일 [이미지 업로드] 링크를 선택하여 이미지를 추가합니다.

      이 필드는 배경 이미지를 활성화한 경우에만 나타납니다.

      배너의 권장 크기는 다음과 같습니다.
      • 홈페이지 배너: 1440 x 400px
      • 주제 페이지: 1258 x 300px
      이미지 편집 버튼 컨텐츠 라이브러리 모듈 내에서 배경 이미지를 편집할 수 있습니다.

      이 필드는 배경 이미지를 업로드한 후에만 나타납니다. 이미지 편집기 모드 양식의 이미지 위에 자르기 상자가 나타납니다.

      자르기 상자를 사용해 모서리를 안쪽 또는 바깥쪽으로 드래그하여 이미지에서 표시하고자 하는 부분을 지정할 수 있습니다.

      이미지 편집기를 열면 자르기가 기본 모드로 지정되어 있습니다.

      .svg 파일을 업로드하고 편집하면 .png 파일로 저장됩니다.
      주:
      .gif 파일은 지원되지 않습니다.

      이미지를 편집하는 데 도움이 되는 다음 아이콘과 버튼이 나타납니다.

      이미지 편집 아이콘

      각 아이콘을 사용하여 임포트한 이미지를 편집할 수 있습니다.
      • 원본으로 초기화 원본으로 초기화 아이콘
        • 이미지를 편집한 후 활성화됩니다.
        • 이 아이콘을 선택하면 원본으로 초기화하시겠습니까? 팝업이 나타납니다. 이미지 초기화 버튼을 선택하면 이미지에 대한 편집 내용이 원상복구됩니다.
          주:
          저장을 선택한 후에는 이미지를 더 이상 초기화할 수 없습니다. 편집이 만족스럽지 않은 경우 이미지를 다시 업로드해야 합니다.
        • 편집을 유지하지 않으려면 취소를 선택합니다.
      • 이미지 이동 모드 이미지 이동 모드 아이콘
        • 자르기 상자 바깥쪽의 아무 위치에서나 이미지를 선택한 다음 마우스를 사용하여 이미지를 이동합니다.
        • 포인트를 사용하여 이미지의 크기를 조정합니다.
        • 마우스를 길게 눌러 자르기 상자를 이동합니다.
      • 이미지 자르기 모드 이미지 자르기 모드 아이콘
        • 이 아이콘을 선택하면 커서가 자르기로 설정됩니다.
        • 커서를 누른 상태에서 드래그하여 새 자르기 상자를 만듭니다.
        • 마우스를 길게 눌러 자르기 상자를 이동합니다.
        • 포인트를 사용하여 자르기 상자의 크기를 조정합니다.
      • 확대 확대 아이콘
        • 이 아이콘을 클릭하면 이미지가 더 크고 가깝게 보입니다.
        • 계속 클릭하면 이미지가 점진적으로 확대됩니다.
      • 축소 축소 아이콘
        • 이 아이콘을 클릭하면 이미지가 더 작고 멀게 보입니다.
        • 계속 클릭하면 이미지가 점진적으로 축소됩니다.
      • 왼쪽으로 10픽셀 이동 이동 아이콘
        • 이 아이콘을 클릭하면 이미지가 왼쪽으로 10픽셀 이동합니다.
        • 클릭할 때마다 이미지가 10픽셀 단위로 왼쪽으로 이동합니다.
      • 오른쪽으로 10픽셀 이동 이동 아이콘
        • 이 아이콘을 클릭하면 이미지가 오른쪽으로 10픽셀 이동합니다.
        • 클릭할 때마다 이미지가 10픽셀 단위로 오른쪽으로 이동합니다.
      • 위로 10 픽셀 이동 위로 이동 아이콘
        • 이 아이콘을 클릭하면 이미지가 위로 10픽셀 이동합니다.
        • 클릭할 때마다 이미지가 10픽셀 단위로 위로 이동합니다.
      • 아래로 10 픽셀 이동 아래로 이동 아이콘
        • 이 아이콘을 클릭하면 이미지가 아래로 이동합니다.
        • 클릭할 때마다 이미지가 10픽셀 단위로 아래로 이동합니다.
      • 좌측으로 45도 회전 회전 아이콘
        • 이 아이콘을 클릭하면 이미지가 반시계 방향으로 45도 회전합니다.
        • 클릭할 때마다 이미지가 반시계 방향으로 45도 단위로 회전합니다.
      • 우측으로 45도 회전 회전 아이콘
        • 이 아이콘을 클릭하면 이미지가 시계 방향으로 45도 회전합니다.
        • 클릭할 때마다 이미지가 시계 방향으로 45도 단위로 회전합니다.
      • 자르기-짧은 사각형 자르기-짧은 사각형 아이콘
        • 이 아이콘을 클릭하면 자르기 도구가 짧은 사각형 모양으로 바뀝니다.
        • 사각형의 정사각형 점을 사용하여 이미지를 세밀하게 자릅니다.
      • 자르기-긴 사각형 자르기-긴 사각형 아이콘
        • 이 아이콘을 클릭하면 자르기 도구가 긴 사각형 모양으로 바뀝니다.
        • 사각형의 정사각형 점을 사용하여 이미지를 세밀하게 자릅니다.
      • 자르기-정사각형 자르기-정사각형 아이콘
        • 이 아이콘을 클릭하면 자르기 도구가 정사각형 모양으로 바뀝니다.
        • 정사각형의 정사각형 점을 사용하여 이미지를 세밀하게 자릅니다.
      • 사용자 지정 사용자 지정 자르기 및 회전
        • 이 아이콘을 클릭하면 상세 편집 팝업이 표시됩니다.
        • 자르기 도구의 크기와 이미지 크기를 픽셀 단위로 정의할 수 있습니다.
        • 이미지 회전 각도를 지정할 수도 있습니다.
      • 미리 보기 미리 보기 아이콘
        • 이 아이콘을 선택하면 편집한 이미지의 미리 보기가 표시됩니다.
        • 컨텐츠를 게시할 때와 유사한 위치 정보를 입력합니다. 이렇게 하면 이미지를 표시하고자 하는 위치에서 이미지를 볼 수 있습니다. 필드에 대한 자세한 내용은 컨텐츠에 대한 게시 계획 생성 문서를 참조하십시오.
      • 취소 및 저장 취소 및 저장 버튼
        • 취소를 선택하면 이미지 편집이 종료되고 변경 내용이 저장되지 않습니다.
        • 저장을 선택하면 이미지에 대한 편집 내용이 저장됩니다. 자르기 및 계속을 선택하여 편집을 계속할 수 있습니다.
          주:
          저장 및 계속을 선택하면 편집 내용이 저장되고 편집 내용을 원상복구할 수 없습니다.
      이미지 크기 이미지를 표시하는 방법입니다.
      • 채움 너비: 이미지를 가장자리에서 확장하거나 축소해야 하는 경우에도 전체 컨테이너를 포함하도록 이미지 크기를 조정합니다.
      • 맞춤 너비: 이미지가 완전히 보이도록 크기를 조정합니다.
      • 원래 크기: 이미지의 원래 크기를 사용합니다.

      이 필드는 배경 이미지를 활성화한 경우에만 나타납니다.
      이미지 위치 이미지를 표시할 위치입니다. 상자를 선택하여 이미지 위치를 정의합니다.

      이 필드는 배경 이미지를 활성화한 경우에만 나타납니다.
      배경 위 텍스트 텍스트를 배경 이미지 위에 나타낼 것임을 나타냅니다. 선택하지 않는 경우 텍스트가 이미지 아래에 나타납니다.

      오른쪽으로 밀어 배경의 그라데이션을 선택합니다.
      그라데이션 추가 텍스트를 색 그라데이션에 포함시켜 읽기 쉽게 만들 것임을 나타냅니다.

      배경 위 텍스트 필드를 활성화한 경우에만 나타납니다.
    6. 저장을 선택하여 기록을 저장하고 디자인 탭에 남아 있습니다.
    7. 또는 저장 후 계속 을 선택하여 기록을 저장하고 게시 탭으로 이동합니다.

    다음에 수행할 작업

    • 새 컨텐츠 양식에서 컨텐츠를 미리 봅니다.
      주:
      컨텐츠 미리 보기는 컨텐츠가 어떻게 보이는지 알려주도록 설계되었습니다. 컨텐츠가 게시되면 장치 해상도, 테마 차이 또는 모바일 앱 스타일 구성의 변화로 인해 다르게 보일 수 있습니다.
    • (선택 사항) 콘텐츠를 번역합니다.

      다른 언어를 선택하여 세션을 보거나 생성 중인 컨텐츠의 언어 번역을 요청합니다. 자세한 내용은 콘텐츠 경험 및 콘텐츠 게시의 언어 지원 문서를 참조하십시오.

      언어 설정 드롭다운 메뉴를 사용하여 세션을 볼 다른 언어를 선택하거나 생성 중인 컨텐츠의 언어 번역을 요청합니다.
      • 언어 전환: 이를 통해 시스템 설정 언어를 다른 언어로 전환할 수 있습니다. 이는 로그인 시 언어를 변경하는 것과 유사합니다. 자세한 내용은 콘텐츠 게시에 대한 언어 변경 문서를 참조하십시오.
      • 컨텐츠 번역: sn_cd.enable_localization_framework_integration 시스템 속성을 활성화하면 컨텐츠 라이브러리에서 생성된 컨텐츠에 언어 설정 드롭다운에서 선택한 번역 컨텐츠가 표시됩니다. 이렇게 하면 선택한 언어로 컨텐츠에 대한 번역을 요청할 수 있습니다. 자세한 내용은 현지화 프레임워크 앱과의 통합 문서를 참조하십시오.
        주:
        컨텐츠 수정을 완료한 후에만 컨텐츠를 번역합니다. 최상의 결과를 얻으려면 구성 요소를 추가 또는 제거하거나 번역 후 서식을 변경하지 않는 것이 좋습니다.

        언어마다 서식이 다른 서식 있는 컨텐츠를 만들려면 컨텐츠를 복제하고 필요에 따라 서식을 수정합니다. 그런 다음 대상을 사용하여 언어별로 사용자에게 컨텐츠를 타깃팅합니다. 대상 그룹 참조

    • 컨텐츠가 제공되는 위치, 대상 및 컨텐츠를 사용할 수 있는 컨텐츠에 대한 게시 계획 생성기간을 제어하도록 게시 계획을 구성합니다.