Figma Tip | Ghost Plugin - 스켈레톤 UI 만들어주는 피그마 플러그인 추천
디자인 작업을 하다 보면 목업이나 로딩 상태를 표현해야 할 때가 자주 있습니다. 특히 서비스 초기 화면이나 네트워크 지연 상황을 대비한 스켈레톤 UI는 사용자에게 안정감을 주는 요소로 필수적으로 고려되어야 합니다.
저도 초기에 이런 화면을 일일이 그리면서 "이 작업을 더 빠르게 처리할 수는 없을까?" 고민한 적이 많은데요.
오늘 소개할 플러그인 Ghost는 이 작업을 단숨에 해결해주는 도구입니다.
Ghost는 기존 UI layout은 그대로 유지한 채, 콘텐츠만 스켈레톤 형태로 깔끔하게 변환해줍니다. 특히 Figma에서 작업하는 디자이너라면 바로 실무에 적용할 수 있는 강력한 도구입니다.
Ghost 플러그인 설치 방법
Step 1: Figma 홈 → Templates and tools → From Community에 진입합니다.
Step 2: 검색창에 Ghost를 입력한 뒤 Run버튼을 클릭해 설치합니다.
플러그인 설치가 완료되고나면, 스켈레톤 ui의 생성 컬러와 방식을 선택하면 됩니다.
Step 1: 변환하고 싶은 프레임 또는 요소를 선택합니다. 이때 서택한 영역 안에 포함된 모든 요소가 변환 대상이 됩니다.
Step 2: Ghost 플러그인을 실행한 후, 원하는 색상(Ghost color)과 스타일(Solid 또는 Linear Gradient)을 선택합니다.
이렇게 하면 실시간으로 스켈레톤 UI가 완성됩니다.
Ghost 플러그인 사용 팁!!
Ghost는 선택한 프레임 전체를 감지해서 변환하기 때문에, 불필요한 프레임 배경이나 등이 날아갈 수 있습니다.
따라서 프레임이 아닌 내부 요소만 개별 선택해서 변환하는 것이 깔끔한 결과를 만드는 핵심입니다.
이런 방식으로 작업하면 불필요한 보더, 배경, 그림자 등이 제거되고, 스켈레톤 상태로써 꼭 필요한 텍스트/버튼/그래프 등 핵심 UI 요소만 남게 됩니다.
위의 이미지처럼 Frame 전체를 선택 후 Ghost 플러그인을 돌리면 이렇게 라인은 다 사라지고 버튼 위에 불필요한 요소가 생성됩니다.
그럴때는 이렇게 특정 요소만 선택한 후에 Ghost 플러그인으로 전환하면 오른쪽 이미지 처럼 정확히 해당 요소만 변환됩니다.
또 compoents인 상태보다는 autolayout상태일 때 변환하는게 더 적용이 잘되기 때문에 필요하면 components를 autolayout으로 변환해서 적용하는 것을 추천드립니다.
위의 이미지처럼 frame 자체를 선택해 변환한 이미지와 요소들을 선택해서 변환한 이미지를 비교해보면 명확한 차이를 볼 수 있습니다.
Ghost 플러그인은 단순히 디자인을 변환해주는 도구를 넘어서, 로딩 상태의 사용자 경험까지 고려한 디자인 설계를 도와줍니다.
기존 레이아웃을 유지하면서 로딩 UI를 자동으로 구성해주기 때문에 프로토타이핑, 개발 전달용 디자인, UX 시나리오 설계에도 효과적입니다.
이런 툴 하나만 잘 써도 실무 속도가 훨씬 빨라질 수 있으니, 꼭 한 번 써보시길 추천드립니다.