11번가 디자인시스템
고객에게 최적화된 UX/UI의 11번가 디자인 원칙을 소개합니다.
협업과 일관성을 위한
11번가, 디자인 시스템 사이트 오픈
안녕하세요, 11번가 디자인 시스템 사이트가 오픈했습니다!
그간 11번가가 고객에게 최적화된 쇼핑 환경을 제공하고자 적용해 온 디자인 원칙과 효율적인 협업을 위해 만들어진 11번가 디자인 시스템(11STREET Design System) 사이트를 소개하려고 합니다.
11번가 디자인 시스템(11STREET Design System) 사이트는 11번가의 디자인을 중심으로 브랜드,
컴포넌트, 라이브러리를 통해 디자인 철학과 원칙을 한 곳에 볼 수 있는 사이트 입니다.
제작배경
2016년, 11번가는 내부에서 운영 중인 '디자인 시스템'을 체계화하였는데요!
우리는 11번가의 디자이너, 개발자, 기획자를 넘어서 사이트를 통해 사용자 경험에 기여하는 구성 요소와 상호 작용에 대한 일관된 기준과 디자인 철학을 널리 알리고 전달하기 위해 디자인 시스템 사이트를 구축하게 되었습니다.
디자인 시스템이란
디자인 시스템은 디자인과 관련된 모든 요소를 효율적으로 관리하고 일관성 있게 유지하기 위한 접근 방법입니다. 이를 통해 디자인 요소들을 표준화하고 재사용 가능하게 만들어 제품이나 서비스의 브랜드 경험을 일관되게 제공하며, 사용자 인터페이스(UI)를 개선하여 사용자가 플랫폼을 더 쉽게 이해하고 사용할 수 있도록 돕습니다.
디자인 시스템은 디자이너와 개발자 간의 원활한 협업을 촉진하고, 새로운 기능을 신속하게 구현할 수 있도록 합니다. 이는 일관성과 효율성을 향상시켜 제품 또는 서비스의 품질을 향상시키는 데 중요한 역할을 합니다.
11번가 디자인 철학
이번에 사이트를 제작하면서 11번가의 철학에 대해 소개하려고 합니다.
11번가의 디자인 철학은 “사용자 중심의 편리함 과 일관된 브랜드 경험"입니다.
1. 사용자 중심의 편리함 : 모든 디자인 결정은 사용자 경험을 최우선으로 고려합니다. 사용자가 쉽게 접근하고, 빠르게 원하는 상품을 찾고, 편리하게 구매할 수 있도록 인터페이스를 설계합니다.
2. 일관된 브랜드 경험 : 모든 접점에서 11번가의 브랜드 아이덴티티가 일관되게 느껴지도록 합니다. 이를 통해 사용자에게 신뢰를 주고, 브랜드 충성도를 높입니다.
3. 혁신과 지속 가능성 : 최신 디자인 트렌드와 기술을 적극적으로 도입해 사용자 경험을 지속적으로 개선합니다. 또한 지속 가능한 디자인을 통해 장기적인 발전을 도모합니다.
일관된 디자인 철학과 가이드라인
11번가 디자인 시스템 사이트는 11번가의 디자인을 중심으로 Brand, Foundation, 그리고 UI Components로 구성하여 이를 통해 디자인 철학과 원칙을 소개하고, 실제로 적용된 사례를 제시하며 로고, 폰트 등의 디자인 자산을 다운로드할 수 있도록 구성하였습니다.
- Brand : 디자인 원칙과 로고, 폰트와 같은 디자인 자산을 다운로드할 수 있도록 구성
- Foundation : 색상, 글꼴, 아이콘, 그리드 시스템과 같은 디자인 원칙을 제공
- Components : 재사용 가능한 UI 요소로 버튼, 입력 필드, 카드 등의 컴포넌트를 제공하고,
이를 적용한 사례를 제시
소통과 협력의 공간
11번가 디자인 시스템 사이트는 모든 사용자가 컴포넌트를 손쉽게 찾고 가이드를 확인하고 이해를 돕기위해 컴포넌트의 구조, 유형, 사용 예시를 함께 제공하여 디자이너, 개발자, 기획자 등 모든 이용자들과의 상호작용을 촉진하고 발전할 수 있도록 했습니다.
이를 통해 프로젝트의 일관성을 유지하고, 디자인 및 개발 작업을 효율적으로 수행할 수 있으며,
향상된 팀 협업과 의사 소통을 통해 프로젝트의 품질을 높일 수 있는 환경을 제공하였습니다.
사용자 요구와 편의를 고려
11번가 디자인 시스템 사이트는 반응형 웹으로 구축되어 있어 어느 기기에서나 편리하게 이용할 수 있으며, 직관적인 네비게이션과 사용자 친화적인 인터페이스로 누구나 쉽게 접근할 수 있습니다.
이로써 작업자들은 디바이스 제약 없이 확인하면서 작업할 수도록 하였습니다. 또한, 현재는 미오픈 상태지만 컴포넌트의 코드부분이 완료되면 컴포넌트의 실제 적용 및 코드화면을 확인하실 수 있습니다.
마무리하며
앞으로도 11번가 디자인 시스템 사이트는 인터랙션 디자인 가이드, 웹 컴포넌트를 제공하고 코드화하여
기획과 개발을 아우르는 모든 분들에게 도움이 되는 사이트로 발전시키는 것을 목표로 하고 있습니다.
고객에게 최적화된 쇼핑 환경을 제공하기 위해 지속적으로 디자인 언어를 만들고 발전시키는 환경을 구현하기 위해 노력할 것 입니다. 앞으로도 많은 관심 부탁드립니다.
