loplat Design System

로플랫만의 디자인 시스템을 구축하기 위한 프로젝트를 진행했습니다.

개요

개발팀과 협업을 통해 기존에 있던 프로덕트를 기반으로 새로운 UI library system을 구축했습니다.

개발 측면과 디자인적인 측면에 많은 차이가 있어 서로 간의 협의를 통해 더 나은 방향으로 나아갈 수 있도록 노력했습니다.

로플랫의 솔루션에서 사용하는 다양한 폰트에 대한 사용방식에 대해 정의하였습니다.

디자인을 할 때 사용하는 px단위를 배제하고, 개발을 할 때 좀 더 유연하게 사용하기 위하여 rem단위를 사용하였습니다.

그리드 시스템을 도입하여 웹페이지를 제작할 때, 좀 더 빠르게 개발과 디자인을 할 수 있도록 하였습니다.

색상에 이름을 지정하여 개발과 디자인을 빠르게 진행할 수 있도록 자주 사용되거나 사용하고 있는 색상을 정의하였습니다.

prop을 작성하여 개발할 때 좀 더 유연하게 반응할 수 있도록 제작하였으며, 다양한 환경에서 사용할 수 있도록 디자인하였습니다.

다양한 선택지를 제시하여 상황에 맞게 사용할 수 있습니다.

자세한 디자인은 로플랫 스토리북을 통해 확인해 보실 수 있습니다.

다양한 가능성을 열어두고 작업을 해야 했기에 방향성에 대해 잡기 어려웠고, 기존에 사용하던 디자인을 고려해가며 만들어야 했습니다.

입사 초기에 제작하면서 시스템에 대해 많은 걸 알지 못한 상태로 디자인하다 보니 놓치게 되는 부분이 많았고, 디자인적으로는 만들어져있지만 구현되지 못한 부분들이 있어 아쉬움이 남습니다.

타 회사에 다녔을 때도 항상 시스템을 구축하고 싶다는 욕심은 있었지만, 매번 할 기회가 없었는데, 로플랫에 입사하여 디자인만을 위한 정의만이 아닌 개발을 좀 더 쉽고 빠르게 만들 수 있는 라이브러리를 함께 만들 수 있어서 좋았습니다.

그리고 개발자들과 의견을 모으고 조율하며 협업할 수 있는 과정이 좋았습니다.

Last updated 3 years ago