돈버는방법

홈페이지 제작 & 만들기 30분 완벽 가이드 (2019년)

홈페이지 데모

위에 있는 웹사이트 이미지를 보면 어떤 생각이 드세요?

혹시 “나도 저런 웹사이트를 혼자서 만들 있을까?“란 생각을 하셨나요?

그렇다면 잘 찾아오셨습니다! (위에 있는 웹사이트처럼 만들 것입니다!)

이 포스팅에서는 홈페이지 제작 & 홈페이지 만들기에 대한 지식이 아예 없는 사람도 30분만에 웹사이트를 처음부터 끝까지 만드는 방법을 아주 자세하게 알려드리도록 하겠습니다!

(궁금한 것이 생기면 돈버는 기술 페이스북 페이지로 메시지를 남겨주세요!)

 

참고 URL

블루호스트(웹호스팅 – 25% 할인링크):  https://www.bluehost.com 

시드니테마 다운로드: https://wordpress.org/themes/sydney/

 


 

1단계: 호스팅 & 도메인 등록하기

웹 호스팅? 도메인? 홈페이지 제작할 때 꼭 필요한 것들인데 모두 처음듣거나 생소한 단어인가요?

괜찮습니다!

간략하게 필요한 이유를 설명해 드릴게요.

 

호스팅이 필요한 이유는?

홈페이지 만들기를 끝낸 다음, 언제 어디서나 누군가가 자신의 웹사이트에 접속 가능하도록 만들기 위해서 24시간 항상 작동하는 웹 서버가 필요합니다.

하지만 웹 서버를 개인이 직접 소유하고 관리하는 것은 부담이 있기 때문에, 이를 호스팅 업체에서 서버 비용을 받고 사람들에게 사용할 수 있도록 임대를 해주고 있습니다. 바로 이것이웹 호스팅이며 우리가 홈페이지 제작을 위해 필요한 이유입니다.

 

도메인 주소가 필요한 이유는?

일반적으로 웹사이트 주소는 192.123.123.123 이런식의 IP 주소로 이루어져 있습니다.

하지만 우리가 구글이나 네이버에 접속할 때 저런 숫자로 된 주소를 검색해서 접속하나요?

당연히 아니죠!

www.naver.com 또는 www.google.com 같은 영문으로된 특정한 주소 사용해서 접속을 하죠?

바로 위와 같은 표현된 주소들을도메인이라고 합니다.

그렇기 때문에 홈페이지 제작 및 홈페이지 만들기를 위해서는웹 호스팅도메인이 우선적으로 필요합니다.

 

호스팅 & 도메인 등록을 위해블루호스트 선택한 이유는?

웹 호스팅과 도메인 등록을 위해서는 호스팅 업체를 선택해야 합니다.

여기서 개인적으로블루호스트업체를 추천하는 이유는 명백합니다.

  1. 경쟁 업체들과 비교했을 때 항상 저렴한 편이다.
  2. 이미 세계에서 2M+ 이상의 웹사이트를 호스팅하는 유명한 업체, 애프터 서비스가 좋다.
  3. HTTPS가 필수인 지금, SSL을 무료로 제공하며 쉽게 적용할 수 있도록 해준다.
  4. 처음 호스팅 플랜에 가입할 때, 도메인 1년치 등록을 무료로 제공해준다.
  5. 워드프레스 웹사이트 설치할 때, 몇 번 클릭으로 쉽게 시작할 수 있다.

 

블루호스트를 통한 호스팅 & 도메인 등록 방법

1) 블루호스트 (25% 할인 링크)에 접속해서 “get started now” 버튼을 클릭하기

워드프레스 호스팅

 

2) 사이트 한 개만 만드신다면 basic 플랜 / 사이트 여러개를 만드신다면 plus 플랜을 선택하기

워드프레스 만들기

 

3) 도메인 주소를 처음 만든다면 왼쪽에 입력 후 Next / 도메인 주소 가지고 있는 경우 오른쪽에 입력 후 Next 클릭하기

워드프레스 만들기 단계 3

 

4) 계정 정보를 아래와 같이 입력하기 ► 계약기간(1년,2년,3년)을 선택하기 (길수록 더 저렴한 가격)

워드프레스 만들기 단계 4

 

5) 크래딧카드 정보를 입력하기 ►아래 동의부분에 체크하기 ► submit 버튼 클릭하기

워드프레스 만들기 단계 5

 

6) 호스팅 계정의 비밀번호를 입력하기 위해 아래 “Create your password” 버튼 클릭하기

워드프레스 만들기 단계 6

 

7) 원하는 비밀번호 입력하기 ► 동의부분 체크하고 “Next” 버튼 클릭하기

워드프레스 만들기 단계 7

 

8) 축하합니다! 웹 호스팅을 위한 호스팅 계정을 만들기가 완료되었습니다!

워드프레스 만들기 단계 8

 


 

2단계: 워드프레스 웹사이트 설치하기

