웹 사이트 구축 방법 : A-Z 초보자 안내서

이 기사에서는 웹 사이트를 만드는 데 필수적인 단계를 보여 드리겠습니다..


  1. 도메인 이름 등록
  2. 웹 호스팅에 가입
  3. 웹 페이지 디자인
  4. 웹 사이트 확인 및 테스트
  5. 미세 조정 및 성장

기본 웹 사이트를 만드는 것은 쉽습니다. 노동 자체는 한 시간 이상 걸리지 않아야합니다. 그러나 선택을 이해하고 상황에 맞추는 것은 쉬운 일이 아닙니다..

이 단계에서 다루지 않는 추가 지식이 필요한 단계가 있기 때문에 필요한 경우 자세한 리소스에 대한 링크를 제공했습니다..

웹 사이트를 만드는 이유

시작하기 전에 먼저 목적을 정의하는 것이 중요합니다.

우리는 모두 웹 사이트가 비즈니스 존재 또는 개인으로서 온라인 존재의 중요한 부분이 될 수 있음을 알고 있습니다. 개인에게는 기본 프로필만큼 간단하거나 전체 포트폴리오만큼 상세 할 수 있습니다. 비즈니스의 경우 자산의 일부로 간주하고 프로필, 제품 또는 수행 한 작업과 관련이 있어야합니다..

명확한 목적을 염두에두고 사용하면 어떤 플랫폼을 사용해야하는지, 어떤 마케팅 채널을 활용할 것인지 등 더 나은 결정을 내릴 수 있습니다..

웹 사이트가 구축되는 몇 가지 일반적인 이유 :

  • 제품을 판매하려면 – 제품을 판매하는 것이 주요 목표 인 경우 웹 사이트에는 제품 쇼케이스, 온라인 쇼핑 카트, 안전한 지불 게이트웨이 및 POS 시스템이 포함되어야합니다..
  • 정보 표시 – 회사 또는 개인 정보를 표시하는 것이 목표라면 저렴한 플랫폼에 간단한 한 페이지 웹 사이트를 구축하는 것이 좋습니다.
  • 현재 아이디어와 경험을 공유하려면 – 블로그는 일반적으로 자신의 아이디어를 세상과 공유하고 공유하려는 사용자에게 가장 적합합니다..

이러한 이유는 상호 배타적 일 필요는 없습니다. 예를 들어 위의 요소 중 둘 이상을 결합한 웹 사이트를 만들 수 있습니다..

자신 만의 웹 사이트를 구축하기위한 필수 단계

웹 사이트 목표를 정리했으면 이제 구축 할 차례입니다! 시작하려면 먼저…

1. 도메인 이름을 등록하십시오

도메인 이름은 무엇입니까?

웹 사이트를 시작하려면 가장 먼저 필요한 것은 도메인 이름입니다.

도메인 이름은 인터넷에서 웹 사이트를 식별하는 주소입니다. 예를 들어 Yahoo.com, Google.com 또는 BuildThis.io (현재 읽고있는 웹 사이트)가 있습니다..

도메인 이름을 등록 할 위치?

도메인을 소유하려면 도메인 등록 기관에 도메인을 등록해야합니다.

도메인 등록 기관은 등록을 진행하기 전에 도메인 이름이 고유한지 확인할 수 있도록 도와줍니다. GoDaddy와 NameCheap은 널리 사용되는 도메인 등록 기관입니다. 도메인을 오랫동안 관리하는 데 사용했습니다.

도메인 이름을 선택하는 방법?

도메인 이름을 선택하는 것은 브랜드를 반영해야 할뿐만 아니라 여전히 쉽고 간단하며 기억하기 쉬우므로 가장 어려운 부분입니다..

도메인 이름은 고유해야합니다. 이름은 전 세계의 다른 사람이나 조직이 소유하지 않아야합니다. 도메인 이름을 만들 때 명심해야 할 일반적인 규칙은 다음과 같습니다.

  • 짧고 기억하기 쉽게 유지
  • 상표명을 사용하지 마십시오
  • 가능하면 .com 또는 .net으로 이동
  • 창의력을 발휘하고 복합적인 단어를 사용하십시오.
  • 키워드를 관련성있게 만드십시오.

