1시간안에 개인 홈페이지 만들기 (2021년)

홈페이지 만들기

지금 개인 홈페이지 만들기 방법을 찾고 있나요?

혼자서 홈페이지 제작을 하고 싶어도 제대로된 무료 홈페이지 강좌 가이드가 없어서 홈페이지 제작을 못하고 있었다면 잘 찾아오셨습니다!

웹문어에서 홈페이지 만들기와 관련된 모든 가이드를 무료로 공개하고 있습니다.

그럼 홈페이지 만들기 가이드를 아래에서 바로 확인해보세요!

홈페이지 만들기 제작

현재 이 사이트에는 제휴링크가 포함되어 있고, 링크를 통해 구매를 하게되면 제가 커미션을 얻게 됩니다. 하지만 실제 경험을 바탕으로 해당 서비스/제품을 추천하는 것이고, 이를 통해 정보를 무료로 공유하고 이메일 지원을 통해 실제로 도와드리고 있습니다.


Contents

  1. 개인 홈페이지 만들기 개념 이해하기
  2. 웹 호스팅 & 도메인 등록하기
  3. 워드프레스 홈페이지 만들기 위한 기본 셋팅하기
  4. 워드프레스 홈페이지 테마 설치 및 수정하기
  5. 워드프레스 홈페이지 플러그인 설치 및 셋팅하기
  6. 워드프레스 홈페이지 구글에 등록하기
  7. 워드프레스 홈페이지 홍보하기

1. 개인 홈페이지 만들기 개념 이해하기

홈페이지 만들기 기본 개념을 이해하고 넘어가면 진행하는데 큰 도움이 됩니다.

웹문어 홈페이지 만들기 가이드 소개

요즘 더욱 많은 사람들이 오프라인에서 온라인 시장으로 넘어가고 있습니다.

많은 사람들이 다양한 문제와 이유로 인해서 오프라인이 결코 안전하지 않다는 사실을 느끼고 있습니다.

그래서 하루라도 빨리 온라인 시장에 대해 배우고 자신만의 영역을 넓혀나가기 위해 배우려는 사람들도 주위에서 많이 찾아볼 수 있는 시대가 왔습니다.

여기서 온라인 시장과 관련해서 가장 익숙하면서도 먼저 떠오르는 것이 바로 “홈페이지 만들기” 입니다.

홈페이지는 온라인 시장에서 자신만의 공간을 가지고, 자신이 원하는 정보들을 방문자들에게 24시간/7일내내 제공하면서 다양한 가치를 창출할 수 있게 만들어줄 수 있습니다.

이렇게 웹사이트 만들기가 중요하다는 사실을 알았다면, 대체 어떻게 아무것도 모르는 초보자들도 홈페이지 제작을 혼자서도 할 수 있을까요?

1. 홈페이지 제작을 쉽게 도와줄 수 있는 플랫폼인 워드프레스를 이용합니다.

아스트라 테마 설치하기 1

2. 워드프레스 플랫폼 안에서 제공하는 테마 중에서 미리 전문적으로 디자인된 데모 사이트를 그대로 다운받고 적용합니다.

아스트라 템플릿 설치하기6

3. 워드프레스 플랫폼 안에서 제공하는 플러그인 중 엘리멘토를 이용해서 드래그앤드롭으로 적용한 데모 사이트를 쉽게 수정합니다.

워드프레스 새 섹션 추가하기 8단계

이렇게 위에서 설명한 방식으로 홈페이지 만들기 가이드를 설명할 예정입니다.

홈페이지 만들기 제작 가이드로 넘어가기 전에 알고 넘고가면 좋을 개념들을 다시 한번 설명하겠습니다.


워드프레스

홈페이지, 블로그, 쇼핑몰등을 제작하도록 도와주는 인기있는 홈페이지 제작 툴 중 하나이다.

CMS는 Content Management System 으로 말 그대로 콘텐츠를 관리하는 시스템이다.

그리고 워드프레스 초보자 가이드에서 확인할 수 있듯이 코딩과 디자인에 관한 전문지식 및 스킬이 없더라도 혼자서 제작할 수 있도록 다양한 도구들을 제공하고 있다.

참고로 전 세계 모든 웹사이트들 중 36% 가까이 워드프레스로 운영되고 있다.


워드프레스 테마

워드프레스 테마는 워드프레스에서 제작하는 홈페이지, 블로그, 쇼핑몰등의 디자인 역할을 하는 부분이다.

비즈니스, 개인, 포트폴리오등 다양한 목적을 기반으로 제작된 전문적인 홈페이지 디자인을 그대로 다운받을 수 있도록 제공하기도 한다.

그래서 초보자들이 디자인에 관한 지식이 없더라도 단순히 인기있는 워드프레스 무료 테마 추천 정보를 참고해서자신이 원하는 디자인에 가까운 테마를 선택해서 전문적인 사이트를 만들 수 있도록 도와준다.


워드프레스 플러그인

워드프레스 플러그인은 연락 폼, 홈페이지 최적화, 드래그앤드롭 편집 도구등 홈페이지와 관련된 기능 역할을 하는 부분이다.

