[LensCal] 숫자보다 히트맵 — 현장에서 실제로 쓰이는 대시보드 만들기

대쉬보드

시리즈 6/7. 12 개 지표를 뽑아놨는데 운용자가 안 본다면 소용이 없습니다. "1 초 안에 판정 가능한" UI 를 만들기 위해 어떤 고민을 했는지에 대한 기록입니다.

1. PropertyGrid 만으로는 왜 부족한가

지표 12 개를 전부 PropertyGrid 에 쏟아부으면 이렇게 됩니다.

▸ 검출 결과
    검출 코너 수              96
    회전 각도                 1.23°
▸ 품질 지표
    재투영 오차 RMS           0.15 px
    재투영 오차 Max           0.42 px
    직교성 평균               0.08°
    직교성 최대               0.22°
    중심-주변 편차 (최대)     0.12%
    콘트라스트 최소           0.82
    콘트라스트 최대           0.91
    샤프니스 최소             45.2
    샤프니스 최대             52.1
    왜곡 k1                   1.2e-8
    왜곡 k2                   -3.4e-12
    최대 왜곡량               0.02 px

문제는 이 숫자들이 전부 나란히 있어서 중요도가 안 보인다는 점입니다. 눈에 띄는 색도, 위계도 없습니다. 현장 운용자는 "정상인가 불량인가" 를 1 초 안에 판단해야 하는데, 숫자 리스트는 그걸 해주지 못합니다.

특히 운용자는 렌즈 전문가가 아닌 경우가 많습니다. "왜곡 k1 = 1.2e-8" 이라는 숫자를 보고 "아 정상이구나" 라고 판단하려면 먼저 임계값이 얼마인지 기억 해야 하고, 그 기억을 매번 불러와야 합니다. 이 인지 부담이 누적되면 결국 "그냥 안 본다" 는 결과로 이어집니다.

그래서 우측 패널을 4 단 합성 이미지로 구성하고, PropertyGrid 는 세부 수치 확인용으로 한정했습니다. 역할을 명확히 나눈 겁니다.

2. 4 단 합성 레이아웃

┌──────────────────────────┐
│   [1] 히트맵             │  25%
│   3×3 스케일 / 콘트라스트 │
├──────────────────────────┤
│   [2] 품질 지표 바       │  25%
│   재투영 / 직교성 / 샤프니스│
├──────────────────────────┤
│   [3] 거리 분포 차트     │  25%
│   H / V 코너 간 거리     │
├──────────────────────────┤
│   [4] 요약 텍스트        │  25%
│   스케일·등방성·왜곡·중심편차│
└──────────────────────────┘

4 단으로 나눈 이유는 각 단이 서로 다른 종류의 정보 를 담기 때문입니다.

• [1] 히트맵 → 공간 분포
• [2] 바 차트 → 정량 수치의 임계값 대비 위치
• [3] 분포 차트 → 분산/이상치
• [4] 텍스트 → 확정된 수치

같은 정보를 네 번 반복해서 보여주는 게 아니라, 네 가지 다른 질문에 답하는 구조입니다.

2.1. [1] 히트맵 — 공간적 불균일을 눈으로 잡기

3×3 영역의 스케일 또는 콘트라스트를 색으로 표현합니다.

• 정상: 9 칸이 모두 비슷한 색
• 모서리 4 칸만 어두움 → 광학 문제 (필드 커버리지 부족)
• 한쪽 변 3 칸만 어두움 → 조명 비대칭
• 중심 밝고 주변 어두움 → 전형적인 비네팅 패턴

숫자로 "0.0012, 0.0011, 0.0013, ..." 을 비교하려면 몇 초가 걸립니다. 반면 히트맵은 이 패턴이 눈에 바로 꽂힙니다. 이게 시각화의 본질이라고 생각합니다. 시각화는 정보를 "담는" 게 아니라 "패턴 인식 능력을 빌려오는" 도구입니다. 사람의 시각 피질은 수치 비교보다 색 패턴 인식에 수십 배 빠릅니다.

2.2. [2] 품질 지표 바 — 임계값 대비 위치