실행 가능한 팁

  • 도메인 이름을 알아내는 데 어려움이 있다면 아이디어를 위해 항상 도메인 이름 생성기를 사용할 수 있습니다. 더 인기있는 것들 중 일부는 워드 로이드 린 도메인 검색.
  • 초보자 인 경우 GoDaddy 또는 Namecheap으로 이동하여 도메인 이름을 찾는 것이 좋습니다. 둘 다 초보자가 도메인 이름을 쉽게 구매하고 등록 할 수 있도록합니다..

2. 웹 호스팅 계정에 가입

웹 호스트 란??

웹 호스트는 웹 사이트의 일부로 필요한 파일을 저장하는 데 사용되는 큰 컴퓨터 (일명 서버)입니다.

가구와 가전 제품을 보관하는 집으로 생각하십시오 – 집은 웹 호스트이며 집은 귀하의 웹 사이트 콘텐츠입니다. 웹 사이트 콘텐츠에는 일반적으로 텍스트, 이미지, 비디오 및 기타 필요한 요소가 포함됩니다.

호스팅에서 당신의 선택은 무엇입니까?

웹 호스팅은 오늘날 다양한 패키지로 제공됩니다. 일반적으로 웹 호스팅 제공 업체는 기본 소프트웨어 및 기술 지원을 통해 서버를 임대하는 데만 참여합니다. 전통적인 호스팅 제공 업체를 통해 웹 사이트를 호스팅하는 것이 일반적으로 저렴하고 유연합니다. 웹 사이트를 설정하려면 약간의 추가 작업이 필요합니다.

오늘날 기업들은 서로 다른 서비스를 묶고 있으며 사용자가 하나의 서비스 제공 업체에서 웹 사이트를 구축, 호스팅 및 관리 할 수 ​​있습니다. 우리는 일반적으로 이러한 회사를 웹 사이트 빌더 또는 온라인 상점 빌더라고합니다.. 웹 사이트 호스팅 이러한 “번들”플랫폼에서는 일반적으로 비싸고 유연성이 떨어집니다. 하지만 웹 사이트 나 온라인 상점을 쉽게 만들 수 있습니다..

초보자를위한 호스팅 플랫폼

방금 시작한 경우 – 기본 공유 호스팅으로 충분합니다. 이를 위해 Hostinger Single Plan을 추천합니다. 단 하나의 웹 사이트를 $ 0.80 / mo의 저렴한 가격으로 호스팅 할 수 있습니다..

Hostinger 호스팅Hostinger Single Plan – $ 0.80 / mo에 10GB SSD 스토리지 및 100GB 대역폭 (초보자에게 충분한 용량)을 갖춘 웹 사이트 1 개.

전자 상거래 / 온라인 상점을위한 호스팅 플랫폼

웹 사이트 (전자 상거래 상점)에서 직접 제품을 판매 할 계획이라면 Shopify Basic (시작 가격 $ 29 / mo)을 확인해야합니다..

Shopify 플랫폼NBA Lakers Store 및 Tattly.com을 포함하여 80 만 개의 전자 상거래 상점에서 Shopify를 사용합니다. Shopify Basic은 $ 29 / mo에서 시작합니다.

만들기 쉬운 웹 사이트 / 소기업을위한 호스팅 플랫폼

비즈니스 포트폴리오 및 연락처 세부 정보를 소개하는 간단한 웹 사이트 만 있으면 번들로 제공되는 호스팅 옵션이 적합 할 수 있습니다. Wix와 Weebly는 내가 좋아하는 두 사이트 빌더입니다 – 우리는이 사이트에 대해 광범위하게 쓰고 여기에서 우리의 리뷰를 확인할 수 있습니다 – Wix review / Weebly review.

번들 옵션으로 Wix온라인 서비스로 제공되는 Wix를 사용하면 코딩 지식이없는 경우에도 드래그 앤 드롭 비주얼 편집기로 웹 사이트를 구축 할 수 있습니다. Wix Unlimited Plan은 $ 12.50 / 월에 시작합니다.

