디자인시스템 구축 실습(디자인 스타일 가이드)

디자인 시스템의 구조는 각 기업의 제품이나 서비스에 따라 알맞게 구성하면 되므로 별도의 정해진 형식은 없습니다. 따라서 다양한 디자인 시스템 구축 사례들을 참고하여 핵심이 되는 요소들을 작성하면 됩니다.


1. 파운데이션(Foundation)

디자인 시스템의 가장 기본이 되는 기초 항목에 대한 내용을 정리한 페이지를 말합니다.

 - 환경 요소 : 그리드, 간격, 엘리베이션(Elevation)

 - 기초 요소 : 컬러 시스템, 타이포그래피, 아이콘, 형태

 - 기타 요소 : 상태 



2. 그리드 시스템 페이지 구성하기

그리드(Grid)는 작업 화면에서 콘텐츠를 배치할 때 사용하는 기준선을 말합니다. 디바이스 크기에 맞게 그리드 시스템을 미리 구성해 두면 콘텐츠를 제작할 때 이미지와 텍스트의 배치와 정렬을 쉽게 할 수 있습니다. 그리드 시스템은 각 프레임 크기별 그리드와 함께 브레이크 포인트와 레이아웃을 포함하기도 합니다.

* 브레이크 포인트는 반응형 또는 적응형 디자인에서 브라우저의 크기가 모바일, 태블릿, 데스크톱 등고 같이 특정 넓이가 되었을 때 디자인이 변경되는 지점을 말합니다. 모바일, 태블릿, 데스크톱 3개의 브레이크 포인트만 있기도 하고 모바일과 태블릿의 가로세로 간격 등을 고려하여 더 많은 브레이크 포인트를 지정하기도 합니다.


3. 디자인 토큰의 활용

디자인 토큰을 활용하여 컴포넌트의 간격(Spacing)과 높이(Elevation)값을 설정합니다. 간격은 '8dp' 디자인을 고려한 '8dp grid'를 기본으로 제작합니다. 또한 머티리얼(Material) 디자인 가이드의 타이포그래피를 대비하여 '4dp grid' 간격도 함께 설정합니다. 리소트툴을 클릭하여 창에서 [Plugins]를 선택한 후 'Tokens Studio For Figma'를 선택하여 실행합니다.


4. 엘리베이션(Elevation) 만들고 스타일 등록하기

엘리베이션은 Z축의 고도를 나타내는 것을 말하며 그림자 크기로 요소 간의 높이를 다르게 설정할 수 있습니다.


5. 컬러 시스템 구성

컬러 시스템을 제작하는 방법은 다양합니다. 대표적으로 'Material 2 Design Kit' 또는 'Material 3 Design Kit'을 참고하여 컬러 시스템을 구축할 수 있습니다.

이 외에도 빌더를 사용하여 구현할 수 있다. 피그마 커뮤니티에서 'Material Theme Builder'를 검색하여 실행하면, 빌더를 통해[Custom]옵션으로 컬러 시스템의 색상을 손쉽게 제작하고 변경 할 수 있습니다.

(1) 컬러 베리에이션 색상 만들기

색상의 베리에이션 단계를 나타내는 '100~900'의 수치를 만들어 봅니다. 먼저 리소스 툴을 클릭하고 [Plugins]를 선택한 뒤 'Tail'을 검색합니다. [Tailwind Color Generator] 찾아 선택해 [Run]버튼을 클릭하여 실행합니다.


(2) 컬러 시스템을 토큰으로 설정하기

  - Tokens Studio for Figma의 플러그인으로  다크/라이트 토큰으로 만들수 있으나 페이지에서의 자동전환 실행은 유료 입니다.

  - 피그마의 다크/라이트 모드 기능은 Variable에서 모드를 추가해야 하는데 추가 모드는 유료 버전에서 가능합니다.

  - 피그마 커뮤니티에 접속하여 템플릿, 플러그인과 다양한 소스를 작업 중인 피그마 파일로 불러와 활용할 수 있습니다. 피그마의 홈 화면 [Templates and tools]를 클릭하고 원하는 키워드를 입력하여 결과를 선택한 뒤 [Open in Figma]를 클릭합니다.


