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

  • 릴리스 버전: Yokohama
  • 업데이트 날짜 2025년 01월 30일
  • 읽기8분

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

    시작하기 전에

    필요한 역할: sn_cd.content_manager

    비디오 콘텐츠를 만드는 경우 먼저 비디오를 업로드해야 합니다. 다른 컨텐츠 소스에 연결되는 링크 추가 또는 수정

    이 태스크 정보

    이 컨텐츠 유형은 다음 세 가지 옵션을 제공합니다.
    • 배너: 페이지 상단에 표시됩니다. 헤더, 제목, 본문 텍스트 및 버튼 내용을 포함하는 배너
    • 블록: 페이지의 위젯에 나타납니다. 제목, 본문 및 버튼이 포함된 콘텐츠 차단
    • 비디오: 배너 대신 상단을 포함하여 페이지의 어느 곳에나 표시할 수 있습니다.

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

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

    프로시저

    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. 또는 저장 및 계속 을 선택하여 기록을 저장하고 게시 탭으로 이동합니다.

    다음에 수행할 작업

    • (선택 사항) 콘텐츠를 번역합니다.

      컨텐츠의 언어 번역을 요청합니다. 자세한 내용은 콘텐츠 라이브러리의 다국어 지원 문서를 참조하십시오.

      주:
      콘텐츠 수정을 완료한 후에만 콘텐츠를 번역합니다. 최상의 결과를 얻으려면 번역 후 구성요소를 추가 또는 제거하거나 서식을 변경하지 않는 것이 좋습니다.

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

    • 게시 탭에서 컨텐츠를 미리 봅니다.
      주:
      콘텐츠 미리 보기는 콘텐츠의 모양에 대한 일반적인 아이디어를 제공하도록 설계되었습니다. 컨텐츠는 장치 해상도, 테마 차이 또는 모바일 앱 스타일 구성의 변화로 인해 게시 후 다르게 보일 수 있습니다.
    • 게시 계획을 구성하여 컨텐츠가 전달되는 위치, 대상 및 컨텐츠를 사용할 수 컨텐츠에 대한 게시 계획 생성있는 기간을 제어합니다.