블록 활용하기

1~4단 레이아웃 구성에서 사용할 수 있는 블록은 아래와 같습니다.

• 1~4단 레이아웃 모두에서 사용 가능한 블록 : 텍스트, 버튼, 드롭다운, 이미지, 구분선, 여백

• 2단 레이아웃까지만 사용 가능한 블록 : 동영상, 아코디언

• 1단 레이아웃에서만 사용 가능한 블록 : 채용 공고, 배너, 슬라이드, 전광판, 단계, 지도

텍스트 블록 사용 시에는 아래 설정이 가능합니다.

• 텍스트 스타일 : 제목 1, 2, 3 / 본문 1, 2

• 글꼴 : 프리텐다드, 본고딕, 지마켓 산스, 배민 한나체 Pro, 나눔스퀘어 네오, 나눔명조

• 폰트 사이즈 : 14 / 15 / 18 / 20 / 24 / 34 / 38 / 48 / 56

• 정렬 : 왼쪽, 가운데, 오른쪽

• 텍스트 링크 설정

• 굵게, 기울임꼴, 밑줄, 취소선, 글자색, 배경색

• 글머리 기호 설정

설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.

• 배경 : 배경 유무 선택

• 여백 : 배경의 여백 크기 설정 (내부 상하/좌우 여백 사이즈 설정 가능)

• 모서리 : 모서리 곡률 설정

• 배경 색상

버튼 블록은 항목 명을 나타낼 때, 혹은 링크를 연결하여 특정 페이지나 URL로 이동시킬 때 활용합니다. 버튼 설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.

• 버튼 배경 색상 설정

• 버튼 모양 설정 : 사각형, 라운드형

• 버튼 크기 : 크게, 보통, 작게

• 링크 설정 : 페이지, URL, 섹션 / 새 창으로 열기 여부 설정

• 글자 색상

• 레이아웃 내 버튼 위치 : 왼쪽, 가운데, 오른쪽, 채우기

• 버튼에 텍스트 양이 많으면 … 표시로 생략되어 나타날 수 있습니다.

드롭다운 블록은 드롭다운으로 펼쳐지는 버튼을 구성하고, 해당 버튼(선택 옵션)에 링크를 설정할 수 있는 블록입니다.

드롭다운 버튼을 추가한 후 펜 모양의 "설정" 버튼을 클릭하면, 위와 같은 설정 모달이 나타납니다. 이 모달에서 드롭다운 버튼의 음영색, 테두리색, 모양(사각형, 라운드형), 크기, 글자색, 위치 등을 설정할 수 있으며, "하위 메뉴 추가" 버튼을 클릭하여 드롭다운의 옵션을 추가할 수 있습니다.

하위 메뉴 설정 모달에서 "드롭다운 설정 - 드롭다운 이름을 연결된 페이지 이름으로 표시" 옵션을 켜면, 해당 드롭다운 버튼을 추가한 페이지의 이름이 드롭다운을 열기 전의 버튼 이름으로 표시됩니다. 단, 하위 메뉴로 설정한 페이지에 해당 페이지(현재 편집 중인 페이지)가 설정되어야 합니다.

"드롭다운 설정 - 드롭다운 이름을 연결된 페이지 이름으로 표시" 옵션을 끄면, 드롭다운 블록에 설정한 이름이 드롭다운을 열기 전의 버튼 이름으로 표시됩니다. (위 예에서는 "개인정보처리방침") 그리고, 이 드롭다운 버튼을 클릭하여 열면 하위 메뉴에 설정한 값들이 선택 가능한 옵션으로 표시됩니다.

이미지 블록에 첨부할 이미지는 3:2 비율을 권장하며 jpeg, png, gif 유형의 이미지(10MB 이하) 업로드를 권장합니다. 이미지 설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.

• 이미지 정렬 : 왼쪽, 가운데, 오른쪽

• 크기 : 기본값 100%

• 모서리 : 4개 모서리 동시에 곡률 설정 혹은 각 모서리 개별 곡률 설정 가능

• 마스킹 : 라운드형, 사각형(비율에 따라 1:1, 3:2, 2:1 3종)

a. 이미지 블록 마우스 오버 기능 안내

이미지 블록을 선택하여 마우스 오버 액션 추가를 클릭합니다. (위 이미지처럼 기본 이미지는 이미 추가되어 있는 상태를 가정하여 설명합니다)

1. 마우스 오버버튼을 클릭합니다. 마우스 오버 시 노출될 이미지를 설정할 수 있게 됩니다.

2. 이미지 수정을 클릭하여 마우스 오버 시 노출될 이미지를 추가합니다.

3. 마우스 오버 설정 버튼을 클릭하여 이미지 확대 정도와 그림자 효과를 설정합니다.

4. 우측 상단에 위치하고 있는 미리보기 버튼을 클릭하여 마우스 오버 효과가 잘 적용되었는지 확인합니다.

b. 나인하이어 팀처럼 마우스 오버 효과 구성하기

