DOM이란? — 웹페이지 조작의 원리를 비전공자도 이해하기

DOM(Document Object Model)은 웹페이지의 설계도입니다. 브라우저가 이 설계도를 읽어서 화면을 그리며, 설계도를 바꾸면 화면도 즉시 바뀝니다. 이것이 바로 스크린샷 조작이 쉬운 근본 원인입니다.

DOM을 쉽게 이해하는 비유

웹페이지 = 레고 블록으로 만든 집 각 블록(요소) = 텍스트, 이미지, 버튼, 링크 설계도(DOM) = 블록의 배치와 연결 관계 화면 = 완성된 집의 외관 레고 블록 하나를 빼거나 바꾸면 집 모양이 바뀌듯, DOM의 요소 하나를 바꾸면 화면이 즉시 변경됩니다.

DOM의 트리 구조

DOM은 나무(Tree) 구조로 되어 있습니다. 가족 관계처럼, 부모-자식 관계로 요소들이 연결됩니다.

html (최상위)

├── head │ ├── title → "네이버 카페" │ └── meta └── body ├── header │ └── h1 → "게시판 제목" ├── article │ ├── p → "게시물 내용이 여기에..." │ └── span → "작성자: 홍길동" └── footer └── p → "작성일: 2024-03-15"

위 구조에서 "게시물 내용이 여기에..."를 다른 텍스트로 바꾸면? 화면에 즉시 반영됩니다. 서버에 연락할 필요도 없이, 브라우저 안에서만 변경이 완료됩니다.

DOM 수정이 위험한 이유

1. 보이는 것만 바뀜 서버의 원본 데이터는 그대로지만, 내 화면에서는 완전히 다른 내용으로 보임
2. 캡처하면 증거됨 수정된 화면을 스크린샷 찍으면 "원래 이랬다"고 주장 가능
3. 초면 충분 개발자 도구에서 더블클릭 → 수정 → 캡처. 전문 지식 불필요
4. 흔적 없음 수정 후 스크린샷에는 조작의 흔적이 전혀 남지 않음

MutationObserver — DOM 변경 감시 기술

TrueSnap은 MutationObserver라는 웹 기술을 활용합니다. 이것은 DOM의 모든 변경을 실시간으로 감시하는 "CCTV"입니다.

1. 페이지 로드 완료 → MutationObserver 활성화 2. DOM 변경 시도 감지 → 변경 내용 기록 3. 캡처 시점에 검증 → 비정상 변경 존재 여부 확인 4. 인증서에 기록 → "DOM 무결성 유지됨" 또는 "변경 감지됨"

TrueSnap의 DOM 보호 체계

핵심 정리

1. DOM = 웹페이지의 구조를 나타내는 트리(설계도) 2. DOM을 수정하면 화면이 즉시 바뀜 3. 개발자 도구로 누구나 쉽게 DOM을 수정할 수 있음 4. 따라서 일반 스크린샷은 조작 증거 가능성이 있음 5. TrueSnap은 DOM 변경을 감시+차단하여 무결성을 보장