📖Getting started

SKP 솔루션 디자인 시스템 시작하기

Solution Design System : ATOM

ATOM은 Atomic Design 방법론을 기반으로 제작된 SKP 솔루션 디자인 시스템입니다. RB Insight와 ADT Capstec 모니터링 시스템 등 그동안 UX그룹에서 진행했던 솔루션 구축 프로젝트를 통해, 도메인은 다르지만 공통으로 사용되었던 UI 컴포넌트를 선별한 후 디자인 라이브러리로 제작하였습니다. 솔루션 서비스 구축에 필요한 UI 기본 요소들을 각 계층별로 구분하고, 세부 기능페이지 디자인에 활용할 수 있도록 아래와 같이 구성하였습니다.

Contents

• UX WRITING

  B2B 사용자 커뮤니케이션에 대한 Voice & Tone과 서비스 글쓰기 원칙, 상황별 UI문구 정리

• FOUNDATIONS

  솔루션 서비스 디자인에 필요한 Design Framework 최소 기준값 정의

• COMPONENTS

  디자인 목적에 맞게 사용자 인터랙션을 유도하는 기본 UI단위

• MODULES

  개별 Component로 구성된 특정 기능 단위의 인터페이스 그룹

• TEMPLATES (TBD)

  주 Module과 보조 Module로 구성되어, 정보 탐색이나 데이터 처리가 가능한 단일 페이지

• FLOWS (TBD)

  완결성있는 특정 사용목적 단위의 Template 그룹

• EXTERNAL LINKS

  대시보드나 센서상세페이지에서 데이터 특징별 상태를 구현할 수 있는 다양한 형태의 차트 카탈로그

현재는 UX그룹의 디자이너들이 Web/Mobile Sketch 파일을 다운받아 화면 설계와 디자인에 사용가능하도록 파일을 구성하였습니다. Sketch 프로그램 내에서 Symbol/Components와 Overrides 기능을 사용하도록 제작되었습니다. 또한 각각의 요소들에 대한 상세설명을 작성하여, 일관된 형태의 페이지를 효율적으로 디자인 할 수 있게 되었습니다. 확장성 높은 개별 컴포넌트와 모듈의 조합으로 다양한 솔루션 서비스 구축에 활용할 수 있을거라 생각합니다.

추후 신규 솔루션 업무를 통한 ATOM의 활용도 검증과 구성요소 추가, 공통 마크업 코드 업데이트가 진행될 계획입니다.

Sketch File Download

💎Resource 페이지에서, Abstract 링크를 통한 접근만 허용이 됩니다. (권한 문의 : UX그룹 권형석PL)

ATOM Figma Library https://www.figma.com/file/9XYtG3usQ6YBXnk5juoTYT/ATOM-Library-1.0?node-id=0%3A1