ivada-infra/DOCS
3
0
Fork 0
Code Issues 1 Pull Requests 5 Actions Packages Projects Releases Wiki Activity
DOCS/journey/troubleshooting/251128_ir_valuation_design_review.md

3.8 KiB
Raw Blame History

IR Deck 평가 프론트엔드 디자인 검토

날짜: 2025-11-28
작성자: Claude (AI)
관련 파일:

  • frontend-ir-valuation/src/pages/ir-valuation.tsx

디자인 검토 결과

현재 상태

레이아웃 구조:

  • 메인 채팅 영역 (flex-1) + 평가 결과 사이드바 (w-96 고정)
  • flex h-screen 레이아웃
  • ChatGPT 스타일 UI

발견된 문제점

1. 모바일 반응형 미구현

문제:

  • 사이드바가 w-96 (384px) 고정 너비로 모바일 화면을 가림
  • flex 레이아웃이 모바일에서도 가로 배치 유지
  • 반응형 브레이크포인트 (sm:, md:, lg:) 클래스 없음

영향:

  • 모바일(320-768px)에서 사이드바가 채팅 영역을 가림
  • 사용자가 평가 결과를 보기 어려움
  • 스크롤/탭 전환이 없어 UX 저하

2. 디자인 타당성

긍정적 측면:

  • ✅ ChatGPT 스타일 UI로 직관적
  • ✅ 채팅 인터페이스로 자연스러운 대화 흐름
  • ✅ 업로드 진행률 표시로 피드백 제공
  • ✅ 페이지별 평가 결과 상세 표시

개선 필요 측면:

  • ❌ 모바일에서 사이드바가 항상 표시되어 공간 낭비
  • ❌ 평가 결과와 채팅이 동시에 보이지 않아 컨텍스트 전환 필요
  • ❌ 피드백 제출 UI가 아직 구현되지 않음 (문서화만 됨)

개선 방안

1. 모바일 반응형 구현

제안:

// 모바일: 사이드바를 하단 시트 또는 모달로 변경
// 데스크톱: 기존 사이드바 유지

<div className="flex flex-col md:flex-row h-screen">
  {/* 메인 채팅 영역 */}
  <div className="flex-1 flex flex-col">
    {/* ... */}
  </div>

  {/* 평가 결과 - 모바일: 하단 시트, 데스크톱: 사이드바 */}
  {evaluationResult && (
    <>
      {/* 모바일: 하단 고정 버튼 */}
      <div className="md:hidden fixed bottom-20 right-4 z-50">
        <Button onClick={() => setShowResultSheet(true)}>
          평가 결과 보기
        </Button>
      </div>

      {/* 모바일: 시트 */}
      <Sheet open={showResultSheet} onOpenChange={setShowResultSheet}>
        <SheetContent side="bottom" className="h-[80vh]">
          {/* 평가 결과 내용 */}
        </SheetContent>
      </Sheet>

      {/* 데스크톱: 사이드바 */}
      <div className="hidden md:block w-96 border-l">
        {/* 평가 결과 내용 */}
      </div>
    </>
  )}
</div>

반응형 클래스 추가:

  • md:flex-row - 데스크톱에서 가로 배치
  • md:w-96 - 데스크톱에서만 고정 너비
  • md:hidden / hidden md:block - 모바일/데스크톱 전환

2. 디자인 개선

제안:

  1. 모바일 우선 설계: 모바일에서 사이드바를 하단 시트 또는 드로어로 변경
  2. 탭 전환: 모바일에서 "채팅" / "평가 결과" 탭으로 전환
  3. 피드백 UI 추가: 평가 결과 하단에 피드백 제출 섹션 추가
  4. 헤더 최적화: 모바일에서 헤더 높이 축소

권장 구현 순서

  1. 모바일 반응형 레이아웃 수정 (우선순위 높음)

    • 사이드바를 모바일에서 시트/드로어로 변경
    • 반응형 클래스 추가

  2. 피드백 제출 UI 구현

    • 평가 결과 하단에 피드백 섹션 추가
    • 등급 선택 드롭다운
    • 제출 버튼

  3. UX 개선

    • 모바일에서 평가 결과 보기 버튼 추가
    • 스크롤 최적화
    • 로딩 상태 개선

교훈

  • 모바일 우선 설계: 데스크톱 중심 설계는 모바일에서 문제 발생
  • 반응형 클래스 필수: TailwindCSS의 sm:, md:, lg: 브레이크포인트 활용
  • 사이드바 패턴: 모바일에서는 시트/드로어, 데스크톱에서는 사이드바로 분기 필요

문서 규칙: DOCS/book/300_architecture/312_문서_작성_원칙.md 준수