[211]대규모 시스템 시각화 현동석김광림

현동석김광림NAVER SEARCH

대규모시스템시각화라비스는복잡한서비스를어떻게한눈에보게만들었는가

1.시스템시각화를하게된이유

네이버검색시스템

매일, 수억건의검색질의를, 수십억건의검색결과로응답하는대규모시스템

“처음부터수억 건의결과를 처리하는

시스템으로 만들어지지않았습니다.”

네이버검색시스템

서비스도하면서서버도증설하고기능도추가하고검색도추가해온시스템

http://www.thenamesponyboy.com/2014/04/saudis-changing-tires.html

훌륭한분들의

고급진노력으로,

잘동작하지만,.

“전체시스템을파악하기

어려웠습니다.”

네이버검색시스템복잡한관계를가지고있을것이라고추측만

가능한상황이다보니,

http://guidelive.pegasus.imgix.net/img/photos/2015/08/07/howls_moving_castle_artwork_prop_10.jpg

시각화정보부재로인한문제• 매번화이트보드에그려가며시스템

을설명해야함

https://source.opennews.org/media/img/uploads/article_images/networkdiagrams_image01.jpg

• 문서로만들어도수개월후면바뀜

• 최신정보는늘담당개발자머릿속에

• 상위의사결정자가각부서에매번

조사를요청하고취합하는일이반복

시각화정보부재로인한문제

http://tvtropes.org/pmwiki/pmwiki.php/Main/WireDilemma

• 다른 서비스와연관된 기능을섣불리 추가하기 쉽지않음

• 커뮤니케이션 대폭증가

• 장애 발생시 전파범위 파악이쉽지 않다

• 어떤 서비스에영향이 있었는지

• 누구에게 장애를알려야 할지

• 리소스 파악도어려움

• 기능 추가로인한 추가서버는 얼마나

• 기존 서비스에대한 트래픽증감은?

네이버검색시스템그래서자동화된시스템시각화방법을고민하게되었습니다.

2.기존시각화방법조사

기존사례1

AWS 시스템시각화로사용되는 CloudCraft는각요소별비용이나용량등을확인할수

있는장점이있지만,http://cloudcraft.co

사용자가일일이그려주는번거로움이있었

음

기존사례2

Neo4j 그래프데이터를시각화해주는 neo4j-Browser 의경우자동화가가능하나전체그

림을한눈에보기는어려웠음.

https://dzone.com/articles/styling-neo4j-server

그 외에 “관제시스템” 이라는이름으로사용

되는시스템시각화는이와동일한레이아웃

방식을사용함

기존방법들의 공통점

• Force-directed graph drawing

https://en.wikipedia.org/wiki/Force-directed_graph_drawing

• 그래프데이터를수동으로 입력받거나,이미 있다고가정

• 대규모시스템의경우한눈에보기는여전히 어려움

• 직접 만들어보자.

3.시스템시각화도구 LAVISS 개발

LAVISS 개발요구사항• 시스템관계데이터를자동으로 수집하자

• 접근 편의성을위해 브라우저로 시각화하자

• 시스템시각화는최대한알고리즘으로 그리자

• 시스템개편 전후비교를 위해 히스토리를기록하자

• 담당자와모니터링 데이터가연동되도록 하자

3.시스템시각화도구 LAVISS 개발시스템관계데이터를자동으로수집하자

데이터구조는간단.

node nodeedge

server server

relation

LAVISS 개발 - 시스템관계 데이터를자동으로수집하자

하지만수집은간단하지않음.

서버-클라이언트모델에서는 end point(IP) 위주로로그에 남기때문

64.242.88.10 - - [07/Mar/2004:17:16:00 -0800] "GET /twiki/bin/search/Main/?scope=topic&ex=on&search=^g HTTP/1.1" 200 3675


어디에서요청했는지(전화번호)는알지만

그게어떤서버인지(누구인지)는모름

“대규모시스템을가시화하기위해 필수적으로 풀어야할 근본적인문제”

근본적인해결법:단일한 포맷의로그를 단일한저장소에 쌓는다.


Ø 모든 서버에서남겨줘야함. 현업도바쁜데,.Ø 네이버 통합검색+α의모든트래픽을 받아줘야함.Ø 현재프로젝트명 LOGISS로프로토콜 및시스템 설계중.

