지마켓 디자인 시스템(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)
3.1 타이포그래피 시스템
지마켓은 자체 개발한 'G마켓 산스' 폰트를 주요 서체로 사용하고 있습니다. 이
폰트는 다양한 디바이스와 환경에서 일관된 가독성을 제공하며, 브랜드
아이덴티티를 강화하는 역할을 합니다.
- 타입 스케일: 명확한 계층 구조를 위한 체계적인 타입 스케일 시스템
- 폰트 웨이트: Light, Regular, Medium, Bold 등 다양한 웨이트 제공
- 행간 및 자간: 최적의 가독성을 위한 세심한 설정
3.2 컬러 시스템
지마켓의 컬러 시스템은 브랜드 아이덴티티와 사용성을 모두 고려하여
설계되었습니다:
- 프라이머리 컬러: 지마켓 레드 - 브랜드의 핵심 아이덴티티
- 세컨더리 컬러: 다양한 상호작용 요소에 활용되는 보조 색상
- 뉴트럴 컬러: 배경, 텍스트, 구분선 등에 활용되는 중립 색상
- 시맨틱 컬러: 성공, 경고, 오류, 정보 등 상태 및 피드백 표시에 활용되는 색상
각 컬러는 접근성 기준(WCAG 2.1)을 충족하도록 대비율을 고려하여 선정되었습니다.
4. 컴포넌트 라이브러리
지마켓 디자인 시스템은 다양한 컴포넌트를 체계적으로 관리하고 있습니다. 이러한 컴포넌트들은 재사용 가능하며, 일관된 사용자 경험을 제공하는 데 중요한 역할을 합니다.
4.1 기본 컴포넌트
- 버튼: 다양한 크기, 상태, 스타일의 버튼 컴포넌트
- 입력 필드: 텍스트 입력, 선택, 체크박스 등 다양한 입력 컴포넌트
- 아이콘: 일관된 스타일의 아이콘 세트
- 배지: 상태나 정보를 표시하는 작은 시각적 요소
- 카드: 정보를 그룹화하여 표시하는 컨테이너 요소
4.2 복합 컴포넌트
- 내비게이션: 헤더, 푸터, 사이드바 등 내비게이션 요소
- 다이얼로그: 모달, 팝업, 알림 등 사용자와의 상호작용을 위한 요소
- 리스트: 다양한 형태의 목록 표시 컴포넌트
- 탭: 콘텐츠를 카테고리별로 구분하여 표시하는 요소
- 슬라이드: 이미지나 콘텐츠를 슬라이드 형태로 표시하는 요소
4.3 패턴 및 템플릿
- 상품 목록: 다양한 형태의 상품 목록 표시 패턴
- 상품 상세: 상품 정보를 효과적으로 표시하는 템플릿
- 결제 프로세스: 사용자 친화적인 결제 흐름 패턴
- 검색 결과: 검색 결과를 효과적으로 표시하는 패턴
5. 지마켓 디자인 시스템의 최신 트렌드와 업데이트된 기능
지마켓 디자인 시스템(GDS)은 최근 몇 년간 지속적인 발전을 거듭하며 최신 디자인 트렌드와 기술을 적극적으로 수용하고 있습니다. 2025년 현재 GDS에 적용된 최신 트렌드와 업데이트된 기능들을 살펴보겠습니다.
5.1 AI 통합 디자인 시스템
지마켓은 2025년 들어 AI 기술을 디자인 시스템에 본격적으로 통합하기
시작했습니다. 이는 단순한 기능 추가가 아닌 디자인 시스템의 근본적인 변화를
의미합니다.
- AI 기반 개인화 컴포넌트
사용자의 행동 패턴과 선호도를 분석하여 자동으로 UI 요소를 최적화하는 '스마트 컴포넌트'가
도입되었습니다. 이 컴포넌트들은 사용자별로 다른 형태와 배치로 표시되어 개인화된 경험을 제공합니다.
예를 들어, 특정 카테고리를 자주 방문하는 사용자에게는 해당 카테고리가 더 눈에 띄게 표시됩니다.
- 디자인 자동화 도구
디자이너와 개발자의 작업 효율성을 높이기 위한 AI 기반 디자인 자동화 도구가 GDS에 통합되었습니다. 이 도구는 기본 디자인
가이드라인을 준수하면서 다양한 변형을 자동으로 생성하여 디자이너의 창의적 작업에 집중할 수 있는 환경을 제공합니다.
5.2. 마이크로인터랙션 강화
사용자 경험을 더욱 풍부하게 만들기 위해 GDS는 세밀한 마이크로인터랙션에
중점을 두고 있습니다.
- 고급 애니메이션 라이브러리
GDS는 다양한 상황에 맞는 애니메이션 패턴을 제공하는 포괄적인 라이브러리를
구축했습니다. 이 애니메이션들은 사용자의 행동에 자연스럽게 반응하며, 로딩
상태, 전환 효과, 피드백 등을 시각적으로 표현합니다.
- 햅틱 피드백 가이드라인
모바일 환경에서의 햅틱 피드백에 대한 상세한 가이드라인이 추가되었습니다. 이는 시각적 요소와 촉각적 요소를 조화롭게
결합하여 더욱 몰입감 있는 사용자 경험을 제공합니다.
5.3. 다크 모드 및 테마 시스템
사용자 선호도와 접근성을 고려한 테마 시스템이 GDS에 도입되었습니다.
- 완전한 다크 모드 지원
모든 컴포넌트와 패턴이 라이트 모드와 다크
모드를 완벽하게 지원하도록 업데이트되었습니다. 이는 단순한 색상 반전이
아닌, 각 모드에 최적화된 디자인을 제공합니다.
- 동적 테마
시스템
시간대, 위치, 사용자 설정 등에 따라 자동으로 테마가 변경되는
동적 테마 시스템이 구현되었습니다. 이를 통해 사용자는 항상 현재 상황에
가장 적합한 시각적 경험을 제공받을 수 있습니다.
5.4. 확장된 접근성 가이드라인
GDS는 더 많은 사용자가 서비스를 불편 없이 이용할 수 있도록 접근성 가이드라인을 크게 확장했습니다.
- 인지적 접근성 고려
시각적, 청각적 장애뿐만 아니라 인지적 장애를 가진 사용자를 위한 디자인 가이드라인이 추가되었습니다. 복잡한 정보를 단계적으로 제시하고, 명확한 언어를 사용하는 등의 지침이 포함되어 있습니다.
- 자동 접근성 검사 도구
디자이너와 개발자가 접근성 문제를 쉽게 발견하고 해결할 수 있도록 자동 접근성 검사 도구가 GDS에 통합되었습니다. 이 도구는 WCAG 2.2 기준을 준수하며, 실시간으로 피드백을 제공합니다.
5.5. 지속가능한 디자인 원칙
환경적 영향을 고려한 지속가능한 디자인 원칙이 GDS에 새롭게 추가되었습니다.
- 에너지 효율적 디자인
배터리 소모와 서버 부하를 줄이기 위한 에너지 효율적 디자인 가이드라인이 도입되었습니다. 이는 불필요한 애니메이션 제한, 이미지 최적화, 효율적인 코드 구조 등을 포함합니다.
- 디지털 웰빙 고려
사용자의 디지털 웰빙을 고려한 디자인 원칙이 추가되었습니다. 과도한 알림 제한, 휴식 유도 기능, 사용 시간 관리 등의 요소가 이에 해당합니다.
5.6. 3D 및 공간 디자인 요소
증강현실(AR)과 가상현실(VR) 경험을 위한 3D 및 공간 디자인 요소가 GDS에 통합되었습니다.
- 3D 제품 뷰어 컴포넌트
사용자가 제품을 360도로 살펴볼 수 있는 3D 제품 뷰어 컴포넌트가 추가되었습니다. 이는 특히 가구, 전자제품, 패션 아이템 등의 카테고리에서 활용됩니다.
