4. UI (사용자 관점 설계)

0. 소프트웨어 개발 프로세스

 

1. 시스템 구성 요소 분석

 

(1) UI 구조(상위)

• 메인 창: LibrarySystem(QMainWindow)
  • 좌측 Sidebar: 페이지 전환 버튼 3개
  • 우측 StackedWidget: 3개 페이지

 

(2) 페이지 공통 패턴(BasePage)

• 모든 페이지는 동일한 GUI 블록을 가진다.
• Title(Label)
• 입력 폼(form_layout)
• 검색 폼(search_layout)
• 테이블(QTableWidget)
• 하단 버튼(bottom_layout)

 

(3) 데이터 처리 구조

• DatabaseManager
  • execute_query(): INSERT/UPDATE/DELETE
  • fetch_data(): SELECT
• 각 페이지는 db 객체를 주입받아 직접 SQL을 호출한다.

---

4. 목업(≒ UI 프로토 타입, StoryBoard, Wireframe)

(1) 2가지 목업 제작 방법

 

1단계: SVG 이미지 제작 요청

대다수의 인공지능 명령으로 이미지 생성 가능 >> 수정 어려움

 

2단계: https://www.figma.com/

인공지능 기반으로 작성한 SVG 파일을, 편집 가능 사용자가 수정할 수 있습니다.

 

 

(2) 프롬프트 명령 순서

1. 위에서 작업한 요구사항 분석과, 순서도를 기반으로 질문합니다.
   • 프롬프트 명령
     "figma 에서 ui 목업 제작하려고 합니다. 
     요구사항 분석 결과와, 순서도에 사용한 코드를 기반으로
     figma 에서 ui 목업 제작에 필요한 사항들을 리스트업해주세요."
     
     
2. 결과 확인
   • 리스트업한 결과가 요구사항과 맞는지 확인합니다.
     
     
3. 프롬프트 명령
   • 메인 창: LibrarySystem(QMainWindow)
     • 좌측 Sidebar: 페이지 전환 버튼 3개
     • 우측 StackedWidget: 3개 페이지
       • “회원 관리 순서도(FR-01~03)”
       • “도서 관리 순서도(FR-04~06)” 페이지
       • “대여/반납/연장 순서도(FR-07~10)” 페이지 figma 에서 ui 목업 제작하려고 합니다.
         SVG 코드를 생성해서 Figma에 드래그앤드롭(또는 Import) 합니다.
         (아래처럼 위 분석에 사용한 UI 관련 사항을 가져옵니다.)
   • figma 에서 ui 목업 제작을 위해 SVG 코드를 생성해서 Figma에 드래그앤드롭(또는 Import) 할 수 있도록 만들어주세요"
     
     
4. Figma 에서 SVG 드래그앤드롭하여 확인합니다

SVG 파일

Figma 에서 수정 가능

---