재투영, 직교성, 샤프니스를 가로 바로 그리되, 임계선을 함께 그립니다.

재투영 RMS     ▓▓▓▓░░░░░░  0.15 px   [우수 | 보통 | 불량]
직교성 평균    ▓▓░░░░░░░░  0.08°     [우수 | 보통 | 불량]
샤프니스       ▓▓▓▓▓▓▓░░░  47.3      [정상 범위]

운용자가 숫자를 읽지 않아도 "초록 영역에 있는가 빨간 영역에 있는가" 만 보면 됩니다. "임계값이 0.3 이었나 0.5 였나..." 를 기억하지 않아도 되는 거죠. 기억의 짐을 UI 가 대신 져주는 겁니다.

수치에 익숙하지 않은 운용자에게는 이 표현이 훨씬 빠르고, 익숙한 엔지니어에게도 "빠르게 훑어볼 때" 유용합니다. 엔지니어가 상세값이 필요하면 바 옆의 숫자를 읽으면 됩니다.

2.3. [3] 거리 분포 차트 — 이상치와 분산 확인

H / V 코너 간 거리의 히스토그램 또는 박스 플롯입니다.

• 분포가 좁고 가운데 모여 있으면 → 검출 안정
• 꼬리가 길거나 이중 봉우리가 보이면 → 일부 코너 오검출 의심

dStdDistH_px, dStdDistV_px 를 숫자 하나로 보는 것과, 분포 자체를 보는 것은 정보량이 다릅니다. 특히 "평균은 괜찮은데 이상치가 하나 있다" 는 상황은 숫자로는 드러나지 않고 차트에서만 드러납니다. 이상치의 존재는 대부분 특정 코너 하나의 오검출 을 가리키는데, 이게 뒤늦게 발견되면 원인 찾기가 매우 어렵습니다.

2.4. [4] 요약 텍스트 — 확정 수치

최종적으로 정확한 수치가 필요한 값만 압축해서 표시합니다.

Scale H : 0.01234 mm/px
Scale V : 0.01235 mm/px
Isotropy : 0.08%  [OK]
Distortion k1 : 1.2e-8  [Normal]
Center-Edge Dev : 0.12%

스케일 같은 값은 "초록/빨강" 이 아니라 정확한 숫자 로 봐야 하는 경우가 있습니다. 예를 들어 장비 설치 보고서에 "이 장비의 해상도는 0.01234 mm/pixel 이다" 라는 값을 기록해야 할 때, 히트맵 색깔로는 부족합니다. 이런 건 그림보다 텍스트가 맞습니다.

3. 오버레이 레벨 — 점진적으로 정보를 얹기

왼쪽의 Cognex 디스플레이에는 원본 이미지 위에 코너 오버레이를 그립니다. 그런데 오버레이가 너무 많으면 이미지 자체를 가려버립니다. 그래서 단계별로 켤 수 있게 만들었습니다.

enum OverlayLevel {
    OVERLAY_MINIMAL = 0,  // 코너 점 + 스케일 텍스트 (기본)
    OVERLAY_NORMAL  = 1,  // + 코너 인덱스 + 첫 코너 강조 + 등방성
    OVERLAY_DETAIL  = 2,  // + H/V 거리 라인 + 피치 + 잔차/왜곡 벡터
    OVERLAY_HEATMAP = 3   // 로컬 스케일 히트맵 (독립 모드)
};

3.1. 레벨별 설계 의도

MINIMAL — 기본값입니다. 이미지를 최대한 방해하지 않는 최소 정보만 올립니다. 현장 운용자가 "이미지 그대로 보고 싶어" 할 때 이 상태가 기본이어야 합니다.

NORMAL — 디버깅 시작 단계입니다. "첫 코너가 어딘가" 를 표시하는 이유는, 그리드 정렬이 맞는지 가장 먼저 확인할 때 필요하기 때문입니다. 개발 단계에서 m_vGridMap[0][0] 이 의도한 자리에 찍혔는지 확인하는 것이 검증의 출발점이었습니다.

