디자인 시스템을 위한 로딩 스피너 컴포넌트 제작기

저희는 Figma Makers를 활용해 신규 서비스의 MVP, 그리고 신규 기능의 MVP를 제작하고 있습니다.

최근 Figma Makers에 Library Import 기능이 추가되면서, 여러 개의 서비스를 빠르게 만들어 나가거나 기존 서비스를 고도화할 때 AI를 활용하더라도 결국 디자인 컨벤션이 정립되어 있어야 효율적으로 개발할 수 있다는 점을 다시금 깨닫게 되었습니다.

결국 서비스는 계속 만들어질 것이고, 그 서비스들이 각기 다른 프로젝트가 아니라 하나의 WegglePlus라는 큰 서비스로 연결되기를 기대하기 때문에, 작은 단위라도 하나씩 제대로 만들어가야겠다는 생각이 들었습니다.

저희는 Figma Makers를 활용해 신규 서비스의 MVP, 그리고 신규 기능의 MVP를 제작하고 있습니다.

최근 Figma Makers에 Library Import 기능이 추가되면서, 여러 개의 서비스를 빠르게 만들어 나가거나 기존 서비스를 고도화할 때 AI를 활용하더라도 결국 디자인 컨벤션이 정립되어 있어야 효율적으로 개발할 수 있다는 점을 다시금 깨닫게 되었습니다.

결국 서비스는 계속 만들어질 것이고, 그 서비스들이 각기 다른 프로젝트가 아니라 하나의 WegglePlus라는 큰 서비스로 연결되기를 기대하기 때문에, 작은 단위라도 하나씩 제대로 만들어가야겠다는 생각이 들었습니다.

피그마의 컴포넌트란?

컴포넌트(Component)란 디자인에서 재사용 가능한 기본 단위를 의미합니다. 쉽게 말해 디자인의 템플릿 같은 역할을 합니다. 예를들어 버튼, 카드, 모달, 네이버게이션 바 등을 자주 쓰이는 UI 요소를 한번 컴포넌트로 만들어두면 다른 화면에서도 동일한 디자인과 규칙으로 손쉽게 사용할수 있스빈다.

컴포넌트를 만들기 위해서는 3가지 주요 개념을 알아야 합니다.

1. Master Component
   1. 처음 만든 컴포넌트로 디자인의 기준이 됩니다. 수정하면 이 컴포넌트를 복제한 모든 인스턴스에도 변경이 반영됩니다.
2. Instance
   1. Master Component를 복제한 요소로 일부 속성(텍스트, 색상 등)을 개별적으로 수정할 수 있지만, 전체 구조나 규칙은 원본의 영향을 받습니다.
3. Variant
   1. 같은 종류의 컴포넌트를 여러 상태(기본, 호버, 비활성화 등)으로 묶은 형태입니다. 이를 통해 한 세트로 관리할수 있습니다.

로딩 스피너란?

로딩 스피너(Loadding Spinner)는 시스템이 데이터를 불러오거나 처리하는 동안 사용자에게 작업이 진행중인지 시각적으로 알려주는 상태 표시 요소입니다.

보통 원형이 회전하거나 점이 점점 밝아지는 형태로 표현되며 사용자는 이를 통해 “멈춘 게 아니라 진행 중이구나”라는 피드백을 직관적으로 인식할 수 있습니다.

로딩 스피너는 단순한 애니메이션이지만 사용자 경험 측면에서 매우 중요합니다.

피그마로 로딩 스피너 만들기

• 일단 원형을 만들어야 합니다.
  • 아래 메뉴바에서 Ellipse를 클릭해서 원형을 만듭니다.
  • Shfit를 같이 누르면 높이와 넓이가 같은 사이즈로 만들어집니다.

• 그리고 가운데를 제거해야 합니다. 해당 원을 클릭한 다음 나오는 축을 클릭합니다.

• 그리고 그걸 위로 조금 이동합니다.

• 그 다음에 중심에 있는 것을 클릭해서 왼쪽으로 이동합니다.

• 그다음 오른쪽에서 맨처음 움직였던걸 아래로 내리면서 다시 원형을 만듭니다.

• 그다음에 하나를 복사한뒤에 해당 요소들을 겹치게 둡니다.

 

• 그 다음에 겹치게 둔것에서 위에 있는것에 색깔을 입힙니다.
  • 이때 Gradient를 선택합니다.
    • Grandient란 색상이 한쪽에서 다른 쪽으로 부드럽게 변하는 시각적 효과입니다.
  • Angular를 선택합니다.
    • Angular Grandient란 색이 중심을 기준으로 각도에 따라 회전하며 변화하는 것입니다.

 

• 그다음에 이걸 컴포넌트로 만듭니다. 오른쪽 마우스를 눌러서 Create Component를 선택합니다.

 

• 그 다음에 오른쪽 마우스를 다시 눌러 Main Component 메뉴로가서 Add variant를 3번 누릅니다.

 

• 그러면 총 4개의 원형이 복사되는걸 볼수 있습니다.

 

• 첫번째 원은 다시 회색으로 변경합니다.

• 3번째, 4번재 원은 Grandient의 Start의 위치를 변경합니다.

 

• 이제 애니메이션을 입힙니다. 1번 Varient를 선택하고 Prototype으로 이동하여 Interactions를 추가하고 Tigger는 After Dely, Delay는 1ms, Action은 Change to에 2번째 원 Varient4로 합니다.
  • 이걸 2번 → 3번 / 3번 → 4번 / 4번 → 1번으로 동일하게 적용합니다.

 

• 그러면 이제 아래처럼 애니메이션이 입힌 컴포넌트를 확인할수 있습니다.

 

결론

이번 과정을 통해 디자인 컴포넌트를 직접 만들어보는 경험의 중요성을 다시 한번 느낄 수 있었다.

AI가 디자인을 대신 만들어주는 시대라 하더라도, 디자인의 원리와 구조를 이해하고 직접 만들어보는 과정은 여전히 필수적이다.

앞으로도 WegglePlus에서는 이러한 디자인 컴포넌트 단위의 이해와 구축을 기반으로,

AI와 사람이 함께 빠르고 일관된 방식으로 제품을 만들어 나가는 구조를 계속 발전시켜 나갈 것이다.

즉, “AI가 만들어주는 디자인”이 아니라 “AI가 이해할 수 있는 디자인”을 직접 정의하는 과정이 앞으로의 디자인 작업의 핵심이 될 것이다.

 

About WegglePlus

WegglePlus는 문제를 정의하고, 이를 해결하는 여러 개의 서비스를 설계·개발·운영합니다.
이 블로그는 그 과정에서의 기술적 선택과 시행착오를 공유합니다.

https://weggle-plus.co.kr