닷홈 홈페이지빌더 강좌 - 5분만에 만드는 반응형 홈페이지

Step1. 준비하기

무료 홈페이지빌더를 이용하여 제작 과정을 실제 따라 해보는 과정을 통해 쉽고 간단하게 홈페이지를 만들 수 있도록 도와드립니다. 

초보자도 강좌대로 따라 해 보면, PC 버전과 모바일 버전이 따로 필요 없는 반응형 웹을 5분 만에 제작할  수 있습니다.

먼저 홈페이지를 제작하는데 필요한 준비물들을 알아보겠습니다.

1. 무료이미지 사이트

고해상도 사진들과 이미지들을 저작권에 문제없이 유용하게 사용할 수 있는 무료 사이트들입니다.

홈페이지제작 할 때 필요한 이미지를 무료로 다운로드할 수 있습니다.

아래의 화면은  픽사베이(http://pixabay.com)로 저작권 없는 무료 이미지들을 공유 서비스하는 사이트입니다. 

2. 이미지 편집툴

홈페이지제작 하는데 있어 기본적으로 필요한 사항은 바로 이미지를 보정하거나 사이즈를 변경하는 등의 이미지 보정 작업입니다. 

포토샵을 다루실 줄 아는 분들은 크게 문제 될게 없지만, 초보자분들은 보다 쉬운 편집 프로그램이 필요할 것입니다. 

예전에는 그림판 같은 기본 프로그램으로 이미지를 편집했다면,

최근에는 크롬 앱이나 웹사이트 서비스만으로도 간단한 이미지 편집이 가능하게 되었습니다.

그중에서 자주 쓰이는 웹사이트를 소개해 드리겠습니다.

http://www.photoshop.com/tools?wf=editor 

닷홈에서는 홈페이지빌더를 체험해 볼 수 있도록 30일 동안 무료로 제공합니다. 

이번 강좌에서는 다양한 디자인 중 꾸준히 사랑받고 있는 회사(biz1-a) 디자인을 선택하여 홈페이지를 만들어 보겠습니다.

홈페이지빌더 신청 바로가기

위의 링크를 클릭하여 연동되는 페이지에서 아래 이미지의 순서에 따라 레이아웃 선택 후 "신청하기" 버튼을 클릭합니다.

선택 업종과 디자인을 확인 후, 담당자/계약자 정보를 올바르게 입력합니다.

서비스 내역에서 "빌더 무료체험" 을 선택하고 도메인 설정과 관리자 비밀번호 설정을 입력합니다.

 ​

홈페이지 관리자 비밀번호 설정은 신청하신 홈페이지 접속 후 관리자  로그인시 사용되므로, 정확히 기억하셔야 합니다.

마지막으로 "신청하기" 버튼을 클릭하면 빌더 무료체험 신청이 완료됩니다. 

 (설치에 약간의 시간이 걸릴 수 있으니 바로 확인이 안되시면 10초 정도 후에 다시 확인해주세요.)

아래 화면과 같이 무료홈페이지 체험판 설치 완료 페이지가 뜨며, 기본적으로 입력한 정보 항목들을 확인할 수 있습니다.

"홈페이지 바로가기"버튼을 클릭하면, 신청한 홈페이지로 이동합니다. 

4. 관리자 페이지  접속하기 

홈페이지로 이동하면 신청한 회사(biz1-a)의 디자인  홈페이지를 아래와 같이 확인할 수 있습니다.

관리자 페이지로 접속하기 위해서는 관리자 아이디 로그인이 필요합니다. 화면의 오른쪽 상단에 "로그인" 버튼을 클릭합니다. 

아래의 화면과 같이 관리자 페이지 접속시 User ID는 "admin"이며, 

Password는 홈페이지빌더 신청 시 입력한 "관리자 비밀번호" 를 넣고 "Login"버튼을 클릭합니다.

로그인을 하면 다음 화면과 같이 우측 상단에 관리자 링크(자물쇠)가 나타납니다. 

오른쪽 상단의 "자물쇠" 버튼을 클릭하면 관리자 페이지로 접속합니다.

관리자 페이지는 홈페이지를 전반적으로 설정할 수 있습니다.

메뉴, 메인화면, 페이지 등 홈페이지를 꾸미기 위해서는 반드시 관리자 페이지로 접속을 해야 합니다. 

5. 홈페이지빌더 메뉴 삭제하기

메뉴를 새로 만들어 보기 위해 기존 메뉴를 삭제해 보겠습니다.

우선,  메뉴 > 메인메뉴 > 메인 메뉴 목록의 "휴지통" 버튼을 클릭하여 기존 메뉴를 삭제합니다.

아래 화면을 보면 메인 메뉴들이 삭제된 것을 확인할 수 있습니다. 

우측 상단의 "Home" 버튼을 클릭하여 홈페이지로 이동합니다.

홈페이지빌더를 이용해 메뉴가 삭제된 상태의 홈페이지를 아래와 같이 확인할 수 있습니다.

(TIP : 관리자 로그인이 된 상태에서 자물쇠 버튼을 클릭하면 관리자 페이지가 새 탭으로 생성됩니다.

홈페이지와 관리자 페이지가 동시에 열린 상태가 되는데  탭 이동만으로도 편안하게 작업이 가능합니다.)

본 강좌에 사용된 샘플 이미지들을 모아 두었습니다. 아래 링크에서 다운받아 사용할 수 있습니다.

샘플 이미지 자료를 다운로드 후 압축을 풀고 관련 자료들을 간단히 테스트할 수 있습니다.

샘플 이미지 자료 다운받기

​다음 강좌에서는 로고 이미지를 실제로  설정해보는 "​Step2. 로고 변경하기"에 대해 알아보겠습니다.