2023년에 처음부터 웹사이트를 만드는 방법(자세한 자습서)

온라인 존재는 다양한 형태를 알고 있습니다. 그들 중 하나는 자신의 웹 사이트를 갖는 것입니다. 비즈니스용이든 개인 브랜드용이든 웹사이트가 있으면 온라인 인지도를 높이는 데 도움이 될 수 있습니다. 가능한 한 빨리 웹사이트를 구축하고 실행할 수 있도록 처음부터 웹사이트를 만드는 방법을 보여드리겠습니다. 필요한 모든 필수 단계를 제공합니다! 총 13단계를 거칩니다. 이 게시물은 자신의 웹사이트 구축을 계획할 때 명확한 실행 계획을 세우는 데 도움이 될 것입니다.

시작합시다.

코딩 방법을 알아야 합니까?

코딩 방법을 아는 것은 웹 사이트에 올 때 필수적이었습니다. 기본 웹 개발에 대한 배경 지식이 있는 것이 좋지만 필수는 아닙니다. 시중에 나와 있는 많은 도구는 시각적 경험을 구축하는 웹 사이트를 만드는 데 중점을 둡니다. 이것이 이 포스트에서 우리가 취할 접근법입니다. 이 튜토리얼을 따라 처음부터 웹 사이트를 만드는 데 기술 전문 지식이 필요하지 않습니다.

1단계: CMS 또는 웹사이트 빌더?

자신의 웹 사이트를 구축하기로 결정할 때 선택할 수 있는 두 가지 주요 옵션은 다음과 같습니다.

1. 콘텐츠 관리 시스템
2. 웹사이트 빌더

WordPress와 같은 콘텐츠 관리 시스템을 사용하면 호스팅을 포함하여 웹사이트의 모든 측면을 제어할 수 있습니다. 무료인 경우도 많습니다. 이 두 옵션의 조합으로 콘텐츠 관리 시스템이 가장 인기 있는 옵션이 되었습니다.

반면에 웹 사이트 빌더는 귀하를 호스팅 플랫폼에 고정시킵니다. 제어할 수 있는 방법이 적고 종종 웹사이트 빌더에 매달리므로 소프트웨어에 실망하면 "고착"될 수 있습니다.

우리의 선택: 이 실용적인 자습서에서는 WordPress.org를 선택합니다. 무료이고 합리적인 학습 곡선이 있으며 웹사이트에 생명을 불어넣을 수 있는 다양한 옵션이 있습니다.

2단계: 호스팅 제공업체 선택

호스팅 공급자를 선택하는 것은 웹 사이트를 만들 때 내려야 하는 다음 중요한 결정입니다. 호스팅 계획이 많아 나무만 보고 숲을 보기 어려울 수 있습니다. 가능한 한 쉽게 배치하도록 노력하겠습니다.

호스팅 유형

호스팅 옵션은 웹사이트 트래픽에 따라 다릅니다. 트래픽이 적은 경우 공유 호스팅이 작동하지만 스토리지와 리소스를 공유하게 됩니다. 관리되는 WordPress 호스팅은 보안 및 기술 문제를 처리하므로 대부분의 경우 더 좋습니다. 강력한 솔루션이 필요한 사람들은 VPS 호스팅을 고려할 수 있습니다. 유사한 기능을 가진 전용 호스팅보다 저렴한 대안입니다. 올바른 WordPress 호스팅을 선택하는 방법에 대한 자세한 지침은 유형 및 선택에 대한 포괄적인 문서를 참조하십시오.

권장 사항: SiteGround

너무 많은 트래픽이 예상되지 않는 간단한 웹 사이트를 구축한다고 가정하겠습니다. 이 경우 공유 호스팅 계획이 제 역할을 할 것입니다(현재로서는). 언제든지 호스팅 옵션을 확장할 수 있습니다. 호스팅에 대한 권장 사항은 SiteGround입니다. Trustpilot에서 5점 만점에 4.4점을 받았고 좋은 평가를 받았습니다. 그들의 플랫폼 및 호스팅 솔루션은 클라이언트와 그들의 요구를 우선시합니다.

