모바일웹 만들기

사이트 기획

사이트맵 구상하기

모바일웹의 경우 PC웹과 달리 모바일에서 사용하기 힘든 메뉴를 제거하여 사이트맵을 다르게 구성하는 경우가 많습니다.
솔루션에서는 이러한 점 때문에 모바일웹의 사이트맵을 따로 구성 할 수 있도록 되어있습니다.
본 강좌에서는 특별히 제거할 메뉴가 없으므로 PC웹과 같은 구성을 사용합니다.

  • 회사소개
    • CEO 인사말
    • 오시는 길
  • 제품소개
    • (자동생성 카테고리1)
    • (자동생성 카테고리2)
    • (자동생성 카테고리3)
  • 견적문의
    • 견적문의 현황
    • 방문 상담원 소개
    • 제휴문의
  • 커뮤니티
    • 공지사항
    • 자유게시판
    • 갤러리

기능 구상하기

PC웹을 제작하면서 각 페이지 기능에 대해서 자세히 설명하였지만, 확인하는 차원에서 각 메뉴별 기능을 다시 한번 간단히 짚고 넘어가도록 하겠습니다.

  • 회사소개

    "CEO 인사말", "오시는길" 은 프로그램 기능이 없기 때문에 [추가페이지] 입니다.
    ([디자인관리 > 고급 디자인 관리 > 추가 페이지 관리] 에서 추가, 수정, 삭제가 가능합니다.)

  • 제품소개

    제품을 등록하고 수정하기 용이하도록 [제품소개 솔루션]을 사용합니다.
    (페이지 소스 관리는 [디자인관리 > 고급 디자인 관리 > 세부 화면 디자인]에 있습니다.)

  • 견적문의

    "견적문의 현황"은 [견적문의] 기능을 사용합니다.
    "방문 상담원 소개"는 일반적이지 않은 형태의 게시판이므로 [맞춤게시판]을 사용합니다.
    "제휴문의"는 글쓰기 폼만 있고 리스트화면이 필요없어서 [맞춤전송폼]을 사용합니다.
    (모든 기능들은 [프로그램 샵] 안에 있습니다.)
    (홈페이지에서 입력된 자료들은 [컨텐츠관리]에서 확인이 가능합니다.)

  • 커뮤니티

    "공지사항", "자유게시판", "갤러리" 는 [일반게시판] 입니다.
    ([커뮤니티] 메뉴에서 설정 및 게시글 관리가 가능합니다.)

이렇게 각 페이지 기능을 정리 하였다면, PC웹과 비슷하게 아래과 같은 순서로 모바일웹을 제작합니다. (중요)
사이트맵 구성 → 페이지별 기획 → 레이아웃스킨 제작 → 메인화면 제작 → 각 페이지별 생성 → 네비게이션 마법사 생성 → 각종 메인 출력 프로그램 세팅 → 완성

이 중 [추가페이지]로 구성되는 "CEO 인사말", "오시는길" 이 외에는 PC웹 제작을 하면서 설치 및 구성을 완료하였으므로, 간단히 디자인만 수정하면 바로 연동이 가능합니다.
정리가 완료되었다면, 이제 실제 페이지를 만들어 보겠습니다.

css생성과 html에 적용하기

css만들기

PC웹과 모바일웹은 구조가 다르기 때문에, 모바일웹에서 사용할 css 파일을 따로 생성해야 합니다.
[디자인관리 > 고급 디자인 관리 > CSS 파일관리]로 이동 후 아래와 같이 기본 css파일을 등록합니다.

기본적인 디자인 형태를 위해서, 모바일 css 소스를 다음과 같이 작성하였습니다.

