본문 바로가기


냐옹아 멍멍해봐(How to Speak IT)/테크(IT) 회화

웹 사이트(ft. 웹 빌더)

반응형

IT 스타트업의 서비스 형태 ① 웹 사이트(ft. 웹 빌더)

IT 스타트업의 서비스 형태 ① 웹 사이트

 

 

IT 서비스 유형

 

고객이 인터넷을 통해 많은 회사들이 제공하는 서비스를 이용하는 방법은 크게 두 가지입니다. 크롬, 인터넷 익스플로러 같은 웹 브라우저를 이용해 원하는 회사의 웹사이트에 접속하거나, 회사가 만든 앱을 다운받아 설치하는 것이죠. 예를 들면, 고객은 웹브라우저로 네이버의 홈페이지에 접속하고, 카카오톡 앱을 다운로드하여 설치합니다.

 

따라서 IT 스타트업이 제품이나 서비스를 개발한다는 것은 고객이 접속할 웹사이트를 만들거나 앱을 만든다는 뜻입니다.

 

 

IT 서비스의 유형 - 웹 사이트와 앱 (카카오 이미지 사진 출처: https://business.kakao.com/info/kakaotalkchannel/)

 

 

이번 포스팅에서는 웹사이트를 만드는 것에 대해 살펴보도록 하겠습니다.

 

 

웹, 웹 서버와 웹 클라이언트

 

웹(Web)은 월드 와이드 웹(World Wide Web, WWW)의 줄임말로 인터넷에서 쉽게 정보를 검색할 수 있는 시스템 또는 서비스를 의미합니다. 인터넷에서 가장 많이 사용되는 서비스이기에 많은 사람들이 인터넷과 웹을 같은 의미로 사용하곤 합니다.

 

웹에 대해 자세히 ⇒ 쉽게 이해하는 네트워크 3. 인터넷과 월드 와이드 웹

 

웹은 인터넷에 접속한 전 세계의 컴퓨터를 거미줄(Web)처럼 연결하여 컴퓨터 간에 정보를 주고받을 수 있게 합니다. 웹에서 정보를 주는 컴퓨터를 웹 서버(Web Server), 정보를 받는 컴퓨터를 웹 클라이언트(Web Client)라고 합니다. 카페나 식당에서 서비스를 받는 쪽을 고객(Client)이라 하고, 서비스를 제공하는 쪽을 서빙하는 사람(Server)이라고 얘기하는 것처럼 웹 서비스를 제공하는 컴퓨터를 웹 서버, 웹 서비스를 이용하는 컴퓨터를 웹 클라이언트라고 하는 것입니다.

 

 

웹 페이지와 웹 브라우저

 

웹 서버는 웹 클라이언트에게 정보를 웹 페이지(Web Page)라는 문서에 담아 제공합니다. 다시 말해 웹 페이지는 텍스트, 이미지, 오디오, 동영상 등의 다양한 정보가 담긴 웹 문서이고, 웹 서버는 웹 페이지를 웹 클라이언트에게 제공하는 것입니다.

 

웹 서버가 제공하는 웹 페이지는 HTML이라는 컴퓨터 언어로 작성되기 때문에 사람이 읽기 쉽지 않습니다. 사람이 읽기 어려운 형태의 웹 페이지를 읽고 해석하여 사람이 보기 편한 형태로 변환해주는 소프트웨어 또는 프로그램이 웹 브라우저(Web Browser)입니다. 

 

HTML, 웹 브라우저 자세히 ⇒ 쉽게 이해하는 네트워크 19. 팀 버너스 리가 개발한 월드 와이드 웹(WWW)의 3대 요소 

 

웹 사이트와 도메인

 

웹 서버에 저장된 웹 페이지의 집합, 즉 웹 페이지가 모인 장소(Site)를 웹 사이트(Web Site)라고 합니다. 예를 들면, 네이버 웹 사이트란 네이버라는 회사가 만든 웹 페이지가 모여 있는 장소인 것입니다. 하나의 웹 서버에 하나의 웹 페이지를 만들 수도 있고 다수의 웹 페이지를 만들 수도 있습니다. 또한 여러 개의 웹 서버가 하나의 웹 페이지를 만들기도 합니다. 웹 사이트에 얼마나 많은 정보를 담을지, 얼마나 많은 사람들이 접속할지(트래픽)등을 고려하여 웹 서버로 사용할 컴퓨터의 사양, 갯수 등을 결정하기 때문입니다. 

 

오프라인에서 카페나 식당이라는 장소에 찾아가기 위해 주소가 필요한 것처럼, 온라인에서도 웹 페이지가 모여있는 장소인 웹 사이트를 찾아가기 위한 주소가 필요합니다. 인터넷에서 웹 사이트를 찾을 수 있게 하는 주소, 즉 웹 사이트의 주소를 IP 주소라고 합니다. IP 주소는 숫자와 점으로만 이루어져 있어서 사람이 기억하기 어렵습니다. 그래서 IP 주소 대신 사람이 읽기 편하고 기억하기 쉬운 도메인 주소(도메인 네임)를 사용합니다. 도로명 주소 대신 카페나 식당의 간판을 보고 찾아가는 것과 비슷하다고 할 수 있습니다.

네이버 웹 사이트에 접속할 때 웹 브라우저의 주소창에 입력하는 "www.naver.com"이 바로 도메인 주소입니다.

 

IP 주소 자세히 ⇒ 쉽게 이해하는 네트워크 13. IP 주소 의미와 체계 및 서브넷 마스크

도메인 자세히 쉽게 이해하는 네트워크 15. 도메인 의미와 계층 구조

 

웹 사이트를 만든다는 것의 의미

스타트업이 웹 사이트를 만든다는 것은

① 고객에게 전달하고 싶은 정보를 담은 웹 페이지들을 만들고,

② 웹 페이지들을 웹 서버에 저장하여 웹 사이트를 생성하고, 웹 사이트의 도메인 주소를 공개함으로써

고객이 24시간 내내 언제든지 웹 사이트에 접속할 수 있게 한다는 의미입니다.

 

 ① 웹 페이지 만드는 방법

① - 1 웹 코딩 

웹 페이지를 만든다는 것은 HTML(HyperText Markup Language)이라는 컴퓨터 언어(또는 웹 코딩 언어)로 문서를 작성하는 것을 의미합니다. 한글 프로그램으로 작성한 문서에 hwp라는 확장자가 붙는 것처럼 HTML로 만든 웹페이지는 html이라는 확장자가 붙습니다. 확장자가 hwp인 문서를 읽으려면 한글 프로그램이나 한글 뷰어 프로그램을 설치해야 하는 것처럼 확장자가 html인 웹 페이지를 읽으려면 웹 브라우저가 필요합니다. 위에서 웹 브라우저를 웹 페이지 해석기라고 설명한 이유입니다. 

 

웹 페이지를 만드는 것은 웹 퍼블리셔(Web Publisher)라고 불리는 개발자가 담당합니다. 웹 페이지를 작성하는 것을 웹 코딩(Web Coding)이라고도 표현하는데 HTML뿐만 아니라 CSS, JavaScript 같은 웹 코딩 언어들에 대한 지식이 필요합니다.

 

웹 페이지를 만들기 위해서는 웹 코딩에 앞서 웹 페이지를 컨셉에 맞게 디자인하고 전체적인 UI/UX 틀을 만든는 작업이 필요합니다. 이렇게 웹 사이트의 디자인을 구성하는 직군을 웹 디자이너(Web Designer)라고 합니다. 

 

따라서 웹 코딩으로 웹 페이지를 만드는 경우 웹 디자이너와 웹 퍼블리셔 프리랜서를 고용하거나 웹 페이지 외주 제작 회사를 통해 웹 페이지를 만들 수 있습니다. 

 

웹 코딩 - HTML

① - 2 웹 빌더

웹 사이트가 보편화되면서 웹 언어들에 대한 지식이 없어도, 즉 코딩을 몰라도 웹 페이지를 쉽고 빠르게 만들 수 있는 서비스들이 많이 생겼습니다. 이런 서비스들은 기본적으로 미리 만들어 놓은 템플릿에 필요한 기능을 드래그 앤 드롭 방식으로 편집해서 초보자도 직관적으로 손쉽게 웹사이트를 만들 수 있게 합니다. 이렇게 일종의 DIY방식으로 웹사이트를 만들 수 있는 서비스를 제공하는 회사들을 '웹 빌더(또는 웹 사이트 빌더)'라고 하며 대표적인 웹 빌더에는 윅스(WIX), 아임웹이 있습니다.

 

단순한 웹 사이트를 빠르게 직접 만들고 싶을 경우 웹 빌더가 좋은 대안입니다. 

 

 

대표적인 웹 빌더 윅스(Wix)

 

① - 3 워드프레스

웹 빌더를 이용하면 웹 사이트를 손쉽게 만들 수 있지만, 웹 빌더가 제공하는 기능 내에에서 웹 사이트를 만들어야 하기 때문에 유연성이 떨어집니다. 따라서 웹 사이트에 기능을 추가하고 관리하는 데 있어서 많은 제약이 따릅니다. 웹 빌더보다 유연하지만 웹 언어를 익히는 만큼의 지식은 필요하지 않은 웹 사이트 개발 서비스가 워드프레스(WordPress)입니다. 

 

워드프레스 홈페이지

 

워드프레스는 웹 코딩을 몰라도 누구나 손쉽게 웹 사이트를 만들 수 있는 도구를 제공하겠다는 목적으로 웹 빌더보다 먼저 생긴 서비스입니다. 현재 전 세계 웹 사이트의 3개 중 1개는 워드프레스로 만들어졌을 정도로 많이 인기 있는 서비스입니다. 웹 빌더와 같이 기본적으로 템플릿 시스템을 사용합니다. 워드프레스가 널리 보급된 이유는 웹 사이트를 아름답고 유용하게 꾸밀 수 있는 풍부한 테마와 플러그인 덕분입니다. 워드프레스 자체에서 제공하는 테마와 플러그인 뿐만 아니라 수많은 서드파티(3rd party) 제작자가 테마와 플러그인을 개발해 유료, 무료로 제공하고 있는 워드프레스 생태계 덕분에 웹 코딩을 모르는 일반인도 원하는 기능을 쉽게 추가할 수 있습니다. 

 

웹 코딩을 몰라도 워드프레스를 사용하면 훌륭한 웹 사이트를 제작할 수 있지만, 워드프레스 자체의 사용법을 익히는게 그리 쉽지만은 않습니다. 워드프레스 사용법에 대한 책과 사이트들이 있을 정도니까요. 웹 코딩을 배우는 것보다는 러닝 커브(Learning Curve)가 낮지만, 워드프레스 사용법을 익히기 위한 시간과 노력이 필요합니다. 그래서 워드프레스로 웹 사이트를 만들어주는 전문 프리랜서들도 많이 있습니다. 

 

워드프레스로 웹 사이트를 만들 경우 프리랜서를 고용하거나, 책 또는 웹 사이트 등의 정보를 통해 직접 익혀가며 만들 수 있습니다. 

 

 ② 호스팅과 도메인

웹 페이지를 만들면 웹 서버에 저장을 하고 웹 사이트를 생성하여 도메인 주소를 정하고 고객에게 알려야 합니다.

 

웹 서버는 웹 페이지를 저장할 컴퓨터이기 때문에 개인용 컴퓨터(PC)도 웹 서버로 사용할 수 있습니다. 하지만, 웹 서버는 24시간 안정적으로 운영되어야 하고, 보안 시스템도 필요하며, 수많은 사용자의 접속을 감당할 수 있어야 하기에 보통 성능이 좋은 컴퓨터를 사용하고 서버 관리 엔지니어가 특별한 관리를 합니다. 네이버 같은 큰 회사는 성능이 뛰어난 서버 컴퓨터를 구매하고 별도의 데이터 센터를 마련하여 서버를 관리하고 있습니다. 

 

네이버 데이터 센터(사진 출처: https://datacenter.navercorp.com/archive/tech-talk/10)

 

 

하지만, 웹 서버를 관리할 능력이 부족한 개인이나 회사들은 서버를 전문적으로 관리하는 업체로부터 서버 컴퓨터를 빌려 사용합니다. 이렇게 서버 컴퓨터를 임대해 주는 서비스를 호스팅(Hosting)이라고 합니다. 호스팅 업체는 고객이 운영하려는 서비스에 따라 선택할 수 있도록 다양한 호스팅 서비스를 제공합니다. 호스팅 업체마다 조금씩 다른 서비스를 제공하고 있지만 크게 웹 호스팅과 서버 호스팅으로 구분할 수 있습니다. 웹 호스팅은 여러 고객이 하나의 서버를 나누어 사용하는 것이고, 서버 호스팅은 고객이 하나의 서버를 단독으로 사용하는 형태입니다. 카페 24(Cafe 24), 가비아(Gavia), 닷홈(Dothome) 등이 대표적인 국내 호스팅 업체입니다.

 

2021 호스팅 업체 순위 보기

 

대표적인 웹 호스팅 업체 닷홈(Dothome) 홈페잊

 

 

호스팅 서비스를 이용해 웹 서버를 만들고 웹 사이트를 생성할 경우 도메인 주소와 IP 주소가 함께 생성됩니다. 도메인 주소는 호스팅 서비스가 제공하는 무료 도메인을 사용할 수 있고, 회사 이름 등 특별히 원하는 도메인이 있는 경우 도메인 등록 업체로부터 구매해서 사용할 수도 있습니다.

 

 

정리하며: 웹 페이지와 웹 애플리케이션

웹 페이지의 집합인 웹 사이트는 보통 서비스 제공자가 고객에게 정보를 일방적으로 전달합니다. 회사를 소개하는 웹 사이트나 뉴스 사이트 등이 대표적인 웹 사이트입니다.

 

하지만, 요즘은 이렇게 일방적인 정보를 전달하는 웹 서비스보다 고객, 즉 사용자와 상호 작용하면서 사용자가 작성한 글, 업로드한 사진이나 동영상 등을 처리하고 웹 페이지에 보여주는 형태의 서비스가 많습니다. 페이스북, 인스타그램 같은 SNS 서비스, 온라인 쇼핑몰 등은 사용자의 댓글, 좋아요, 사진 업로드, 동영상 업로드, 장바구니, 온라인 결제 등 사용자의 요구에 따라 반응하며 변화하는 웹 페이지를 보여줍니다. 기본적인 웹 사이트에서 진화해 사용자와 상호작용이 가능한 웹 서비스를 웹 애플리케이션이라고 합니다. 위에서 예로 든 네이버 사이트는 웹 사이트 성격을 갖고 있는 웹 애플리케이션이라 할 수 있습니다.

 

IT 스타트업이 만드는 서비스 형태는 보통 사용자와 상호 작용이 필요한 웹 애플리케이션입니다.

 

웹 사이트는 스타트업 혹은 스타트업의 서비스를 홍보하거나, 웹 애플리케이션을 구축하기 전에 MVP(Minimum Viable Product, 최소 기능 제품)를 만들어 테스트 하는 용도로 사용할 수 있고, 웹 사이트를 이해해야 웹 애플리케이션을 이해할 수 있기 때문에 먼저 설명한 것입니다.

 

다음 포스팅에서는 웹 애플리케이션에 대해 자세히 살펴보도록 하겠습니다.

반응형