블록 사용
1~4단 레이아웃 구성에서 사용할 수 있는 블록은 아래와 같습니다.
- 1~4단 레이아웃 모두에서 사용 가능한 블록 : 텍스트, 버튼, 이미지, 구분선, 여백
- 2단 레이아웃까 지만 사용 가능한 블록 : 동영상, 아코디언
- 1단 레이아웃에서만 사용 가능한 블록 : 채용 공고, 배너, 슬라이드, 전광판, 단계, 지도
텍스트
버튼
이미지
구분선
여백

텍스트 블록 사용 시에는 아래 설정이 가능합니다.
- 텍스트 스타일 : 제목 1, 2, 3 / 본문 1, 2
- 글꼴 : 프리텐다드, 본고딕, 지마켓 산스, 배민 한나체 Pro, 나눔스퀘어 네오, 나눔명조
- 폰트 사이즈 : 14 / 15 / 18 / 20 / 24 / 34 / 38 / 48 / 56
- 정렬 : 왼쪽, 가운데, 오른쪽
- 텍스트 링크 설정
- 굵게, 기울임꼴, 밑줄, 취소선, 글자색, 배경색
- 글머리 기호 설정

설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.
- 배경 : 배경 유무 선택
- 여백 : 배경의 여백 크기 설정 (내부 상하/좌우 여백 사이즈 설정 가능)
- 모서리 : 모서리 곡률 설정
- 배경 색상
- 텍스트 스타일 설정 후 폰트 사이즈 변경 방식으로 사용하는 것을 추천합니다. 폰트 사이즈 변경 후 텍스트 스타일을 바꾸면 텍스트 스타일의 기본 사이즈가 적용됩니다.
- 제목 스타일은 굵게(Bold)로만 설정됩니다.
- 텍스트 스타일은 SEO 설정에 영향을 줍니다.
- 폰트 사이즈는 모바일 환경에서 일정한 규칙에 따라 사이즈가 변경되거나 유지됩니다.
데스크탑 환경 | 모바일 환경 |
---|---|
56 | 38(변환) |
48 | 34(변환) |
38 | 30(변환) |
34 | 26(변환) |
28 | 24(변환) |
24 | 22(변환) |
20 | 20(유지) |
18 | 18(유지) |
15 | 15(유지) |
14 | 14(유지) |

버튼 블록은 항목 명을 나타낼 때, 혹은 링크를 연결하여 특정 페이지나 URL로 이동시킬 때 활용합니다. 버튼 설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.
- 버튼 배경 색상 설정
- 버튼 모양 설정 : 사각형, 라운드형
- 버튼 크기 : 크게, 보통, 작게
- 링크 설정 : 페이지, URL, 섹션 / 새 창으로 열기 여부 설정
- 글자 색상
- 레이아웃 내 버튼 위치 : 왼쪽, 가운데, 오른쪽, 채우기
- 버튼에 텍스트 양이 많으면 … 표시로 생략되어 나타날 수 있습니다.

이미지 블록에 첨부할 이미지는 3:2 비율을 권장하며 jpeg, png, gif 유형의 이미지 업로드를 권장합니다. 이미지 설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.
- 이미지 정렬 : 왼쪽, 가운데, 오른쪽
- 크기 : 기본값 100%
- 모서리 : 4개 모서리 동시에 곡률 설정 혹은 각 모서리 개별 곡률 설정 가능
- 마스킹 : 라운드형, 사각형(비율에 따라 1:1, 3:2, 2:1 3종)

- 이미지 삽입 시에는 추천 비율을 제공하지만, 커스텀 비율로도 업로드할 수 있습니다. (이미지 자르기 기능)
- 이미지 크기 설정의 퍼센트는 레이아웃 크기에 대비한 비율입니다. [ 이미지 크기 : 레이아웃 크기]의 비율은 모바일 환경에서도 그대로 반영됩니다.
- 이미지에 링크를 삽입할 수 있습니다.
모바일 환경에서는 마우스 오버 기능이 실행되지 않습니다.

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

- 1.
마우스 오버
버튼을 클릭합니다. 마우스 오버 시 노출될 이미지를 설정할 수 있게 됩니다. - 2.
이미지 수정
을 클릭하여 마우스 오버 시 노출될 이미지를 추가합니다. - 3.
마우스 오버 설정
버튼을 클릭하여 이미지 확대 정도와 그림자 효과를 설정합니다. - 4.우측 상단에 위치하고 있는
미리보기
버튼을 클릭하여 마우스 오버 효과가 잘 적용되었는지 확인합니다.

기본 이미지가 블러처리되면서 텍스트가 덮히는 마우스 오버 효과를 만드는 방법을 소개합니다. 이 방법은 디자인 툴 사용이 필요합 니다. 대부분의 디자인 툴에서 가능한 방법이니 차근차근 따라와 주세요.
- 1.먼저, 기본 이미지와 마우스 오버용 이미지를 준비합니다.a. 배경이 될 기본 이미지를 준비합니다. (이 이미지는 가공 없이 추출합니다) b. 이미지를 복사하여 두 개로 만듭니다. c. 복사된 이미지에 블러를 적용합니다. - 포토샵 기준 : 필터 → 흐림효과 → 가우시안 흐림 효과 - 피그마 기준 : Effects → Layer blur d. 블러를 적용한 이미지 위에 텍스트를 올립니다.