단기적인 해결법:Ø 현재의다양한로그와데이터, 프로토콜로부터데이터를추출

해보자.

https://tools.ietf.org/html/rfc2616#section-14.45

• comment 영역을사용해서재귀적으로

sub-request에대한정보를 남길 수있음

1. VIA HTTP HEADER


단기적인해결법 cont’d:





A

B C

D

Sample VIA Header:1.1 hostA01 (1.1 hostB01 (1.1 hostD01 (D), B)+1.1 hostC (C), A)

https://tools.ietf.org/html/rfc2616#section-14.451. VIA HTTP HEADER



• HTTP 프로토콜 하에서만동작제한

• 헤더가커지므로일부트래픽에서만동

작하도록 해야함

• 동적으로 변하는관계파악에유리


단기적인해결법 cont’d:https://tools.ietf.org/html/rfc2616#section-14.451. VIA HTTP HEADER

• 별도프로토콜을사용하는검색서버는

VIA 헤더 사용이불가능

2. 서버별토폴로지 파일분석



• 모니터링 시스템과의연동으로서버별

토폴로지파일을수집 및 분석

• 통신 병목을개선하고자 thread pool을

사용한 producer-consumer 구조로구현

5. 관계데이터추출

• static 파일서버와 같이 UA로부터 직접

요청을 받는데동적으로소스가바뀌는

경우

3. 외부요청을 직접받는경우


단기적인해결법 cont’d: QA logs

NXRay

2. VIA 로깅하며응답

NAVER SEARCH1. 검색요청

3.사용자

액션에

뮬레이션

NAVER 시스템을알기위한X-Ray를 쏜다는의미로NXRay로 명명

• (모든 static 파일이노출되는) QA 테스트

로그에서질의를 역으로파싱 후,

• Headless browser(PhantomJS)로각질

의를 던져 응답서버정보를추출 후 저장

3.시스템시각화도구 LAVISS 개발접근 편의성을위해 브라우저로시각화하자

➕ 아티스틱함.

LAVISS 개발 - 접근 편의성을 위해브라우저로시각화하자

1. 소개가 필요없는 d3.js

NAVER search system d3.js drawing

➖ 보기어려움.

➖ 느림. 꽤 느림.

시각화된구조위에서

높은수준의사용자

인터렉션을추가하기

어려움


2. 그래프데이터시각화전용라이브러리 sigma.js

http://sigmajs.org


2. 그래프데이터시각화전용라이브러리 sigma.js – 그려봄

➕ 로딩 빠름

Censored Censored

NAVER search system sigma.js drawing

➕ 줌인줌아웃 빠름

➕ 기능추가도 간편

➖ 여전히보기불편


2. 그래프데이터시각화전용라이브러리 sigma.js

만일 3D로그리면이렇게나아지지않을까? 하고 적절한도구를보다가,

AS-IS TO-BE


3. three.js를 선택

• 자바스크립트 3D 그래픽라이브러리

• 브라우저에서 WebGL 쓰기 편리

• 브라우저에서얼마전부터 GPU 가속사용 중

• 매우 활발히 개발되는 중


3. three.js를 선택 - 그려봄

가능성이보임!

3.시스템시각화도구 LAVISS 개발시스템시각화는최대한알고리즘으로그리자

LAVISS 개발 - 시스템시각화는 최대한알고리즘으로그리자

처음에시도한 레이아웃 알고리즘: Force directed layout



Character co-occurence in Les Misérables.https://bl.ocks.org/mbostock/4062045

• Problem

• Solution• Layout 작업만 전담하는 서버를 만들고

결과를 캐싱 하자.

• The typical force-directed algorithms are in general considered to have a running time equivalent to O(n3), where…https://en.wikipedia.org/wiki/Force-directed_graph_drawing

• 놔두면 끝없이 도는 알고리즘. LAVISS는2015년산 iMac에서 최소 10분 돌려야 함



• Problem• The typical force-directed algorithms are in gen

eral considered to have a running time equivalent to O(n3), where…https://en.wikipedia.org/wiki/Force-directed_graph_drawing

