모든 웹 사이트 및 시스템에는 다른 프로그램도 중요하지만 고객의 시선을 잡아주는 시각이 매우 중요합니다.
이러한 역할을 하는 것이 디자인 시스템입니다.
디자인 시스템은 재사용이 가능한 디자인 요소와 규칙의 모음으로 디지털 제품의 효율성을 향상 시키는 중요한 역할을 합니다.
오늘은 디자인 시스템이란?
구축 기술 및 폰트, 컬러 등을 설명해 드리겠습니다.
디자인 시스템이란?
현재 대부분은 디지털 제품 및 다양한 웹 사이트에 사용되는 디자인 시스템은 디자인 경험을 일정하게 유지를 시켜주고 개발 효율성을 높여주는 필수적인 역할을 합니다.
또한 디자인 원칙, 도구, 문서, 프로세스 및 UI 요소 컬렉션 등 다양한 시스템이 함축하고 있는 포괄적인 시스템입니다.
무엇보다 중요한 점은 “재사용 가능성”입니다.
개발자가 자주 사용하는 디자인 요소들(버튼, 레이아웃, 타이포그래피, 색상) 등을 코드화하여, 개발자와 디자이너들이 쉽게 찾을 수 있도록 하였습니다.
주요 구성 요소
- UI 요소 : 버튼, 색상, 타이포그래피, 레이아웃, 폼 요소, 아이콘, 이미지 등
- 디자인 원칙 : 제품 디자인을 위한 가이드라인 및 원칙, 기준(일관성, 접근성, 사용성 등)
- 프로세스 : 디자인 프로세스, 버전 관리, 협업 방식 등
- 문서 : 디자인 시스템의 구성 요소 및 사용 방법, 최상의 관행 설명
- 도구 : 디자인 시스템 구축 및 관리에 필요한 도구
디자인 시스템 도입 및 운영의 장점과 과제
장점
- 경험 일관성 : 모든 제품에 일관된 디자인 경험을 제공하여 브랜드 인지도를 향상하고 고객들의 혼란을 다운시킵니다. 예를 들어 모든 시스템에 일관된 색상 및 글꼴, 버튼 스타일을 사용하여 고객들에게 편리하고 친숙한 환경을 만들어 줍니다.
- 개발 효율성 : 과거 디자인 시스템이 도입되기 전에는 개발자 및 디자이너들은 디자인 요소를 계속 만들어 냈습니다. 하지만 도입 후 이러한 디자인 요소들을 재사용이 가능하게 되어 개발 시간 단축 및 유지 보수 비용 절감 등 효율성이 크게 향상되었습니다.
- 협업 개선 : 디자인 시스템은 UI 요소 컬렉션 및 디자인 원칙, 문서, 프로세스 등 다양한 기능이 함축되어 있는 포괄적 시스템으로 디자이너, 개발자, 제품 관리자 간의 의사소통을 원활하게 하고 협업을 개선시킵니다. 이로 인하여 협업자들은 디자인 방식에 대한 공통된 목표를 추구하고, 서로의 작업을 쉽게 이해하게 됩니다.
- 디자인 품질 향상 : 디자인 시스템은 팀 전체에 동일한 가이드라인을 제공하여 모든 협업자들이 동일한 작업을 수행하게 하고, 동일한 품질이 나오도록 합니다.
- 규모 확장 가능성 : 코드화 시스템 방식으로 새로운 제품을 개발할 때 보다 빠르고 쉽게 만들 수 있도록 합니다.
과제
- 투자 비용 : 디자인 시스템 구축 및 운영에 는 전문 인력 및 도구, 프로세스 등이 필요하기 때문에 상당한 초기 투자 비용이 필요합니다.
- 지속적인 유지 보수 : 모든 시스템은 계속 개발을 하고 있기 때문에 디자인 트렌드가 바뀔 때마다 업데이트를 통해 최신의 유지를 해야 합니다. 이때마다 지속적인 관리 노력과 비용이 들어갑니다.
- 문화 변화 : 현재 조직 문화와 과거 조직 문화는 많은 변화가 있고, 앞으로도 계속 바뀔 것입니다. 이러한 조직 문화 변화에 따른 디자인 시스템 가치 인식 및 적응 시간이 필요합니다.
디자인 시스템 구축 기술
준비 단계
- 목표 설정 : 시스템 도입 목표를 명확하게 정의
- 범위 설정 : 시스템에 포함될 내용과 제외할 내용 결정
- 협업 체계 구축 및 관련자들의 참여 유도
- 기존 조사 : 기존 가이드라인, 디자인 요소, 프로세스 조사 및 분석
정의 단계
- 디자인 원칙 : 제품 디자인을 위한 가이드라인과 원칙 정의
- UI요소 : 재사용 가능한 디자인요소(버튼, 색상, 타이포그래피, 레이아웃 등)를 정의
- 코드 : 디자인 요소 코드화
- 문서 : 시스템의 구성 요소, 사용 방법, 최상의 관행 등 문서 작성
구축 단계
- 도구 선택 : 시스템 구축 및 관리에 필요한 도구 선택
- 프로토타입 제작 : 시스템 초기 버전 제작
- 피드백 수집 : 이해관계자들로부터 피드백 수집 및 분석 등을 통해 시스템 개선
- 테스트 : 작동 여부 테스트
운영 단계
- 배포 : 조직 내 모든 사용자들에게 배포
- 유지 보수 : 시스템 최신 상태로 유지
- 문화 변화 : 조직 내 모든 구성원들에게 시스템 가치 인식 및 문화 변화 촉진
- 측정 및 개선 : 시스템 사용 측정 및 개선점 도출
시스템 구축에 활용되는 기술
디자인 시스템 구축에는 다양한 기술이 활용이 됩니다. 그중 대표가 되는 기술을 설명해 드리겠습니다.
- 프런트엔드 기술 : HTML, CSS, JavaScript 등
- 디자인 도구 : Sketch, Figma, Adobe XD 등
- 문서화 도구 : Confluence, Notion 등
- 디자인 시스템 플랫폼 : Storybook, InVision DSM 등
시스템 구축을 위한 도구 및 플랫폼
대표적인 도구 및 플랫폼에 대해 설명해 드리겠습니다.
- Storybook : 오픈 소스 디자인 시스템 플랫폼으로 UI 컴포넌트 개발 및 테스트를 통한 문서화에 사용
- InVision DSM : 클라우드 기반 디자인 시스템 플랫폼으로 디자인 시스템 구축 및 관리에 사용
- Zeroheight : 디자인 시스템 코드를 자동으로 생성하고 관리하는 플랫폼
- Figma, sketch : 백터 그래픽 편집기로, 디자인 시스템 구축에 활용
디자인 시스템 폰트 및 컬러
디자인 시스템은 재사용 가능한 디자인 요소 및 규칙의 모음으로 디자인 제품의 개발 효율성 향상에 매우 중요한 역할을 합니다. 그중 폰트와 컬러는 디자인 핵심 요소로 제품의 브랜드 이미지 및 접근성, 사용성에 큰 영향을 미칩니다.
대표적인 폰트
- Roboto : 구글에서 개발한 오픈 소스 폰트로, 가독성이 높고 다양한 글자를 제공
- Noto Sans : 구글에서 개발한 오픈 소스 폰트로, 다양한 언어 지원
- Monrserrat : 구글에서 개발한 오픈 소스 폰트로, 현대적이고 세련된 스타일 제공
- Open Sans : Adobe에서 개발한 오픈 소스 폰트로, Roboto와 유사한 스타일 제공
- Times New Roman : Serif 폰트로 가장 오래된 역사를 가지고 있고, 공식적인 문서 및 서적에 많이 사용
- Gamramond : Serif 폰트로 우아하고 클래식 스타일
- Georgia : Serif 폰트로 가독성이 높고 편안한 스타일
- EB Garmond : Serif 폰트로 Adobe에서 개발한 폰트로 Garamond 폰트를 기반으로 현대적 디자인 요소를 추가하여 만들어진 폰트
대표적인 컬러
- 흰색(중정색) : 배경, 텍스트 색상에 많이 사용
- 검은색(중정색) : 텍스트, 테두리 색상에 많이 사용
- 회색(중정색) : 배경, 테두리, 텍스트 색상에 많이 사용
- 블루(기본색) : 브랜드, 링크에 많이 사용
- 빨강(기본색) : 경고, 오류에 많이 사용
- 녹색(기본색) : 성공, 확인에 많이 사용
- 노란색(기본색) : 주의, 경고에 많이 사용
- 주황색(보조색) : 활기차고 에너지 넘치는 색상
- 보라색(보조색) : 고급스럽고 우아한 색상
- 핑크색(보조색) : 여성스럽고 로맨틱한 색상
- 갈색(보조색) : 자연스럽고 평안한 색상
폰트와 컬러 선택 시 주의 사항
- 브랜드 이미지 : 브랜드 이미지를 나타낼 때 가장 중요한 역할을 하는 것이 폰트와 컬러입니다. 그렇기 때문에 브랜드 이미지에 맞는 폰트와 컬러를 선택을 해야 합니다.
- 접근성 : 특이한 폰트도 좋지만 모든 고객이 쉽게 읽을 수 있는 것이 가장 중요하며, 시각 장애인을 위한 서비스도 중요합니다.
- 사용성 : 고객에게 보다 명확하고 쉽게 정보를 전달을 하기 위해서는 컬러가 중요합니다. 그렇기 때문에 컬러를 적절한 상황에 맞게 사용을 하여 고객들의 눈을 피로시키지 않도록 해야 합니다.
- 최신 트렌드 : 현재 사회는 급속도로 변화를 하고 최신 트렌드가 계속 나오고 있기 때문에 이를 반영해야 합니다.
폰트와 컬러 관리 방법
- 핵심 폰트 및 컬러 선정 : 브랜드 이미지에 고려하여 너무 많은 폰트 사용 자제, 일반적으로 5~10개 정도의 폰트와 컬러 사용 할 것.
- 폰트 스타일 및 크기 정의 : 핵심 폰트에 맞는 스타일과 크기 정의
- 컬러 시스템 구축 : 브랜드 이미지에 맞는 핵심 컬러를 기반으로 색상 테마 및 명암, 색상 조합 정의
- CSS 변수 활용 : 폰트와 컬러 값을 CSS 변수로 정의하여 코드로 관리
- CSS 프리프로세서 활용 : Sass, Less를 활용하여 코드를 간결하고 유지 관리하게 쉽게 유지
- 디자인 가이드라인 작성 : 폰트와 컬러 가이드라인을 문서화. (핵심 폰트 및 컬러 목록, 사용 방법, 금지 사항 포함)
- 버전 관리 시스템 활용 : Git를 활용하여 폰트와 컬러 시스템, CSS 코드, 디자인 가이드라인 버전 관리
- 디자인 시스템 플랫폼 활용 : Storybook, InVision DSM 플랫폼을 활용하여 디자인 시스템 요소를 효과적으로 관리하고 공유
- 폰트 관리 도구 활용 : 구글 폰트 및 Adobe Typekit 등 관리 도구를 활용하여 웹 사이트에 쉽게 적용하고 관리
- 고객 피드백 수집 : 고객으로부터 폰트와 컬러에 대한 피드백 수집 후 개선 반영
- 최신 트렌드 반영 : 지속적인 트렌드 파악 후 업데이트
- 협업 및 의사소통 : 디자인, 개발, 제품 관리 담당자들과의 협업을 통해 지속적으로 관리하고 개선 반영
마치며
디자인 시스템은 디지털 제품의 미래를 결정하는 필수적인 요소입니다. 물론 디자인 시스템에서 해결해야 하는 과제도 존재합니다.
하지만 이러한 과제는 신중한 계획 및 노력을 통해 충분히 극복할 수 있습니다. 디자인 시스템은 이제 단순한 도구가 아니라 조직의 디자인 문화를 변화시키고 디자인 제품 경험의 미래를 만들어 가는 중요한 전략적 자산입니다.
만약 디자인 시스템 도입을 고려하고 있다면, 충분한 준비와 노력을 기울여 성공적인 구축 및 운영 전략을 수립해야 합니다. 또한 끊임없는 개선과 발전을 통해 디자인 시스템의 가치를 극대화하고 조직의 성장을 촉진해야 합니다.
감사합니다.