스타일 콘텐츠가 있는 사용자 지정 미디어 만들기

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 8분

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

    시작하기 전에

    필요한 역할: sn_cd.content_manager

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

    이 태스크 정보

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

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

    양식 왼쪽 상단에 있는 양식 컨텍스트 메뉴(양식 컨텍스트 메뉴)를 이용하면 콘텐츠를 생성할 때 작업을 빠르게 수행할 수 있습니다. 아이콘을 선택하면 다음 선택 사항이 나타납니다.
    • 클론: 컨텐츠 기록을 복제합니다.
    • 삭제: 컨텐츠 기록 및 관련 예약된 컨텐츠 기록을 제거합니다.
    • 컨텐츠 기록 보기: 컨텐츠 기록에 액세스하고 봅니다.
    주:
    양식 컨텍스트 메뉴 선택을 활성화하기 전에 기본 컨텐츠 기록을 저장해야 합니다.

    프로시저

    1. 다음으로 이동 콘텐츠 게시 > 콘텐츠 라이브러리 > 새로 작성.
    2. 플랫폼 선택 열 아래에서 포털을 선택합니다.
    3. 컨텐츠 형식 선택 섹션에서 스타일 컨텐츠를 선택합니다.
    4. 계속을 선택합니다.
    5. 새 컨텐츠 양식의 필드에 내용을 입력합니다.
      표 1. 디자인
      필드 설명
      컨텐츠 이름 생성하거나 편집 중인 컨텐츠를 설명하는 이름입니다.
      순서 포털과 스타일 컨텐츠가 컨텐츠 목록에 표시되는 순서를 나타내는 번호입니다.
      활성 콘텐츠가 활성 상태이며 사용할 수 있음을 나타냅니다.
      컨텐츠 스타일 컨텐츠가 다음과 같은지 식별합니다.
      • 배너
      • 블록
      • 비디오
      내용
      사용자 참조 테이블 블록 컨텐츠의 텍스트를 개인화하는 데 사용할 수 있는 변수를 결정합니다.
      HR 프로파일을 선택하여 sn_hr_core_profile 테이블에서 변수를 선택합니다.
      주:
      인사 관리 범위 지정 앱: 코어(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 파일은 지원되지 않습니다.

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

      이미지 아이콘 편집

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

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

      이 필드는 배경 이미지를 활성화할 때만 나타납니다.
      배경 위 텍스트 텍스트를 배경 이미지 위에 표시할 것임을 나타냅니다. 선택하지 않은 상태로 두면 텍스트가 이미지 아래에 나타납니다.

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

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

    다음에 수행할 작업

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

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

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

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

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