목록 화면에 초록·주황·빨강 표시가 줄마다 붙어 있습니다. 처음 보는 사람은 빨강이 급한 것인지 끝난 것인지 알 수 없어 옆자리에 묻습니다. 몇 주 지나면 익숙해지지만 새 직원이 오면 같은 질문이 다시 시작됩니다. 업무 프로그램을 받아 쓰는 자리에서 한 번쯤 떠올릴 수 있는 장면입니다.
이런 표시는 시연 자리에서 걸러지기 어렵습니다. 만든 쪽이 초록은 정상이고 빨강은 막힘이라고 설명해 주면 그 자리에서는 다 이해가 되기 때문입니다. 문제는 설명해 준 사람이 곁에 없을 때, 그리고 색을 구분하기 어려운 사람이 그 화면을 쓸 때 드러납니다.
이 글은 「직원이 매일 쓰는 업무 화면」 연재의 두 번째 편입니다. 지난 편에서는 쓰던 내용이 사라지지 않는지 시연 때 확인하는 법을 다뤘습니다. 이번에는 통신 서비스 회사의 구매·자산 관리 시스템과 영업 관리 시스템을 만들며 상태 표시에 적용한 원칙을 적고 시연이나 검수 자리에서 상태 표시를 확인하는 방법을 정리했습니다.
상태 표시는 색·모양·문구 세 가지 신호로 보냅니다
저희 화면 정의의 공통 규칙에 적힌 원칙은 하나입니다. 목록의 작은 상태 꼬리표와 경고 띠는 색·모양·문구 세 가지 신호로 보내고 어느 한 가지도 떼지 않는다는 것입니다.
모양은 뜻에 따라 정했습니다. 막힘은 네모(■), 경고는 세모(▲), 완료는 동그라미(●)입니다. 색을 구분하기 어려운 사람도 모양과 문구로 알 수 있게 한 것인데, 디자인 규칙에도 그 사람들을 위한 배려라고 이유를 함께 적어 두었습니다. 이유를 적어 두면 나중에 모양을 빼자는 제안이 나와도 왜 넣었는지 돌아볼 수 있습니다.
세 신호를 한 묶음으로 보는 이유는 하나가 약해져도 나머지가 뜻을 지탱하기 때문입니다. 셋이 같이 있으면 색이 흐리게 보이는 사람에게도, 색이 흐리게 찍히는 자리에서도 모양과 글자가 남습니다.
색을 정리할 때의 경고도 디자인 규칙에 남겨 두었습니다. 상태 표시의 색을 다른 비슷한 색 이름으로 정리하면 색이 조금 바뀝니다. 색은 세 신호 중 하나라서 색이 조용히 바뀌는 것은 신호가 약해지는 것입니다. 바꿔야 한다면 글자와 배경의 밝기 차이를 먼저 재고 바꾸기로 했습니다. 비슷한 색으로 바꾸는 일은 작은 손질처럼 보여서 이런 규칙이 없으면 아무도 재지 않고 넘어가기 쉽습니다.
지운 줄과 그래프도 같은 원칙입니다
상태 꼬리표만 그런 것이 아닙니다. 지운 줄, 그러니까 되살릴 수 있게 남겨 둔 줄도 색만으로 알리지 않습니다. 흐리게 하고 취소선을 긋고 [복원] 버튼과 설명을 함께 답니다. 흐린 색 하나만 믿으면 지워진 줄과 아직 처리하지 않은 줄이 비슷해 보일 수 있습니다. 취소선과 [복원] 버튼이 붙어 있으면 그 줄이 무엇인지, 무엇을 할 수 있는지가 한 줄 안에서 보입니다.
그래프도 색에만 기대지 않도록 선 모양을 다르게 하고 값 표를 함께 보여 줍니다. 선 두 개가 색만 다르면 흑백으로 인쇄했을 때 같은 선이 됩니다. 선 모양이 다르고 옆에 값 표가 있으면 색이 없어도 읽힙니다.
누르면 뜻이 뜨게 했습니다
세 신호가 갖춰져도 「완료」가 무엇을 완료했다는 뜻인지는 글자만으로 다 담기지 않습니다. 2026년 9월 18일, 상태값은 누르면 설명이 뜨게 하자는 대표 지시가 있었고 상태 표시를 누르면 작은 설명 창이 뜨도록 붙였습니다. 구매·자산 관리 시스템에서는 아홉 가지 상태 종류(과금·요청·처리 구분·청약 상태·조치 요청·자산·서비스·장비 생애·구성)에, 영업 관리 시스템에서는 네 가지(결재·경영지원 확정·청약 상태·문의 처리 상태)에 붙였습니다.
여기서 하나를 더 배웠습니다. 같은 글자도 무엇의 상태인지에 따라 뜻이 다릅니다. 과금 상태의 「해지」와 청약 상태의 「해지」는 다른 뜻입니다. 그래서 설명은 글자 하나로 찾지 않고 "무엇의 상태인가 + 값" 짝으로 찾게 했습니다. 「해지」라는 글자 하나에 설명 하나만 붙이면 두 자리 중 한쪽에는 맞지 않는 설명이 붙습니다.
실제 화면에서도 확인했습니다. 배정 요청 목록에서 「완료」를 누르자 "요청 상태 — 완료 / 요청한 수량만큼 배정을 끝냈습니다"가 떴습니다. 바깥을 누르거나, 나가기 키를 누르거나, 화면을 위아래로 움직이면 닫혔습니다. 같은 줄을 두 번 눌러 상세를 여는 동작과도 섞이지 않았습니다. 설명 창은 떠야 할 때 뜨는 것만큼 닫혀야 할 때 닫히는 것이 중요합니다. 닫히지 않는 설명 창은 봐야 할 것을 가리는 창이 됩니다.
저희 홈페이지 관리 화면도 같은 원칙으로 만들었습니다
이 원칙은 고객사 시스템에만 쓴 것이 아닙니다. 이노자일 홈페이지의 글 관리 화면도 상태 표식을 색이 아니라 도형으로 먼저 구분합니다. ○는 초안·대기, ●는 발행·완료, ◐는 확인 필요, ✕는 오류이고, 문구를 함께 답니다. 강조색인 파랑은 버튼과 진행 표시에만 쓰고 상태 표식에는 쓰지 않습니다. 파랑이 누를 수 있는 것을 뜻하는 화면에서 상태에도 파랑을 쓰면, 누를 수 있는 것과 아닌 것이 섞여 보입니다.
작은 관리 화면 하나에도 같은 규칙을 쓰는 이유는 단순합니다. 규칙은 쓰는 곳이 많을수록 몸에 배고 예외를 두기 시작하면 어디까지가 예외인지 매번 정해야 합니다.
시연 때 상태 표시를 확인하는 방법
시연이나 검수 자리에서 볼 것은 세 가지입니다. 색을 빼고 봐도 구분되는가, 눌러서 뜻을 알 수 있는가, 같은 말이 다른 뜻으로 쓰이지 않는가. 이것을 눌러 볼 행동으로 풀면 아래 표가 됩니다. 긴 시간이 들지 않습니다.
| 눌러 볼 행동 | 정상이면 |
|---|---|
| 화면을 흑백으로 바꾸거나 흑백으로 인쇄해 상태 표시를 본다 | 색이 없어도 모양과 글자로 서로 구분된다 |
| 상태 표시를 누른다 | 무엇의 상태인지와 값, 그 뜻이 함께 뜬다 |
| 설명 창이 뜬 채로 바깥을 누르거나 나가기 키를 누른다 | 닫힌다 · 같은 줄의 다른 동작(상세 열기 등)과 섞이지 않는다 |
| 같은 글자의 상태를 다른 화면에서 찾아 누른다 | 어느 것의 상태인지가 설명에 적혀 있고, 뜻이 다르면 다르게 적혀 있다 |
| 지운 줄을 하나 만들어 본다 | 흐려지기만 하지 않고 취소선과 되살리는 버튼, 설명이 같이 붙는다 |
| 그래프가 있으면 흑백으로 본다 | 선 모양으로 구분되고 값 표가 옆에 있다 |
하나 더, 만든 쪽에 물어볼 질문이 있습니다. 상태 표시의 색을 바꿀 때 글자와 배경의 밝기 차이를 재는 규칙이 있는지입니다. 규칙이 있으면 색은 세 신호 중 하나로 다뤄지고 있는 것이고 없으면 다음 정리 때 색이 조용히 바뀔 수 있습니다.
이 표도 지난 편처럼 프로그램을 만든 쪽에 미리 건네도 좋습니다. 다음 편에서는 막힌 버튼에 이유를 다는 이야기를 다룹니다.