기본 이미지가 블러처리되면서 텍스트가 덮히는 마우스 오버 효과를 만드는 방법을 소개합니다. 이 방법은 디자인 툴 사용이 필요합니다. 대부분의 디자인 툴에서 가능한 방법이니 차근차근 따라와 주세요.

1. 먼저, 기본 이미지와 마우스 오버용 이미지를 준비합니다.

   1. 배경이 될 기본 이미지를 준비합니다. (이 이미지는 가공 없이 추출합니다)

   2. 이미지를 복사하여 두 개로 만듭니다.

   3. 복사된 이미지에 블러를 적용합니다.

      1. 포토샵 기준 : 필터 → 흐림효과 → 가우시안 흐림 효과

      2. 피그마 기준 : Effects → Layer blur

   4. 블러를 적용한 이미지 위에 텍스트를 올립니다.

2. 텍스트가 올려진 이미지를 추출합니다. 기본 이미지와 마우스 오버용 이미지가 준비되었습니다.

3. 두 이미지를 업로드합니다.

   a. 이미지 블록 생성 후 기본 이미지를 먼저 업로드합니다.

   b. 이미지 블록 선택 후 마우스 오버 추가 버튼을 클릭합니다.

   c. 이어서 마우스 오버 클릭, 이미지 수정 클릭 후 마우스 오버용 이미지를 업로드합니다.

4. 미리보기를 클릭하여 효과를 확인합니다.

세로로 나열된 디자인 요소들을 시각적으로 나눠주는 구분선 블록입니다. 설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.

• 선 두께 : 얇은 선, 보통 선, 굵은 선

• 선 색상

• 높이 : 낮게, 보통, 높게, 커스텀 (구분선이 차지하는 세로 영역의 높이)

세로로 나열된 디자인 요소들 사이에 여백을 추가합니다.

설정을 클릭하여 여백이 차지하는 세로 영역의 높이를 설정할 수 있습니다. 여백 높이는 낮게 / 보통 / 높게 중 하나를 선택하거나 커스텀 사이즈로 설정할 수 있습니다.

동영상은 16:9 비율을 권장합니다.

설정을 클릭하여 링크 주소를 입력하는 방식으로 동영상을 첨부합니다. 설정을 통해 동영상을 레이아웃에 맞추거나 여백을 채우는 방식으로 구성할 수 있습니다.

토글 방식으로 주제와 세부 내용을 공유하는 아코디언 블록입니다. 주로 ‘자주 묻는 질문(FAQ)’을 구성할 때 사용합니다.

설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.

• 콘텐츠 설정 : 콘텐츠 순서 변경, 콘텐츠 추가/삭제

• 검색 기능 사용 : ON/OFF 가능 (해당 블록 내에서 텍스트 검색 여부)

채용 공고 블록은 나인하이어 ATS 채용 관리 탭에서 생성하여 모집 시작 상태로 설정한 공고 리스트가 표시되는 블록입니다.

설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.

• 공고 레이아웃 설정

  • 기본형 / 사이드 필터형 중 선택

• 공고 상단 고정 설정

  • 상단에 고정할 공고를 선택, 관리하는 메뉴로 이동

• 필터 구성

  • 필터로 제공할 항목 선택 (직군, 소속, 고용 형태, 관리 태그)

  • 노출할 고용 형태, 경력 사항 설정

  • 관리 태그 기본 상태 설정

• 기본 정렬 설정 : 최신순, 오래된 순, 마감일 가까운 순, 채용명 오름차순(ㄱ~ㅎ), 채용명 내림차순(ㅎ~ㄱ) 중 선택

• 한 페이지 최대 목록 수 : 10개, 15개, 20개, 25개, 50개, 100개 중 선택

a. 공고 레이아웃 설정 예시

(i) 기본형

필터 및 태그 버튼이 공고 리스트 위쪽에 가로로 펼쳐지는 레이아웃입니다.

(ii) 사이드 필터형

필터 및 태그 버튼이 공고 리스트 왼쪽에 세로 방향으로 펼쳐지는 레이아웃입니다.

b. 공고 블록 상단 고정

공고 목록 중 상단에 고정 노출하고 싶은 공고를 최대 10개까지 선택할 수 있습니다.

• [공고 블록 설정 > 상단 고정 공고 관리] 에서 현재 상단 고정된 공고 개수를 확인할 수 있습니다.

• [상단 고정 공고 관리 > 설정]을 클릭하여 상단에 고정할 공고를 선택하고 관리하는 화면으로 이동할 수 있습니다.

공고 블록에 설정된 필터 값에 의해 필터링 된 공고 목록이 왼쪽에 표시됩니다. 비공개 공고, 상시 노출 기능이 비활성화 된 마감/모집 중단/보관 상태의 공고, 삭제된 공고는 공고 목록에 노출되지 않습니다.

① 상단 고정하기: 왼쪽 공고 목록의 비어 있는 핀 아이콘을 클릭해 해당 공고를 상단 고정 공고로 선택할 수 있습니다.

