2025-05-11
2 min read
들어가며
두 번째 피그마 플러그인 Retro Color Converter를 출시했습니다. 현재 피그마 커뮤니티에서 심사 중이며, 실무 경험에서 찾은 실질적인 문제를 해결하기 위해 개발한 플러그인입니다.
플러그인 기능
Retro Color Converter는 선택한 오브젝트를 제한된 색상의 PNG 이미지로 변환해주는 플러그인입니다. 특히 레트로 스타일의 디자인이나 하드웨어 제약이 있는 프로젝트에 유용합니다.
지원하는 색상 깊이
| Bit Depth | 총 색상 수 | 그레이 레벨 |
|---|---|---|
| 6-bit | 64가지 | 4단계 |
| 9-bit | 512가지 | 8단계 |
| 12-bit | 4096가지 | 16단계 |
개발 배경
현실적인 제약 상황
새 프로젝트에서 디자인 요구사항을 확인하던 중, "입력은 16비트이지만 출력은 RGB444(12비트)"라는 제약사항을 받았습니다. 이는 이미지 처리 과정에서는 16비트를 사용하지만, 최종 화면에 표시되는 결과물은 12비트 색상으로 제한된다는 의미였습니다. UX/GUI 저작도구들은 최신의 단말을 지원하는데 포커스가 맞춰져 있습니다. 이에, 저성능 MCU(Microcontroller Unit) 환경에서의 UX/GUI 설계에 직면한 어려움을 해결하고자 플러그인을 만들었습니다.
인지 부하와 작업 효율
피그마에서는 12비트로 작업물을 열람하거나, export하는 방법을 제공하고 있지 않습니다. 12비트로 열람하려면 포토샵을 사용해 이미지를 12비트로 변환해야 합니다. 이러한 방식은 작업 흐름에 심각한 중단을 가져왔습니다.
- 컨텍스트 스위칭의 비용: 인간은 서로 다른 작업 환경 간 전환에 상당한 인지적 부하를 경험합니다
- 주의력 분산: 작업 도구 변경은 집중력 저하와 실수 확률 증가로 이어집니다
- 반복 작업의 누적 피로: 매번 포토샵을 거쳐야 하는 과정은 생산성을 크게 저해합니다
이러한 문제를 해결하기 위해 "같은 도구 내에서의 원활한 워크플로우"를 목표로 플러그인을 개발했습니다.
사용자 경험 설계
단순함
초기 버전은 디더링 옵션 하나만 제공하는 극도로 단순한 형태였습니다. 이는 "핵심 기능에 집중"하라는 UX 원칙을 잘 보여주는 예시로 지금도 단순한 버전이 제 개인 도구로는 좋다고 생각합니다.
대중성
12비트 디더링이라는 한가지 기능은 너무나 제한적인 조건으로 퍼블리싱 후 혼자 사용할 것 같았습니다. 픽셀아트에 사용할 수 있게 도구의 기능을 확장 시켰습니다. 3가지 색상 깊이를 정의할 수 있고 디더링 옵션의 단계 또한 3단계로 나눴습니다. 이러한 확장된 기능성은 복잡도를 증가시켜 초기의 단순한 경쟁력을 잃게 만들었습니다. 추후, 드롭다운 또는 패널 Show/Hide와 같은 점진적 기능 공개로 확장성과 기능을 조정하려고 합니다.
마치며
이 플러그인으로 사용자가 사고 과정을 방해 받지 않고 자연스럽게 업무를 확장해 가는데 도움 되었으면 합니다. 디자인 도구의 진정한 가치는 기술적 구현보다는 "사용자의 시간과 인지적 자원을 아껴주는 것"에 있다고 생각합니다.