실행 가능한 팁

  • 사용 가능한 호스팅에는 공유 호스팅, 전용 서버 호스팅 및 클라우드 / VPS 호스팅이 있습니다..
  • 소규모 웹 사이트 인 경우 공유 호스팅 요금제를 이용하는 것이 더 저렴합니다. 더 큰 사이트는 클라우드 또는 전용 호스팅을 사용하는 것이 좋습니다.
  • 웹 호스트를 선택하기 전에 고려해야 할 몇 가지 주요 특성은 가격, 서버 속도 및 가동 시간입니다. Hostinger (초보자)와 InMotion Hosting 및 SiteGround (더 큰 웹 사이트)는 유명한 이름 중 일부입니다..
  • 웹 사이트에서 직접 제품을 판매하려는 경우 Shopify 또는 BigCommerce와 같은 상점 빌더 사용을 고려하십시오..

3. 웹 페이지 디자인

도메인 이름과 웹 호스트가 준비되면 인터넷에 무언가를 넣을 차례입니다. 웹 페이지를 디자인하려면 웹 개발자를 고용하거나 직접 할 수 있습니다.

여기서 웹 개발 작업을 아웃소싱하는 방법에 대해 자세히 설명합니다. 웹 사이트를 개발할 사람을 고용하려면 다음 단계를 건너 뛰고 해당 페이지로 이동해야합니다..

DIY 사용자를위한 웹 페이지 디자인 방법은 다음과 같습니다.

1-WYSIWYG (What-you-see-is-What-you-get) 웹 편집기

WYSIWYG 편집기를 사용하면 코딩 할 필요없이 웹 사이트를 설정하고 웹 페이지를 처음부터 디자인 할 수 있습니다. 템플릿이나 빈 페이지로 시작한 다음 웹 사이트 페이지를 만드는 일반적인 워드 프로세서처럼 작동합니다. 완료되면 콘텐츠로 파일을 채우고 FTP (File Transfer Protocol) 프로그램을 사용하여 전체 폴더를 웹 호스트에 업로드하십시오..

이 방법을 사용하려면 기본 HTML / CSS 기술과 인터넷 작동 방식에 대한 일반적인 지식이있는 것이 가장 좋습니다..

사용 가능한 WYSIWYG 웹 편집기는 여러 가지가 있습니다. 일부는 비상업적 용도로는 무료이며 다른 하나는 유료 라이센스가 필요할 수 있습니다. Microsoft Expression Web, 구글 웹 디자이너, BlueGriffon, 과 열린 요소 체크 아웃 할 좋은 것들이 있습니다.

FTP 프로그램의 경우 – FileZillaWinSCP 두 가지 최고의 무료 옵션입니다.

Microsoft Expression-WYSIWYG 편집기예 – 다음은 Microsoft Expression Web Editor의 스크린 샷입니다. 폴더 목록 (왼쪽) – 폴더를 사용하여 웹 사이트를 구성하십시오. 편집자 (중앙) – 여기에 텍스트를 쓰고 형식을 지정하십시오. 스타일 / 도구 상자 (오른쪽) – CSS를 사용하여 페이지 스타일을 지정하고 디자인합니다 (선택 사항). 페이지 이름 색인 (.html / .htm / .php / .asp)을 작성해야합니다. 웹 사이트의 홈페이지로 작동합니다..

이 옵션은 기존 호스팅 (예 : Hostinger)을 사용하는 경우에만 가능합니다. 웹 코딩 학습을 즐기는 경우 WYSIWYG 편집기를 사용하는 것이 유연하고 재미 있지만 웹 사이트를 즉시 원하는 초보자에게는 적합하지 않습니다..

2- 콘텐츠 관리 시스템 (CMS) 사용

오늘날 대부분의 웹 사이트는 CMS로 구축되고 관리됩니다. CMS는 사이트 소유자의 관점에서 많은 이점을 제공합니다. 관리가 쉽고 설계 및 개발이 유연하며 비용 효율적 (무료!) – 세 가지 주요 장점.

인터넷에있는 모든 웹 사이트의 ~ 33 %를 지원하는 WordPress는 세계에서 가장 인기있는 CMS.

2 단계에서 기존 호스팅 옵션을 선택하는 사람들은 몇 번의 클릭만으로 WordPress를 설치할 수 있습니다.

Hostinger에 WordPress 설치Hostinger에서 WordPress를 설정하는 방법은 다음과 같습니다. Hostinger 계정에 로그인하고 웹 사이트로 이동하십시오 > 자동 인스톨러 > 워드 프레스 > 비밀번호 및 웹 사이트 이름 설정 > 설치.

