퍼블리 디자인 시스템

Contribution
70%
Role
Research, Ideation, Visual design, Documentation
Tool
Figma
퍼블리에는 멤버십과 뉴스 두 가지 제품이 있고, 웹과 앱 모두를 서비스 합니다. 퍼블리 제품의 일관된 사용자 인터페이스를 만들기 위해 디자인 가이드를 만들고 시스템으로 구축하였습니다. 특히 퍼블리의 프로덕트 디자이너는 퍼블리싱 업무도 겸하고 있으므로 디자인과 코드를 시스템으로 일치시켜 작업의 효율을 높일 수 있도록 하였습니다.
Guide Principle
  • 디자인 가이드는 가이드일 뿐, 상황에 맞게 수정하고 지속적으로 업데이트해야 합니다.
  • 디자인과 코드가 분리되면 안됩니다. 작업을 하면서 싱크를 맞추어 나가야 합니다.
  • 가이드와 산출물이 계속 다르게 사용된다면 둘 중에 하나를 바꾸어야 합니다.
  • 디자이너와 엔지니어가 적극적인 커뮤니케이션을 하면서 서로를 이해하기 위한 노력을 해야 합니다.
Atomic System
Foundation
  • 더 이상 쪼개지지 않는 가장 작은 단위
  • 주로 Style이 이에 해당
  • Color, Text , Align, Layout, Spacing, Shadow 등
color
shadow
Elements
  • 단일로 사용하지 못하는 최소 단위의 블록
  • Button, icon, input box, Forms, Spinner 등
button
Icon
Modules
  • 하나 이상의 Elements로 만들어진 블록
  • Bottom navigation, Card, Carousel, Modal 등
Bottom navigation
Card
Templates
  • Modules이 모여 화면 단위를 구성한 것