💻마케터가 알야하는 것: 웹 사이트의 기본 구조

마케터라면 온라인 마케팅은 더 이상 떨어질 수 없는 환경이 되었다고 생각합니다. 그리고 온라인 마케팅의 중요성이 증가하면서 온라인 마케팅의 꽃 '웹 사이트'의 중요성도 점점 중요해지고 있습니다. 혹시 웹 사이트의 대해 잘 모르신다면 한번 이번 글을 읽어 보시는건 어떨까요?

🗝온라인 마케팅과 웹 사이트: 웹 사이트를 알기 위해 이해해야 하는 것들

Step1. 웹 사이트 언어 이해하기 (글자로 그린 그림 웹 사이트)

웹 사이트를 만드는 데 엄청 복잡하고 어렵지 않으신가요? 사실 정말 어렵습니다…

웹 사이트를 만들기 위해 사용할 수 있는 프로그래밍 언어만 자바, 파이썬, 리액트 등 정말 다양하고 다양한 언어마다의 특징도 다 다르기 때문입니다.

"But 우리는 개발자가 아니다!"

하지만 우리는 개발자가 아니기 때문에 기본적으로 HTML, CSS, Javascript만 이해하고 있어도 충분하기 때문에 누구나 손쉽게 웹 사이트의 기본을 이해하실 수 있습니다.🙂

한번 아래 내용을 보고 이해해 보시기 바라며 궁금한 내용은 언제든지 댓글을 달아주시기 바랍니다.

⭕ HTML 이해하기

HTML은 기본적으로 웹 사이트의 뼈대를 만드는 작업을 합니다. 기본적인 구조와 텍스트를 작성하는 것이죠.

위 코드는 상단 네비게이션을 만들 때 사용할 수 있는 코드 인데요. 현재 ‘홈’, ’제품’, ‘뉴스’ 이렇게 글자만 보이죠!! 이렇게 HTML은 기본적으로 구조를 위해서 사용하게됩니다.

⭕ CSS에 대해서 이해하기

글자 밖에 없는 내용을 이쁘게 꾸미고 싶다고요? 그렇다면 CSS를 사용하면 됩니다.

처음보다 코드가 많이 길어졌죠? 알고보면 전혀 복잡하지 않으니깐 걱정마시고 <style> ~~~ </style>이 추가된게 보이실까요?

바로 이부분이 CSS입니다.

기본 뼈대인 ‘홈’, ‘제품’, ‘뉴스’에서 글자의 크기, 색깔 등 CSS를 통해 꾸민 것이죠!

⭕ Javascript에 대해서 이해하기

그럼 마지막으로 Javascript는 무엇일까요? 바로 기능이라고 이해해 주세요!

예를 들어 잘못 클릭했거나 특정 페이지 접근을 막기 위해서 만드는 기능이라고 생각하면 되요!

위에 알럿창이 보이실까요?

저렇게 우리가 단순히 보이는 것이 아닌 특정 기능을 추가할 때 사용하는 언어라고 이해해 주시면 되요!

코드는 아래 <script>~~~ </script> 부분을 확인해 주시면되요! 물론 자바스크립트라는 언어는 정말 다양한 분야에도 사용되고 있어요!

⭕ 최종

HTML, CSS, Javascript를 우리의 몸과 비유하자면 HTML = 뼈, CSS = 피부, Javascript = 근육 이라고 이해해 주세요! 뼈만 있다면 우리는 그냥 해골이지만 피부를 통해 우리는 각자 모두 다른 모습을 가지고 있죠. 그리고 서로 다른 근육을 통해 서로 다른 운동감각을 가지고 있죠.

이와 같이 모든 웹 사이트는 동일한 뼈를 가지고 있지만 CSS를 통해 다른 형태의 웹 사이트 모습을 가지고 있고 Javascript를 통해 다양한 성능을 보여주고 있는 것입니다.

Step2. 웹 브라우저 이해하기

제가 되게 가벼운 문제 하나 만들어 보았습니다.

답변은 가장 마지막에 작성해 놓았으니 한번 고민해 보시면서 내용을 읽어보시기 바랍니다.

문제: 아래 코드를 보고 어떠한 모습이 보이는지 예상해 보세오.

Step2-1: 웹 브라우저 역할이란?

여러분들은 위에서 나오는 코드를 보시면서 혹시 어떠한 코드인지 이해하셨나요?

아마 코드를 한번도 배우지 못한 분들이라면 이해하기 어렵지 않을까 생각하는데요!