WordPress가 설치되면 기본 웹 사이트 프레임 워크가 제공됩니다. 그런 다음 WordPress 템플릿을 사용하여 웹 페이지를 디자인 할 수 있습니다. 사전 빌드 된 WordPress 템플릿은 WordPress.org (공식 테마 디렉토리)에서 무료로 제공. 또는 Elegant Themes 또는 Artisan과 같은 전문 개발자로부터 프리미엄 템플릿을 구입할 수 있습니다.

Disha는 WordPress를 사용하여 블로그 또는 웹 사이트를 만드는 방법을 여기에 설명했습니다. 추가 정보가 필요한 경우 지침을 따르십시오.

참고 – 2 단계에서 Wix 또는 Weebly와 같은 “번들”플랫폼을 사용하기로 선택한 경우 CMS를 사용할 수 없습니다..

3. 끌어서 놓기 웹 사이트 / 스토어 빌더 사용

드래그 앤 드롭 웹 사이트 / 저장소 빌더는 웹 사이트를 만드는 가장 쉽고 빠른 방법입니다..

웹 개발 기술이 필요하지 않습니다. 사전 구축 된 템플릿을 선택하고 빌더에서 필요한 웹 요소 (예 : 연락처 양식, 드롭 다운 메뉴, Google지도, 지불 버튼, 쇼핑 카트 등)를 가져 오십시오. 모든 기능을 갖춘 웹 사이트가 준비되었습니다.

Wix와 Weebly는 인터넷에 흩어져있는 많은 웹 사이트 제작자가 있습니다. 가장 인기있는 사이트 중 하나입니다. 위에서 언급했듯이 Shopify는 온라인 상점을 구축하는 경우 훌륭한 선택입니다..

Wix 데모

Wix 편집기를 사용하여 웹 사이트 작성 및 편집Wix에서 웹 페이지 디자인하기 : 사이트 메뉴 (왼쪽) – 페이지 관리, 사이트 배경 선택, 사이트 탐색 설정, 텍스트 및 링크 추가, 이미지 업로드 등. 정렬 (중앙 / 왼쪽) – 여기에 웹 사이트 요소를 정렬하고 정렬합니다. 미리보기 (오른쪽 상단) – 웹 사이트 저장, 미리보기 및 게시.

Wix 사전 빌드 템플릿에서 웹 사이트 디자인Wix 템플릿 – Wix에는 수백 개의 사전 제작 된 템플릿이 있습니다 (모두보기).

Shopify 데모

Shopify 편집기를 사용하여 웹 사이트 생성 및 편집Shopify에서 사전 빌드 된 테마로 온라인 상점 첫 화면을 디자인하십시오. 메뉴 (왼쪽) – 테마를 선택하고 상점 요소 (슬라이드, 헤드 라인, 이미지, 바닥 글 등)를 여기에 추가하십시오. 미리보기 (가운데 / 오른쪽) – 여기에서 상점을 미리보기.

Shopify 템플릿Shopify는 광범위한 무료 및 프리미엄 테마를 제공합니다 (샘플 참조).

Hostgator 웹 사이트 빌더 데모

게이터 웹 사이트 빌더Gator Website Builder 사용 – 메뉴 (왼쪽) – 여기에서 테마를 선택하고 페이지를 추가하고 페이지 섹션을 추가하십시오. 미리보기 (가운데 / 오른쪽) – 상단 탐색 모음에서 페이지 간을 이동합니다. 웹 사이트 저장, 미리보기 및 게시.

게이터 웹 사이트 빌더의 무료 테마Hostgator Website Builder에서 제공하는 완벽하게 사용자 정의 가능하고 반응이 뛰어난 웹 사이트 템플릿.

실행 가능한 팁

  • Shopify, BigCommerce, Wix 및 Weebly가 제공하는 무료 전자 상거래 사이트 템플릿을 한 페이지에서 찾아보십시오
  • Wix를 사용하여 웹 사이트를 만드는 단계별 지침
  • Wix로 구축 된 웹 사이트의 예를보십시오
  • Shopify를 사용하여 웹 사이트를 만드는 단계별 지침
  • Shopify로 구축 된 웹 사이트의 예를보십시오

