[아티클 프로젝트 034] [SOCAR FRAME 만들기 #3] 컴포넌트, 제대로 만들어 쉽게 쓰자! (1탄)

[SOCAR FRAME 만들기 #3] 컴포넌트, 제대로 만들어 쉽게 쓰자! (1탄)

 

쏘카 컴포넌트 정의 사이트

 

기존방식의 문제점때문에 컴포넌트 개발에 대한 논의 시작

디자이너끼리는 UI스타일 가이드 문서로 최소한의 규칙 공유

하지만 개발자는 기존 코드 확인이 가능할 경우 재사용, 그렇지 않을 경우 다시 개발

 

 

디자인 시스템 구축

• 네이밍 통일

• 컴포넌트 용어, 네이밍 통일

• 네이밍 룰 정립

  • 무슨_무슨_Button

  • 실제 형태(Size, Line)를 기준

  • 약어 사용 금지, 풀네임으로 명시

쏘카의 컴포넌트 네이밍 룰

 

테마

• 구성된 컬러가 다를 경우

쏘카의 테마 네이밍 룰

 

고정속성, 가변속성 개념

• 사이즈, 텍스트 스타일

쏘카의 고정속성, 가변속성 예시

 

가변속성

• 테마에 따라 달라지는 속성

• 색상

쏘카의 가변속성 예시

 

각자의 영역에서 가변속성을 컨트롤 하기 쉽게 세팅해두고 사용

 

컬러별 컴포넌트 생성

• 아쉬운 점이 됨
• 컴포넌트 수가 컬러 수만큼 증가

 

 

2탄이 나오면 또 읽어야지..

---

[SOCAR FRAME 만들기 #3] 컴포넌트, 제대로 만들어 쉽게 쓰자! (1탄)

https://tech.socarcorp.kr/design/2020/07/31/component-01.html