CMC 14기를 수료하고 같은 웹 파트 친구들과 디자인 시스템을 만들어 보기로 했다. 목표는 직접 만든 디자인 시스템을 이용한 블로그 개발, npm 게시 그리고 공식 문서 만들기이다.
시작하기에 앞서 디자인 시스템에 대해 간략하게 알아보고 가보겠다.
디자인 시스템이란?
디자인 원칙과 규칙, 재사용 가능한 UI 패턴과 컴포넌트, 코드를 포괄하는 시스템이다.
요즘 IT 글에 따르면 디자인 시스템의 정의는 위와 같다. 이러한 디자인 시스템을 이용하여 정해진 패턴과 컴포넌트를 재사용하여 제품을 구축하고, 개선하는 시간을 단축시킨다.
디자인 시스템이 잘 정리되어 있는 예시로 Material Design이 있다.
이번 주에 한 일
1주 차에는 테크 블로그를 보며 IA를 그려보고, 개발할 때 필요한 컴포넌트를 정리했다. 그리고 간단한 와이어 프레임까지 그려보는 과제를 진행했다.
IA
컴포넌트
- 홈
- 페이지네이션
- 소개 배너
- 태그
- 게시물
- 제목
- 요약
- 작성일자
- 썸네일(small)
- 제목
- 게시물
- 썸네일(large)
- 공유하기
- 네비게이션 바
와이어 프레임
홈
게시물
과제 공유하는 시간에 와이어 프레임이 벨로그 같다는 피드백을 받았는데 지금보니 진짜 똑같다 ㅋㅋㅋㅋ
이번 주 회고
간단하게 알아오는 과제라고 생각해서 정말 간단하게 IA를 그리고, 컴포넌트를 생각하고, 와이어 프레임을 짜보았다. 그런데 과제 공유 시간에 다들 너무 열심히 해와줘서 미안했다... 2주 차에는 1주 차 때보다 더 나은 모습을 보여주기 위해 노력해야겠다고 생각했다.
다음 주까지 할 일
- 각자가 생각하는 디자인시스템이 뭔지 서로에게 설명해주기
- 아키텍쳐, 디자인 패턴
1주 차보다 나은 2주 차를 위해 잘 준비하고 참여해야겠다!!
