팀플이 솔플이 되는 순간

얼마전 맨유의 경기 중에 루니가 준 완전 나이스 패스를 호날두가 대기권 탈출 슛으로 황당하게 마무리한 적이 있었습니다.

간단한 웹사이트 하나를 만드는 팀플에서 jsp도 모르고 db도 모른다길래 html만 부탁했더니 아래처럼 해서 저에게 줬습니다. 메인 화면입니다.

프레임은 자유롭게 움직이고 높낮이도 제대로 안맞아 있습니다. 팀이름을 “세번째 팀” 이라고 지었네요. 제 자신도 띄어쓰기를 잘 지키지 못하기 때문에 뭐라고 그리 꾸짓고 싶진 않지만 “경매물품보기”는 “경매물품등록”은 보기가 싫어지네요. 참고로 그림이나 꾸미기는 왠지 여자가 잘할 것 같아서 여학우에게 부탁했던 부분입니다. 여자라고 다 미적이지는 않다는거~ “경매물품보기”를 클릭하면 예술입니다.


이게 뭔가… 순간 당황스러워서 한동안 넋을 놓고 보고 있을 수밖에 없었습니다. 내가 무엇을 잘못했길래 이런 시험에 들게 하는 것인가. 분명 나와 대화를 할 땐 잘 알아들은 척 하더니 하나도 의사소통이 제대로 안됐다는 것을 여지없이 보여줍니다. 지역별에는 서울 대전 대구 부산 과 같은 주요 도시명만 오면 되고 가격별에는 평당1만~10만, 10~100만 이런식의 단위가 와야 하는데 쌩뚱맞게 주소가 나옵니다. 그리고 화려한 표.. 딱봐도 사람이 할 짓이 아닙니다. 그래서 혹시나 해서 소스코드를 봤습니다.

