Figma에서 아토믹 디자인 시스템 (새 탭에서 열림)

littleBits 팀은 약 6개월 안에 iOS·Android용 모바일·태블릿 앱 네 개를 출시해야 했고, 이를 위해 Figma에서 Atomic Design 기반의 디자인 시스템을 구축했다. 핵심은 재사용 빈도와 실제 개발 구조를 기준으로 원자·컴포넌트를 정의하고, 의미론적 색상과 텍스트 스타일을 조합해 유연성을 확보하는 것이었다. 결과적으로 Figma의 컴포넌트 구조가 React Native 컴포넌트와 자연스럽게 대응했고, 이후 반응형 레이아웃 템플릿으로 확장할 수 있는 기반이 마련됐다.

원자 수준의 디자인 토큰

• 텍스트 스타일과 색상은 Figma Styles로 정의했다.
• 아이콘은 외부 아이콘 세트를 가져온 뒤 Figma 컴포넌트로 변환했다.
• 색상 이름은 Bootstrap의 명명 방식을 참고하되, 테마 변경을 고려해 의미론적으로 지정했다.
  • 예: bg-light는 배경용 색상
  • 예: ui-dark는 기본 전경 요소용 색상
• 기본 UI·그레이스케일 색상 외에 브랜드 색상, 배경, 오버레이, 외곽선용 색상 팔레트를 추가했다.
• 색상값 자체보다 사용 목적을 이름에 반영하면 전체 디자인에서 색상을 일괄 수정하기 쉽고, 변경으로 인한 오류도 줄일 수 있다.

복잡한 계층 대신 ‘컴포넌트’로 단순화

• Atomic Design의 ‘분자’와 ‘유기체’가 여러 템플릿에서 반복 사용되는 경우가 많지 않다는 점을 발견했다.
• 따라서 해당 계층을 세분화하지 않고 모두 Components로 통합했다.
• 이 구조는 다음과 같은 React Native 컴포넌트 구조와도 잘 맞았다.
  • 카드
  • 툴팁
  • 버튼
  • 기타 반복 UI 요소
• 이론적인 Atomic Design 분류보다 실제 재사용 패턴과 개발 구조에 맞춘 단순한 분류를 선택한 것이다.

스타일 조합으로 불필요한 컴포넌트 줄이기

• 텍스트 스타일과 색상 스와치를 자유롭게 조합할 수 있으므로, 색상·텍스트 스타일 조합마다 별도의 컴포넌트를 만들지 않았다.
• 대신 스타일 가이드를 제공하고, 실제 템플릿에서 필요한 조합을 직접 적용했다.
• 하나의 텍스트 상자 안에서도 여러 텍스트 스타일을 섞을 수 있게 해 가변적인 문구 길이에 대응했다.
• Figma Styles 도입으로 컴포넌트 내부의 레이어 구조가 단순해졌고, 문서 사용성과 성능도 개선됐다.

버튼은 중첩 컴포넌트로 관리

• 버튼은 디자인에서 반복적으로 사용되고, 외곽선 등 중앙 관리가 어려운 속성을 포함하므로 별도의 중첩 컴포넌트로 만들었다.
• 주요 버튼 유형을 다음과 같이 분리했다.
  • Primary
  • Secondary
  • Tertiary
• 반복 사용될 가능성이 높은 특수 버튼도 별도 컴포넌트로 정의했다.
• 모든 요소를 무조건 조합형 스타일로 처리하지 않고, 반복성과 관리 필요성이 높은 UI만 컴포넌트화한 것이 특징이다.

디자인 시스템과 개발 시스템의 연결

• Figma에서 정의한 컴포넌트 체계가 React Native에서 구현할 컴포넌트와 직접 대응하도록 설계됐다.
• 디자인과 코드 사이의 구조적 차이를 줄여 협업과 구현을 쉽게 만들었다.
• 완성된 컴포넌트 기반은 이후 모바일·태블릿 화면을 위한 반응형 레이아웃 템플릿 구축의 출발점이 됐다.

실무에서는 Atomic Design의 계층을 그대로 적용하기보다, 실제 재사용 빈도와 개발 컴포넌트 구조를 기준으로 단순화하는 것이 효과적이다. 색상과 텍스트는 의미론적 스타일로 관리하고, 반복성과 변경 가능성이 높은 요소만 컴포넌트로 만들면 유지보수성과 확장성을 함께 확보할 수 있다.