GraphScape 논문 리뷰 · 직접 해보는 시각화 시퀀싱

GraphScape는 시각화 설계 공간을 방향 그래프로 모델링합니다. 노드는 Vega-Lite 차트 명세이고, 엣지는 한 차트를 다른 차트로 바꾸는 편집 연산이며, 각 엣지에는 “이전 차트를 본 사람이 다음 차트를 해석하는 데 드는 부담”을 뜻하는 비용이 붙습니다. 저자들은 편집 연산의 순위를 정하고 선형계획으로 비용을 수치화한 뒤, 사용자 실험에서 발견한 두 가지 선호(필터 값의 정렬, 반복되는 병렬 구조)를 더해 차트 시퀀스 전체의 비용 함수를 만들었습니다. 평가 실험에서 이 비용 순위는 사람들의 평점 순위와 스피어만 ρ = 0.8로 일치했습니다.

설명을 읽기 전에 먼저 문제를 직접 겪어 보는 것이 좋습니다. 아래 여섯 장의 차트는 1976년과 1980년 자동차의 마력과 무게를 지역별로 나눠 그린 것입니다.

체험 1여섯 장의 차트를 발표할 순서대로 눌러 보세요

순서의 좋고 나쁨은 차트 한 장만 봐서는 판단할 수 없습니다. 가능한 720가지 순서 전체와 비교했을 때 내 순서가 어디쯤인지 봐야 비로소 보입니다.

내 순서

위의 차트를 눌러서 하나씩 놓으세요. 놓인 차트를 누르면 빠집니다.

문제 상황으로

1

문제 상황

2017년 이전의 시각화 자동화는 “좋은 차트 한 장”을 만드는 데 집중했습니다. 그런데 사람들은 차트를 한 장씩이 아니라 연달아 봅니다.

Mackinlay의 APT(1986)부터 Voyager(2016)까지, 추천 시스템은 데이터에 맞는 효과적인 인코딩을 찾아 차트를 갤러리처럼 내놓았습니다. 하지만 탐색 중에 쌓인 차트 기록, 추천 결과 목록, 발표 슬라이드에서 사람들은 차트를 연속으로 보고, 앞 차트와 비교하며 다음 차트를 해석합니다. 이때의 부담은 개별 차트의 품질이 아니라 차트와 차트 사이의 관계에서 생깁니다.

Hullman 등(2013)은 차트를 노드, 전환을 엣지로 하는 그래프로 시퀀스를 개념화하고, 전환 종류마다 비용이 다를 것이라고 제안했습니다. 다만 그 모델은 개념 수준이었고, 실제로 계산해서 순서를 정할 수 있는 형태는 아니었습니다. GraphScape가 답하려는 질문은 이것입니다.

두 차트 사이의 거리를 어떻게 계산하고,
그 거리로 차트 묶음의 순서를 어떻게 정할 것인가?

그림 1추천 갤러리에서는 보이지 않는 것

추천 시스템은 이런 차트들을 격자로 늘어놓습니다. 어떤 차트를 먼저 봐야 하는지, 서로 무엇이 다른지는 사람이 알아서 해석해야 합니다.

선행 연구 속 위치

연구 흐름	기존 접근	빈틈	GraphScape가 더한 것
시각화 상태 공간 모델링	탐색 기록 관리, 애니메이션 전환(Heer & Robertson 2007), 시퀀스 그래프(Hullman 2013)	전환 비용이 개념적이거나 특정 용도에 묶여 있음	Vega-Lite 명세 위에서 계산 가능한 비용 모델
시각화 추천 시스템	APT, Show Me, Voyager: 효과적인 단일 차트를 찾음	추천된 차트들 사이의 관계와 순서를 다루지 않음	추천 결과를 정렬하고, 현재 차트에서 가까운 대안을 찾음
문법 기반 시각화 명세	Grammar of Graphics, ggplot2, Vega-Lite: 사람이 직접 명세를 작성	명세 사이를 추론하는 수단이 없음	명세를 편집 연산으로 연결해 설계 공간을 탐색

방법론 1로

2

방법론 1: 전환 유형 비교하기

편집 연산 하나하나에 숫자 비용을 매기는 과정입니다. 목록을 정의하고, 순서를 정하고, 그 순서를 만족하는 숫자를 선형계획으로 구합니다.

1단계: 편집 연산 분류

Vega-Lite 단일 차트를 다른 차트로 바꾸는 원자적 연산을 세 범주로 나눕니다. 마크(막대→선 등 15가지 쌍), 데이터 변환(스케일, 정렬, 비닝, 집계, 필터 추가·제거·수정), 인코딩(전치, 채널 이동, 필드 추가·제거·교체)입니다.

