AI가 '실행됨'과 '검증됨'을 섞지 못하게 만드는 상태 UI

AI에게 작업을 맡기면 "완료했습니다"라는 말이 참 쉽게 돌아와요. 그런데 그 말 안에는 두 가지가 섞여 있어요. 명령이 끝까지 돌았다는 사실과, 결과가 맞다는 판단이에요. 1인 개발에서는 이 둘을 확인해 줄 동료가 없어서, 화면에서부터 갈라 두는 쪽이 안전하더라고요.

배지 하나를 둘로 쪼갠 이유

처음엔 작업 카드에 '완료' 배지 하나만 뒀어요. 직접 만들어 보니 문제는 금방 드러났어요. 에이전트가 테스트를 돌렸다는 로그만 보고 제가 배지를 눌러 버리면, 나중에 그 테스트가 빈 껍데기였다는 걸 아무도 모르거든요. 그래서 상태를 둘로 나눴어요.

type RunRecord = {
  ran: boolean; // 명령이 끝까지 돌았는가
  verified: null | {
    by: 'human' | 'test';
    evidence: string; // 스크린샷·로그 링크 1개 필수
  };
};

ran은 실행 로그가 있으면 자동으로 켜져요. verified는 증거 링크 1개가 들어오기 전까지 버튼 자체가 비활성이에요. 사람이 눌러도 안 되게 막아 둔 거예요.

조합 4가지, 그중 하나는 거부

불리언 2개를 조합하면 경우가 4가지 나와요. 둘 다 참이면 완료, 실행만 참이면 확인 대기, 둘 다 거짓이면 대기. 남은 하나가 핵심인데, 실행은 안 됐는데 검증됐다고 들어오는 값이에요. 이건 모순이라서 저장 단계에서 거부하고 '알 수 없음' 레인으로 보내 로그를 남겨요. 테스트해 보면 이 네 번째 케이스가 실제로 들어와요. 에이전트가 실행 로그 쓰기를 건너뛰고 결과만 보고하는 경우가 있거든요.

컴포넌트는 파일 3개로 끝났어요. 타입 선언, 배지 컴포넌트, 그리고 조합 4가지를 하나씩 확인하는 테스트. 적용해 봤더니 처음 작성에 10분 정도 걸렸고, 그 뒤로는 손댈 일이 거의 없었어요.

화면에서 신경 쓴 것

색으로만 구분하지 않았어요. '실행됨'과 '검증됨' 글자를 그대로 쓰고, 배지 두 개를 항상 같은 순서로 나란히 둬요. 하나만 켜진 상태가 한눈에 보여야 하니까요. 검증 배지가 비활성일 때는 aria-disabled와 함께 "증거 링크가 필요해요"라는 툴팁을 붙였어요. 키보드로 넘어가도 왜 안 눌리는지 알 수 있게요.

라이프케어로그에서 플랜 시리즈를 혼자 만들다 보면 AI가 낸 결과를 하루에도 여러 번 받아요. 플랜비의 회비 화면처럼 숫자 하나가 틀리면 바로 티가 나는 곳일수록, 실행됐다는 기록과 확인했다는 기록을 따로 남기는 습관이 사고를 줄여 줬어요. 돌려 보니 바뀐 건 배지 하나가 둘이 된 것뿐인데, 작업 기록을 다시 볼 때 믿을 수 있는 정도가 달라졌어요.