가격

SiteGround는 월 $14.99의 StartUp, $24.99의 GrowBig, $39.99의 GoGeek의 세 가지 요금제를 제공합니다. 이 자습서에서는 40GB의 웹 공간, 월간 방문 수 400,000회, 시작할 수 있는 몇 가지 우수한 기능을 제공하는 GoGeek 요금제를 선택합니다.

SiteGround 계정 생성

다음 단계는 계정을 만드는 것입니다. 요금제(저희에게는 GoGeek 요금제)를 선택하여 시작한 다음 단계에 따라 새 도메인을 등록하거나 현재 도메인을 추가하세요.

마지막으로 이메일 및 비밀번호, 고객 정보, 결제 정보, 호스팅 기간(월별 또는 연간)과 같은 계정 정보를 추가합니다.

3단계: 도메인 선택

호스팅 제공업체를 선택한 후에는 도메인을 선택하여 계속할 수 있습니다(아직 도메인을 소유하지 않은 경우).

.COM

가장 많이 사용되는 URL은 닷컴으로 끝납니다. 그것은 우리 뇌에 뿌리를 두고 있습니다. 기본적으로 우리는 브랜드에 긍정적인 영향을 미치는 다른 도메인보다 닷컴 도메인을 더 신뢰하는 경향이 있습니다.

기억에 남게 만드세요

닷컴 도메인을 사용하든 사용하지 않든 도메인을 기억하기 쉽게 만드는 것이 중요합니다. 특히 장기적으로 방문자와 고객이 온라인에서 귀하를 찾기 어렵게 만들고 싶지 않을 것입니다.

도메인 등록

많은 도메인 등록 기관을 사용할 수 있지만 좋은 도메인 등록 기관을 선택하는 것이 중요합니다. 최고의 도메인 등록 기관 중 일부는 Namecheap 또는 SiteGround이지만 귀하에게 적합한 것을 결정하기 위해 조사를 수행하십시오.

4단계: WordPress.org 설치

호스팅과 도메인이 준비되면 웹사이트에 WordPress를 설치할 차례입니다. 다른 옵션보다 WordPress를 선택하는 데는 여러 가지 이유가 있습니다. 첫째, 가장 인기 있는 CMS에는 이유가 있습니다. 직관적이고 오픈 소스이며 완전한 사용자 정의가 가능합니다. 또한 끝없는 테마 및 플러그인 옵션이 있습니다. 웹사이트에서 WordPress.org를 사용하기 위해 한 푼도 지불할 필요가 없다는 것도 나쁘지 않습니다!

자동 설치

SiteGround 도메인에서 WordPress를 설정하려면 SiteGround 계정의 홈 페이지로 이동하여 사이트 설정을 클릭합니다.

사이트의 신규, 기존 또는 임시 도메인을 선택한 다음 계속을 클릭합니다.

그런 다음 새 웹사이트 시작 을 선택합니다.

그런 다음 WordPress 를 선택하고 이메일 주소를 입력하고 비밀번호를 생성합니다. 다음으로 계속 을 클릭합니다.

5단계: 웹사이트 구조 계획

이 시점에서 웹사이트 환경은 웹사이트의 모양에 대해 생각할 준비가 된 것입니다. 원하는 웹사이트 모양과 필요한 기능을 고려하는 것이 중요합니다. 한 페이지로 할 것인가? 브로셔 유형의 웹 사이트에 대한 기본 페이지가 필요합니까? 전자 상거래 기능이 필요하십니까? 이 자습서를 위해 브로셔 웹 사이트 구축의 목표를 벗어나겠습니다.

고려해야 할 페이지

브로슈어 웹사이트를 구축하는 경우 다음과 같은 몇 가지 필수 페이지가 있습니다.

• 집
• 에 대한
• 연락하다

또한 웹사이트의 용도에 따라 다음 전용 페이지를 더 추가할 수도 있습니다.

• 서비스
• 포트폴리오
• 블로그

옳고 그른 웹사이트 구조는 없습니다. 귀하, 귀하의 웹사이트 및 귀하의 웹사이트 목표에 맞는 옵션을 찾아야 합니다.

