멘탈모델 기반 UX 리뷰

About this plugin

## 🎯 핵심 개선 사항

### 1. UX 이론 기반 전문 피드백

8가지 검증된 UX 이론을 기반으로 체계적인 분석 제공:

- **멘탈 모델 (Mental Model)**: 사용자 기대와 UI 흐름 일치도

- **제이콥의 법칙 (Jakob's Law)**: 기존 패턴과의 일관성

- **힉의 법칙 (Hick's Law)**: 선택지와 결정 시간

- **인지 부하 이론 (Cognitive Load Theory)**: 인지적 부담 분석

- **게슈탈트 원칙 (Gestalt Principles)**: 시각적 그룹화

- **정보 향기 (Information Scent)**: 행동 결과 예측 가능성

- **피츠의 법칙 (Fitts's Law)**: 타깃 접근성

- **노먼의 행동 7단계 모델**: 의도-행동-결과 연결

### 2. 구조화된 섹션별 UI

피드백이 3개 섹션으로 명확히 분리:

#### 📚 UX 이론 기반 분석

- 각 이론별로 발견된 문제점과 개선안 제시

- 이론명, 문제점, 개선안이 한눈에 보이는 카드 형식

- 실제 문제가 발견된 이론만 표시

#### 💡 총평

- 전체적인 UX 문제 요약

- 2-3문장으로 핵심 파악

#### 🎯 개선 방향

- 우선순위별 실행 가능한 개선안

- 번호가 매겨진 리스트로 명확한 액션 아이템 제공

### 3. 전문적인 프롬프트 엔지니어링

- System prompt로 UX 이론 전문가 페르소나 설정

- 구조화된 출력 형식 강제 ([UX_THEORY_START] 등 마커 사용)

- 구체적이고 실행 가능한 피드백 요구

## 📊 UI 구조

```

┌────────────────────────────────────┐

│ PASTA UX 자동 리뷰 ⚙️ │

├────────────────────────────────────┤

│ 🟢 API 키 설정됨 │

│ │

│ ┌────────────────────────────────┐ │

│ │ 선택한 프레임 UX 분석하기 │ │

│ └────────────────────────────────┘ │

│ │

│ ✅ 분석이 완료되었습니다! │

│ │

│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │

│ ┃ 📚 UX 이론 기반 분석 ┃ │

│ ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ │

│ ┃ 멘탈 모델 ┃ │

│ ┃ 문제점: ... ┃ │

│ ┃ 개선안: ... ┃ │

│ ┃ ┃ │

│ ┃ 힉의 법칙 ┃ │

│ ┃ 문제점: ... ┃ │

│ ┃ 개선안: ... ┃ │

│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │

│ │

│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │

│ ┃ 💡 총평 ┃ │

│ ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ │

│ ┃ 이 화면의 핵심 UX 문제는... ┃ │

│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │

│ │

│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │

│ ┃ 🎯 개선 방향 ┃ │

│ ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ │

│ ┃ ① 주 행동 버튼의 시각적... ┃ │

│ ┃ ② 선택지를 3개 이하로... ┃ │

│ ┃ ③ 정보 구조를 사용자... ┃ │

│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │

└────────────────────────────────────┘

```

## 🚀 사용 예시

### 입력: Figma Frame

```

Frame: "홈 화면"

├── Text: "환영합니다"

├── Button: "시작하기"

├── Button: "둘러보기"

├── Button: "설정"

├── Button: "프로필"

└── Text: "설명 텍스트가 매우 길게..."

```

### 출력: 구조화된 피드백

**📚 UX 이론 기반 분석**

**힉의 법칙 (Hick's Law)**

문제점: 홈 화면에 4개의 동일한 시각적 무게를 가진 버튼이 배치되어 있어 사용자의 결정 시간이 증가합니다.

개선안: 주 행동("시작하기")을 Primary 버튼으로 강조하고, "둘러보기"는 Secondary로, "설정"과 "프로필"은 아이콘 형태로 축소하여 시각적 계층을 명확히 하세요.

**인지 부하 이론**

문제점: 긴 설명 텍스트가 버튼들과 동일한 영역에 배치되어 이해와 행동 선택을 동시에 요구합니다.

개선안: 설명 텍스트를 별도 영역으로 분리하거나, 접을 수 있는 형태로 제공하여 사용자가 정보 습득과 행동 선택을 단계적으로 진행할 수 있게 하세요.

**💡 총평**

이 화면의 핵심 UX 문제는 동일한 우선순위로 보이는 다수의 선택지와 긴 설명 텍스트가 사용자의 인지 부하를 높이고 있다는 점입니다. 명확한 시각적 계층 구조와 정보 구성이 필요합니다.

**🎯 개선 방향**

1. 주 행동 버튼을 시각적으로 강조하여 사용자의 시선을 유도하세요

2. 선택지를 3개 이하로 줄이거나 계층적으로 구성하세요

3. 설명 텍스트를 요약하거나 접을 수 있는 형태로 제공하세요

## 💻 기술 구현

### code.ts 주요 기능

```typescript

// 1. UX 이론 기반 프롬프트 생성

function createUXTheoryPrompt(structure: any): string {

// 8가지 UX 이론을 포함한 상세 프롬프트

// 구조화된 출력 형식 강제

}

// 2. 구조화된 응답 파싱

function parseStructuredResponse(response: string): any {

// [UX_THEORY_START] ~ [UX_THEORY_END] 추출

// [SUMMARY_START] ~ [SUMMARY_END] 추출

// [IMPROVEMENTS_START] ~ [IMPROVEMENTS_END] 추출

// 각 섹션별로 데이터 구조화

}

// 3. System prompt로 전문가 페르소나 설정

{

role: "system",

content: "당신은 UX 이론에 정통한 시니어 UX 디자이너..."

}

```

### ui.html 주요 기능

```javascript

// 1. 섹션별 결과 표시

function displayResults(data) {

// data.theories 배열을 카드 형식으로 렌더링

// data.summary를 총평 섹션에 표시

// data.improvements 배열을 번호 매긴 리스트로 표시

}

// 2. 애니메이션 효과

// slideIn: 섹션별로 순차적 등장

// fadeIn: 상태 메시지 부드러운 전환

```

## 📦 파일 구조

```

src/

├── ui.html # UX 이론 섹션별 UI

├── code.ts # UX 이론 기반 분석 로직

└── parser.ts # 타입 안전 파서

```

## 🔧 설치 및 사용

### 1. 파일 교체

```bash

# 기존 파일들을 새 파일로 교체

cp ui.html src/ui.html

cp code.ts src/code.ts

```

### 2. 빌드

```bash

npm run build

```

### 3. Figma에서 플러그인 로드

```

Plugins → Development → Import plugin from manifest

```

### 4. API 키 설정 (최초 1회)

1. 플러그인 실행

2. ⚙️ 아이콘 클릭

3. OpenAI API 키 입력 후 저장

### 5. UX 분석 실행

1. Figma에서 Frame 선택

2. "선택한 프레임 UX 분석하기" 클릭

3. 3개 섹션으로 구분된 결과 확인

## 📚 UX 이론 상세 설명

### 1. 멘탈 모델 (Mental Model)

사용자는 화면을 처음 보는 순간에도 기대하는 사용 방식이 있습니다.

**체크 포인트:**

- 사용자가 지금 무엇을 하러 왔는가?

- 예상 행동 순서와 실제 UI 흐름이 일치하는가?

- 기존 유사 서비스의 관성을 깨고 있지 않은가?

### 2. 제이콥의 법칙 (Jakob's Law)

사용자는 다른 제품에서 학습한 패턴을 그대로 기대합니다.

**체크 포인트:**

- 새롭게 학습해야 할 요소를 만들고 있는가?

- 표준 패턴을 벗어난 이유가 있는가?

- 차별화가 인지 비용 증가로 작동하는가?

### 3. 힉의 법칙 (Hick's Law)

선택지가 많을수록 결정 시간은 기하급수적으로 증가합니다.

**체크 포인트:**

- 선택해야 할 것이 몇 개인가?

- 모든 선택지가 지금 필요한가?

- 주 행동이 충분히 두드러지는가?

### 4. 인지 부하 이론 (Cognitive Load Theory)

이해 + 판단 + 기억을 동시에 요구하면 실패 확률이 급증합니다.

**체크 포인트:**

- 기억해야 하는 정보가 있는가?

- 숫자, 그래프, 설명이 동시에 제시되는가?

- 지금은 이해 단계인가, 행동 단계인가?

### 5. 게슈탈트 원칙 (Gestalt Principles)

사람은 요소를 하나씩이 아닌 묶음으로 인식합니다.

**체크 포인트:**

- 묶여 있지만 의미가 다른 요소는?

- 같은 의미인데 떨어져 있는 요소는?

- 시각적 그룹화가 의미와 일치하는가?

### 6. 정보 향기 (Information Scent)

사용자는 "이걸 누르면 뭐가 나올지"를 미리 느끼고 행동합니다.

**체크 포인트:**

- 버튼/카드의 결과를 예측 가능한가?

- 라벨이 행동 결과를 설명하는가?

- 보상이 시각적으로 암시되는가?

### 7. 피츠의 법칙 (Fitts's Law)

작고 멀리 있는 타깃은 누르기 어렵습니다.

**체크 포인트:**

- 주요 버튼의 크기와 위치가 합리적인가?

- 엄지 영역을 고려했는가?

- 시선 이동 거리가 적절한가?

### 8. 노먼의 행동 7단계 모델

의도 → 행동 → 결과 → 해석의 단계가 명확해야 합니다.

**체크 포인트:**

- 의도를 바로 행동으로 연결하는가?

- 행동 후 결과가 즉시 이해 가능한가?

- 피드백이 충분한가?

## 💡 피드백 품질 보장

### 구조화된 프롬프트

```

## 분석 기준 (UX 이론)

1. 멘탈 모델

2. 제이콥의 법칙

...

## 출력 형식 (반드시 이 형식을 따르세요)

[UX_THEORY_START]

**[이론명]**

문제점: ...

개선안: ...

[UX_THEORY_END]

```

### 파싱 로직

```typescript

// 마커로 구분된 섹션 추출

const theoryMatch = response.match(/\[UX_THEORY_START\][\s\S]*?\[UX_THEORY_END\]/);

const summaryMatch = response.match(/\[SUMMARY_START\][\s\S]*?\[SUMMARY_END\]/);

const improvementsMatch = response.match(/\[IMPROVEMENTS_START\][\s\S]*?\[IMPROVEMENTS_END\]/);

```

## 🎨 UI 디자인 철학

### 명확한 정보 계층

1. **이론명**: 파란색으로 강조

2. **문제점/개선안**: 라벨로 구분

3. **섹션**: 아이콘과 테두리로 시각적 분리

### 가독성 최적화

- 카드 형식으로 각 이론 독립적 표시

- 충분한 여백과 패딩

- 부드러운 애니메이션 효과

### 반응형 스크롤

- 각 섹션 독립적으로 스크롤 가능

- 긴 내용도 편안하게 읽을 수 있도록

## 📊 비교: 개선 전 vs 후

### 기존 방식

```

"이 화면은 버튼이 너무 많아서 사용자가 혼란스러울 수 있습니다.

버튼을 줄이는 것을 추천합니다."

```

- 추상적

- 근거 없음

- 실행 방법 불명확

### 개선된 방식

```

📚 UX 이론 기반 분석

힉의 법칙 (Hick's Law)

문제점: 홈 화면에 4개의 동일한 시각적 무게를 가진 버튼이

배치되어 있어 사용자의 결정 시간이 증가합니다.

개선안: 주 행동("시작하기")을 Primary 버튼으로 강조하고,

"둘러보기"는 Secondary로, "설정"과 "프로필"은 아이콘 형태로

축소하여 시각적 계층을 명확히 하세요.

```

- 구체적

- 이론 기반 근거

- 실행 가능한 방법 제시

## ⚡ 성능 최적화

- GPT-4o-mini 사용으로 비용 절감

- 구조화된 응답으로 파싱 속도 향상

- 섹션별 렌더링으로 부드러운 UI

## 🔮 향후 개선 계획

- [ ] 이론별 중요도 스코어링

- [ ] 과거 분석 히스토리 저장

- [ ] 이론별 필터링 기능

- [ ] 개선 전/후 비교 기능

- [ ] 맞춤형 프롬프트 편집

- [ ] PDF 리포트 내보내기

## 📞 문의

UX 이론 관련 문의나 피드백 개선 제안은 이슈로 남겨주세요!