DAY13_디자인 시스템을 만들어보자!

오늘은 디자인시스템에 대해 배워보았다!

 

---

수업 요약

- Variants 실습

- 미니 디자인시스템 만들어보기

 

컴포넌트

왜 사용해야하는가

→ 수많은 인스턴스를 자동으로 한번에 업데이트 가능

→ 작업시간 대폭 단축

→ 완벽한 일관성 유지

오버라이드

→ 복사된 인스턴스를 변경할 수 있는 기능

→ 변경된 부분은 마스터를 안따라감

 

 

디자인 시스템

디자인시스템이란?

→ 효율적인 디자인 작업을 위한 체계적인 접근법

→ 여러 디자이너가 한 프로젝트를 작업할때 균일한 스타일로 작업할 수 있음

규칙+부품의 세트	디자인에 필요한 ‘규칙(가이드라인)’과 ‘부품(재사용가능한 컴포넌트)’ 를 미리 정의하고 체계적으로 모아둔 종합세트
Single Source of Truth	디자이너와 개발자 모두가 따르는 ‘단일 진실 공급원’ 역할을 함
목표	누가, 언제, 어떤 부분을 디자인하드 동일한 품질과 일관된 브랜드 경험을 제공하기 위함(디자인의 효율성 + 일관성 확보)

 

→ 기기 간 일관성 유지 문제를 해결하고 효율적인 디자인 작업 환경 구축

 

필요한 이유

일관성	모든 페이지와 제품에서 동일한 디자인 언어 사용 → 일관된 사용자 경험 제공
효율성	이미 만들어진 컴포넌트를 재사용하여 개발 속도도 함께 향상
협업	디자이너와 개발자가 동일한 이름의 컴포넌트를 참조하여 소통하므로 오류가 줄어듬
확장성	새로운 기능 추가 시에도 기존 시스템을 활용하므로 빠르고 안정적으로 확장 가능

 

 

기본구조

• Foundations(기초 공사)
  : color, 타이포, 스페이싱 , 그리드 등
  : 디자인의 가장 기본이 되는 원칙
• Components(부품)
  : 재사용가능한 UI 요소
• Patterns(조립세트)
  : 로그인 폼 / 검색바 + 필터 / 댓글 섹션 / 상품카드목록
  : 여러 개의 컴포넌트를 조합하여 만든 자주 사용되는 UI 조립 세트
• Templates(설계도)
  : 블로그 상세 페이지, 상품 목록 페이지, 대시보드 레이아웃 등
  : 페이지 전체의 레이아웃’틀’을 의미

→ 실제 디자인 시스템을 보고 큰 틀 파악하기

 

오늘의 과제는 두둔

Variants 다시 실습해보고! 앱 클론을 한뒤 미니 디자인시스템을 만들어보기였다.

사실 현업에서 디자인시스템을 만들어본 적이 있어서..뭐 메인화면만 클론을 했기에 대강 만들었지만..!!

이제 Variants 만드는건 뭐...ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 금방 만들 수 있을 것 같다ㅋㅋㅋㅋ

오늘은 Fint 앱을 클론해보았다.

AI를 활용해 나의 자산을 알아서 투자해주는 앱인데, 친구 덕에 알고 있었지만 깔고만 있다가 워낙 요소가 많아서 클론해보기에 좋을 것 같아 한번 시도해보았다.

이커머스의 기본 구조가 아닌 다양한 요소가 들어가있어서 시간은 좀 걸렸지만..! 클론하는데는 어렵지 않았다.

다만 어떻게 구조화를 할지가 고민이었다랄까...

그리고 하면서 해당 앱 화면에 대한 디자인 시스템을 만들어보았는데, 너무 오랜만에 해서 어떤식으로 나눠야하는지 까먹는 바람에

갖고있던 작업물을 참고해서 만들긴 했다.

사실 2개 앱을 클론하는 줄 알고 2개했다가 1개라길래 후다닥 디자인시스템을 만든거라...ㅎ 아숩ㅠㅠㅠㅠㅠ

현업에서는 저런식으로 디자인 시스템을 정리했었는데, 사실 회사마다 다르기에...나만의 정리법을 익히는 것도 중요할 것 같다.

 

오늘도 이렇게 마무으리~