GS리테일 Tech 블로그

고객 생활의 가치를 향상시키는 사람들의 이야기

Design

디자인 시스템을 활용하여 기간계 웹화면 개발 생산성 높이기

DarionKim 2021. 11. 15. 17:39

안녕하세요.

저는 현재 GS 리테일 주문 Product팀에서 주문/결제 개발운영 업무를 담당하고 있는 김헌기(Darion) 입니다.

 

개발자가 웹 화면을 개발할 때 디자인을 쉽게 적용하기 위해

함께하는 멤버 분들과 기간계 디자인 시스템이란 것을 만들어 보게 되었습니다.

(임광규 K, 김석중 SJ, 이민기 Miguel, 조영훈 Joe, 김재성 Eren)

 

기간계 디자인 시스템이 왜 필요했는지 무엇이 좋았는지 앞으로 어떻게 사용하면 좋은지 저희 고군분투기를 통해 이야기를 풀어 보겠습니다.


 기간계 디자인 시스템은 왜 필요했는가?

개발자가 화면을 개발할 때 가장 어려운 부분이 버튼이나 입력 필드 같이 화면을 구성하는 요소의 넓이와 높이를 맞추거나 정렬해야 되는 경우 디자인을 준수하게 처리하는 부분이라 생각을 합니다.

 

https://blog.kakaocdn.net/dn/Ui5FY/btqHopL9rAB/x7Ztm9KzIQfGfmyiwWbZyk/img.gif

 

디자인 시안이 나와 있어도 이를 똑같이 맞추기가 여간 힘들다는 것은 이미 경험해보신 분들은 아실 것입니다.

 

이미 사내 디자인 직무에서는 figmazeplin 같은 디자인 협업 툴을 활용하여 컴포넌트 기반으로 재사용되어 적용되는 것을 어깨너머로 구경하고 있었는데요.

https://www.unisa.edu.au/contentassets/f53cceaf58e64ecf9fe3174ea83db880/lego_web.jpg

 

디자이너분이 컴포넌트를 조합하여 디자인 시안을 구성할 때마다 참 효율적인 방식이구나 하는 생각을 했습니다.

 

zeplin 디자인 시안 1

그래서 개발 직무에서도 이미 다 만들어진 컴포넌트를 재활용하여 붙이기만 할 수 있다면 생산성이 좋아질 것이란 막연한 생각하기 시작했습니다.

 

그러던 중에 기간계 화면 개발에 컴포넌트로 구성하여 재활용할 수 있는 React라는 자바스크립트 라이브러리를 도입하게 되었고 

자주 사용되는 기능/디자인들을 Component/API로 제공하는 Material-UI 도 함께 적용하여, React로 개발을 할 때 다양한 UI를 쉽게 만들 수 있었습니다.

Material-UI는 기능적인 Ui를 제공해 주면서도 내 프로젝트에 맞게 커스터마이징 할 수 있다는 게 굉장히 매력적입니다.

 

Material-UI를 활용하여 매번 1회성 개발만 하다가 UI 구성 요소 및 페이지를 별도로 구축하는 오픈 소스 도구인 Storybook을 접하게 되었고 UI 개발, 테스트 및 설명서 간소화를 적용하게 되었습니다.

* Storybook 설치 및 패키지를 빌드하는 Rollup, Private NPM Registry 관리는 별도의 콘텐츠로 공유드리겠습니다.

 

기간계 디자인 시스템은 gui-core(GS UI Core)라는 React + Material-UI 기반의 라이브러리를

개발자가 디자인에 대해 고민하게 하지 않고 컴포넌트를 조립하면서 웹 화면을 개발할 수 있는 UI 개발 환경이며 동시에 UI 컴포넌트 플레이그라운드라고 할 수 있습니다.

기존방식 vs 개선방식
코드 적용 예제


 기간계 디자인 시스템 철학은?

작은 요소를 재료로 삼아 더 큰 것으로 조합하고 다시 이를 재료로 삼아 더 큰 것으로 조합해 보자는 사상으로 접근하고 있습니다.

 

기간계 디자인 시스템은 크게 엘리먼트(Element) < 섹션(Section) < 템플릿(Template)의 3가지 개념으로 이야기할 수 있습니다.

 

1. 엘리먼트 (Element)

가장 작은 단위의 개념이며 Material-UI 컴포넌트에 기능적인 속성을 추가하여 랩핑 하여 구성하였습니다.

Input

텍스트를 입력받는 Input을 예로 들어보겠습니다.

Material-UI의 Input을 그대로 사용하는 것이 아니라 저희 환경에서 자주 사용하는 것들을 모아서 기능으로 추가하고 속성으로 제어할 수 있게 하였습니다.