※주의 스크롤 압박 소스 보기
[#M_ more.. | less.. | <html>

<head>
<meta http-equiv=”content-type” content=”text/html; charset=euc-kr”>
<title>경매물품..ㅋㅋㅋ</title>
<meta name=”generator” content=”Namo WebEditor”>
</head>

<body bgcolor=”white” text=”black” link=”blue” vlink=”purple” alink=”red”>
<p>&nbsp;</p>
<table border=”1″ width=”100%” height=”29%” bordercolor=”white”>
   <tr>
       <td width=”286″ height=”93″ border=”1″ bgcolor=”black” bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:24pt;”><font color=”white”>지역</font></span></b></p>
       </td>
       <td width=”413″ height=”93″>&nbsp;</td>
       <td width=”286″ height=”93″ bgcolor=”black” bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:24pt;”><font color=”white”>가격</font></span></b></p>
       </td>
   </tr>
</table>
<p>&nbsp;</p>
<table border=”1″ width=”100%” height=”100%” bordercolor=”white”>
   <tr>
       <td width=”46″ height=”20″>&nbsp;</td>
       <td width=”183″ rowspan=”2″ colspan=”2″ bgcolor=”white” height=”44″ bordercolor=”black”>
           <p align=”center”><b>&nbsp;</b><span style=”font-size:18pt;”><b>서울</b></span></p>
       </td>
       <td width=”153″ height=”20″>&nbsp;</td>
       <td width=”94″ height=”20″>&nbsp;</td>
       <td width=”94″ height=”20″>&nbsp;</td>
       <td width=”19″ height=”20″>&nbsp;</td>
       <td width=”62″ rowspan=”2″ colspan=”2″ height=”44″ bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:18pt;”>주소</span></b></p>
       </td>
       <td width=”304″ height=”20″>&nbsp;&nbsp;인천광역시 남구 주안 5동 태화아파트 1</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”304″>&nbsp;&nbsp;동 1405호</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”92″ bgcolor=”white”><b>&nbsp;</b></td>
       <td width=”85″ bgcolor=”white”><b>&nbsp;</b></td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”42″><b>&nbsp;</b></td>
       <td width=”14″><b>&nbsp;</b></td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”183″ rowspan=”2″ colspan=”2″ bgcolor=”#CCCCCC” bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:22pt;”>경기도</span></b></p>
       </td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”62″ rowspan=”2″ colspan=”2″ bgcolor=”#CCCCCC” bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:18pt;”>주소</span></b></p>
       </td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”92″ bgcolor=”white”>
           <p align=”center”><b>&nbsp;</b></p>
       </td>
       <td width=”85″ bgcolor=”white”>
           <p align=”center”><b>&nbsp;</b></p>
       </td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”42″><b>&nbsp;</b></td>
       <td width=”14″><b>&nbsp;</b></td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″ height=”21″>&nbsp;</td>
       <td width=”183″ rowspan=”2″ colspan=”2″ bgcolor=”#ABA7A7″ height=”45″ bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:22pt;”>충청도</span></b></p>
       </td>
       <td width=”153″ height=”21″>&nbsp;</td>
       <td width=”94″ height=”21″>&nbsp;</td>
       <td width=”94″ height=”21″>&nbsp;</td>
       <td width=”19″ height=”21″>&nbsp;</td>
       <td width=”62″ rowspan=”2″ colspan=”2″ bgcolor=”#ABA7A7″ height=”45″ bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:18pt;”>주소</span></b></p>
       </td>
       <td width=”304″ height=”21″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”92″ bgcolor=”white”>
           <p align=”center”><b>&nbsp;</b></p>
       </td>
       <td width=”85″ bgcolor=”white”>
           <p align=”center”><b>&nbsp;</b></p>
       </td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”42″><b>&nbsp;</b></td>
       <td width=”14″><b>&nbsp;</b></td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”183″ rowspan=”2″ colspan=”2″ bgcolor=”#777373″ bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:22pt;”>전라도</span></b></p>
       </td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”62″ rowspan=”2″ colspan=”2″ bgcolor=”#777373″ bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:18pt;”>주소</span></b></p>
       </td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”92″ bgcolor=”white”>
           <p align=”center”><b>&nbsp;</b></p>
       </td>
       <td width=”85″ bgcolor=”white”>
           <p align=”center”><b>&nbsp;</b></p>
       </td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”42″><b>&nbsp;</b></td>
       <td width=”14″><b>&nbsp;</b></td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”183″ rowspan=”2″ colspan=”2″ bgcolor=”#595656″ bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:22pt;”>경상도</span></b></p>
       </td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”62″ rowspan=”2″ colspan=”2″ bgcolor=”#595656″ bordercolor=”black”>
           <p align=”center”><b><span style=”font-size:18pt;”>주소</span></b></p>
       </td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”92″>&nbsp;</td>
       <td width=”85″>&nbsp;</td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”42″>&nbsp;</td>
       <td width=”14″>&nbsp;</td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”92″>&nbsp;</td>
       <td width=”85″>&nbsp;</td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”42″>&nbsp;</td>
       <td width=”14″>&nbsp;</td>
       <td width=”304″>&nbsp;</td>
   </tr>
   <tr>
       <td width=”46″>&nbsp;</td>
       <td width=”92″>&nbsp;</td>
       <td width=”85″>&nbsp;</td>
       <td width=”153″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”94″>&nbsp;</td>
       <td width=”19″>&nbsp;</td>
       <td width=”42″>&nbsp;</td>
       <td width=”14″>&nbsp;</td>
       <td width=”304″>&nbsp;</td>
   </tr>
</table>
<p>&nbsp;</p>

</body>

</html>_M#]
물어봤지요.

“뭘로 만드신건가요?”

“나모요.”

“아.. 그렇군요. HTML로 그냥 코딩할 줄 모르시나요?”

“아니요. 아는데 시간이 오래 걸려서. 뭐가 잘못됐나요?”

화면을 꾸미려는 코드는 html에서 최소화 시켜야 소스코드 보기가 쉽습니다. 꾸미기는 css로 따로 빼줘야 유지보수도 편하고 역시 코드 보기가 좋은 것 같습니다. 이 말을 해줬지만 css를 모른다. 나는 잘 보인다. 두 마디로 “왜 내가 한걸 무시해. 나 삐질라그래!”라는 감정을 대신해 주었습니다.

그래서 꾸미기가 하나도 없이 html로 제가 다시 만들어야했습니다. 팀플이 솔플이 되는 순간입니다.

구글맵 API 사용하기 2탄

구글맵 API 사용하기 1탄에서 한가지 빼먹은 것이 있습니다. 코드 다섯줄 정도를 추가하고 나서 맵의 위치가 처음 맵에 보였던 위치가 아닌 부산의 어떤 공항 근처로 옮겨졌습니다.

바로 좌표에 관한 것이죠. 좌표를 구하는 건 어떻게 보면 다소 까다로울 수 있습니다. 하지만 매우 쉽게 구하는 방법을 찾았지요. 헤헷;;

예~전에 찾아 봤던 네이버 맵과 구글 위성 맵을 동기화 시켜 보여주는 NGMap을 이용하면 됩니다.
NGMap을 사용해서 서울을 찍어둔 URL입니다. <- 이쪽을 클릭하시면 다음의 화면을 볼 수 있습니다.

1315446534.bmp여기서 이 화면에서 보이는 오른쪽 상단의 G = N 버튼을 클릭하면 구글 위성맵으로 다음과 같이 바뀝니다. 현재 이 화면에서는 네이버 맵이 사용하는 좌표를 볼 수 있지만 저는 구글 위성맵의 좌표를 원하기 때문이죠.

1225707987.bmp자 여기서 오른쪽에 보이는 좌표가 바로 구글맵의 좌표입니다. 이 좌표를 구했으면 이제 이 좌표를 써넣으면 되게지요? 이전에 보았던 소스코드를 다시 보겠습니다.

var map = new GMap2(document.getElementById(“map”));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.15549, 128.93563), 15);
map.setMapType(G_SATELLITE_MAP);
map.openInfoWindow(map.getCenter(), document.createTextNode(“안녕 백기선”));