2단계에서는 워드프레스를 기반한 웹사이트를 설치할 예정입니다.

 

워드프레스는 무엇인가?

워드프레스에 대한 개념이 생소한 분들을 위해서 간략히 설명드립니다.

워드프레스란, 콘텐츠 관리 시스템(CMS)에 속하며, 일종의 웹사이트 제작을 위한 플랫폼으로써 쉽고 빠르게 홈페이지 만들기가 가능하도록 도와주는 도구로 생각하면 될 것 같습니다.

 

워드프레스 플랫폼을 이용해서 웹사이트를 만들어야 되나?

그렇다면 워드프레스 이 외에도 여러가지 다른 플랫폼도 있을텐데 왜 워드프레스를 사용해야 되는지 궁금할 수 있습니다.

이에 대한 3가지 명확한 이유를 말씀드리겠습니다.

  1. 코딩스킬없이 누구나 쉽고 빠르게 무료로 홈페이지 제작이 가능하다.
  2. 세계에서 무려 6분의 1이상의 웹사이트가 워드프레스로 만들어진만큼 명성이 높고 디자인 / 기능구현을 위해서도 플러그인 및 테마를 활용해 선택가능한 옵션들이 많다.
  3. 웹사이트 홍보하기 위한 구글 검색엔진 노출에도 최적화된 웹사이트 만들기 가능하다.
  4. 이 외에도 워드프레스를 통해서 홈페이지 제작하는 더 많은 이유들을 확인해보세요!

 

워드프레스 설치하는 방법

1) 가입한 블루호스트 계정에 로그인하기 ► Marketplace 클릭하기 ► 아래에 나온 메뉴 중 “Add Website” 클릭하기

 

2) 사이트 이름 입력하기 ► “Next” 버튼 클릭하기

 

3) 등록한 도메인 선택하기 ► “Next” 버튼 클릭하기

 

4) 웹사이트 주소 / 관리자 주소 / 관리자 아이디 & 비밀번호 확인하기 ► “Login to WordPress” 링크 클릭하기

 

5) 처음으로 접속한 관리자 페이지에서 사이트 이름이 나온 곳에 마우스 가져다대기 ► “Visit Site” 옵션 나오면 클릭하기

 

6) 축하합니다! 워드프레스 기본 홈페이지 만들기가 완성되었습니다! ( 아래에서 테마 적용하는 방법을 확인하세요! )

 


 

3단계워드프레스 테마 다운받고 적용하기

지금까지 워드프레스를 다 설치해서 기본 사이트까지 들어갈 수 있다면 수고하셨습니다!

이제는 기본 사이트에다 테마를 적용하기 위해서 다운받고 적용하는 방법을 알아볼 것입니다.

 

간략하게 워드프레스 테마의 역할은 무엇일까요?

워드프레스로 웹사이트 제작시 클릭 몇 번으로 원하는 스타일의 디자인을 쉽고 빠르게 구현할 수 있도록 하기 위해서 제공하는 것입니다.

그러므로 워드프레스 이용자들은 자신이 원하는 테마 스타일의 데모 사이트를 통해서 미리 자신이 원하는 종류의 사이트 디자인인지, 원하는 기능들이 모두 포함되어 있는지등을 고려하고 결정하여 무료/유료로 구매하여 바로 적용할 수 있습니다.

여기서는 무료 테마 중에서도 TOP 상위에 랭크되어 있는 “Sydney” 테마를 다운받고 적용할 것입니다!

 

워드프레스 테마 다운받고 적용하는 방법

1) 시드니 테마 사이트에서 테마 파일을 “Download” 받기

시드니 테마 설치하기

 

2) zip 파일형식으로 잘 받았는지 확인하기 (압축 풀지 말고 다음단계로!)

시드니 테마 다운파일 확인하기

 

3) 워드프레스 관리자 페이지 Appearance ► Themes 클릭하기

시드니 테마 적용위해서 관리자 페이지 방문

4) 상단에 있는 “Add New” 클릭하기

워드프레스 테마 업로드 버튼

 

5) “Upload Theme” 클릭하기

워드프레스 테마 업로드 버튼 클릭하기

 

6) 아까 다운받았던 테마 zip 파일 업로드 위해 “Choose file” 클릭 ► zip 파일 선택 ► “Install Now” 클릭하기

choose file로 테마 파일 선택

 

7) 워드프레스 테마 설치 완료 후, “Activate” 클릭하기

테마 설치 완료 후 적용하기

 

8) 테마에 필요한 플러그인 다운을 위해 상단에 알람으로 떠있는 “Begin Installing plugins” 클릭하기

테마 관련 플러그인 설치하기

 

9) 플러그인 전체 클릭하기

테마 관련 플러그인 전체 선택하기

 

10) 행동을 취할 옵션 중 “Install” 선택 ► “Apply” 클릭하기

테마관련 설치하고 적용하기

 

11) Plugins > Installed Plugins 클릭 ► “Elementor” / “Sydney Toolbox” 플러그인을 Activate 클릭해서 활성화하기