일반적으로 홈페이지를 코딩으로 제작하면 모든 부분들을 직접 코딩을 해야하거나, 힘들게 연동해야 한다.

하지만 이런 전문 지식 하나없이 단순히 인기있는 무료 플러그인 추천 정보를 기반으로 다운받고 단순히 클릭 몇번으로 셋팅만하면 자신의 홈페이지에 새로운 기능들을 추가할 수 있다.


도메인 주소 & 웹 호스팅

도메인 주소와 웹 호스팅은 홈페이지를 운영하기 위해 기본적으로 필요한 것들이다.

도메인 주소는 현재 이 사이트 주소인 webpus.com 과 같이 홈페이지 제작을 할 때 도메인 구매가 필요하다.

그리고 사이트를 24시간 7일내내 언제 어디서든지 방문할 수 있게 만들어야 한다.

이를 위해서 항상 작동되는 웹 서버에 홈페이지를 구성하는 파일들이 저장되어 있어야 된다.

이 필요한 웹 서버를 호스팅 업체에서 대여하는 것이 웹 호스팅이라고 한다.


홈페이지 방문자 수 올리기

홈페이지와 관련한 기본 개념은 아니지만 많은 사람들이 홈페이지를 만들고 가장 궁금해하는 부분이다.

이와 관련해서는 자신의 홈페이지를 홍보할 수 있는 마케팅 전략에 대해서 이해하고 적용할 필요가 있다.

마케팅 전략에는 블로그를 통해 홍보 전략부터 페이스북, 유튜브, 이메일등 다양한 방식과 관련된 전략을 소개하고 있으니 참고하면 도움이 될 것이다.


2. 웹 호스팅 & 도메인 등록하기

2강 호스팅 및 도메인 등록하기

홈페이지 만들기 위해 첫 번째로 필요한 웹 호스팅과 도메인 주소를 어떻게 등록할 수 있는지 살펴보도록 하겠습니다.

웹 호스팅은 워드프레스에서 공식적으로 추천하고 있는 호스팅 중 하나블루호스트를 사용할 예정입니다.

블루호스트는 처음 1년동안 도메인을 무료로 사용할 수 있고, https를 적용할 수 있는 SSL이 무료로 포함되어 있습니다.

그리고 문제가 생길 때마다 24/7 언제든지 라이브채팅을 통해서 문의하고 곧바로 답변을 받을 수 있어서 편리하게 활용하고 있습니다.

연장되기 전에 미리 네고를 하면 항상 할인된 가격으로 유지할 수 있어서 제공하는 옵션대비 가성비가 좋습니다.

그리고 다양한 여러 사이트를 빠르게 시작해야될 필요가 있어서 지금까지도 VPS와 함께 사용하고 있습니다.

만약 좋다고 생각되는 호스팅사가 있으면 자유롭게 시작하시고, 이 과정에서 어려움을 겪는다면, webpus.help@gmail.com 으로 도움을 청하시길 바랍니다.


1 아래에서 원하는 도메인 주소를 검색해보세요. ex) webpus.com

loading
원하는 도메인 주소를 입력해주세요!
Please verify that you are not a robot.

2 확인한 도메인 주소와 호스팅 등록을 위해 아래 버튼을 클릭해주세요.


3 아래 “Get Started Now” 버튼을 클릭하세요.

블루호스트 가입

4 원하는 플랜에 “select” 버튼을 클릭하세요.

  • 1개의 규모가 작은 사이트를 만들 예정이라면, “basic” 을 선택하세요.
  • 2개 이상의 사이트를 만들 예정이라면, “choice plus” 를 선택하세요.
블루호스트 가입 플랜 선택

5 (1)첫 단계에서 확인했던 원하는 도메인 주소를 입력하고, (2)”Next” 버튼을 클릭하세요.

블루호스트 가입 방법

6 가입할 때 필요한 정보를 입력하는데 아래 내용을 참고하세요. (영문이름 & 주소 찾는 방법은 다음 단계에서 확인하세요.)

  • (A) First Name: 이름 – ex) Yeona
  • (B) Last Name: 성 – ex) Gim
  • (C) Country: 나라 – ex) Korea, Republic of
  • (D) Street Address: 거리 이름 ex) 507, Nonhyeon-ro, Gangnam-gu
  • (E) City: 도시 ex) Seoul
  • (F) Postal Code: 우편번호 ex) 000000 // 우편번호 구버전으로 입력하세요. (단순히, 000000 을 입력해도 됩니다.)
  • (G) Phone Number: 휴대폰 번호 ex) 1012345678
  • (H) Email Address: 이메일 주소 ex) example@gmail.com
블루호스트 가입 방법

6a 영문 이름 찾는 방법으로 아래와 같이 네이버를 활용하세요.

블루호스트 가입 방법

6b 영문 주소 찾는 방법으로 아래와 같이 네이버를 활용하세요.

블루호스트 가입 방법

7 원하는 호스팅 기간을 선택하세요.

  • 아래 처음 도메인 등록과 https SSL 보안이 무료로 포함된 것을 확인할 수 있습니다.
블루호스트 플랜 선택