- 2.텍스트가 올려진 이미지를 추출합니다. 기본 이미지와 마우스 오버용 이미지가 준비되었습니다.
- 3.두 이미지를 업로드합니다.a. 이미지 블록 생성 후 기본 이미지를 먼저 업로드합니다.b. 이미지 블록 선택 후
마우스 오버 추가
버튼을 클릭합니다.c. 이어서마우스 오버
클릭,이미지 수정
클릭 후 마우스 오버용 이미지를 업로드합니다. - 4.미리보기를 클릭하여 효과를 확인합니다.

세로로 나열된 디자인 요소들을 시각적으로 나눠주는 구분선 블록입니다. 설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.
- 선 두께 : 얇은 선, 보통 선, 굵은 선
- 선 색상
- 높이 : 낮게, 보통, 높게, 커스텀 (구분선이 차지하는 세로 영역의 높이)

세로로 나열된 디자인 요소들 사이에 여백을 추가합니다.
설정을 클릭하여 여백이 차지하는 세로 영역의 높이를 설정할 수 있습니다.
여백 높이는 낮게 / 보통 / 높게 중 하나를 선택하거나 커스텀 사이즈로 설정할 수 있습니다.
동영상
아코디언

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

토글 방식으로 주제와 세부 내용을 공유하는 아코디언 블록입니다.
주로 ‘자주 묻는 질문(FAQ)’을 구성할 때 사용합니다.
설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.
- 콘텐츠 설정 : 콘텐츠 순서 변경, 콘텐츠 추가/삭제
- 검색 기능 사용 : ON/OFF 가능 (해당 블록 내에서 텍스트 검색 여부)
채용 공고
배너
슬라이드
전광판
단계
지도

나인하이어에서 생성한 채용 목록을 불러옵니다.
설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.
- 필터 구성
- 필터로 제공할 항목 선택 (직군, 소속, 고용 형태, 관리 태그)
- 노출할 고용 형태, 경력 사항 설정
- 관리 태그 기본 상태 설정
- 기본 정렬 설정 : 최신순, 오래된 순, 마감일 가까운 순, 채용명 오름차순(ㄱ~ㅎ), 채용명 내림차순(ㅎ~ㄱ) 중 선택
- 한 페이지 최대 목록 수 : 10개, 15개, 20개, 25개, 50개, 100개 중 선택

배너 이미지를 추가합니다. 권장 사이즈는 1920px * 560px이며 jpeg, png, gif 파일 유형을 권장합니다.
설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.
- 오버레이 : 배너 이미지 위로 덮이는 오버레이 색상 및 투명도 설정
- 텍스트 추가 : 배너 이미지 위에 텍스트 작성 배너 블록에서 텍스트의 폰트 사이즈는 모바일 환경에서 자동 조정됩니다.
- 배너 블록을 사용하실 때 유의점과 추천 사용 방법을 꼭 확인해 주세요.
배너 텍스트가 모바일 환경에서 지나치게 큰 상태로 표시되지 않도록 배너 텍스트에 한하여 모바일 환경에서 폰트 사이즈가 자동으로 조정됩니다.
데스크톱 환경 | 모바일 환경 |
---|---|
56 | 38 |
48 | 34 |
38 | 30 |
34 | 26 |
28 | 24 |
24 | 22 |
20 | 20(유지) |
18 | 18(유지) |
15 | 15(유지) |
14 | 14(유지) |

여러 이미지를 가로 방향의 슬라이드 형식으로 보여주고 싶을 때 사용하는 블록입니다.
이미지와 이미지 아래 텍스트(설명글)이 기본 구성입니다. 설정을 클릭하여 설명글 사용 여부를 설정할 수 있으며 슬라이드 이미지의 순서를 변경하거나 슬라이드를 추가할 수 있습니다. (최대 10개 슬라이드)
슬라이드 블록에 추가하는 이미지에는 링크를 삽입할 수 있습니다.
(영상)
콘텐츠가 왼쪽 혹은 오른쪽으로 자동으로 움직이는 배너인 전광판 블록입니다.
블록 안에 최대 10개의 콘텐츠를 추가할 수 있으며, 이미지 혹은 텍스트 타입 중 선택하여 구성합니다.
설정된 전광판 블록은 배포 혹은 미리보기에서 자동으로 움직이며, 마우스 오버 시 애니메이션이 멈춥니다. 전광판 블록에 링크를 설정할 수 있습니다. (개별 이미지나 텍스트가 아닌 전광판 전체에 링크 설정)

채용 절차 등을 시각적으로 표현할 때 사용할 수 있는 단계 블록입니다.
각 단계의 제목과 설명글이 기본 구성입니다.
설정을 클릭하여 아래와 같은 설정을 할 수 있습니다.
- 단계 추가 : 단계를 추가하거나 삭제할 수 있습니다. (삭제 시 가장 오른쪽 단계부터 삭제, 삭제 시 작성된 텍스트 데이터는 사라짐)
- 설명글 사용 : ON/OFF 가능
- 디자인 : 라운드형, 사각형
- 배경 색상
- 글자 색상
- 화살표 색상

근무 장소를 안내하기 위해 사용할 수 있는 지도 블록입니다.
설정을 클릭하여 장소를 추가/수정/제거하거나 마커 색상을 변경할 수 있습니다.
장소 추가 시 [주소 검색] 후에는 검색된 장소의 장소 명을 입력해야 합니다.
또한 세부 주소는 수정할 수 있습니다.

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