객체지향 디자인 시스템 만들기

컴포넌트 라이브러리는 버튼, 카드, 배지가 어떻게 생겼는지 알려 준다. 그 안에 든 것이 무엇인지는 알려 주지 않는다.

운용 콘솔에서는 이 빈자리가 곧 문제다. 운용자는 화면의 숫자마다 같은 질문을 한다. 센서가 잰 값인가, AI가 짐작한 값인가? 이미 실행 중인가, 제안일 뿐인가? 혼자 실행해도 되나, 다른 사람이 서명해야 하나? 카드 컴포넌트에는 답이 없다. 그래서 화면마다 답하는 방식이 달라지고, 운용자는 그걸 하나하나 익혀야 한다.

그래서 다른 데서 시작했다. 컴포넌트를 만들기 전에 운용자가 다루는 객체를 적고, 모든 객체가 밝혀야 하는 속성 몇 가지를 정했다.

객체가 먼저다. 비행체, 경보, 권고, 결정, 해상 접촉물, 수색 구조 건. 객체마다 ID와 상태가 있고, 한 객체가 여러 곳에 나타난다.

화면은 이 객체들을 비춘 것이다. 같은 비행체가 지도에서는 표지, 목록에서는 행, 인스펙터에서는 한 페이지, 이벤트 타임라인에서는 항목, 문장 안에서는 칩이 된다. 어디서나 지키는 규칙은 두 가지다.

당연해 보이지만 일부러 규칙으로 정했다. 목록과 지도가 서로 다른 말을 하고 운용자가 머릿속에서 맞추는 화면은 의도하지 않아도 쉽게 만들어진다.

모든 컴포넌트는 값 다섯 개의 함수다.

render(object, projection, epistemic, attention, authority)

Epistemic 축에는 알려진 결함이 있다. 질문 두 개에 한꺼번에 답한다. 정보가 어디서 왔는가(관측, 파생, 추론)와 행동이 어디까지 진행됐는가(제안, 승인, 실행)다. 한 항목이 AI가 추론한 것이면서 운용자가 승인한 것일 수 있고, 전송됐지만 실행은 확인되지 않았을 수도 있다. 값 하나로는 둘을 함께 말할 수 없다. 다음 버전에서는 출처(source)와 단계(stage)로 나눈다.

생김새는 이 값에서 나온다. 누구도 "빨간 걸로", "점선 테두리로"를 손으로 고르지 않는다. 두 컴포넌트가 같은 인식 단계를 보여 주면 보여 주는 방식도 같다. 단계가 입력이기 때문이다.

호버나 포커스 같은 상호작용 상태도 그대로 있다. 바탕일 뿐 핵심은 아니다.

다섯 축 가운데 인식 단계가 가장 중요했다. KAIROS의 AI는 틀릴 수 있고, 운용자는 센서가 본 것과 AI가 결론 낸 것을 한눈에 구분해야 한다.

규칙

중간에 규칙 하나를 바꿨다. 처음에는 추론 블록에 사선 빗금을 넣었다. 눈에 띄었지만 잡음으로 읽혔다. 지금은 단계를 글자로 쓰고("inferred", "not executed", "AUTHORIZED") 색은 그걸 거들기만 한다. 스크린 리더도, 보라와 파랑을 구분하기 어려운 사람도 같은 정보를 받는다.

주의는 예산이다. 화면에서 인터럽트는 최대 하나, 주의 요청은 최대 셋이다. 한꺼번에 일이 터지면 빨간 배너를 하나 더 띄우지 않고 묶는다.

무엇을 위급으로 볼지는 잡는 데 시간이 걸렸다. 첫 버전은 마감이 있으면 전부 올렸고, 한 시나리오의 모의 한 시간 동안 위급 인터럽트가 27번 나왔다. 지금 규칙은 더 좁다. 위급은 마감이 있고 기본값이 해로운 것, 즉 아무것도 안 하면 상황이 나빠지는 것이다. 같은 한 시간에 세 번 나온다.

실행 권한은 결과의 무게에 따라 나뉜다.

승인 버튼은 운용자가 결과를 미리 본 다음에만 나온다. 동의를 기다릴 시간이 없으면 운용자 혼자 실행할 수 있고, 그 결정은 사후 검토 대상으로 표시된다. 미리보기부터 결과까지 모든 단계는 상태 변화와 같은 동작 안에서 감사 기록을 하나씩 남긴다. 기록을 건너뛰는 경로는 없다.

토큰도 같은 생각을 따른다. DTCG 형식이고 세 층으로 나뉜다.

이름은 색이 어떻게 생겼는지가 아니라 무엇을 뜻하는지 말한다. purple-dashed 같은 토큰은 없고 inferred 토큰만 있다.

규칙은 믿지 않고 빌드에서 검사한다. 글자 대비는 4.5:1 이상이어야 하고, 경고와 위급은 서로 다른 색이어야 한다(주황과 빨강. 위급에는 카운트다운과 배너 위치도 붙는다). 스타일시트에 날 rgb() 그림자나 px 반경이 있으면 빌드가 실패한다. 같은 원본에서 QML 테마도 만들어서, 문법이 웹에 묶이지 않는다.

문법은 감탄하기는 쉽고 쓰기는 어렵다. 그래서 human factors 관점에서 두 번 비평을 받았다. 두 번째 비평에서 문제 26개가 나왔다. 대부분은 정직함에 관한 것이었다. 콘솔이 알 수 있는 것보다 더 많이 약속하거나, 상황과 상관없는 이유로 한쪽 선택을 더 쉽게 만들어 둔 곳들이었다.

가장 큰 재설계는 그다음에 왔고, 새 기능이 아니라 위계에 관한 것이었다. 위급 경보 하나가 다섯 곳에 나오고 카운트다운은 세 번 보였다. 인스펙터는 높이가 1,658 px였고 결정은 맨 아래에 있었다.

바뀐 것

결정 탭은 이제 626 px이고 1440×900 화면에서 스크롤 없이 다 보인다.

이 화면으로 사람이 더 잘 결정하는지는 검사가 알려 주지 못한다. 다음은 사용자 테스트다. 참가자 12명, 조건 여섯 개, 그중 절반은 AI가 틀린 경우다. 탐색 단계의 테스트다. 사람이 콘솔을 어디서 잘못 읽는지는 찾을 수 있지만 안전하다는 걸 입증하지는 못한다. AI가 틀렸을 때 놓친 오류뿐 아니라, AI가 맞았는데 괜히 거절한 경우도 함께 센다.