🔗 출처

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

✅ 요약

1. 컴포넌트, 왜 필요한가? (똑같은 UI, 어떻게 재사용하고 있나?

• 디자이너들은 스케치 심볼 기능을 사용해 비교적 편하게 UI를 재사용하고 있다. 하지만 개발자가 다르다면 똑같은 UI도 매번 다시 확인해야 함.
• 개발자는 코드를 비슷하게 쓰거나 새로 개발하면서 불편함이 쌓임.

2. 네이밍 통일

• 명료하게 구분하고 편해야 함 > 버튼을 생성하고 관리하는 방식에 따라 필요한 정보가 달랐던 것.

3. 컴포넌트 네이밍 룰

• 꼭 필요한 정보만 넣어 이름의 길이를 최대한 줄이자 라는 규칙 > 3가지 사이즈와 디자인 타입으로 구분 / 실제 형태를 기준으로 구분 > 약어를 사용하지 않고 버튼 풀네임으로 명시
• 컴포넌트와 테마 : 같은 컴포넌트지만, 구성된 컬러가 다를 때 표기
• 실무에서 활용 방법 : 협업을 할 때 진가를 발휘 > 심볼명에 [카테고리명+/]를 더해서 사용 > 맨 마지막 / 앞 까지는 디자이너만 사용하는 영역, 맨 마지막 / 뒤부터는 개발자가 확인하는 영역으로 지정

4. 컴포넌트, 어떻게 만들어야 편할까? (Origin, Option)

• 개발 환경과 유사한 “Origin(고정 속성)”과 “Option(가변 속성)”이라는 개념을 만듦
  • 고정 속성 : 거의 변하지 않는 그 버튼만의 아이덴티티로, Origin라 정의
  • 가변 속성 : 테마에 따라 달라지는 속성을 Option이라 정의

5. 컴포넌트만을 위한 컬러, 꼭 필요한가?

• 일부 컴포넌트에서 라이트와 다크 모드 컬러가 1:1 매칭이 되지 않는 상황이 발생 > 각 컴포넌트만을 위한 컬러를 생성하는 것
  • 컴포넌트 컬러 정의 : 시멘틱 컬러에 컴포넌트 컬러를 추가 , 다크와 라이트 컬러를 조합
  • 두 개의 컬러를 하나로 : 다크와 라이트 모드에서 다르더라도 하나의 컬러 명을 사용

📌 참고사이트

• 쏘카 프레임 컴포넌트 보러가기

💬 코멘트