'프로그래밍/Web'에 해당되는 글 12건
- 2012/05/03 HTML 색상(Color) 코드표
- 2012/04/27 웹 페이지 레이아웃을 설정하는 SiteMesh 세팅 및 활용에 대하여~
- 2012/03/07 웹페이지 접속자에 따른 국문, 영문 페이지의 구분을 위한 국가를 확인 방법에 대한 정리
- 2012/02/15 N-Screen을 지원하는 미디어 쿼리에 대하여
- 2012/02/01 Mobile Web에서의 스와이프를 위한 SwipeView 활용
- 2012/01/20 CSS의 Margin, Padding, Border 개념을 명확하게 하자
- 2011/12/14 GIS 지도 좌표계에 대한 정리~
- 2011/11/28 모바일 웹 사이트 제작을 위한 표준~
- 2011/10/28 PHP의 allow_url_fopen=off일때 URL 주소로 파일 읽어오기
- 2011/10/26 MySQL 테이블을 모두 삭제하는 PHP 소스~
제 블로그의 우측 상단을 보면 My Link가 있습니다.
이 부분에 주요 참고할 만한 링크를 주로 걸어놓는데요.
가끔 색상에 대한 RGB 코드값이나 특정 RGB값이 무슨 색상인지 확인하고 싶을 때가 있습니다.
이를 제공하는 HTML Color Picker와 Chart가 있어서 제 홈페이지로 옮겨봤는데요.
Color 코드표를 클릭하면 사용할 수 있습니다.
필요하신 분들은 유용하게 활용하시기 바랍니다.
'프로그래밍 > Web' 카테고리의 다른 글
| HTML 색상(Color) 코드표 (0) | 2012/05/03 |
|---|---|
| 웹 페이지 레이아웃을 설정하는 SiteMesh 세팅 및 활용에 대하여~ (0) | 2012/04/27 |
| 웹페이지 접속자에 따른 국문, 영문 페이지의 구분을 위한 국가를 확인 방법에 대한 정리 (0) | 2012/03/07 |
| N-Screen을 지원하는 미디어 쿼리에 대하여 (0) | 2012/02/15 |
| Mobile Web에서의 스와이프를 위한 SwipeView 활용 (0) | 2012/02/01 |
| CSS의 Margin, Padding, Border 개념을 명확하게 하자 (0) | 2012/01/20 |
Trackback 0 And
Comment 0
1. SiteMesh의 정의
SiteMesh(http://www.sitemesh.org/)는 웹 페이지의 레이아웃을 효율적으로 처리할 수 있도록 도와주는 프레임워크입니다.
쉽게 말해서 웹사이트의 동일한 상단, 하단, 메뉴 부분을 한곳에서 관리하고 각각의 페이지는 실제 내용만을 관리할 수 있도록 해줍니다.
즉, 상단/하단/메뉴와 같이 반복되는 부분이 각 페이지마다 들어가 있으면 추후 유지보수가 어렵기 때문에
SiteMesh와 같은 프레임워크를 사용하는 것이죠.
웹사이트를 제작하던 초기에는 iframe으로 나누어서 처리하기도 했었구요.
SiteMesh 이전에는 include를 활용해서 이런 형태를 구현하기도 했었습니다.
그러나 iframe은 확장이 어렵고 지원하지 않는 브라우저도 많이 있었네요.
또한 include는 모든 페이지마다 해당 부분을 삽입해줘야 하는 이슈가 있었죠.
그래서 실제로 SiteMesh를 사용해보면 얼마나 편리한지 알 수 있을 겁니다.
2. SiteMesh의 처리 방식
SiteMesh는 기본적으로 Java Servlet 환경에서 Filter 형태로 동작하고 있으며
다음 그림과 같이 Decorator 페이지를 한번 필터링 하는 방식입니다.
기존 페이지는 웹서버가 바로 렌더링된 페이지를 보내주지만 SiteMesh에서는 Decorator 페이지를 한번 더 거치게 된다는 것이죠.
다음 그림을 보면 SiteMesh의 방식을 좀 더 자세히 이해할 수 있을 것 같네요.
미리 중간에 있는 이미지와 같이 Decorator를 정의해 둡니다.
상단의 {title}과 우측의 Body-Content만 각각의 파일들은 가지고 있으면 되는 것이죠.
즉, welcome.jsp와 search.cgi와 같은 파일에는 본문에 들어갈 내용만 가지고 있으면 되는 겁니다.
이제 Filter를 통해 decorator를 거치면서 하단과 같이 동일한 상단, 하단, 메뉴를 가지고 있는 페이지로 사용자에게 전송됩니다.
개념은 매우 간단하구요. Java 뿐만 아니라 CGI, PHP, ColdFusion 등에서도 SiteMesh를 활용할 수 있다고 합니다.
3. SiteMesh의 다운로드 및 설치
먼저 SiteMesh를 다운로드해야 하는데요. 현재 SiteMesh3 알파버전이 소개되고 있습니다.
SiteMesh2를 사용하려면 여기를 눌러서 sitemesh-2.4.2.jar 파일을 다운로드 하시면 됩니다.
설치하는 방법은 /web/WEB-INF/lib 폴더에 복사하면 됩니다. (여기에서 /web은 프로젝트의 Web Content 폴더를 의미합니다.)
그리고 /web/ 하위에 SiteMesh의 Decorator를 위한 폴더를 하나 만들고 SiteMesh를 적용할 jsp 파일을 하나 생성하면 됩니다.
/web/decorators/decorator.jsp
여기에서 decorators 폴더명이나 decorator.xml 파일명은 다른 것을 사용하셔도 됩니다.
나중에 SiteMesh 설정에서 맞춰서 지정만 해주면 되니까요.. ^^
실제 decorator.jsp에는 다음과 같은 형태로 지정하면 됩니다.
먼저 tablib를 설정해 주셔야 합니다.
그리고 <decorator:head/> <decorator:body/> 부분이 실제 페이지의 <head>와 <body>의 내용을 넣는 부분이라고 보시면 됩니다.
4. SiteMesh의 설정
이제 마지막으로 SiteMesh의 설정을 해보도록 하겠습니다.
3개의 XML 파일을 처리해 줘야 하는데요. 모두 /web/WEB-INF/ 하위에서 작업하면 됩니다.
1) web.xml
SiteMesh는 Filter 형태로 동작한다고 했으므로 web.xml에 필터 관련 설정을 해줘야 합니다.
특별히 수정할 사항 없이 그대로 지정해 주시면 됩니다.
2) sitemesh.xml
이어서 sitemesh와 관련된 설정을 해줘야 합니다.
이 부분에서도 맨 위의 <property> 부분의 value만 맞춰서 적어주시면 되는데요.
기본적으로 /web/WEB-INF/ 하위에 모든 설정파일을 둘 경우, 그대로 사용하셔도 됩니다.
3) decorator.xml
마지막으로 Decorator를 설정하는 부분을 살펴보도록 하시죠..
여기에서는 SiteMesh를 적용할 곳의 패턴들을 지정할 수 있습니다.
위 예에서는 /en과 /ko 하위의 모든 파일에 sitemesh를 적용하라는 것인데요.
excludes 를 활용해서 특정 파일이나 폴더만 제외할 수도 있습니다.
그리고 여기에서 사용하는 defaultdir 이나 page는 SiteMesh 다운로드 및 설치에서 생성한 폴더와 파일명이라는 것을 기억해 두시기 바랍니다.
SiteMesh를 자주 사용하면서도 한번도 정리한 적이 없었던 것 같아서 작성해봤네요.
처음 사용하시는 분들에게 도움이 되었으면 합니다.
'프로그래밍 > Web' 카테고리의 다른 글
| HTML 색상(Color) 코드표 (0) | 2012/05/03 |
|---|---|
| 웹 페이지 레이아웃을 설정하는 SiteMesh 세팅 및 활용에 대하여~ (0) | 2012/04/27 |
| 웹페이지 접속자에 따른 국문, 영문 페이지의 구분을 위한 국가를 확인 방법에 대한 정리 (0) | 2012/03/07 |
| N-Screen을 지원하는 미디어 쿼리에 대하여 (0) | 2012/02/15 |
| Mobile Web에서의 스와이프를 위한 SwipeView 활용 (0) | 2012/02/01 |
| CSS의 Margin, Padding, Border 개념을 명확하게 하자 (0) | 2012/01/20 |
Trackback 0 And
Comment 0
요즘 글로벌 홈페이지들을 살펴보면 Korean / English와 같이 언어별로 구분되어 선택할 수 있도록 되어 있습니다.
오늘은 이와 같이 접속자에 따른 홈페이지의 언어별 분류를 어떻게 하는지 정리해 보도록 하겠습니다.
가장 확실한 방법은 역시 쿠키를 활용하는 것입니다.
사용자가 선택한 언어를 쿠키에 저장해 두고 홈페이지가 열릴 때마다 보여주는 방법이죠..
한번 설정한 언어 정보를 기반으로 계속 보여주기 때문에 지속적으로 방문하는 사용자를 위해 일반적으로 많이 사용되는 방법입니다.
그러나 사용자가 선택하기전에 어떤 언어를 먼저 보여줘야 할지를 결정하는 부분이 이슈가 됩니다.
이때 사용하는 것이 접속자의 IP를 기반으로 국가를 파악하고 언어를 설정하는 방식을 사용합니다.
그렇다면 IP를 기반으로 국가 정보를 가져오는 문제를 해결해야 하는데요.
이와 관련해서 MaxMind(http://www.maxmind.com/)에서 API 형태로 서비스를 제공하고 있습니다.
관련 API 중 "GeoIP City"와 "GeoLite City"가 있는데요.
이 중 "GeoIP City" 서비스는 유료로 제공되고 있으며, 사용 형태에 따라서 $20, $50, $370로 구성되어 있네요.
"GeoLite"는 "GeoIP"와 비교해서 정확도 측면에서 약간 떨어지고 업데이트 주기가 월 단위로 이루어진다고되어 있습니다만
제가 테스트 해보니 활용하는데 있어서 큰 문제는 없을 것 같았습니다.
그러면 GeoIP API(http://www.maxmind.com/app/support)를 통해서 IP를 가지고 국가를 가져오는 것을 테스트 해보도록 하겠습니다.
여러 언어를 지원하고 있는데요. 저는 PHP를 가지고 해보도록 하겠습니다.
PHP 관련 파일들을 받으려면 http://www.maxmind.com/app/php로 가서 Pure PHP Module의 download를 누르면 됩니다.
sample.php의 내용은 다음과 같습니다.
소스를 살펴보면 일단 6번째 줄에 "geoip.inc" 파일이 include 한 것을 알 수 있습니다. 위 링크에서 해당 파일을 다운로드 합니다.
그리고 11번째 줄을 보면 GeoIP.dat 파일을 open하는 부분이 있습니다.
이 파일이 매월 업데이트되는 IP와 국가를 매핑한 파일인 것 같습니다. 해당 파일은 다음 경로에서 받을 수 있습니다.
http://geolite.maxmind.com/download/geoip/database/GeoLiteCountry/GeoIP.dat.gz
압축을 풀고 서버에 넣은 다음 해당 경로를 11번째 줄에 변경해서 보여주면 됩니다.
위 예제에서는 국가 코드와 국가 명을 보여주고 있습니다.
실질적으로 우리가 필요한 것은 국가 코드만 있으면 되므로 geoip_country_code_by_addr() 메소드만 사용하면 될 것 같습니다.
그럼 위 예제를 수정해서 IP에 따라 언어별 페이지를 보여주는 PHP 소스를 작성해 보겠습니다.
위 소스를 보시면 금방 이해가 될 겁니다.
PHP의 "REMOTE_ADDR"변수를 활용해서 사용자 IP를 가져오고
GeoIP API를 통해 국가 코드를 확인한 다음 header()를 활용해서 리다이렉트하도록 구성했습니다.
최초 IP 접속시에는 이렇게 해서 언어를 확인하고 이후부터는 쿠키를 활용하면 되겠죠..
'프로그래밍 > Web' 카테고리의 다른 글
| HTML 색상(Color) 코드표 (0) | 2012/05/03 |
|---|---|
| 웹 페이지 레이아웃을 설정하는 SiteMesh 세팅 및 활용에 대하여~ (0) | 2012/04/27 |
| 웹페이지 접속자에 따른 국문, 영문 페이지의 구분을 위한 국가를 확인 방법에 대한 정리 (0) | 2012/03/07 |
| N-Screen을 지원하는 미디어 쿼리에 대하여 (0) | 2012/02/15 |
| Mobile Web에서의 스와이프를 위한 SwipeView 활용 (0) | 2012/02/01 |
| CSS의 Margin, Padding, Border 개념을 명확하게 하자 (0) | 2012/01/20 |
Trackback 0 And
Comment 0
HTML4와 CSS2에서는 다양한 미디어 타입에 따라 처리할 수 있는 스타일시트를 지원하고 있습니다.
스마트폰, 태블릿, 스마트TV 등 다양한 화면의 크기를 가진 기기들이 배포됨에 따라 관심을 받게 된 것 같습니다.
먼저 미디어 쿼리를 적용한 사이트(http://mediaqueri.es/)를 모아둔 곳을 한번 살펴보시죠.
One-Source Multi-Use 측면이나 모바일 웹 개발이 증가하면서 미디어 쿼리를 적절하게 활용하는 것이 필요할 것 같습니다.
미디어쿼리에 대한 W3C의 문서는 현재 Candidate Recommendation 상태로 거의 현재 상태로 표준이 될 것 같네요.
미디어쿼리는 CSS에 설정을 통해서 화면 크기 등에 따라 다른 형태로 보여줄 수 있도록 구현하는 것입니다.
이를 위해 media 라는 지시자를 통해서 CSS에 설정하게 됩니다.
이런 미디어 쿼리를 지정하는 방법은 크게 세가지가 있습니다.
1. CSS 파일을 나누어서 가져오기
<link rel="stylesheet" media="screen and (max-width:480px)" href="example.css">
2. <style> 태그에 media 속성으로 지정하기
<style type="text/css" media="screen and (max-width:480px)">
</style>
3. CSS 내에 @media 사용하기
@media all and (max-width:480px) { }
3. CSS 내에 @media 사용하기
@media all and (max-width:480px) { }
이 중에서 일반적으로 CSS 내에 @media 태그를 통해서 적용하는 방법을 많이 사용하는 것 같습니다.
미디어 쿼리에서는 미디어 타입을 지정해서 구분할 수 있습니다.
위 예제에서 screen, all 과 같은 것들을 미디어 타입이라고 하는데요.
여러가지 타입들을 지원하고 있지만 주로 사용하는 것은 다음과 같습니다.
- all - 모든 미디어 타입
- screen - 컴퓨터 스크린을 위한 용도
- print - 인쇄 용도
미디어 타입과 더불어 다양한 조건들을 지정할 수 있습니다. 일부만 살펴보면 다음과 같습니다.
여러 조건들을 결합해서 활용도 가능합니다.
- 가로 너비 - width, min-width, max-width
- 세로 높이 - height, min-height, max-height
- 단말기의 가로 너비 - device-width, min-device-width, max-device-width
- 단말기의 세로 너비 - device-height, min-device-height, max-device-height
- 화면 회전 - orientation
- 화면 비율 - aspect-ratio, min-aspect-ratio, max-aspect-ratio
단, 미디어 쿼리로는 기능상의 분기는 어렵습니다. 이런 경우 기존의 자바 스크립트나 웹 프로그래밍을 통해서 처리해야 할 것 같습니다.
또한 모바일 기기와 PC를 CSS 미디어쿼리로 구분하는 것이 아니라 기존처럼 UserAgent와 같은 값을 통해서 자바스크립트로 확인해야 합니다.
미디어 쿼리는 단지 화면의 크기와 같은 속성을 통해서 처리하게 됩니다.
마찬가지로 orientation과 같은 속성도 모바일 뿐만 아니라 PC에서도 가로와 세로 길이에 따라서 구분하게 됩니다.
미디어 쿼리의 설정에 대한 보다 자세한 사항은 다음 사이트들을 참조하면 됩니다.
http://mydeute.com/txp/article/631
미디어 타입과 조건들을 PC, iPhone, iPad, 스마트폰과 같은 디바이스별로 설정해 놓은 값들은 다음 사이트를 참고하면 도움이 되겠네요.
http://firejune.com/1633
황혜원님이 추가해준 링크도 포함합니다. 참고하시기 바랍니다.
http://html.nhncorp.com/blog/textyle/42284
'프로그래밍 > Web' 카테고리의 다른 글
| 웹 페이지 레이아웃을 설정하는 SiteMesh 세팅 및 활용에 대하여~ (0) | 2012/04/27 |
|---|---|
| 웹페이지 접속자에 따른 국문, 영문 페이지의 구분을 위한 국가를 확인 방법에 대한 정리 (0) | 2012/03/07 |
| N-Screen을 지원하는 미디어 쿼리에 대하여 (0) | 2012/02/15 |
| Mobile Web에서의 스와이프를 위한 SwipeView 활용 (0) | 2012/02/01 |
| CSS의 Margin, Padding, Border 개념을 명확하게 하자 (0) | 2012/01/20 |
| GIS 지도 좌표계에 대한 정리~ (0) | 2011/12/14 |
Trackback 0 And
Comment 0
포털 사이트를 비롯한 모바일 웹을 살펴보면 좌우로 스와이프 하는 기능들이 많이 포함되어 있습니다.
협소한 공간에 여러 컨텐츠를 배치하기 위한 방법으로 활용되고 있는데요.
이러한 스와이프를 구현하기 위해서는 꽤 많은 자바스크립트와 코드가 들어가야 합니다.
오늘 소개할 SwipeView는 이러한 기능을 처리해 주는 스크립트를 제공하는 거네요..
http://cubiq.org/swipeview
cubig.org 사이트를 보면 이외에도 상당히 괜찮은 모바일 웹 기반의 소스들을 제공하고 있습니다.
먼저 스와이프가 적용된 동영상과 데모 페이지들을 살펴보시죠.
이미지 갤러리에 대한 데모 페이지는 다음과 같습니다.
http://cubiq.org/dropbox/SwipeView/demo/gallery/
이미지 이외의 컨텐츠를 포함할 수도 있다고 하는데요.
텍스트로 구성된 컨텐츠에 대한 예제는 다음 데모 페이지를 살펴보면 됩니다.
http://cubiq.org/dropbox/SwipeView/demo/ereader/
제공하는 소스를 다운로드해서 살펴보면 src 폴더에는 swipeview.js 파일만 하나 있습니다.
이 파일을 기존 HTML에 추가하고 스와이프가 필요한 컨텐츠를 적용하면 스와이프가 이루어지게 됩니다.
demo 폴더를 살펴보면 위 예제 페이지들의 소스가 포함되어 있어 쉽게 적용할 수 있을 겁니다.
해당 사이트에서도 소스를 받을 수 있지만 혹시 몰라서 여기에도 업로드 해봅니다.
cubiq-SwipeView-94b3b3d.zipiOS 4.x 이상, 안드로이드 2.3 이상에서 동작하며, 일반 웹브라우저도 webkit 기반에서는 동작한다고 되어 있습니다.
실제 적용해 보니 아이폰에서는 정말 부드럽게 동작하지만 안드로이드에서는 약간 delay가 있어 보였습니다.
그래도 다른 소스보다는 무난히 동작하는 것 같네요~
또한 모바일 환경을 고려하여 Silder와 Viewport로 나누어 Viewport는 한 화면만 보여주고
Slider에 앞뒤를 포함해 3개의 페이지만을 보관하는 형태로 구성되어 있다고 합니다. (빠르게 스와이프하는 것도 고려해 설계 되어 있다고 하네요)
메모리의 제한을 고려한 설계로 모바일 개발에서는 많이 사용하는 형태이기도 합니다.
소스들을 살펴보니 swipeview.js 파일을 포함하고 난 후,
new SwipeView()를 통해 swipe 객체를 생성하고
해당 객체에 스와이프할 데이터들을 로드하고 난 후
onFlip 메소드를 통해서 스와이프를 처리하게 됩니다.
해당 소스를 살펴보고 직접 적용해 보면 쉽게 이해가 될 것 같습니다.
'프로그래밍 > Web' 카테고리의 다른 글
| 웹페이지 접속자에 따른 국문, 영문 페이지의 구분을 위한 국가를 확인 방법에 대한 정리 (0) | 2012/03/07 |
|---|---|
| N-Screen을 지원하는 미디어 쿼리에 대하여 (0) | 2012/02/15 |
| Mobile Web에서의 스와이프를 위한 SwipeView 활용 (0) | 2012/02/01 |
| CSS의 Margin, Padding, Border 개념을 명확하게 하자 (0) | 2012/01/20 |
| GIS 지도 좌표계에 대한 정리~ (0) | 2011/12/14 |
| 모바일 웹 사이트 제작을 위한 표준~ (0) | 2011/11/28 |
Trackback 0 And
Comment 0
90년대 후반부터 HTML을 시작한 분들은 CSS 보다는 <table> 태그와 <font> 태그를 활용해서 HTML을 작업하는데 익숙해 있기는 합니다.
그래서인지 CSS에 대해서 명확하게 이해하지 못하고 있는 부분들이 있는 것 같습니다.
특히 Margin과 Padding과 같은 부분에 대해서 가끔 헤깔려 하는 것 같아서 정리해 보려고 합니다.
위 그림을 보면 Margin, Border, Padding에 대해서 잘 나와 있습니다.
Border는 경계선으로 실제 콘텐츠를 감싸고 있는 선으로 스타일, 색, 두께를 지정할 수 있습니다.
콘텐츠 부분과 다르게 보이도록 하기 위해서 페이지의 배경색과 다른 색을 사용하기도 합니다.
Padding은 Border 안쪽에 위치하는 여백으로 콘텐츠에 대한 공간을 지정하는 것입니다.
Padding 공간의 배경색은 콘텐츠의 배경색을 따르게 되어 있습니다.
Margine은 Border 바깥쪽에 위치하는 여백으로 부모 엘리먼트와 해당 콘텐츠 사이의 여유 공간을 확보하는데 사용합니다.
각 부분마다 Padding, Border, Margin의 상하좌우를 독립적으로 설정할 수 있어 많은 유연성을 줄 수 있다고 합니다.
설정값은 픽셀이나 em 단위를 사용할 수 있다고 하는데요.
em 단위를 사용하면 현재 사용하는 폰트 사이즈를 기준으로 글자의 너비와 높이를 비율적으로 정의하게 됩니다.
그래서 픽셀 대신 em으로 정의하면 사용하는 문자의 크기에 따라 자동적으로 콘텐츠 블록의 크기가 늘어나기 때문에 사용자에게 더욱 유연한 블록을 제공할 수 있습니다.
또한 CSS가 제대로 작성되어 있는지 검사하는 사이트가 있습니다.
http://jigsaw.w3.org/css-validator/
위 사이트에서 URL 또는 파일업로드를 통해서 유효성 검사를 진행할 수 있게 됩니다.
이외에도 CSS에 대해 참고할 만한 사이트는 다음과 같습니다.
http://w3schools.com/css/default.asp
http://w3schools.com/css3/default.asp
'프로그래밍 > Web' 카테고리의 다른 글
| N-Screen을 지원하는 미디어 쿼리에 대하여 (0) | 2012/02/15 |
|---|---|
| Mobile Web에서의 스와이프를 위한 SwipeView 활용 (0) | 2012/02/01 |
| CSS의 Margin, Padding, Border 개념을 명확하게 하자 (0) | 2012/01/20 |
| GIS 지도 좌표계에 대한 정리~ (0) | 2011/12/14 |
| 모바일 웹 사이트 제작을 위한 표준~ (0) | 2011/11/28 |
| PHP의 allow_url_fopen=off일때 URL 주소로 파일 읽어오기 (0) | 2011/10/28 |
Trackback 0 And
Comment 0
지도 좌표계를 보면 참 복잡한 것 같습니다.
Bessel, TM, UTM, WGS84 등등 다양한 이야기들이 나옵니다.
스마트폰이 대중화되면서 GIS에도 관심은 많아졌지만 대부분 지도 API 만을 사용할 뿐
해당 개념에 대해서는 파악하기가 어려운 면이 있는 것 같네요.
그래서 한번 내용을 정리해 보도록 하겠습니다.
실제 지구를 덮고 있는 지형의 모양을 지표면이라고 하는데요. 지표면은 당연히 울퉁불퉁한 형태로 구성되어 있습니다.
그래서 평균 해수면을 토대로 다시 지구를 그려 본 것을 지오이드라고 합니다.
이것도 지표면보다는 조금 낫지만 역시 복잡한 모양으로 이루어집니다.
그래서 지구의 모양에 잘 맞게 수학적인 타원체로 그려서 사용하게 됩니다.
하지만 이런 타원체가 나라마다 조금씩 다르게 구성되어 있습니다.
해당 국가의 지오이드 모양에 가장 잘 맞는 타원체를 채용하기 때문이죠..
영국(Airy, 1830), 인도(Everest, 1830), 한국/일본/동남아(Bessel, 1841), 북미/캐나다/필리핀(Clarke, 1866), 아프리카/프랑스(Clarke, 1880), 남미/서유럽(Hayford, 1924), 러시아(Krasovsky, 1940), 호주(Australian), 미국방성/NASA(WGS 72, WGS84)
위와 같은 형태로 국가마다 다른 타원체를 사용하게 됩니다.
또한 3차원으로 구성된 지구표면을 2차원의 지도로 옮기는 것을 지도투영이라고 합니다.
3차원을 2차원으로 변환할 때 찌그러지는 왜곡이 발생하게 됩니다.
보통 다음과 같은 3가지의 투영 기법을 사용하게 됩니다.
1. 원통 투영
메르카토 도법이라고 하는데요 UTM(Universal Transverse Mercator) 도법의 기본이 되는 기법입니다.
남북방향으로는 투영오차가 적고 동서방향으로 오차가 크기 때문에 우리나라와 영국, 칠레와 같이 남북방향으로 긴 경우 사용한다고 합니다.
2. 원뿔투영
중간크기의 나라나 극지방과 같은 원형 모양을 띈 나라에 적합하다고 합니다.
3. 평면투영
스위스와 같이 원형이 좁은 나라에 적합하다고 하네요.
그럼 본격적으로 자주 언급되는 좌표계를 살펴보도록 하겠습니다.
1. WGS84 좌표계
지구의 중심을 원점으로 XYZ축을 각각 정의하고 점의 위치를 표현하는 XYZ 좌표계의 일종입니다.
각국의 지오이드에 가장 잘 맞는 개별적인 타원체와 달리 지구를 총괄하는 통일된 타원체를 사용합니다.
그래서 GPS 위성에서 사용하는 좌표계이기도 합니다.
구글맵에서도 이 좌표계를 사용합니다. 그래서 우리나라에서 많이 사용하는 좌표계와의 변환이 필요한 것이기도 합니다.
2. TM 좌표계
우리나라와 같이 남북으로 긴 나라에서 사용하는 좌표계입니다.
앞에 말한 원통투영을 기반으로 하고 있으며 측량 범위가 넓지 않은 곳에서 일반측량을 위해 주로 사용하는 평면 직각 좌표계에 해당한다고 합니다.
다음 그림과 같이 서부, 중부, 동부의 투영 원점을 기반으로 구성되어 있다고 합니다.
3. UTM 좌표계
각국이 다른 좌표계를 사용하는데 따른 불편을 해소하고자 만든 통일된 직교좌표계라고 합니다.
그럼 실제 각 좌표계가 어떻게 쓰이고 있는지 살펴보시죠..
관련 자료는 http://dna.daum.net/apis/maps/coordinate 에서 가져왔습니다.
| 좌표계 | 기반타원체 | 설명 | 비고 |
|---|---|---|---|
| wgs84 | wgs84 | wgs84타원체를 사용하는 좌표계입니다. 위/경도 구형 좌표계 |
구글맵 야후맵 MS Live맵 |
| tm | bessel | bessel타원체를 사용하는 국지 좌표계로써 우리나라의 경우 서부, 중부, 동부의 3개의 기준점을 가지고, 좌우 1도씩, 2도 간격의 평면좌표계입니다. | |
| congnamul | bessel | bessel타원체를 기반으로 한 tm좌표계의 변형으로 섬지역(제주도, 독도, 울릉도, 백령도)의 실제 위치를 육지쪽으로 당겨 놓은 형태의 평면좌표계 | 콩나물 지도 다음 지도 |
| wcongnamul | wgs84 | wgs84타원체를 기반으로 한 tm좌표계의 변형 | 콩나물 지도 다음 지도 |
| ktm | bessel | G7이라는 프로젝트의 일환으로 자동차부품연구원에서 네비게이션쪽에서 공동으로 사용하기 위해 만든 좌표계로써, 중부원점(127, 38)에서 약간 벗어난(128, 38)기준을 가지는 평면좌표계 | 네이버 지도 |
| utm | bessel | tm이 국지 좌표계로써 각 나라마다 다른 기준점을 가진다면, utm은 전세계 공통으로 약간의 오차를 허용하며 좌우 3도씩, 6도 간격의 평면좌표계 입니다. | |
| wtm | wgs84 | wgs84타원체를 사용하여 평면좌표계로 투영한 tm좌표계 입니다. | |
| wktm | wgs84 | wgs84타원체를 사용하여 평면좌표계로 투영한 ktm좌표계입니다. | |
| bessel | bessel | bessel타원체를 사용하는 구형좌표계입니다. |
기본적인 GIS 관련 소스로 유명한 것이 PROJ.4라고 합니다.
http://trac.osgeo.org/proj/
MIT License를 사용하고 있으며 다양한 언어별로 소스까지 제공하고 있네요..
참고자료: 청오G&G 원격탐사 교육자료, Daum 지도 API 좌표체계, PROJ.4 - Cartographic Projections Library
'프로그래밍 > Web' 카테고리의 다른 글
| Mobile Web에서의 스와이프를 위한 SwipeView 활용 (0) | 2012/02/01 |
|---|---|
| CSS의 Margin, Padding, Border 개념을 명확하게 하자 (0) | 2012/01/20 |
| GIS 지도 좌표계에 대한 정리~ (0) | 2011/12/14 |
| 모바일 웹 사이트 제작을 위한 표준~ (0) | 2011/11/28 |
| PHP의 allow_url_fopen=off일때 URL 주소로 파일 읽어오기 (0) | 2011/10/28 |
| MySQL 테이블을 모두 삭제하는 PHP 소스~ (0) | 2011/10/26 |
Trackback 0 And
Comment 0
스마트 폰 사용자들이 점차 늘어남에 따라 모바일 웹 사이트 제작도 많이 늘고 있는 것 같습니다.
기존 포털 뿐만 아니라 대부분의 웹 사이트들이 모바일 웹도 기존 웹과 함께 제작하고 있으며,
하이브리드 앱이라는 컨셉으로 기존의 App과 Web의 장점을 살려 혼합한 모델들도 나오고 있는 것 같습니다.
모바일 웹을 만드는데 어떤 점들을 주의해야 할까요?
여러가지 있겠지만 웹 표준을 담당하는 W3C의 자료를 토대로 정리해 보고자 합니다.
다음 사이트를 보면 W3C에서 권고하는 Best Practice에 대한 한글 설명이 있습니다.
http://www.w3c.or.kr/Translation/mwbp_flip_cards/
이외에도 다음 사이트를 보면 모바일 웹 어플리케이션에 대한 Best Practice도 설명하고 있습니다.
http://www.w3c.or.kr/Translation/MWABP/
또 하나 재미있는 게 있네요..
모바일에 적합하게 제작되어 있는지 체크하는 툴인 W3C mobileOK Checker라는 것도 있습니다.
http://validator.w3.org/mobile/check
제가 만든 모바일 웹 사이트를 점검해보니 60%가 나오네요..
그런데 네이버를 점검해 보니 0%가 나옵니다.
음.. 분명 네이버 모바일이 아이폰, 안드로이드, 윈도우모바일 다 적용되고 디자인이나 구성도 훨씬 좋은데.. ^^
아마도 HTML, CSS 표준만으로 체크해서 그런가 봅니다.
기존 포털 뿐만 아니라 대부분의 웹 사이트들이 모바일 웹도 기존 웹과 함께 제작하고 있으며,
하이브리드 앱이라는 컨셉으로 기존의 App과 Web의 장점을 살려 혼합한 모델들도 나오고 있는 것 같습니다.
모바일 웹을 만드는데 어떤 점들을 주의해야 할까요?
여러가지 있겠지만 웹 표준을 담당하는 W3C의 자료를 토대로 정리해 보고자 합니다.
다음 사이트를 보면 W3C에서 권고하는 Best Practice에 대한 한글 설명이 있습니다.
http://www.w3c.or.kr/Translation/mwbp_flip_cards/
하나의 웹을 위한 설계: 다양한 장비를 고려하여 설계한 콘텐츠는 비용을 절감시키고, 유연성을 증대하며, 더 많은 사람들의 필요를 충족시킬 수 있다.
웹 표준 준수:세계 곳곳의 제각기 다른 장비와 웹 브라우저의 호환을 위해서는 표준을 준수해야 한다.
유해 요소 제거:모바일 장비의 제한된 화면 크기, 키보드, 기타 기능 등에 의해 발생하는 사용자의 문제를 고려하여 설계해야 한다.
장비 제한 주의: 특정 웹 기술을 사용하고자 할 때는 모바일 장비 성능이 제각기 다르다는 것을 염두에 두어야 한다.
웹 네비게이션 최적화: 작은 화면과 키보드, 제한된 bandwidth에서는 단순한 네비게이션과 입력이 매우 중요하다.
그래픽과 색상 확인: 이미지, 색상, 스타일은 콘텐츠를 빛나게 하지만 지원되는 포맷과 저사양의 화면 등에 유의해야 한다.
가볍고 간결한 웹 사이트: 가벼운 웹 사이트는 시간과 비용을 절약하여 사용자를 즐겁게 한다.
네트워크 자원 절약: 웹 프로토콜 기능을 활용하면 네트워크 부하와 대기 시간을 줄여 사용자 이용도를 향상시킬 수 있다.
사용자 입력 가이드: 모바일 장비에서 키보드 및 각종 입력 방법은 비효율적일 수 있으며, 효과적인 설계는 이런 입력을 최소화 할 수 있다.
모바일 유저 배려: 시간이 부족하고 번잡한 상황에 있는 모바일 사용자들은 간결한 정보를 얻고자 한다.
이외에도 다음 사이트를 보면 모바일 웹 어플리케이션에 대한 Best Practice도 설명하고 있습니다.
http://www.w3c.or.kr/Translation/MWABP/
또 하나 재미있는 게 있네요..
모바일에 적합하게 제작되어 있는지 체크하는 툴인 W3C mobileOK Checker라는 것도 있습니다.
http://validator.w3.org/mobile/check
제가 만든 모바일 웹 사이트를 점검해보니 60%가 나오네요..
그런데 네이버를 점검해 보니 0%가 나옵니다.
음.. 분명 네이버 모바일이 아이폰, 안드로이드, 윈도우모바일 다 적용되고 디자인이나 구성도 훨씬 좋은데.. ^^
아마도 HTML, CSS 표준만으로 체크해서 그런가 봅니다.
'프로그래밍 > Web' 카테고리의 다른 글
| CSS의 Margin, Padding, Border 개념을 명확하게 하자 (0) | 2012/01/20 |
|---|---|
| GIS 지도 좌표계에 대한 정리~ (0) | 2011/12/14 |
| 모바일 웹 사이트 제작을 위한 표준~ (0) | 2011/11/28 |
| PHP의 allow_url_fopen=off일때 URL 주소로 파일 읽어오기 (0) | 2011/10/28 |
| MySQL 테이블을 모두 삭제하는 PHP 소스~ (0) | 2011/10/26 |
| 정규식으로 전화번호 형식 변경하기 (-포함해서 출력하기) (0) | 2011/10/24 |
Trackback 0 And
Comment 0
php.ini 파일에 allow_url_fopen=on으로 설정되어 있으면, URL 주소로 파일 읽어올 때 다음과 같이 처리하면 됩니다.
하지만 allow_url_fopen=off로 설정되어 있는 경우,
일단 php.ini 파일을 수정하면 됩니다.
벗뜨~~ 웹 호스팅을 하는 경우 php.ini 파일을 직접 수정할 수 없는 경우가 있죠~
이런 경우의 해결책을 찾아보니 다음과 같이 socket을 이용해 URL주소를 읽어오는 방법이 있었슴다..
추가적으로 GET 방식 호출은 다음과 같이 할 수도 있습니다.
기타 다른 방법으로는 .htaccess 파일을 이용하는 방법도 있더라구요..
.htaccess 파일에 다음과 같은 내용을 추가하면 된다고 합니다.
php_flag allow_url_fopen 1
'프로그래밍 > Web' 카테고리의 다른 글
| GIS 지도 좌표계에 대한 정리~ (0) | 2011/12/14 |
|---|---|
| 모바일 웹 사이트 제작을 위한 표준~ (0) | 2011/11/28 |
| PHP의 allow_url_fopen=off일때 URL 주소로 파일 읽어오기 (0) | 2011/10/28 |
| MySQL 테이블을 모두 삭제하는 PHP 소스~ (0) | 2011/10/26 |
| 정규식으로 전화번호 형식 변경하기 (-포함해서 출력하기) (0) | 2011/10/24 |
| 구글맵 javascript API v3에 대한 정리~ (2) | 2011/10/21 |
Trackback 0 And
Comment 0
PHP와 MySQL을 사용하는 웹 호스팅에서 데이터베이스의 모든 테이블을 지우려고 할 경우, Drop Database 문을 활용하지 못하는 경우가 많습니다.
그렇다고 수많은 테이블을 하나씩 지우는 것도 방법이 아닐 듯 하네요..
그래서 다음과 같은 PHP 프로그램을 통해서 처리할 수 있을 것 같습니다.
먼저 "show table"을 사용해서 전체 테이블 정보를 가져오고 이어서 "drop table" 명령으로 하나씩 지우면 되겠죠.
다음 소스를 참고하세요~
'프로그래밍 > Web' 카테고리의 다른 글
| GIS 지도 좌표계에 대한 정리~ (0) | 2011/12/14 |
|---|---|
| 모바일 웹 사이트 제작을 위한 표준~ (0) | 2011/11/28 |
| PHP의 allow_url_fopen=off일때 URL 주소로 파일 읽어오기 (0) | 2011/10/28 |
| MySQL 테이블을 모두 삭제하는 PHP 소스~ (0) | 2011/10/26 |
| 정규식으로 전화번호 형식 변경하기 (-포함해서 출력하기) (0) | 2011/10/24 |
| 구글맵 javascript API v3에 대한 정리~ (2) | 2011/10/21 |
Trackback 0 And
Comment 0