setCenter 메소드는 두 개의 아규먼트를 주는데 처음 것은 좌표이고 두번 째 것은 확대율입니다. 확대율은 숫자가 클수록 지도를 자세히 들여다 보게 됩니다.

위의 빨간색 부분에 좌표를 넣으면 됩니다. 이때 주의할 것은 위의 스크린 샷에서 보이는 분홍색 부분의 좌표의 왼쪽 값은 코드에서 오른쪽으로 들어가고 오른쪽 값은 코드에서 왼쪽으로 들어가야 한다는 것입니다. 이렇게 하면 원하는 위치의 좌표를 쉽게 찾아서 쉽게 해당 좌표의 구글 위성맵을 띄울 수 있습니다.

구글맵 API 사용하기 1탄

구글맵API 예제가 주로 자바스크립트로 되어 있습니다. 참고로 전 자바스크립트는 손도 안대봤지요. 그래도 스톱모션을 하던 사람처럼 할 수 있을 것 같은 생각이 듭니다.

기본구조는 아래와 같습니다.
[#M_ more.. | less.. |

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

_M#]

구글 맵 API Key

위에서 분홍색 부분의 key값에 해당하는 것을 Maps API key라고 하는데 여기서 받아오면 됩니다. key값을 생성할 때 주의 할 것이 있습니다. 이 페이지가 돌아갈 서버의 주소를 넣어줘야 합니다. 도메인이 있어야 하나..라고 생각을 해봤었는데 그렇지는 않습니다.

1222906210.bmp이런식으로 적어준뒤 생성 버튼을 눌러서 받은 키 값을 분홍색 부분을 바꿔 주면 됩니다. 이렇게까지 해서 돌릴 필요가 있는 경우는 웹서버에서 돌릴 경우이고 그냥 웹브라우져로 파일을 읽어보며 테스트를 할 때는 굳이 key값을 받아와서 바꿔주지 않아도 테스트 해볼 수 있습니다.

구글 맵 API

저 위의 소스 코드를 템플릿으로 봤을 때 바뀌는 부분은 녹색 박스 부분입니다. 저 안에서 구글맵 API를 보고 코딩을 해주면 화면이 바뀌는 것을 볼 수 있습니다.

구글맵은 인공위성 맵이 최곤데 안타깝게 지금 저 코드상태로는 아래의 화면 밖에 볼 수 없습니다.
1156937504.bmp
이 화면에 (1)맵을 선택해서 보여줄 수 있는 컨트롤러와 (2)화면 축소 및 이동을 위한 컨트롤러를 붙이고 (3)기본 화면을 현재는 맵으로 되어 있는데 위성이 기본 화면이 되도록 바꾸고 (4) 화면 중앙에 한글로 메시지를 보여주고 싶습니다.

그럼 소스 코드에서 녹색 박스 부분을 아래와 같이 바꿉니다.

var map = new GMap2(document.getElementById(“map”));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(35.15549, 128.93563), 15);
map.setMapType(G_SATELLITE_MAP);
map.openInfoWindow(map.getCenter(), document.createTextNode(“안녕 백기선”));