8 부가옵션으로 개인적으로 (A), (B), (C)를 모두 체크 해제합니다.

  • 필요하다고 생각되시면 체크하셔도 되고, (D) 에서 최종 금액을 확인하세요.
블루호스트 플랜 선택

9 결제를 위해 아래 (1)크래딧카드 정보를 입력 후 (2)약관 확인 후 체크하시고, 마지막으로 (3)”Submit” 버튼을 클릭하세요.

Submit 버튼을 누르고 알 수 없는 문제가 생긴경우?

  • 브라우저를 크롬으로 다시 시도해보세요.
  • 결제가능한 크래딧카드인지 다시 한번 확인하세요.
  • 우편번호가 구버전 (000000) 으로 되어있는지 다시 확인하세요.
블루호스트 가입

10 성공적으로 완료되었고, 아래 “Create your account” 버튼을 클릭하세요.

블루호스트 홈페이지 만들기

11 (1), (2)블루호스트 계정 새 비밀번호를 입력하고, (3)약관 확인후 체크하고, (4)”Create Account” 버튼을 클릭하세요.

블루호스트 홈페이지 만들기

12 이제 로그인을 위해서 아래 “go to login” 버튼을 클릭하세요.

블루호스트 홈페이지 만들기

13 만든 계정 정보를 (1), (2)에 입력하고, (3)”Log In” 버튼을 클릭하세요.

블루호스트 로그인

14 아래 “Skip this step“을 클릭하세요.

블루호스트 시작하기

15 아래 “Skip this step“을 클릭하세요.

블루호스트 시작하기

16 아래 “Skip this step“을 클릭하세요.

블루호스트 시작하기

17 아래 “Skip this step“을 클릭하세요.

블루호스트 시작하기

18 블루호스트 메뉴 중에서 “My Sites“를 클릭하세요.

블루호스트 사이트 확인하기

19 아래 자동으로 생성된 기본 워드프레스 사이트를 확인할 수 있습니다. 관리자 페이지 방문을 위해서 “Log in” 버튼을 클릭하세요.

블루호스트 사이트 확인하기

20 아래와 같이 워드프레스 홈페이지 관리자 페이지에 성공적으로 방문했습니다.

블루호스트 관리자 페이지

이메일 컨펌하기 (홈페이지 만들기 필수)

도메인 주소 & 호스팅 등록 후 이메일 컨펌을 해줘야 합니다.

만약 컨펌을 하지 않으면 2주정도 뒤에 사이트가 비활성화가 되기 때문에 꼭 해주시길 바랍니다.

만약 이메일을 확인할 수 없는등 도움이 필요하시면 webpus.help@gmail.com 으로 도움을 청하시길 바랍니다.

21 이제 이메일 컨펌을 하기 위해, 등록했던 이메일 사이트로 방문 후, 아래와 같은 메일을 확인해주세요.

블루호스트 이메일 증명

22 아래 “Verify Your Email” 버튼을 클릭해서 이메일 컨펌을 해주세요.

블루호스트 이메일 증명

23 아래와 같이 이메일 컨펌이 완료된 것을 확인할 수 있습니다.

블루호스트 이메일 증명

PHP 버전 변경하기

PHP는 워드프레스 플랫폼을 구성하고 있는 프로그래밍 언어로, 버전을 최신으로 변경하는 이유는 사이트를 더욱 최적화하고 보안을 향상시키기 위해서 입니다.

최신 버전으로 설정되어 있을 수도 있지만, 안되어 있는 경우 혹은 나중에 업그레이드되는 경우등을 위해 버전 변경하는 방법을 참고하시길 바랍니다.

24 블루호스트 메뉴 중에서 “Advanced” 를 클릭하세요.

블루호스트 PHP 버전 변경하기 step 1

25 (1)검색창에 “MultiPHP“를 검색하고 (2)결과로 나온 “MultiPHP Manager“를 클릭하세요.

블루호스트 PHP 버전 변경하기 step 2

26 PHP 변경하기 위한 (1)사이트를 체크하고, (2)”PHP Version“을 클릭하세요.

블루호스트 PHP 버전 변경하기 step 3

27 가장 높은 PHP 버전을 선택하세요.

  • 참고로, 보통 PHP 버전을 변경하기 전에 홈페이지 백업 플러그인으로 백업한 뒤 업그레이드 하는 것이 안전합니다.
  • 하지만 현재 첫 단계로 사이트에 정보가 아무것도 없기 때문에 바로 변경해주셔도 되겠습니다.
블루호스트 PHP 버전 변경하기 step 4

28 “Apply” 버튼을 클릭하세요.

블루호스트 PHP 버전 변경하기 step 5

웹 호스팅과 도메인 주소를 어떻게 운영 & 관리하는지도 확인해보세요.


3. 워드프레스 홈페이지 만들기 위한 기본 셋팅하기

4강 - 워드프레스 홈페이지 기본 셋팅하기

이전 단계를 통해서 도메인 주소 & 웹 호스팅 등록을 하고, 이메일 컨펌 및 PHP 변경까지 완료했다면 이제 기본 셋팅을 할 차례입니다.

