전자정부프레임워크의 화면 구성 및 템플릿 활용

2024. 12. 24. 11:21

전자정부프레임워크에서 화면을 구성하는 방법과 템플릿을 활용해 UI를 효율적으로 관리하는 방법을 학습합니다. 전자정부프레임워크는 JSP 기반의 템플릿 시스템을 지원하며, 화면의 일관성을 유지하고 유지보수를 간소화하는 데 도움을 줍니다.

1. 전자정부프레임워크의 화면 구성 개요

전자정부프레임워크의 화면 구성은 주로 다음과 같은 구조로 이루어집니다:

템플릿 페이지: 공통된 레이아웃을 정의 (헤더, 메뉴, 푸터 포함)
개별 화면: 템플릿의 특정 영역(메인 콘텐츠)에만 각 화면별 콘텐츠를 추가
CSS/JavaScript: 외부 파일로 관리하여 재사용 가능

2. 템플릿 페이지 작성

2-1. 기본 템플릿 파일

/WEB-INF/jsp/template/template.jsp

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${pageTitle}</title>
    <link rel="stylesheet" href="/css/style.css">
    <script src="/js/script.js"></script>
</head>
<body>
    <!-- Header 영역 -->
    <header>
        <h1>전자정부프레임워크 예제</h1>
        <nav>
            <ul>
                <li><a href="/home.do">Home</a></li>
                <li><a href="/about.do">About</a></li>
                <li><a href="/contact.do">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- Main Content 영역 -->
    <main>
        <jsp:include page="${contentPage}" />
    </main>

    <!-- Footer 영역 -->
    <footer>
        <p>Copyright © 2024. 전자정부프레임워크.</p>
    </footer>
</body>
</html>

3. 개별 화면 작성 및 템플릿 적용

3-1. Controller에서 템플릿 적용

HomeController.java

@Controller
public class HomeController {
    @RequestMapping("/home.do")
    public String home(Model model) {
        model.addAttribute("pageTitle", "홈페이지");
        model.addAttribute("contentPage", "/WEB-INF/jsp/home.jsp");
        return "template/template";
    }
}

3-2. 개별 화면 JSP 작성

/WEB-INF/jsp/home.jsp

<section>
    <h2>Welcome to e-Government Framework</h2>
    <p>전자정부프레임워크를 활용하여 웹 애플리케이션을 개발하는 예제입니다.</p>
</section>

4. CSS 및 JavaScript 관리

4-1. CSS 파일 작성

/webapp/css/style.css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 1em;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 1em;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1em;
    position: absolute;
    bottom: 0;
    width: 100%;
}

4-2. JavaScript 파일 작성

/webapp/js/script.js

document.addEventListener('DOMContentLoaded', function () {
    console.log('Page loaded successfully.');
});

5. 실행 화면 확인

5-1. 접속 URL

http://localhost:8080/home.do

5-2. 출력 화면

헤더 영역: 전자정부프레임워크 제목과 메뉴
메인 영역: "Welcome to e-Government Framework" 메시지와 설명
푸터 영역: 저작권 정보

6. 템플릿 활용 팁

공통 요소 관리: 템플릿을 통해 헤더, 푸터, 네비게이션 메뉴 등을 중앙에서 관리 가능
개별 콘텐츠의 독립성 유지: jsp:include로 페이지를 구성해 각 화면의 독립성 보장
디자인 통일성 확보: CSS와 JavaScript를 재사용하여 일관성 있는 디자인 유지
유지보수 효율성: 템플릿에서 공통 요소를 수정하면 모든 페이지에 반영

7. 마무리

이번 시간에는 전자정부프레임워크에서 화면을 구성하고 템플릿을 활용하는 방법을 학습했습니다. 템플릿은 프로젝트의 UI와 UX를 효과적으로 관리하는 데 중요한 역할을 합니다. 다음에서는 공통 코드 관리 및 메시지 처리를 학습합니다.

저작자표시

'개발 > 전자정부프레임워크' 카테고리의 다른 글

전자정부프레임워크에서 파일 업로드 및 다운로드 구현 (0)	2024.12.24
전자정부프레임워크에서 공통 코드 관리 및 메시지 처리 (2)	2024.12.24
전자정부프레임워크의 로그 기능 구현 (0)	2024.12.24
전자정부프레임워크에서 트랜잭션 처리하기 (0)	2024.12.24
전자정부프레임워크의 MyBatis 활용 기본 (0)	2024.12.23

subinto의 개발노트