Input 엘리먼트 코드

모든 엘리먼트는 별도의 코딩이 없이 속성으로 제어할 수 있게 노출되어 있습니다.

Input Element 속성 예시

디자인이 적용된 Input 엘리먼트에서는 Size, Icon Unit, Icon Buttion, Reaonly Diabled의 기능을 쉽게 사용할 수 있습니다.

Input Element 기능 예시

2. 섹션 (Section)

만들어 놓은 엘리먼트를 조합하여 재활용하는 단위가 섹션입니다.

 

가장 활발하게 조합되어 재활용되는 단위라 생각합니다.

 

참고로 모듈(Module)이라는 개념도 있는데요.

 

섹션은 디자인만 적용되어 있어서 API 호출 같은 로직이 적용되어 있지 않습니다.

 

섹션을 활용하여 API 호출이나 데이터 바인딩 같은 이벤트를 걸어 좀 더 완성도 있게 재활용해보자는 개념이 모듈인데요.

 

환경에 영향을 많이 받아 어떻게 하면 잘 사용할 수 있을까 고민 중입니다.

 

3. 템플릿 (Template)

여러 개의 섹션을 조합하여 하나의 페이지 단위로 사용할 수 있는 단위가 템플릿입니다.

 

기간계 화면 개발을 진행하다 보면 메인 페이지, 조회 페이지, 상세 페이지 등 비슷한 패턴이 나오게 됩니다.

 

이러한 패턴의 템플릿을 미리 만들어 놓으면 재활용하는데 좋은 것 같습니다.

템플릿 예제


 어떠한 시행착오를 겪었는가?

1.scss 에서 Theme 적용 

최근 웹사이트를 접속하면 색 테마를 사용자들이 바로 적용할 수 있는 기능을 제공하는 모습을 많이 보게 됩니다.

 

예전에 직접 이러한 코드를 직접 작성해봤는데 시간이 오래 걸리고 유지보수가 까다로운 문제가 발생하게 되더라고요.

 

Material-UI에서는 Theme을 이용하면 이를 쉽게 구현 가능하다고 해서 접근해보았는데요.

 

적용되는 사이트(Site)gui-core(GS UI Core)라는 라이브러리를 설치하여 활용하는 방식이라 사이트 환경 설정에서 gui-core 설정에 값을 전달하여 주입해야 하기에 어려움이 있었습니다.

 

함께 하는 멤버분이 .scss(Syntactically Awesome Style Sheets)에 대한 경험이 있으셔서 대안으로 접근하여 결과값은 도출하였지만 여전히 유지보수에 대한 어려움이 있었습니다.

(최종적으로 만들어진 결과물을 재정의 해야 되었기 때문에 어려움이 있었습니다.)

이후 Theme 적용을 다시 접근하였고 값을 주입하는 부분을 해결하게 되었습니다.

gui-core에 주입 부분

 


앞으로의 계획은...

1.CodeSandBox 적용

개발자분들에게 샘플 코드를 공유하는데 기존에 show code는 사용해보고 검토하고 선택하기에는 부족한 부분을 느꼈습니다.

Storybook Docs 탭에 온라인 IDE인 CodeSandBox로 대체하여 개발자분들에게 더 나은 경험을 제공하려 합니다.

 

2. 오픈소스 (Open Source) 전환 

Open Source

엔터프라이즈 환경에서 임직원이 사용하는 시스템에 대해 저희와 동일한 고민하고 계신 분들께 오픈소스로 전환하여 경험을 공유하려 합니다.

 

업무 서비스나 관리자 화면에 활용된 사용 경험을 축적하고 있고 사내에 전파하거나 그룹사에 확대해 보려는 준비도 하고 있어 다른 회사의 환경에서도 충분히 도움이 될 것이라 생각합니다.

 

기간계 디자인 시스템은 앞으로도 화면 개발을 어려워하는 개발자분들을 위해 유익하게 확장해 나갈 것입니다. 쭈욱~


참고 자료

[Storybook] https://storybook.js.org/

[React] https://ko.reactjs.org/

[Material Design] https://material.io/design

[Material-UI] https://mui.com/

[Figma] https://www.figma.com/
[Zeplin] https://zeplin.io/

 


김헌기 Darion | 뉴테크본부 > BO Product 부문 > 주문 Product 팀

Backend Office 주문 / 결제 / 마케팅프로모션 / 연계 / 혁신과제 서비스를 담당하고 있습니다.

동료들과 함께 기술 문화 만들기와 낯선 기술자와의 인연의 시작에 관심이 많습니다.