디자인 시스템 적용하기

디자인 시스템이란?

특정 사이트의 아이덴티티를 담당하는 UI 패턴을 정의하여 컴포넌트를 규칙화 하는 것이다.

일관된 디자인과 요소를 통해 디자인을 관리하고, 사용자 경험을 향상시킬 수 있도록 디자인 요소와 패턴을 표준화하여 일관된 결과물을 생산할 수 있도록 한다.

디자인 시스템이 왜 필요한가?

웹 서비스를 제작할 때 중요하게 생각하는 것 중 하나가 일관성 있는 디자인이다. 기업은 디자인 시스템을 통해 복잡한 애플리케이션에서 일관된 사용자 경험을 제공하고 있다.

내 포트폴리오에는 왜 디자인 시스템이 필요한가?

디자인 시스템을 적용하여 패턴화된 부분을 컴포넌트로 정의하고 그 안에서 사이즈나 색상 등을 바꿀 수 있게 개발하면 개성이 생기고 활용도가 더 높아질것이라 판단하여 포트폴리오에도 디자인 시스템을 적용하기로 하였다.

디자인 시스템을 적용하기 전, 일단 분석부터 하여 어떤 부분을 패턴화 할지 정해보자!

타이틀

리스트 아이템

• 글자의 모서기라 둥굴게 처리된 폰트 사용
• 둥군 아이템 모서리
• 원형에 가까운 이모티콘 사용
• 3개의 폰트사이즈
• 3개의 서체

=> 간단하게 분석해보았다.

현재는 폰트사이즈, 폰트패밀리, 색상이 고정되어 있어 바꿀 수 없다.
나는 기업 서비스가 아니다 보니까 사용자에게 어디까지 권한을 줘야할지 고민을 하고있다.
예를들어 정해진 3개지 선에서 사이즈나 서체를 선택하게 할 지, 사용자가 원하는 사이즈와 서체를 적용시키게 해야 할 지 말이다.

// 전자 방식
<Title
	sx={{
    	size: "m",
		color: "red",
    }}
/>

// 후자 방식
<Title
	sty={{
    	size: "16px",
		color: "#000",
    }}
/>

전자 반식으로 개발을 하고 추후에 후자 방식을 적용해도 될 것 같다.
후자 방식은 반응형까지 고려를 해봐야 할 것이다.