비개발자도 쉽게 배우는 디지털 환경 기초 지식
디지털 환경 기초 지식은 웹사이트가 어떤 재료로 만들어지고 브라우저에서 어떻게 움직이는지를 비개발자 눈높이로 정리한 코스입니다. 개발을 배우려는 것이 아니라 개발자와 같은 말을 쓰려는 사람을 위해 만들었습니다.
마케터와 디자이너가 개발자에게 요청을 넘길 때 가장 자주 어긋나는 지점은 무엇을 고쳐 달라는 것인지가 서로 다르게 들린다는 데 있습니다. 버튼의 색을 바꾸는 일과 버튼이 눌렸을 때 기록을 남기는 일은 건드리는 대상이 다릅니다. 앞은 CSS, 뒤는 자바스크립트와 DOM입니다. 이 차이를 알면 요청이 한 번에 전달됩니다.
📚 다루는 개념 13가지
- 웹페이지의 재료: HTML, CSS, 요소, 속성, 선택자
- 브라우저가 다루는 모형: DOM, BOM, 자바스크립트
- 데이터가 오가는 통로: API, JSON과 데이터 구조, 웹 크롤링
- 기록과 주소: 쿠키, 도메인과 셀프호스팅
태그 관리 도구에서 선택자를 적어야 하거나 개발자 도구를 열어 값을 확인해야 하는 상황이 실무에서 계속 나옵니다. 앞의 두 묶음을 읽어 두면 그 화면에서 무엇을 보고 있는지가 잡힙니다.
❓ 자주 묻는 질문
코드를 직접 써야 하는 편이 있나요?
없습니다. 코드를 읽고 무엇을 가리키는지 알아보는 데까지만 다룹니다. 예시는 모두 브라우저에서 바로 확인할 수 있는 형태로 넣었습니다.
GA4나 GTM을 쓰려면 어디까지 알아야 할까요?
HTML 요소와 속성, 선택자 세 편이면 태그 관리 도구의 트리거 설정을 읽을 수 있습니다. dataLayer를 직접 설계해야 한다면 JSON과 데이터 구조 편까지 보는 것을 권합니다.
웹 크롤링 편은 검색엔진 이야기인가요?
검색엔진이 페이지를 가져가는 방식과 데이터를 긁어 오는 방식을 함께 다룹니다. 검색 노출 쪽을 더 보고 싶으면 검색엔진 최적화 기초 코스로 이어집니다.
🔗 함께 보는 코스
- 비개발자를 위한 검색엔진 최적화(SEO) 기초: 크롤링과 색인, 사이트맵을 다룹니다
- 바이브코딩 기초지식: 터미널과 Git, 배포처럼 만든 것을 내보내는 단계를 다룹니다
세 줄로 먼저 읽기
이번 방문에서 한 편은 바로 볼 수 있습니다.
웹 크롤링 (Web Crawling)
웹사이트의 정보를 자동으로 수집하는 기술입니다. 사람이 일일이 복사-붙여넣기 할 필요 없이, 프로그램이 웹페이지를 돌아다니며 원하는 데이터를 모아줍니다.
HTML (HyperText Markup Language)
웹페이지의 구조와 의미를 정의하는 마크업 언어입니다. 제목, 링크, 이미지 같은 요소로 페이지의 뼈대를 만듭니다.
CSS (Cascading Style Sheets)
HTML로 만든 웹페이지의 색상, 글꼴, 배치를 꾸미는 스타일 언어입니다.
자바스크립트(JavaScript) 이해하기
JavaScript는 웹사이트의 생동감을 불어넣는 주인공입니다. 장바구니, 스크롤, 비밀번호 입력 등 웹 페이지의 기능을 하는 자바스크립트를 지금 바로 알아보고 디지털마케팅과 이커머스 데이터의 세계로 발을 내딛어 보세요!
BOM (Browser Object Model)
BOM(Browser Object Model)이란 웹 브라우저 자체를 제어하는 기술입니다. 브라우저의 기능(뒤로 가기, 화면 크기, 브라우저 종류 등)을 JavaScript로 조작할 수 있게 해줍니다. BOM을 활용하여 사용자 경험을 개선하고, 다양한 환경에 최적화된 웹 페이지를 만들 수 있습니다.
DOM (Document Object Model)
브라우저가 HTML 문서를 읽어 만든 트리 구조로, 자바스크립트가 웹페이지의 요소를 찾고 조작할 때 쓰는 통로입니다.
HTML 요소 (Element)
웹페이지를 구성하는 가장 작은 부품이 Element(요소)입니다. 버튼, 이미지, 텍스트 등 화면에 보이는 모든 것이 각각 하나의 Element이며, 이들이 조립되어 하나의 웹사이트를 완성합니다.
HTML 속성 (Attribute)
Attribute(속성)는 HTML Element에 붙는 추가 정보입니다. 택배 상자의 송장처럼, 이름표(id), 분류표(class), 목적지(href) 같은 값으로 각 Element를 식별하고 동작을 결정합니다.
선택자 (Selector)
웹페이지에서 특정 Element를 찾아내기 위한 '주소'나 '이름표' 같은 것입니다. CSS에서 스타일을 적용하거나, GTM에서 클릭 이벤트를 추적할 때 '이 버튼'을 지정하는 방법입니다.
API (Application Programming Interface)
서로 다른 프로그램이나 서비스가 서로 소통하고 데이터를 주고받을 수 있도록 만들어진 '약속된 연결 통로'입니다.
쿠키 (Cookie)
웹사이트가 사용자의 브라우저에 저장하는 작은 텍스트 파일로, 사용자를 기억하고 추적하기 위한 정보를 담고 있습니다.
도메인과 셀프호스팅 (Domain & Self-hosting)
도메인은 인터넷에서 내 서비스를 찾을 수 있는 고유 주소이고, 셀프호스팅은 남의 플랫폼 대신 내가 직접 서버를 운영하는 방식입니다.
JSON과 데이터 구조 (JSON & Data Structures)
JSON은 데이터를 주고받을 때 가장 널리 쓰이는 텍스트 형식이고, 데이터 구조는 정보를 담는 그릇의 모양입니다. AI에게 원하는 결과물의 형태를 알려줄 때 핵심이 되는 개념입니다.