韓藥情報硏究會誌 (Korean Herb. Med. Inf.) 2014;2(1):1-6. pissn / eissn 표본정보관리프로그램에서 SVG 를이용한채집지위치시각화 최고야 * 한국한의학연구원한약자원그룹 Visualization of

Size: px

Start display at page:

Download "韓藥情報硏究會誌 (Korean Herb. Med. Inf.) 2014;2(1):1-6. pissn / eissn 표본정보관리프로그램에서 SVG 를이용한채집지위치시각화 최고야 * 한국한의학연구원한약자원그룹 Visualization of"

연우 원
5 years ago
Views:

1 韓藥情報硏究會誌 (Korean Herb. Med. Inf.) 2014;2(1):1-6. pissn / eissn 표본정보관리프로그램에서 SVG 를이용한채집지위치시각화 최고야 * 한국한의학연구원한약자원그룹 Visualization of Collecting Locations Based on Scalable Vector Graphics for the Specimen Information Software Choi Goya * Herbal Medicine Resources Group, Korea Institute of Oriental Medicine, Daejeon , Republic of Korea Abstract Management Program for Specimen Information Database (MPSID) is using by Korean Herbarium of Standard Herbal Resources at Korea Institute of Oriental Medicine. This software was coded in PHP language, it provides user-friendly web interface, and it shows information of specimen collecting location visually using SVG (Scalable Vector Graphics) format map data. This system is different to general GIS (Geographic Information System), but it is helpful to get the collecting locations for user. In this article, visualization method of MPSID for collecting locations was introduced. Keywords: Scalable vector graphics(svg), Korean herbal medicine, Specimen Information Software 서론한약재의연구에서그기원이되는생물체의표본확보는매우중요하며, 확보된표본의정보를일목요연하게관리하여필요시쉽게확인할수있도록하는시스템도반드시필요하다. 전산기술이발달하지않았던과거에는표본정보가기재된카드와종이에인쇄된목록만으로표본정보를확인해야했지만, 현재는표본관마다소프트웨어를이용하여표본정보를관리하고있다. 표본정보중에서채집지역에대한정보는보통주소체계형식의계층형위치정보와경 위도좌표가쓰이는데, 이는지도상에시각적으로표현함으로써정보이용자의직관적인이해를도울수있다. 여기에서는현재한국한의학연구원한약표준표본관 (KIOM) 에서사용중인표본정보DB 관리프로그램에구현된국내채집지지도출력기능을소개하고자한다. * Correspondence: 최고야 (Choi Goya. Tel: Fax: serparas@kiom.re.kr) Received , accepted

