BOM (Browser Object Model)

🤔 혹시 이런 생각 해본 적 없나요?

• "뒤로 가기를 눌렀을 때 이전 화면으로 돌아가는 동작은 어떻게 만들까요?"
• "이 사이트는 어떻게 내 폰 화면 크기를 딱 알고 모바일용 화면을 보여주지?"
• "내가 크롬을 쓰는지, 아이폰 사파리를 쓰는지 어떻게 알까?"

웹페이지 안의 내용물(글자, 그림)이 아니라, 그 페이지를 감싸고 있는 브라우저(인터넷 창)의 정보를 알아내고 조작하는 기술, 그게 바로 BOM입니다.

🔑 BOM, 한마디로 뭘까요?

BOM(Browser Object Model)은 웹페이지 내용(문서)이 아닌, 웹 브라우저 자체를 제어하는 리모컨입니다.

브라우저는 현재 주소와 뒤로 가기, 창 크기 등의 정보를 JavaScript에서 사용할 수 있도록 제공합니다. BOM은 이 기능들을 설명할 때 쓰는 묶음 이름이며, 개별 기능에는 보안과 사용자 동작에 따른 제한이 있습니다.

📺 첫 번째 비유: TV 리모컨

DOM과 BOM의 차이를 가장 쉽게 설명하는 비유는 TV입니다.

• DOM (콘텐츠): TV 화면 안에 나오는 드라마 내용, 주인공의 대사, 배경음악입니다. (드라마 내용 바꾸기)
• BOM (브라우저): TV 기계 자체의 기능입니다. 채널 변경, 볼륨 조절, 화면 밝기 조절, 전원 끄기 등이죠. (TV 기계 조작하기)

BOM은 바로 이 TV 기계(브라우저)를 조작하는 리모컨입니다. "야 브라우저야, 지금 보고 있는 페이지 말고 다른 주소(채널)로 이동해!" "지금 화면 크기(볼륨)가 몇인지 알려줘!" 이렇게 명령하는 것이죠.

🖼️ 두 번째 비유: '액자'와 '사진'

웹 브라우저를 하나의 액자라고 생각해 보세요.

1. DOM은 액자 속에 끼워진 '사진'입니다. 우리가 사진 속 인물의 표정을 고치거나 색칠을 하는 건 DOM 작업입니다. 사진(내용)을 건드리는 것이니까요.
2. BOM은 사진을 감싸고 있는 '액자틀' 그 자체입니다. 사진은 그대로 두고 액자만 가지고 할 수 있는 일들을 생각해 보세요.

• 액자 위치 옮기기 (Location): 액자를 거실에서 안방으로 옮깁니다. (다른 주소로 이동)
• 액자 크기 확인 (Screen/Window): 화면과 창의 크기 정보를 읽습니다. screen 정보가 곧 현재 웹페이지 영역의 크기는 아닙니다.
• 새 액자 걸기 (Window Open): 옆에다가 조그만 액자를 하나 더 겁니다. (새 탭/팝업창 띄우기)
• 액자 치우기 (Window Close): 걸려 있던 액자를 떼어냅니다. (창 닫기)
• 액자 브랜드 확인 (Navigator): 이 액자가 '삼성' 건지 'LG' 건지 확인합니다. (크롬인지 사파리인지 확인)

이 비유는 문서 내용과 브라우저 환경의 차이를 설명합니다. 실제로는 아무 창이나 닫거나 크기를 바꿀 수 없으며 팝업도 차단될 수 있습니다. 현재 창의 내용과 사용 가능한 기능을 확인하는 범위부터 시작합니다.

⚙️ 그래서 BOM은 어떻게 작동하나요?

window는 현재 브라우저 창이나 탭의 환경에 접근하는 객체입니다. 객체는 관련 정보와 기능을 함께 다루는 프로그램의 단위입니다.

우리가 보는 웹페이지(document/DOM)도 사실 이 window라는 창문 안에 들어있는 작은 부분일 뿐입니다.

마케터가 가장 많이 쓰는 BOM 기능들을 살펴볼까요?

1. 주소창 조작 (Location)

• 명령: window.location.href = 'https://naver.com'
• 결과: 네이버로 페이지가 이동합니다. (리다이렉트)

1. 브라우저 정보 확인 (Navigator)

