1장 서론

1.1 연구 동기 현대의 네트워크 기술과 소프트웨어 개발 기술은 이미 성숙한 이론적 기반을 갖추었으며, 다양한 분야에서 활용 가능한 응용 프로그램이 지속적으로 등장하고 있다. 특히 컴퓨터와 노트북의 보급률이 높아지고 하드웨어의 성능이 향상되면서, 더 많은 소프트웨어를 실행할 수 있는 환경이 조성되었다. 이러한 변화에 따라 정보 처리 효율성을 극대화하기 위해 소프트웨어를 활용하는 방식이 점점 주목받고 있다. 그러나 기존의 수작업 방식으로 고등학교 물품 기부 정보를 관리할 경우, 데이터 양이 증가함에 따라 시간 소모가 커지고 오류 발생률이 높아지며, 수정 및 검색 작업도 어려워진다. 따라서 이러한 문제를 해결하기 위해 자동화된 기부 관리 시스템을 도입하는 것이 필수적이다. 이를 통해 정보 처리 과정을 체계화하고, 관리자의 업무 부담을 줄이며, 정확성과 신속성을 동시에 확보할 수 있다.

1.2 목적 및 의의 본 시스템은 고등교육기관 내에서 발생하는 기부 활동에 대한 정보를 중앙집중적으로 관리할 수 있도록 설계되었으며, 전통적인 수기 관리 방식의 단점을 극복한다. 기술적 측면에서, 자바 기반의 스프링 부트 프레임워크와 웹 기반의 Vue.js 프론트엔드를 활용하여 데이터 입력, 수정, 조회, 통계 분석 등의 기능을 빠르게 수행할 수 있다. 시스템의 도입은 정보 처리의 효율성과 일관성을 높이고, 복잡한 업무를 간단한 인터페이스로 구현해 관리자의 작업 부담을 크게 줄여준다. 또한 시스템의 안정성과 데이터 무결성을 유지하기 위해서는 사용자가 시스템의 기능을 충분히 이해하고 활용할 수 있어야 한다. 즉, 기술적 능력과 경험을 지속적으로 발전시켜야만 시스템의 최적 활용이 가능하다.

1.3 논문 구성 본 논문은 총 6개 장으로 구성되며, 각 장별로 시스템 개발의 핵심 요소를 다룬다.

• 제1장: 연구 배경과 목적을 설명하며, 시스템 개발의 필요성을 제시한다.
• 제2장: 시스템 개발에 사용된 기술 스택과 환경을 소개한다.
• 제3장: 시스템의 실현 가능성, 기능 및 성능 요구사항을 분석한다.
• 제4장: 시스템의 기능 구조 및 데이터베이스 설계를 중심으로 전체 아키텍처를 제시한다.
• 제5장: 실제 구현 과정에서의 모듈별 기능 구현 사례를 제시한다.
• 제6장: 시스템의 기능 테스트 및 성능 검증 결과를 설명한다.

2장 개발 환경 및 기술

2.1 MySQL 데이터베이스 시스템 개발을 위한 데이터 저장소로는 관계형 데이터베이스가 적합하다. 주요 선택 후보인 오라클, 마이크로소프트, IBM 제품들은 모두 기능적으로 유사하므로, 환경적 요인을 중심으로 결정해야 한다. 본 시스템 개발은 저사양 노트북에서 진행되며, 리소스 사용량이 낮고 설치/관리 비용이 적은 시스템이 선호된다. 이러한 조건을 만족하는 것은 바로 MySQL이다. 작은 용량, 낮은 메모리 사용량, 운영체제 재설치 없이도 쉽게 설치 가능하며, 개발자에게 적합한 경량 데이터베이스로 평가된다.

2.2 Tomcat 서버 Java 기반 웹 애플리케이션을 배포하고 실행하기 위한 서버로, Apache Tomcat이 일반적으로 사용된다. 이는 웹 서버로서의 역할뿐만 아니라, Java 기반 애플리케이션을 실행하는 컨테이너로도 작동한다. 특히 소규모 서비스나 동시 접속이 많지 않은 환경에서는 경량이며 안정적인 선택이다. Tomcat은 설정 파일을 XML 형식으로 관리하며, 여러 웹 애플리케이션을 동시에 호스팅할 수 있다. 현재 최신 버전은 10이며, 빌드 시에는 특수 아이콘(노란 고양이)을 확인하면 정상적으로 시작된 것으로 판단할 수 있다.