2 최고야. 표본정보관리프로그램에서 SVG 를이용한채집지위치시각화 본론 1. 표본정보 DB 관리프로그램개요 KIOM 표본정보 DB 관리프로그램은 PHP 로제작된웹인터페이스기반의프로그램으로서, 데이터베 이스는 MySQL 을이용하고있다. 데이터입력필드는표 1 과같으며, 이를바탕으로표본정보조회 및수정, 목록출력, 정렬, 검색및라벨출력등표본관리에필요한기본적인기능을제공하고있다. 표 1. 표본정보 DB 관리프로그램의데이터필드 필드 종류 설명 id int(11) DB 내부적으로사용되는고유번호 kind int(1) 표본종류 ( 압착 / 액침 / 약재 ) code tinytext 표본라벨에출력되는코드번호 s_name tinytext 학명 confirm int(1) 학명검증여부 ( 검증 / 미검증 ) family tinytext 과명 g_name tinytext 일반명 ( 식물명 ) h_name tinytext 생약명 k_name tinytext 한약명 date date 채집일 col_adrs tinytext 채집지 col_or tinytext 채집자 id_or tinytext 동정자 memo text 비고 2. 채집지정보의형식 KIOM 표본정보 DB 에입력되어있는국내채집지위치정보는표본에따라다양한수준이지만, 다음 과같은형식을따르고있으며모두영문으로기재되어있다. 고유명칭 ( 산 섬 식물원 연구소등 ), 리, 읍 면 동, 시 군, 광역시 도, 국가 현재까지 KIOM 표본정보 DB에등록된표본들은경 위도좌표가기재되어있지않아, 여타지리정보시스템과같이지도상에정확한위치를자동으로표시하는기능을구현할수는없다. 또한, 위와같이행정구역에기반한위치정보도모든표본에서읍면-리까지구체적으로기재되지는않았으며, 일부표본은시 군단위까지만기록된것도있다. 따라서채집지위치를시 군수준에서지도상에표현하는것을목표로하였다. 3. 지도데이터의형식 여기서사용한지도데이터는위키백과사이트에공개된 Map of South Korea-blank.svg 파일 (20 2

韓藥情報硏究會誌 (Korean Herb. Med. Inf.) 2014;2(1):1-6. pissn 2288-5161 / eissn 2288-5293 12.07.24. 버전 ) 1) 과 Administrative divisions map of South Korea.svg 파일 (2012.12.21.

3 韓藥情報硏究會誌 (Korean Herb. Med. Inf.) 2014;2(1):1-6. pissn / eissn 버전 ) 1) 과 Administrative divisions map of South Korea.svg 파일 ( 버전 ) 2) 을토대로수정하여만든것이며, 기존연구 3) 의예제로서웹주소 에공개되어있다. 이지도데이터는 SVG 형식의벡터이미지로서, 대한민국의광역시 도와시 군별로레이어가설정되어있어시 군단위별로색상을달리하여표현할수있다. SVG 형식이기때문에웹브라우저인크롬이나인터넷익스플로러 11 등에서원활하게표시된다. 4. 채집지정보와지도데이터의연계 SVG 파일은 <IMG> 또는 <EMBED> 태그를이용해다른형식의미디어파일처럼취급할수도있고, 웹페이지내에직접 <SVG> 태그를적어서화면에표시할수도있다 (HTML5 기준 ) 4). 여기에서는 PHP 프로그래밍과의간편한연동을위해후자의방식 (inline SVG) 을채택하였다. SVG 이미지가비록텍스트기반으로서동급의다른이미지형식에비해용량이작은편이지만, 웹페이지에인라인으로매우복잡한지도데이터를모두포함시킬경우에는페이지가로드되는시간도오래걸리며서버측에도부담이될수있다. 따라서여기에서는광역시 도별로별도의파일을만들어 ( 예 : map_korea_chungcheongbuk-do.php) 채집지정보에따라필요한광역시 도데이터만을로드하도록하였다 ( 예 : <? if($p1 == Gyeonggi-do ) include( map_korea_gyeonggi-do.php );?>). 각광역시 도파일에서시 군별레이어에는스타일클래스를부여하여 <SVG> 내부의 <STYLE> 태그로색상을지정할수있도록하였다 ( 그림 1). 클래스이름은각시 군명칭과동일하게하되, 모든시 군레이어의공통적인스타일과다중으로적용되도록하였다 ( 예 : class= l0 Jincheon-gun ). 시 군중에서고성군의경우강원도와경상남도에같은이름의행정구역이있어클래스이름이중복되지만, 광역시 도파일은해당지역한곳만로드되므로문제되지않는다. 그림 1. map_korea_chungcheongbuk-do.php 코드 ( 일부 ) 이시 군별클래스의스타일속성을지정하기위해 <SVG> 안에 <STYLE> 태그를포함시켰다 ( 그림 2, 11~16행 ). 여기서.l0 은모든시 군에공통으로적용되는스타일 ( 무색 ) 이고 ( 그림 2, 14행 ),.<?=$class?> 에서해당채집지의시 군명을 PHP를통해 $class 변수에지정함으로써해당시 군의레이어색상 (fill 속성 ) 을변경하게된다 ( 그림 2, 15행 ). 3

따라서 count() 함수로배열의개수를세어, 도이름은 $p1 변수에, 시 군이름은 $p2 변수에각각지정하였다 ( 그림 3, 3행 ).