2단계: 순위 정하기

범주 사이에는 가정을 둡니다. 비용은 마크 < 변환 < 인코딩 순입니다. 마크는 데이터를 건드리지 않고, 변환은 같은 필드의 요약 수준을 바꾸며, 인코딩은 보여주는 필드 자체를 바꾸기 때문입니다. 범주 안의 순서는 저자들이 직접 수행한 삼중 비교로 정했습니다. 원본 차트 X를 보여주고 “A와 B 중 X 다음에 이해하기 쉬운 것은?”을 묻는 방식입니다.

3단계: 선형계획으로 수치화

삼중 비교 결과를 2차원으로 임베딩하면 세 가지 문제가 생깁니다. 범주별 임베딩끼리 스케일을 맞출 수 없고, 유클리드 거리(L2)라서 편집 비용이 더해지지 않으며, 거리 공간은 정의상 대칭이라 A→B와 B→A의 차이를 표현할 수 없습니다. 그래서 저자들은 판단 하나하나를 “비용(A) < 비용(B)” 부등식으로 바꾸고, 모든 비용의 합을 최소화하는 선형계획을 풀었습니다. 아래 실험에서 이 과정을 직접 해 볼 수 있습니다.

체험 2내 판단으로 비용 모델 만들기

숫자 비용은 결국 판단의 모음에서 나옵니다. 판단을 하나씩 더할 때마다 부등식이 늘고, 해가 바뀌고, 때로는 판단끼리 모순되어 해가 사라지는 과정을 직접 봐야 “비용 = 순서 정보”라는 점이 체감됩니다.

질문 1 / 6

내 판단이 만든 부등식

아직 판단이 없습니다. 왼쪽 질문에 답하면 여기에 부등식이 쌓입니다.

선형계획 해 (비용)

여유폭(부등식 사이 최소 간격) 1 논문의 범주 가정 적용

선형계획: 모든 비용 ≥ 1, 판단 “A < B”는 비용(B) − 비용(A) ≥ 여유폭, 목적함수는 비용의 합 최소화. 이런 차분 제약에서는 최적해가 “판단 그래프의 최장 경로 길이”와 같아서 이 페이지에서 정확히 풀 수 있습니다.

실제 라이브러리의 비용은 범주 가정을 정확히 지킨다

저자들이 공개한 코드의 비용표를 직접 더해 보면, 논문의 범주 제약 “한 범주의 모든 비용의 합 < 다음 범주의 어떤 단일 비용”이 그대로 들어 있습니다.

그림 2공개 코드(uwdata/graphscape)의 편집 비용표 검산

마크 15개의 합 0.59 < 변환 최솟값 0.60(SCALE), 변환 7개의 합 4.40 < 인코딩 최솟값 4.41(SWAP_ROW_COLUMN). 그래서 인코딩을 하나라도 덜 바꾸는 전환이 거의 항상 이깁니다.

그림 3임베딩 거리를 쓰면 왜 안 되는가: 모서리 깎기

두 편집 방향 사이의 각도 90°

편집 두 번의 합 (L1, 가법)

임베딩 거리 (L2)

편집 A(길이 3) 다음에 편집 B(길이 4)를 하면 해석 부담은 3 + 4로 쌓여야 자연스럽습니다. 하지만 임베딩 공간에서는 두 편집을 합친 거리가 대각선으로 짧아집니다. 각도에 따라 결과가 달라지니 경로 비용을 더해 비교하는 그래프 탐색과 맞지 않습니다.

실험 1로

3

실험 1: 사람들이 직접 순서를 짠다면

자기 실험으로 만든 순위를 다른 사람들도 공유하는지 확인하는 형성적 연구입니다. 결과는 검증을 넘어 모델 구조 자체를 바꿉니다.

대학원 시각화 수업 수강생 51명이 7개의 차트 세트를 “가장 명확하게 전달되는 순서”로 배열했습니다. 이 중 4개는 첫 차트가 고정되어 있어서, 남은 두 차트의 순서가 곧 서로 경쟁하는 두 가설 중 하나를 고르는 선택이 됩니다. 아래 세 과제를 직접 풀어 보고 51명의 선택과 비교해 보세요.

체험 3강제 선택 과제 세 개

각 과제는 “어느 쪽 편집이 더 무거운가”를 묻도록 설계되어 있습니다. 내가 고른 답을 51명의 분포와 나란히 볼 때, 그 결과가 모델의 어떤 부품이 되었는지가 선명해집니다.