6. 타이포그래피(Typography) 시스템

타이포그래피는 제품이나 서비스의 성격에 맞는 폰트 패밀리를 구성하고 간 단계를 만들어 사용합니다. 폰트별 크기 및 간격 : https://typescale.com/

폰트를 로컬 스타일로 등록하거나 베리어블에 등록하여 관리하면 유지 보수가 상당히 효율적일 것입니다.


7. 아이콘 템플릿 구성

아이콘을 용도별로 분류하고 컴포넌트로 등록합니다. 아이콘을 직접 만들어서 사용하는 것이 쉬운 일이 아닙니다. 따라서 일관성 있는 아이콘 템플릿을 구성하여 사용하는 것을 추천합니다.

아이콘 템플릿 구축[Material Design Icons] 플러그인을 사용하여 효율적으로 적용합니다.


8. 형태(Shape)의 구성

형태는 버튼, 배너, 뱃지 등과 같은 컴포넌트 모양의 기준을 정하는 것입니다. 가장자리의 둥근 정도를 지정해 크기별로 형태를 구성하는 것이 좋습니다. 형태는 모서리의 각도나 곡선의 정도로 변주를 줄 수 있고, 육각형이나 특정 도형에 의해 파여진 형태 등 다양한 모양으로 표시될 수 있습니다. 형태는 구성 요소를 식별하고 브랜드를 표현하거나 주의를 집중시키는 역할을 합니다.


디자인 시스템은 한번에 모두 구축하고 끝나는 것이 아닙니다. 변경 사항이 있다면 수시로 업데이트 하고 필요한 부분을 추가하거나 제거하면서 사용해야 합니다.


이 블로그의 인기 게시물

Figma의 주요 장점과 다른 UI 디자인 툴과의 비교 분석

이미지
요즘 디자이너들 사용해야 하는 툴들이 다양화 되고 있습니다. 모든 툴들을 다 배워야 하는지 고민이 많을 것 같아 정리를 해서 도움을 주고자 글을 작성 하였습니다. 주요 UI 툴 비교 분석 항목 Figma Sketch Adobe XD Framer InVision Studio 협업 기능 🟢 실시간 협업 탁월 🔴 없음 (클라우드 전용 툴 필요) 🟡 제한적 실시간 공유 🟢 공유 기반 우수 🔴 단독 사용 중심 플랫폼 지원 🟢 All OS (웹 기반) 🔴 Mac 전용 🟢 Mac/Win 🟡 Mac 위주 🔴 Mac 전용 프로토타이핑 🟢 기본 제공 + 인터랙션 🟡 제한적 🟢 훌륭함 🟢 코드 기반 🟡 제한적 디자인 시스템 🟢 매우 강력 🟢 강력 🟡 중간 🟢 강력 🔴 부족 커뮤니티 / 리소스 🟢 세계 최대 커뮤니티 🟢 큼 🟡 보통 🟡 보통 🔴 작음 가격 🟢 무료/유료 플랜 🟡 유료 🟢 무료/유료 🟢 무료/유료 🟢 무료 ...
자세한 내용 보기

지마켓 디자인 시스템(GDS: Gmarket Design System) 분석 및 평가

