Claude, Codex, Gemini가 본 API Gateway 콘솔 메뉴 구조: AI 모델별 UX 리뷰 비교

작성일: 2025년 11월 24일
카테고리: AI, UX Design, API Gateway
키워드: Claude, GPT Codex, Gemini, AI Review, UX, Menu Structure, API Gateway

요약

B2B API Gateway 플랫폼의 콘솔 메뉴 구조를 세 가지 AI 모델(Claude Sonnet 4.5, GPT 5.1 Codex Max, Gemini Pro 2.5)에게 리뷰 요청했습니다. 동일한 아키텍처 문서와 메뉴 스크린샷을 제공하고, 각 모델이 어떤 관점에서 피드백을 제시하는지 비교 분석했습니다. 세 모델 모두 긍정적인 평가를 내렸으나, 리뷰 스타일과 강조점에서 흥미로운 차이를 보였습니다.

문제 상황

배경

imprun API Gateway Control Plane은 Provider(API 제공자)와 Customer(API 소비자) 두 가지 페르소나를 지원하는 B2B 플랫폼입니다. 메뉴 구조 개선 후, 세 AI 모델에게 다음 자료를 제공하고 리뷰를 요청했습니다:

• 아키텍처 설계 문서 (432줄)
• Provider 메뉴 스크린샷
• DevPortal(Customer) 메뉴 스크린샷

환경 구성

• Claude: Sonnet 4.5 (claude-sonnet-4-5-20250929)
• Codex: GPT 5.1 Codex Max
• Gemini: Pro 2.5

리뷰 대상: 메뉴 구조 변경 (v1 → v2)

이전 메뉴 (v1)

┌─────────────────────────────────────┐
│ imprun                              │
│ System Admin's Workspace            │
├─────────────────────────────────────┤
│ Overview                            │
│ ├── Dashboard                       │
│ ├── Gateways                        │
│ ├── API Services ▼                  │
│ │   ├── All Services                │
│ │   ├── Routes                      │
│ │   ├── Backends                    │
│ │   └── Policies                    │
│ ├── Products ▼                      │
│ │   ├── Products                    │
│ │   ├── Publishes                   │
│ │   └── Plans                       │
│ ├── Subscriptions                   │
│ ├── Deployments ▼                   │
│ │   ├── All Deployments             │
│ │   └── History                     │
│ └── Settings                        │
├─────────────────────────────────────┤
│ System                              │
│ ├── Tenants                         │
│ ├── Users                           │
│ └── System Settings                 │
├─────────────────────────────────────┤
│ Operator                            │
│ ├── Fleet Overview                  │
│ ├── Clusters & Agents ▼             │
│ │   ├── All Clusters                │
│ │   └── Agents                      │
│ ├── Global Policies                 │
│ ├── Deployments ▼                   │
│ │   ├── All Deployments             │
│ │   └── Rollbacks                   │
│ └── Audit Logs                      │
└─────────────────────────────────────┘

문제점: Provider/Customer 포털 분리 없음, Environments 메뉴 누락, Customer 도메인(Client Apps, Credentials) 부재

신규 메뉴 (v2) - Provider Portal

┌─────────────────────────────────────┐
│ imprun                              │
│ System Admin's Workspace            │
├─────────────────────────────────────┤
│ Workspace                           │
│ └── Switch to DevPortal             │
├─────────────────────────────────────┤
│ Overview                            │
│ ├── Dashboard                       │
│ ├── Environments                    │
│ ├── Gateways                        │
│ ├── API Services                    │
│ ├── Products ▼                      │
│ │   ├── Publishes                   │
│ │   └── Plans                       │
│ ├── Subscriptions                   │
│ ├── Deployments ▼                   │
│ │   ├── All Deployments             │
│ │   └── History                     │
│ └── Settings                        │
├─────────────────────────────────────┤
│ System                              │
│ ├── Tenants                         │
│ ├── Users                           │
│ └── System Settings                 │
├─────────────────────────────────────┤
│ Operator                            │
│ ├── Fleet Overview                  │
│ ├── Registration Tokens             │
│ ├── Clusters                        │
│ ├── Agents                          │
│ ├── Global Policies                 │
│ ├── Deployments ▼                   │
│ │   ├── All Deployments             │
│ │   └── Rollbacks                   │
│ ├── Audit Logs                      │
│ └── Metrics Explorer                │
└─────────────────────────────────────┘

