새롭게, 그리고 다시 구축하는 디자인 시스템
여러 기업의 디자인팀에서 회사의 방향성과 미션들이 담긴 디자인 작업물들을 문서화하고 정리하여 다양한 방식으로 기록하고 있습니다. 서비스의 일관된 환경을 유지하고 관리하기 위해서는 기획팀과 디자인팀, 개발팀 등 서비스 구현에 포함된 모든 팀원이 기억하고 지켜야 할 통일된 디자인 시스템 가이드가 반드시 필요하기 때문입니다. 저도 많은 디자인 시스템 가이드 자료들을 리서치하고 저희 서비스에 맞는 형태로 재구성하기 위해 적절히 비교 분석하고 변형하여 마침내 저희 플랫폼만의 디자인 시스템 가이드를 구축하였습니다.
* 이 글은 디자인 시스템 가이드를 구축하면서 겪었던 문제점과 해결방식을 기록하고 해당 경험을 토대로 추후 더 나은 방향으로 나아가기 위해 쓰였습니다.
프로젝트의 시작
2022년도 하반기부터 기획되었던 회사와 플랫폼 성장 방향성의 변화에 따른 전반적인 사이트 리뉴얼을 2023년도 6월 오픈을 목표로 시작하게 되었습니다. 이에 따라 기존 플랫폼 UIUX의 문제점을 먼저 파악해보았습니다.
1. 규칙성없는 디자인
iOS와 AOS의 차이는 물론이고, 하나의 OS만 확인해도 동일한 스타일과 컴포넌트로 구성할 수 있는 화면이 명확한 규칙이 없어 상황에 따라 다르게 사용되고 있는 모습을 발견할 수 있었습니다. 폰트 사이즈, 화면 스페이싱 등 사용되는 요소들의 기준이 모호하여 운영 중인 화면들을 그때그때 비교해보며 기준을 확립하다 보니 간단한 페이지를 추가로 작업할 때도 많은 작업 시간이 소요되었습니다.
2. 같은 의미지만 스타일이 다른 리소스의 혼용
사용되고 있는 리소스 또한 같은 의미를 전달하는 아이콘임에도 다른 스타일을 여러 개 사용하고 있는 것을 확인했습니다. 새로운 서비스나 기능이 추가될 때마다 사용되는 리소스의 양은 점점 방대해졌고 디자이너와 개발자조차 사용되고 있는 리소스가 무엇이고 새롭게 필요한 리소스가 무엇인지 판단하기 어려웠습니다. 이에 따라 당연하게도 사용자도 같은 혼란을 겪고 있었습니다.
3. 다르지만 같은 의미로 쓰이는 컬러값
사이트 내에서 사용되는 명확한 컬러시트가 정해져 있지 않아 화면마다 동일한 무게와 쓰임으로 사용되어야 할 한가지의 컬러가 조금씩 다른 여러 색상으로 쪼개져 사용되고 있었습니다. 사이트의 주기적인 리뉴얼과 업데이트 상황 속에서 미처 반영하지 못하고 남겨진 예전 화면들이 문제였습니다. 따라서 화면 간의 통일감은 부족해졌고 사이트의 퀄리티는 낮아졌습니다.
4. 네이밍 규칙 없이 관리되는 리소스
디자인 작업 파일과 개발 코드상의 리소스 네이밍이 다르게 사용되고 있었습니다. 공통된 표기법을 사용하고 있지 않아 내부 리소스 관리와 개발팀과의 커뮤니케이션에 어려움이 있었습니다. 심지어는 수정된 리소스가 기존 네이밍 뒤쪽으로 숫자가 매겨져 기존 리소스와 함께 추가로 등록되어 있기도 했습니다. 이렇다 보니 같은 아이콘이더라도 어떤 화면에서 사용되고 있는지 화면마다 수기로 확인해야 하는 비효율적인 방식으로 업무를 진행할 수밖에 없었습니다.
디자인 시스템 가이드 1.0의 탄생
현재 사이트 디자인의 문제점을 토대로 개선하고 싶은 방향성과 목표를 확정하였습니다.
첫째로, 관리되지 않고 있던 디자인 리소스를 정리하고, 플랫폼 내 디자인 규칙을 정하여 비효율적으로 낭비되던 작업 시간을 줄이고자 합니다.
둘째로, 통일된 스타일과 톤앤매너을 사용하여 일관성 있는 서비스 환경을 구축하고 사이트의 비주얼 퀄리티를 향상하고자 합니다.
셋째로, 서비스 내에서 사용되고 있는 서비스 특징과 컨셉, 방향성이 드러나는 고유의 리소스들을 오랫동안 유지할 수 있도록 관리하고 더 나은 방향으로 개선하고자 합니다.
넷째로, 서비스 전반의 디자인 컴포넌트 정리와 기능 정의를 통해 플랫폼과 연관된 모든 유관부서와의 커뮤니케이션을 원활하게 하여 기존보다 더 활발히 소통하고자 합니다.
현재의 문제점들을 종합하고 개선할 수 있는 방향과 목표 확립을 통해 디자인 시스템 가이드 1.0 버전이 탄생하게 되었습니다.
디자인 시스템 가이드 1.0
마우스오버 액션을 통한 컴포넌트 수치 확인디자인 시스템 가이드 2.0 구축의 필요성
서비스 1차 리뉴얼 프로젝트를 진행하면서 예상했던 것보다 훨씬 큰 범위의 디테일하고 확실한 정보를 담은 가이드가 새로 필요하다는 것을 깨달았습니다. 기존에 제작했던 디자인 시스템 가이드 1.0 버전으로는 포용할 수 없는 크고 작은 문제점들이 발생했기 때문입니다.
1. 관련 컴포넌트를 찾기 어려운 구조
디자인 시스템 가이드 1.0의 일부분혼자 가이드를 제작할 때는 몰랐지만, 협업을 진행하며 많은 인원이 다 함께 가이드를 사용하게 되면서 현재 가이드는 찾고자 하는 스타일을 찾기 어렵다는 것을 깨달았습니다. 1.0 버전의 경우, 서비스에 대한 이해도가 높은 오래된 팀원들만이 사용하기 편한 구조였고 새로 입사한 신입사원이나 가이드를 한 번도 접하지 않았던 사람들은 가이드 사용에 불편함을 느끼고 있었습니다.
2. 가이드에 포함되어 있지 않은 요소의 발견
기존 가이드가 없는 상태에서 화면마다의 스타일을 하나하나 확인해가며 서비스 전체의 스타일을 정의하다 보니 놓치거나 빼놓은 컴포넌트들이 종종 발견되었습니다. 가이드의 기본적인 틀과 필요한 요소들을 사전에 명확히 정의하지 않고 현재 스타일을 기반으로 제작을 먼저 시작하다 보니 사용은 되고 있었지만, 가이드로 정의되지 못한 요소들이 등장하게 된 것입니다.
3. 컴포넌트의 용도 파악이 어려움
디자인 시스템 가이드 1.0의 Tab 내용 일부분하나의 큰 범위에서 분리된 컴포넌트들은 사용하는 기능이나 의미는 비슷할지라도 분류 기준에 따라 사용되는 상황이나 쓰임새가 다를 수 있습니다. 하지만 현재 가이드는 분류에 따른 명칭만 정의되어 있고 컴포넌트가 어떤 상황, 어떤 환경에 사용되는지에 대한 설명이 전혀 드러나 있지 않았습니다. 이런 부분들은 크진 않지만 순조로운 업무 진행에 종종 영향을 미치고 있었습니다.
4. 전부 고려하지 못한 사용 환경
현재 사용하지 않기에 정의하지 않았던 컴포넌트의 여러 상태 값이 가이드에 명시되어 있지 않아 불편함이 지속되고 있었습니다. 서비스가 지속해서 발전하면서 사용하지 않던 컴포넌트의 다른 상태 값을 사용하는 경우가 자주 생겼고, 그때마다 관련 작업자들은 가이드가 있음에도 불구하고 매번 정의되지 않은 값에 대한 문의를 요청하고 있었습니다.
5. 애매한 분류 기준
각각의 컴포넌트들은 기능이나 용도에 따른 분류가 아닌 시각적인 구조와 계층에 대한 분류로만 관리되고 있었습니다. 이렇다 보니 분류된 각 컴포넌트의 기준이 모호하여 실제 서비스 운영에 적용하여 사용하기 어려웠습니다. 가이드를 사용하고 있기는 하나, 사실상 기존에 가이드가 없던 상황과 다를 바 없이 업무가 진행되고 있었던 것입니다.
디자인 시스템 가이드 2.0의 목표 및 개선사항
새로 발견된 문제들을 해결하기 위한 디자인 시스템 가이드 업데이트를 위해 새로운 방향성과 목표를 다시 정했습니다. 기존에 처음 디자인 시스템 가이드를 제작할 때와는 달리, 이번 2.0 버전은 가이드를 사용하는 대상의 사용성에 더욱 초점을 맞추려고 노력했습니다. 사이트의 일관성 유지와 리소스 관리보다는 가이드를 사용하는 대상이 보다 편리하고 효율적인 업무를 진행할 수 있도록 돕는 것을 가장 큰 목표로 잡았습니다.
첫째로, 파운데이션과 컴포넌트, 컨텍스트들을 명확히 구분하고, 모든 요소는 가장 작은 단위로 나누어 분류하며 누구나 찾기 쉽도록 제작해야 합니다.
둘째로, 추후 사용성을 대비하여 자주 사용되지 않거나 중요도가 낮은 요소들까지도 전부 분류하여 가이드로 제작해야 합니다.
셋째로, 디자이너가 아닌 팀원도 용도와 기능을 정확히 이해할 수 있도록 설명을 덧붙여야 합니다.
넷째로, 애매한 표현을 사용하지 않으며 적용했을 때 발생할 수 있는 모든 상황을 고려하여 가이드에 담아야 합니다.
다섯째로, 사이트 내에 지속적으로 추가될 다양한 서비스들을 위해 훨씬 더 넓은 범위로 포괄적인 가이드를 제작해야 합니다.
디자인 시스템 가이드 2.0 구축
첫째로, 파운데이션과 컴포넌트, 컨텍스트들을 명확히 구분하고, 모든 요소는 가장 작은 단위로 나누어 분류하며 누구나 찾기 쉽도록 제작해야 합니다.
디자인 시스템 가이드 2.0의 일부분컴포넌트로만 구성되었던 1.0버전과는 달리 2.0버전은 파운데이션, 컴포넌트, 컨텍스트로 요소들을 구분하고 XD 파일의 링크 공유가 아닌 노션을 사용하여 기존보다 편리하게 가이드를 접할 수 있도록 구성하였습니다. 더불어 노션의 갤러리 모드를 사용하여 목록에서부터 원하는 컴포넌트를 쉽게 찾을 수 있도록 제작하였습니다.
둘째로, 추후 사용성을 대비하여 자주 사용되지 않거나 중요도가 낮은 요소들까지도 전부 분류하여 가이드로 제작해야 합니다.
디자인 시스템 가이드 2.0의 Toggle Switch 내용 일부분토글스위치 컴포넌트의 경우, 저희 사이트 내에서 앱 알림을 위한 기능 외에는 사용되지 않는 요소이지만 앞으로의 서비스 성장과 확장 가능성을 위해 하나의 컴포넌트 요소로 분류하고 정리하여 관리하고 있습니다.
디자인 시스템 가이드 2.0 Toggle Switch 보러가기 >
셋째로, 디자이너가 아닌 팀원도 용도와 기능을 정확히 이해할 수 있도록 설명을 덧붙여야 합니다.
디자인 시스템 가이드 2.0의 Fields 내용 일부분디자인 컴포넌트에 대한 이해도가 낮은 팀원과의 커뮤니케이션 또한 문제가 없도록 하고, 프로젝트 진행 시 관련 컴포넌트에 대한 명확한 의사소통으로 빠른 대응을 위해 디자인 시스템 가이드에 정리된 모든 요소는 해당 요소에 대한 기본적인 설명을 시작 부분에 포함하고 있습니다.
넷째로, 애매한 표현을 사용하지 않으며 적용했을 때 발생할 수 있는 모든 상황을 고려하여 가이드에 담아야 합니다.
디자인 시스템 가이드 2.0의 Tabs 내용 일부분
디자인 시스템 가이드 2.0의 Chips 내용 일부분컴포넌트마다 발생할 수 있는 모든 경우의 수를 확인하고 상황마다의 컴포넌트가 취해야 할 형태에 대해 전부 명시해주고 있습니다. 고려하지 못한 내용에 대한 기능 정의로 인해 업무 진행 프로세스에 문제가 발생하지 않도록 꼼꼼히 확인하고 현재까지의 컴포넌트가 가질 수 있는 모든 상황을 고려하고 있습니다.
다섯째로, 사이트 내에 지속적으로 추가될 다양한 서비스들을 위해 훨씬 더 넓은 범위로 포괄적인 가이드를 제작해야 합니다.
디자인 시스템 가이드 2.0의 Labels 내용 일부분
디자인 시스템 가이드 2.0의 일부분가이드에 추가할 수 있는 스타일에 대한 기준 정의를 명시하고 상황에 따라 언제든 새로운 컴포넌트 추가가 가능하도록 구성했습니다. 플랫폼에 새로운 기능이나 서비스들이 추가될 때 이미 정리된 가이드의 구조를 해치지 않고 문제없이 새로운 내용과 컴포넌트를 추가할 수 있도록 고정적인 형태보다는 유동적인 형태로 가이드를 제작하기 위해 노력하고 있습니다.
마지막으로, 디자인과 개발에서 통용되는 규칙적인 네이밍을 정하고 공통된 리소스를 보편적으로 관리해야 합니다.
디자인 시스템 가이드 2.0의 Icon 내용 일부분개발팀과 상의 끝에 기본적으로 스네이크 표기법을 사용하며, 상황에 따라 케밥 표기법을 혼합하여 사용하기로 결정하였습니다. 사용되는 네이밍은 약자를 사용하여 표기하고 정해진 규칙에 반드시 맞춰 관리하도록 하고 있습니다.
2.0, 그 이후의 방향성
완성된 디자인 시스템 가이드 2.0의 전체 모습디자인 시스템 가이드가 없던 상태에서 1.0버전, 그리고 다시 완전히 새로운 형태의 2.0버전까지 제작하면서 여러 가지 시행착오와 어려움도 있었고 좌절도 겪었습니다. 하지만 혼자만의 만족을 위한 작업이 아닌 모두의 효율적인 업무 프로세스를 위한 일이었다는 점을 되짚어 보면 개발과의 주기적인 커뮤니케이션과 꼼꼼한 피드백을 소중히 느낄 수 있는 시간이 되었던 것 같아 기쁘고 뿌듯합니다. 실제로 다수의 인원이 사용하게 될 가이드를 제작하는 일은 처음이라 두렵기도 했지만, 결과적으로 균형 잡힌 결과물이 나온 것 같아 만족스럽습니다.
현재의 2.0버전은 별다른 문제 없이 사내에서 다방면으로 사용되고 있으나, 개인적으로는 아직 아쉬움이 남습니다. 체계적인 기반을 다지지 못하고 시작했던 1.0버전으로 인해 현재 버전에는 업데이트되었지만 실제로 서비스에 반영되지 않은 부분들이 남아있기 때문입니다. 현재 틈틈이 반영 중이기는 하나, 배포 일정 이슈로 잦은 처리가 어려운 상황이라 더욱 안타깝기도 합니다.
그럼에도 가장 큰 아쉬움은 디자이너로서 현재 서비스의 브랜드 정체성에 대한 고민이 아직 남아있다는 것입니다. 플랫폼의 브랜드 컨셉이나 방향성이 확정되지 않아 리뉴얼된 디자인조차도 몇 가지의 스타일이 혼재되어 있습니다. 전반적인 서비스의 일관성과 사용성은 기존에 비해 많이 향상되었지만, 디테일 수정사항들이 많이 남아있습니다. 확실한 브랜드 아이덴티티를 구축하여 유저들에게도 직간접적으로 브랜드의 주체성을 전달하고 브랜드 구성원들의 소속감과 자부심 또한 향상되기를 원합니다.
디자인 시스템 가이드의 추후 버전은 서비스를 유지하고 성장시키는 투입 인력들 뿐 아니라 전 직원이 활용할 수 있는 문서로 지속해서 업데이트할 예정입니다. 앞으로의 브랜드 정체성과 아이덴티티를 명확히 확립한다면 해당 내용을 서비스의 UIUX 컨셉과 목표 지향점에 접목하는 것이 디자인 시스템 가이드가 2.0 이후 나아가야 할 최종적인 목표일 것입니다.
