사이트 빌더에는 트렌디한 사이트 UI를 반영한 다양한 위젯이 준비되어 있습니다.
개발, 디자인을 잘 하지 못해도 화면 내의 위젯들을 조작하여 누구나 멋진 디자인의 홈페이지를 만들 수 있습니다.
[상단 탭]
항목 | 내용 |
➊ 미리보기 | PC/ 모바일/ 태블릿 디바이스별 미리보기를 지원합니다. |
➋ 페이지탭 | 편집할 페이지로 이동할 수 있습니다. |
➌ 영역선택 | 활성화 시 화면 내 편집 영역을 선택하여 빠른 편집이 가능합니다. |
➍ 히스토리 | 실행취소(Ctrl+z), 다시 실행(Ctrl+Shift+z) |
➎ 더보기 | 새창에서 사이트 열기, 단축키 보기 |
➏ 저장하기 | 현재까지 작업된 내용을 저장합니다. (저장된 내용은 1분 뒤 사이트에 반영됩니다.) |
[편집 위젯]
항목 | 내용 |
➐ 도구 메뉴 | 빌더/ 페이지/ 테마설정 3가지의 모드를 전환할 수 있습니다. |
➑ 구성 편집 | 페이지의 구성 요소들이 목록으로 노출됩니다. 구성 요소의 추가, 삭제가 가능하며 요소 간 순서 변경이 가능합니다. |
➒ 세부 편집 | 페이지 내에서 선택한 요소의 세부사항을 편집할 수 있는 영역입니다. |
➓ 화면 미리보기 | 현재 작업 중인 화면을 실시간으로 미리 볼 수 있습니다. |
홈페이지 빌더는 테마 → 페이지 → 빌더 3가지 모드로 구성되어 있습니다.
테마 : 사이트의 전체적인 컬러, 폰트 등 기본값 설정
페이지 : 홈페이지를 구성할 각 페이지와 URL을 설정
빌더 : 각 페이지 콘텐츠 세부 디자인
각 편집 영역의 세부 기능은 아래와 같습니다.
모드 | 구성 요소 |
테마 | [테마 설정] 메인 색상/ 모서리 둥글기/ 테마 폰트/ PC,M 기준 폭/ 테마 미리보기 |
페이지 | [페이지 추가] 빈 페이지 추가/ 페이지 복제 [페이지 설정] 페이지 이름/ 페이지URL/ 검색엔진 노출허용/ 페이지 제목/ 페이지 간략소개/ 홈 리다이렉션 URL/ 페이지 배경 이미지 |
빌더 | [헤더] 상단 롤링 배너/ 헤더 [페이지 콘텐츠] 동영상 배너/ 단일 이미지 배너/ 다중 이미지 배너/ 이미지와 텍스트/ 동영상과 텍스트/ 카드 뷰 리스트/ 자주묻는 질문/ 단일 이미지/ 구분선 / 지도 / 카드 뷰 공고 리스트 (하위항목: 텍스트, 버튼, 링크, 채용공고 수, 카운트다운 타이머) [푸터] 푸터(내용, SNS링크, 기타링크)/ 패밀리 사이트 [팝업] 이미지/ 텍스트/ 링크/ 구분선 |
테마 색상 설정 시, 사이트 내 기본 요소들에 일괄적으로 자동 적용되어 일일이 세부 사항들을 수정하는 시간을 절약할 수 있습니다.
메인 색상을 1개를 선택하면, 어울리는 색상 팔레트(5색)가 자동 생성됩니다.
설정하신 '메인 색상'과 '모서리 둥글기'는 홈페이지 내 버튼, 입력필드 등에 적용됩니다.
채용 사이트를 구성하는 페이지를 생성·관리하는 모드입니다. 페이지의 이름과 URL, 배경 등을 관리할 수 있습니다.
(홈/ 로그인/ 채용공고 페이지는 기본 항목으로 삭제가 불가능합니다.)
항목 | 내용 |
페이지 이름 | 빌더 내 '페이지 목록'에서 표시되는 값입니다. |
페이지 URL | 영문, 숫자, '-'만 입력 가능하며, 최대 20자까지 입력 가능합니다. |
페이지 제목 | '새 탭에서 URL열기' 설정 시 브라우저 탭 제목으로 노출 됩니다. |
페이지 간략소개 | 외부 포털에서 노출될때 나오는 설명글 입니다. |
홈 리다이렉션 URL | 외부 페이지를 홈으로 사용할 수 있습니다. (새 탭 연결) |
페이지 복제 | 로그인, 채용공고 페이지를 제외한 모든 페이지를 복제할 수 있습니다. |
빌더 내의 위젯을 조작하여 실제 페이지의 디자인을 구성할 수 있습니다.
일반적인 퍼블리싱에 사용되는 헤더-바디-푸터의 구조에 여러가지 위젯을 이용해 콘텐츠를 삽입합니다.
➊ 헤더
상단 롤링 배너: 노출 시간을 설정하여 여러개의 배너를 표시할 수 있습니다.
헤더: 메뉴 및 서브 메뉴를 생성할 수 있습니다. 각 메뉴는 외부 URL / 페이지 내 / 섹션 스크롤 3가지 경로로 이동 가능합니다.
*특정 섹션으로 스크롤 시 강조: (좌측)헤더메뉴의 '강조 스타일'을 통해 편집 가능합니다.
➋ 푸터
사이트 최하단에 위치하여 일반적으로 기업명, 필수 페이지 링크, 소셜 정보, 저작권 표기 등의 정보가 기입됩니다.
➌ 팝업
페이지 내 중요한 공지사항, 안내 등을 노출할 때 사용되는 기능입니다.
요소: 이미지, 텍스트, 링크, 구분선
➍ 페이지 콘텐츠
(페이지마다 개별 작업이 필요하며, 페이지 내에 다양한 섹션 항목 추가가 가능합니다.)
항목 | 내용 |
동영상 배너 | 영상을 배경으로 텍스트와 링크 버튼, 채용공고 수를 삽입할 수 있습니다. 주로 상단 메인배너에서 기업 홍보 영상을 활용하여 제작됩니다. |
단일 이미지 | 이미지를 배경으로 텍스트와 링크 버튼, 채용공고 수를 삽입할 수 있습니다. 주로 상단 메인 배너에 사용되며, PC/ M 이미지를 구분하여 적용할 수 있습니다. |
다중 이미지 배너 | 여러 개의 이미지를 롤링 배너로 삽입할 수 있습니다. 기업의 다양한 홍보 이미지를 노출할 수 있습니다. |
이미지와 텍스트 | 이미지와 텍스트, 버튼을 선택적으로 사용 가능합니다. 이미지와 함께 설명 삽입이 필요한 경우 주로 사용됩니다. |
동영상과 텍스트 | 영상과 함께 텍스트를 나열할 수 있습니다. 여러개의 기업 홍보 영상을 소개하기 적합한 요소입니다. |
카드 뷰 리스트 | 일관된 모양의 카드에 정보(이미지, 글)를 표기하는 방법입니다. 총 5개의 오버플로우 스타일을 적용할 수 있습니다. (횡 스크롤, 네비게이터, 자동 넘김, 좌측 반복, 우측 반복) |
자주묻는 질문 | 수직으로 접을 수 있는 아코디언 메뉴로, 필터 리스트를 통해 내용을 카테고리별로 관리할 수 있습니다. 주로 FAQ, 공지사항 등에 활용됩니다. |
단일 이미지 | 텍스트와 버튼 없이 이미지만 삽입 가능하며, PC/ M 이미지를 구분하여 적용 할 수 있습니다. 단일 이미지를 화면 전면에 배치할 때 사용됩니다. |
구분선 | 두께 및 색상을 설정하여 영역 사이에 배치합니다. 가시적인 경계를 만들어, 컨텐츠를 명확하게 구분할 수 있습니다. |
지도 | 회사 주소 및 지점/사업장 등에 대해 안내가 가능합니다. |
카드 뷰 공고 리스트 | 현재 홈페이지에 공개되어 있는 채용공고를 카드 뷰로 확인할 수 있습니다. |
TIP
빌더 내 모든 이미지는 Unsplash와 연동되어 상업적으로 이용 가능한 무료 이미지 소스를 제공하고 있습니다. 가지고 계신 이미지가 없을 경우 Unsplash를 통해 이미지 사용이 가능합니다.