신규 메뉴 (v2) - DevPortal (Customer)

┌─────────────────────────────────────┐
│ imprun                              │
│ DevPortal                           │
├─────────────────────────────────────┤
│ Workspace                           │
│ └── Switch to Admin Portal          │
├─────────────────────────────────────┤
│ ├── Home                            │
│ ├── Marketplace                     │
│ ├── My Subscriptions                │
│ ├── Client Apps                     │
│ ├── Credentials                     │
│ ├── Usage                           │
│ └── Settings                        │
└─────────────────────────────────────┘

리뷰 결과 비교

Claude Sonnet 4.5

리뷰 스타일: 정량적 평가 + 표 기반 구조화

Claude는 변경 전후를 수치로 비교하며 체계적인 평가를 제시했습니다:

영역	이전	현재	상태
Customer 도메인	0%	80%	해결
포털 분리	50%	100%	완료
Products 계층	60%	60%	유지
Operator 기능	70%	95%	개선
전체 완성도	60%	85%	-

주요 지적 사항:

1. Products 하위의 Plans가 ProductPublish 종속인데 동일 레벨로 표시됨
2. Admin에서 Customer(고객 조직) 목록 조회 기능 누락
3. Admin에서 Consumer 관리 UI 누락 (긴급 Credential 폐기 시 필요)
4. DevPortal에서 Consumer 메뉴 누락 (Credential의 환경 컨텍스트 불명확)
5. Deployments 명칭이 Overview와 Operator에서 중복

우선순위 제안:

• P2: Admin에 Customers/Consumers 메뉴 추가
• P3: DevPortal에 Consumers 메뉴 추가
• P3: Deployments 명칭 구분

결론: "핵심 문제였던 Customer 도메인 누락이 해결되어 B2B API 플랫폼의 기본 플로우가 가능해졌습니다. 현재 구조로 MVP 운영 충분합니다."

GPT 5.1 Codex Max

리뷰 스타일: 구현 상세 + 실무 체크리스트

Codex는 실제 구현 시 확인해야 할 기술적 세부사항에 집중했습니다:

주요 지적 사항:

