로플랫 디자인 시스템, Loplat UI

사내 프로덕트의 디자인 통일성 확보와 개발 생산성 향상을 위한 사내 디자인시스템 프로젝트입니다.

프로젝트 리더로서 구조 설계 및 배포환경 셋팅과 핵심 컴포넌트 제작을 맡았습니다.

기간

2021년 9월, 4주

기술스택

React, Typescript, React-Testing-Library, Rollup, ESLint, Prettier, storybook, gcp-artifacts-registry

사내평가

• '멋들어지게 잘 만들어주셨습니다. 다양한 상황을 안배한 상태로 개발하신걸 보고 놀랬다'는 평가를 받았습니다.
• '실제 프로덕트인 loplat X mobile, 로플랫 홈페이지에 유연하면서도 통일성있는 UI를 구현할 수 있었고, 개발기간도 단축되었다'는 평가를 받았습니다.

작업내용

Core, Component

• Typography, Grid System, Button, Toast, RadioButton, Icon, Help, Badge, Input 등을 구현하였습니다.
  • 시맨틱 태그를 준수하였습니다.
  • Tuple Type으로 다양한 스타일 값을 안정적으로 관리할 수 있습니다.
• 특히 svg 포맷의 파일들을 svgr (opens in a new tab)을 이용하여 쉽게 컴포넌트로 generate할 수 있도록 하였습니다.
  • 더불어 export, storybook 관련 코드도 자동으로 생성하게 하여 개발 편의성을 향상시켰습니다.

Test Code 도입

• Jest 기반의 React-Testing-Library를 도입함으로써 컴포넌트의 무결성과 디자이너의 의도가 제대로 반영되었음을 확보할 수 있었습니다.

디자이너와의 커뮤니케이션

• Bitbucket pipeline(yml)을 통해 commit 시에 자동으로 storybook이 빌드 및 배포되고, 변경점을 슬랙 채널에 알려주는 봇을 제작하였습니다. 이로인해 디자이너와 개발자 간 소통이 원할해질 수 있었습니다.