재사용성을 높이는 디자인과 컴포넌트에 대한 이야기

최근 내 개발 지식뿐만 아니라 디자인 지식까지 점프한 경험에 대해 공유하고자 한다.

 

웹 개발 팀 프로젝트

 

최근 거의 한 달 동안 진행한 웹사이트 개발 프로젝트에 참여했다. 디자이너가 없어 이제 막 개발 공부를 시작한 프론트 개발자 2명이서 머리를 싸맸다. 디자인을 어떻게 하면 좋을까

 

여러 가지 의견을 나누면서 우리는 얼마나 어떻게 예쁘게 만들까를 뒤로하고 한 가지 키워드에 대해 먼저 생각해 봤다.

 

재사용성 높은 디자인

 

예전에 유튜브 EO 채널에서 토스 디자인 시스템에 대한 영상을 본 적이 있는데, 비슷한 디자인과 패턴을 묶어 시스템화함으로 재사용성과 생산성을 높였다는 이야기였다. 퍽 감명적이었는지 한동안 토스 디자인 관련 블로그를 찾아 헤맸었던 기억이다. 그래서 이번 프로젝트에는 재사용성 높은 디자인을 고려해 보기로 했다. 그동안 리액트의 장점인 재사용성을 십분 활용하지 못했던 점도 한 몫했다.

 

컴포넌트와 작업의 흔적들

 
 

피그마 컴포넌트 디자인

 

여러 고민 끝에 우리가 시도해 본 것은 props를 사용해 한 가지 디자인데 대해 다양한 state 값을 주어 디자인 재사용성을 높이는 것이었다.

 

이 state란, 피그마 내에서도 존재하는 기능인데, 컴포넌트 디자인을 만들고 properites 옵션을 부여하면 아래와 같이 여러 가지 state를 생성할 수 있다.

 

 

property에 받는 값은 true/false로 boolean 값으로 설정 가능하고 드롭박스로 만들 수도 있다. text property라면 string 값을 입력해도 된다.

 

아래와 같이 피그마에서 property 값을 통해 디자인을 바꿀 수 있다.

 

 

 

 

컴포넌트 디자인 리액트로 이식하기

 

컴포넌트 디자인이 나왔다면 이것을 그대로 리액트 컴포넌트로 만들면 된다. 참고로 우리는 컴포넌트를 아토믹 패턴에 사용되는 단위로 쪼갰다. button, input과 같이 가장 작은 단위인 Atoms부터 하위 컴포넌트를 모두 합친 templates 단위까지 컴포넌트로 제작했다. 

 

 

 

 

위와 동일한 기능을 구현하기 위해 TextArea 폴더 안에 index 파일 하나, style 파일 하나를 생성했다.

왼쪽 파일은 JSX 부분이고 오른쪽 파일은 emotion으로 만든 style 컴포넌트다.

 

 

 

index 파일에는 UI를 그려주는 JSX 부분을 작성한다. style 파일에는 css 속성을 작성한다. 우리는 이 style 컴포넌트를 최대한 활용하기로 했는데, 피그마에 있는 속성을 모두 interface로 만들고 props를 받도록 만들었다.

 

상태 값에 따른 디자인 변경을 모두 props로 받을 수 있도록 만들었다. 참고로 props 타입인 interface를 docs처럼 사용했다. style 부분을 더 자세히 보자면 아래와 같다.

 

 

 

props를 받아 상태를 변경하기 위해 3항 연산자를 정말 많이 사용했는데, 복잡해 보이고 코드 가독성도 많이 떨어져 보이는 흠이 있었다. 하지만 금방 이 코드에 익숙해지더라.

 
 
컴포넌트 작동 테스트 

 

피그마에서 작동한 것과 상당히 유사하다는 것을 알 수 있다. 이런 경우 디자이너와 소통하기가 정말 쉬워진다. 디자이너는 코드에 대한 이해도가 높아지고 개발자는 디자인 이해도가 높아지니 일석이조?

 

어마어마한 양의 props

이렇게 작업하던 중 아쉬웠던 것은 하나의 컴포넌트에 넘겨줘야 할 props가 많아지다 보니 생각보다 코드가 길어졌다. 예를 들어 버튼을 만든다고 하면 아래와 같이 엄청난 양의 props를 넘겨줘야 한다. 

 

 

 

우선은 디자인에서 해결을 했다. 최대한 적은 state를 넘겨줄 수 있도록 디자인 변화를 주었다. 오히려 디자인이 통일성 있고 깔끔해졌다. 문제 해결을 위해 코드만 보며 머리를 싸매는 것도 좋지만 외부 요인인 디자인 수정을 요청하는 것 또한 방법이 아닐까 싶다..ㅎ

 

 

 

개발친화적? 디자인

마케터 시절 피그마로 간단한 광고 콘텐츠는 직접 만들기도 했었다. 그때는 피그마의 기능을 이렇게까지 활용하지 못했었다. 하지만 피그마는 프로토타입 기능이나 컴포넌트, properties, 그 외에 다양한 기능이 있으며 plugin도 활용할 수 있다. 이번에 token, mui plugin도 사용했는데 token으로 디자인 시스템 자동화도 만들고 mui로 애니메이션을 만드는 시도도 했다. 아직 다 알지 못하는 피그마의 기능을 공부한다면 리액트와 접목하여 무궁무진한 생산성을 만들어 낼 수 있을 것 같다.

 

참 많이 배웠고 좁았던 시야가 확 트였던 기회였다.