반복영역 건너뛰기
주메뉴 바로가기
본문 바로가기
제품/서비스
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
블로그
열기
메인 페이지로 이동
블로그
기술이야기
블로그
최신이야기
사람이야기
회사이야기
기술이야기
다양한이야기
브레인즈컴퍼니, 서비스 확대 및 고객 만족도 향상 위해 원주사무소 오픈
데브옵스(DevOps)에 대한 오해, 그리고 진실은?!
원종혁
2024.02.14
페이스북 공유하기
트위터 공유하기
링크드인 공유하기
블로그 공유하기
잘파세대(Z세대 + 알파 세대)에 대한 모든 것
2000년 대 후반 IT 분야에서 데브옵스(DevOps)라는 움직임이 시작된 후, 꾸준하게 관심이 이어지고 있습니다. 데브옵스와 관련된 전 세계 시장의 규모는 2023년 기준 약 15조 원으로 추산되며, 올해부터는 연평균 25.5%씩 성장하여 2032년에 118조 원에 이를 것으로 예상됩니다
(*출처: Grand View Research)
.
우리나라의 경우 네이버, 카카오, 우아한 형제들, 토스 등과 같은 국내 대기업부터 스타트업까지 데브옵스 팀을 구축하여 적극적으로 활용하고 있기도 한데요.
이처럼 많은 기업들이 말하는 데브옵스란 과연 무엇일까요? 그리고 어떻게 하면 데브옵스를 성공적으로 도입하고 활용할 수 있을까요?
│ 데브옵스(DevOps)란 무엇인가?
[그림 1] DevOps 개념 ⓒdevopedia
우선 데브옵스가 무엇인지부터 살펴봅시다. 검색 사이트에서 '데브옵스 혹은 DevOps'라고 검색하면 위 [그림1]과 같은 결과를 찾을 수 있는데요.
[그림 2] DevOps에 대한 필자의 첫인상
하지만 처음 데브옵스라는 단어를 접할 경우 [그림 2]처럼 오버랩되는 건, 필자만 그런 것은 아니라고 생각합니다. 위 그림처럼 "개발자 보러 운영까지 하라는 거야? 아니면 운영자에게 개발까지 하라는 거야?"라는 질문을 던질 수 있겠죠.
데브옵스(DevOps)는 소프트웨어의 개발(Developmnet)과 + 운영(Operations)의 합성어이다. 이는 소프트웨어 개발자와 정보기술 전문가 간의 소통, 협업 및 통합을 강조하는 개발 환경이나 문화를 말한다. 데브옵스는 소프트웨어 개발조직과 운영조직 간의 상호 의존적 대응이며, 조직이 소프트웨어 제품과 서비스를 빠른 시간에 개발 및 배포하는 것을 목적으로 한다.
ⓒ위키백과
위 내용에도 언급되었듯이, 데브옵스라는 것은 결국 단순한 기술이 아닌 환경 또는 사람들 간에 관계라고 할 수 있습니다. 그렇다면 데브옵스는 어떤 이유로 주목받을 수 있었을까요?
│ 데브옵스(DevOps)가 주목받게 된 배경은?
데브옵스가 주목받은 이유는 여러 가지 있을 수 있지만, 주요한 이유 중 몇 가지를 설명하면 다음과 같습니다.
클라우드 컴퓨팅 기술의 발전
IT 산업의 발전에 따라 빠른 개발과 빠른 배포, 그리고 고객의 요구에 신속하게 대응하는 능력이 중요해졌습니다. 특히
클라우드 컴퓨팅(Cloud Computing) 기술의 발전으로 데브옵스의 필요성이 더 대두
되었는데요.
클라우드 자원의 가상화 기술과 빠른 프로비저닝
*1
을 통해 기존의 개발과 운영 간의 경계가 허물어지며, 서로 간의 협력이 필수적으로 요구되었기 때문입니다. 실제로 데브옵스만으로는 52%, 클라우드 단독 사용으로는 53%의 성능 향상을 얻었지만, 데브옵스와 클라우드가 결합된 환경에서는 평균 81%의 성능을 향상시킬 수 있다는
조사 결과
도 있습니다.
*1 프로비저닝(Provisioning): 사용자가 요청한 IT 자원을 사용할 수 있는 상태로 준비하는 것
MSA의 등장
[그림 4] 모놀리식 구조 예시(왼) [그림 5] MSA 구조 예시(오)
지금까지 운영 중인 시스템 혹은 서비스는, 하나의 큰 덩어리로 구성된 [그림 4]
모놀리식(Monolithic) 구조를 많이 사용
하고 있습니다. 안정성을 확보하고 기능 추가를 편리하게 할 수 있었기 때문이죠. 하지만 한 부분의 변경이 전체 시스템에 영향을 미칠 수 있어, 유지보수가 어렵다는 한계점이 있습니다. 예를 든다면 특정 기능이 수정이 필요한 경우에도, 전체 시스템을 수정해야 해서 번거롭고 비효율적인 부분이 있습니다.
이러한 모놀리식 구조의 한계점으로 소프트웨어의 구조가 서서히 [그림 5]
MSA(Micro Service Architecture)로 변화
되고 있습니다. MSA는 통합된 하나의 덩어리를 관리하는 것이 아닌, 작은 단위로 쪼개어 관리하는 방식인데요. 관리하기도 효율적이고, 소프트웨어 품질개선과 요구사항 반영이 비교적 편리해졌습니다. 각 서비스가 독립적으로 배포되고 운영되기 때문에, 특정 기능을 수정할 때 전체 기능을 수정하거나 다시 배포할 필요가 없어진 거죠. 하지만 이러한 변화는 기존의 개발 환경과 조직 문화로 대응하기엔 어려움이 있었습니다.
이때
'데브옵스(DevOps)'
가 좋은 솔루션으로 등장한 것이죠!
데브옵스가 지속적인 통합(CI)
1
과 지속적인 배포(CD)
2
를 통해 빠른 개발 주기를 실현하고 배포할 수 있을 뿐만 아니라, 다수의 독립적인 서비스가 상호작용할 수 있도록 원활한 협업과 통합을 가능하게 했기 때문입니다.
*1 지속적인 통합(Continuous Integration, CI)
개발자가 코드를 변경할 때마다 자동으로 통합하고 빌드 하여, 소프트웨어의 품질을 빠르게 확인하는 과정
*2 지속적인 배포(Continuous Delivery, CD)
통합된 코드를 자동으로 테스트하고, 안정적으로 통과한 경우에는 자동으로 프로덕션 환경에 소프트웨어를 배포하는 것. 이에 따라 사용자에게 새로운 기능이나 수정 사항을 신속히 제공하는 과정
│ 데브옵스(DevOps) 도입 성공사례는?
이처럼 데브옵스의 정의와 주목받게 된 배경을 살펴봤는데요. 이번에는 데브옵스를 실제로 기업에 적용해 보고 성공한 사례를 자세히 살펴볼까요?
넷플릭스
넷플릭스(Netflix)는 데브옵스를 성공의 핵심요소로 삼아, 지속적으로 새로운 기능과 업데이트를 제공했습니다.
자동화된 유연한 인프라
로 사용자 경험을 향상시켰죠. 이를 통해 빠르게 변화하는 스트리밍 산업에서 앞서 나갈 수 있게 되었고, 많은 비즈니스 이점을 얻게 되었습니다. 사실 넷플릭스는 2008년 큰 장애를 겪은 후, 클라우드로 이전되면서 인프라를 혁신적으로 개편했습니다. 이로써 기존의 수직적 단일 장애 지점에서 벗어나, 수평적으로 확장 가능한 분산 시스템을 구축할 수 있었습니다.
아마존
아마존(Amazon)은 데브옵스 원칙을 초기에 채택하여, 개발과 운영팀 간의 협력을 강화했습니다.
자동화와 지속적인 통합을 강조
함에 따라, 빠른 배포 주기와 개선된 확장성을 달성할 수 있었죠. 이러한 아마존의 데브옵스 접근 방식은, 시장에서 경쟁 우위를 유지하는데 중요한 역할을 했습니다. 아마존 창립자인 제프 베이조스는 아마존의 데브옵스에 대해 '고객에게 집중하고, 혁신을 포용하며, 실험할 용기'를 강조했습니다. 베이조스는 혁신을 위해, 오해를 받고 비판받을 의향이 있어야 한다고 말했던 것이죠.
페이스북
페이스북(Facebook)은 "빠르게 움직이고 물건을 부수라"는 문화에 뿌리를 둔 데브옵스 관행을 택했습니다. 실험, 민첩성, 위험 감수를 중시하는 접근 방식을 포함해서 말이죠. 이처럼 페이스북은
지속적인 통합과 배포, 자동화된 테스팅, 모니터링
을 사용하여 사용자에게 더 빠르고 높은 품질의 새로운 기능과 업데이트를 제공하고 있습니다.
월마트
2011년부터 데브옵스를 도입한 월마트(Walmart)는
자동화와 협업 그리고 지속적인 배포
에 중점을 두었습니다. 애자일(Agile) 방법론과 클라우드 기반의 인프라 및 데브옵스 툴체인을 활용하여, 하루에 최대 100번까지 코드를 배포할 수 있게 된 것이죠. 이를 통해 디지털 변환을 가속화하고, 전자상거래 플랫폼을 개선하며, 고객 경험을 향상시킬 수 있었습니다.
위 기업들은 데브옵스라는 도구를 효과적으로 활용하여 비즈니스 성과를 창출하고, 경쟁 우위를 확보할 수 있었습니다. 그렇다면 데브옵스를 도입하기만 하면 무조건 성공할 수 있을까요?
│ 데브옵스(DevOps)의 오해와 한계
앞선 질문에 대한 대답은 아쉽게도 NO입니다. 데브옵스는 개발 환경과 문화를 전부 해결해 줄 수 있는 '만능책'은 아니라는 것이죠. 데브옵스가 도입된 이후 새로운 한계점이 발견되었고, 실패할 사례들도 적지 않게 나왔습니다.
이러한 결과는 아래와 같은 오해들에서 비롯될 확률이 높은데요. 대표적으로 3가지만 살펴봅시다.
[그림 6] DevOps 구현을 위한 도구 ⓒMedium_Ajesh Martin
오해 1. 데브옵스는 일종의 단순한 도구일 뿐이다?
데브옵스를 '일종의 도구'로만 보는 것은 잘못된 판단입니다. 물론 여러 팀에서 보다 더 나은 환경과 문화를 위해 슬랙(Slack), 젠킨즈(Jenkins), 도커(Docker) 등 여러 도구를 사용하는 것은 좋습니다.
하지만 데브옵스는 이보다 더 광범위한 접근 방식을 담고 있습니다. 즉 개발과 운영팀 간의 협력과 더 빠른 소프트웨어 개발과 배포를 가능하게 하는 방법론을 포함한다는 것이죠. 다시 말해 데브옵스라는 '도구'를 이용하기 이전에, 문화적 그리고 기술적 접근 방식이 바탕이 되어야 데브옵스라는 툴이 도움 될 수 있습니다.
오해 2. 데브옵스는 모든 조직에 적합하다?
만약 '다른 회사에 데브옵스라는 팀이 있으니, 우리도 데브옵스 팀을 만들자'라는 식으로 접근한다면, [그림 2]와 같은 모습이 될 것으로 예상됩니다. 즉 데브옵스의 조직 체계를 구성한다고 해서 데브옵스가 실현될 순 없습니다. 서로 다른 입장과 상황이 있는 개발자-팀-회사, 운영자-팀-회사 간에 상당한 노력을 통해 만들어 내는 것이 더 중요한 것이죠.
이와 비슷한 사례로 애자일(Agile) 문화가 있습니다. 2000년대 초반 '애자일 소프트웨어 선언문'으로 다양한 애자일 방법론이 주목을 받았었죠. 개발에서 빠르고 유연한 방법을 강조하며, 이후 많은 기업들이 애자일 방법론을 도입하게 되며 유행처럼 번져갔습니다.
[그림 7] Agile 프로세스
여기서 애자일 문화를 도입한 많은 기업들이 간과했던 사실은, 애자일 문화 도입 자체가 '해결책'이라고 생각했다는 점입니다. 이보다 기존의 조직 문화에서 애자일 문화를 도입하는 것이 적합한 상황인지, 기존의 프로세스보다 효과를 발휘할 수 있는지, 팀 구성원들이 충분히 적응할 수 있는 문화인지 등을 우선적으로 고려하는 것이 더 중요합니다.
데브옵스 역시 마찬가지로 기존의 조직 규모, 문화, 프로젝트의 특성에 대한 명확한 이해가 먼저 선행되어야 합니다. 데브옵스 도입 전에 조직의 현재 상황과 목표를 면밀히 평가한 후, 점진적으로 도입하는 것이 중요하죠. 대기업이나 캐시카우가 있는 기업들이 데브옵스를 실행했다고 해서, 또는 단지 트렌드라는 이유만으로 도입하는 것은 위험할 수 있습니다.
오해 3. 데브옵스는 빠른 소프트웨어 배포만을 목표로 한다?
데브옵스는 속도만 중시하고 품질이나 안정성을 소홀히 한다는 인식이 있습니다. 하지만 데브옵스는 소프트웨어의 빠른 배포뿐만 아니라, 품질과 안정성 그리고 보안을 동시에 추구해야 합니다. 이에 따라 지속적인 통합과 배포(CI/CD), 자동화된 테스트, 모니터링 등을 통해 이러한 목표를 달성하려고 노력해야 하죠.
이처럼 데브옵스라는 도구를 도입하고 데브옵스 팀을 구성했다고 해서, 데브옵스가 즉각적으로 실현되는 것은 아닙니다.
│ 데브옵스(DevOps) 보다 선행되어야 하는 '이것'
진정한 데브옵스를 실현하기 위한 방법을 한 문장으로 표현한다면 다음과 같습니다.
"싸우지 말고 함께
소프트웨어 시스템 혹은 서비스를 만들어봐요"
힘 빠지는 결론일 수도 있습니다. 하지만 데브옵스를 도입하기 이전에 더 선행되어야 할 것은 각각 다른 업무의 조직원들끼리 서로를 이해하고, 협력하며, 보다 안정적인 시스템과 서비스를 제공하는 '문화'를 만드는 것이 더 현실적인 행동이라고 생각합니다.
물론 데브(Dev)와 옵스(Ops)는 우선순위가 동일하지 않고, 동일한 언어를 사용하지 않을 수 있으며, 매우 다른 관점에서 문제 해결될 가능성이 높습니다. 이처럼 팀을 하나로 모으기 위해서는 상당한 시간과 지속적인 노력이 필요한 것이죠.
그렇다면 어떤 방식으로 팀 협업 문화를 만들어야, 데브옵스를 보다 성공적으로 도입할 수 있을까요?
│ 데브옵스(DevOps) 성공을 위한 첫걸음
먼저 조직 내의 문화를 이해한 다음, 조직 내 교육과 커뮤니케이션을 강화하는 것이 중요한데요. 구체적인 방안을 제안한다면 다음과 같습니다.
로테이션 프로그램 도입
진정한 데브옵스를 실현하려면, 무엇보다 각 부서의 업무적인 이해가 중요합니다. 가장 직관적인 방법으로는 다른 부서의 업무를 '직접 체험'해 보는 것입니다. 예를 든다면 개발자가 운영팀의 업무를 수행하거나, 보안 팀이 개발 업무에 참여하는 등, 다양한 부서 간의 경험을 쌓아 보는 것이죠. 이를 통해 서로의 업무 환경과 각 부서 간의 역할을 이해하는 데 큰 도움을 받을 수 있습니다.
지식 공유 플랫폼 구축
내부 플랫폼이나 문서화된 지식 공유 시스템을 구축하는 방법도 있습니다. 각 부서의 업무와 프로세스에 대한 정보를 쉽게 접근할 수 있도록 하는 것이죠. 예를 들면 데브옵스 문화나 기술적인 도구, 프로세스 등을 포함하여 다양한 지식을 공유합니다. 이를 통해 각 부서의 업무 특성을 명확히 이해할 수 있고, 협업을 원활하게 진행할 수 있겠죠.
정기적인 교육 세션
빠르게 변화하는 기술에 대응하기 위해, 팀원들이 지속적으로 학습하고 발전해야 합니다. 정기적인 교육은 이러한 학습을 지원하는 데 중요한 역할을 하는데요. 예를 든다면 새로 도입된 CI/CD 도구에 대한 워크숍을 개최하여, 팀원들이 해당 도구의 사용법과 이점을 학습할 수 있도록 합니다. 또한 현재 사용 중인 프로세스 개선점에 대한 세션을 주기적으로 열어, 팀원들이 학습한 내용을 바탕으로 업무에 효율적으로 적용할 수 있습니다. 만약 특정 분야에 강점을 가진 팀원이 있어 주기적으로 자신의 경험과 성과를 공유한다면, 팀 전체에게 영감을 주고 학습 기회를 제공할 수도 있겠죠.
스탠드 업 미팅 활성화
매일 정해진 시간에 각 팀원이 자신의 진행 상황이나 이슈, 계획을 간결하게 공유합니다. 정해진 시간을 지키고 효율적인 미팅 진행을 위해, 공유하는 팀원들의 말에 집중하되 '총 15분'을 초과하지 않도록 노력하는 것이 중요합니다. 이를 통해 짧은 시간 동안 팀 전체가 빠르게 현재 상황을 파악하고, 실시간으로 정보를 공유하며, 신속하게 문제를 해결할 수 있습니다.
이처럼 위와 같은 방법들을 통해 구성원들이 효과적으로 협력할 수 있는 환경을 조성하는 노력들이 필요합니다.
。。。。。。。。。。。。
많은 기업들이 경쟁에서 지지 않기 위해 도입하고 있는 데브옵스(DevOps).
하지만 진정한 데브옵스를 실현하기 위해서는
"싸우지 말고 소프트웨어 시스템 혹은 서비스를 만들어 봐요"
라는 문장처럼 각각 다른 업무의 조직원들끼리 서로 이해하고, 협력하는 문화가 선행되는 것이 매우 중요합니다.
즉 너희 팀 vs 우리 팀 업무를 구분하지 않고 함께 협력하여, 아이디어를 생산하고, 가치를 창출해야 하는 것이죠. 혹시 아직 데브옵스를 도입하기 전이거나, 도입 이후에 올바르게 활용되고 있는지 궁금하시다면, 오늘 이 글을 통해 심도 있게 생각해 보시는 건 어떨까요?
#데브옵스
#DevOps
#MSA
#클라우드컴퓨팅
원종혁
솔루션사업팀
최일선에서 일하는 솔루션사업팀에서 근무 중입니다.
필진 글 더보기
목록으로
추천 콘텐츠
이전 슬라이드 보기
웹 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
다음 슬라이드 보기