경쟁사 UX 분석, 이제는 AI와 Figma 플러그인

수집을 넘어서, 구조화하고 비교하는 디자이너의 리서치 워크플로우

by 에스에프써티포

서비스를 새로 만들거나 기존 제품을 리디자인할 때, 우리는 자연스럽게 ‘다른 서비스는 어떻게 했을까?’를

먼저 찾아보게 됩니다.

하지만 단순히 화면을 캡처해서 늘어놓는 방식만으로는 실질적인 인사이트를 얻기 어렵습니다.

이제는 경쟁사의 UI를 구조화하고, 흐름을 시각화하며,
그 안에 숨은 UX 전략까지 추출해내는 능력이 필요합니다.

그리고 이 작업을 도와줄 AI 기반 도구와 플러그인들이 이미 실무에 등장하고 있습니다.


시작은 ‘분해 가능한 화면 모음’부터


경쟁사 분석을 제대로 하려면, 먼저 화면 단위로 잘 정리된 자료가 필요합니다.
앱을 설치하거나 웹버전에 접속해 주요 화면(온보딩, 홈, 상세페이지 등)을 캡처하거나,
Bunzee.ai 같은 도구를 활용해 비슷한 앱들을 한 번에 수집할 수도 있습니다.

chrome-capture-2025-7-31.png



그다음은 이 이미지들을 Figma로 가져와 정리하는 단계입니다.
URL만 입력하면 실시간으로 웹 UI를 Figma에 프레임 형태로 복사해주는

html.to.design 플러그인을 활용하면 작업 속도가 훨씬 빨라집니다.

단순히 보기만 하지 말고, 구조를 ‘언어화’하자


이제 가져온 화면들을 눈으로만 보기보다,
기능 단위로 분해하고 구조를 설명하는 작업이 필요합니다.

Figma에는 이걸 도와주는 다양한 AI 플러그인이 있습니다.

예를 들어

Diagram

은 선택한 UI 영역을 분석해서,

“이 부분은 내비게이션 바이며, Home / Explore / Profile 탭을 포함함”처럼

언어로 정리해줍니다.

Magician

같은 플러그인은 CTA 버튼의 목적을 추론하거나, 더 나은 문구를 제안하기도 하죠.


이 과정을 거치면, 우리가 이전까지 ‘감각적으로’ 봤던 UI 흐름이
기능 구조와 사용자의 행동 목적 중심으로 정리되기 시작합니다.



화면 간 연결은 직접, 혹은 자동화로 정리하자


단절된 화면을 그대로 두면 흐름 파악이 어렵습니다.

Autoflow

같은 Figma 플러그인을 활용하면, 클릭 가능한 영역들(예: 버튼, 탭)을 선으로 연결해

사용자 여정을 시각적으로 정리할 수 있습니다.


단순히 흐름만 표시하는 게 아니라, 동일한 UI 패턴이 반복되는 구간이나
CTA가 어떤 페이지에 집중되어 있는지도 함께 파악하면 더욱 좋습니다.


스크린샷 2025-07-22 09.30.17-1753144238282.png


마지막 정리는 Notion + ChatGPT 조합으로


정리한 Figma 프로젝트를 기반으로
Notion에 정리한 뒤 ChatGPT에게 요약을 요청하는 방식도 매우 유용합니다.


예를 들어 다음과 같은 질문을 던질 수 있죠.

이 앱의 회원가입 흐름에서 UX적으로 특이한 점은?

홈 화면은 어떻게 사용자 몰입을 유도하고 있는가?

CTA 버튼의 심리 설계는 어떤 방식으로 구성됐나?


ChatGPT가 똑똑한 정답을 주는 건 아니지만,
요약된 내용을 디자이너의 언어로 다시 정리하는 과정이 실제 리디자인이나 벤치마킹에서 큰 자산이 됩니다.


분석 이후의 정리는 ‘템플릿화’가 답이다


분석을 마무리할 때는 화면 캡처 + 구조 설명 + 기능 흐름 + 차용 여부를
Notion이나 Slides 형태로 정리하는 것이 좋습니다.


예를 들어 온보딩 흐름은 간결하고, 추천 탭이 포함된 구조라면
“우리 제품에서도 차용 예정”이라는 메모와 함께 저장합니다.


홈 피드가 카드형 UI에 탭 전환이 많다면,
“부분 차용 + 영상 콘텐츠 우선 구성 여부 검토” 식으로 정리할 수 있죠.


이렇게 정리된 결과물은 PM이나 개발자와 공유할 때 기획안보다 훨씬 직관적인 대화 자료가 됩니다.



디자이너의 리서치 능력은 툴에서 나온다


이제 경쟁사 UX 분석은 단순한 참고자료 수집이 아닙니다.
AI와 플러그인을 활용하면 구조를 읽고, 목적을 해석하고, 흐름을 비교하는 수준까지 가능합니다.


그리고 이 모든 흐름을 주도하는 사람은 디자이너여야 합니다.

디자이너가 기획자보다 먼저 사용자 흐름을 파악하고, 개발자보다 먼저 기능 흐름을 분해할 수 있다면,

AI 시대의 리드 디자이너로서 훨씬 더 큰 임팩트를 만들 수 있습니다.



더 많은 인사이트를 얻고 싶다면, 렛플을 확인해보세요
https://bit.ly/4nGsEFC

keyword
작가의 이전글AI와 협업하는 디자인 워크플로우 세팅법