칼라 매칭 프로그램을 처음 만들었을 때 목표는 분명했다. 서로 다른 컬러 체계의 번호를 입력하면, 내가 사용하는 기준 컬러 가운데 가까운 후보를 빠르게 찾는 것.
처음에는 한 대의 컴퓨터에서 실행하는 프로그램으로 시작했다. 기능은 잘 작동했지만 사용 범위가 넓어질수록 설치와 업데이트가 새로운 일이 됐다.
“이 기능을 별도 설치 없이 브라우저에서 바로 사용할 수는 없을까?”
그 질문에서 온라인 칼라 매칭 웹프로그램 작업이 시작됐다.
실행 파일 대신 웹페이지를 열다
설치형 프로그램은 사용할 컴퓨터마다 파일을 준비해야 한다. 기능이나 컬러 데이터가 바뀌면 새 버전도 다시 전달해야 하고, 사람마다 서로 다른 버전을 사용하게 될 가능성도 있다.
웹 방식으로 옮기면 사용자는 주소에 접속해 페이지를 여는 것만으로 같은 기능을 사용할 수 있다. 프로그램과 데이터는 한곳에서 관리하고, 수정 사항도 다음 접속부터 동일하게 반영된다.
단순히 기존 화면을 웹으로 복사하지는 않았다. 처음 접하는 사람도 설명 없이 사용할 수 있도록 브랜드 선택, 번호 입력, 결과 확인의 순서를 한 화면 안에서 다시 구성했다.
서로 다른 컬러 번호를 하나의 흐름으로
브랜드마다 컬러 번호를 표기하는 방식은 다르다. 숫자 뒤에 영문이 붙기도 하고, 중간에 하이픈이 들어가거나 별도의 접두어를 사용하기도 한다.
사용자가 형식을 정확히 외워 입력하게 하면 검색보다 번호 정리에 더 신경을 쓰게 된다. 그래서 띄어쓰기, 하이픈, 영문 대소문자처럼 결과에 영향을 주지 않는 차이는 프로그램이 자동으로 정리하도록 했다.
먼저 비교할 컬러 체계를 선택하고 번호를 입력하면, 프로그램이 해당 색의 디지털 값을 찾아 내부 기준 컬러 전체와 비교한다. 입력 형식이 잘못됐거나 데이터에 없는 번호라면 애매한 결과를 보여주는 대신 어떤 부분을 확인해야 하는지 안내한다.
눈에 더 가까운 차이를 계산하다
RGB 숫자의 차이만 단순하게 비교하면 계산 결과와 사람이 눈으로 느끼는 색 차이가 어긋날 수 있다. 같은 숫자 차이라도 밝기와 채도, 색상 영역에 따라 체감되는 정도가 다르기 때문이다.
온라인 버전에서는 RGB 값을 Lab 색공간으로 변환한 뒤 CIEDE2000 색차를 계산한다. 밝기, 채도와 색상 차이를 함께 반영해 두 색이 화면 기준으로 얼마나 가까운지 비교하는 방식이다.
검색이 끝나면 가장 가까운 후보 몇 가지를 순서대로 보여준다. 결과 화면에서는 다음 내용을 함께 확인할 수 있다.
- 검색한 컬러와 화면 색상
- 가까운 기준 컬러 후보와 순위
- 각 후보의 컬러 번호와 디지털 색상값
- 색차 수치와 화면 근사 정도
- 필요한 번호를 바로 가져갈 수 있는 복사 기능
결과를 한 가지 색으로 단정하지 않고 여러 후보로 보여주는 것도 의도한 설계다. 프로그램은 찾아볼 범위를 줄이고, 마지막 선택은 사람이 직접 비교할 수 있도록 여지를 남겼다.
실시간 외부 검색 대신 정리된 데이터를 사용하다
웹프로그램이라고 해서 검색할 때마다 외부 사이트에 접속하는 방식은 아니다. 필요한 디지털 컬러 자료를 미리 정리해 별도의 로컬 카탈로그로 만들고, 검색할 때는 이 자료만 불러와 계산하도록 구성했다.
이 방식은 외부 사이트의 응답 속도나 일시적인 장애에 덜 영향을 받는다. 외부 화면 구성이 달라져도 검색 기능은 같은 기준을 유지할 수 있고, 어떤 데이터로 계산했는지도 관리하기 쉽다.
페이지가 데이터를 불러올 때는 형식과 필수 항목이 정상인지 먼저 검사한다. 자료가 빠졌거나 잘못된 경우에는 계산을 멈추고 오류를 안내해, 불완전한 데이터로 그럴듯한 결과가 나오는 일을 막았다.
온라인이지만 공개 범위는 제한하다
브라우저에서 작동한다고 해서 모든 사람에게 공개해야 하는 것은 아니다. 이 도구는 정해진 사용자만 접근할 수 있는 환경 안에 두고, 로그인하지 않은 상태에서는 기능과 데이터에 접근할 수 없도록 구성했다.
검색에 필요한 자료도 화면에 무작정 노출하거나 외부로 요청하지 않고, 허용된 페이지 안에서 필요한 범위만 불러오게 했다. 사용 편의성을 높이면서도 공개할 필요가 없는 정보는 최대한 드러나지 않게 하는 것이 중요한 기준이었다.
화면에서 가까워도 실물은 다를 수 있다
계산 방식이 정교해져도 모니터에 보이는 색이 실물과 같아지는 것은 아니다. 화면 설정, 조명, 소재, 광택과 작업 조건에 따라 실제 색은 다르게 보일 수 있다. 디지털 색상값이 가깝다는 사실도 동일한 결과를 보장하지 않는다.
그래서 결과 화면에는 실물 샘플을 같은 조건에서 직접 비교하고, 필요하면 사전 테스트로 최종 보정해야 한다는 안내를 분명하게 표시했다.
프로그램은 정답을 대신 결정하는 장치가 아니라 확인할 후보를 빠르게 좁혀주는 도구다.
온라인으로 옮긴 뒤에도 이 원칙만큼은 그대로 남겼다.
혼자 쓰는 프로그램에서 함께 쓰는 도구로
이번 작업에서 가장 크게 달라진 것은 계산 공식보다 사용 환경이었다. 한 대의 컴퓨터에서 실행하던 기능을 브라우저로 옮기면서 설치 과정은 사라졌고, 프로그램과 데이터도 한곳에서 관리할 수 있게 됐다.
예전에는 코드가 실행되면 프로그램이 완성됐다고 생각했다. 하지만 실제로 반복해서 사용하는 도구는 접근 방법, 입력 실수 처리, 결과의 읽기 쉬움과 정보 보호까지 함께 갖춰야 했다.
칼라 번호를 입력하고 후보를 확인하는 작은 기능이지만, 필요한 순간에 바로 열어 같은 기준으로 사용할 수 있다는 점에서 의미가 있다. 나만 쓰던 프로그램을 웹으로 옮긴 이번 작업은 프로그램의 완성이 기능 구현에서 끝나는 것이 아니라 사용할 사람의 흐름 속에 자연스럽게 들어가는 순간이라는 것을 다시 보여줬다.