컴포넌트 코어 시스템 알아보기

구름·2024년 10월 6일
2
post-thumbnail

컴포넌트 코어 시스템이란?

  • 컴포넌트 시스템의 제작 기준으로, 각 컴포넌트를 정의하고 텍스트와 함께 정리한 문서
  • 모든 내용은 예시 이미지와 함께 기재한다.

1️⃣ Size

xs sm md lg xl 총 5가지 기준 설정

  • 각 컴포넌트를 세트로 사용했을 때 Height 값의 통일성 유지 목적
    ⭐️ 컴포넌트는 Height를 기준으로 제작할 것을 권장

2️⃣ Style

Fill : 컴포넌트의 Fill 및 Border 값

  • border width, style을 함께 기재한다.

Radius : 컴포넌트 모서리 반경 값

Box Shadow : Shadow 값

  • x/y 좌표, blur 값, rgba(또는 HEX코드와 Opacity값)을 함께 기재한다.
  • layer 단계별로 구분한다.

3️⃣ Icon Component Size

Size : 아이콘 크기

  • width/height px값을 기재한다.

Touch Size : 터치 영역을 포함한 크기

  • 마찬가지로 width/height px값을 기재한다.

4️⃣ Component Container

✅ 기재사항

  • 아이콘의 정렬 위치로 구분
  • 요소 간 Padding 값


5️⃣ UI Component

✅ 기재사항

  • 컴포넌트 종류(button, input 등)로 구분
  • 컴포넌트 size
  • Height, FontSize, Padding


6️⃣ UI Component Interaction

UseCase별 액션에 대한 디자인에 대해 서술한다.

✅ 기재사항

  • UseCase로 구분
  • 디자인 요소 값
    Font Color Border Color Background Color Box Shadow
  • 디자인 의도 및 기대효과


7️⃣ Help Text

Text Field 하단에 노출되는 문구에 대해 서술한다.

✅ 기재사항

  • FontSize
  • Margin 위치 및 값


컴포넌트 코어 시스템의 필요성

1. UI의 일관성 유지

  • 같은 규칙으로 컴포넌트 코어 시스템을 구축하면, 화면 크기별 & UI 전반의 일관성을 유지할 수 있다.

2. 다른 부서와의 협업 용이

  • 특히 UseCase별 인터랙션 정리는 개발자에게 용이하다.

3. 신규 디자이너에게 가이드 제공

  • 디자인 의도와 규칙이 기재되어 있어 신규 디자이너가 적응하기 쉽다.
  • 클라이언트에서 추후 디벨롭할 것을 고려하여 가이드를 넘겨주어야 한다.

💬 참고문서
https://www.remain.co.kr/page/designsystem/component-core.php

profile
업계 1위가 되고싶은 디자이너

0개의 댓글

관련 채용 정보