# loplat Design System

## 개요

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

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

![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2FVDfePE7tw4hAWEPSgu4P%2F%E1%84%8C%E1%85%A1%E1%84%89%E1%85%A1%E1%86%AB%2010.png?alt=media\&token=21faf1ee-c7eb-4a79-8947-4e1977e56bda)

## 세부 내용

* 기간 : 2021.09 - 2021.11
* Font 및 Icon 기준 정의
* Button, Input, Dropbox 등 통일성 있는 디자인 제작
* loplat에 맞는 색상 시스템 정의

## 담당 파트

### 다양한 스타일의 폰트 정의

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

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

![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2F2ACZuODx7xNpArbbIzC7%2Fimage.png?alt=media\&token=61184da8-55f2-4eb6-a09f-c49520096514)

### Grid 시스템 도입

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

![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2FLS2r1o75jlI1ggK40Kq1%2Fimage.png?alt=media\&token=ecfce5e5-d0a9-4b42-8667-21aaf2bd1f96)

### Color Guide 제시

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

![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2FVgnreJIN5Kca9u4XuRdW%2Fimage.png?alt=media\&token=e3f2fc19-fef0-4505-9116-57ebad45f85d)

### 버튼 정

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

![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2FJIoL1NexYcEJ3TgVqCBb%2Fimage.png?alt=media\&token=f7403ce3-ab6a-4b67-bba5-35d5fdb6ef01)

### 상황별 선택사항 디자

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

![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2Fb0XfjytCgHdYpCELvnYA%2Fimage.png?alt=media\&token=c78e2cb9-5cf8-4a9f-a464-f69ec8880081)

![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2FuA23HH1C2GaLsFKQxVFr%2Fimage.png?alt=media\&token=81d1785d-5ac3-4bf4-8a18-f2a791b4651c)

![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2FvTnHfmtiwEEwRcceAGFo%2Fimage.png?alt=media\&token=f5b0ca69-4e4f-4da2-868c-dd145ecff304)

![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2FZYkCRUx0VjJKp790gbe5%2Fimage.png?alt=media\&token=d7323b12-ac73-45eb-88ca-97736493dc86)

![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2FHpXnndUUinjxqrylOQqP%2Fimage.png?alt=media\&token=219ed127-70da-477d-a7e6-4e5b36858288)

자세한 디자인은 [로플랫 스토리북](https://loplat-ui.web.app/?path=/story/welcome--welcome)을 통해 확인해 보실 수 있습니다.

## 어려웠던 점

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

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

## 정리

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

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