6단계: 테마 선택

WordPress 환경이 준비되면 작업할 시간입니다! WordPress를 사용하면 테마를 설정할 수 있습니다. 이 테마는 웹사이트의 기초를 형성합니다. 웹사이트에 추가하려는 기능에 따라 올바른 테마를 선택하는 것이 중요한 단계가 될 것입니다.

테마의 종류

WordPress에서 선택할 수 있는 다양한 테마가 있습니다. 가장 인기 있는 테마는 다목적이며 일반적으로 비주얼 빌더를 포함합니다. 그 이유는 그것이 제공하는 유연성 때문입니다. 전자 상거래 웹 사이트 또는 포트폴리오 웹 사이트에 맞게 특별히 조정된 테마도 있습니다. 찾고 있는 테마 유형에 따라 최고의 권장 사항을 통해 다양한 목록을 확인할 수 있습니다.

주요 권장 사항: Divi

이 자습서에서 다음(실제) 단계에 대해 작업할 테마를 선택합니다. 귀하가 구축하는 모든 웹사이트에 자체 Divi를 사용하는 것이 좋습니다. Divi는 다목적 테마이며 웹 사이트를 매우 직관적으로 구축할 수 있는 코드 없는 디자인 Visual Builder를 포함합니다. Divi는 다양한 기능, 200개 이상의 사용자 정의 가능한 요소, 선택할 수 있는 2200개 이상의 전문적으로 디자인된 레이아웃을 제공합니다! 만들고자 하는 웹사이트 유형이 무엇이든 특정 비즈니스 전용 레이아웃 팩이 있을 가능성이 높습니다.

가격

Divi는 연간 및 평생의 두 가지 멤버십 옵션을 제공합니다. $89/년에 연간 회원권을 받거나 $249 일회성 요금으로 평생 회원권을 얻을 수 있습니다.

디비 회원이 되세요

Divi 회원이 되려면 가입 페이지로 이동하십시오. 또는 오늘의 10% 할인 혜택을 누리세요!

회원가입이 완료되면 회원 영역으로 이동할 수 있습니다.

디비 다운로드

여기에서 Divi 테마 파일을 다운로드할 수 있습니다.

WordPress 웹사이트에 Divi 설치

Divi를 다운로드했으면 WordPress 대시보드로 이동하여 왼쪽 사이드바의 모양 메뉴 항목에 마우스를 가져간 다음 테마를 클릭합니다.

페이지 상단에 Add New 라는 버튼이 있습니다. 이 버튼을 클릭하십시오.

그런 다음 테마 업로드 를 클릭합니다.

이 튜토리얼의 이전 부분에서 다운로드한 Divi 압축 폴더를 검색하고 지금 설치를 클릭합니다.

이것에 성공하면 테마도 활성화할 수 있습니다!

이제 Divi를 사용할 준비가 되었습니다.

Divi 테마 옵션에 API 키 추가

Divi가 제공하는 모든 무료 레이아웃에 액세스하려면 Divi 테마 옵션에 API 키를 추가해야 합니다. 회원 영역으로 이동하여 API 키를 찾고 생성할 수 있습니다. 여기에서 계정 위로 마우스를 가져갑니다.

그런 다음 사용자 이름 및 API 키 를 클릭하십시오.

API 키 영역에서 새 API 키를 생성하고 복사할 수 있습니다.

Divi 테마 옵션에 API 키를 추가하려면 사용자 이름과 API 키가 모두 필요합니다.

그런 다음 WordPress 대시보드로 이동합니다. 왼쪽 사이드바(1)에서 "Divi" 메뉴 항목을 가리키고 "테마 옵션"(2)을 클릭합니다. "업데이트" 탭(3)으로 이동합니다. 거기에 사용자 이름(4)과 API 키(5)를 추가할 수 있습니다. 변경 사항을 저장했는지 확인하십시오(6).

7단계: 플러그인 설치

