빌더 구조 및 디자인

📌[채용 사이트 빌더] → [디자인 생성]

---

사이트 빌더에는 트렌디한 사이트 UI를 반영한 다양한 위젯이 준비되어 있습니다.

개발, 디자인을 잘 하지 못해도 화면 내의 위젯들을 조작하여 누구나 멋진 디자인의 홈페이지를 만들 수 있습니다.

1. 빌더 이해하기

1-1. 빌더 화면 살펴보기

[상단 탭]

번호	항목	내용
➊	미리보기	PC/ 모바일/ 태블릿 디바이스별 미리보기를 지원합니다.
➋	페이지탭	편집할 페이지로 이동할 수 있습니다.
➌	영역선택	활성화 시 화면 내 편집 영역을 선택하여 빠른 편집이 가능합니다.
➍	히스토리	실행취소(Ctrl+z), 다시 실행(Ctrl+Shift+z)
➎	더보기	새창에서 사이트 열기, 단축키 보기
➏	저장하기	현재까지 작업된 내용을 저장합니다. (저장된 내용은 1분 뒤 사이트에 반영됩니다.)

[편집 위젯]

번호	항목	내용
➐	도구 메뉴	빌더/ 페이지/ 테마설정 3가지의 모드를 전환할 수 있습니다.
➑	구성 편집	페이지의 구성 요소들이 목록으로 노출됩니다. 구성 요소의 추가, 삭제가 가능하며 요소 간 순서 변경이 가능합니다.
➒	세부 편집	페이지 내에서 선택한 요소의 세부사항을 편집할 수 있는 영역입니다.
➓	화면 미리보기	현재 작업 중인 화면을 실시간으로 미리 볼 수 있습니다.

1-2. 위젯 살펴보기

홈페이지 빌더는 테마 → 페이지 → 빌더 3가지 모드로 구성되어 있습니다.

• 테마 - 사이트의 전체적인 컬러, 폰트 등 기본값 설정

• 페이지 - 홈페이지를 구성할 각 페이지와 URL을 설정

• 빌더 - 각 페이지 콘텐츠 세부 디자인

• 각 편집 영역의 세부 기능은 아래와 같습니다.

모드	구성요소
테마	[테마 설정] 메인 색상/ 모서리 둥글기/ 테마 폰트/ PC,M 기준 폭/ 테마 미리보기
페이지	[페이지 추가] 빈 페이지 추가/ 페이지 복제 [페이지 설정] 페이지 이름/ 페이지URL/ 검색엔진 노출허용/ 페이지 제목/ 페이지 간략소개/ 홈 리다이렉션 URL/ 페이지 배경 이미지
빌더	[헤더] 상단 롤링 배너/ 헤더 [페이지 콘텐츠] 동영상 배너/ 단일 이미지 배너/ 다중 이미지 배너/ 이미지와 텍스트/ 동영상과 텍스트/ 카드 뷰 리스트/ 자주묻는 질문/ 단일 이미지/ 구분선 / 지도 / 카드 뷰 공고 리스트 (하위항목: 텍스트, 버튼, 링크, 채용공고 수, 카운트다운 타이머) [푸터] 푸터(내용, SNS링크, 기타링크)/ 패밀리 사이트 [팝업] 이미지/ 텍스트/ 링크/ 구분선

2. 홈페이지 만들기

2-1. 테마

테마 색상 설정 시, 사이트 내 기본 요소들에 일괄적으로 자동 적용되어 일일이 세부 사항들을 수정하는 시간을 절약할 수 있습니다.

• 메인 색상을 1개를 선택하면, 어울리는 색상 팔레트(5색)가 자동생성됩니다.

• 설정하신 '메인 색상'과 '모서리 둥글기'는 홈페이지 내 버튼, 입력필드 등에 적용됩니다.

2-2. 페이지

채용사이트를 구성하는 페이지를 생성·관리하는 모드입니다. 페이지의 이름과 URL, 배경 등을 관리할 수 있습니다.

(홈/ 로그인/ 채용공고 페이지는 기본 항목으로 삭제가 불가능합니다.)