7개 과제 전체 결과와 다중 비교 보정

논문은 과제마다 카이제곱 검정을 따로 했고 다중 비교 보정은 하지 않았습니다. 보정 방법을 바꿔 보면 어떤 결론이 흔들리는지 보입니다.

그림 4형성적 연구 결과 (n = 51)

유의수준 0.05 기준 보정:

방법론 2로

4

방법론 2: GraphScape 모델

편집 비용과 실험 1의 발견을 하나의 비용 함수로 조립합니다.

그래프. GraphScape = (V, E, D). 노드 V는 Vega-Lite 명세, 엣지 E는 편집 연산, D는 데이터 테이블입니다. D에 있는 필드만 추가할 수 있고, 빈 채널에서는 제거할 수 없는 식으로 데이터와 현재 상태가 엣지를 결정합니다. 조합이 너무 많아 그래프를 미리 만들지 않고 탐색할 때마다 엣지를 생성합니다.

전환 비용 T(u, v)는 u에서 v로 가는 최단 경로의 엣지 비용 합입니다. 흔히 쓰는 개수(count) 집계는 예외로, 동반되는 비닝·집계 비용을 빼고 필드 추가 비용만 매깁니다.

필터 순서 항 F(S). 필터 값만 다른 시퀀스들은 T가 똑같습니다. 그래서 같은 필드의 필터 값이 오름차순으로 바뀌면 +1, 내림차순이면 −1을 주고 합을 정규화해 1에서 뺍니다(실험 1의 시간순 선호). 논문 수식은 d의 부호가 반대로 인쇄되어 있지만, 본문 설명과 공개 코드는 오름차순 +1입니다.

전역 가중치 W(S). 같은 전환 묶음이 겹치지 않게 반복되는 패턴 중 시퀀스를 가장 많이 덮는 것을 찾아, 그 비율만큼 비용을 깎습니다(실험 1 과제 7의 병렬 구조 선호).

빈 차트 S₀. 시퀀스 맨 앞에 아무 인코딩도 없는 빈 명세를 둡니다. 첫 차트를 만드는 비용이 계산에 들어가고, 원자료에서 시작하는 순서가 자연스럽게 유리해집니다(실험 1 과제 5의 롤업 선호).

Cost(S) = W(S) · ( F(S) + Σ_i=1..|S| T(S_i−1, S_i) )W = 1 − max_P count(P, S)·|P| / |S|. 반복 패턴이 없으면 W = 1.

체험 4비용 함수 해부대: 항을 하나씩 켜고 끄기 (논문 그림 4의 확장판)

세 항이 각각 시퀀스의 어느 측면(시작점, 값의 방향, 전체 구조)을 결정하는지는 수식만으로는 보이지 않습니다. 같은 차트, 같은 순서에서 항을 켜고 끌 때 최적 순서가 바뀌는 순간을 봐야 이해됩니다.

불러오기:

차트를 끌어다 놓거나 차트 아래의 ◀ ▶ 버튼으로 순서를 바꿀 수 있습니다.

빈 차트 S₀ 필터 항 F 전역 가중치 W

F 계산 방식

F에 곱할 배율 (리뷰어 실험용) ×1

비용은 공개 라이브러리의 graphscape.sequence가 계산한 720개 순서의 ΣT, W, F 값을 그대로 쓰고, 켜고 끄는 조합만 이 페이지에서 다시 합칩니다. 라이브러리 기준으로 그림 4(c)의 최적 순서는 1976년 → 1980년의 오름차순이며, 필터 점수 0.715가 논문 그림의 값과 정확히 일치합니다.

실험 2로

5

실험 2: 완성된 모델은 사람과 맞는가

이번에는 일반인 55명(Mechanical Turk)이 이미 만들어진 시퀀스 다섯 개를 각각 5점 척도로 평가했습니다.

6개 과제마다 차트 6장과 시퀀스 5개가 주어졌습니다. 시퀀스는 GraphScape 1위 하나, 무작위 순열 하나, 저자들이 손으로 만든 의미 있는 순서 셋으로 구성됩니다. 참가자는 선별 질문으로 차트를 읽었는지 확인받은 뒤, 각 시퀀스가 “데이터를 얼마나 명확하고 논리적으로 보여주는지” 평가했습니다. 같은 방식으로 직접 평가해 보세요.

체험 5시퀀스 다섯 개 평가하기 (논문 그림 5와 같은 자동차 연비 데이터)