• 놔두면 끝없이 도는 알고리즘. LAVISS는2015년산 iMac에서 최소 10분 돌려야 함

• Solution• Layout 작업만 전담하는 서버를 만들고

결과를 캐싱 하자.

Tomcat

Gephi-toolkit

Docker

Custom layout engine



Graph Data DB

Caching results

• 레이아웃 시간문제 해결USHER

• 몇 줄 안되지만 혼자 쓰기아깝다

• 남도 쓰게 공개함.

• Usherhttps://github.com/naver/usher



• Problem: 두번째 문제발생

이건 오른쪽 위가낫지 않음?

파란 건 왼쪽 아래가 적절한데,.

• 원하는 레이아웃이안 나옴• 특히 여러검색 결과를통합하는 서버에서

• Solution• 특정 노드에대해 preset 좌표를지정


그래도해결 못한 근본적인문제가있었는데,.1. 네이버검색시스템은하위에수백 개 단위의검색시스템이존재

(e.g. 블로그검색서비스, 카페 검색서비스, 지식인, etc.)

2. 서버와의관계는대부분검색요청 흐름에 따르는트리 형태

3. 그래서그래프데이터를 넣고트리처럼 이쁜 레이아웃이나오길 기대

4. 하지만결과는전형적인그래프 레이아웃

5. 하위검색시스템 단위로그룹핑 되어야시각화의의미가있는상황

그래서알고리즘을 직접 만들기로 했습니다.


두 번째 레이아웃 알고리즘:

• 팔로 알토에계시던 분들1)이콘(cone) 트리라부르던 게있었습니다..

1) Cone Trees: Animated 3D Visualizations of Hierarchical Information. G. G. Robertson, J. D. Mackinlay, and S. K. Card.

• 콘트리처럼노드를 배치하는방식 중에 Ringed Circular Layout Approach2) 가있었습니다.• 두 가지방식을 응용하고개선한 레이아웃을직접 만들기로했습니다.

2) Handbook of Graph Drawing and Visualization (Discrete Mathematics and Its Applications), Roberto Tamassia(Editor). P162

NAVERTIC layout


두 번째 레이아웃 알고리즘: NAVERTIC layout Sub-problem #1• 데이터는 그래프인데트리

그리는 알고리즘으로어떻게 그리나

Introduction to Algorithms, 3rd Edition (MIT Press)

DFS(Depth First Search) 알고리즘은모든 노드를방문하면서 side effect로노드를검/흰/회색으로 칠하면서노드를분류하는점을 착안! Solution

• 그래프를 트리구조로 바꾸는 변환함수를 구현하기로함.

이정보로나중에트리를만들 때 자식to 부모 엣지를사전에제거하는데 활용!

Sub-problem #2• 자식->부모엣지(back edge)

때문에 트리가안됨.

Solution• DFS로 back edge 검출.

이제 그리자!


두 번째 레이아웃 알고리즘: NAVERTIC layout

RCLA로그리려다 보니,

STEP2 STEP3성공!

STEP1

1, 2 번 삼각형이y 변을 공유하는특성으로 식을세워 풀자 Sub-problem #2

• 크기가 다른원의 중심을둘레에 포함하는최소의 원구하기

Solution• 피타고라스 정리, 연립 2차

방정식, 아크 코싸인으로해결


두 번째 레이아웃 알고리즘: NAVERTIC layout - 그려봄

Censored

Navertic layout approach

3.시스템시각화도구 LAVISS 개발시스템개편전후비교를위해히스토리를기록하자

LAVISS 개발 - 시스템개편 전후비교를위해히스토리를기록하자

일별스냅샷 보관으로쉽게해결. 비교도해볼 수있도록 구현함.

LAVISS. 시스템개편 전후비교 모습

3.시스템시각화도구 LAVISS 개발담당자와모니터링데이터가연동되도록 하자

LAVISS 개발 – 담당자와모니터링데이터가연동되도록하자

네이버의증분검색엔진 DOT를사용한 내

부검색기능추가

네이버의모니터링 시스템인 PALANTIR를사용

한모니터링 연동

Large Scale Visual Inspector On Search System 최종모습

LAVISS 개발 – SOLVED

2.DEMO

3.연구사례공유UX in 3D space

Prototypes