항목	내용
페이지 이름	빌더 내 '페이지 목록'에서 표시되는 값입니다.
페이지 URL	영문, 숫자, '-'만 입력 가능하며, 최대 20자까지 입력 가능합니다.
페이지 제목	'새 탭에서 URL열기' 설정 시 브라우저 탭 제목으로 노출 됩니다.
페이지 간략소개	외부 포털에서 노출될때 나오는 설명글 입니다.
홈 리다이렉션 URL	외부 페이지를 홈으로 사용할 수 있습니다. (새탭 연결)
페이지 복제	로그인, 채용공고 페이지를 제외한 모든 페이지를 복제할 수 있습니다.

2-3. 빌더

빌더 내의 위젯을 조작하여 실제 페이지의 디자인을 구성할 수 있습니다.

일반적인 퍼블리싱에 사용되는 헤더-바디-푸터의 구조에 여러가지 위젯을 이용해 콘텐츠를 삽입합니다.

➊ 헤더

• 상단 롤링 배너: 노출 시간을 설정하여 여러개의 배너를 표시할 수 있습니다.

• 헤더: 메뉴 및 서브 메뉴를 생성할 수 있습니다. 각 메뉴는 외부 URL / 페이지 내 / 3가지 경로로 이동 가능합니다.

*특정 섹션으로 스크롤 시 강조: (좌측)헤더메뉴의 '강조 스타일'을 통해 편집 가능합니다.

➋ 푸터

• 사이트 최하단에 위치하여 일반적으로 기업명, 필수 페이지 링크, 소셜 정보, 저작권 표기 등의 정보가 기입 됩니다.

➌ 팝업

• 페이지 내 중요한 공지사항, 안내 등을 노출할 때 사용 되는 기능입니다.

• 요소: 이미지, 텍스트, 링크, 구분선

➍ 페이지 콘텐츠 (페이지마다 개별 작업이 필요하며, 페이지 내에 다양한 섹션 항목 추가가 가능합니다.)

항목	내용
동영상배너	영상을 배경으로 텍스트와 링크 버튼, 채용공고 수를 삽입할 수 있습니다. 주로 상단 메인배너에서 기업 홍보 영상을 활용하여 제작됩니다.
단일 이미지	이미지를 배경으로 텍스트와 링크 버튼, 채용공고 수를 삽입할 수 있습니다. 주로 상단 메인 배너에 사용되며, PC/ M 이미지를 구분하여 적용 할 수 있습니다.
다중 이미지 배너	여러개의 이미지를 롤링 배너로 삽입할 수 있습니다. 기업의 다양한 홍보 이미지를 노출할 수 있습니다.
이미지와 텍스트	이미지와 텍스트, 버튼을 선택적으로 사용 가능합니다. 이미지와 함께 설명 삽입이 필요한 경우 주로 사용됩니다.
동영상과 텍스트	영상과 함께 텍스트를 나열할 수 있습니다. 여러개의 기업 홍보 영상을 소개하기 적합한 요소입니다.
카드 뷰 리스트	일관된 모양의 카드에 정보(이미지, 글)를 표기하는 방법입니다. 슬라이더 적용을 통해 스와이프하며 콘텐츠를 확인 할수 있습니다.
자주묻는 질문	수직으로 접을 수 있는 아코디언 메뉴로, (Click)를 통해 내용을 카테고리별로 관리할 수 있습니다. 주로 FAQ, 공지사항 등에 활용됩니다.
단일 이미지	텍스트와 버튼 없이 이미지만 삽입 가능하며, PC/ M 이미지를 구분하여 적용 할 수 있습니다. 단일 이미지를 화면 전면에 배치할 때 사용됩니다.
구분선	두께 및 색상을 설정하여 영역 사이에 배치합니다. 가시적인 경계를 만들어, 컨텐츠를 명확하게 구분할 수 있습니다.
지도	회사 주소 및 지점/사업장 등에 대해 안내가 가능합니다.
카드 뷰 공고 리스트	현재 홈페이지에 공개되어 있는 채용공고를 카드 뷰로 확인할 수 있습니다.

TIP💡

빌더 내 모든 이미지는 Unsplash와 연동되어 상업적으로 이용 가능한 무료 이미지 소스를 제공하고 있습니다. 가지고 계신 이미지가 없을 경우 Unsplash를 통해 이미지 사용이 가능합니다.