그리고 웹브라우져에 띄워보면~
1095155188.bmp짜잔~

구글맵과 네이버맵을 합친 NGMap(Naver&Google Map)

1343895500.bmp
네이버와 구글맵을 동기화시켜 볼 수 있는 맵이더군요. 네이버 지도에 씌여있는 명칭을 보고 대략 검색을 해본뒤 구글 맵으로 싹 바꿔서 주변 모습을 파악하면 정말 위치 찾지가 쉽겠더라구요.

이걸 어떻게 맛집 안내 사이트 개발할 때 써먹고 싶은데.. 아직 잘 모르겠네요. ㅠㅠ;;

테터툴즈에도 붙여 쓸수 가 있는데 자세한 내용은 여기서 참조하시기 바랍니다.

왜 시작하게 됐으며 무엇을 어떻게 할 것인가.

고급 웹 프로그래밍 수업 시간에 교수님께서 웹 서비스를 제공하는 웹 사이트 개발 제안서를 제출하라고 하셨다.

기존에 만들어져 있는 공개 API(Open API)를 사용하여 새로운 서비스를 만들어 제공하는 웹사이트를 개발 하시오. 그리고 이번주 수요일 까지 그 사이트에 대한 제안서를 제출하시오.

팀원들과 대화를 하던 중 네이버 API를 발견하고 많은 검색 API를 볼 수 있었습니다. 구글 코드도 있었고 이글루스의 블러그 관련 API와 알라딘의 책관련 API도 있었습니다. 하지만 제일 끌렸던건 역시 구글 어스와 네이버 지도 검색이였습니다.

이미 어떤 분께서 그 둘을 합쳐 놓은 테터툴즈 플러그인까지 개발하셨더군요. 정말 부럽습니다. 그런걸 뚝딱 만들어 내시다니..ㅠ.ㅠ

저희는 팀원이 제시한 맛집 안내 사이트를 개발 하기로 했으며 제공 하는 서비스로는 지역별 맛집 검색 서비스와 음식 종류별 맛집 검색 서비스 그리고 각 맛집들의 위치를 구글어스와 네이버 지도 검색 둘 모두를 사용하여 보여 주도록 할 것입니다.

톰캣과 JSP, XML, XML-Schema or DTD, CSS 등을 사용하여 개발하라고 하셨습니다.

OH My Time Plz Stop!!!!!!!!!!!!!!!