.viewport { font-size: 12px; }
.dot_box { position: relative; margin: 10px; padding: 10px; border: 1px dashed #666666; }
#header h1 { margin: 0; font-size: 12px; }
#header .tel { position: absolute; right: 0; top: 0; padding: 10px; }
#footer p { text-align: center; }

css를 html에 적용하기

css 생성이 완료되었다면 모든 페이지에 적용시키기위해, 해당 css 파일의 <load> 부분을 복사합니다.


복사된 것을 [디자인관리 > 고급 디자인 관리 > 전체 화면 구성]페이지에서 <head> 부분에 붙여넣고 저장합니다. (<head> 부분도 PC웹과 모바일웹이 나누어져 있으니, 꼭 필요한 모바일용 css 만 추가해주도록 합니다.)

레이아웃 스킨 만들기

[디자인관리 > 고급 디자인 관리 > 스킨 관리]에서 layout 스킨을 생성해 보도록 합니다.
모바일웹은 일반적으로 메인과 서브의 형태가 같기 때문에 layout 스킨 하나만 생성하도록 하겠습니다.



모바일웹은 다양한 스마트기기의 크기에서도 문제가 없도록, Table을 사용하지않고 div로 코딩을 하시는 편이 좋습니다.

레이아웃 스킨 디자인 샘플소스

<div class="viewport">
	<!-- 상단 디자인 출력 부분 -->
	<header id="header" class="dot_box">
		<h1><a href="/main">LOGO</a></h1>
		<span class="tel">[전화걸기 버튼]</span>
		[네비게이션 메뉴]
	</header>

	<!-- BODY 본문 디자인 출력 부분 -->
	<div id="containter" class="dot_box">
		{BODY_CONTENT}
	</div>

	<!-- 하단 디자인 출력 부분 -->
	<footer id="footer" class="dot_box">
		<p>로그인 | 회원가입</p>
		<p>
			홈페이지명 : {$shop_base[shop_name]}<br>
			운영자 : 웹돌이<br>
			이메일주소 : aaaa@naver.com
		</p>
	</footer>
</div>

메인화면 제작

사이트의 얼굴이라고 할 수 있는 메인페이지를 만들어 보도록 하겠습니다.
[디자인관리 > 고급 디자인 관리 > 메인 화면 디자인]에서 [새로 만들기] 를 통해서 메인 페이지를 생성합니다.

메인화면 소스

[메인 슬라이드 이미지 출력 프로그램]
<br />
[공지사항 최근 게시글]
<br />
[자유게시판 최근 게시글]
<br />
[사진 게시판 최근 게시글]

생성이 완료 되었다면, 좌측 목록에서 방금 생성한 '기본 메인 화면'을 선택해주시고, 상단에서 스킨도 설정해 주시기 바랍니다.


'Mobile확인' 을 눌러 정상적으로 출력되는지 확인해보세요.


컨텐츠 생성

추가 페이지

CEO 인사말, 오시는길 같은 추가 페이지의 경우, 일반적으로 PC웹과 다른 형태로 제작이 되기 때문에 각각 새로 생성해주셔야 합니다.
[디자인관리 > 고급 디자인 관리 > 추가 페이지 관리]에서 다음과 같이 페이지를 생성합니다.

CEO 인사말 소스

<br>
안녕하세요 CEO 인사말 디자인 페이지 입니다.<br>
<br>
본 페이지 디자인은 생략 하도록 하겠습니다.<br>
<br>
<br>


오시는길 소스

<script>
// 타이틀, 주소, 가로, 세로, 줌
// 주소를 입력하지 않으면 접속한 회원의 현재위치를 출력한다.
google_map_addr("{$shop_base[company_name]}","{$shop_base[addr1]} {$shop_base[addr2]}",'100%',200,16);
</script>
<br>
<br>
<span cond="$shop_base[company_name]">상호 : {$shop_base[company_name]} </span><br>
<span cond="$shop_base[addr1]">주소 : {$shop_base[addr1]} {$shop_info[addr2]} </span><br>
<span cond="$shop_base[help_tel]">연락처 :  {$shop_base[help_tel]}</span><br>

게시판 생성

게시판들은 PC웹을 제작하면서 생성을 하였기 때문에, 간단한 설정만하면 바로 연동이 가능합니다.
[커뮤니티 > 게시판 관리 > 게시판 관리]페이지의 [디자인관리] 에서 스킨과 색상을 변경합니다.
공지사항, 자유게시판, 갤러리 모두 같은 방식으로 설정합니다.


제휴문의 생성

제휴문의도 게시판과 마찬가지로 생성 및 기본세팅이 되어있기 때문에, 간단히 설정이 가능합니다.
다만, PC웹과 디자인 형태가 다르기 때문에, 소스는 새로 만들어 주셔야합니다.
[프로그램샵 > 프로그램환경설정 > 맞춤전송폼 설정] 페이지의 [M기본디자인] 을 선택합니다.


스킨을 설정하고 '[phpx] 기본디자인(모바일) 샘플 소스'를 가져옵니다.
(이처럼 PC용 디자인과 모바일용 디자인 샘플이 따로 존재합니다.)
가져온 소스 내용 중 제목을 출력하는 부분에서 '맞춤전송폼 양식'을 '제휴문의' 로 수정한 후 저장합니다.


다음 페이지에서 내용이 제대로 출력되는지 확인해 보도록 합시다.
http://uany02.anybuild.co.kr/shop_contents/myreg_form.htm?myreg_code=jform&mobile_conn=on

견적문의 게시판 생성

맞춤 전송폼과 동일하게 프로그램샵을 통해 이미 설치가 되어있으므로,
[프로그램샵 > 프로그램 환경설정 > 견적문의설정]페이지의 [M디자인수정] 에서 스킨을 설정하고 '[phpx] 기본형 A(모바일)' 소스를 가져온 후 저장합니다.



다음 페이지에서 내용이 제대로 출력되는지 확인해 보도록 합시다.
http://uany02.anybuild.co.kr/shop_contents/price_guide_data_list.htm?price_guide_code=price&mobile_conn=on

방문 상담원 소개 생성

마찬가지로 PC웹을 제작하면서, 프로그램 샵에서 맞춤게시판 기능을 설치하여 페이지 설정이 완료되어 있습니다.
[프로그램샵 > 프로그램 환경설정 > 맞춤 게시판 관리]페이지의 [M기본디자인] 에서 스킨 및 '[phpx] 기본 소스 (모바일)' 소스를 가져온 후 저장합니다.



소스에서 페이지 제목을 다음과 같이 변경합니다.
<h1>맞춤게시판 목록</h1> -> <h1>방문 상담원 소개</h1>

리스트가 출력되는 부분도 PC웹과 비슷하게 소스를 변경해주도록 합니다.

<!--@foreach($myboard_mylist_row as $key => $values)-->
<li>
	<a href="{$values[read_url]}">
		<div class="inf">
			<table width=100%  border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td>
						<span cond="$values[s_v1_url]"><img src="{$values[s_v1_url]}"></span>
					</td>
					<td>
						<span cond="$values[s_v2]">{$s_v2_name} : <b>{$values[s_v2]}</b></span><br>
						<span cond="$values[s_v3]">{$s_v3_name} : {$values[s_v3]}</span><br>
						<span cond="$values[s_v4]">{$s_v4_name} : {$values[s_v4]}</span>
					</td>
				</tr>
			</table>
		</div>
	</a>
</li>
<!--@end-->


다음 페이지에서 내용이 제대로 출력되는지 확인해 보도록 합시다.
http://uany02.anybuild.co.kr/shop_contents/myboard_list.htm?myboard_code=cs&mobile_conn=on


top