3D is much harder than 2D

UX Guide #1

CAMERA

Position and angle.

사람의시선은어떻게이동하는가

UX Guide #2

MMORPG의 캐릭터는대부분 땅에 붙어다닙니다.

LAVISS camera controls

LAVISS의 카메라는 날아다닙니다.다섯 가지방식으로…> 카메라 컨트롤러를상태로가지는 state machine 구현으로해결했습니다.

Censored

LAVISS camera controls

1. 각카메라 컨트롤을 클래스로만들고,

2. 카메라클래스를 맵에등록.

3. 마우스나키보드이벤트발생시,

4. 현재 state의 컨트롤러를찾고,

5. 커멘드를전달

6. 이벤트담당 컨트롤러가다른 컨트롤

로전환 여부를결정

LAVISS drag-and-select

2D에서드래그, 3D에서선택

클릭이어떻게구현되는지 먼저 알아야함

LAVISS drag-and-select클릭은 포인터에서 레이저를 쏜다고생각합니다.

준비

발사

Star Wars: The Force Awakens 2015

LAVISS drag-and-selectDrag-and-select는?드래그된 박스의모든 픽셀에대해발사! 했더니,.

1. 안 맞는 오브젝트들이있네요. 왜냐면,

2. 드래그한영역이 크면 오래 걸려요.

예비군 대공 사격 훈련에서화망이라고들어보셨나요

다 삐져나가요.

1500 x 1500 전체드래그하면 250만번반복하니까

크롬에서 6분 걸립니다. 그래서,

LAVISS drag-and-select반대로 했습니다.

• 각 오브젝트가드래그영역 안에들어오는지를확인

• 마치 ML에서 PCAPrincipal Component Decomposition하듯 프로젝션

LAVISS drag-and-select했더니 카메라 뒤에있는것도 선택됩니다.• 사용자의드래그가 양방향 레이저 캐논 포가된상황.• 카메라앞에가상의 오브젝트를놓아 해결.

LAVISS HTML Embedding

Censored

LAVISS HTML EmbeddingWeb에서 3D를구현하는방법

1. WebGL2. CSS 3D

HTML Embedding => 캔버스에그리기가… => CSS 3D

그래서 두 Scene을합성

WebGL on canvas + CSS 3D

+

이런겁니다.

LAVISS object highlighting

Mesh = geometry + material


= + outside

inside

Mesh highlighting


1. 좀더 큰 mesh를만들고,2. Inside material만 색을입힌다.3. 밖에서보면투명. 안에서는불투명

4.전망

전망• 라비스는현재네이버의대규모검색서비스를가시화하고있음

• 이후검색서비스 외 다른시스템가시화까지커버할 예정

• 일정은확실하지않지만 오픈소스로 여러분을 찾아뵙겠습니다.

5.References

References• Roberto Tamassia(Editor). Handbook of Graph Drawing and Visualization (Discrete Mathematics

and Its Applications), page 162, Chapman and Hall/CRC, 2013• G. G. Robertson, J. D. Mackinlay, and S. K. Card. Cone trees: Animated 3D visualizations of hierarc

hical information. In Proc. ACM Conf. on Human Factors in Computing Systems, pages 189-193, 1991.

• Yifan Hu. Efficient and high quality force-directed graph drawing. The Mathematica Journal, 10:37–71, 2005

• T. Munzner, "H3: Laying out Lar ge Directed Graphs in 3D Hyperbolic Space", Proc. 1997 IEEE Symp. on Interactive 3D Graphics, IEEE Computer Society Press, Los Alamitos, Calif., 1997

• SIGMAJS, “Sigma.js: an open-source lightweight javascript library,” http://sigmajs.org/ [retrieved: May 1, 2015]

• THREEJS, “Three.js: an WebGL based open-source javascript library,” https://threejs.org [retrieved: May 18, 2015]

• PHANTOMJS, “Phantom.js: a headless WebKit scriptable with a JavaScript API,” http://phantomjs.org/ [retrieved: Oct 10, 2015]

• GEPHI, “Gephi: the open graph viz platform,” https://gephi.org [retrieved: June 10, 2015]

Q&A

Thank You

Technology

[211]대규모 시스템 시각화 현동석김광림