왕초보자를 위한
워드프레스 홈페이지 만들기
왕초보자들도 쉽게 따라할 수 있도록 제작된 홈페이지 만들기 고급 가이드입니다. 홈페이지 제작 기초인 도메인 주소와 호스팅 등록 방법부터 워드프레스를 설치하고 어떻게 단계별로 편집해 나갈 수 있는지 자세하게 담았습니다.
이 가이드를 모두 따라하며 진행한다면 어떻게 자신만의 사이트를 처음부터 끝까지 제작할 수 있는지 배우게 될 것입니다. 사이트 제작 스킬을 습득하고 싶다면 바로 확인해보세요.
* 이 가이드는 chemicloud 제휴마케팅 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다. 이는 추가 비용을 발생시키지 않으며, 높은 품질의 가이드 영상을 무료로 제공하는데 큰 도움이 됩니다. 감사합니다.
시작하는 방법
- 유튜브 영상을 보면서 아래 무료 가이드를 그대로 따라하면 됩니다.
등록가능한 도메인 주소 확인하기
도메인 주소는 웹사이트의 “집 주소”와 같습니다. 이미 많은 도메인 주소가 등록되어 있으므로, 원하는 도메인이 사용 가능한지 먼저 확인해야 합니다.
아래에 등록을 원하는 도메인 주소를 입력하고, 사용 가능 여부를 확인해보세요.
체크리스트
참고하기
- 도메인 주소는 .com 으로 끝나는 형태가 가장 신뢰받고 널리 사용됩니다.
- 도메인 주소는 짧고 기억하기 쉬운 것이 좋습니다.
STEP 2
도메인 주소 및 호스팅 등록하기
STEP 1에서 확인한 도메인 주소와 홈페이지 제작에 꼭 필요한 호스팅 서버를 등록할 것입니다. 이 단계에서 구체적으로 호스팅이 무엇이고, 도메인 주소와 함께 어떻게 등록할 수 있는지 확인해보세요.
체크리스트
STEP 3
워드프레스 설치하기
이 단계에서는 워드프레스를 설치할 것입니다. 이에 앞서 관리 도구인 cPanel의 기본 설정을 변경하고, 도메인 주소에 SSL과 https 리다이렉트 설정하는 방법을 살펴볼 것입니다. 이후 워드프레스를 설치하고 완성된 기본 사이트를 확인할 수 있습니다.
체크리스트
참고하기
- 영상과 동일하게 ChemiCloud 가입시 도메인 주소를 함께 등록했다면 도메인 주소에 자동으로 SSL이 적용됩니다.
STEP 4
워드프레스 테마 설치 및 템플릿 적용하기
워드프레스 사이트에 전문적인 디자인 템플릿을 적용할 차례입니다! 이 단계에서 가장 인기있는 무료 테마 중 하나를 통해 설치하고 템플릿까지 적용할 것입니다.
체크리스트
참고하기
- 아스트라에서 "스타터 템플릿" 클릭시 응답이 없다면? 별도로 "Starter Templates" 이라는 새 플러그인을 설치 및 활성화하면 동일하게 진행할 수 있습니다.
- 다른 템플릿으로 새로 변경하고 싶다면? 아스트라 -> 스타터 템플릿에 다시 방문해서 영상과 동일하게 다시 진행해서 적용할 수 있습니다.
- 워드프레스 테마는 사이트의 디자인과 구조를 결정하며, 선택한 테마에 따라 제공되는 디자인 옵션과 사용자 설정 기능이 달라집니다.
STEP 5
사이트 구조 이해 및 기본 스타일 설정하기
헤더, 푸터 그리고 페이지로 나누어져 있는 기본적인 사이트 구조를 이해하고 사이트 전체에 영향을 미치는 스타일을 어떻게 설정할 수 있는지 살펴보세요.
체크리스트
STEP 6
헤더 편집하기
사이트의 상단 메뉴를 구성하고 디자인하는 방법을 다룹니다. 헤더 빌더의 구조를 이해하고, 투명 헤더를 활성화하거나 비활성화하는 방법을 배우며, 로고, 아이콘, 메뉴 스타일을 편집하고 모바일 메뉴까지 살펴볼 것입니다.
체크리스트
STEP 7
푸터 편집하기
이 단계에서는 사이트 하단 영역을 설정하는 방법을 설명합니다. 푸터의 레이아웃을 구성하고, 배경 색상, 텍스트 스타일과 같은 디자인 요소를 편집하며, 카피라이트 문구를 사용자 맞춤형으로 설정하는 과정을 다룹니다.
체크리스트
STEP 9
About 페이지 편집하기
이 단계에서는 독창적이고 깔끔한 디자인을 구현하는 방법을 배웁니다. 마이너스 여백을 활용해 레이아웃을 조정하고, 분리자와 테두리 디자인으로 섹션을 시각적으로 구분합니다. 아코디언으로 정보를 간결히 정리하고, 카운터 요소를 사용해 성과나 데이터를 강조합니다. 다른 페이지의 요소를 복사해 작업 효율도 높일 수 있습니다.
체크리스트
STEP 10
Contact 페이지 편집 및 문의 폼 세팅하기
Contact 페이지 디자인 편집 뿐만 아니라 문의하기 폼 디자인 및 세팅하는 방법까지 다룹니다. Gmail API와 연동하여 본인의 지메일 계정으로 문의 메일을 받을 수 있도록 설정할 것입니다.
체크리스트
참고하기
- [01:25:05] 구간에서 OAuth 동의화면에 방문해서 '앱 게시' 버튼을 클릭하는 화면이 새로 업데이트 되었습니다. 아래 새 방법을 확인하세요.
STEP 11
새 페이지 만들고 편집하기 - Work
이번 단계에서는 새 페이지를 만들고 편집할 것입니다. 기본적인 컨테이너, 이미지, 헤딩, 텍스트 편집기, 아이콘 목록 요소 뿐만 아니라 갤러리 요소를 통해 포트폴리오 페이지를 만들 것입니다. 완료 후 모바일 버전에서도 어떻게 편집할 수 있는지 살펴보고 마지막으로 메뉴에 새 페이지를 추가할 것입니다.
체크리스트
STEP 12
플러그인 추가하기
이번 단계에서는 워드프레스에서 플러그인이 어떤 역할을 하는지 이해하기 위해 간단한 플러그인을 설치하고 살펴볼 것입니다.
체크리스트
STEP 13
사이트 점검하기
마지막 단계로 사이트가 제대로 작동하는지 확인하는 단계입니다. PC 버전과 모바일 버전에서 레이아웃에 문제는 없는지, 디자인 요소가 의도했던대로 제대로 배치되어 있는지 확인하시기 바랍니다. 또한 클릭할 수 있는 메뉴, 링크, 버튼등을 모두 클릭해보고 원하는 결과를 보여주는지도 다시 확인하시기 바랍니다.
체크리스트
축하합니다!
홈페이지 만들기 가이드를 모두 완료했습니다!
