MINT PoE 스피커 제어 프로그램을, 방송 담당자의 손에 익은 노브와 페이더로 설계하였습니다.

상황

MINT는 PoE(Power over Ethernet) 방식의 스피커를 PC에서 제어하는 방송 프로그램입니다. 네트워크 선 하나로 전원과 음원을 함께 받는 스피커를 여러 대 연결하고, 재생 목록과 음색, 스피커별 음량을 한 화면에서 다룹니다.

요청은 고객사가 정리한 프로그램 설명서와 함께 전달되었습니다. 설명서에는 메인 컨트롤, 원하는 날짜와 시간에 맞춘 예약 방송 스케줄, 스피커 개별 조절까지 필요한 기능이 모두 담겨 있었습니다. 다만 화면은 기능을 칸마다 나누어 배치한 와이어프레임 수준이었고, 실제 장비를 다루는 사람이 어떻게 조작할지는 아직 정해져 있지 않았습니다.

범위를 쓰임에 맞춘 제안

견적 단계에서는 캘린더 형식의 스케줄 화면 두 장이 포함되어 있었습니다. 요건을 다시 정리하는 과정에서 매일 열어 두고 쓰는 화면은 메인 컨트롤과 스피커 볼륨 두 장이라는 점이 분명해졌고, 이에 따라 범위를 다음과 같이 조정하였습니다.

• 캘린더 화면은 범위에서 제외하였습니다.
• 조작 요소는 TONE, LEVEL, PLAY LIST, SPEAKER 네 가지로 묶었습니다.
• 아이콘은 4개에서 7개로 늘렸습니다.
• 프로그램 실행 아이콘을 새로 더하였습니다.

또한 세부 요건을 화면 설계의 조건으로 옮겨 적었습니다. LEVEL은 마이크 2개, 스피커 1개, 플레이어 1개의 음량을 각각 조절하고 그 변화를 그래프로 보여야 합니다. 재생 목록은 보통 10곡 정도가 보이고, 추가 버튼을 누르면 PC의 파일 탐색 창이 열립니다. 스피커는 8대를 넘어 늘어날 수 있어야 합니다.

발견

이 프로그램 앞에 앉는 사람은 방송실에서 앰프와 믹서를 다뤄 온 담당자입니다. 이들에게는 새로 배워야 하는 아이콘보다 이미 손에 익은 장비의 모양이 더 빠른 설명이 됩니다. 고객사가 함께 보낸 참고 이미지 역시 하드웨어 볼륨 노브였습니다.

이를 바탕으로 화면의 기준을 정하였습니다. 음색은 돌리는 노브, 음량은 밀어 올리는 페이더, 출력 상태는 장비의 레벨 미터처럼 점으로 켜지는 그래프입니다. 켜져 있는 것은 민트색으로 빛나고, 꺼져 있는 것은 회색으로 가라앉습니다.

한 일

받은 설명서의 화면에서 출발하여 두 가지 배치를 시안으로 비교하였습니다.

받은 설명서 | 기능을 칸마다 나눈 메인 컨트롤 화면

시안 A | 재생 목록을 왼쪽 세로 단으로 분리하고, 조작 요소를 오른쪽에 위아래로 배치

시안 B | 재생, 음색, 음량을 위쪽 한 줄에 두고, 늘어나는 스피커를 아래쪽에 열로 배치

최종 화면은 시안 B의 구조를 따랐습니다. 위쪽은 재생 목록, TONE, LEVEL 세 단으로 나누어 왼쪽에서 오른쪽으로 소리가 흐르는 순서를 따르게 하고, 아래쪽은 스피커만을 위한 영역으로 비워 두었습니다. 이를 통해 스피커가 늘어나도 위쪽의 조작 요소는 자리를 바꾸지 않습니다.

• TONE | TREBLE과 BASS를 두 개의 금속 노브로 표현하고, 노브 둘레의 점으로 현재 값을 보여 줍니다.
• LEVEL | PLAYER, MIC 1, MIC 2, SPEAKER를 네 개의 페이더로 나란히 두고, 옆의 점 그래프가 실제 출력을 표시합니다.
• PLAY LIST | 재생 중인 곡을 민트색으로 구분하고, 재생, 일시정지, 이전, 다음, 정지를 목록 바로 아래에 모았습니다.
• SPEAKER | 번호와 스피커 아이콘을 한 토글 안에 넣어, 어느 스피커로 소리가 나가는지 한눈에 확인할 수 있도록 설계하였습니다.

VOLUME 버튼을 누르면 스피커별 조절 화면으로 넘어갑니다. 스피커마다 VOLUME, TREBLE, BASS 노브를 한 칸에 담고, 꺼진 스피커는 노브 전체를 흐리게 처리하여 조작할 수 없는 상태임을 전달합니다.

프로그램 실행 아이콘은 MINT 로고의 M을 스피커 위로 세워, 바탕화면에서도 소리를 내는 장비라는 점이 읽히도록 정리하였습니다.

개발로 넘기는 방식

개발 환경에서는 화면을 BMP 배경과 조각 이미지로 조립해야 했습니다. 이에 따라 디자인 파일을 넘기는 대신, 개발자가 그대로 배치할 수 있는 단위로 결과물을 나누었습니다.

• 배경은 화면별 BMP 파일로 제작하였습니다.
• 버튼, 토글, 노브, 페이더, 그래프 점은 default, pressed, on, off, disable 상태별 PNG로 분리하였습니다.
• 노브 둘레의 그래프는 0부터 21까지 단계별 이미지로 나누어, 값에 따라 해당 이미지만 바꾸면 되도록 하였습니다.
• 화면별로 간격과 크기 가이드, 텍스트 가이드(서체, 크기, 색상값)를 따로 정리하였습니다.

결과물

메인 컨트롤 화면, 스피커 볼륨 화면, 시안 2종, 프로그램 실행 아이콘, 상태별 이미지 리소스(BMP, PNG), 화면별 간격, 크기, 텍스트 가이드.

돌아보며

이 프로젝트에서는 디자인 파일에서 치수와 색상값을 자동으로 읽어 내는 핸드오프 도구를 쓰지 않았습니다. 디자이너가 화면마다 픽셀 가이드를 직접 그리고, 상태별 이미지를 한 장씩 잘라 개발자에게 납품하는 것이 당시의 방식이었습니다.

지금은 디자인 툴이 간격과 크기를 자동으로 알려 줍니다. 그럼에도 이 작업에서 남는 것은 숫자를 받아 적는 일이 아니라, 숫자 앞에서 내려야 했던 결정입니다. 버튼을 눌렀을 때 글자를 얼마나 흐리게 할지, 꺼진 스피커의 노브를 어디까지 가라앉힐지, 노브 둘레의 그래프를 몇 단계로 나눌지는 도구가 대신 정해 주지 않습니다. 픽셀 가이드는 그 결정을 개발자가 다시 추측하지 않도록 문서로 남기는 일이었습니다.

이 경험은 지금의 일하는 방식으로 이어집니다. 결과물은 만든 사람이 곁에 없어도 다음 사람이 같은 기준으로 이어 갈 수 있을 때 완성됩니다. 브랜드북과 홈페이지의 운영 구조를 결과물과 함께 넘기는 이유도 여기에 있습니다.