SSOT와 DOM 개념 정리 — 정의부터 실무 활용까지

한 줄 요약

SSOT는 하나의 데이터를 한 곳에서만 관리하는 설계 원칙이고, DOM은 화면을 객체 트리로 표현해 프로그램이 다룰 수 있게 만든 표준 인터페이스입니다. 두 개념은 "기준은 한 곳에 두고, 화면은 결과만 보여준다"는 하나의 흐름으로 이어집니다.

---

1. DOM이란

DOM(Document Object Model)은 HTML·XML 문서를 프로그램이 읽고 바꿀 수 있도록 만든 인터페이스입니다.

W3C 문서는 DOM을 플랫폼과 언어에 중립적인 인터페이스로, 프로그램과 스크립트가 문서의 내용·구조·스타일에 동적으로 접근하고 갱신할 수 있게 하는 것으로 규정합니다.

현재 유지·관리되는 규격은 WHATWG의 DOM Standard이며, 이벤트와 노드 트리에 대한 플랫폼 중립적 모델을 정의합니다. W3C가 2004년에 마지막 권고안을 낸 이후 WHATWG가 리빙 스탠다드 형태로 개발을 이어받았고, 현재 W3C는 안정화된 스냅샷을 발행합니다.

용어 한 줄 풀이

• 노드(Node): 문서를 구성하는 하나의 단위. 요소, 텍스트, 주석이 각각 노드입니다.
• 트리(Tree): 부모와 자식 관계로 이어진 계층 구조.
• 리빙 스탠다드(Living Standard): 버전을 끊어 발표하지 않고 계속 갱신되는 표준 문서 형태.

왜 중요한가

화면은 하나의 그림이 아니라 작은 객체들이 부모와 자식으로 쌓인 구조입니다. 헤더 안에 로고, 본문 안에 표, 표 안에 행 하나하나가 모두 객체입니다. 이 구조가 표준으로 정의되어 있기 때문에, 브라우저마다 내부 구현이 달라도 개발자는 같은 방식으로 화면을 다룰 수 있습니다.

---

2. SSOT란

SSOT(Single Source of Truth)는 하나의 데이터에 대해 공식 원본 위치를 한 곳만 두는 설계 원칙입니다.

DOM과 달리 SSOT는 RFC·W3C·IEEE 같은 표준 문서로 규격화된 용어가 아닙니다. 각 기술의 공식 문서에서 원칙으로 서술됩니다.

React 공식 문서는 모든 상태가 한 곳에 모여야 한다는 뜻이 아니라, 각각의 상태 조각마다 그 정보를 보유하는 특정 컴포넌트가 하나 정해져 있다는 의미라고 설명합니다.

Redux 공식 문서는 첫 번째 원칙으로 애플리케이션 전체 상태를 하나의 스토어 안 객체 트리에 저장하는 방식을 제시하며, 이를 통해 디버깅과 상태 확인이 쉬워지고 실행 취소 같은 기능도 단순해진다고 밝힙니다.

데이터 플랫폼 영역에서도 같은 원칙이 쓰입니다. Databricks 문서는 저장과 접근을 하나의 시스템으로 통합해 여러 시스템 간 복사본을 만들고 동기화할 필요를 없애는 것을 SSOT로 설명하고, 데이터를 중복해 두면 팀마다 품질과 최신성이 다른 버전을 쓰게 되는 문제를 지적합니다.

왜 중요한가

같은 정보가 두 곳에 저장되면, 한쪽만 바뀌는 순간 어느 쪽이 맞는지 판단할 근거가 사라집니다. SSOT는 이 불일치가 애초에 생기지 않도록 구조를 잡는 방법입니다.

---

3. 쉽게 이해하는 설명

비유: 주방의 주문서와 손님용 전광판

• SSOT = 주방에 걸린 원본 주문서
• DOM = 손님이 보는 전광판 화면

주문이 바뀌면 원본 주문서를 고치고, 전광판은 그 내용을 다시 표시합니다. 반대로 전광판만 손으로 고쳐두면 주방은 그 사실을 모릅니다. 이 순간부터 진짜 주문이 두 개가 됩니다.