기본 셋팅으로 어떤 일들을 할지 살펴보면 아래와 같습니다


3-1. 워드프레스 홈페이지 관리자 비밀번호 변경하기

1 우선 관리자 페이지 방문을 위해 블루호스트에서 (1)”My Sites” 클릭하고, (2)”Log in” 버튼을 클릭하세요.

블루호스트 관리자 페이지 접속하기

2 “Users” > “All Users” 를 클릭하세요.

워드프레스 관리자 비밀번호 변경하기

3 생성되어 있는 사용자의 Username을 클릭하세요.

워드프레스 관리자 비밀번호 변경하기

4Generate Password” 버튼을 클릭하세요.

워드프레스 관리자 비밀번호 변경하기

5 (1)원하는 새 비밀번호를 입력 후, (2)”Updated Profile” 버튼을 클릭하세요.

워드프레스 관리자 비밀번호 변경하기

6 아래와 같이 본인 사이트주소.com/wp-admin 검색 후, 업데이트한 계정으로 로그인해서 바로 관리자 페이지로 방문할 수 있습니다.

워드프레스 관리자 비밀번호 변경하기

3-2. 워드프레스 홈페이지 공개 상태로 변경하기

처음엔 사이트가 비공개 상태로 로그인을 해야 사이트를 확인할 수 있습니다.

만약 다른 사람도 볼 수 있도록 만들고 싶거나, 나중에 구글 사이트 등록할 때 공개 상태여야 합니다.

변경하고 싶다면 아래 방법을 참고하시면 되겠습니다.

1 워드프레스 관리자 페이지에서 상단에 (1)”Coming Soon Active” 노랑색 버튼을 클릭 후, (2)”Launch your site” 버튼을 클릭하세요.

  • 만약 Coming Soon Active 버튼이 없다면, 이미 사이트를 공개상태로 변경한 것으로 그대로 운영하시면 되겠습니다.
워드프레스 공개상태로 변경하기

2 아래와 같이 공개 상태로 변경된 것을 확인할 수 있습니다.

워드프레스 공개상태로 변경하기

3-3 워드프레스 홈페이지 관리자 페이지 한국어로 변경하기

1 워드프레스 관리자 페이지에서 “Settings” > “General” 을 클릭하세요.

워드프레스 관리자 한국어로 변경하기

2Site Language” 옆에 나온 “English“를 클릭하세요.

워드프레스 관리자 한국어로 변경하기

3 언어 중에서 “한국어“를 클릭하세요.

워드프레스 관리자 한국어로 변경하기

4 아래 “Save Changes” 버튼을 클릭하세요.

워드프레스 한국어로 변경하기

3-4 워드프레스 홈페이지 고유주소 변경하기

1설정” > “고유주소” 를 클릭하세요.

워드프레스 고유주소 변경하기

2 (1)”글 이름”을 선택하고, (2)”변경 사항 저장” 버튼을 클릭하세요.

워드프레스 고유주소 변경하기

4. 워드프레스 홈페이지 테마 설치 및 수정하기

5강 - 워드프레스 홈페이지 테마 설치 & 수정하기

이제 워드프레스 기본 사이트 & 기본 셋팅까지 마쳤습니다.

이번엔 전문적인 디자인을 지닌 사이트로 만들기 위해서 어떻게 워드프레스 테마를 설치하고 수정할 수 있는지 알아보겠습니다.

진행하게될 순서는 아래와 같습니다.


웹문어가 추천하는 다양한 테마 디자인들도 살펴보고 싶나요?

그렇다면 여기 워드프레스 테마 추천 TOP 10+ 확인해보세요!


4-1 워드프레스 테마 설치하기

1 관리자 페이지에서 “테마 디자인” > “테마” 를 클릭하세요.

아스트라 테마 설치하기 1

2Add New” 버튼을 클릭하세요.

아스트라 테마 설치하기 2

3 검색창에 (1)”astra” 를 검색하고, (2)아스트라 테마에 “설치” 버튼을 클릭하세요.

아스트라 테마 설치하기 3

4 설치가 완료되면, “활성화” 버튼을 클릭하세요,

아스트라 테마 설치하기 4

5 설치가 완료되면, “활성화” 버튼을 클릭하세요,

아스트라 테마 설치하기 4

4-2 워드프레스 테마 템플릿 설치 및 적용하기

1테마 디자인” > “아스트라 옵션“을 클릭하세요.

아스트라 템플릿 설치하기 1

2가져오기 플러그인 설치” 을 클릭하세요.

아스트라 템플릿 설치하기 2

3 페이지 빌더로 “Elementor” 를 클릭하세요.

아스트라 템플릿 설치하기 3

4 상단에 있는 검색칸 왼편에 있는 “All” 을 클릭하세요.

아스트라 템플릿 설치하기4

5 필터 검색 옵션으로 “Free” 를 클릭하세요.

아스트라 템플릿 설치하기5

6 원하는 무료 데모 템플릿을 선택하세요. (저는 Digital Agency로 선택하겠습니다.)

아스트라 템플릿 설치하기6

7 전체 페이지를 살펴보고, 아래 “Import Complete Site” 버튼을 클릭하세요.

