지난주에 이어서 2주 차 디자인 시스템 회고를 해보겠다.
1주 차에는 디자인 시스템의 정의와 테크 블로그를 분석해 보고 우리의 블로그를 어떤 식으로 만들고 싶은지에 대한 이야기를 했었다면,
2주 차에는 디자인 시스템이란 무엇이고, 어떤 개념이 있는지에 대해 공유하는 시간을 가졌다.
내가 생각하는 디자인 시스템이란?
서비스에서 공통으로 필요로하는 디자인 요소들을 하나의 시스템으로 정리를 해둔 것
Text, Color, Spacing 등등이 있을 것 같다.
개발자 경험(DX)를 향상 시키는데 도움을 주는 것
공통 컴포넌트로 분리 후 수정사항이 있을 때 한 번에 수정하기 용이하고 가져다 쓰기 편리하다.
(넓게 봤을 때) 사용자가 보기에 편안하고 이목을 끄는 UI를 연구하고 디자인을 하는 것
예시로 Material Design에서 UI에 사용하기에 적합하다고 판단되는 색상들을 추리는 것이 있다.
우리 블로그의 최종 모습이 마지막에 언급했던 사용자들이 보기에 만족할 만한 모습이 되었으면 좋겠다.
아키텍처 패턴 vs 디자인 패턴
아키텍처 패턴
아키텍처 패턴은 소프트웨어의 구성 요소를 연결하는 방법이나 구성 요소 간의 관계 등을 어느 특정한 형태로 구조화함으로써 소프트웨어 설계에서 윤곽을 제시한다.
즉 시스템을 구성하는 서브 시스템, 컴포넌트와 같은 구성요소 간의 관계를 관리하는 시스템의 구조이다. (MVVM, MVC, MVP 등등)
디자인 패턴
소프트웨어 개발 분야에서 디자인 패턴은 프로그램 개발 과정 속에서 자주 나타나는 문제들을 쉽게 해결하기 위한 방법으로 과거의 소프트웨어 개발 과정에서 발견된 설계의 노하우를 바탕으로 이후에도 재사용할 수 있기 좋은 형태로 가공하여 정리한 것이다.
즉 문제의 해결 과정을 기록해두었다가 이후에 똑같은 문제 발생 시 이 해결 과정을 이용하는 방법이다.
알게된 사실
아키텍처 패턴이 디자인 패턴보다 조금 더 넓은 범주에 속한다.
스타일 가이드 vs 패턴 라이브러리
스타일 가이드
색상, 글꼴과 같은 그래픽 스타일과 그 사용법에 대해 정의해 놓은 것
패턴 라이브러리
위 스타일 가이드를 이용하여 컴포넌트화 해둔 것
알게된 사실
2주 차 공유하는 시간에 구성 요소로 Foundation과 Component에 대해 알게 되었다. 이후 더 조사해 보았고 아래와 같이 정리가 되었다.
Foundation === 스타일 가이드
Component === 패턴 라이브러리만들고 싶은 컴포넌트들
블로그
- Button (크기 조절 가능한)
- Chip (태그를 보여주기 위한)
- Switch (테마 변경을 위한)
- Text Field (로그인/회원가입, 댓글을 위한)
- Progress (게시물 로딩 시 보여질)
- Snackbar (API 요청 성공 여부 후 보여질)
- Card (게시물 목록에 보여질)
지난번보다 조금 더 세분화해서 당장에 필요할 것 같은 컴포넌트들 위주로 생각해 보았다.
디자인 시스템 레퍼런스
우아한 형제들의 우아한 공방
우아한 형제들에서 운영하는 우아한 테크를 보다가 우아한 공방이라는 것을 알게 되었고 참고해 보고 싶어서 구글링을 했으나 찾을 수 없었다. 그래서 메일로 현재 배포가 되어있는지에 대해 여쭈어 보았고 아래와 같은 답변이 왔다.
공개되면 바로 달려갈 준비 완료..!
쏘카의 SOCAR FRAME
쏘카에서 운영하는 SOCAR FRAME에는 Foundations와 Components가 있고 쏘카의 디자인 시스템을 zeroheight를 통해 직접 체험해 볼 수 있다.
라인 디자인 시스템
라인에서 제공하고 있는 라인 디자인 시스템은 디자인 가이드라인에 대해 정리가 정말 잘 되어 있어서 블로그를 만들 때 참고를 많이 할 것 같다.
이번 주 회고
디자인 시스템에도 개념이 이렇게 방대한지 몰랐다. 그리고 다른 팀원들의 과제를 보며 알아가는 것도 많았고 피드백 받은 것 토대로 다시 공부하면서도 많은 것을 알게 되었다.
다음 주까지 할 일
- StyleX 라이브러리 파해치기
다음 주도 화이팅~~
