마이크로소프트 디자이너 (새 탭에서 열림)
Microsoft 디자이너 Jackie Chui는 사내 아이콘 4,000개를 한곳에서 검색·분류·복사할 수 있는 브라우저 기반 라이브러리를 3주 만에 만들었다. 디자이너용 태그와 엔지니어용 클래스명, 아이콘을 붙여 넣어 메타데이터를 찾는 역검색 기능을 제공해 도구 간 단절을 해결했다. 이 사례는 기존 제품을 그대로 사용하는 대신 실제 사용자의 요구를 조사하고, 익숙한 기술과 단계적인 학습으로 맞춤형 도구를 만들 수 있음을 보여준다. ## 문제 발견과 기존 도구의 한계 - Jackie는 Microsoft 디자이너들의 작업 과정을 관찰하고 아이콘 관리에서 겪는 불편을 조사했다. - 기존 제품 중에서는 IconJar가 아이콘 정리와 복사·붙여넣기를 지원했지만 Microsoft의 요구에는 부족했다. - 여러 사용자가 아이콘 태그를 추가하고 공유할 수 없었다. - 브라우저 기반이 아니어서 아이콘을 클라우드에서 공동으로 사용할 수 없었다. - Mac 전용이라 Windows 중심 조직에 적합하지 않았다. - 이에 따라 특정 운영체제나 디자인 도구에 종속되지 않는 자체 도구를 만들기로 했다. ## 브라우저 기반 아이콘 라이브러리 설계 - 초기 UI는 Sketch로 설계하고 IconJar에서 아이디어를 얻되, Microsoft Fabric 디자인 언어에 맞게 스타일을 조정했다. - 브라우저에서 작동하도록 만들어 사용자가 선호하는 디자인 도구와 관계없이 접근할 수 있게 했다. - 아이콘마다 다음 정보를 연결했다. - 디자이너가 찾기 쉬운 태그와 분류명 - 엔지니어가 코드에서 사용하는 클래스명 - 실제 복사·붙여넣기에 필요한 유니코드 아이콘 문자 - 아이콘을 검색해 바로 복사할 수 있게 해, 디자이너가 자주 쓰는 아이콘 문자를 별도 파일에 보관하던 방식을 없앴다. - 아이콘을 라이브러리에 붙여 넣으면 관련 메타데이터를 역으로 찾을 수 있는 기능도 제공했다. ## 익숙한 기술로 빠르게 개발 - Jackie는 포트폴리오 제작을 통해 익힌 HTML, CSS, JavaScript 경험을 기반으로 개발을 시작했다. - 프런트엔드와 백엔드 데이터베이스를 함께 구축하기 쉬운 JavaScript 프레임워크 Meteor.js를 선택했다. - Meteor 튜토리얼의 할 일 목록 데이터베이스 예제를 아이콘 데이터베이스로 확장했다. - 새로운 기술을 완전히 습득한 뒤 시작하기보다, 해결해야 할 실제 문제를 중심으로 필요한 내용을 학습하며 개발했다. - 기획과 디자인 경험에 엔지니어링 지식을 결합해 짧은 기간 안에 작동하는 제품을 완성했다. ## 아이콘 데이터 수집과 변환 - 아이콘은 일반적으로 폰트 파일에 저장되며, 키보드로 직접 입력할 수 없는 전용 유니코드 문자를 복사해 사용한다. - Jackie는 회사의 아이콘 폰트 파일을 다운로드하고 각 아이콘의 실제 유니코드 문자를 추출했다. - Microsoft 문서에서 엔지니어가 사용하는 아이콘 이름과 클래스명 목록을 확보했다. - 아이콘 이름 목록을 Excel로 정리한 뒤 JSON으로 변환해 애플리케이션 데이터로 사용했다. - 이렇게 아이콘 문자, 표시 이름, 클래스명, 태그를 하나의 검색 가능한 시스템으로 통합했다. ## 배포와 사용자 피드백 - 약 3주간의 개인 작업 끝에 첫 버전을 완성하고 Microsoft Azure에 호스팅했다. - 처음에는 팀에 간단한 이메일과 링크만 공유했지만, 사용자들의 입소문을 통해 디자인 스튜디오 전체로 확산됐다. - 동료들은 버그를 제보하고 새 기능을 제안하며 제품 개선에 참여했다. - 도구는 빠르게 여러 디자이너의 일상적인 작업 흐름에 포함됐다. - 이후 V2에서는 버그 수정과 기능 보강을 진행하고 다른 Microsoft 팀으로 확장할 계획이었다. ## Figma 컴포넌트로의 확장 - 향후 4,000개 이상의 아이콘을 한 번에 Figma 컴포넌트로 변환하는 기능을 계획했다. - 사용자는 별도 라이브러리를 거치지 않고 Figma 안에서 아이콘을 검색하고 정리할 수 있게 된다. - 장기적으로는 아이콘 폰트 파일을 업로드하면 누구나 Figma 컴포넌트로 변환할 수 있는 도구로 발전시키려 했다. - 기존 도구를 대체하는 다음 버전을 만드는 것이 목표라는 점에서, 제품은 사용자의 작업 흐름에 맞춰 계속 진화한다. 실용적으로는 먼저 사용자의 반복적인 불편을 관찰하고, 기존 도구의 부족한 점을 명확히 정의하는 것이 중요하다. 이후 모든 기능을 완성하려 하기보다 검색·분류·복사처럼 핵심 작업만 지원하는 최소 버전을 빠르게 배포하고, 실제 사용자 피드백을 바탕으로 확장하는 접근이 효과적이다.