2.3 Vue.js 프론트엔드 기술 Vue.js는 사용자 친화적인 프론트엔드 프레임워크로, 복잡한 백엔드 지식 없이도 동적 웹 인터페이스를 빠르게 개발할 수 있다. 이는 프론트엔드 개발자와 백엔드 개발자를 분리하여 협업이 가능하게 하며, 개발 속도와 유지보수성에 큰 도움을 준다. 웹 페이지는 단순한 HTML 문서로 시작되지만, Vue.js 엔진과 함께 사용될 때는 동적 상태를 가진 애플리케이션으로 진화한다. 이는 기존의 정적 웹 서버보다 강력한 기능을 제공하며, 데이터 바인딩, 컴포넌트 기반 구조 등을 통해 코드의 재사용성과 유지보수성을 높인다.

2.4 Spring Boot 프레임워크 기존의 스프링 기반 애플리케이션은 복잡한 설정과 의존성 관리로 인해 개발 생산성이 떨어졌다. 반면 Spring Boot은 "실행만 하면 된다"는 철학 아래, 기본 설정을 자동으로 제공하며, 개발자가 직접 구성할 필요를 줄였다. 예를 들어, java -jar 명령어로 간단히 애플리케이션을 실행할 수 있으며, 내장 서버를 통해 웹 서비스를 즉시 구동할 수 있다. 이는 개발 초기 단계부터 프로덕션 수준의 시스템을 빠르게 구축할 수 있게 해주며, 개발자에게 큰 편의를 제공한다.

3장 시스템 분석

3.1 실현 가능성 분석

3.1.1 운영 가능성 개발자는 사용하는 도구(스프링 부트, MySQL, Tomcat 등)에 익숙하며, 시스템의 주요 기능(등록, 수정, 삭제, 조회)은 사용자 인터페이스 기반으로 구현되어 있어 직관적이며, 기초적인 컴퓨터 사용자라면 쉽게 활용할 수 있다.

3.1.2 경제적 타당성 개발에 필요한 모든 도구는 무료로 다운로드 및 설치 가능하며, 오픈소스 기반의 코드를 참조하여 일부 수정만으로 기능을 구현할 수 있다. 또한, 웹 기반의 브라우저-서버 구조를 사용함으로써 추가적인 하드웨어 비용이 발생하지 않는다.

3.1.3 기술적 타당성 개발 환경은 기존 교육과정에서 다루었던 자바, HTML, CSS, Vue.js, Spring Boot 등과 일치하며, 관련 서적 및 온라인 자료를 통해 학습 가능하다. 따라서 기술적 장벽은 낮으며, 시스템 개발이 현실적으로 가능하다.

결론적으로, 본 시스템은 경제적, 기술적, 운영적 측면에서 모두 실현 가능하다.

3.2 시스템 흐름 분석 시스템의 데이터 처리 흐름은 다음과 같다:

• 데이터 등록: 입력 시 유효성 검사(예: 문자열 길이, 형식, 필수 항목)를 거쳐 데이터베이스에 저장된다.
• 데이터 수정: 기존 데이터를 변경할 때도 동일한 검사 로직을 적용하여 무결성을 보장한다.
• 데이터 조회: 사용자가 키워드를 입력하면, 해당 조건에 맞는 데이터를 빠르게 검색하여 표시한다.

(그림 삽입 권고: 등록/수정/조회 흐름도)

3.3 시스템 성능 요구사항

• 실용성: 정보 관리의 효율성과 작업 자동화를 통해 관리자의 업무 부담 감소.
• 적응성: 낮은 하드웨어 요구사항으로 일반 컴퓨터 또는 노트북에서도 실행 가능.
• 사용성: 직관적인 인터페이스와 일관된 조작 방식으로 사용자가 빠르게 익힐 수 있음.
• 보안성: 사용자 역할 기반 접근 제어, 계정 정보 암호화 (예: MD5), 세션 관리 기반 인증 구현.
• 유지보수성: 데이터 백업 및 일괄 삭제 기능을 제공하여 시스템 부담을 최소화.

4장 시스템 설계

4.1 UI 설계 원칙

