화면을 구성하면서 당연하게도 일어나는 일은 컴포넌트가 중복된다는 점이다. 나는 로그인 페이지와 회원가입 페이지의 구현을 담당했는데, 그래서 그런 건지는 모르겠지만 버튼(Button)과 입력 창(Input)이 모든 페이지에서 비슷한 모양으로 중복되었다. 그래서 공통 컴포넌트로 분리를 하였는데...
export default function Button({
bgColor,
textColor,
width,
height,
type,
borderColor,
fontSize,
isDisabled,
children,
}) {
return (
<button
className={`${bgColor} ${textColor} ${width} ${height} ${fontSize} ${borderColor} cursor-pointer disabled:cursor-not-allowed border rounded-md flex justify-center items-center disabled:bg-gray-2 disabled:opacity-50 disabled:text-black disabled:border-black`}
type={type}
disabled={isDisabled}
>
{children}
</button>
);
}
로그인과 회원가입 페이지에서 사용하는 버튼은 다음과 같다. (아래는 내가 임의로 지은 버튼의 이름이다.)
1. 기본 버튼
배경: 파란색
글씨: 흰색
글씨 크기: 14px
외곽선 색: 투명
2. 밝은 버튼
배경: 흰색
글씨: 파란색
글씨 크기: 12px
외곽선 색: 파란색
3. 비활성화 버튼
배경: 회색
글씨: 검은색
글씨 크기: 12px
외곽선 색: 검은색
이렇게 총 세 가지인데, 아무래도 PC에서 사용하는 것도 생각하면, 그에 따라 크기가 커져야 하기 때문에 width와 height 값을 받아와야겠다고 생각했고, 버튼 태그의 타입도 설정해주어야 하고, 위에 작성한 것처럼 구분이 되는 배경 색, 글자 색, 글자 크기, 외곽선 색 또한 props로 받아와야겠다고 생각했다. 여러 변수가 많았기 때문에 이런 식으로 받아오는 수밖에 없겠다고 생각했던 것 같다.
그러나 오늘 코치님과 얘기하면서, 공통 컴포넌트의 경우 보통 실제 스타일 값을 넘겨주는 것이 아니라 타입을 미리 지정하고 해당 타입에 따른 스타일을 주는 방식으로 다른 스타일을 적용시킬 수 있다고 하셨다.
디자인 시스템은 디자인 원칙과 규격, 재사용 가능한 UI 패턴과 컴포넌트, 코드를 포괄하는 시스템이다. 단순 스타일 가이드, 패턴 라이브러리 역할만 하는 디자인 시스템도 있고, 브랜드 원칙과 UX 원칙과 이르는 하나의 철학은 구성하는 시스템도 있다. 정해진 디자인 패턴과 컴포넌트를 재사용하여 제품을 구축하고, 개선하는 시간을 단축시켜준다.
디자인 시스템의 장점은 다음과 같다.
1) 일관된 디자인 설계가 가능하다
UI를 표준화하고 화면 간의 일관성을 확보할 수 있다. 주요 화면에서 사용되는 공통 UI 패턴과 주요 컴포넌트를 추출해 정의하고 상세 속성을 규정해 디자이너와 개발자가 정해진 기준에 따라 UI를 설계할 수 있게 한다. 또 UX 면에서 사용자가 일관적이고 차별화된 경험을 할 수 있도록 한다.
2) 효율적인 작업이 가능하다
입력 창, 버튼 등의 UI 디자인이 변경되어도 하나씩 찾아서 교체해 줄 필요 없이 쉽고 빠르게 변경할 수 있다.
3) 확장성
다른 서비스를 개발할 때 디자인이 동일하다면, UI 구현에 시간을 쓰지 않고 기능 구현에 집중할 수 있다.
우리 프로젝트는 시간도 없고, 규모가 엄청 큰 것도 아니라서 본격적으로 디자인 시스템 설계를 고려하지 않아도 될 것 같다. 그러나 개념을 알고 나중에 만약 혼자서 사이드 프로젝트를 하게 된다면 한 번 설계해보고 싶다.
아래는 컴포넌트 별로 실제 사용 예시를 찾아볼 수 있는 사이트이다.
Home
The Component Gallery is a collection of components from the best Design Systems.
component.gallery
#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript
