-
Java Web Game 개발 가이드(10)Java Web Game 개발 가이드 2010. 2. 3. 20:30
디자인
웹 표준은 선택이 아닌 필수
이제 실제적인 코딩에 들어가게 됩니다. 지금까지 꾸준히 읽어 주신 독자 분들께 감사 드립니다. 조금 재미없는 분석, 설계 단계를 넘어 이제 구현 단계에 까지 이르렀습니다. 여기까지 왔다면 여러분은 아마 머릿속에 아 이런 화면을 만들어서 저런 기능을 만들면 좋겠구나. 하는 아주 자세한 환상을 가지고 있을 것 입니다. 하지만 모든 개발의 처음에는 기본 골격을 잡는 데서 시작 합니다. 또한 그 골격을 잡기 위한 근간은 웹 표준 입니다.
웹 표준이란 웹을 개발 하기 위한 방법 중 올바른 HTML 마크 업을 사용하고, CSS 표준에 맞는 코딩을 준수하며 어떤 브라우저에서 열어도 동일한 결과를 출력, 동일한 의미를 지니도록 개발 하는 표준 방법론을 말합니다.
이 글에서는 웹 표준을 지켜 개발하는 마크 업, HTML 태그의 의미 등을 이미 독자가 알고 있다는 가정하에 글을 진행 하도록 하겠습니다. 웹 표준에 관한 지식은 수 많은 도서, 인터넷 등에서 쉽게 구할 수 있으며, 해당 지식을 전혀 몰라도 어느 정도는 이해 가능 하도록 글을 진행 하겠습니다.
이러한 웹 표준에 대해 강조하는 이유는 다음과 같습니다.
- 디자인과 java 구현 로직을 완벽히 분리하여 혼선을 최소화 한다.
- 최대한의 이미지 사용을 자제하여 취약한 영세 개발자의 이미지 개발 양을 줄이고 사이트 자체 속도를 높인다.
- 변경 사항을 적용 시나 유지 보수 시 최대한의 개발력을 유지한다.
- 인력이 추가 투입 되거나 빠져 나갈 때 리스크를 최소화 한다.
위의 장점 외에도 수많은 좋은 점이 있으나 위의 장점만 보더라도 혼자서 개발 하기 위해서는 표준으로 작업해야 충분한 작업 속도를 유지 할 수 있습니다.
웹 화면의 개발 방법을 설명하기 위해 기초적인 화면을 구현해 나가며 해당 스타일과 소스 부에 대한 설명을 첨부하며 진행 하겠습니다.
디자인을 완벽히 분리하라
일단 디자인을 완벽히 분리 하라는 의미는 html 코드에 섞여 들어가는 스타일성 코딩을 가급적 모조리 제거 하라는 의미 입니다. 이것을 위해서는 최 상단에 스타일 시트의 링크
<link href="<%=RequestUtils.getPageLink(request,"/common")%>/css/index.css" rel="stylesheet" type="text/css">
<style type="text/css">
@import url("index.css");
</style>
등을 이용해 스타일 시트를 링크 시키고 디자인 요소를 css 파일 속으로 모두 숨길 수 있도록 디자인 하라는 것입니다.
이렇게 디자인을 소스에서 모두 제거하고 의미에 맞는 HTML 태그를 이용하면 소스가 매우 간략하고 디자인에 유연한 코딩이 가능해 집니다.
위의 예처럼 구성하기 위해서는 디자인 파일을 위한 공간이 필요하게 됩니다. 필자는 영농 RPG를 개발 하기 위해 프로젝트 루트 밑에 common을 위한 폴더를 추가 하였습니다.
기왕 추가하는 김에 스타일 시트(CSS)를 담을 폴더와 top 메뉴, 바닥 글, 공통 스크립트를 위한 파일들 역시 추가 하였습니다.
웹 게임을 제작 시 플레이어가 최초를 접속을 하는 index 화면은 매우 중요합니다. 이 페이지가 무리 없이 매력적인 화면 일수록 플레이어들의 욕구를 자극 할 수 있지만 멋진 이미지를 기대 할 수 없는 우리들은 역시 기댈 것은 스타일 시트 밖에 없어 보입니다. 최대한 심플한 디자인에 멋진 화면을 가진 다른 웹 페이지를 많이 돌아다녀 봅니다. 이미지가 많이 들어가지 않은 사이트 일수록 좋습니다. 다음은 메인 화면의 시안을 작성해야 합니다.
먼저 메인 시안을 작성하기 위해 선행되어야 할 작업들 입니다.
- 화면에 보여 주어야 할 필수적인 요소들을 모아 봅니다.
- 문서화에서 수행 하였던 메뉴 구성도에 필수적인 기능을 구현하기 위해 노출해야 할 링크와 메뉴 들을 분류 합니다.
- 첫 화면에 들어갈 고객문의사항, 게시판 성 글, 디자인 요소들의 밑그림을 그려 봅니다.
- 자신이 사용자라면 나의 웹에 들어와서 이동하는 경로에 따른 최적 링크와 사용성을 고려하여 무리가 없는지를 판단해 봅니다.
이쯤에서 아마 여러분은 웹 개발을 위한 표준적인 절차는 어떤 것일까? 하는 의문이 들 것입니다. 전혀 안 궁금하다 구요? 그래도 이 이슈 사항은 웹이라는 컨텐츠를 계획하고 개발, 관리 하는데 상당히 좋은 개념이니 한번쯤 집고 넘어가 볼까 합니다.
웹을 분업화 하라.
웹의 구성요소는 아래와 같습니다.
- 화면에 표현될 컨텐츠 기획
- 화면에 표현될 컨텐츠를 표현하는 문서의 구조 HTML
- HTML를 효과적으로 보여줄 디자인 파일 CSS
- 컨텐츠와 디자인으로 코딩 된 HTML 파일에 동적인 내용으로 데이터를 다루는 개발(JSP 변환)
위와 같은 개발 요소들을 각 분야마다 전문가가 차례로 개발을 하게 됩니다.
위의 개발 요소 중에 가장 중요한 역할을 할 단계는 아무래도 기획 입니다. 유능한 기획자는 이미 여러분이 지금까지 해 왔던 수많은 추상화, 설계, 구현방침을 모두 숙지하고 있을 것이며 지금 바로 여러분이 최고의 기획자가 되어 있는 것입니다. 웹 개발의 모든 설계도는 이 기획의 단계에서 표현되게 됩니다.
여러분이 보고 있는 아름답고 화려한 웹 화면을 만들어주는 것은 디자이너 입니다. 디자인은 개발 직전에 적용 되어질 것이기 때문에 웹의 기획 단계에서는 디자인을 완전히 배제한 하나의 정보전달 문서로서 바라 보아야 합니다. 즉 INDEX.JSP 화면에 표현될 데이터를 추상화 하여 그 내용을 HTML로 구조화(마크 업)하는 것이 일차적인 목표가 됩니다.
마크 업 이라는 단계는 html문서를 의미에 맞는 마크(문서 태그)를 이용하여 html문서로 생산해 내는 것을 말합니다. 여러분은 이미 위에서 index 화면에 표현 되어질 내용을 분류하여 가지고 있을 것입니다. 그리고 이 마크 업을 하면서 화면의 구조에 대한 고려사항도 더해야 합니다.
위는 영농 RPG 게임의 웹 메인 디자인 시안(스토리 보드) 입니다. 가상의 웹 사이트 이니 만큼 적절한 최소한의 컨텐츠 만을 담고 있습니다. 여러분이 제작할 웹 게임 역시 무턱대고 html 코드를 생산 하는 화면 디자인에 뛰어들기 보다 위와 같은 컨텐츠의 디자인이 선행되어야 할 것입니다.
시안 문서는 위는 화면을 HTML 코드를 작성하기 전에 이렇게 화면이 표현될 것이다라고 미리 그려 보는 것입니다. 이 문서를 작성해서 생각해 보면 추가적인 요소나 삭제할 요소들이 보이게 됩니다. 이제 시안이 맘에 든다면 HTML 코딩을 들어가 봅니다. 위에 빨간 테두리를 눈 여겨 봅니다. 영농 RPG의 index 화면은 크게 상단의 제목, 공지사항과 게임 START 버튼, 서버 현황 판, 바닥글로 이루어져 있습니다.
위의 구조를 Html 로 표현하면 다음과 같습니다.
<body>
<!-- 상단 광고 및 대 메뉴 리스트 시작-->
<div id="top">
<h1>로고 및 제목</h1>
<ul>
<li><a href="logout.jsp">로그아웃</a></li>
<li>나의정보</li>
</ul>
<div>
광고 및 이벤트 성 Display
</div>
<ul>
<li>홈으로</li>
<li>게임정보</li>
<li>자유 게시판</li>
<li>서버별 게시판</li>
<li>캐쉬 샵</li>
<li>고객마당</li>
</ul>
</div>
<!-- 상단 광고 및 대 메뉴 리스트 시작 끝-->
<!-- 공지사항 및 게임 start 시작-->
<div id="game_start">
<div>
<h2>아직도 영농 RPG의 회원이 아니세요?</h2>
<input type="submit" value="GAME START" />
</div>
<div>
<h2>공지사항</h2>
<table>
<tr>
<th>등록일</th>
<th>내용</th>
</tr>
<tr>
<td>2010-01-10</td>
<td>공지사항 테스트...</td>
</tr>
<tr>
<td>2010-01-15</td>
<td>5줄 공지사항...</td>
</tr>
</table>
</div>
</div>
<!-- 공지사항 및 게임 start 끝-->
<!-- 서버 현황 판 시작-->
<div id="server_list">
<h3>서버 리스트</h3>
<div>
<h4>벼 서버</h4>
<ul>
<li>참여인원</li>
<li>영지 달성률</li>
<li>1위 플레이어</li>
<li>서버 시작일</li>
<li>세율</li>
</ul>
<ul>
<li>4807 명</li>
<li>55%</li>
<li>파뿌리가</li>
<li>2009-09-20</li>
<li>4.5%</li>
</ul>
</div>
<div>
<h4>당근 서버</h4>
<ul>
<li>참여인원</li>
<li>영지 달성률</li>
<li>1위 플레이어</li>
<li>서버 시작일</li>
<li>세율</li>
</ul>
<ul>
<li>3850 명</li>
<li>39%</li>
<li>당금 파</li>
<li>2009-10-31</li>
<li>4.0%</li>
</ul>
</div>
</div>
<!-- 서버 현황 판 끝-->
<!-- 바닥글 시작-->
<div id="bottom">
<ul>
<li>영농 RPG 고객센터</li>
<li>찾아 오시는 길</li>
<li>광고 안내</li>
<li>개인정보 정책</li>
</ul>
<div>
<ADDRESS>********** 대표전화 <strong>010-1111-1111</strong></ADDRESS>
<p>
대표자: <strong>아무개</strong> 사업자등록번호 <strong>111-11-11111</strong> 게임제작업자등록증 양천구청 제 <strong>2009-0</strong>호
</p>
</div>
Copyright © 2009 by webgames. All rights Reserved.
</div>
<!-- 바닥글 끝-->
</body>
위의 html 화면을 브라우저로 열어 보면 다음과 같습니다.
Html mark 에 대한 설명은 생략 하겠습니다. 위의 마크 업은 최소한의 필요한 태그만을 사용하고 의미에 맞도록 작성된 코드 입니다. 이 Html 에는 화면에 표기 되어야 할 컨텐츠와 문서의 흐름, 내용들이 들어 있습니다. 내용들 중 데이터 베이스에서 가져올 컨텐츠 들은 모두 가상 데이터로 채워 넣어 졌습니다. 이 문서가 작성되면 디자인과 개발이 동시에 진행 될 수 있습니다. 이런 컨텐츠와 기획 데이터를 토대로 적절한 마크 업을 이용해 기획자-디자이너-개발자를 이어주는 작업을 퍼블리싱 작업이라 합니다. 문서가 퍼블리싱 되었으면 디자인을 들어가고 개발 역시 조회하여 디자인이 제거되어 있는 화면에 표현해 주면 됩니다.
디자인 작업을 들어가야 하지만 디자인 요령을 습득하기에는 index.jsp보다 실제 게임 화면 디자인으로 요령을 설명하는 것이 더 쉽기 때문에 index.jsp는 여러분의 숙제로 남겨두고 Game Start 를 선택 하였을 때 이동 하는 메인 화면을 디자인해 보겠습니다. 퍼블리싱 작업 까지는 index.jsp 를 작성하던 요령과 같습니다. 실질적인 디자인 작업을 하기 전에 몇 가지 중요한 사실을 짚고 넘어가겠습니다. 여러분은 비록 자신의 포토 샵 실력이 좋지 않고, 디자인 경력이 없다 하더라도 부끄럽지 않은 멋진 화면을 만들고 싶을 것 입니다. 하지만 그렇다고 전문적인 이미지를 생산 할 수 없는 여러분은 이곳 저곳의 이미지를 퍼 옴으로서 이용하게 될 것 입니다. 나쁜 선택은 아니지만 4가지만 주의 하면 될 것 입니다.
- 이미지로 도배할 생각은 하지 말 것.
- 최소한의 이미지와 CSS 만으로도 아주 화려한 사이트를 만들 수 있습니다.
- 간격조절, 메뉴 리스트의 이미지 링크 처리, 큰 이미지를 배경에 이용 하는 이미지의 사용은 자제 하는 것이 좋습니다. (CSS 만으로 같은 효과를 만들 수 있습니다.)
- 이미지 저작권을 위배하지 말 것
- 저작권은 여러분이 생각하는 것 이상으로 광범위하게 적용되며, 실질적으로 모든 이미지는 저작권이 있다라고 생각해야 합니다.
- 행여 사용되는 이미지는 원본을 떠올리기 힘들 정도의 높은 보정을 거쳐야 할 것입니다.
- 이미지의 백업 관리를 철저히 할 것.
- 포토 샵 처리된 이미지의 백업을 하지 않으면 이미지가 변경, 추가 될 경우 상당히 곤란해 질 수 있습니다. 백업은 이미지 원본, 포토 샵 처리된 파일, 포토 샵에서 나온 gif, png 파일을 종류, 위치 별로 분류해 항상 백업해 두어야 합니다.
- 한 페이지에 사용하는 이미지의 총 크기는 800K 를 가급적 넘지 말 것을 권해 드립니다.
- 800K는 생각보다 대단히 많은 이미지 양입니다. 이 용량을 넘으면 회선이 모뎀 수준의 느린 사용자는 답답함을 느껴 즐기기 힘들어 집니다.
- 이미지의 용량이 커 지더라도 이미지 최적화를 통해 낮추어 줍니다.
다음은 영농 RPG의 메인 화면 시안 작성과 그 퍼블리싱 결과 입니다.
신개념 영농 RPG
홈으로
게임정보
자유 게시판
서버별 게시판
캐쉬 샵
고객마당
현재 영지 자원 및 인구, 생산량 현황
이동 메뉴
영지 화면
추가 건축
영지관리
전체지도
나의 작물관리
품종개량
아이템 관리
경매장
내 경매장 판매 현황
자금 관리
벼 X 12(Kg)
45,000 원
나의 자금
₩35,840,000
원
적립
240,000(원)
당근 X 35(Kg)
24,800 원
세율
3.6
%
수수료율
0.12(%)
울금 X 5(Kg)
95,000 원
영지레벨
12
Level
Upgrade
358,400(원)
바닥글
<body>
<!-- 상단 광고 및 대 메뉴 리스트 시작-->
<div id="top">
<ul>
<li><a href="logout.jsp">로그아웃</a></li>
<li>나의정보</li>
</ul>
<h1>신개념 영농 RPG</h1>
<ul>
<li>홈으로</li>
<li>게임정보</li>
<li>자유 게시판</li>
<li>서버별 게시판</li>
<li>캐쉬 샵</li>
<li>고객마당</li>
</ul>
</div>
<!--메뉴 리스트 시작 끝-->
<!-- 영지 정보 시작-->
<div id="territory">
<ul>
<li>영지관리</li>
<li>전체지도</li>
<li>나의 작물관리</li>
<li>품종개량</li>
<li>아이템 관리</li>
<li>경매장</li>
</ul>
<ul>
<li>추가건축물</li>
<li>물레방아</li>
<li>관로관리소</li>
<li>풍차</li>
<li>품종관리소</li>
</ul>
</div>
<!-- 영지 정보 끝-->
<!-- 경매장 요약정보 및 자금 요약 창 시작-->
<div id="server_list">
<div>
<h3>내 경매장 판매 현황</h3>
<ul>
<li>벼 X 12(Kg)</li>
<li>당근 X 35(Kg)</li>
<li>울금 X 5(Kg)</li>
</ul>
<ul>
<li>45,000 원</li>
<li>24,800 원</li>
<li>95,000 원</li>
</ul>
</div>
<div>
<h3>자금 관리</h3>
<ul>
<li>나의 자금</li>
<li>세율</li>
<li>영지레벨</li>
</ul>
<ul>
<li>₩35,840,000 원</li>
<li>3.6 %</li>
<li>12 레벨</li>
</ul>
<ul>
<li>적립</li>
<li>수수료율</li>
<li>Upgrade</li>
</ul>
<ul>
<li>240000(원)</li>
<li>12 (%)</li>
<li>358,400(원)</li>
</ul>
</div>
</div>
<!-- 경매장 요약정보 및 자금 요약 창 끝-->
<!-- 바닥글 시작-->
<div id="bottom">
<ul>
<li>영농 RPG 고객센터</li>
<li>찾아 오시는 길</li>
<li>광고 안내</li>
<li>개인정보 정책</li>
</ul>
<div>
<ADDRESS>********** 대표전화 <strong>010-1111-1111</strong></ADDRESS>
<p>
대표자: <strong>아무개</strong> 사업자등록번호 <strong>111-11-11111</strong> 게임제작업자등록증 양천구청 제 <strong>2009-0</strong>호
</p>
</div>
Copyright © 2009 by webgames. All rights Reserved.
</div>
<!-- 바닥글 끝-->
</body>
물론 이화면은 예시를 위한 화면이므로 위 단계에서 영농 RPG에 대해 상세화한 항목들이 많이 빠져 있습니다. 하지만 지금은 코딩을 진행 해 나가는 과정을 설명함으로 이대로 진행하도록 하겠습니다.
먼저 각 주제별 div로 블록 지어져 있는 구조를 시안에 맞는 구조로 변환해 보겠습니다.
상단에 css 파일을 link 하고 전체적인 기본 스타일을 주기 위해 base.css 라는 파일을 gamestart.css에 import 시킵니다. 이렇게 import 시켜서 공통적인 스타일을 모든 스타일 화면에 손쉽게 적용 할 수 있습니다.
<link href="<%=RequestUtils.getPageLink(request,"/common")%>/css/gamestart.css" rel="stylesheet" type="text/css">
<%=RequestUtils.getPageLink(request,"/common")%>/ 은 현재 구동 서버의 컨텍스트 패스 즉 루트 경로를 알아오기 위해 사용합니다. 행여 서버의 루트 패스가 컨텍스트 경로를 포함하지 않더라도 경로를 올바르게 얻어옵니다. 대개 사용하지 않아도 괜찮습니다.
/* whole default style definition : start */
html,
body {
margin: 0;
padding: 0;
font-size: small;
font-family: AvantGarde-BookOblique, "새굴림", sans-serif;
}
acronym {
cursor: help;
}
form {
margin: 0;
padding: 0;
}
h1{
font-size: 13px;
}
h2{
font-size: 12px;
}
ul{
list-style: none;
}
a {
cursor: pointer;
}
a:link, a:visited {
color: #78777C;
text-decoration: none;
}
a:active, a:hover {
text-decoration: underline;
}
/* whole default style definition : end */
#foot {
clear: both;
background-color: #eee;
text-align: center;
}
#foot ul{
margin: 5px 0 5px 0;
padding:0;
display: inline-block;
}
#foot li{
margin: 0 5px 0 5px;
float: left;
}
#foot p{
margin: 0;
padding:0;
text-align: center;
}
#foot ADDRESS{
margin: 0;
padding:0;
font-style:normal;
}
태그 별로 마진이나 패딩, 리스트 스타일을 없애고 a 링크 태그의 기본 속성등과 전체적인 글꼴 사이즈를 조절해 둡니다. 또 바닥글은 어디에나 동일하게 위치하기 때문에 base.css에 공통적으로 포함시켰습니다. 관리가 힘들다면 이런 공통 속성을 한데 모아 따로 관리합니다. 그리고 각 영역을 쉽게 알아 보기 위해 gamestart.css에 색상을 넣고 좀더 세부적인 컨트롤을 위해 태그에 id를 추가 합니다.
<div id="top">
<h1>신개념 영농 RPG</h1>
<ul id="logout">
<li><a href="logout.jsp">로그아웃</a></li>
<li>나의정보</li>
</ul>
<ul id="top_menu">
<li>홈으로</li>
<li>게임정보</li>
<li>자유 게시판</li>
<li>서버별 게시판</li>
<li>캐쉬 샵</li>
<li>고객마당</li>
</ul>
</div>
이제 top메뉴를 옆으로 나란히 두기 위해 <li> 에 float 속성을 넣습니다.
<ul> 태그의 마진과 패딩으로 조금씩 공간이 있네요. 이걸 base.css 에 공통적으로 <ul>의 마진과 패딩을 0으로 조정 합니다.
ul{
list-style: none;
margin: 0;
padding:0;
}
이제 적용한 li의 메뉴의 폰트 크기를 키우고 로그아웃은 오른쪽 끝으로 보내기 위해 float: right 로 변경 합니다. 또 li 태그의 패딩을 없애고 마진을 이용해 메뉴 간격을 조정 합니다.
위의 화면에 보면 float 속성으로 흐름에서 붕 떠오른 메뉴들로 뒤에 있는 div 부분이 높이를 무시하게 되고 h1속성이 옆으로 붙어 있습니다. 이를 해결 하기 위해 top에뉴에도 float 속성을 추가 합니다. 하지만 마찬가지로 float으로 두 번째 맵이 표현될 territory 부분이 다시 오른쪽에 붙기 때문에 다시 top의 width:100%로 줍니다. 여기에 h1의 정렬과 글자 크기를 조정하면 다음과 같습니다.
기본적인 top의 화면 구성이 완성 되었습니다. 이 상태에서 브라우저를 줄이거나 늘여도 각 속성은 알맞게 간격을 자동으로 조절 합니다. 아래는 gamestart.css 입니다.
@import url("base.css");
#top{
width: 100%;
float: left;
background-color: #ffcdcd;
}
#top h1{
text-align: center;
font-size: 120%;
}
#logout li{
float: right;
padding: 0;
margin: 0 0 0 10px;
}
#top_menu li{
font-size: 150%;
padding: 0;
margin: 0 0 0 10px;
font-weight: bold;
float: left;
}
#territory{
background-color: #d5ffd1;
}
#summary{
background-color: #d7d1ff;
}
아주 간결하게 작성된 css 입니다. 이제 그 아래쪽 지도 영역과 나머지도 꾸며 봅니다. 좀더 화려한 버튼과 메뉴는 잠시 전체적인 틀을 완성하고 적용해 보겠습니다.
다음은 영지가 표현될 가운데 지도 표시 부 입니다. 이곳의 메뉴는 양 옆쪽에 위치 해야 하지만 왼쪽에 모두 붙어 있습니다. 양 옆쪽으로 이동시키고 높이를 조정해 봅니다.
@import url("base.css");
#top{
width: 100%;
float: left;
background-color: #ffcdcd;
}
#top h1{
text-align: center;
font-size: 120%;
}
#logout li{
float: right;
padding: 0;
margin: 0 0 0 10px;
}
#top_menu li{
font-size: 150%;
padding: 0;
margin: 0 0 0 10px;
font-weight: bold;
float: left;
}
#territory{
background-color: #f1ffd7;
min-height: 400px;
}
#territory li{
font-size: 105%;
font-weight:bold;
color: #ffb141;
margin: 0 0 3px 0;
padding: 5px;
background-color: #502f00;
}
#territory ul{
position: fixed;
top: 100px;
}
#left_menu{
left: 10px;
}
#right_menu{
right: 10px;
}
#summary{
background-color: #d7d1ff;
}
Position: fixed 를 이용해 오른쪽으로 왼쪽으로 위치 시켰습니다. 아래쪽 상세 정보도 수정해 봅니다.
#summary{
float: left;
width: 100%;
background-color: #d7d1ff;
}
#summary div{
float: left;
}
#summary ul{
width: 120px;
margin-left: 5px;
float: left;
}
이렇게 css로 쉽게 기본적인 구조를 설정 할 수 있습니다. 이제 좀더 게임화면 다운 색감과 메뉴들을 꾸며 볼까요? 상단의 배경 색상을 제거 하고 좀더 중후한 색감을 입히고 로고를 멋지게 꾸며 봅니다. 로고는 아무래도 장르 명 보다 가명을 따는 게 낳을 듯 해 Farming Adventure(가제)로 설정할 까 합니다.
Css 디자인을 입힌 화면입니다. 위의 화면에서 사용된 이미지는 3가지입니다. 상단 메뉴 제목 양 옆의 2장과 가운데 지도 화면입니다. 위의 디자인은 화면을 늘이거나 줄여도 각 요소들은 위치를 유지하며 이동합니다. 물론 오랜 시간 공들이지 않고 잠깐 동안 작업하여 만든 화면이라 그리 훌륭하다 할 수는 없지만 웹 게임 화면을 만들기 위한 예시로는 어느 정도 공감 갈 만한 소스라 생각합니다. 다음은 이 화면을 디자인하기 위해 사용된 css 파일의 전문입니다.
Gamestart.css
@import url("base.css");
#top{
width: 100%;
float: left;
min-width: 750px;
max-width: 1800px;
background: #331400 url(/img/main_bg_left.png) no-repeat 20% 0;
}
#top_inner{
width: 100%;
float: left;
background: url(/img/main_bg_right.png) no-repeat 80% 0;
}
#top h1{
margin: 0;
padding:0;
text-align: center;
font-size: 180%;
font-family: times New Roman, cursive;
color: #ffd8b1;
}
#top em{
font-size: 10%;
font-weight:lighter;
}
#logout li{
float: right;
padding: 5px;
margin: 0 0 0 10px;
background-color: #5b0000;
color: #f0b568;
border: 1px solid #885d5d;
}
#logout a{
background-color: #5b0000;
color: #f0b568;
}
#top_menu{
width: 100%;
float: left;
border-bottom: 2px solid #eee;
}
#top_menu li{
font-size: 130%;
padding: 3px;
margin: 10px 0 0 10px;
font-weight: bold;
float: left;
background-color: #5b0000;
color: #f0b568;
border: 1px solid #885d5d;
}
#territory{
background: url(/img/farm.gif) no-repeat 0 0;
height: 750px;
}
#territory li{
font-size: 105%;
font-weight:bold;
color: #ffb141;
margin: 0 0 3px 0;
padding: 5px;
background-color: #502f00;
}
/*id에서 적용되지 않는 fixed 속성 핵 시작*/
.fixed {position:absolute;}
#territory > ul.fixed{ position: fixed; }
/*id에서 적용되지 fixed 속성 핵 끝*/
#territory ul{
top: 100px;
}
#left_menu{
left: 10px;
}
#right_menu{
right: 10px;
}
#summary{
float: left;
width: 100%;
background-color: #3a1300;
}
#summary div{
float: left;
margin: 15px;
padding:10px;
border: 1px solid #f4a100;
}
#summary ul{
width: 120px;
float: left;
}
#summary h3{
color: #f2ff5e;
font-size: 120%;
margin: 10 20px 5px 0;
}
#summary .summary_head li{
color: #cd4400;
font-size: 95%;
font-weight: bold;
}
#summary .summary_val li{
font-size: 95%;
font-weight: lighter;
color: #eee;
}
이 디자인을 표현 하기 위한 html 문서입니다.
<body>
<!-- 상단 광고 및 대 메뉴 리스트 시작-->
<div id="top">
<div id="top_inner">
<h1>Farming Adventure<em>신개념 영농 RPG</em></h1>
<ul id="logout">
<li><a href="logout.jsp">로그아웃</a></li>
<li>나의정보</li>
</ul>
<ul id="top_menu">
<li>HOME</li>
<li>게임정보</li>
<li>자유 게시판</li>
<li>서버별 게시판</li>
<li>캐쉬 샵</li>
<li>고객마당</li>
</ul>
</div>
</div>
<!--메뉴 리스트 시작 끝-->
<!-- 영지 정보 시작-->
<div id="territory">
<ul id="left_menu" class="fixed">
<li>영지관리</li>
<li>전체지도</li>
<li>나의 작물관리</li>
<li>품종개량</li>
<li>아이템 관리</li>
<li>경매장</li>
</ul>
<ul id="right_menu" class="fixed">
<li>추가건축물</li>
<li>물레방아</li>
<li>수로관리소</li>
<li>품종관리소</li>
<li>풍차</li>
</ul>
</div>
<!-- 영지 정보 끝-->
<!-- 경매장 요약정보 및 자금 요약 창 시작-->
<div id="summary">
<div>
<h3>내 경매장 판매 현황</h3>
<ul class="summary_head">
<li>벼 X 12(Kg)</li>
<li>당근 X 35(Kg)</li>
<li>울금 X 5(Kg)</li>
</ul>
<ul class="summary_val">
<li>45,000 원</li>
<li>24,800 원</li>
<li>95,000 원</li>
</ul>
</div>
<div>
<h3>자금 관리</h3>
<ul class="summary_head">
<li>나의 자금</li>
<li>세율</li>
<li>영지레벨</li>
</ul>
<ul class="summary_val">
<li>₩35,840,000 원</li>
<li>3.6 %</li>
<li>12 레벨</li>
</ul>
<ul class="summary_head">
<li>적립</li>
<li>수수료율</li>
<li>Upgrade</li>
</ul>
<ul class="summary_val">
<li>240000(원)</li>
<li>12 (%)</li>
<li>358,400(원)</li>
</ul>
</div>
</div>
<!-- 경매장 요약정보 및 자금 요약 창 끝-->
<!-- 바닥글 시작-->
<div id="foot">
<ul>
<li>영농 RPG 고객센터</li>
<li>찾아 오시는 길</li>
<li>광고 안내</li>
<li>개인정보 정책</li>
</ul>
<p>
대표자: <strong>아무개</strong> 사업자등록번호 <strong>111-11-11111</strong> <strong>02)0303-0303</strong>
<br>
Copyright © 2009 by webgames. All rights Reserved.
</p>
</div>
<!-- 바닥글 끝-->
</body>
'Java Web Game 개발 가이드' 카테고리의 다른 글
Java Web Game 개발 가이드(12) (1) 2010.02.03 Java Web Game 개발 가이드(11) (0) 2010.02.03 Java Web Game 개발 가이드(9) (0) 2010.02.03 Java Web Game 개발 가이드(8) (0) 2010.02.03 Java Web Game 개발 가이드(7) (0) 2010.02.03
