📖Getting started
SKP 솔루션 디자인 시스템 시작하기
Last updated
SKP 솔루션 디자인 시스템 시작하기
Last updated
ATOM은 Atomic Design 방법론을 기반으로 제작된 SKP 솔루션 디자인 시스템입니다. RB Insight와 ADT Capstec 모니터링 시스템 등 그동안 UX그룹에서 진행했던 솔루션 구축 프로젝트를 통해, 도메인은 다르지만 공통으로 사용되었던 UI 컴포넌트를 선별한 후 디자인 라이브러리로 제작하였습니다. 솔루션 서비스 구축에 필요한 UI 기본 요소들을 각 계층별로 구분하고, 세부 기능페이지 디자인에 활용할 수 있도록 아래와 같이 구성하였습니다.
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의 활용도 검증과 구성요소 추가, 공통 마크업 코드 업데이트가 진행될 계획입니다.
💎Resource 페이지에서, Abstract 링크를 통한 접근만 허용이 됩니다.
(권한 문의 : UX그룹 권형석PL)
ATOM Figma Library https://www.figma.com/file/9XYtG3usQ6YBXnk5juoTYT/ATOM-Library-1.0?node-id=0%3A1