4. 웹 사이트 확인 및 테스트

웹 사이트가 준비되면 주요 브라우저 (Chrome, Firefox, Safari, Microsoft Edge, IE 11 등)와 다양한 화면 크기에서 웹 사이트 작동 방식을 확인하고 테스트 할 차례입니다..

온라인 무료 도구를 사용하여 이러한 테스트를 실행할 수 있습니다.

마크 업 검증

W3C-제작이 완료되면 웹 사이트의 유효성을 검사하십시오다음을 사용하여 웹 사이트 마크 업을 쉽게 확인하십시오. W3C 마크 업 검증 서비스.

마크 업 유효성 검사 란? HTML, PHP 등과 같은 코딩 언어 또는 스크립트는 각각 고유 한 형식, 어휘 및 구문을 갖습니다. 마크 업 유효성 검사는 웹 사이트가 이러한 규칙을 따르는 지 확인하는 프로세스입니다..

브라우저 테스트

다른 브라우저에서 웹 사이트 테스트한 번에 최대 115 개의 서로 다른 브라우저를 웹 사이트에서 교차 테스트 BrowserShots.

스크린 테스트

다양한 화면 크기에서 웹 사이트 테스트사용하다 스크린 플라이 모니터, 태블릿, 스마트 폰 및 기타 다양한 화면 크기에서 웹 페이지를 미리보기.

5. 웹 사이트 미세 조정 및 성장

인터넷에 웹 사이트를 게시하는 것은 1 단계입니다. 웹 사이트의 성공을 보장하기 위해해야 ​​할 일이 여전히 많이 있습니다. 시작해야 할 몇 가지 작업은 다음과 같습니다.

웹 사이트 속도 미세 조정

Google은 사이트 속도가 순위 요소 중 하나라고 분명히 밝혔습니다. 즉, 사이트가 빠르게로드되면 순위가 높아질 수 있습니다..

또한 – 웹 사이트 로딩 속도가 빠를수록 웹 사이트 방문자가 더 행복해집니다. 수많은 사례 연구 및 실험에서 느린 로딩 웹 사이트가 사용자 경험을 손상시키고 웹 사이트 수익에 영향을 준다는 것이 입증되었습니다. 아마존의 사이트가 1 초 늦춰질 경우 약 16 억 달러의 매출 손실이 발생했을 것입니다..

현재 웹 사이트 속도가 느린 경우, 그것을 개선하는 방법을 배우십시오.

웹 사이트 검색 가시성 향상

웹 사이트를 알리기 위해 검색 엔진 최적화 (SEO)의 마스터 일 필요는 없습니다. 그러나 일부 기본 검색 엔진 최적화 기술은 항상 가지고 있습니다..

에서 웹 마스터 계정 만들기 Google 검색 콘솔 웹 사이트를 Google에 제출하고 SEO 문제를 식별합니다. 기본 키워드 조사를 수행 한 다음 기본 키워드의 페이지 제목과 제목을 최적화하십시오. 검색 결과 페이지에서 눈에 띄도록 사이트에 스키마 마크 업을 구현하십시오..

SEO 팁에 대한 자세한 내용은 SEO 인형 안내서를 참조하십시오..

HTTPS 구현

Chrome이 HTTP 웹 사이트에 ‘보안되지 않음’이라는 라벨을 붙이기 시작한 이래로 SSL 인증서는 큰 문제가되었습니다. 사용자가 웹 사이트를 “신뢰”하도록하려면 HTTPS 연결이 필수입니다.

필수 페이지 추가

두 웹 사이트가 다른 목적 및 / 또는 기능을 수행 할 수있는 사이트와 동일한 것은 아닙니다. 그러나 모든 웹 사이트에는 표준 페이지 (인덱스 (홈페이지), 정보 페이지 및 연락처 페이지)가 있어야합니다..

홈페이지

홈페이지는 대부분의 방문자가 귀하의 웹 사이트에 방문한 후 가장 먼저 보게되는 곳입니다. 귀하의 홈페이지는 적절한 홍보를 제공하고 방문자를 귀하의 사이트로 더 깊게 안내해야합니다.