• 명령: window.navigator.userAgent
• 결과: 브라우저가 보내는 식별 문자열을 반환합니다. 여러 제품 이름이 섞이거나 정보가 축소될 수 있어 실제 기기를 확정하는 값으로 쓰지 않습니다.

1. 방문 기록 제어 (History)

• 명령: window.history.back()
• 결과: 뒤로 가기 버튼을 누른 것처럼 이전 페이지로 돌아갑니다.

본문 개념을 설명하는 학습용 예시입니다. 실제 서비스 화면이 아닙니다.

💡 이걸 알면 마케터에게 뭐가 좋을까요?

웹페이지 내용을 바꾸는 일과 주소나 창의 정보를 읽는 일을 구분할 때 도움이 됩니다. 모든 기능의 코드를 외우기보다, 지금 확인하려는 정보가 문서 안에 있는지 브라우저 환경에 있는지 판단해 봅니다.

주소의 UTM 값 읽기

UTM은 유입 출처를 구분하려고 링크 주소에 붙이는 매개변수입니다. 예를 들어 utm_source=newsletter는 링크를 만든 사람이 출처를 newsletter로 표시했다는 뜻입니다. 실제 분석 보고서에 기록됐는지는 측정 태그, 동의 상태와 도구 설정까지 확인해야 합니다.

브라우저 정보의 한계

navigator.userAgent는 기기나 브라우저를 추정할 때 참고할 수 있지만 정확한 기기를 보장하지 않습니다. 특정 기능이 되는지 확인하려면 브라우저 이름만 보고 결정하기보다 그 기능의 지원 여부를 확인하는 편이 좋습니다.

페이지 이동 이해하기

location으로 다른 주소에 이동하도록 요청할 수 있습니다. 리다이렉트는 다른 주소로 보내는 동작이며 서버에서도 설정할 수 있습니다. 화면 이동과 방문자 배정, 성과 측정을 함께 설계해야 A/B 테스트가 되므로 주소 변경 하나가 실험 전체는 아닙니다.

주소를 읽고 문서 내용과 구분하기

다음은 학습용 주소입니다. 실제로 접속하지 않고 메모장이나 종이에 두 항목을 나눠 적습니다.

utm_source의 값은 newsletter, utm_campaign의 값은 autumn입니다. 페이지 제목이 "가을 행사"라고 보인다면 그 글자는 문서 내용이고, 주소의 매개변수는 브라우저가 보고 있는 URL의 일부입니다.

PC Chrome의 주소창을 클릭하면 현재 주소를 확인할 수 있습니다. 현재 글의 주소에 UTM이 없으면 없는 것이 정상입니다. 앞의 window.location.href = ... 예제는 주소를 읽는 코드가 아니라 다른 페이지로 이동시키는 코드이므로 이번 확인에 실행할 필요가 없습니다.

다음에는 가상 주소의 utm_source만 slack으로 바꿔 봅니다. 달라진 것은 출처로 표시한 값이며 행사 내용이나 실제 방문 기록이 자동으로 바뀐 것은 아닙니다. utm_campaign=autumn은 유지되는지 확인합니다.

출처 표시를 읽었다면 이번 학습은 마칠 수 있습니다. 보고서에 유입이 보이지 않는 문제는 주소 값을 적어 둔 뒤 분석 도구의 실제 수집 결과를 별도로 점검합니다. 주소가 잘렸거나 값이 보이지 않으면 먼저 전체 주소를 복사해 확인하고, 링크에 UTM이 원래 있었는지부터 대조합니다.

📋 3줄 요약

1. BOM은 웹페이지 내용이 아니라 브라우저 창 자체를 자바스크립트로 다루는 기술입니다.
2. 주소창의 URL과 뒤로 가기, 화면 크기, 브라우저 종류 같은 환경 정보가 여기에 담깁니다.
3. 주소의 UTM 값을 읽는 것과 분석 도구에 실제로 기록되는 것은 다르며 브라우저 정보만으로 기기를 확정하지 않습니다.

주소에서 직접 확인한 값과 분석 보고서에서 확인할 값을 구별하면 유입 경로 문제를 설명할 때 도움이 됩니다.

참고 자료

• MDN Window API 문서

• MDN userAgent의 한계

Window와 userAgent 공식 문서 확인: 2026년 10월 3일. 주소는 학습용 가상 예제입니다.