쏘카의 디자인 시스템인 SOCAR FRAM (UI 디자인 시스템)
쏘카의 디자인 시스템인 SOCAR FRAME은 일관된 사용자 경험을 제공하고, 디자인과 개발 간의 효율적인 협업을 위해 구축된 체계적인 시스템입니다. 이 시스템은 컬러 시스템과 컴포넌트 구조를 중심으로 구성되어 있으며, 특히 다크 모드 대응에 중점을 두고 있습니다.
🎨 컬러 시스템: 베이직 & 시멘틱 컬러
쏘카는 기존의 단순한 명도 기반 컬러 시스템에서 벗어나, 베이직 컬러와 시멘틱 컬러로 구성된 새로운 컬러 시스템을 도입했습니다.
- 베이직 컬러: 명도나 기능에 따라 정의된 컬러 팔레트로, 'tint'와 'grey'로 구분되며, 각 컬러는 최대 8단계의 명도로 세분화되어 있습니다.
- 시멘틱 컬러: UI 요소의 목적과 사용 맥락에 따라 네이밍된 컬러로, 예를 들어 'background_base', 'text_primary' 등이 있습니다. 이러한 시멘틱 컬러는 라이트 모드와 다크 모드에서 각각 다른 베이직 컬러를 참조하여, 모드 전환 시에도 일관된 사용자 경험을 제공합니다.
🧩 컴포넌트 구조: Origin & Option
컴포넌트는 Origin(고정 속성)과 Option(가변 속성)으로 나뉘어 설계되었습니다.
- Origin: 컴포넌트의 고유한 형태와 상태를 정의하는 속성으로, 예를 들어 버튼의 높이, 텍스트 스타일 등이 해당됩니다.
- Option: 테마나 상황에 따라 변경 가능한 속성으로, 주로 컬러와 관련되어 있습니다. 디자이너는 스케치에서 Symbol Overrides를 활용하여 Option 값을 수정하고, 개발자는 개발 환경에서 미리 설정된 Option 값을 쉽게 수정할 수 있도록 구성되어 있습니다.
🌙 다크 모드 대응
쏘카는 다크 모드 대응을 위해 컬러 시스템을 재구축 하였습니다. 다크 모드에서는 레이어의 깊이를 표현하기 위해 상단 레이어일수록 밝은 색을 적용하며, 배경색으로는 눈의 피로를 덜기 위해 짙은 회색(#171B1C)을 선택하였습니다. 또한, 시멘틱 컬러 시스템을 도입하여 라이트 모드와 다크 모드 간의 1:1 컬러 매핑이 가능하도록 하였습니다.쏘카의 디자인 시스템은 이러한 구조를 통해 디자인과 개발 간의 효율적인 협업을 가능하게 하며, 다양한 상황에 신속하게 대응할 수 있는 유연성을 제공합니다.
🧩 SOCAR FRAME의 주요 컴포넌트 사례
1. 버튼(Button) 컴포넌트
- Origin: 버튼의 높이, 타이포그래피, 패딩 등 고정된 속성.
- Option: 컬러, 아이콘 유무, 상태(활성/비활성) 등 가변 속성.
- 특징: 다크 모드에서도 시멘틱 컬러 시스템을 활용하여 일관된 디자인 유지.
2. 입력 필드(Input Field)
- Origin: 입력 필드의 높이, 테두리 곡률, 기본 폰트 스타일 등.
- Option: 포커스 시 테두리 색상, 오류 메시지 표시 여부 등.
- 특징: 사용자 인터랙션에 따른 상태 변화(포커스, 오류 등)를 명확하게 표현.
3. 모달(Modal) 컴포넌트
- Origin: 모달의 기본 구조, 헤더와 바디의 레이아웃 등.
- Option: 배경 오버레이 색상, 닫기 버튼의 위치와 스타일 등.
- 특징: 다양한 콘텐츠 유형(텍스트, 이미지 등)에 대응 가능한 유연한 구조.