아스트라 템플릿 설치하기7

8Import“를 클릭하세요.

아스트라 템플릿 설치하기8

9View Site“를 클릭하세요.

아스트라 템플릿 설치하기9

10 아래와 같이 템플릿 사이트를 성공적으로 적용했습니다.

아스트라 템플릿 설치하기10

4-3 로고 수정하기

1 관리자 페이지에서 “테마 디자인” > “사용자 정의하기“를 클릭하세요.

워드프레스 로고 수정하기 STEP 1

2헤더“를 클릭하세요.

워드프레스 로고 수정하기 STEP 2

3사이트 아이덴티티“를 클릭하세요.

워드프레스 로고 수정하기 STEP 3

4 아래 설명을 참고하시고, 다음 단계를 위해선 (A)”로고 변경“을 클릭하세요.

  • A: 일반 로고 변경을 하기 위한 버튼입니다.
  • B: 해상도 높은 로고를 지원하기 원하면 A보다 더 해상도가 높은 로고로 변경하세요. (일반 로고만 지원하고 싶다면, “레티나 기기에 다른 로고?” 부분에 체크를 해제해주세요.)
  • C: 로고가 너무 크게 나온다면, 로고 폭을 제한해서 맞춰줄 수 있습니다.
워드프레스 로고 수정하기 STEP 4

5파일 선택” 버튼을 클릭하세요.

워드프레스 로고 수정하기 STEP 5

6파일 선택” 버튼을 클릭한 뒤, 원하는 홈페이지 로고를 업로드해서 변경할 수 있습니다.

워드프레스 로고 수정하기 STEP 5

4-4 메뉴 버튼 수정하기

아래 표시되어 있는 메뉴 버튼을 수정하기 위한 가이드입니다.

워드프레스 홈페이지 메뉴 버튼 수정하기

1 관리자 페이지에서 “테마 디자인” > “사용자 정의하기”를 클릭하세요.

워드프레스 홈페이지 메뉴 버튼 수정하기 1단계

2헤더“를 클릭하세요.

워드프레스 홈페이지 메뉴 버튼 수정하기 2단계

3주 메뉴“를 클릭하세요.

워드프레스 홈페이지 메뉴 버튼 수정하기 3단계

4 아래 설명을 참고하세요.

  • A: 클릭하면 “아니오/검색/버튼/텍스트/위젯” 옵션이 나오고, 여기서 버튼을 없애고 싶다면 “아니오”를 클릭하고 유지하고 싶다면 그대로 두면 됩니다.
  • B: 버튼 안에 텍스트를 변경할 수 있습니다.
  • C: 버튼 클릭시 이동되는 페이지 링크를 입력할 수 있습니다.
  • D: 버튼 클릭시 이동되는 페이지가 새 창으로 생성되길 원한다면 체크하시면 됩니다.
워드프레스 홈페이지 메뉴 버튼 수정하기 4단계

4-5 텍스트 수정하기

아래 나와있는 텍스트를 어떻게 수정할 수 있는지 알아보겠습니다.

워드프레스 홈페이지 텍스트 버튼 수정하기

1 “페이지” > “모든 페이지” 를 클릭하세요.

워드프레스 홈페이지 텍스트 버튼 수정하기 1단계

2 Home 에 마우스를 가져다대면 나오는 아래 옵션들 중 “편집하기“를 클릭하세요.

워드프레스 홈페이지 텍스트 버튼 수정하기 2단계

3 수정하기 위한 텍스트가 나온 부분을 클릭하세요.

워드프레스 홈페이지 텍스트 버튼 수정하기 3단계

4 아래 어떻게 텍스트를 수정할 수 있는지 확인하세요.

  • A: 텍스트를 바로 변경할 수 있습니다.
  • B: 링크를 텍스트에 삽입할 수 있습니다.
  • C: 원하는 정렬로 변경할 수 있습니다.
워드프레스 홈페이지 텍스트 버튼 수정하기 4단계

4-6 일반 버튼 수정하기

1 아래 버튼이 나온 부분을 클릭하세요.

워드프레스 홈페이지 버튼 수정하기 1단계

2 (A)버튼 텍스트를 변경할 수 있고, (B)에서 버튼 링크를 입력할 수 있습니다.

워드프레스 홈페이지 버튼 수정하기 2단계

3 삭제하고 싶은 요소가 있다면 아래 버튼을 예제로, 마우스를 가져다대면 나오는 편집 아이콘 오른쪽 마우스 버튼을 클릭하세요.

워드프레스 홈페이지 버튼 삭제하기 1단계

4 나온 옵션 중 “삭제”를 클릭해서 요소를 삭제할 수 있습니다.

워드프레스 홈페이지 버튼 삭제하기 2단계

4-7 배경 수정하기

1 수정하길 원하는 배경 이미지를 클릭하세요.

워드프레스 홈페이지 배경 변경하기 1단계

2 왼쪽 편집창에 있는 탭 중에서 “스타일” 탭을 클릭하세요.

워드프레스 홈페이지 배경 변경하기 2단계

3 배경 이미지가 나온 부분에 클릭하세요.

