항상 무언가를 만들기 시작할때는, 다른 사람이나 마켓 트렌드는 어떤지 찾게 될텐데요

경쟁사 찾기

일단 회사나 팀에서 생각하시는 아이디어를 넣고 , 비슷한 아이디어와 레퍼런스를 찾아보세요

1분안에 전세계 앱들과 비교해서, 비슷한 앱을 찾아냅니다. (무료)

https://bunzee.ai

본격적 분석 시작 전, 먼저 준비할 것들

경쟁사 분석의 핵심은 단순히 ‘캡처해서 보기’가 아니라
기능 단위로 분해하고, 구조를 이해하고, 흐름을 시각화하는 겁니다.

분석을 위해 아래 준비물이 필요해요:

• - 대상 앱 설치 혹은 웹버전 접속

• - 화면별 스크린샷 확보 (핵심 기능 중심)

• * bunzee.ai 에서 이미지를 받을 수 있습니다

• Figma 계정

• 아래 추천 플러그인 설치:

  • html.to.design

  • AI UX Analyzer (예: Diagram, Magician, GPT-Sketch)

  • Wireframe plugin (ex. Wire Box, Autoflow, Anima)

2. [html.to.design]으로 경쟁 웹 앱을 Figma로 가져오기

html.to.design은 웹사이트 또는 웹앱의 URL을 입력하면
해당 페이지의 실제 디자인을 Figma 프레임으로 가져와 줍니다.
모든 HTML 요소를 레이어로 구성해주기 때문에 분석이 매우 수월합니다.

사용 방법

2. - Figma에서 플러그인 실행 → URL 입력

3. - 주요 페이지 (예: 로그인, 홈, 피드, 상세페이지 등) 반복 가져오기

4. - 각 페이지별로 ‘기능 구역’을 라벨링: 상단 바, CTA 버튼, 모달 등

이때 바로 분석을 시작하지 마세요.
먼저 컴포넌트 구조와 UI 히에라키를 보는 데 집중해야 합니다.
디자인 시스템이 있는지, 반복되는 UI 패턴이 있는지를 파악하는 게 중요합니다.

3. [Diagram, Magician]으로 자동 UI 요약 + 분석

이제 불러온 경쟁사 UI를 AI에게 ‘분석’시키는 단계입니다.
Figma의 AI 플러그인들은 실제로 화면을 이해하고, 구조를 언어화해서 설명해 줍니다.

추천 기능

• Diagram AI: 선택한 UI 영역을 구조적으로 분석
  → “이 부분은 Navigation bar로 예상되며, Home/Explore/Profile을 포함함”

• Magician: 선택한 프레임의 목적 예측 및 버튼 명 제안
  → “이 버튼은 CTA이며, 구매 전환을 유도하는 문구가 필요함”

이 플러그인들을 쓰면 눈으로 보기만 했던 UI를, 언어로 정리할 수 있어요.
UX Flow, Intent, CTA 목적 등으로 분류된 결과는 그대로 문서화도 가능하죠.

4. Flow 연결은 [Autoflow] 또는 [Wireframe plugin]으로 시각화

페이지들이 단절되어 있으면, 앱 흐름을 파악하기 어려워요.
따라서 스크린 간 이동 흐름을 연결선으로 표현하면 훨씬 이해가 쉬워집니다.

사용 방법

• 각 페이지의 주요 클릭 영역 (ex. 버튼, 탭) 을 선으로 연결

• [Autoflow]를 쓰면 자동으로 연결선을 생성

• [Wireframe plugin]은 Flow를 텍스트와 함께 간결하게 정리 가능

여기서 중요한 건 ‘기능 흐름’만이 아닙니다.
어떤 페이지에서 어떤 UI 패턴이 반복되는지, CTA가 어디서 유도되는지도 함께 보세요.

5. 경쟁사 분석 요약을 Notion + ChatGPT로 마무리

분석한 내용을 Notion에 붙여넣고, ChatGPT에게 정리시켜볼 수 있습니다.

예시 프롬프트:

“다음 Figma 페이지에서 유의미한 UX 패턴을 정리해줘. 어떤 목적의 흐름이며, 어떤 문제를 해결하려고 했는지 분석해줘.” 

또는 ChatGPT에게 이렇게 요약 요청도 가능합니다:

• - 이 앱의 회원가입 흐름은 다른 앱과 무엇이 다른가?

• - 홈 화면에서 사용자 몰입 유도 방식은 어떻게 설계됐나?

• - 핵심 버튼의 UX 심리 설계 요소는 무엇인가?

ChatGPT가 심층적으로 분석해주지는 않지만,

이렇게 요약받은 뒤 다시 디자이너 본인의 관점에서 재정리하면
실제 리디자인이나 벤치마킹에서 매우 유용한 인사이트로 발전합니다.

6. 나의 마지막 리터칭 및 최종 결과물 형태 예시

동일 기능이 여러 페이지에 걸쳐 반복되면 재사용성 여부 파악
→ 컴포넌트로 재구성 가능한지, 혹은 불필요한 중복인지 분석

• 특정 기능이 어떤 유저 시나리오(Use Case) 하에서 사용되는지 고려
  → ex. “비회원도 접근 가능한가?”, “이 기능은 언제 노출되는가?”

UI 구조 분석 시 체크리스트

• 디자인 시스템 존재 여부
  → 색상, 폰트, 여백 등 스타일 가이드가 일관되는지

• 상태 기반 UI 구성 여부
  → 로딩, 에러, 공백(empty state) 처리 유무 및 방식

• 반응형 고려
  → 모바일 vs 데스크탑에서 UI 구성 차이

• 접근성 요소 포함 여부 (alt text, 명확한 대비, 키보드 내비게이션 등)

분석 기준 템플릿 제안 (예: Notion Template)

경쟁사 분석 이후의 활용 방안

• 자사 기능 매핑표 만들기
  → 경쟁사 주요 기능과 우리 서비스에 대응되는 기능 비교

• 우선순위 도출
  → 차용/개선/제외 등 분류하여 차후 MVP 및 리디자인 우선순위 결정

• PM/개발자와 공유용 정리
  → 기능 흐름 중심 슬라이드화, 기획 회의에 활용

Notion이나 Slides에 다음과 같이 정리하면 최고입니다:

정리: 디자이너의 경쟁사 분석, 이제는 ‘리서처’ 수준으로

예전에는 경쟁사 분석이 ‘보기 좋은 시안 수집’ 수준에 그쳤다면,
지금은 툴과 AI의 도움으로 분해-정리-요약-비교까지 가능해졌습니다.

그리고 이 작업을 주도하는 건 디자이너입니다.

기획자보다 먼저 흐름을 파악하고, 개발자보다 앞서 기능을 구조화할 수 있다면
AI 시대의 ‘리드 디자이너’로서 훨씬 더 큰 임팩트를 만들 수 있어요.