WordPress의 또 다른 장점은 플러그인 설치 기능입니다. 다양한 요구 사항을 충족하는 데 도움이 되는 말 그대로 수천 개의 플러그인이 있습니다. 귀하의 웹사이트에 어떤 플러그인을 고려하고 싶은지 살펴보겠습니다.

필수 플러그인

모든 WordPress 웹사이트에는 성공을 위해 필요한 몇 가지 필수 플러그인이 있습니다. 사이트를 최상의 상태로 유지하는 데 도움이 되는 SEO, 보안 및 기타 우수한 WordPress 플러그인을 설치하고 싶을 것입니다.

SEO

WordPress는 기본적으로 SEO 친화적이지만 검색 엔진 순위 페이지(SERP)에서 더 높은 순위를 기록하려면 약간의 도움이 필요합니다. 고맙게도 Rank Math와 같은 뛰어난 SEO 플러그인이 있어 잠재 고객이 사이트를 쉽게 찾을 수 있습니다.

보안

고려해야 할 또 다른 중요한 측면은 iThemes Security와 같은 안정적인 보안 플러그인입니다. 맬웨어, 봇 및 DDoS 공격으로부터 보호하는 것이 중요합니다. WordPress에 구축된 인터넷의 44% 이상이 악의적인 행위자의 주요 표적이 됩니다.

선택적 플러그인

SEO 및 보안 플러그인 외에도 일부 선택적 플러그인은 웹 사이트를 향상시킬 수 있습니다. 채팅, 뉴스레터, 소셜 미디어 또는 기타 선택적 플러그인을 고려하여 웹사이트를 리드 생성 강국으로 만드십시오.

채팅

고객 참여는 웹 사이트의 성공에 매우 중요합니다. Tidio와 같은 좋은 채팅 플러그인을 설치하여 고객이 더 쉽게 접근할 수 있도록 해야 합니다. 고객 경험을 자동화해야 하거나 웹 사이트에 실시간 에이전트를 제공해야 하는 경우 채팅 플러그인은 방문자가 원하는 답변을 제공하는 훌륭한 방법입니다.

뉴스 레터

리드를 늘리고 고객 기반을 확장하려는 경우 Bloom과 같은 뉴스레터 플러그인이 적합합니다. 고객 기반을 확장하고 유용한 정보를 제공하며 사이트 참여를 추적할 수 있는 훌륭한 방법입니다.

소셜 미디어

소셜 미디어 피드를 WordPress 웹사이트에 연결하는 것은 웹사이트 및 소셜 미디어 계정의 가시성을 높이는 훌륭한 방법입니다. Monarch와 같은 우수한 소셜 미디어 플러그인을 사용하여 Facebook, YouTube 등의 소셜 미디어 피드를 삽입할 수 있습니다.

그리고 더

백업, 속도 향상 또는 웹 사이트 기능 향상을 위한 솔루션이 필요한 경우 좋은 WordPress 플러그인이 목표 달성에 도움이 될 수 있습니다. 31개의 최고의 WordPress 플러그인 게시물을 살펴보고 WordPress 웹사이트를 최고로 만드는 데 사용할 수 있는 플러그인에 대한 더 많은 통찰력을 얻으십시오.

8단계: 첫 번째 페이지 만들기

이 시점에서 우리는 웹 사이트에서 보여주고 싶은 페이지를 자신 있게 만들 수 있습니다! 웹사이트 구축이 처음이라면 이 부분이 압도적일 수 있습니다. 웹사이트를 만드는 것은 쉽지만 때때로 정보 과부하로 이어질 수 있습니다. 필요한 경우 신선한 마음으로 정보를 처리하고 다시 확인할 수 있습니다.

새 페이지 추가

WordPress 대시보드로 이동합니다. 여기에서 페이지 위로 마우스를 가져간 다음 새로 추가 를 클릭합니다.

페이지에 제목을 지정하십시오. 이 경우 이를 Home 이라고 합니다.

페이지를 초안으로 저장하거나 게시하여 작업을 시작할 수 있습니다.

준비가 되면 Divi Builder 사용을 클릭하여 Divi로 전환합니다.

미리 만들어진 레이아웃 선택