1. 포털 전환 라벨이 컨텍스트에 맞게 동적으로 변경되는지 확인 필요
2. API Services 상세 페이지 내 탭(Routes/Backends/Policies) 구현 확인 필요
3. Operator 라우팅(/operator/*)이 실제 페이지와 일치하는지 점검 필요
4. isSystemAdmin 가드가 제대로 동작하는지 확인 필요
5. 라우트-메뉴 mismatch로 404 발생 가능성 점검 권장

구체적 권장사항:

• 모바일/좁은 화면 대응을 위해 App 헤더에도 전환 버튼 추가
• System Admin 그룹을 Provider 그룹과 시각적으로 구분 (Divider 활용)
• pnpm lint 또는 간단 라우트 확인 실행

특징: 코드 레벨의 구현 상세와 엣지 케이스에 집중하며, 용어 통일("Subscriptions" vs "My Subscriptions")과 같은 세부 사항까지 체크했습니다.

Gemini Pro 2.5

리뷰 스타일: 개념적 분석 + 사용자 여정 관점

Gemini는 UX 원칙과 사용자 여정 관점에서 상위 레벨 평가를 제시했습니다:

긍정적 평가:

1. 논리적 그룹핑으로 구조가 매우 명확해짐
2. 역할별 메뉴 분리로 사용자가 자신의 역할에 몰입 가능
3. DevPortal이 소비자의 핵심 여정(탐색→구독→사용)에 완벽히 부합
4. 불필요한 메뉴 제거로 깔끔한 사용 환경 제공

개선 제안:

1. Products 메뉴에서 ProductPublish와 Plan의 관계를 시각적으로 표현하는 UI/UX 필요
2. Access Management 네이밍을 'Subscriptions & Consumers'로 명시화 고려

결론: "성공적인 개선입니다. 제공자와 소비자의 메뉴를 분리한 것은 사용자가 자신의 역할에 몰입할 수 있는 환경을 만들어준다는 점에서 가장 중요한 변화입니다."

모델별 리뷰 특성 비교

특성	Claude	Codex	Gemini
분석 관점	아키텍처 정합성	구현 상세	UX 원칙
평가 방식	정량적 (%)	체크리스트	정성적
강조점	데이터 모델 일치	코드/라우팅 검증	사용자 여정
결론 스타일	우선순위 표	실행 항목	개념적 요약
세부 수준	중간	높음	낮음
실행 가능성	중간	높음	낮음

공통 지적 사항

세 모델 모두 다음 사항에 동의했습니다:

1. Provider/Customer 포털 분리는 성공적
2. Products 하위 구조(Publishes, Plans)의 계층 표현 개선 필요
3. 전반적으로 MVP 운영에 충분한 구조

차별화된 관점

모델	고유한 지적 사항
Claude	Consumer 관리 UI 누락 (긴급 Credential 폐기 시나리오)
Codex	라우트-메뉴 mismatch 404 위험, isSystemAdmin 가드 동작 확인
Gemini	사용자 몰입 환경, 역할별 분리의 UX 가치 강조

교훈

1. AI 모델별 리뷰 관점이 상호보완적

세 모델의 리뷰를 종합하면 아키텍처(Claude), 구현(Codex), UX(Gemini) 관점을 모두 커버할 수 있습니다. 단일 모델에 의존하기보다 여러 모델의 피드백을 종합하는 것이 효과적입니다.

2. Claude는 정량화와 우선순위에 강점

아키텍처 문서와의 정합성을 퍼센트로 평가하고, P2/P3 등 우선순위를 명확히 제시했습니다. 기획 단계의 의사결정에 유용합니다.

3. Codex는 구현 검증에 강점

실제 코드 레벨의 체크리스트를 제공하며, 라우팅 불일치나 가드 동작 같은 기술적 엣지 케이스를 지적했습니다. 개발 단계의 QA에 유용합니다.

4. Gemini는 UX 원칙과 사용자 관점에 강점

"사용자가 자신의 역할에 몰입할 수 있는 환경"과 같이 추상적이지만 본질적인 UX 가치를 강조했습니다. 디자인 리뷰에 유용합니다.

5. 동일 프롬프트, 다른 결과

동일한 아키텍처 문서와 스크린샷을 제공했으나, 각 모델의 학습 데이터와 설계 철학에 따라 완전히 다른 관점의 피드백이 도출되었습니다.

부록: 원본 리뷰

Claude Sonnet 4.5 원본

수정된 메뉴 리뷰

✅ 크게 개선된 점

항목                변경 내용                              평가
포털 전환          Admin ↔ DevPortal 전환 버튼 추가       👍 훌륭함
Customer 도메인    DevPortal에 Client Apps, Credentials 추가  👍 핵심 기능 해결
Environments       Overview에 환경 관리 메뉴 추가          👍 필요했던 기능
Operator 개선      Registration Tokens, Metrics Explorer 추가  👍 운영 기능 강화
Clusters/Agents 분리  각각 독립 메뉴로 분리                👍 명확해짐

🟡 개선 가능한 점

1. Products 계층 (동일)
Products
├── Publishes    ← ProductPublish
└── Plans        ← Plan (ProductPublish 종속인데 동일 레벨)
영향: 낮음 - 현재 구조도 사용 가능, 추후 UX 개선 시 고려

2. Provider의 Customer 관리
현재:
Admin Portal: Subscriptions (구독 승인/관리)
DevPortal: Client Apps, Credentials
누락:
Admin에서 Customer(고객 조직) 목록 조회
Admin에서 Consumer 관리 (구독×앱×환경별 런타임 identity)

# 아키텍처 상
Subscription → Client Application → Consumer → Credential
Provider가 고객의 Consumer를 모니터링하거나 Credential을 긴급 폐기해야 할 때 UI가 없음

3. Deployments 명칭 중복
위치        현재              제안
Overview    Deployments       My Deployments 또는 Tenant Deployments
Operator    Deployments       Fleet Deployments

4. DevPortal의 Consumer 누락
DevPortal 현재:
├── My Subscriptions
├── Client Apps
├── Credentials      ← Consumer 없이 바로 Credentials?
└── Usage

아키텍처: Subscription → ClientApp → Consumer → Credential
Consumer가 빠져있어서 "어떤 환경(dev/prod)의 어떤 앱에서 사용하는 Credential인지"
컨텍스트가 불명확할 수 있음

📊 최종 평가

영역              이전    현재    상태
Customer 도메인   0%      80%     ✅ 대부분 해결
포털 분리         50%     100%    ✅ 완료
Products 계층     60%     60%     🟡 유지
Operator 기능     70%     95%     ✅ 크게 개선
전체 완성도       60%     85%     👍

💡 권장 우선순위

순위  항목                              중요도
P2    Admin에 Customers/Consumers 메뉴 추가  중간 (운영 시 필요)
P3    DevPortal에 Consumers 메뉴 추가         낮음 (Credentials로 대체 가능)
P3    Deployments 명칭 구분                   낮음 (혼란 방지)

결론: 핵심 문제였던 Customer 도메인 누락이 해결되어 B2B API 플랫폼의
기본 플로우가 가능해졌습니다. 현재 구조로 MVP 운영 충분합니다. 🎉

GPT 5.1 Codex Max 원본

워크스페이스 토글을 단일 버튼으로 단순화한 건 좋습니다. 다만 DevPortal에서
관리자 전환 라벨이 "관리자 포털로 전환"으로 고정이라, 관리자 뷰에서도 동일
문구가 보이지 않도록(관리자 뷰에서는 "개발자 포털로 전환") 양쪽에서 컨텍스트에
맞게 노출되는지 확인하세요.

Provider 메뉴 구조는 크게 정리됐습니다: Environments → Gateways → API Services
→ Products/Publishes/Plans → Subscriptions → Deployments → Settings 흐름이
IA와 맞습니다. Environments 하위에 실제 env 설정/필터가 있고, API Services가
단일 엔트리일 때 상세 탭으로 연결되는지 확인 필요합니다(글로벌 Routes/Backends/
Policies 페이지가 없어진 만큼 상세 페이지 내 탭이 준비돼야 함).

Operator 섹션이 사이드바 하단 그룹으로 잘 분리됐습니다. 여전히 operatorNavItems가
존재하므로 Operator 라우팅(/operator/*)이 실제 페이지와 일치하는지 한번 더
점검하세요(특히 global-policies, deployments, rollbacks, metrics).

DevPortal 사이드바의 "관리자 포털로 전환" 버튼이 상단 Workspace 그룹에 추가된 점은
전환 발견성에 도움이 됩니다. 동일한 전환 제어가 App 헤더에도 있으면 모바일/좁은
화면에서 더 접근성 좋습니다.

용어 통일: Provider 사이드바에서는 "Subscriptions", DevPortal에서는
"My Subscriptions"처럼 의도적 구분이 되어 있으면 좋습니다. 현재 라벨이
그렇게 돼 있다면 OK.

System Admin 그룹: 시스템 역할을 가진 사용자만 보여야 하므로 isSystemAdmin 가드가
제대로 동작하는지 확인하고, 해당 메뉴가 Provider 그룹과 시각적으로 더 구분되면
좋겠습니다(예: Divider).

아이콘 일관성: Portal 토글에 사용하는 아이콘이 관리자 뷰에서는 대시보드,
포털 뷰에서는 마켓/홈으로 매핑돼도 좋습니다. 현 상태가 단일 dashboard
아이콘이면 유지해도 무방하나 시각적 단서가 줄어듭니다.

남은 위험: 라우트-메뉴 mismatch로 404가 나지 않는지 pnpm lint 또는
간단 라우트 확인을 추천합니다.

Gemini Pro 2.5 원본

총평: 매우 긍정적인 변화

이전의 평면적인 구조에서 가졌던 개념적 계층의 부재와 역할(페르소나)의 혼재라는
두 가지 핵심 문제가 대부분 해결되었습니다. 아키텍처 문서를 기반으로 사용자의
역할에 맞는 직관적인 구조로 크게 개선되었습니다.

1. API 제공자 (Provider) 메뉴 리뷰

잘된 점:
- 논리적 그룹핑: API Management, Access Management, Analytics 와 같이 기능적으로
  연관된 메뉴들을 그룹으로 묶어주어 구조가 매우 명확해졌습니다. 이는 사용자가
  원하는 기능을 훨씬 빠르게 찾도록 도와줍니다.
- 역할 집중: API를 제공하고 관리하는 데 필요한 핵심 기능들(Gateways, Products,
  Subscriptions 등)이 잘 정리되어 있어 제공자 역할에 완벽히 집중할 수 있습니다.

추가 제안 및 확인 사항:
- 'Products' 메뉴의 깊이: Products라는 상위 메뉴를 만든 것은 훌륭한 결정입니다.
  여기서 한 단계 더 나아가, Products 메뉴를 클릭했을 때 나타나는 화면에서
  개별 Product에 대한 '환경별 배포(ProductPublish)'와 '플랜(Plan)'을 함께
  설정하고 관리할 수 있는 UI/UX가 구현된다면, 아키텍처의 핵심 개념을 완벽하게
  반영하는 구성이 될 것입니다.
- 'Access Management' 네이밍: 현재 Subscriptions를 포함하고 있을 것으로
  예상되는 Access Management는 좋은 이름입니다. 만약 Consumers에 대한 정보도
  이 메뉴에서 함께 다룬다면, 'Subscriptions & Consumers' 와 같이 조금 더
  명시적인 이름도 고려해볼 수 있습니다. 하지만 현재도 충분히 좋은 이름입니다.

2. API 소비자 (Customer) 메뉴 리뷰

잘된 점:
- 완벽한 역할 맞춤: 이 메뉴는 더할 나위 없이 훌륭합니다. API를 탐색하고
  (Marketplace), 구독하며(My Subscriptions), 사용하는(Applications & Credentials)
  소비자의 핵심 여정에 완벽하게 부합합니다.
- 간결함: 소비자에게 불필요한 메뉴(e.g., Gateways, Deployments)가 모두 제거되어
  매우 깔끔하고 사용하기 쉬운 환경을 제공합니다.

최종 결론

성공적인 개선입니다. 특히 제공자와 소비자의 메뉴를 분리한 것은 사용자가
자신의 역할에 몰입할 수 있는 환경을 만들어준다는 점에서 가장 중요한 변화입니다.

이제 남은 것은 Products 메뉴 내부에서 ProductPublish와 Plan의 관계를 어떻게
시각적으로 잘 풀어내는가 하는 UI/UX의 과제라고 생각됩니다. 현재의 메뉴 구조는
이를 위한 훌륭한 기반을 마련해주었습니다.

참고 자료

관련 문서

• imprun API Gateway Control Plane 아키텍처 설계 문서 v1.4.2

사용 모델

• Claude Sonnet 4.5 - Anthropic
• GPT 5.1 Codex Max - OpenAI
• Gemini Pro 2.5 - Google DeepMind