따라하며 제작하는 워드프레스
홈페이지 만들기 27단계
초보자를 위해 따라하며 제작할 수 있는 홈페이지 만들기 가이드입니다. 홈페이지를 만들기 위해 처음에 어떻게 시작, 편집 그리고 운영 방법까지 단계별로 모두 배울 수 있습니다!
시작하는 방법
- 유튜브 영상을 보면서 아래 무료 가이드를 그대로 따라하면 됩니다.
배울 내용
- 홈페이지 제작을 위해 필요한 기초 개념
- 사이트 제작을 위한 도메인 & 호스팅 등록 방법
- 워드프레스 사이트 설치하는 방법
- 워드프레스 관리자 페이지 활용하는 방법
- 워드프레스 테마 설치 및 템플릿 적용하는 방법
- 워드프레스 테마 편집하는 방법
- 새 페이지 만들기 및 메뉴 편집하는 방법
- 워드프레스 플러그인 설치 및 활용하는 방법
강좌 대상
- 혼자서 홈페이지를 직접 제작해보고 싶은 사람
- 코딩 능력없이 쉽고 빠르게 제작하고 싶은 사람
- 워드프레스 기초에 대해 배워보고 싶은 사람
- 비즈니스 홈페이지부터 포트폴리오 또는 랜딩페이지 사이트등 다양한 종류의 전문적인 홈페이지를 제작해보고 싶은 사람
강좌 내용
- STEP 1 - 등록가능한 도메인 주소 확인하기
- STEP 2 - 도메인 주소 및 웹호스팅 등록하기
- STEP 3 - 이메일 주소 컨펌하기
- STEP 4 - 도메인 주소에 https 적용하기
- STEP 5 - 워드프레스 사이트 설치하기
- STEP 6 - 관리자 페이지 로그인 및 살펴보기
- STEP 7 - 워드프레스 관리자 비밀번호 변경하기
- STEP 8 - 워드프레스 사이트 고유주소 변경하기
- STEP 9 - 사이트 제목 및 태그라인 변경하기
- STEP 10 - 워드프레스 테마 설치하기
- STEP 11 - 테마 템플릿관련 플러그인 설치하기
- STEP 12- 테마 템플릿 다운로드 및 적용하기
- STEP 13 - 글자/색상/버튼 편집하기
- STEP 14 - 헤더 편집하기 (로고, 아이콘)
- STEP 15 - 푸터 편집하기
- STEP 16 - 페이지 모바일 버전에서 편집하기
- STEP 17 - 페이지 섹션 레이아웃 편집하기
- STEP 18 - 페이지 컬럼 편집하기
- STEP 19 - 페이지 요소 편집하기
- STEP 20 - 페이지 텍스트 편집하기
- STEP 21 - 페이지 버튼 편집하기
- STEP 22 - 페이지 이미지 및 배경 편집하기
- STEP 23 - 페이지 새 요소 추가하기
- STEP 24 - 새 페이지 만들기 (매뉴얼, 템플릿)
- STEP 25 - 메뉴 편집하기
- STEP 26 - 워드프레스 플러그인 설치하기
- STEP 27 - 사이트 점검하기
STEP 1
등록가능한 도메인 주소 확인하기
도메인 주소를 등록하기 전에 우선 등록 가능한지 확인을 해야합니다. 아래 등록하길 원하는 도메인 주소를 입력해서 확인해보세요.
체크리스트
참고하기
- 도메인 주소는 .com 으로 끝나는 형태가 가장 보편적입니다.
STEP 2
도메인 주소 및 웹 호스팅 등록하기
홈페이지를 만들기 위해선 우선 도메인 주소와 웹 호스팅 등록을 해야합니다. 도메인 주소는 guidebean.com과 같은 사이트 주소이고, 웹 호스팅은 사이트를 온라인 상에서 24/7 항상 운영하기 위해 필요한 웹 서버를 빌리는 것입니다.
체크리스트
참고하기
- 도메인 주소와 웹 호스팅은 홈페이지를 제작하기 위해 가장 기본적으로 필요한 필수요소입니다.
- 이 가이드는 Fastcomet 제휴마케팅 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다.
STEP 3
이메일 주소 컨펌하기
도메인 주소를 등록 후, 연락처 확인을 위해 등록한 이메일 주소로 메일을 받게 됩니다. 이 때 15일이내로 이메일을 통해 확인을 해주지 않는다면 사이트가 비활성화되어 접속이 안될 수 있으니 유의하시기 바랍니다.
체크리스트
참고하기
- 이메일을 찾을 수 없다면, 스팸함도 함께 체크해보시기 바랍니다.
- 사이트가 비활성화가 되더라도, 이메일 확인을 하면 바로 활성화가 됩니다.
STEP 4
도메인 주소에 무료 https 적용하기
사이트를 운영할 때 http://example.com 이 아닌 https://example.com 과 같이 https 접속이 가능해야 사람들이 자신의 사이트에 원활하게 방문할 수 있습니다. 이 단계에서는 Let's Encrypt SSL 을 기반으로 어떻게 쉽고 빠르게 자신의 사이트에 https 를 적용할 수 있는지 알 수 있습니다.
체크리스트
참고하기
- 여기서 적용하는 https 적용 방법은 자신의 사이트에 평생동안 무료로 적용할 수 있습니다.
STEP 5
워드프레스 기본 사이트 설치하기
본격적으로 홈페이지를 만들기 위해 우선 워드프레스 기본 사이트를 설치해야 합니다. 기본 사이트는 아래와 같이 기본 테마가 적용된 사이트입니다.
체크리스트
STEP 6
관리자 페이지 로그인 및 살펴보기
워드프레스 사이트를 컨트롤하는 곳은 워드프레스 관리자 페이지입니다. 이 단계에서 자신의 워드프레스 관리자 페이지에 어떻게 접속하고 어떤 기능들이 있는지 살펴볼 것입니다.
체크리스트
참고하기
- 관리자 페이지에 접속하는 방법은 example.com/wp-admin 같이 자신의 도메인 주소 끝에 /wp-admin 을 더한 뒤 주소 창에 입력하면 접속할 수 있습니다.
- 기본 테마가 적용된 사이트를 확인할 때, 여전히 Fastcomet 화면이 나온다면 새로고침 후 다시 확인해보시기 바랍니다.
STEP 7
워드프레스 관리자 비밀번호 변경하기
워드프레스 편집을 위한 관리자 페이지 운영은 기본입니다. 여기서 가장 기본 중 하나인 워드프레스 관리자 비밀번호를 변경하는 방법을 알아보도록 하겠습니다.
체크리스트
참고하기
- 만약 관리자 비밀번호를 잊어버린 경우, 찾는 방법이 궁금하다면 가이드빈 자주묻는질문 페이지를 확인해보세요!
STEP 8
워드프레스 사이트 고유주소 변경하기
워드프레스 사이트 고유주소는 쉽게 생각하면 URL 구조를 설정하는 것입니다. 예를 들어 일반적으로 guidebean.com/?p=123 으로 설정되어 있다면, 글 이름 형태인 guideebean.com/예제 글/ 방식으로 변경할 수 있습니다.
체크리스트
참고하기
- 고유주소가 글 이름 형태는 SEO 측면에서도 결과적으로 긍정적인 영향을 주는 요소입니다.
STEP 9
사이트 제목 및 태그라인 변경하기
사이트 제목과 태그라인 중에서 사이트 제목은 검색엔진에서 노출시 끝에 나오는 사이트 제목으로 사용되고, 태그라인은 메인 홈페이지 노출시 타이틀 태그로 사용되므로 작성해주는 것이 좋습니다.
체크리스트
참고하기
- 사이트 태그라인은 보통 사이트를 한 줄로 간략하게 설명한다고 생각하고 작성하시면 되겠습니다.
STEP 10
워드프레스 테마 설치하기
워드프레스 테마는 홈페이지의 디자인 역할을 한다고 생각해볼 수 있습니다. 이 단계에서는 인기있는 무료 테마 중 Astra 테마를 설치해볼 것입니다.
체크리스트
참고하기
- Astra 테마를 선택하는 이유는 비교적 가볍고, 초보자들이 목적에 따라 선택할만한 무료 템플릿이 다양하고, 테마를 편집할 수 있는 편집도구가 잘 구성되어 있기 떄문입니다.
- 다른 테마를 설치하고 싶다면 상관은 없지만, 편집하는 방식에는 테마에 따라 다소 차이가 있을 수 있음을 알려드립니다.
STEP 11
테마 템플릿관련 플러그인 설치하기
테마에 따라서 사이트를 쉽고 빠르게 제작할 수 있도록 제공하는 사이트 템플릿이 있습니다. 테마에서 제공하는 템플릿을 사용하려면 플러그인이 필요하고, 이 단계에서는 관련 플러그인을 간단하게 설치해보겠습니다.
체크리스트
STEP 12
테마 템플릿 다운로드 및 적용하기
테마에서 제공하는 템플릿을 다운받아서 적용하면, 편집만 하면 되기 때문에 홈페이지를 가장 쉽고 빠르게 제작할 수 있는 방법입니다. 아래 Astra 테마에서 제공하는 여러 템플릿을 클릭해서 미리 살펴보세요.
체크리스트
참고하기
- 여기서 원하는 디자인의 테마 템플릿을 미리 살펴보고, 적용할 때 테마 템플릿 이름을 기반으로 검색하고 적용하면 되겠습니다.
STEP 13
글자 / 색상 / 버튼 편집하기
본격적으로 워드프레스 테마 디자인 편집에서 가장 기본적인 글자, 색상, 버튼을 편집하는 방법을 알아보겠습니다.
체크리스트
참고하기
- 글자, 색상, 버튼을 편집하게 되는 글로벌 섹션은 사이트 전체 영향을 주게 됩니다. 그러므로 각 페이지마다 따로 수정하지 않고, 글로벌 섹션에서만 편집하고 관리하면 일관성있는 사이트 디자인을 유지할 수 있습니다.
STEP 14
헤더 편집하기 (로고, 아이콘)
홈페이지 가장 상단에 있는 헤더 부분을 편집해볼 것입니다. 그리고 여기에는 헤더에 속한 로고를 수정하고, 동시에 아이콘 또한 수정해보도록 하겠습니다.
STEP 15
푸터 편집하기
이 단계에서는 사이트 가장 하단에 속하는 푸터 부분을 편집해보도록 하겠습니다. 자신이 원하는 스타일의 디자인이 있다면 자유롭게 수정해보시면 되겠습니다.
체크리스트
STEP 16
페이지 모바일 버전에서 편집하기
이제 페이지를 자세하게 편집할 예정입니다. 편집을 시작하기 전에 기본적으로 화면이 다른 PC/모바일 버전에서 어떻게 각각 수정할 수 있는지 알아보도록 하겠습니다.
체크리스트
참고하기
- 모든 요소가 모바일 버전으로 수정할 수 있는 것이 아니고, 편집 요소 옆에 데스크톱, 태블릿, 모바일 아이콘이 나와있다면 기기별로 수정가능한 요소입니다.
STEP 17
페이지 섹션 레이아웃 편집하기
페이지 섹션 레이아웃은 페이지를 구성할 때 가장 기본중의 기본 요소로 생각할 수 있습니다. 홈페이지를 만들 때 페이지 섹션 추가 > 페이지 컬럼 편집 > 원하는 페이지 요소 추가 순서로 운영이 가능합니다.
체크리스트
STEP 18
페이지 컬럼 편집하기
페이지 컬럼은 페이지 섹션을 생성하고 배치할 수 있는 요소입니다. 페이지 컬럼은 이전 단계에서 페이지 섹션을 추가하고, 섹션 안에 추가할 수 있는 요소로 컬럼 개수는 1개에서 4개 이상까지도 설정해서 추가할 수 있습니다.
체크리스트
STEP 19
페이지 요소 편집하기
페이지 요소는 페이지를 구성하는 텍스트부터, 이미지 그리고 버튼등에 해당하고 이를 어떻게 수정할 수 있는지 알아보도록 하겠습니다.
체크리스트
STEP 20
페이지 텍스트 편집하기
페이지를 구성하는 다양한 요소 중 가장 기본적인 텍스트 편집하는 방법을 알아보도록 할 것입니다.
체크리스트
STEP 21
페이지 버튼 편집하기
페이지 버튼을 구성하는 버튼 내 텍스트, 사이즈, 색상 그리고 클릭시 이동되는 URL 주소를 설정하는 방법등을 모두 알아볼 것입니다.
체크리스트
STEP 23
페이지 새 요소 추가하기
페이지 편집할 수 있는 요소들을 살펴봤다면 이번엔 어떻게 페이지에 새 요소를 추가할 수 있는지 매뉴얼 방법과 템플릿을 이용한 방법을 모두 살펴보겠습니다.
체크리스트
STEP 24
새 페이지 만들기 (매뉴얼, 템플릿)
새 페이지를 만드는 방법을 알아볼 것입니다. 이 단계에서는 빈 페이지에서 매뉴얼로 만드는 방법과 템플릿을 이용해 쉽고 빠르게 만드는 방법을 살펴보겠습니다.
체크리스트
참고하기
- 템플릿을 이용해서 새 페이지를 만들 때 엘리멘터에서 계정 로그인을 요구하게 됩니다. 이 때 무료계정을 만들어서 로그인하면 가능하다는점 알려드립니다.
STEP 25
메뉴 편집하기
이 단계에서는 메뉴를 어떻게 새로 추가하고, 순서를 변경하고 그리고 제거할 수 있는지 편집 방법을 모두 살펴보겠습니다.
체크리스트
STEP 26
워드프레스 플러그인 설치하기
워드프레스 기능을 담당하는 플러그인 어떻게 설치하는지 살펴보겠습니다.
체크리스트
STEP 27
사이트 점검하기
마지막 단계로 제작한 홈페이지가 사람들이 문제없이 사용할 수 있는지 사이트를 점검해보도록 하겠습니다.
체크리스트
참고하기
- PC 버전에서 텍스트, 이미지등 모든 요소가 문제 없이 잘 나오는지 확인하기
- 모바일 버전에서 텍스트, 이미지등 모든 요소가 문제 없이 잘 나오는지 확인하기
- 버튼, 메뉴, 링크등 클릭할 수 있는 요소들을 모두 확인하고 문제없이 실행되는지 확인하기
축하합니다!
홈페이지 만들기 가이드를 모두 완료했습니다!