• 사용자 중심 설계: 대다수 사용자의 읽기 습관(역삼각형, F형 레이아웃)을 고려하여 정보의 가시성을 높인다.
• 일관된 네비게이션: 모든 페이지에 상단/하단 네비게이션 제공, 이전 페이지 또는 홈으로의 돌아가기 링크 포함.
• 통일된 디자인 언어: 색상 팔레트, 템플릿, 용어 사용의 일관성 유지.
• 정보 전달의 명확성: 과도한 내용 배치를 피하고, 중요한 정보는 시각적 집중 영역에 배치.

4.2 기능 구조 설계 시스템은 주요 기능을 다음과 같이 계층화하였다:

• 사용자 관리
• 기부 정보 관리
• 지원 요청 관리
• 공지사항 관리
• 댓글 및 북마크 관리

(그림 삽입 권고: 기능 구조도)

4.3 데이터베이스 설계

4.3.1 개념적 설계

• 사용자(User): ID, 이름, 연락처, 이메일, 사진, 포인트 등
• 공지사항(News): 제목, 내용, 타입, 등록일, 이미지
• 지원 요청(Request): 제목, 물품명, 수량, 위치, 상태, 조회수
• 기부 정보(Donation): 관련 요청, 기부자, 수량, 비고, 등록일
• 댓글(Comment): 요청, 작성자, 내용, 답변, 등록일
• 북마크(Bookmark): 요청, 사용자, 타입, 등록일

4.3.2 물리적 설계

(모든 테이블의 구조는 위와 유사하게 정의됨)

5장 시스템 구현

5.1 사용자 정보 관리 모듈 관리자 전용 페이지에서 사용자 목록을 조회하고, 검색, 추가, 수정, 삭제 기능을 제공한다. 이름 기반의 부분 일치 검색도 가능하다.

(그림 삽입 권고: 사용자 관리 화면)

5.2 기부 정보 관리 모듈 기부 내역을 조회하고, 기부 정보를 수정하거나 삭제할 수 있다. 기부 이름, 타입, 등록일 등으로 조건 검색이 가능하다.

(그림 삽입 권고: 기부 정보 관리 화면)

5.3 공지사항 관리 모듈 새로운 공지를 등록하거나, 기존 공지를 수정/삭제할 수 있다. 게시물 제목, 내용, 이미지 등을 포함하여 완전한 관리가 가능하다.

(그림 삽입 권고: 공지사항 관리 화면)

5.4 기술 구현 예시

// NewsService.java
@Service("newsService")
@Transactional
public class NewsServiceImpl extends ServiceImpl<NewsDao, NewsEntity> implements NewsService {

    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        Page<NewsView> page = new Query<>(params).getPage();
        page.setRecords(baseMapper.selectListView(page, params));
        return new PageUtils(page);
    }
}

<!-- FileUpload.vue -->
<template>
  <el-upload
    :action="uploadUrl"
    :file-list="fileList"
    :on-success="handleSuccess"
    :on-remove="handleRemove"
    :limit="maxFiles"
    multiple
    accept=".jpg,.png,.jpeg"
  >
    <el-button size="small" type="primary">파일 업로드</el-button>
    <div slot="tip" class="el-upload__tip">최대 {{ maxFiles }}개의 이미지 업로드 가능</div>
  </el-upload>
</template>

<script>
export default {
  props: ['maxFiles', 'fileUrls'],
  data() {
    return {
      fileList: [],
      uploadUrl: '/api/upload/file'
    }
  },
  mounted() {
    this.initFileList();
  },
  methods: {
    initFileList() {
      if (this.fileUrls) {
        const urls = this.fileUrls.split(',');
        this.fileList = urls.map(url => ({ url }));
      }
    },
    handleSuccess(res, file) {
      if (res.success) {
        this.$emit('update:fileUrls', [...this.fileUrls, res.url].join(','));
      }
    },
    handleRemove(file, fileList) {
      this.$emit('update:fileUrls', fileList.map(f => f.url).join(','));
    }
  }
}
</script>

6장 시스템 테스트 모든 기능에 대해 단위 테스트 및 통합 테스트를 수행하였으며, 사용자 인터페이스의 반응성, 데이터 일관성, 보안 인증 흐름 등을 검증하였다. 테스트 결과, 시스템은 예상된 성능을 충족하며, 오류율은 매우 낮았다.