DETAIL — 기하 정밀도 분석 전용입니다. 재투영 잔차 벡터 는 방향성 있는 오차를 드러냅니다. 모든 벡터가 같은 방향을 가리키면 렌즈 비틀림이나 설치 기울어짐을 의심해야 합니다. 색으로 된 대시보드만으로는 "방향성" 정보가 잘 안 드러나는데, 이미지 위에 벡터를 직접 그리면 방향성이 즉시 보입니다.

HEATMAP — 공간 분포 분석 전용 모드입니다. 기존 이미지를 덮어쓰면서 영역별 스케일을 색으로 표시합니다. 다른 레벨과 달리 "독립 모드" 로 분리한 이유는, 이미지와 히트맵을 동시에 겹치면 둘 다 읽기 어려워지기 때문입니다.

기본은 깨끗하게, 필요할 때만 정보를 추가로 얹는 원칙이 핵심입니다. UI 에 정보를 추가하는 것보다 언제 숨길 것인가 를 결정하는 게 더 어렵고 중요합니다.

4. 왜 이 구조가 실제로 효과적인가

4.1. 계층적 정보 전달

 1 초: 히트맵 색깔 / 바 차트 초록-빨강 → OK or NG 판정
 5 초: 바 차트 수치 / 요약 텍스트     → 어느 지표가 문제인가
30 초: 오버레이 DETAIL / PropertyGrid → 왜 그런가

각 단계가 독립적으로 의미가 있고, 깊이 들어갈수록 더 많은 정보를 줍니다. 운용자는 1 초만 쓰고 끝낼 수 있고, 엔지니어는 30 초를 써서 원인까지 파고들 수 있습니다. 두 사용자 집단이 같은 UI 를 각자의 속도로 사용할 수 있는 구조입니다.

4.2. "나쁜 쪽" 으로 눈이 먼저 가도록

이상 상황일수록 눈에 띄는 색과 위치에 배치했습니다. 정상일 때는 대시보드 전체가 차분한 초록/파란 톤이고, 문제가 생기면 빨간색 바가 튀어나오는 방식입니다.

이상이 눈에 먼저 들어오는 디자인 이 현장 운용 도구의 기본기라고 생각합니다. 평상시에 운용자가 대시보드를 무심코 스치듯 보는 상황에서도, 문제가 있으면 "가만히 있던 초록 바에서 갑자기 빨간색이 튀어나온다" 는 변화로 주의를 끌 수 있습니다.

4.3. 숫자와 그림의 역할 분리

• 그림: 판정, 공간 분포, 경향성
• 숫자: 기록, 보고서, 정밀 비교

둘 다 필요하지만, 동시에 같은 공간에 있으면 안 됩니다. 한 공간에 섞여 있으면 둘 다 제대로 못 읽습니다. 대시보드는 그림 중심, PropertyGrid 는 숫자 중심으로 역할을 명확히 나눴습니다.

5. 한 줄 요약

영역	역할	주 대상
히트맵	공간 불균일 즉시 감지	운용자
품질 바	임계값 대비 위치	운용자
거리 차트	분산 / 이상치	엔지니어
요약 텍스트	확정 수치	엔지니어
오버레이 (MIN ~ DETAIL)	이미지 레벨 디버깅	엔지니어
PropertyGrid	전체 수치 아카이브	보고서

운용자가 판정을 내리는 데 필요한 정보와, 엔지니어가 원인을 찾는 데 필요한 정보는 다릅니다. 대시보드는 이 두 요구를 한 화면에서 동시에 만족시켜야 합니다. 이 균형을 잡는 게 가장 어려웠고, 동시에 가장 중요했습니다.

6. 한 줄 교훈

시각화는 정보를 담는 도구가 아니라, 사람의 패턴 인식 능력을 빌려오는 도구다. 그래서 어떤 정보를 숨길 것인가가 어떤 정보를 보여줄 것인가만큼 중요하다.

다음 편은 시리즈 마지막 — 이번 리팩토링 전체 과정에서 배운 것과, 앞으로 추가할 항목에 대한 회고입니다.