② 상단 해제하기: 왼쪽 공고 목록의 고정된 핀 아이콘을 클릭해 해당 공고를 상단 고정 공고에서 해제할 수 있습니다.

③ 상단 고정된 공고: 상단 고정으로 선택된 공고가 화면 오른쪽에 표시됩니다.

④ 전체 고정 해제하기: [전체 고정 해제] 버튼을 클릭 시 상단 고정으로 선택된 공고 전체를 해제할 수 있습니다.

⑤ 상단 고정 공고: 정상적으로 상단 고정된 공고가 표시됩니다. 공고 제목 왼쪽의 아이콘(⁝⁝)을 클릭 후 위아래로 이동 시 고정된 공고가 표시되는 순서를 지정할 수 있습니다. 공고 제목 오른쪽의 X 버튼을 클릭 시 상단 고정을 해제할 수 있습니다.

⑥ 고정이 불가한 공고: 고정되었던 공고가 비공개 설정되거나 상시 노출 기능이 비활성화 된 마감/모집 중단/보관 공고로 상태가 변경되거나 삭제된 경우 붉은 색 배경으로 표시됩니다. 이 경우 고정을 해제해 주세요.

채용 홈페이지의 공고 목록에서 상단 고정으로 설정한 공고가 가장 상위에 순서대로 표시됩니다.

배너 이미지를 추가합니다. 권장 사이즈는 1920px * 560px이며 jpeg, png, gif 파일 유형(10MB 이하)을 권장합니다.

배너 이미지는 최대 5장까지 추가할 수 있습니다. “콘텐츠 추가” 버튼을 클릭하면 배너 이미지 항목이 하나 더 추가됩니다. 추가된 이미지 항목 부분을 클릭하면 파일 첨부 창이 열립니다.

배너 이미지가 여러 장인 경우, 콘텐츠 자동 전환 버튼을 켜면 슬라이드 혹은 페이드 방식으로 자동 전환되도록 할 수 있습니다. 자동 전환 버튼을 끄면, 사용자가 배너 이미지 하단에 표시되는 버튼을 클릭하여 이미지를 이동시키도록 유도합니다.

배너 설정 모달에서 각 콘텐츠의 노출 순서를 변경할 수도 있습니다.

각 콘텐츠 버튼을 클릭하면 오버레이나 텍스트 추가 설정이 가능합니다.

• 오버레이 : 배너 이미지 위로 덮이는 오버레이 색상 및 투명도 설정

• 텍스트 추가 : 배너 이미지 위에 텍스트 작성

a. 배너 블록 내 텍스트 모바일 최적화

배너 텍스트가 모바일 환경에서 지나치게 큰 상태로 표시되지 않도록 배너 텍스트에 한하여 모바일 환경에서 폰트 사이즈가 자동으로 조정됩니다.

b. 배너 블록 이미지 사용 유의사항

• 배너 블록 사용 유의 사항 내용을 참고해 주세요.

여러 이미지를 가로 방향의 슬라이드 형식으로 보여주고 싶을 때 사용하는 블록입니다. 이미지와 이미지 아래 텍스트(설명글)이 기본 구성입니다. 설정을 클릭하여 설명글 사용 여부를 설정할 수 있으며 슬라이드 이미지의 순서를 변경하거나 슬라이드를 추가할 수 있습니다. (최대 10개 슬라이드)

콘텐츠가 왼쪽 혹은 오른쪽으로 자동으로 움직이는 배너인 전광판 블록입니다. 블록 안에 최대 10개의 콘텐츠를 추가할 수 있으며, 이미지 혹은 텍스트 타입 중 선택하여 구성합니다.

설정된 전광판 블록은 배포 혹은 미리보기에서 자동으로 움직이며, 마우스 오버 시 애니메이션이 멈춥니다. 전광판 블록에 링크를 설정할 수 있습니다. (개별 이미지나 텍스트가 아닌 전광판 전체에 링크 설정)

채용 절차 등을 시각적으로 표현할 때 사용할 수 있는 단계 블록입니다. 각 단계의 제목과 설명글이 기본 구성입니다.

설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.

• 단계 추가 : 단계를 추가하거나 삭제할 수 있습니다. (삭제 시 가장 오른쪽 단계부터 삭제, 삭제 시 작성된 텍스트 데이터는 사라짐)

• 설명글 사용 : ON/OFF 가능

• 디자인 : 라운드형, 사각형

• 배경 색상

• 글자 색상

• 화살표 색상

근무 장소를 안내하기 위해 사용할 수 있는 지도 블록입니다. 설정을 클릭하여 장소를 추가/수정/제거하거나 마커 색상을 변경할 수 있습니다.

장소 추가 시 [주소 검색] 후에는 검색된 장소의 장소 명을 입력해야 합니다. 또한 세부 주소는 수정할 수 있습니다.

단, 마커 위치는 주소 검색 시에 고정되며 변경이 불가능합니다.