Divi는 직관적인 도구이며 기본 사항을 배우면 처음부터 모든 페이지를 만들 수 있습니다. 그러나 프로세스 속도를 높이기 위해 Divi는 2200개 이상의 레이아웃이 포함된 100개 이상의 웹사이트 팩을 제공합니다! 많은 옵션을 사용할 수 있으므로 웹 사이트의 요구 사항에 맞는 웹 사이트 팩을 찾을 수 있습니다. 매주 새로운 레이아웃 팩을 출시합니다!

페이지에 레이아웃을 업로드하려면 레이아웃 찾아보기 라는 중간 옵션을 선택합니다.

레이아웃 팩 및 레이아웃의 라이브러리가 펼쳐지는 것을 지켜보십시오!

특정 레이아웃 팩을 찾는 경우 왼쪽 사이드바의 검색 막대를 사용할 수 있습니다.

이 자습서에서는 Marketing Layout Pack의 홈페이지 레이아웃을 사용하겠습니다. 검색창에 Marketing을 입력하기만 하면 됩니다.

그런 다음 마케팅 홈페이지를 선택합니다.

그러면 레이아웃 팩의 전체 미리보기가 표시됩니다.

홈페이지를 업로드하려면 이 레이아웃 사용 이라는 파란색 버튼을 클릭합니다.

곧 귀하의 페이지가 레이아웃으로 대체됩니다!

콘텐츠 및 이미지 변경

레이아웃은 훌륭한 시작점이지만 여전히 웹사이트의 요구 사항에 맞게 미세 조정해야 합니다. 이것으로 원하는 만큼 멀리 갈 수 있습니다. Divi는 새로운 섹션, 행, 열, 모듈 등을 추가할 수 있는 비주얼 빌더입니다. 또한 설계 프로세스를 가속화하는 많은 효율성 기능이 있습니다.

내용만 변경하여 이 튜토리얼을 간단하게 유지하겠습니다.

사본 변경

사본이 포함된 각 개별 모듈을 열고 콘텐츠 상자를 사용하여 사본을 변경할 수 있습니다. 쉬운!

이미지 변경

마찬가지로 필요하거나 원하는 경우 사용 중인 모든 이미지를 변경할 수 있습니다. 느린 로드 속도를 방지하려면 업로드하기 전에 이미지를 최적화해야 합니다.

저장 및 게시

원하는 변경 사항을 페이지에 적용한 후 저장하고 게시할 수 있습니다!

10단계: 추가 페이지 만들기

웹사이트 구조에 따라 필요한 각 페이지에 대해 위의 단계를 반복할 수 있습니다. 가능한 한 빨리 웹 사이트를 활성화하려면 먼저 한 페이지로 이동한 다음 나머지 페이지를 천천히 구축하는 것을 고려할 수 있습니다.

11단계: 웹사이트 탐색 만들기

웹사이트에 페이지가 있는 것은 좋지만 사람들이 원하는 페이지로 이동할 수 없다면 문제가 있는 것입니다. 그렇기 때문에 웹 사이트 탐색에 특별한 주의를 기울여야 합니다. 내비게이션은 일반적으로 웹사이트의 머리글 및 바닥글 영역에 있습니다. WordPress에는 기존 페이지에서 동적으로 메뉴를 생성하는 전용 지점이 있습니다.

홈페이지 선택

메뉴를 만들기 전에 먼저 홈페이지를 설정합시다. 사람들이 기본 URL을 입력하면 이 페이지로 연결됩니다. 기본적으로 WordPress 웹사이트의 홈페이지는 내 최신 게시물 로 설정됩니다. 이를 수정하려면 WordPress 대시보드로 이동한 다음 왼쪽 메뉴에서 설정을 가리킨 다음 읽기를 클릭하여 계속할 수 있습니다.

그런 다음 첫 번째 옵션에서 정적 페이지를 선택하고 페이지를 탐색하여 홈페이지를 찾습니다. 변경 사항을 저장하십시오.

기본 메뉴 만들기

다음으로 기본 메뉴를 만듭니다. WordPress 대시보드로 이동하여 왼쪽 사이드바의 모양 메뉴 항목 위로 마우스를 가져간 다음 메뉴 를 선택합니다.