모델의 각 항이 사람의 판단을 얼마나 설명하는지(ρ)는 결국 “내 평가와 맞는가”의 질문입니다. 직접 평가한 뒤 모델 버전별 상관을 보면, 왜 전환 비용만으로는 부족한지가 내 데이터로 드러납니다.

다섯 개를 모두 평가하면 버튼이 켜집니다.

논문의 결과

선별 질문을 틀린 115개를 뺀 1,535개 평점을 선형 혼합효과 모델(참가자와 과제를 무선효과로, 최대 무선효과 구조)로 분석했습니다. GraphScape 1위 시퀀스는 5점 척도에서 0.46점(95% CI 0.32–0.61) 높게 평가되었고(χ²(1) = 39.87, p < .001), 화면 위치 효과는 없었습니다(p = .348). 과제별로는 평균 1위가 세트 1, 4, 5, 6, 평균 2위가 세트 2였고, 세트 3을 제외한 모든 세트에서 통계적 최상위 그룹에 들었습니다. 단, 세트 4는 프리드먼 검정 자체가 유의하지 않았습니다.

비교 (스피어만 순위 상관)	ρ	유의성
완전한 GraphScape vs 참가자	0.80	p < .001
전역 가중치 W만 vs 참가자	0.60	p < .001
전환 비용 T만 vs 참가자	0.35	유의하지 않음
T만 vs W만	−0.10	유의하지 않음

T와 W는 서로 거의 무관하고, 각각이 독립적으로 사람의 판단을 설명합니다. 실험 1 과제 7에서 “쌍별 비용만 최소화하면 과적합된다”고 판단해 W를 도입한 결정이 여기서 정량적으로 정당화됩니다.

유일한 실패, 세트 3. 연도와 원산지가 있는 자동차 데이터에서 55명 중 37명이 서술 응답에 시간순 배열을 언급했습니다. 사람들은 연도로 먼저 묶기를 원했지만 GraphScape는 원산지로 먼저 묶었습니다. 사람들이 선호한 시퀀스는 GraphScape에서도 2, 3위였고 비용 차이는 작았습니다.

응용으로

6

응용: 세 가지 데모

GraphScape는 차트 사이의 비용을 재는 평가 도구이자, 그래프를 따라가며 새 차트를 만드는 생성 도구입니다. 세 응용은 이 두 성격을 서로 다르게 조합합니다.

아래 데모는 모두 저자들의 공개 라이브러리(uwdata/graphscape)의 sequence, transition, path 함수를 브라우저에서 직접 호출합니다. 미리 계산해 둔 결과가 아닙니다.

북마크해 둔 차트나 추천 결과가 여러 장일 때, 가능한 순서는 차트 수의 계승으로 늘어납니다. 7장이면 5,040가지라 사람이 비교할 수 없고, 바로 여기가 모델이 필요한 지점입니다.

탐색 중에 모아 둔 차트라고 생각하고 3장에서 7장까지 고르세요.

첫 번째로 고른 차트를 맨 앞에 고정

평가로

7

평가: 장점, 약점, 그리고 토론

장점

설계 공간을 그래프로 본 관점. 차트를 명세로, 관계를 편집 연산으로 정의해 “얼마나 비슷한가”를 그래프 탐색 문제로 바꿨습니다.
정성적 판단의 수치화 방법론. 부등식을 선형계획으로 풀어 범주 간 스케일, 가법성, 비대칭성 문제를 한 번에 해결했습니다(체험 2).
발견 → 모델 → 검증의 일관된 흐름. 실험 1에서 병렬 구조 선호를 발견해 W로 넣고, 실험 2에서 T와 W의 독립적 기여(ρ 0.35, 0.60 → 0.80)로 확인했습니다.
재현 가능성. 공개 코드로 그림 4(c)의 최적 순서와 필터 점수 0.715를 정확히 재현할 수 있었습니다(체험 4).

약점

