01. 디자인 시스템이란?

# What? 디자인 시스템이 뭔데?

- 디자인 원칙, 규격, 가이드

 

# Why? 왜 필요한데?

- 효율성 -> 했던거 재활용

- 일관성 -> 니 멋대로 만들지마라 디자인 시스템에 맞춰 만들어!

 

# How?

1. 핵심 화면 (와이어프레임) 만들기

- 서비스 기획 후 핵심 화면 8개정도 와이어프레임 만들기

-> 여기서 재활용할 요소들 어느정도 추려내

-> 내가 자주 쓰는 header, footer, card, sidebar, navbar, icon 등을 미리 나만의 와이어프레임으로 만들어놓자,

이렇게 하면 내가 갖고 있는 요소들 중 선택해서 그래픽 디자인, 컬러 등으로 그 서비스만의 스타일만 구상해 디자인 시스템으로 만들면 돼. 레이아웃 같은걸로 서비스의 성격을 드러내려 하지말고 이미지 요소들, 컬러로 드러내게끔 한다면 웬만한 자원들 재활용 가능. 

 

* 디자인 참고사이트

- gdweb(한국 사이트 위주)

- pinterest

- behance(외국 사이트 위주)

- Mobbin(앱 위주)

 

 

2. 가이드 만들기

- 디자인 시스템의 목적, 디자인 원칙, 시스템 가이드

 

3. 기본요소 만들기

- 디자인 시스템을 디자인하기 위한 Foundation 요소(아이콘, 글씨, 컬러)

 

4. 컴포넌트 만들기

- Header

- Footer

- Banner

- Button

- Bottom Nav

- Chips

- Tabs

- Table

- Card

- Divider

- Lists

- Sidebar

- 자주 쓰는 화면들

1) 로그인, 회원가입

2) 개인정보처리방침

3) 게시판

4) 연혁

5) 오시는길

 

5. 디자인 시스템 구축해놓기

-> 자주 의뢰 들어올만한 유형을 크몽 인기순 포트폴리오를 보고 확인해서 해당 프로젝트들을 이용해 디자인 시스템

다듬어놓기

1. 반응형 웹

• 카페, 식당, 뷰티, 병원, 공기업, 회사소개

  2. MOBILE(자사서비스)

• 배민, 당근마켓같은 앱 -> 근데 이건 일단 내 아이디어로 하자