새 메뉴 추가를 클릭하고 메뉴 이름을 지정합니다.

탐색에 원하는 페이지를 추가하여 계속하십시오.

완료되면 메뉴를 기본 메뉴 로 설정합니다.

그리고 메뉴를 저장합니다. 이제 이 기본 메뉴가 웹사이트 헤더에 자동으로 반영됩니다.

12단계: 고려해야 할 추가 사항

웹 사이트는 진정으로 완성되지 않습니다. 항상 개선하거나 업데이트할 사항이 있습니다. 웹 사이트를 더욱 세밀하게 조정하려면 아래 항목 중 일부를 고려하는 것이 좋습니다.

머리글 및 바닥글 만들기

Divi 웹사이트에서 머리글과 바닥글을 만드는 방법에는 여러 가지가 있습니다. Appearance > Customizer 에서 WordPress 테마 커스터마이저를 사용하여 Divi의 기본 머리글 및 바닥글 스타일을 지정하거나 Theme Builder를 사용하여 만들 수 있습니다. 끌어서 놓기 Visual Builder를 사용하여 사용자 지정 머리글 및 바닥글을 만들 수 있으므로 Divi의 테마 빌더를 사용하는 것이 좋습니다. Theme Builder에 액세스하려면 Divi > Theme Builder 로 이동합니다.

전역 머리글 추가를 클릭하여 머리글을 추가합니다.

Div의 Visual Builder를 사용하여 원하는 헤더 레이아웃을 만들 수 있습니다.

템플릿 만들기

Divi는 궁극적인 전체 사이트 편집 테마입니다. 머리글 및 바닥글을 만드는 것 외에도 게시물, 제품, 범주 등에 대한 레이아웃을 만들 수 있습니다. Divi의 Theme Builder는 창의력을 발휘하여 원하는 웹사이트를 만들거나 블로그에 미리 디자인된 게시물 레이아웃 중 하나를 적용할 수 있는 궁극적인 자유를 제공합니다.

SEO 최적화

WordPress는 이미 SEO 친화적이지만 SEO 플러그인과 좋은 SEO 도구를 사용하면 가시성을 높일 수 있습니다. 키워드 조사, 좋은 SEO 카피 작성, 내부 링크 활용에 대해 알아보세요. 이러한 단계를 수행하면 곧 SEO 전문가가 될 수 있습니다.

모바일 최적화

모든 장치에서 시각적으로 매력적인 웹 사이트를 만드는 것이 중요합니다. Google의 모바일 우선 알고리즘은 작은 화면 친화적인 웹사이트를 우선적으로 처리합니다. 고맙게도 Divi는 모바일 우선 디자인을 전문으로 하여 상당한 이점을 제공합니다.

13단계: 웹사이트 유지 관리

성공적인 웹사이트를 가지려면 계속 유지해야 합니다.

정기적으로 업데이트

보안 조치를 위해서라도 웹 사이트를 정기적으로 업데이트하면 이점이 있습니다. 업데이트를 수행하는 경우 스테이징 사이트를 사용하는지 확인하십시오. 이렇게 하면 WordPress, 테마 또는 플러그인을 업데이트할 때 충돌을 피하는 데 도움이 됩니다.

데이터 측정

Google 애널리틱스와 같은 도구를 통해 웹사이트에서 제공하는 데이터도 측정해 보세요. 이렇게 하면 웹사이트에 대해 설정한 목표에 따라 웹사이트의 효과를 추적하는 데 도움이 됩니다.

마지막 생각들

웹 사이트를 만드는 방법에 대한 게시물이었습니다! 인생의 모든 것이 그렇듯이 더 많이 연습할수록 더 쉬워집니다. 일반적으로 가장 많이 배울 수 있는 방법이기 때문에 웹 사이트 생성 프로세스의 다른 부분을 가지고 놀도록 허용하십시오. 질문이나 제안 사항이 있으면 아래 댓글 섹션에 자유롭게 의견을 남겨주세요!

Darko 1981 / Shutterstock.com을 통한 주요 이미지