이러한 부분을 대신 해석하고 우리가 보기 편하도록 보여주는 역할을 하는 것이 바로 우리가 사용하고 있는 크롬, 엣지와 같은 ‘웹 브라우저’ 입니다!

웹 브라우저는 다양한 기능을 가지고 있지만 가장 기본적으로 작성된 코드를 보고 우리가 이해하기 쉽게 그림으로 해석해 주는 역할을 하고 있는 것입니다.

그리고 저는 이러한 ‘웹 브라우저’를 ‘화가 준비생’이라고 표현하고 있는데요.

혹시 “어..!? 왜 ‘화가 준비생’인가요?” 이렇게 의문이 드셨나요?

그 이유는 모든 브라우저가 완벽하지 않기 때문입니다!

만약 그림을 배우기 시작한 분들에게 “사과”를 보여드리고 “똑같이 그려주세요.” 라고 한다면 모든 분들이 동일한 모습의 그림을 그리실 수 있을까요? 1000명, 10000명 모두 다른 그림을 그리시겠죠.

왜냐하면 그분들이 사용하는 도구, 스킬 등에 따라서 차이가 발생하기 때문에요!

이와 같이 크롬, 엣지, 웨일, 파이어 폭스와 같은 이름을 가진 ‘웹 브라우저(화가 준비생)’마다 이해할 수 있는 언어의 범위와 방법(도구와 스킬의 차이)이 달라 차이가 발생하게 됩니다.

그럼 왜 우리는 ‘크롬’이라는 ‘화가 준비생’을 권장하는 것일까요?

다양한 이유가 있지만 가장 대표적으로 가장 많이 사용하는 브라우저이기 때문입니다.

그렇기 때문에 많은 개발자 분들이 다양한 서비스를 ‘크롬’을 기반으로 개발하고 테스트를 진행해 운영하고 있기 때문에 크롬 브라우저를 사용하는 것이 가장 안정적이며 오류를 최소화 할 수 있는 것입니다.

Step3. 도메인..? 그냥 도메인 아닌가요?

142.251.46.206

*읽어보기 전에 위 숫자를 복사해서 한번 주소창에서 검색해 보세요! 무엇이 보이시나요?

여러분들의 검색을 위해 입력하는 도메인이 사실을 숫자라는 것을 아시나요?

사실 도메인은 문자로 만들어진 주소가 아닌 숫자로 만들어진 IP주소를 가지고 있습니다.

즉 우리의 홈페이지는 000.000.00.000와 같이 사실 숫자로 고유의 번호가 만들어지게 됩니다. 하지만 모든 웹사이트 검색을 위해 이러한 숫자로 입력하신다면 모두 기억해서 이용하기 어렵겠죠. 그래서 이러한 부분을 해결하기 위해서 글자(문자열)을 통해서 만들어진 도메인 주소를 사용하는 것입니다.

그리고 이렇게 만들어진 글자 주소의 경우 특이한 특징과 규칙을 가지고 있는데요.

이를 우리는 서브 도메인, 도메인 이름(상위 도메인, 최상위 도메인)으로 명칭하여 구분 지어두고 있습니다.

• 서브 도메인: 아래 예시와 같이 support와 같이 부가적인 홈페이지를 만들 때 사용합니다.

• 도메인 이름: 일반적인 도메인 이름을 뜻합니다. 주로 회사명이나 브랜드명을 사용해 제작합니다.

  • 상위 도메인: 도메인 이름에서 앞에 위치한 내용으로 wix와 같이 의 경우 도메인 앞에 붙는 도메인으로 아래 예시와 같은 부분을 뜻합니다.

  • 최상위 도메인: 도메인 이름에서 뒤에 위치한 내용으로 .com, .kr 와 같이 가장 마지막에 붙는 도메인을 뜻합니다. kr와 같이 국가명을 나타내거나 info와 같이 정보를 주는 홈페이지라는 점은 도메인 주소를 통해 확인할 수도 있습니다.

도메인은 해당 홈페이지의 특징과 이름을 보여줄 수 있고 SEO를 위해서도 중요한 요소이기 때문에 많은 분들이 웹사이트 도메인을 위해 다양한 노력을 기울이고 있습니다.

여러분들의 회사 또는 서비스는 어떠한 도메인을 사용하고 있으신가요?

이번 글을 마치면서 여러분들의 최상위 도메인은 무엇이고 서브 도메인은 무엇인지 한번 확인해 보시는건 어떨까요?

정답확인