워드프레스 플러그인 설치하기

 

12) Plugins > Add New 클릭 ► “One Click Demo Import” 검색하기 ► 플러그인 찾아서 “Install Now” 클릭하기

데모 정보를 얻기 위한 플러그인 설치

13) 플러그인 설치가 완료되면, “Activate” 클릭하기

설치한 데모 플러그인 활성화하기

 

14) Appearance > “Import Demo Data” 클릭하기

데모 정보 다운받기

 

15) “Import Demo Data” 버튼 클릭하기 (다운받는데 시간이 좀 걸림)

데모 정보 다운받기 버튼 클릭하기

 

16) 상단에 “Visit Site”로 사이트 방문하기

사이트 방문하기

 

17) 축하합니다! 워드프레스 기본사이트에서 > “시드니 테마 적용 + 데모 정보 적용” 사이트가 완성되었습니다.

웹사이트 방문하기

 


 

4단계: 워드프레스 웹사이트 꾸미기

테마를 적용해서 데모 사이트와 똑같이 구현했기 때문에 이미 완성한 웹사이트처럼 보일 것입니다.

하지만 이제 당신만의 유니크한 웹사이트로 거듭나기 위해서는 필요한 부분들을 수정해줘야겠죠?

여기서는 사이트 로고 및 메인페이지를 수정하는 방법을 간략하게 알아보도록 하겠습니다!

 

워드프레스 꾸미는 방법 – 로고 수정하기

1) Appearance > Customize 클릭하기

워드프레스 로고 수정하기

 

2) “Site title/tagline/logo” 클릭하기

워드프레스 로고 커스터마이징

 

3) 아래 스크린샷에 나온대로 원하는 부분 수정하기

워드프레스 로고 텍스트 및 이미지로 수정

 

워드프레스 꾸미는 방법 – 메인페이지 텍스트 / 이미지 수정하기

1) Appearance > Customize 클릭하기

워드프레스 페이지 수정 1

 

2) “Header area” 클릭하기

워드프레스 페이지 커스터마이징 모드 2

 

3) “Header Slider” 클릭하기

워드프레스 페이지 커스터마이징 모드 3

 

3) 아래 스크린샷에 나온대로 원하는 부분 수정하기

워드프레스 페이지 커스터마이징 모드 4

 

워드프레스 꾸미는 방법 – 메인페이지 다른 섹션 수정하기

1) Page > All Pages Customize 클릭하기 ► My front page 아래에 “Edit with Elementor” 클릭하기

워드프레스 메인 페이지 수정1

 

2) 아래 이미지와 같이 원하는 기능을 드래그&드롭으로 쉽게 추가할 수 있다!

워드프레스 메인 페이지 수정2

 

3) “OUR SERVICES” 부분을 클릭 ► 왼편과 같이 편집창이 새로 나오고 원하는대로 아래 이미지와 같이 수정할 수 있다.

워드프레스 메인 페이지 수정3

 

4) 편집창 상단에 “Style”을 통해 스타일과 관련된 컬러/글자크기등을 수정할 수 있다.

워드프레스 메인 페이지 수정4

 

5) 각 섹션에는 아래 이미지와 같이 새 레이아웃(섹션)을 추가 / 섹션 이동 / 섹션 제거등 쉽게 컨트롤할 수 있도록 옵션을 제공하고 있다.

워드프레스 메인 페이지 수정5

 


 

홈페이지 제작 및 만들기가 모두 끝이 났습니다!

그런데 아직 웹 호스팅 가입부분도 어떻게 해야될지 모르겠다구요?

그렇다면 돈버는 기술 페이스북 페이지로 메시지를 보내주세요!

“무료”로 알려드립니다 🙂

 

워드프레스 웹사이트로 돈버는 블로그 만드는 완벽가이드가 궁금하다면?

2 Comments

  1. 블루호스트가 외국에 서버가있어 느리진 않나요?
    돈버는 기술님의 현재 이 사이트는 블루호스트의 어떤 가격의 플랜을 사용하세요?

    • 돈버는기술 Reply

      안녕하세요 고밍님!

      블루호스트 속도에 관해서는, 직접 사용하면서 운영해본 결과로 봤을 때 하루 트래픽이 10,000 이상 나오지 않는다면 사용하는데 있어서 큰 문제를 느끼지 못했습니다.

      문제가 있을시, 실시간 1:1 채팅을 통해서 문의하면 해당 스태프가 직접 접속하여 셋팅도 수정해주고 서비스면에서도 괜찮습니다.

      그러므로 다수 사이트를 운영한다면 plus 플랜을 추천하고, 최대한 저렴하게 사용하다가 하루 트래픽이 10,000 이상 넘어가는등 한다면 VPS 서버 사용을 추천합니다.

      현재 plus 플랜으로 다수 사이트를 돌리고, 트래픽이 많은 사이트의 경우는 VPS 서버를 사용하고 있습니다!

Write A Comment