Skip to content

figma_wireframe_guide.md

Latest commit

 

History

History
226 lines (193 loc) · 6.54 KB

figma_wireframe_guide.md

File metadata and controls

226 lines (193 loc) · 6.54 KB

ParseNoteLM Figma 와이어프레임 제작 가이드

📋 Figma 구현 계획

🎯 화면 구성

  1. 메인 대시보드 (프로젝트 목록)
  2. 프로젝트 내부 (3단 레이아웃)
  3. 채팅 모드 (질의응답)
  4. 개별 문서 뷰
  5. 로그인/회원가입

🖼️ 화면별 Figma 구현 가이드

1. 메인 대시보드

Frame 설정:

  • 크기: 1440 x 1024px
  • 배경색: #FAFBFC (연한 회색)
  • Auto Layout: Vertical, 32px spacing

구성 요소:

상단 헤더 (Header)

Frame: 1440 x 64px
├── 텍스트: "🔍 ParseNoteLM" (24px, 굵게)
└── 우측 영역: "김철수 👤 [⚙️]" (16px)

메인 콘텐츠 (Content)

Frame: 1200 x 900px, 중앙 정렬
├── 타이틀: "ParseNoteLM에 오신 것을 환영합니다" (32px, 중앙)
├── 버튼: "+ 새 프로젝트 만들기" (파란색 #1A73E8)
├── 프로젝트 그리드 (3x2)
│   ├── 프로젝트 카드 1: "📚 AI 연구논문 모음"
│   ├── 프로젝트 카드 2: "📊 데이터분석 자료"
│   ├── 프로젝트 카드 3: "📄 회사업무 문서"
│   ├── 빈 카드 4: (비어있음)
│   ├── 빈 카드 5: (비어있음)
│   └── 새 프로젝트 카드: "+ 새 프로젝트"
└── 사용량 표시: "사용량: 프로젝트 3/3개"

프로젝트 카드 컴포넌트

Frame: 360 x 200px
├── 배경: 흰색 #FFFFFF, 그림자 효과
├── 아이콘: 📚 (32px)
├── 제목: "AI 연구논문 모음" (18px, 굵게)
├── 날짜: "2025. 5. 20." (14px, 회색)
└── 메타: "• 3개 문서" (14px, 회색)

2. 프로젝트 내부 (3단 레이아웃)

Frame 설정:

  • 크기: 1440 x 1024px
  • Auto Layout: Horizontal, 0px spacing

헤더

Frame: 1440 x 64px
├── 브레드크럼: "← ParseNoteLM > AI 연구논문 모음"
└── 사용자 정보: "김철수 👤 [⚙️]"

3단 컬럼 레이아웃

Frame: 1440 x 960px, Horizontal
├── 좌측 사이드바 (300px)
│   ├── 제목: "📁 소스"
│   ├── 전체 선택: "✅ 모든 소스 • 3개 소스"
│   ├── 파일 목록:
│   │   ├── "📄 research_paper1.pdf ✅ 선택됨"
│   │   ├── "📄 machine_learning.pdf 2025.5.18"
│   │   └── "📄 deep_learning.txt 2025.5.15"
│   └── 버튼: "[+ 소스 추가]"
├── 중앙 메인뷰 (820px)
│   ├── 문서 제목: "Research Paper 1"
│   ├── 내용 프레임:
│   │   ├── "Abstract:"
│   │   ├── "This paper presents a novel approach..."
│   │   ├── "1. Introduction"
│   │   ├── "Recent advances in artificial intelligence..."
│   │   └── "2. Methodology"
│   └── 하단: "[🔍 문서 내 검색]"
└── 우측 사이드바 (320px)
    ├── 섹션 1: "📄 문서 정보"
    │   ├── "파일명: research_paper1.pdf"
    │   ├── "크기: 2.3MB"
    │   ├── "페이지: 15"
    │   └── "업로드: 5/20"
    ├── 섹션 2: "💬 이 문서에 질문하기"
    │   ├── "예: 이 논문의 핵심 기술은?"
    │   └── 버튼: "[질문하기]"
    └── 섹션 3: "📌 하이라이트"
        ├── "• Introduction"
        ├── "• Methodology"
        └── "• Results"

3. 채팅 모드

같은 3단 레이아웃에서 중앙 부분만 변경:

중앙 채팅뷰 (820px)

Frame: 820 x 900px, Vertical
├── 채팅 히스토리:
│   ├── 사용자 메시지 (우측 정렬):
│   │   "이 논문들의 주요 결론을 요약해주세요"
│   └── AI 응답 (좌측 정렬):
│       "업로드하신 AI 연구논문들의 주요 결론은 다음과 같습니다:
│        1. **딥러닝 성능 향상** (research_paper1)..."
├── 입력창:
│   "문서에 대해 질문하세요... [📤]"
└── 제안 질문:
    "• 각 논문의 핵심 기술은?"
    "• 연구 방법론 비교해줘"
    "• 한계점과 개선사항은?"

4. 로그인/회원가입

Frame 설정:

  • 크기: 1440 x 1024px
  • 배경: 그라데이션 또는 단색

중앙 로그인 폼

Frame: 400 x 500px, 중앙 정렬
├── 로고: "ParseNoteLM" (28px, 굵게)
├── 서브타이틀: "AI 문서 분석 서비스" (16px, 회색)
├── 폼 컨테이너:
│   ├── 제목: "🚀 시작하기" (20px)
│   ├── 라벨: "이메일로 계속하기"
│   ├── 입력필드: "example@email.com"
│   ├── 버튼: "[계속하기]" (파란색)
│   ├── 구분선: "또는"
│   └── 버튼: "[🔗 Google로 계속]" (흰색, 테두리)
└── 푸터: "무료로 시작하세요 • 프로젝트 3개 • 문서 15개"

🎨 디자인 시스템

색상 팔레트

Primary Blue: #1A73E8 (Google Blue)
Background: #FAFBFC (Light Gray)
White: #FFFFFF
Text Primary: #202124 (Dark Gray)
Text Secondary: #5F6368 (Medium Gray)
Border: #DADCE0 (Light Border)
Success: #34A853 (Green)

타이포그래피

Heading 1: 32px, 굵게 (제목)
Heading 2: 24px, 굵게 (로고, 섹션 제목)
Heading 3: 20px, 굵게 (카드 제목)
Body: 16px, 보통 (본문)
Caption: 14px, 보통 (메타 정보)
Small: 12px, 보통 (작은 텍스트)

간격 시스템

XS: 4px
S: 8px
M: 16px
L: 24px
XL: 32px
XXL: 48px

컴포넌트 스타일

카드 그림자: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
버튼 둥근 모서리: 6px
입력필드 둥근 모서리: 4px
카드 둥근 모서리: 8px

🔧 Figma 제작 단계

1단계: 기본 설정

  1. 새 Figma 파일 생성
  2. 아트보드 크기 설정 (1440x1024)
  3. 색상 스타일 생성
  4. 텍스트 스타일 생성

2단계: 컴포넌트 제작

  1. 프로젝트 카드 컴포넌트
  2. 버튼 컴포넌트 (Primary, Secondary)
  3. 입력필드 컴포넌트
  4. 네비게이션 컴포넌트

3단계: 화면 구성

  1. 메인 대시보드 완성
  2. 프로젝트 내부 3단 레이아웃 완성
  3. 채팅 모드 완성
  4. 로그인 화면 완성

4단계: 프로토타이핑

  1. 화면 간 전환 효과 추가
  2. 호버 상태 정의
  3. 클릭 인터랙션 설정

📱 반응형 고려사항

태블릿 (768px)

  • 3단 → 2단 레이아웃 (사이드바 숨김/오버레이)
  • 카드 그리드 3열 → 2열

모바일 (375px)

  • 1단 레이아웃 (전체화면)
  • 카드 그리드 1열
  • 네비게이션 햄버거 메뉴

이 가이드를 참고하여 Figma에서 ParseNoteLM 와이어프레임을 제작하실 수 있습니다!