4 최고야. 표본정보관리프로그램에서 SVG 를이용한채집지위치시각화 그림 2. map_korea.php 코드 ( 일부 ) DB에서선택된채집지정보에서광역시 도와시 군정보를추출하기위해 explode() 함수를이용하였다 ( 그림 3, 2행 ). DB의채집지정보는행정구역이쉼표로구분되므로, explode() 함수에서구분자를 쉼표 로하여배열을만들면배열의마지막에는 Korea 가, 그앞에는광역시 도이름이, 그리고그앞에는시 군이름이입력된다. 따라서 count() 함수로배열의개수를세어, 도이름은 $p1 변수에, 시 군이름은 $p2 변수에각각지정하였다 ( 그림 3, 3행 ). 행정구역상으로는특별시나광역시의구지역이시 군과동등한단위이지만, 지도상에표시하기에는면적이너무작으므로강화군등광역시소재군지역만일반시 군과동일하게표시되도록하고, 군지역을제외한나머지특별 광역시경계를하나의시 군과같이취급하였다 ( 그림 3, 5~6행 ). 그리고범례로서해당시 군이름을표시하도록하였다 ( 그림 3, 7행 ). 그림 3. map_korea.php 코드 ( 일부 ) 5. 구현결과 이상의과정을통해표본정보 DB 관리프로그램에서채집지의위치정보를지도상에시각화하는기능 을 PHP 프로그래밍과 HTML5 의 SVG 태그를활용하여구현하였다. 그림 4 의예를보면, 채집지는 내변산, 변산면, 부안군, 전라북도, 한국 이며, 이중에서시 군단위인 부안군 이선택되어해당지역 4

韓藥情報硏究會誌 (Korean Herb. Med. Inf.) 2014;2(1):1-6. pissn 2288-5161 / eissn 2288-5293 이대한민국지도상에다른색상으로표현됨을확인할수있다. 다만이러한방법은표본채집이이루어지는모든국가의행정구역별지도데이터를따로구비해야한다는어려움이있으며, 시 군수준이아닌더구체적인위치를표시하는데에는한계가있다.

5 韓藥情報硏究會誌 (Korean Herb. Med. Inf.) 2014;2(1):1-6. pissn / eissn 이대한민국지도상에다른색상으로표현됨을확인할수있다. 다만이러한방법은표본채집이이루어지는모든국가의행정구역별지도데이터를따로구비해야한다는어려움이있으며, 시 군수준이아닌더구체적인위치를표시하는데에는한계가있다. 추후에는중국등주요국외채집지의지도데이터를확보하여국외채집지도쉽게파악할수있도록해야할것이며, 표본채집시 GPS 등을이용하여경 위도좌표를기록하고이를바탕으로더정밀한위치를시각화할수있도록함이바람직하다. 그림 4. 위치정보시각화구현결과 ( 예 ) 결론한국한의학연구원한약표준표본관의표본정보DB관리프로그램을통해, PHP와 SVG를활용하여표본채집지를지도상에시각화하는기법을소개하였다. 이와같이다루기쉬운스크립트언어인 PHP를사용하면개발자입장에서도개발부담이적고수정이간편하며, 번거로운소프트웨어나플러그인을설치할필요없이익숙한웹인터페이스를쓸수있기때문에사용자친화적이기도하다. 향후에는 5

6 최고야. 표본정보관리프로그램에서 SVG 를이용한채집지위치시각화 국외채집지를위한지도데이터를확보하고, 경 위도좌표에기반한위치정보시각화기법을도입하 며, 지형도나기후대지도등부가정보를함께확인할수있는지도를추가하여더욱종합적인정보 제공을도모할필요가있다. 감사의글 본연구는한국한의학연구원 ICT 융합대체한약자원확보사업 ( 과제코드 : K14410) 에의하여수행 되었음. 참고문헌 1. Wikipedia contributors. Wikipedia. [SVG file] [ 다운로드 ] wikipedia.org/wiki/ 파일 :Map_of_South_Korea-blank.svg 2. Wikipedia contributors. Wikipedia. [SVG file] [ 다운로드 ] wikipedia.org/wiki/ 파일 :Administrative_divisions_map_of_South_Korea.svg 3. 최고야. 한약재분포시각화를위한 SVG 형식활용. 한약정보연구회지. 2013;1: Refsnes Data. W3Schools. [Webpage] 작성일미상 [ 접속 ] s.com/html/html5_svg.asp 6

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 05 장 CSS3 선택자 1. 선택자개요 2. 기본선택자 3. 속성선택자 4. 후손선택자와자손선택자 5. 반응 / 상태 / 구조선택자 CSS 블록을생성할수있다. 선택자를이해하고적절한선택자를활용할수있다. 1 선택자개요 CSS3 선택자 특정한 HTML 태그를선택할때사용하는기능 선택한태그에원하는스타일이나스크립트적용가능 그림 5-1 CSS 블록 CSS 블록 style