워드프레스 홈페이지 배경 변경하기 3단계

4 “파일 선택” 버튼을 클릭하세요.

워드프레스 홈페이지 배경 변경하기 4단계

5 상단에 있는 탭 중에서 “Free Images from Pixabay” 를 클릭하세요.

워드프레스 홈페이지 배경 변경하기 5단계

6 검색창에 (1)”business” 를 검색해보면 나오는 (2)이미지를 선택하겠습니다.

워드프레스 홈페이지 배경 변경하기 6단계

7Save & Insert” 버튼을 클릭하세요.

워드프레스 홈페이지 배경 변경하기 7단계

8 편집창 아래 “업데이트” 버튼을 클릭하세요.

워드프레스 홈페이지 배경 변경하기 8단계

4-8 새 섹션 추가하기 (수동)

새로운 섹션을 추가하는 방법으로는 수동으로 직접 드래그앤드롭으로 처음부터 만드는 방법이 있습니다.

그리고 다른 방법으로는 존재하는 템플릿을 단순히 가져와서 수정만 해주는 방법이 있습니다. 여기서 우선 수동으로 하는 방법을 알아보겠습니다.

1 편집창 아래 “업데이트” 버튼을 클릭하세요.

워드프레스 새 섹션 추가하기 1단계

2 “+” 아이콘을 클릭하세요.

워드프레스 새 섹션 추가하기 2단계

3 원하는 레이아웃을 클릭하세요.

워드프레스 새 섹션 추가하기 3단계

4 추가된 새 섹션 위에 가운데 있는 점점점 아이콘을 클릭하세요.

워드프레스 새 섹션 추가하기 4단계

5 (1)고급 탭을 클릭하고, (2)바깥쪽 여백에 원하는만큼 입력하고, (3)여백이 변경된 것을 확인하세요.

워드프레스 새 섹션 추가하기 5단계

6 뒤로 가기 위해서 왼쪽 상단에 메뉴 버튼을 클릭하세요.

워드프레스 새 섹션 추가하기 6단계

7 뒤로 가기 아이콘을 클릭하세요.

워드프레스 새 섹션 추가하기 7단계

8 아래와 같이 원하는 요소들을 자유롭게 드래그앤드롭으로 옮겨보세요.

워드프레스 새 섹션 추가하기 8단계

9 아래와 같이 새로 추가된 요소들을 확인할 수 있습니다.

워드프레스 새 섹션 추가하기 9단계

4-9 새 섹션 추가하기 (템플릿)

1 수동과 다르게 플러스 아이콘이 아닌 가운데 “폴더” 아이콘을 클릭하세요.

워드프레스 새 섹션 템플릿으로 추가하기 1단계

2 상단에 “블럭“을 클릭하세요.

워드프레스 새 섹션 템플릿으로 추가하기 2단계

3 블럭에서 추가하길 원하는 섹션을 선택해서 클릭하세요.

워드프레스 새 섹션 템플릿으로 추가하기 3단계

4 “삽입” 버튼을 클릭하세요.

워드프레스 새 섹션 템플릿으로 추가하기 4단계

5 엘리멘토 라이브러리를 사용하기 위해 무료 계정을 만드려면 “시작하기” 버튼을 클릭하세요.

워드프레스 새 섹션 템플릿으로 추가하기 5단계

6Create an Account“를 클릭하세요.

워드프레스 새 섹션 템플릿으로 추가하기 6단계

6 (1)이메일 주소, (2)비밀번호를 입력 후, (3)”CREATE ACCOUNT” 버튼을 클릭하세요.

워드프레스 새 섹션 템플릿으로 추가하기 7단계

7 “CONNECT” 버튼을 클릭하세요.

워드프레스 새 섹션 템플릿으로 추가하기 8단계

8 아래 보시는 것과 같이 선택했던 템플릿 블록이 추가된 것을 확인할 수 있습니다.

워드프레스 새 섹션 템플릿으로 추가하기 9단계

4-10 모바일 화면 수정하기

요즘엔 PC보다 모바일 접속이 더 많아지는 추세로, 모바일 화면에서도 사이트가 잘 나올 수 있도록 변경해줄 필요가 있습니다.

아래 모바일 화면에서 어떻게 수정할 수 있는지 방법을 공유했으니 잘 참고하시길 바랍니다.

1 편집창에서 하단에 있는 모니터 아이콘을 클릭하세요.

워드프레스 모바일 버전으로 수정하기 1단계

2 나온 옵션 중에서 “모바일“을 클릭하세요.

워드프레스 모바일 버전으로 수정하기 2단계

3 모바일 화면에서 수정하고자 하는 부분을 클릭하세요.

워드프레스 모바일 버전으로 수정하기 3단계

4 편집창에 모바일 아이콘 표시가 되어있는 옵션만 모바일 화면에서 따로 적용할 수 있습니다.

  • 모바일 아이콘 표시가 있을 때 옵션을 수정하면 모바일 화면에서만 적용됩니다.
워드프레스 모바일 버전으로 수정하기 4단계

4- 11 푸터 수정하기

