무료 홈페이지 빌더 강좌보기

홈페이지 빌더 강좌
step1. 준비하기

Step1. 준비하기

무료 홈페이지빌더를 이용하여 제작 과정을 실제 따라 해보는 과정을 통해 쉽고 간단하게 홈페이지를 만들 수 있도록 도와드립니다.
초보자도 강좌대로 따라 해 보면, PC 버전과 모바일 버전이 따로 필요 없는 반응형 웹을 5분 만에 제작할 수 있습니다.
먼저 홈페이지를 제작하는데 필요한 준비물들을 알아보겠습니다.

1)무료이미지 사이트

해상도 사진들과 이미지들을 저작권에 문제없이 유용하게 사용할 수 있는 무료 사이트들입니다.
홈페이지제작 할 때 필요한 이미지를 무료로 다운로드할 수 있습니다.

https://picjumbo.com/

https://unsplash.com/

https://join.deathtothestockphoto.com/

https://pixabay.com/

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

2)이미지 편집툴

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

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

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

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

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

https://www.picresize.com/

[Crop 기능과 Resize 기능을 제공하며 간단한 사진 효과도 지원합니다.]

[웹상의 이미지 URL을 입력하여 사용할 수도 있습니다.]

https://tools.universalwebservices.net/resize-image/

[픽셀 값을 입력하여 사이즈 크기를 조절할 수 있습니다.]

[JPG, JPEG, GIF, PNG or BMP 등 대부분의 이미지 타입을 지원합니다.]

https://apps.pixlr.com/editor/

[크롬 브라우저에서 가장 많이 사용하는 이미지 툴입니다.]

[포토샵과 유사합니다]

https://www.sumopaint.com/app/

[포토샵과 유사한 기능을 제공하며 웹에서 구동되는 툴 중에 매우 가볍고 안정적입니다.]

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

[어도비사에서 제공하는 웹 버전 포토샵입니다.]

[실제 포토샵과 동일한 구조로 구동이 됩니다.]

3) 홈페이지빌더 신청하기

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

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

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

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

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

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

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

서비스신청 버튼을 누르시면 신청이 완료된 페이지가 나올 것입니다.

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

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

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

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

Password는 홈페이지빌더 신청 시 입력한 "관리자 비밀번호" 를 넣고

"Login"버튼을 클릭합니다.

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

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

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

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

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

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

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

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

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

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

(TIP : 관리자 로그인이 된 상태에서 자물쇠 버튼을 클릭하면 관리자 페이지가 새 탭으로 생성됩니다.
홈페이지와 관리자 페이지가 동시에 열린 상태가 되는데 탭 이동만으로도 편안하게 작업이 가능합니다.)

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

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