AI와 함께 족저압 히트맵을 그린 이야기

corgi93corgi93Frontend

키오스크에서 측정이 끝나면, 발바닥 각 지점의 압력값이 JSON 으로 올라와요.

리포트 웹의 일은 이 숫자들을 한눈에 읽히는 그림으로 바꾸는 거예요.

이번 글은 그 히트맵을 만들면서 AI 를 어떻게 썼는지에 대한 이야기예요.

코드보다 문제 정의가 먼저

바로 코드부터 짜지 않았어요. AI 에게 문제를 정리해서 던지는 것부터 시작했어요.

  • 입력: 센서 그리드의 셀별 압력값 배열
  • 출력: 발바닥 위 색 그라디언트 (낮으면 파랑, 높으면 빨강)
  • 제약: 측정마다 값의 범위가 다르고, 그리드가 성기다

데이터 모양을 이렇게 고정해서 AI 와 함께 봤어요.

interface FootPressureFrame {
  rows: number;
  cols: number;
  cells: number[]; // rows * cols 길이, 셀별 압력값
  maxPressure: number;
}

AI 가 초안을, 사람이 방향을

문제를 정리해 주니 AI 는 몇 초 만에 Canvas 렌더링 초안을 내놨어요. 정규화, 색 매핑, 그리드 보간까지 한 번에요.

그대로 쓰진 않았어요. 도메인을 아는 사람이 봐야 할 게 남아 있었거든요.

사람이 잡아낸 것들

AI 초안을 검수하면서 우리가 바로잡은 지점이에요.

색 기준을 앱과 통일

AI 는 보기 좋은 그라디언트를 알아서 골랐어요.

하지만 같은 발을 키오스크 앱과 웹에서 다른 색으로 보여주면 사용자가 헷갈려요. 그래서 색 기준을 앱과 똑같이 고정했어요.

// 저압(파랑) → 중압(초록) → 고압(빨강). 앱과 동일한 기준.
function pressureToColor(t: number): string {
  const v = Math.min(1, Math.max(0, t)); // 0~1 clamp
  if (v < 0.5) return lerp([41, 121, 255], [0, 230, 118], v * 2);
  return lerp([0, 230, 118], [255, 59, 48], (v - 0.5) * 2);
}

측정마다 다른 범위를 정규화

AI 초안은 압력값을 고정 최대치로 나눴어요.

그런데 측정마다 최대값이 달라서, 그대로 두면 히트맵 밝기가 널뛰어요. maxPressure 기준으로 0~1 로 정규화하도록 바꿨어요.

보간은 브라우저에 맡기기

AI 가 준 선택지가 여럿이었어요. 그중 가장 단순한 걸 골랐어요.

셀을 원본 해상도로 찍은 뒤 확대하면서, 브라우저의 이미지 스무딩에 보간을 맡기는 방법이에요.

function drawHeatmap(canvas: HTMLCanvasElement, frame: FootPressureFrame) {
  // 1) 그리드 해상도 오프스크린에 셀을 1:1 로 찍고
  // 2) 본 캔버스에 확대해 그리면 스무딩이 보간을 대신한다
  const ctx = canvas.getContext('2d')!;
  ctx.imageSmoothingEnabled = true;
  ctx.imageSmoothingQuality = 'high';
  ctx.drawImage(offscreen, 0, 0, canvas.width, canvas.height);
}

직접 짠 보간 코드를 전부 지울 수 있었어요.

AI 로 일한다는 것

이 히트맵은 AI 가 대부분을 빠르게 만들고, 사람이 도메인 지식으로 검수해 완성했어요.

  • AI 가 잘한 것: Canvas 뼈대, 정규화 로직, 타입, 여러 구현 선택지
  • 사람이 해야 했던 것: “이게 우리 제품에 맞나” 판단 (색 기준, 측정 특성, 사용자 혼란)

AI 가 빠르게 만들고 사람이 꼼꼼히 검수하는, 저희가 일하는 방식 그대로예요.

다음엔 이 히트맵 위에 압력중심(COP) 궤적을 얹은 이야기를 해볼게요.

댓글