푸터는 웹사이트 하단에 위치한 부분이고, 이 부분은 수정하는 곳이 다른 곳에 있기 때문에 잘 주의해서 따라하시길 바랍니다!

워드프레스 홈페이지 푸터 수정하기

1테마 디자인” > “Header Footer & Blocks” 를 클릭하세요.

워드프레스 홈페이지 푸터 수정하기 1단계

2Footer“에 마우스를 가져다 놓으면 나오는 “편집하기” 옵션을 클릭하세요.

워드프레스 홈페이지 푸터 수정하기 2단계

3 이렇게 홈페이지를 수정하듯이 편집창이 나왔고, 자유롭게 수정하시고 업데이트하시면 되겠습니다.

워드프레스 홈페이지 푸터 수정하기 3단계

현재까지 완성한 홈페이지를 우선 구글 검색 엔진에 등록 후 다음 단계를 진행하셔도 됩니다.


5. 워드프레스 홈페이지 플러그인 설치 및 셋팅하기

6강 - 워드프레스 플러그인 설치 & 셋팅하기

워드프레스 플러그인은 홈페이지의 기능을 담당하는 부분입니다.

이전에는 어떤 기능을 추가하고자 할 땐 개발자의 도움이 필요했고, 비용이 들었습니다.

하지만 이제는 플러그인 개념을 통해 단순히 클릭만으로 설치와 셋팅이 가능하여 어떤 기능이든 직접 추가해볼 수 있습니다.

여기서는 홈페이지 최적화, 백업등과 관련된 플러그인을 중심으로 설치 셋팅을 해보겠습니다.


이 외에도 다른 유용한 워드프레스 플러그인들이 궁금한가요?

그럼 웹문어가 추천하는 워드프레스 플러그인 추천 TOP 10+ 확인해보세요!


5-1 홈페이지 만들기 기본: SEO 플러그인 – Yoast SEO

홈페이지 SEO (검색 엔진 최적화) 를 위한 플러그인입니다.

검색 엔진 최적화는 홈페이지가 구글 검색에서 검색했을 때 노출될 수 있도록 도움을 주는 플러그인입니다.

1 관리자 페이지에서 “플러그인” > “설치된 플러그인“을 클릭하세요.

Yoast 플러그인 설치하기

2새로 추가” 버튼을 클릭하세요.

Yoast 플러그인 설치하기 2

3 검색창에 (1)”Yoast SEO”를 검색하고, (2)”지금 설치” 버튼을 클릭해서 설치해주세요.

Yoast 플러그인 설치하기 3

4 설치가 완료되면 “활성화” 버튼을 클릭해서 활성화해주세요..

Yoast 플러그인 설치하기 4

5” > “새로 추가” 버튼을 클릭하세요.

  • Yoast SEO 플러그인이 새 글/새 페이지를 작성할 때 어떻게 활용할 수 있는지 보여드리려고 합니다.
Yoast 플러그인 설치하기 5

6 글 하단에 추가된 “Yoast SEO”를 클릭하세요.

Yoast 플러그인 설치하기 6

7 아래 설명을 참고하세요.

  • (A): 타겟키워드를 넣는 곳 //타겟키워드란, 해당 키워드로 검색했을 때 자신의 사이트가 첫 페이지에 뜨길 희망하는 키워드.
  • (B): 구글 검색 결과에 어떻게 나올지 미리 확인하고, 아래 조각 편집을 클릭해서 설명을 수정할 수 있다.
  • (C): (A) 타겟 키워드를 입력했을 때 자동으로 분석해서, 검색 엔진 최적화를 위해 어떤 부분을 수정하면 좋을지 알려준다.
Yoast 플러그인 설치하기 7

8 아래 예제로 입력한 것으로 참고하세요.

Yoast 플러그인 설치하기 8

5-2 홈페이지 최적화 캐시 플러그인 – WP Super Cache

대표적으로 인기있는 캐시 플러그인 중 하나로, 사이트 최적화를 위해서 자주 사용하는 플러그인 중 하나입니다.

1 플러그인 추가에서 (1)”WP Super Cache“를 검색하고, (2)”지금 설치” 버튼을 클릭하세요.

wp super cache 플러그인 설치하기 1

2Dismiss“를 클릭하세요.

  • 아래 표시한 문구를 살펴보면, 처음으로 설치했으면 단순히 무시해도 된다고 나와있습니다.
WP SUPER CACHE 플러그인 설치하기 3

4설정” > “WP Super Cache”를 클릭하세요.

WP SUPER CACHE 플러그인 설치하기 4

5 (1)”Caching On”에 체크하고, (2)”Update Status” 버튼을 클릭하세요.

WP SUPER CACHE 플러그인 설치하기 5

6 상단에 나온 탭 중에서 “Advanced“를 클릭하세요.

WP SUPER CACHE 플러그인 설치하기 6

7 아래 체크한대로 (A), (B), (C)에 체크하고, (D)”Update Status” 버튼을 클릭하세요.

WP SUPER CACHE 플러그인 설치하기 7

5-3 홈페이지 최적화 플러그인 – Autoptimize

홈페이지를 구성하는 파일들을 모두 압축해서 사이트를 최적화하여 속도를 높이는 플러그인입니다.