웹 사이트 예-Haus예 – Haus 홈페이지에는 명확한 탐색 메뉴와 갤러리 스타일 디자인이 제공됩니다 (제품 쇼케이스에 적합).

정보 페이지

정보 페이지는 방문자와의 관계를 구축하는 것입니다. 자신을 소개하고 웹 사이트에 대한 자세한 정보를 제공 할 수 있습니다. 일반적으로 웹 사이트를 소유하고 운영하는 사람들의 사진을 포함하는 것이 좋습니다.

웹 사이트 예-불독 스킨 케어예 – 불독 스킨 케어의 정보 페이지는 사랑스럽고 기억에 남는 메시지를 보냅니다.

연락 페이지

사용자 및 잠재 고객과 의사 소통하는 것이 중요합니다. 따라서 – 연락처 페이지. 가능한 모든 커뮤니케이션 채널 (소셜 미디어 프로필, 연락처 양식, 이메일 주소 등)을 포함시켜 방문자가 귀하에게 연락 할 수 있도록하십시오..

웹 사이트의 예-Survicate예 – Survicate의 연락처 페이지는 넓은 양식 필드, 명확한 클릭 유도 문안으로 아름답게 디자인되었습니다. 필요한 모든 정보로 구성.

소셜 미디어 플랫폼에서 도달 범위 확대

귀하의 웹 사이트는 또한 대부분의 타겟팅 된 사용자가 어울리는 소셜 미디어 플랫폼에 있어야합니다. Facebook과 Twitter를 의미하는 BuildThis.io의 경우 다른 사람들에게는 LinkedIn, Tumblr 또는 Pinterest 일 수 있습니다..

초보자를위한 소셜 미디어 마케팅 팁.

파비콘 추가

당신은 편지를 보았습니까?브라우저 탭 왼쪽에 노란색 원이 표시됩니까? “favicon”이라고합니다. 로고와 마찬가지로 파비콘은 웹 사이트를 나타내는 작은 시각적 요소입니다..

Favicon은 웹 사이트 소유자가 간과하는 멋진 브랜딩 기술입니다. 그 소리가 당신처럼 들리면 – 무료 파비콘 생성기를 사용하여.

웹 사이트 만들기 FAQ

당신은 당신의 자신의 웹 사이트를 무료로 만들 수 있습니까?

다음을 사용하여 무료 웹 사이트를 만들 수 있습니다 무료 웹 호스팅 000Webhost 제공 또는 일부 웹 사이트 제작자가 제공하는 무료 요금제를 사용하는 등 예를 들어 Wix는 소규모, 소규모 웹 사이트에 적합한 제한된 리소스를 갖춘 무료 플랜을 제공합니다..

내 비즈니스를위한 웹 사이트를 작성하는 방법?

웹 사이트 제작자는 소기업이 아웃소싱 할 필요없이 자신의 웹 사이트를 만들 수있는 이상적인 방법입니다. 이러한 옵션은 기술 지식이 필요하지 않으며 종종 유용 할 수있는 사전 디자인 된 템플릿을 제공합니다. > 시작하려면 여기를 클릭하십시오.

최고의 웹 사이트 빌더는 무엇입니까?

“최고”는 주관적인 용어입니다. 우리에게 가장 적합한 것은 귀하에게 적합하지 않을 수 있습니다. 인기 측면에서 – Squarespace는 22 %의 시장 점유율을 가진 가장 인기있는 웹 사이트 빌더입니다. 그 다음에는 Wix와 GoDaddy의 GoCentral이 각각 2 위와 3 위에 있습니다..

Google에서 웹 사이트를 만들 수 있습니까?

Google은 G Suite 제품군의 일부로 사이트 빌더를 제공합니다. 가격은 사용자 / 월 $ 5.40부터 시작합니다.

웹 사이트에서 PDF를 작성하는 방법?

컴퓨터에 Adobe Reader가 설치되어 있으면 CTRL-P를 눌러 웹 페이지에서 PDF를 만들 수 있습니다. 인쇄 메뉴가 열리면 PDF로 출력을 선택한 다음 파일을 저장하십시오..

이제 완료!

이제 성공적인 웹 사이트를 만들고 구축하기에 충분할 것입니다. 이제 지식을 작동시켜야합니다. 지금 시작해서 인터넷을 흔들어!

* 번역 : EN ID

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map