비용의 출발점이 자기 실험. 삼중 비교는 저자들의 판단이고, 결과는 비율이 아닌 순서 정보입니다. 체험 2의 여유폭 슬라이더처럼, “비용 2는 비용 1의 두 배”라는 해석은 여유폭 선택의 산물입니다.
세 항의 결합이 손으로 정해짐. T, F, W의 스케일과 결합 방식은 학습되지 않았습니다. 공개 코드는 논문과 달리 F를 1000으로 나눠 쓰는데, 논문에는 이런 변경이 없습니다.
시간순 선호를 표현할 항이 없음. 시간순 선호는 실험 1(42/51), 그림 4의 F, 실험 2 세트 3의 실패로 세 번 등장합니다. 체험 4에서 F의 배율을 올려 보면 값의 방향은 바뀌지만, “시간 필드를 바깥 그룹으로 쓰라”는 선호는 W가 구분하지 못합니다.
실험 설계의 간극. 경쟁 시퀀스가 무작위 하나와 저자 제작 셋이라 기준선이 약합니다. T만 최소화한 시퀀스와의 직접 대결이 없습니다. 실험 1은 다중 비교 보정이 없어 롤업 선호(과제 5)는 보정 시 유의하지 않습니다(그림 4).
선호 ≠ 이해. 측정한 것은 주관적 평점이며, 그 순서로 봤을 때 실제로 더 잘 이해하거나 기억하는지는 측정하지 않았습니다.

직접 확인한 재현성 메모

항목	논문	공개 코드에서 확인한 것
필터 항 d의 부호	d(a,b) = (a−b)/\|a−b\|로 인쇄 (오름차순이 −1)	이전 값 < 현재 값이면 +1. 본문 설명과 일치, 수식은 오타
그림 4(c) 최적 순서	텍스트 추출본에서 방향이 불분명	1976 → 1980 오름차순이 1위, F = 0.715 일치
그림 4(b) 필터 점수	0.758	0.715 (불일치)
편집 비용 스케일	Modify Filter 46, Remove Filter 49	0.64, 0.65로 재조정. 범주 제약은 정확히 유지
F의 가중	Cost = W · (F + ΣT)	Cost = W · (ΣT + F / 1000)
추가·제거 비대칭	선형계획으로 표현 가능하다고 주장	모든 추가·제거 쌍이 같은 비용 (대칭)

토론거리

사람들의 시퀀싱 데이터를 모아 T, F, W의 가중치를 학습한다면, 자기 실험에서 나온 순위는 얼마나 바뀔까?
“시간 필드를 바깥 그룹으로”라는 선호를 넣으려면 W를 어떻게 바꿔야 할까? 패턴의 반복 단위가 무엇을 기준으로 묶이는지를 비용에 넣는 방법이 있을까?
경로 상세화에서 모든 분할은 총비용이 같습니다(같은 편집을 나눌 뿐이므로). 그렇다면 “어디서 끊을지”는 비용 모델이 아닌 무엇으로 정해야 할까?
선호 평점 대신 이해도나 기억을 측정했다면 GraphScape의 순위는 여전히 이길까?

확장과 연결

후속 연구: Dziban (Lin, Moritz, Heer, CHI 2020). Draco 지식 베이스로 불완전한 명세를 자동 완성하면서, GraphScape의 차트 유사도 로직을 가져와 사용자가 지정한 “앵커” 차트와 비슷하게 유지되는 추천을 만듭니다. 응용 3(설계 대안)의 “현재 설계에서 최소한만 바꾸기”를 추천 시스템 전반으로 확장한 셈입니다. 이 논문의 지속적인 기여는 시퀀스 정렬 자체보다 차트 사이의 거리라는 재사용 가능한 부품에 있습니다.

작성 필요: 수업 주제와의 연결. 수업에서 다룬 개념(예: 지각적 효과성 순위, 애니메이션 전환, 시각화 추천)과 이 논문을 어떻게 잇는지 여기에 적어 주세요.

작성 필요: 내 프로젝트와의 연결. 진행 중인 프로젝트에서 GraphScape의 어떤 아이디어(비용 모델, 패턴 보상, 제약 기반 대안 탐색)를 쓸 수 있는지 적어 주세요.

참고 문헌

Kim, Wongsuphasawat, Hullman, Heer. GraphScape: A Model for Automated Reasoning about Visualization Similarity and Sequencing. CHI 2017.
Hullman, Drucker, Riche, Lee, Fisher, Adar. A Deeper Understanding of Sequence in Narrative Visualization. IEEE TVCG 2013.
Heer, Robertson. Animated Transitions in Statistical Data Graphics. IEEE TVCG 2007.
Wongsuphasawat et al. Voyager: Exploratory Analysis via Faceted Browsing of Visualization Recommendations. IEEE TVCG 2016.
Lin, Moritz, Heer. Dziban: Balancing Agency & Automation in Visualization Design via Anchored Recommendations. CHI 2020.

이 페이지는 graphscape 라이브러리(BSD-3-Clause, UW Interactive Data Lab)와 Vega, Vega-Lite, vega-datasets를 사용합니다. 실험 1의 과제 2, 3 자극은 논문 설명에 맞춰 이 페이지에서 다시 만든 것입니다.