이 글을 클릭한 당신.
다음과 같은 이유로 방문했을지도..?
- 나만의 웹사이트를 만들고 싶어!
- 홈페이지를 만들어 사업을 키우고 싶어!
- 웹 프로그래밍을 습득해 경쟁력을 높이고 싶어!
맞는가?
그렇다면 잘 찾아오셨다 🙋♂️
모든 비즈니스가 온라인으로 확장되는 시대.
홈페이지 제작은 더 이상 선택이 아닌 필수가 되었다.
하지만 홈페이지 제작은
웹 프로그래밍이 가능한 일부의 능력자들만,
또는 그러한 전문가들을 고용할 수 있는
특별한 재력가들만 할 수 있다고 여겨 졌다.
이러한 이유로
시작도 전에 다들 포기하곤 한다.
(개발자도, 자본가도 아니라면 .. 그저.. 🥲)
그러나 시대가 변했다..!
홈페이지 제작,
이제는 누구나 가능하다.
사업을 위해,
또는 프로그래밍 입문을 위해!
이를 위한 배경지식을 하나씩 살펴보자.
글의 내용
웹사이트, 무엇?
웹사이트란,
인터넷 상의 가상의 공간이다.
(말해 모해.. 다들 RG?)
대표적 예로
쿠팡은 마켓을,
넷플릭스는 영화관을,
유튜브는 기존 방송국을
인터넷으로 옮긴 것이다.
이러한 웹사이트는
컨텐츠를 지역적 제한 없이
홍보 및 제공할 수 있어,
생산자뿐만 아니라
소비자에게도 많은 유익을 준다.
웹사이트, 어떻게 동작함?
그럼 웹사이트를 만들려면
먼저 무엇을 알아야 할까?
가장 기본이 되는 것은
클라이언트와 서버의 개념이다.
웹사이트는
클라이언트와 서버의
요청과 응답으로 동작한다.
여기서 클라이언트는
사용자의 기기가 되고
(브라우저, 스마트폰, 스마트워치 등)
서버는
웹사이트를 제공하는
컴퓨터가 된다.
웹 프로그래밍? 그래서 웹사이트는 어떻게 만드는데?
그래서 웹사이트는 어떻게 만들 수 있을까?
클라이언트측 개발과
서버측 개발을 하면 된다.
이들을 다른 말로
프론트 엔드 개발과
백 엔드 개발이라 한다.
프론트 엔드 개발은
사용자를 기준으로
보여지는 영역을,
백 엔드 개발은
사용자에게 감춰진 영역을
만드는 것이다
자동차를 만든다 할 때,
겉모양을 디자인을 하는 사람이 있고,
차랑 내부 설계를 하는 사람이 있듯 말이다.
프론트 엔드 언어들
그럼 보여지는 영역은 어떻게 만들까?
웹사이트의 보여지는 영역은
크게 3가지 언어로
나누어 만들어진다.
HTML은
문서의 골격을 만들고,
(디자인 1도 없는 글자 그대로의 문서)
CSS는
문서의 디자인을 꾸민다.
(앞서 만든 HTML 문서를 꾸며 줌)
여기에 Javascript를 통해
문서를 동작하게 할 수 있다.
(클릭 이벤트 처리, 다크모드 전환 등)
백 엔드 언어들
그럼 감춰진 않는 영역은 어떻게 만들까?
웹사이트의 감춰진 영역은
다양한 프로그래밍 언어들 중
하나를 택하여 만들 수 있다.
(Java, Python, NodeJS, Ruby 등 그 종류가 수 없이 많다)
개발자의 경우
이러한 개발 언어들을
한 두 가지 이상 사용할 줄 안다.
하지만 1도 모르는
비전공자들에게
이들은 외계어와 같을 것이다.
웹사이트 제작 서비스들
좀 더 쉽게 만들 순 없을까?
이러한 이유로
요즘엔 최소한의 코드로
웹사이트를 만들 수 있게 하는
여러 도구들이 나왔다.
해당 도구들은
백 엔드 언어뿐만 아니라
프론트 엔드 언어 학습 없이
간편히 웹사이트를 만들 수 있게 도와준다.
- 워드프레스 – 블로거에게 추천
- Wix – 소규모 사업자를 위해 추천
- Shopify – 전세계를 대상으로 한 상품판매자에게 추천
- 스마트스토어 – 국내를 대상으로 한 상품판매자에게 추천
- Webflow – 홈페이지 제작 프리랜서들에게 추천
앞으로..
여기까지
나만의 웹사이트 제작을 위한
최소한의 배경지식을 알아보았다.
그럼 다음시간부터
HTML, CSS, Javascript로
아주 작은 웹사이트를
직접, 하나씩 만들어보도록 하자.
To be continued..