Framework for Building Reusable Design Systems

This study investigated the method of constructing and combining blocks based on the atomic design system in order to propose a framework for rescue of a reusable design system. For that, I first looked at the necessity of a design system and examples of snow white, skeuomorphic design, flat design, and material design. In addition, molecules, atoms, organisms, templates and pages of atomic design using the principles of chemistry as metaphors were defined through literature studies. In order to implement a new framework, an interface inventory was constructed, and among them, font, color, image and control elements were extracted as core visual elements, and guidelines were defined, and molecular elements were classified and composed of atoms based on them. Blocks are constructed in the form of blocks based on the design pattern most used in the content inventory, and the framework is constructed to implement a layout based on a visual grid and design a page through a combination of blocks. The significance of this paper is that the new framework helps team consistency and collaboration by reusing blocks and supports file sharing and updating.

재사용 가능한 디자인 시스템 구축을 위한 프레임워크

본 연구는 재사용 가능한 디자인 시스템 구출을 위한 프레임워크 제안을 위해 아토믹 디자인 시스템을 기반으로 블록을 구성하여 조합하는 방법에 대해 알아보았다. 그를 위해 디자인 시스템의 필요성과 스노우화이트, 스큐어모픽 디자인, 플랫디자인 및 머티리얼 디자인의 사례를 우선적으로 살펴보았다. 또 화학의 원리를 메타포로 사용하는 아토믹 디자인의 분자, 원자, 유기체, 템플릿 그리고 페이지를 문헌 연구를 통해 정의하였다. 새로운 프레임 워크를 구현하기 위해 인터페이스 인벤토리를 구성하고 그 중에서 폰트, 컬러, 이미지와 컨트롤 요소를 핵심 시각 요소로 추출하여 가이드라인을 정의하였으며 그를 바탕으로 분자 요소를 분류하고 원자로 구성할 수 있었다. 블록은 콘텐츠 인벤토리에서 가장 많이 사용되는 디자인 패턴을 기반으로 블록 형태고 구성되도록 하여 블록의 조합을 통해 시각적 그리드를 바탕으로 레이아웃을 구현하고 페이지를 디자인하도록 프레임워크를 구성하였다. 새로운 프레임워크는 블록의 재사용으로 팀의 일관성과 협업을 도우며 파일의 공유와 업데이트를 지원한다는 것에 본 논문의 의의가 있다.