멘탈모델 기반 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.htmlcp code.ts src/code.ts```### 2. 빌드```bashnpm 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 이론 관련 문의나 피드백 개선 제안은 이슈로 남겨주세요!