이미지
1. 지마켓 디자인 시스템 개요 지마켓은 이베이코리아의 대표적인 이커머스 플랫폼으로, 수많은 사용자와 판매자를 연결하는 복잡한 서비스 구조를 가지고 있습니다. 이러한 대규모 서비스를 일관되게 유지하면서도 효율적으로 발전시키기 위해 지마켓은 체계적인 디자인 시스템(GDS: Gmarket Design System)을 구축하여 운영하고 있습니다. 지마켓의 디자인 시스템은 2021년에 공식 출시되었으며, 브랜드 정체성, 사용성, 일관성을 고려한 가이드라인을 제공하고 있습니다. 최근 2025년에는 AI 기술과의 통합을 통해 디자인 시스템 2.0으로 발전하며 더욱 혁신적인 변화를 이루고 있습니다. 2. 디자인 원칙 및 철학 지마켓 디자인 시스템(GDS)은 다음과 같은 세 가지 핵심 원칙을 바탕으로 합니다 2.1 일관성 GDS는 G마켓의 브랜드 정체성에 기초하여 프로덕트의 사용성을 높입니다. 파운데이션 및 컴포넌트가 모여 일관된 형상 및 패턴과 사용자 경험을 제공합니다. 이를 통해 사용자는 플랫폼 내에서 일관된 경험을 할 수 있으며, 새로운 기능이나 페이지를 접했을 때도 쉽게 적응할 수 있습니다. 2.2 확장성 GDS는 사용자와 작업자의 니즈에 따라 지속적으로 유지 및 관리됩니다. 디자인 가이드라인, 컴포넌트 라이브러리, 리소스 등의 공동 자산을 일관되게 유지함으로써 시스템의 확장성을 보장합니다. 2025년 도입된 AI 기술과의 통합은 이러한 확장성을 더욱 강화하고 있습니다. 2.3 효율성 GDS 자산을 재사용함으로써 작업자는 구조적 관점에서 사용자 경험을 고민할 수 있는 시간을 확보할 수 있습니다. 이는 작업자의 생산성과 효율성을 높이고, 궁극적으로 프로덕트 및 사용자 경험을 강화하는 데 기여합니다. 3. 시각적 언어(Visual Language)...
자세한 내용 보기

2. 서비스 디자인 개발 방법론(애자일 프로세스, 린 프로세스)

이미지
2. 서비스 디자인 개발 방법론 디자인을 개발하는 방법론은 매우 다양하고 설정한 목표와 방향성에 따라 사용하는 방법도 다릅니다. 수많은 방법론 중에서도 대표적인 서비스 디자인 개발 방법론인 '애자일 프로세스'와 '린 프로세스'는 사용자의 요구 사항을 적극적으로 수용하고 제품을 빠르게 전달해 고객 가치와 만족도를 높인다는 공통점이 있습니다. 2.1 애자일 프로세스(Agile Process) 소프트웨어가 어느 정도 사용 가능할 만큼 개발되었다면 빠르게 출시한 후 사용자의 의견을 수집하며 제품을 수정하고 다시 배포하는 과정을 반복하는 방법이다. 애자일 방법론은 계획 → 설계(디자인) → 개발(발전) → 테스트 → 검토(피드백) 순으로, 반복적으로 진행됩니다. 계획을 세운 후 각 단계를 순차적으로 진행하는 Waterfall 모델과 달리, 애자일은 먼저 진행 후 분석, 시험, 피드백을 통하여 개선하여 나가는 진행 모델입니다. 1. 계획 및 분석: 고객과 사용자의 요구사항을 파악하여 타당성을 조사하고, 소프트웨어 기능과 제약조건을 정의하는 명세서 작성 및 문제 영역과 사용자의 작업 요구사항을 이해하는 단계 2. 설계(디자인): 기획 의도에 맞는 설계 및 디자인 추가 및 수정하는 단계 3. 개발(발전): 설계단계에서 만들어진 설계서를 바탕으로 프로그램 작성, 코딩, 디버깅, 단위/통합테스트 수행 4. 테스트: 발생 가능한 실행 프로그램의 오류를 발견하는 단계 5. 검토(피드백): 기획 의도 파악 및 시험 결과에 따라 수정할 부분을 제시하는 단계 2.2 애자일 방법론의 장점, 단점 장점 단점 1. 프로젝트 계획에 걸리는 시간 최소화 가능 2. 점진적으로 테스트로 쉽고 빠르게 버그 발견 가능 3. 계획 ...
자세한 내용 보기