지희’s Tech Note
데이터 분석과 웹, 연결의 기술

웹 구조를 읽을 수 있어야 데이터를 제대로 다룰 수 있다

May 20, 2025

우리는 하루에도 몇 번씩 검색창에 무언가를 입력한다.

오늘 날씨가 궁금할 때, 맛집을 찾을 때, 유튜브에서 영상 제목을 칠 때.

하지만 ‘입력’이라는 이 단순한 행동 뒤에는,
웹이 우리와 데이터를 주고받는 복잡한 구조가 숨어 있다.

웹에서 단순히 정보를 보여주는 것을 넘어서
사용자로부터 데이터를 받는 구조가 중요해지고 있다.

사용자 입력 구조

우리가 입력한 데이터가 웹을 통해 전송되기까지는
그 구조를 정의하고 작동시키는 HTML 요소들이 필요하다.
그 핵심이 바로 <form>과 <input> 태그다.

HTML 문서에서 사용자의 입력을 받는 구조는
정해진 형식에 따라 구성되어 있어야 서버가 정확히 인식할 수 있다.

따라서 단순히 태그만 쓰는 것이 아니라,
각 태그에 어떤 속성을 어떻게 주었는지가 중요하다.

아래는 사용자 입력을 처리하기 위해 사용되는 주요 HTML 태그와 속성이다.

태그/속성 역할 설명
<form> 입력값을 묶는 양식의 틀 역할 입력 데이터를 서버에 전송 준비
<input> 실제로 데이터를 입력받는 필드. 텍스트, 버튼, 체크박스 등 다양한 형태로 구성 가능
type 속성 input 필드의 형태를 지정 (예: text, submit, password 등)
name 속성 서버에서 어떤 입력값인지 구분할 이름(키)를 지정. (데이터를 식별하는 기준)

예를 들어, 로그인 화면에서 사용자 아이디를 입력받는 필드는
다음과 같이 구성될 수 있다.

<form>
  <label for="userid">아이디:</label>
  <input type="text" name="userid" id="userid" />
  <input type="submit" value="제출" />
</form>

시맨틱 웹과 UX

초기의 HTML은 단순히 화면을 ‘구성하는’ 데 초점이 맞춰져 있었다.
하지만 현대 웹은 문서의 구조와 의미를 함께 전달하는 방향으로 발전하고 있다.

이런 흐름을 시맨틱 웹(Semantic Web)이라고 부른다.
시맨틱 웹에서는 페이지를 구성할 때, 단순한 배치보다는
콘텐츠의 의미에 맞는 태그를 사용하는 것이 중요하다.

시맨틱 태그 예시

태그 용도 의미
<header> 문서의 머리말 영역
<main> 주요 콘텐츠 영역
<footer> 하단 정보 영역
<section> 주제별로 구분된 콘텐츠 블록
<article> 독립적으로 구성된 콘텐츠 단위

이처럼 시맨틱 태그를 사용하면, 웹 문서의 구조가 더욱 명확해진다.
이는 다음과 같은 측면에서 많은 이점을 제공한다.

  1. 웹 접근성 향상
    시각 장애인이나 키보드로만 웹을 사용하는 사람들도
    내용을 제대로 이해하고 사용할 수 있도록 도와준다.

    시각장애인을 위해 스크린 리더(Screen Reader)를 사용하는데,
    화면에 있는 텍스트와 요소를 소리로 읽어주는 프로그램이며,
    문서 구조가 명확하게 작성되어 있을수록,
    잘 이해하고 정확하게 안내한다.

  2. 검색 최적화(SEO)
    검색 엔진이 웹페이지의 내용을 더 잘 파악하게 해줘서
    검색 결과에 노출될 가능성을 높여준다.

  3. 사용자 경험(UX) 개선
    콘텐츠가 논리적으로 정리되어 있어서,
    사용자가 필요한 정보를 더 빠르게 찾고 편하게 이용할 수 있다.

    사용자의 불필요한 클릭이나 스크롤을 줄이는 구조 설계는
    결국 데이터 분석 관점에서도
    사용자 행동 데이터를 더 정확히 해석하는 기반이 된다.

GPT 시대, 개발자의 역할 변화

GPT와 같은 대형 언어 모델(LLM)의 등장은
개발 방식 자체를 바꿔놓고 있다.

이제 많은 개발자들이 GPT를 활용해 코드를 생성하고 있으며,
그동안 사람이 반복적으로 해오던 작업들은 점점 자동화되고 있다.

하지만 GPT가 아무리 똑똑해도, 아직 스스로 해내지 못하는 영역이 있다.

  1. 시스템 전체의 구조를 설계하는 능력
  2. 맥락과 상황에 맞는 기능을 구성하는 감각
  3. 실제 비즈니스에 맞게 로직을 조정하는 판단력

즉, GPT는 코드를 ‘작성’할 수는 있지만
어떤 코드를 ‘왜’ 어떻게 작성해야 하는지 결정하는 건 여전히 사람의 몫이다.

데이터 분석가에게 웹이 중요한 이유

통신 기술의 발전은 분석의 범위를 넓혔다.
이전에는 내부 데이터 중심의 분석이 대부분이었다면,
이제는 웹에서 생성되는 외부 데이터가 핵심이 되었다.

이 데이터들은 대부분 웹 구조 위에 존재하며,
분석가도 웹을 이해하고 다룰 수 있어야 한다.

웹에 대한 이해가 필요한 이유는,

  1. 웹 구조를 이해해야 크롤링이나 수집이 가능하다
  2. HTML 문법을 알아야 데이터 추출이 정확하다
  3. 통신 흐름을 이해해야 시스템적 분석이 가능하다
  4. 클라우드 기반 저장 및 처리 환경에 적응해야 한다

결국, 데이터를 보는 시야를 확장해주는 분석의 기반이 된다.

오늘을 마치며

웹의 구조와 작동 원리를 이해하는 일은
더 이상 개발자만의 영역이 아님을 인지하게 되었다.

GPT 시대, 분석가와 기획자에게도
웹 기술은 필수적인 요소가 되어버렸다.

기술의 흐름을 이해하고
그 위에서 데이터를 다루는 능력이
앞으로의 경쟁력을 결정짓는 중요한 기준이 될 것이다.