화면에 표시된 값을 다시 읽어서 계산에 쓰는 코드가 위험한 이유가 이것입니다. React 공식 문서 역시 컴포넌트끼리 상태를 동기화하려 하지 말고, 가장 가까운 공통 상위 컴포넌트로 상태를 끌어올려 위에서 아래로 흐르는 데이터 흐름에 의존하라고 안내합니다.

---

4. 실무에서 어떻게 쓰이는가

4-1. AI로 개발할 때 규칙을 고정하는 용도

AI에게 화면을 맡기면 매번 새로 판단하기 때문에 화면마다 버튼 모서리, 여백, 색상 코드가 조금씩 달라집니다. 규칙의 원본을 한 곳에 두면 이 문제가 줄어듭니다.

• 색상, 폰트, 여백 값을 한 파일에 정의하고 화면에서는 참조만 합니다
• 버튼은 매번 새로 만들지 않고 공통 컴포넌트 하나를 가져다 씁니다
• AI에게 지시할 때 "이 규칙 파일을 기준으로 작업해달라"고 원본을 지정합니다

값을 화면마다 직접 써넣으면 원본이 화면 수만큼 생깁니다. 나중에 색 하나를 바꾸려면 전부 찾아다녀야 합니다.

4-2. 화면 갱신 범위를 좁히는 용도

방식	동작	결과
전체 새로고침	페이지 전체를 다시 그림	화면이 깜빡이고 스크롤 위치와 입력값이 초기화됨
부분 갱신	바뀐 노드만 교체	레이아웃은 그대로, 값만 바뀜

새로고침할 때 화면이 줄었다 늘었다 하는 현상은, 전체를 다시 그리는 과정에서 데이터가 도착하기 전 빈 상태로 먼저 그려졌다가 다시 채워지기 때문에 생깁니다. 레이아웃은 유지하고 데이터 영역의 노드만 갱신하면 이 흔들림이 사라집니다.

4-3. 조직 데이터 관점

Google Cloud 참조 아키텍처는 기존 인사 시스템(HRIS)을 신원 관리의 단일 원본으로 유지하고 계정을 자동으로 프로비저닝하는 구성을 제시합니다. 사람 정보의 원본을 인사 시스템 한 곳으로 정하고, 나머지 시스템은 그것을 받아쓰는 구조입니다.

---

5. 핵심 정리

• DOM은 문서를 노드 트리로 표현하는 플랫폼·언어 중립 인터페이스이며, 현재 규격은 WHATWG DOM Standard입니다.
• SSOT는 하나의 데이터를 한 곳에서만 수정·관리하는 설계 원칙이고, 표준화 기구가 정의한 규격 용어는 아닙니다.
• 디자인 값과 공통 컴포넌트의 원본을 한 곳에 두면 AI 개발에서도 규칙이 흔들리지 않습니다.
• 데이터의 기준은 상태에 두고, DOM은 그 결과를 보여주는 자리로만 사용합니다.
• 갱신 범위를 데이터 영역으로 좁히면 레이아웃 흔들림과 입력값 초기화를 줄일 수 있습니다.

---

6. 점검 항목

• 색상, 여백, 폰트 값이 여러 파일에 흩어져 있지 않은지 확인합니다.
• 같은 역할의 컴포넌트가 화면마다 따로 만들어져 있지 않은지 확인합니다.
• 화면에 표시된 텍스트를 다시 읽어서 로직에 쓰는 코드가 없는지 확인합니다.
• 데이터만 바뀌면 되는 상황에 전체 페이지를 다시 불러오고 있지 않은지 확인합니다.

---

7. 주의사항

가상 DOM(Virtual DOM)은 표준 문서에 정의된 개념이 아닙니다. 일부 라이브러리가 화면 갱신을 최적화하기 위해 사용하는 구현 방식이며, WHATWG DOM Standard의 규격 항목이 아닙니다.

SSOT에 대한 국제 표준(ISO·IEEE 등)의 공식 정의는 확인되지 않았습니다. 각 기술 벤더와 프레임워크 공식 문서에서 원칙으로 서술되는 개념입니다.