반복영역 건너뛰기
주메뉴 바로가기
본문 바로가기
제품/서비스
EMS Solution
Features
클라우드 관리
서버관리
데이터베이스 관리
네트워크 관리
트래픽 관리
설비 IoT 관리
무선 AP 관리
교환기 관리
운영자동화
실시간 관리
백업 관리
스토리지 관리
예방 점검
APM Solution
애플리케이션 관리
URL 관리
브라우저 관리
ITSM Solution
서비스데스크
IT 서비스 관리
Big Data Solution
SIEM
AI 인공지능
Dashboard
대시보드
Consulting Service
컨설팅 서비스
고객
레퍼런스
고객FAQ
문의하기
가격
자료실
카탈로그
회사소개
비전·미션
연혁
2016~현재
2000~2015
인증서·수상
투자정보
재무정보
전자공고
IR자료
새소식
공고
보도자료
오시는 길
채용
피플
컬처
공고
FAQ
블로그
열기
메인 페이지로 이동
블로그
기술이야기
블로그
최신이야기
사람이야기
회사이야기
기술이야기
다양한이야기
SMS를 통한 서버관리는 꼭 이렇게 해야만 한다?!
네트워크 정보 수집 프로토콜의 모든 것 (SNMP, RMON, ICMP, Syslog)
임형섭
2024.03.04
페이스북 공유하기
트위터 공유하기
링크드인 공유하기
블로그 공유하기
무선 AP를 WNMS를 통해 올바르게 관리하는 방법
지난 포스팅을 통해
NMS의 기본 개념
과
NMS의 구성요소와 역할
에 대해서 살펴보았는데요. 오늘은
네트워크 정보 수집을 위한 다양한 프로토콜
에 대해서 자세히 알아보겠습니다.
네트워크 프로토콜(Network Protocol)은 네트워크에 연결된 장비 간의 메시지 흐름을 통제하고 관리하는 기본적인 절차와 규칙을 정한 규약입니다.
웹 브라우저, 파일 전송, 이메일 송수신, 미디어 스트리밍 등과 같은 모든 온라인 활동을 가능하게 하기 때문에 네트워크 정보 전달의 핵심요소라고 할 수 있죠.
이번 시간에는 주요
네트워크 프로토콜인 ICMP, SNMP
를 중점적으로 알아보겠습니다.
ㅣICMP는 무엇이고 어떻게 동작하는가?
ICMP(Internet Control Message Protocol)는 주로 네트워크의 경로상의 문제나, 호스트(단말)의 문제 등을 파악할 때 사용하는 프로토콜인데요. 대표적인 서비스가 ping입니다. 구체적인 동작원리를 살펴보면 다음과 같습니다.
오류 보고
◾ 네트워크에서 데이터를 보낼 때 오류가 발생하면, 오류를 발생시킨 장비(예: 라우터, 스위치)는 오류 정보를 담아 ICMP 메시지를 처음 보낸 사람에게 전송합니다. 이를 통해 무엇이 잘못됐는지 정확히 파악하고 문제를 해결할 수 있습니다.
◾ 예를 들어 한 컴퓨터에서 인터넷을 통해 데이터를 보내는데, 그 데이터가 목적지에 도달하지 못하면 ICMP가 '이 주소로는 데이터를 배달할 수 없어!'라고 알려주는 역할을 하죠. 이렇게 사용자나 네트워크 관리자가 문제를 알리고 대응할 수 있게 도와주는 게 ICMP의 주요 역할입니다.
[그림] ICMP 동작 방식
진단 및 테스트
◾ 네트워크의 연결 상태나 성능을 테스트하기 위해 ICMP 에코 요청과 에코 응답 메시지를 사용합니다. 이를 통해 네트워크의 지연시간(latency)이나 패킷 손실(packet loss) 등을 측정할 수 있습니다. '핑(ping, Packet INternet Groper)'을 대표적인 예로 들 수 있습니다.
◾ 쉽게 표현하면 '너 지금 연결 잘 되어 있니?'라고 물었을 경우 대상 장비가 '응, 잘 되어 있어!'라고 대답하면 연결이 잘 되어 있는 것이고, 대답이 없거나 늦는 것과 같은 문제를 식별하는 것이죠.
ICMP도 좋은 도구이지만, 네트워크의 복잡성이 빠르게 증가하고 호스트 수가 증가하면서 ICMP만으로는 네트워크 관리가 어려워지는 문제가 발생했는데요. 이를 개선하기 위해서 탄생한 것이 바로 SNMP입니다.
우선 SNMP의 히스토리부터 살펴보겠습니다.
ㅣSNMP 히스토리: 각 버전별 개념과 차이점은?
SNMP(Simple Network Management Protocol)는 1988년에 아래의 세 가지 니즈에 부합하기 위해 등장했습니다.
◾ ICMP보다 많은 기능의 탑재
◾ 네트워크 문제를 직관적이고 쉽게 해결할 수 있어야 함
◾ 표준화된 프로토콜의 사용
이후 몇 가지 버전을 거쳐서 현재는 네트워크 장비를 모니터링하기 위한 프로토콜로 자리를 잡아서 대부분의 NMS 상에서 이용되고 있습니다.
잠깐 SNMP의 처리단계를 살펴보면, SNMP는 Get/Set/Trap의 단순 명령 구조로 구성되는데요, 메시지 타입별 역할은 아래와 같이 정리할 수 있습니다.
위와 같은 처리단계를 가지고 있는 SNMP는 보안 기능 강화 및 기능 개선을 위해서 초기 v1 버전에서 v3 버전까지 업그레이드됐습니다.
각 버전은 보안, 성능, 유연성 등의 측면에서 발전되었으며 현재는 SNMPv2가 가장 많이 사용되고 있죠. SNMP 버전 별 특징에 대해서 자세히 알아보겠습니다.
SNMP v1
가장 초기에 만들어진 프로토콜로 기본적인 정보만을 주고받아서 네트워크 장비들의 상태를 확인하고, 간단한 명령 정도만 내릴 수 있습니다. 보안에 많이 약한 편이고, 정보를 주고받을 때 특별한 암호화나 보호 방법을 사용하지 않기에 정보가 노출될 위험이 있습니다.
SNMP v2
SNMPv1의 단점을 해결하기 위해 개발된 버전입니다. 보안 기능과 네트워크 과부하, 관리 효율성 등에 대한 기능이 향상되었습니다.
MIB(Management Information Base) 구조를 개선하여, 새로운 데이터 타입과 객체 식별자(프로그래밍에서 특정 객체를 식별하는 데 사용되는 값이나 이름)을 도입했습니다. 이로써 더 많은 종류의 데이터를 효과적으로 다룰 수 있게 되었지만, v1과 호환이 안되는 문제가 있어 상용화에는 실패했습니다.
SNMP v2c (Community-Based Security)
SNMPv2c는 '커뮤니티 기반' 방식을 사용하며 'Community String' (공동체 문자열)을 이용합니다. Community String은 정보를 주고받기 위해 인증 과정에서 비밀번호를 사용하는 것으로, 학교에서 특정 비밀번호를 알고 있는 사람들만 특정 정보를 볼 수 있게 하는 것과 비슷합니다.
하지만 비밀번호가 복잡하지 않은 편이라, 조금 더 높은 보안을 필요로 하는 경우에는 적합하지 않을 수 있습니다. 현재 가장 많이 사용되고 있는 버전입니다.
SNMP v3
보안과 관리 기능을 대폭 강화한 버전입니다. SNMPv3는 정보를 주고받을 때 강력한 인증과 암호화를 사용하여, 네트워크 상의 중요한 정보를 안전하게 지킬 수 있습니다.
또한 복잡한 네트워크 환경에서 사용자가 많을 경우에도, 각 사용자의 접근 권한을 관리할 수 있는 기능이 있습니다. 하지만 이전 버전들보다 더 복잡한 보안 모델과 설정 등의 이유로 널리 사용되고 있지는 않습니다.
[그림] SNMP 버전과 수를 한눈에 볼 수 있는 제니우스 EMS 화면
참고로 SNMP에는 위와 같이 다양한 버전이 있기 때문에 모든 NMS는 제니우스처럼 어떤 버전으로 수집했는지와 수를 파악할 수 있어야 합니다.
이제 SNMP에 대해서 조금 더 자세하게 살펴보겠습니다.
ㅣSNMP 자세히 보기: MIB의 개념과 구조
MIB(Management Information Base)는 관리 정보 기반이라고 불립니다. SNMP를 통해 관리되어야 할 정보나 자원들을 모아둔 것으로, Manager와 Agent 간 정보를 주고받는 정보의 집합체입니다.
MIB에는 SNMP를 통해 주고받는 정보가 어떤 의미를 가지고 어떻게 사용될 수 있는지에 대한 정의가 포함되어 있습니다. 또한 각각의 정보는 '객체'라고 불리며, 이 객체들은 계층적으로 구성되어 있기에 관리하고자 하는 정보를 쉽게 찾을 수 있게 도와주죠.
대표적으로 CPU 사용량, 메모리 사용량, 포트의 up/down 같은 상태 정보 등이 MIB에 포함됩니다. 마치 항해사가 바다를 항해하기 위해 지도를 사용하는 것처럼, MIB를 통해 네트워크의 상태를 정확히 파악하고 필요한 조치를 취할 수 있습니다.
MIB의 구조를 자세히 살펴보면 우선 큰 나무를 뒤집어 놓았다고 생각한다면 이해하기 쉽습니다. 큰 나무의 밑동(Root) → 각각의 가지(Branches) → 잎사귀(Leavers)로 나누어져 내려오는 형태인데요, 부분별로 자세히 살펴보겠습니다.
◾
밑동(Root):
모든 MIB 트리의 시작점으로, 'iso(1)', 'org(3)', 'dod(6)', 'internet(1)' 등으로 구성되어 있습니다. 여기서 'internet'은 네트워크 장비와 관련된 표준 MIB를 나타냅니다.
◾
가지(Branches):
밑동에서 나온 큰 가지들은 네트워크 장비의 다양한 부분을 나타냅니다. 예를 들어 'mgmt(2)' 가지는 일반적인 관리 정보, 'private(4)' 가지는 각 제조업체의 고유 정보 등을 의미합니다.
◾
잎사귀(Leaves):
가장 작은 단위의 정보를 나타내는 부분으로 특정 장비의 상태, 성능 지표, 설정값 등 구체적인 데이터가 저장됩니다.
MIB에서는 네트워크 장비의 정보가 여러 '분류'로 나누어져 있는데, '네트워크 인터페이스'라는 분류 아래에는 네트워크 카드의 상태, 속도, 전송된 데이터의 양과 같은 정보들이 담겨 있습니다.
MIB는 복잡해 보일 수 있지만, 네트워크 장비와 관련된 정보를 체계적으로 관리하고 접근할 수 있도록 설계되어 있습니다. 이 구조 덕분에 네트워크 관리자는 네트워크의 건강 상태를 쉽게 체크하고 필요한 조정을 할 수 있습니다.
다음으로는 MIB 내의 각 객체를 고유하게 식별하는 OID에 대해서 알아보겠습니다.
ㅣSNMP 자세히 보기: OID 확인 방법과 수집항목
OID(Object Identifier)는 MIB 내에 포함되어 있는 각 개별 정도에 대한 ID 값입니다. 아래 그림에서 볼 수 있듯이, 트리의 하단 값이 OID인데 MIB의 각 개별 정보에 대한 ID를 의미합니다.
[그림] OID Tree 구조
대형 도서관에서 원하는 책을 찾을 때 책의 번호를 확인하여 빠르고 정확하게 찾는 것처럼, 특정 오브젝트의 ID(Num)을 부여한 게 OID입니다. OID는 포함하고 있는 각 정보를 숫자로 표현합니다.
◾
Enterprise OID:
네트워크 업계에서 공통으로 사용하는 OID
◾
Private OID:
각 네트워크 벤더사에서 사용하는 독자적인 OID
예를 들어 Juniper Networks라는 네트워크 스위치 벤더에서 사용하고 있는 OID 값을 [1.3.5.6.1.9 ]라는 전용 OID 값을 사용한다고 가정하면, Juniper Networks 라우터의 경우 뒤에 라우터 제품별 OID '11'이 더 붙은 [1.3.5.6.1.9.11 ] 형태의 OID로 구성됩니다.
[그림] 제니우스 예시 화면
지금까지 네트워크 모니터링에 필요한 ICMP, SNMP 그리고 MIB, OID에 대해 살펴봤습니다. 참고로 제니우스(Zenius)-NMS에서는 OID 사전을 제공하고 있으며, 이를 통하여 관리하고 싶은 항목의 MIB 항목 및 OID 정보를 쉽게 찾을 수 있습니다.
이제 SNMP의 주요 개념 중 하나인 SNMP Trap에 대해서 알아보겠습니다.
ㅣSNMP Trap의 개념 그리고 특징은?
Manager(관리자)는 Server(Agent)로 메시지 요청(Polling)을 하게 되고, Server(Agent)는 응답(Notifying)을 하는 방식으로 진행됩니다.
그런데 Server가 비정상적인 이벤트를 감지하면 Manager의 Polling을 기다리지 않고 바로 Manager에게 메시지를 보내는데요, 이 긴급 메시지를 Trap(트랩)이라고 합니다. 우리가 날씨에 대해서 찾아보지 않아도 폭설이 예상될 때 폭설을 경고하는 자동 알림 시스템과 비슷한 개념입니다.
[그림] SNMP 프로토콜 동작 방식
SNMP Trap은 일반적으로 높은 CPU 사용량이나 디스크 공간 부족과 같이 해결해야 할 문제를 나타냅니다. 중앙 모니터링 시스템으로 전송되어 분석 및 조치를 취할 수 있죠. 이를 통해 Manager는 큰 문제가 발생하기 전에 잠재적인 문제를 신속하게 식별하고 해결할 수 있습니다.
SNMP Trap의 방식과 기능을 네 가지로 나누어 살펴보겠습니다.
(1) 비동기적 알림
SNMP Trap는 주기적인 폴링이 아닌, 이벤트 기반의 알림을 통해 즉각적으로 대응할 수 있도록 비동기적인 방법을 제공합니다.
(2) 실시간 알림
SNMP Trap은 이벤트가 발생하는 즉시 알림을 제공하여, 실시간으로 네트워크 상태 및 장치 상태를 모니터링해서 문제 발생 시 즉각적인 대응과 조치를 가능하게 합니다.
(3) 이벤트 기반 모니터링
SNMP Trap은 장치나 응용 프로그램에서 특정 이벤트가 발생했을 때만 알림을 보내기 때문에, 불필요한 트래픽을 발생시키지 않습니다. 따라서 자원을 효율적으로 사용하면서 중요한 상태 변경을 식별합니다.
(4) 자동화된 대응
SNMP Trap을 사용하면 이벤트 발생 시, 자동으로 대응 조치를 취할 수 있는 자동화 시스템을 구축할 수 있습니다. 이를 통해 관리자의 개입 없이 특정 이벤트에 대한 대응을 효과적으로 수행할 수 있습니다.
[그림] Zenius Syslog 감시 설정 등록 페이지(위), Zenius Syslog 이벤트 페이지(아래)
이와 같은 SNMP Trap을 통해 빠르게 이상을 탐지하는 것이 중요한데요. 제니우스(Zenius)-Syslog와 Trap에서는 Syslog, Trap에 각각 특정 이벤트 조건을 설정하여 이벤트를 감지하고, 장애를 통보할 수 있는 기능을 제공하고 있습니다.
이제 마지막으로 SNMP 못지않게 네트워크 관리에 중요한 역할을 하는 Syslog, RMON에 대해서 알아보겠습니다.
ㅣ Syslog, RMON의 개념과 동작원리는?
Syslog
Syslog는 컴퓨터 시스템, 네트워크 장비, 보안 장비 등에서 일어나는 모든 상황과 변화를 서버에 기록하는 프로토콜입니다. 관리 대상인 장비에서 일어나는 모든 상황을 메모리에 기록하죠. 로그/오류 관리가 주 목적이고 Unix와 Linux에서 많이 사용됩니다.
대부분의 라우터와 스위치들은 Syslog 프로토콜을 이용하여 Log들을 Syslog 서버로 보내고, 수백수천 대의 장비에 일일이 접속하여 로그를 볼 수 없기 때문에 '중앙 집중식'으로 관리합니다.
작업 방식은 주로 Client-Push 모델로 이러우지고 있고, 장비에서 일어나는 모든 상황 변화를 Layer4 프로토콜이 메모리에 기록하며, Syslog 서버는 UDP 포트 514에서 메세지를 수신합니다.
Syslog 수집항목은 시스템 운영/네트워크/보안/애플리케이션 등과 관련된 로그를 수집 및 분석하고, 각 항목별로 오류와 트랜잭션 등에 대한 내용을 확인합니다.
출처ⓒ viettelco.net
RMON
RMON(Remote Network Monitoring)은 네트워크 장비나 서버에서 발생하는 트래픽과 문제들을 원격에서 감시하기 위해 만들어진 프로토콜로, SNMP보다 확장된 개념이라고 할 수 있습니다.
네트워크 관리자는 RMON을 통해, 네트워크의 성능을 측정하고 문제가 발생했을 때 신속하게 해결할 수 있습니다. 회사에서 인터넷이 느려지거나 연결이 되지 않을 때 RMON을 사용하면 원인을 빠르게 찾아내어 문제를 해결할 수 있죠.
RMON과 SNMP의 연관성을 우선 아래 이미지를 통해 살펴보겠습니다.
출처ⓒ dpstele.com/blog/what-is-rmon.php
좀 더 자세히 살펴보면
◾ RMON은 SNMP 위에서 작동하며, SNMP 보다 더 광범위한 데이터를 수집/분석할 수 있는 기능을 제공합니다.
◾ SNMP가 네트워크의 '기본적인 통신'을 담당한다면, RMON은 그 위에서 보다 '세밀한 관찰과 분석'을 가능하게 합니다.
◾ RMON은 SNMP의 특정 데이터를 사용하여 네트워크 트래픽 패턴이나, 성능 문제, 네트워크 내의 비정상적인 활동 등을 실시간으로 감시하고 기록할 수 있게 해줍니다.
◾ RMON에서 Probe라는 수행 장비를 사용하며, 네트워크 트래픽 및 통계 수집 그리고 성능 모니터링을 위해 활용합니다.
결과적으로 RMON의 기능을 통해 네트워크의 문제를 더 빨리 발견하고, 효율적으로 대응할 수 있죠.
마지막으로 SNMP, RMON, ICMP, Syslog의 주요 내용들을 아래 표를 통해 한눈에 살펴보겠습니다.
。。。。。。。。。。。。
지금까지 네트워크 정보 수집을 위한 다양한 프로토콜의 종류와 특징에 대해서 알아보았습니다. 효과적인 네트워크 관리를 위해서 혁신적인 기술들이 많이 개발되고 있는데요, 이를 활용해서 성공적으로 네트워크를 운영하시기를 바라겠습니다!
#네트워크 프로토콜
#SNMP
#RMON
#ICMP
#Syslog
임형섭
프리세일즈팀
안정적이고 효과적인 비즈니스 운영을 위한 고객 맞춤형 IT 인프라 모니터링 시스템을 제안합니다.
필진 글 더보기
목록으로
추천 콘텐츠
이전 슬라이드 보기
웹 UI 성능 최적화 가이드: Tree·Grid·CSS의 브라우저 렌더링 비용 줄이기
웹 UI 성능 최적화 가이드: Tree·Grid·CSS의 브라우저 렌더링 비용 줄이기
모니터링 화면은 수많은 대상을 계층적으로 표현하는 Tree, 여러 상태와 속성을 한 화면에 보여 주는 Grid, 실시간으로 갱신되는 대시보드처럼 높은 정보 밀도를 요구합니다. 이러한 화면의 성능은 단순히 데이터 건수만으로 설명하기 어렵습니다. 동일한 1,000건이라도 텍스트만 나열하는 화면과 각 항목에 아이콘, 체크박스, 편집 컴포넌트와 이벤트가 결합된 화면의 비용은 다릅니다. 브라우저가 처리하는 대상은 데이터 자체가 아니라 데이터로부터 생성된 DOM과 스타일 변화이기 때문입니다. 따라서 웹 UI 성능을 최적화하려면 데이터의 양뿐 아니라, 데이터로부터 생성되는 DOM의 규모와 화면 변경이 영향을 미치는 범위를 함께 살펴봐야 합니다. 이 글에서는 Tree, Grid, CSS 세 가지 사례를 중심으로 브라우저 렌더링 과정에서 어떤 비용이 발생하는지, 그리고 이를 줄이기 위해 어떤 방식을 적용할 수 있는지 살펴보겠습니다. 브라우저는 화면을 어떻게 갱신하는가 JavaScript나 프레임워크가 화면의 상태를 변경하면 브라우저는 변경된 DOM과 CSS가 어떤 요소에 영향을 주는지 판단합니다. 이후 변경 내용에 따라 Style Calculation, Layout, Paint, Composite 과정을 수행합니다. Style Calculation은 적용할 스타일을 결정하고, Layout은 요소의 크기와 위치를 계산합니다. Paint는 화면에 그릴 픽셀 정보를 만들며, Composite는 레이어를 합쳐 최종 화면을 구성합니다. 브라우저의 주요 렌더링 파이프라인 모든 변경이 전체 과정을 거치는 것은 아닙니다. 변경 종류에 따라 Layout이나 Paint 같은 일부 단계는 생략될 수 있으며, transform이나 opacity 변경은 조건에 따라 Composite 중심으로 처리될 수 있습니다. 또한 JavaScript 실행과 주요 렌더링 작업의 상당 부분은 Main Thread에서 이루어집니다. 긴 JavaScript 작업이 실행되거나 처리해야 하는 DOM과 스타일 범위가 커지면 사용자 입력이나 다음 화면 갱신이 지연될 수 있습니다. 이러한 렌더링 비용은 화면의 구조에 따라 서로 다른 형태로 나타납니다. Tree에서는 동시에 생성되는 DOM 수, Grid에서는 Cell 내부 컴포넌트 구조, CSS에서는 선택자 범위와 변경 속성이 주요 비용으로 연결됩니다. 01. Tree의 성능 텍스트와 펼침 버튼 정도로 구성된 단순한 Tree는 비교적 안정적으로 동작합니다. 하지만 실제 서비스에서는 하나의 노드에 아이콘, 체크박스, 상태 표시, 부가 정보, Context Menu와 사용자 이벤트가 결합되는 경우가 많습니다. 노드마다 반응형 상태가 연결되어 있다면 컴포넌트 생성과 업데이트 비용도 함께 증가합니다. 같은 노드 수라도 내부 구조에 따라 실제 DOM 규모가 달라진다 실제 프로젝트에서 1,000개 이상의 노드를 렌더링했을 때 성능 저하가 발생했습니다. 다만 이 수치가 일반적인 한계는 아닙니다. 노드 구조와 펼쳐진 비율, 상태 관리 방식에 따라 임계점은 달라질 수 있습니다. 이처럼 Tree의 성능은 단순한 노드 수보다 실제로 얼마만큼의 데이터와 DOM을 동시에 다루는지에 더 큰 영향을 받습니다. 지연 로딩과 Virtual Scroll은 서로 다른 비용을 줄입니다 초기에는 Root 또는 일정 계층까지만 조회하고, 사용자가 노드를 펼칠 때 자식 데이터를 요청할 수 있습니다. 지연 로딩은 네트워크 응답과 최초 렌더링 범위를 줄이는 데 도움이 됩니다. 다만 사용자가 여러 노드를 계속 펼치면 클라이언트가 보유하는 데이터와 DOM은 다시 증가할 수 있습니다. 지연 로딩은 데이터 범위를, Virtual Scroll은 DOM 범위를 제한한다 Virtual Scroll은 전체 스크롤 영역을 유지하면서 현재 Viewport와 인접 영역만 DOM으로 만듭니다. 화면 밖 노드는 제거하거나 재사용하므로 전체 데이터가 증가하더라도 DOM이 같은 비율로 증가하지 않습니다. 즉, 두 방식은 비슷해 보이지만 줄이는 대상이 다릅니다. 지연 로딩은 조회하는 데이터 범위를 제한하고, Virtual Scroll은 실제로 생성되는 DOM 범위를 제한합니다. Viewport가 곧 렌더링 예산입니다 Virtual Scroll을 적용하더라도 한 번에 화면에 표시되는 영역이 커지면 동시에 렌더링되는 노드 수 역시 증가합니다. Tree 높이가 커지면 동시에 표시되는 노드도 증가하며, 컨테이너나 Row 높이가 불안정하면 범위 계산 오류와 반복 Layout이 발생할 수 있습니다. 따라서 정보 밀도와 노드 하나의 비용을 기준으로 Viewport를 설계해야 합니다. 검색은 DOM이 아니라 데이터 계층에서 처리합니다 Virtual Scroll에서는 화면 밖 노드가 DOM에 존재하지 않습니다. 여기에 지연 로딩까지 적용했다면 클라이언트가 전체 Tree 데이터를 보유하지 않을 수도 있습니다. 이러한 구조에서는 화면에 현재 존재하는 DOM만을 대상으로 검색해서는 전체 Tree를 탐색하기 어렵습니다. 따라서 서버는 전체 데이터를 검색해 노드 ID와 상위 경로를 반환하고, 클라이언트는 필요한 계층만 로딩해 검색 노드로 이동할 수 있습니다. 서버 검색 결과의 ID와 상위 경로를 이용한 노드 이동 Tree에서는 결국 데이터 조회 범위와 DOM 생성 범위를 분리해 관리하는 것이 중요합니다. 다음으로 Grid에서는 같은 문제를 Row와 Cell 단위에서 어떻게 바라볼 수 있는지 살펴보겠습니다. 02. Grid의 성능 Grid도 Virtual Scroll을 사용해 현재 Viewport와 인접 영역의 Row만 렌더링할 수 있습니다. 다만 Grid는 단순히 데이터를 보여 주는 것뿐 아니라 정렬, 필터, 검색, 페이지 이동을 통해 데이터를 탐색하는 경우가 많습니다. 따라서 Virtual Scroll과 함께 Pagination이나 서버 사이드 처리도 고려해야 합니다. Virtual Scroll과 Pagination은 서로 다른 탐색 경험을 제공한다 Pagination은 페이지당 Row 수를 제한하고 현재 위치를 명시적인 번호로 보여 줍니다. 전체 데이터가 크다면 모든 데이터를 클라이언트로 가져온 뒤 나누는 대신, 서버에 페이지 번호와 크기를 전달해 현재 범위만 응답받는 방식이 적합합니다. 이때 중요한 것은 단순히 데이터를 나누는 것뿐 아니라, 정렬과 필터를 어떤 순서로 적용할 것인지입니다. 정렬과 필터는 Pagination 이전에 적용합니다 현재 페이지에서만 정렬하거나 필터링하면 다른 페이지의 데이터는 결과에 반영되지 않습니다. 전체 데이터 기준의 일관된 결과가 필요하다면 서버에서 필터와 정렬을 먼저 수행한 뒤 페이지 범위를 추출해야 합니다. 서버 사이드 필터, 정렬, Paging 처리 순서 반대로 데이터가 작고 전체 결과가 이미 클라이언트에 있다면 클라이언트 처리가 더 단순할 수 있습니다. 서버 사이드 처리는 데이터가 크거나 지속적으로 변경되고, 전체 결과의 일관성이 필요한 경우에 적합합니다. Grid에서는 데이터 범위뿐 아니라 Cell 내부 구조도 성능에 영향을 줍니다. 특히 Grid를 조회 화면이 아니라 편집 화면으로 사용하는 경우에는 이 차이가 더 커질 수 있습니다. Grid를 에디터로 사용하면 Cell이 렌더링 단위가 됩니다 편집 가능한 Cell에는 Text Input, Select, Date Picker, Validation과 Popup이 포함될 수 있습니다. 이 경우 Grid의 비용은 Row 수뿐 아니라 Column 수와 Cell 하나의 DOM 및 컴포넌트 복잡도에 영향을 받습니다. Grid 렌더링 비용 = Row 수 × Column 수 × Cell 하나의 복잡도 표시 상태와 편집 상태를 분리해 에디터 생성 범위를 제한한다 일반 상태에서는 텍스트나 포맷된 값만 보여 주고, 현재 편집 중인 Cell 또는 Row에만 에디터를 생성할 수 있습니다. CSS로 숨기는 것만으로는 이미 생성된 DOM과 컴포넌트 초기화 비용이 남으므로 조건부 렌더링이 필요합니다. 편집 상태는 UI 생명주기와 분리합니다 Virtual Scroll에서는 편집 중인 Row가 Viewport 밖으로 이동하면서 DOM에서 제거될 수 있습니다. 따라서 수정 값은 에디터 내부가 아니라 Row 데이터나 별도 저장소에 보관해야 합니다. 즉, Grid에서는 화면에 보이는 Row 수를 줄이는 것뿐 아니라 Cell 내부 컴포넌트를 언제 생성하고, 편집 상태를 어디에 보관할지까지 함께 고려해야 합니다. Tree와 Grid가 주로 DOM과 컴포넌트 생성 범위의 문제라면, CSS에서는 화면 변경 시 브라우저가 다시 계산해야 하는 스타일 범위가 중요한 요소가 됩니다. 03. CSS의 성능 DOM 구조나 Class, 상태가 변경되면 브라우저는 기존 스타일 결과를 계속 사용할 수 있는지 판단합니다. 기존 결과를 사용할 수 없다고 판단하는 과정을 Style Invalidation이라고 하며, 무효화된 요소는 다시 Style Calculation의 대상이 됩니다. CSS 성능을 살펴볼 때는 다음과 같은 요소를 함께 확인해야 합니다. 선택자가 탐색하는 DOM의 범위와 적용되는 요소 수 상태 변경으로 스타일이 무효화되는 범위와 변경 빈도 변경된 속성이 요구하는 Layout, Paint, Composite 단계 동시에 애니메이션되는 요소의 수 이 기준을 구체화하기 위해 선택자 평가 범위와 관련된 :has()와, 속성 변경 비용을 보여 주는 transition을 대표 사례로 살펴보겠습니다. :has()는 관계를 조건으로 선택합니다 :has()는 특정 요소가 조건을 만족하는 하위 또는 인접 요소를 가지고 있는지에 따라 대상을 선택하는 관계형 가상 클래스입니다. 상위 요소를 선택하는 용도로 자주 사용되므로 부모 선택자라고도 설명합니다. :has()의 비용은 기준 요소와 탐색 범위에 영향을 받는다 :has() 자체가 항상 느린 것은 아닙니다. 다만 body나 :root처럼 넓은 요소를 기준으로 사용하고, 상태가 빈번하게 변경되며, 같은 선택자가 많은 반복 요소에 적용된다면 Style Invalidation 범위가 커질 수 있습니다. 따라서 선택자의 형태 자체보다 어느 범위에서 얼마나 자주 평가되는지를 함께 보는 것이 중요합니다. 상태 Class도 대안입니다 애플리케이션이 이미 선택 상태를 관리한다면 상위 요소에 상태 Class를 직접 지정할 수 있습니다. 선택자 평가는 단순해지지만 상태와 DOM Class의 동기화가 필요하므로 실제 비용을 측정해 판단해야 합니다. 선택자의 범위와 함께 살펴봐야 할 또 하나의 요소는 변경하는 CSS 속성입니다. 같은 시각적 변화라도 어떤 속성을 사용하는지에 따라 브라우저가 수행하는 렌더링 단계는 달라질 수 있습니다. transition은 무엇을 변경하느냐가 중요합니다 transition은 속성값의 시작과 종료 사이를 일정 시간 동안 보관합니다. width, height, left처럼 크기와 배치에 관여하는 속성은 프레임마다 Layout과 Paint를 유발할 수 있습니다. 반면 transform과 opacity는 배치를 변경하지 않으므로 조건이 맞으면 Composite 단계에서 처리될 수 있습니다. Layout 속성과 Composite 중심 속성의 일반적인 렌더링 경로 Toggle Handle처럼 보이는 위치만 이동한다면 left 대신 translateX를 검토할 수 있습니다. 반대로 주변 요소가 변경된 크기와 위치를 기준으로 재배치되어야 한다면 Layout 속성이 필요합니다. transform 역시 항상 정답은 아닙니다. 과도한 레이어 승격은 메모리와 Composite 비용을 증가시킬 수 있기 때문입니다. 결국 CSS에서도 중요한 것은 특정 속성이나 선택자를 무조건 피하는 것이 아니라, 브라우저가 다시 계산해야 하는 범위와 단계를 줄이는 것입니다. 04. 세 사례에서 공통으로 줄인 것 Tree, Grid, CSS에는 서로 다른 해결 방법이 적용되었지만 브라우저 관점에서는 같은 방향의 최적화입니다. 공통적으로 줄인 것은 브라우저가 다시 처리해야 하는 작업의 범위입니다. 세 사례를 비교해 보면 성능 문제의 형태는 달라도, 결국 얼마나 많은 요소를 동시에 처리하는지, 한 번의 변경이 어디까지 영향을 주는지, 같은 작업이 얼마나 반복되는지로 문제를 나눠볼 수 있습니다. 성능 문제를 분해하는 세 가지 질문 웹 UI의 성능 문제를 확인할 때는 다음 세 가지 질문을 기준으로 살펴볼 수 있습니다. 동시에 관리하는 DOM과 컴포넌트는 몇 개인가? 한 번의 변경이 어느 범위까지 영향을 주는가? 같은 작업이 얼마나 자주 반복되는가? 이렇게 문제를 나눈 뒤에는 실제 브라우저에서 어떤 작업이 오래 걸리고 있는지 확인해야 합니다. 렌더링 원리는 측정 지점을 찾기 위한 기준입니다 브라우저 렌더링 원리를 이해한다고 모든 성능 문제가 해결되는 것은 아닙니다. 다만 어떤 항목을 측정해야 하는지 판단하는 기준은 될 수 있습니다. Tree와 Grid에서는 DOM Node 수, Scripting 및 Rendering 시간, Long Task와 Frame Drop을 확인할 수 있습니다. CSS에서는 Recalculate Style, Selector Stats, Layout과 Paint 빈도, 합성 레이어 수를 확인해야 합니다. 이때 한 가지 더 구분해야 할 것은 모든 화면 지연이 렌더링에서 발생하는 것은 아니라는 점입니다. 모든 화면 지연이 렌더링 문제는 아닙니다 서버 응답 이전의 지연과 응답 이후 Main Thread의 지연을 구분해야 합니다. 네트워크, 서버, 이미지, 메모리와 비동기 상태 관리 문제도 별도의 측정이 필요합니다. 따라서 화면이 느리다는 현상만으로 원인을 렌더링 문제로 단정하기보다, 먼저 지연이 발생하는 구간을 나누고 그에 맞는 지표를 확인하는 과정이 필요합니다. 마치며 Virtual Scroll, Pagination, 조건부 렌더링과 transform은 그 자체로 성능을 보장하지 않습니다. 각각 데이터 조회 범위, DOM 수, 컴포넌트 생성 범위와 렌더링 단계를 제어하기 위한 수단입니다. 중요한 것은 빠르다고 알려진 기술을 적용하는 것이 아니라, 현재 화면에서 브라우저가 수행하는 작업을 구분하고 실제 측정으로 판단하는 것입니다. Tree에서는 얼마나 많은 DOM이 동시에 생성되는지, Grid에서는 Row와 Cell 내부 컴포넌트가 어느 범위까지 만들어지는지, CSS에서는 한 번의 변경으로 얼마나 넓은 범위가 다시 계산되는지를 살펴봐야 합니다. 브라우저 렌더링 원리를 이해하는 목적은 불필요한 비용을 처음부터 줄이고, 성능 문제가 발생했을 때 올바른 측정 지점을 선택하는 데 있습니다. 참고 자료 web.dev - Rendering performance Chrome DevTools - Selector Stats WebKit - CSS :has()
2026.08.31
다음 슬라이드 보기