사이드 프로젝트 3편 | 와이어프레임 제작, 디자인 시스템 설계

1. 와이어프레임 제작

페이지 구분

• 메인페이지
• 레시피 추천 페이지
• 레시피 상세 페이지
• 마이페이지

뷰포트 구분

• 데스크톱 : 1008px 이상
• 태블릿 : 641px ~ 1007px
• 모바일 : 640px 이하

참고 자료

• 핀터레스트
• 오'키친(O'Kitchen)

 

 

데스크톱용 화면을 만들어 놓으니까 태블릿용, 모바일용 화면 제작 속도에 불이 붙더라고요. 금방 끝났습니다.

후후 와이어프레임에 벗어나고싶었던 것도 한몫했어요. 디자인에 고민하는 시간이 아까웠거든요 T-T. 구현해보고 싶은 기능들이 많았어서 빨리 개발하고 싶었습니다. 

 

이제 컴포넌트 설계해 보고 styled-component 사용법 다시 봐야 할 것 같아요.

테마 지정해서 일정하게 스타일 적용할 때는 styled-component를 사용하고 간단히 수정할 부분은 tailwind를 사용하려고 합니다. 

 

---

2. 디자인 시스템 설계

디자인 시스템은 무엇인가?

디자인 원칙과 규격, 재사용 가능한 UI패턴과 컴포넌트, 코드를 포괄하는 시스템이다. 단순 스타일 가이드, 패턴 라이브러리 역할만 하는 디자인 시스템도 있고, 브랜드 원칙과 UX 원칙에 이르는 하나의 철학을 구성하는 시스템도 있다.

 

디자인 시스템 설계 및 적용해보기

이번 프로젝트에서 간단하게 색상값, 간격, 폰트 관련하여 디자인 가이드를 정해보았습니다. 별거 아닌 것 같지만 미리 디자인에 대한 기준을 세워놓으면 시행착오를 최소화하고 효율적으로 개발하는데 큰 도움이 됩니다. 특히 협업에서 필수

 

 

Colors

d8e2dc - ffe5d9 - ffcad4 - f4acb7 - 9d8189 

 

 

spacing

- 8포인트 그리드

- 템플릿 높이 값 8배수

- 카드 템플릿 간 간격 12

- 베이직 템플릿 마진 상하 24

- 컴포넌트끼리 마진 상하 16

 

Typography

- 페이지단위 타이틀 heading1 - xl - 22px

- 페이지단위 타이틀 heading1 - l - 18px

- 본문 단위 body1 - m -16px

- 본문 단위 body1 - s -14px

- 본문 보조 단위 detail - 12px