1 플러그인 추가를 위한 검색창에서 (1)”Autoptimize“를 검색하고, (2)”지금 설치” 를 클릭하세요.

Autoptimize 플러그인 설치하기 1

2 설치가 완료되면 아래와 같이 “활성화” 버튼을 클릭하세요.

Autoptimize 플러그인 설치하기 2

3설정” > “Autoptimize” 를 클릭하세요.

Autoptimize 플러그인 설치하기3

4 아래와 같이 (A), (B), (C)에 체크한 뒤, (D)”Save Changes and Empty Cache” 버튼을 클릭하세요.

Autoptimize 플러그인 설치하기 4

5-4 홈페이지 백업 플러그인 – UpdraftPlus

홈페이지 백업을 위한 플러그인으로, 가벼운 사이트를 쉽고 빠르게 백업/복원하기 편리한 플러그인입니다.

1 플러그인 추가를 위한 검색창에서 (1)”UpdraftPlus“를 검색하고, (2)”지금 설치” 버튼을 클릭하세요.

Updraftplus 워드프레스 백업 플러그인 설치하기 1

2 설치가 완료되면 “활성화” 버튼을 클릭하세요.

Updraftplus 워드프레스 백업 플러그인 설치하기2

3설정” > “UpdraftPlus Backups” 를 클릭하세요.

Updraftplus 워드프레스 백업 플러그인 설치하기 3

4Backup Now” 버튼을 클릭하세요.

Updraftplus 워드프레스 백업 플러그인 설치하기 4

5 “Backup Now” 버튼을 클릭하세요.

Updraftplus 워드프레스 백업 플러그인 설치하기5

6 아래 백업 파일이 생성된 것을 확인할 수 있습니다

Updraftplus 워드프레스 백업 플러그인 설치하기 6

복원하는 방법

7 복원을 하시려면 아래와 같이 “Restore” 버튼을 클릭하세요.

Updraftplus 워드프레스 백업 플러그인 설치하기 7

8 (1)복원하려는 요소들을 선택하고, (2)”Next” 버튼을 클릭하세요.

Updraftplus 워드프레스 백업 플러그인 설치하기 8

9 “Restore” 버튼을 클릭하세요.

Updraftplus 워드프레스 백업 플러그인 설치하기 9

10 “Return to UpdraftPlus configuration” 버튼을 클릭하세요.

Updraftplus 워드프레스 백업 플러그인 설치하기 10

11 “Delete Old Directories” 버튼을 클릭하세요.

  • 복원을 하면서 이전에 존재하던 파일들이 그대로 남아있기 때문에 제거하는 작업입니다.
Updraftplus 워드프레스 백업 플러그인 설치하기 11

12 아래와 같이 불필요한 파일들이 모두 제거된 것을 확인할 수 있습니다.

Updraftplus 워드프레스 백업 플러그인 설치하기 12

5-5 홈페이지 코드 삽입 플러그인 – Insert Headers and Footers

구글에 사이트 등록을 하기 위해 사이트 증명을 하거나 구글 애드센스 광고를 위한 사이트 증명을 해야될 때가 있습니다.

이 때 사이트 증명을 보통 Header 부분에 코드를 삽입을 하게되고 이 플러그인을 이용하면 편리하게 코드를 삽입할 수 있습니다.

1 플러그인 추가를 위한 검색창에 (1)”Insert headers and footers“를 검색하고, (2)”지금 설치” 버튼을 클릭하세요.

insert headers and footers 플러그인 설치하기 1

2 설치가 완료되면, “활성화” 버튼을 클릭하세요.

insert headers and footers 플러그인 설치하기 2

3플러그인” > “Insert Headers and Footers“를 클릭하세요.

insert headers and footers 플러그인 설치하기 3

4 아래 보시는 것과 같이 나중에 코드를 삽입해서 사이트 증명을 해야 될 때, 아래 빈 칸에 넣고 저장하시면 됩니다.

insert headers and footers 플러그인 설치하기 4

지금까지 그대로 따라오신다고 수고 많으셨습니다!

이제 여러분은 개인 워드프레스 홈페이지를 만들기 위해서 아래 사항들을 모두 배웠습니다.

  • 시작할 때 웹 호스팅 & 도메인 주소를 어떻게 등록하는지
  • 워드프레스 홈페이지 기본 셋팅을 어떻게 하는지
  • 전문적인 디자인을 지닌 사이트를 위해 테마를 어떻게 설치 및 수정하는지
  • 그리고 기능을 추가하기 위해 플러그인을 어떻게 설치하고 셋팅하는지

그렇다고 홈페이지와 완전하게 모든 것을 배운 것은 아니지만, 여기까지만 잘 따라서 응용하시면 기본 사이트는 혼자서도 충분히 만드실 수 있을 것입니다.

이제 더 나아가 완성된 홈페이지를 기반으로 어떻게 자신의 홈페이지를 구글에 등록하고, 홈페이지 홍보를 할 수 있는지도 확인해보시길 바랍니다!

Leave a Comment

error: 무단 복제와 배포를 금지합니다.