Computer Science

인터넷 게임기업 N사. 이 회사는 유럽과 북미로 서비스를 확대하던 중 때아닌 복병을 만났다. 인터넷익스플로러(IE) 사용자가 많은 국내와 달리 유럽과 북미 사용자들은 사파리, 크롬 등 다양한 브라우저를 사용하고 있었기 때문이다. 액티브엑스(Active X) 기반의 인터넷 게임서비스만 해왔던 이 회사는 해외 진출을 위해 웹표준을 준수한 서비스를 새로 개발했다. 똑같은 게임을 서비스하는데 개발 비용과 시간만 2배 이상 허비했다. 이 때문에 이젠 개발초기부터 웹표준을 지켜기로 했다.
　
　국내 SW업체들이 액티브엑스 딜레머에 빠졌다.
　국내 웹서비스 98% 이상이 액티브엑스로 개발됐지만, 해외의 다양한 웹브라우저랑 호환이 안돼 번번이 퇴짜를 맞고 있기 때문이다. 수출을 위해 어쩔 수 없이 프로그램을 뒤집어 재개발하려 하지만 개발자가 없어 벽에 부딪힌다. 재개발해 수출해도 추가 개발 비용을 빼면 수익도 형편없는 수준이다.
　10일 웹 표준화 시민단체인 오픈웹 조사에 따르면 액티브엑스에 98% 이상 의존하는 국산 보안 솔루션의 대부분이 북미와 유럽 등 선진국 시장에 수출하지 못했다. 액티브엑스 기반으로 구축된 전자정부 서비스는 개발도상국 IT지원 일환으로 필리핀, 베트남, 파나마 등에 구축됐지만 선진국 진출 사례가 거의 없는 것으로 조사됐다.
　최진영 고려대 컴퓨터통신공학부 교수는 “미국이나 해외에서 SW개발자 파견 요청이 있어도 국내 개발자들은 진출하지 못한다”며 “가장 손쉬운 소프트웨어인 웹페이지나 웹서비스 개발자들이 수출 시장에 준비되지 않았다”고 지적했다. 최 교수는 “액티브엑스의 가장 큰 폐해는 다양한 브라우저를 사용할 수 없는 게 아니라 우리 개발자들이 수출용 웹서비스 개발에 참여하지 못하는 것”이라며 “국내 제도가 소프트웨어 수출을 막고 있다”고 강조했다.
　액티브엑스는 한국에서만 쓰이는 ‘주홍글씨’다. 세계에서 가장 이용이 활발한 전자결제 사이트인 페이팔이나 뱅크오브아메리카는 액티브엑스 없이 모든 브라우저에서 구현된다. 액티브엑스는 웹표준을 지키지 않은데다 악성코드 배포에 이용되기 때문에 마이크로소프트조차 쓰지 말라고 권하고 있을 정도다. 엑티브엑스 기반 국내 웹서비스가 아이폰 등 스마트폰에서 호환되지 않으면서 한국이 스마트폰 서비스에서 ‘갈라파고스 섬’으로 전락했다는 비판도 높다.
　특히 국내에서 액티브엑스에 치중한 웹 개발이 난무하면서 웹표준 서비스를 구현할 수 있는 개발자를 찾는 것은 하늘에 별 따기가 됐다. 대부분 개발자들이 당장 수요가 많은 액티브엑스 개발에 집중, 웹표준 교육을 받지 못했기 때문이다.
　김현승 한국기술비전 사장은 “국내 웹 서비스 회사나 개인 개발자가 해외 웹 개발 프로젝트에 참여하는 경우는 거의 없다”며 “최근 공공기관을 중심으로 웹표준 준수 움직임이 일고 있지만 웹표준 개발 가이드가 없어 개발에 어려움을 겪는 등 액티브엑스로 인한 SW생태계 악순환이 멈추지 않고 있다”고 말했다.
　 김인순기자 insoon@etnews.co.kr

○ 신문게재일자 : 2010/05/11

웹 표준의 중요성을 깨닫게 해주는 기사~ㅋㅋㅋ

국토해양부가 ‘한국판 구글 어스’를 만든다는 목표로 민간에 공간정보를 대대적으로 제공하는 등 공간정보 유통 체계를 전면 혁신한다. 28일 국토해양부는 이 같은 내용을 뼈대로 하는 공간정보 유통 체계 개편안을 발표했다. 국토부는 오픈 API(Open Application Programming Interfce) 방식을 도입한다. API를 개방해 개발자들이 이를 활용한 스마트폰 애플리케이션 등 응용 프로그램을 만들 수 있게 한다. 단순히 정보를 개방하는 것이 아니라 다른 자원과의 융합도 도모한다. 예를 들면 주요 포털 사이트는 국토부의 공간정보를 자사의 관련 서비스와 융합한 비즈니스모델을 만들어 서비스할 수 있다. 국토부는 또 서울·부산·제주 등 9개 지역별로 분산·운영중인 지리정보유통망을 서울 공간정보 센터 중심으로 일원화해 운영 효율성도 높인다. 민간에 지리정보유통망 시스템도 개방한다. 민간기업은 직접 제작한 맛집정보·내비게이션 지도·항공사진 등 공간정보를 정부 유통망을 활용해 판매해 수익을 올릴 수 있다. 정부에서 제공하는 공간정보의 가격은 단계적으로 인하할 계획이며 민간에서 제작한 공간정보는 해당 기업이 자유롭게 가격을 책정할 수 있게 한다. 이는 국내 공간정보 유통체계가 선진국에 비해 낙후해 관련 산업발전의 암초라는 지적에 따른 것이다. 실제로 미국은 지오데이터(geodats)를 캐나다는 지오커넥션즈(GeoConnections)를 유럽은 인스파이어(Inspire)를와 같은 포털 서비스를 마련 공공과 민간이 자유롭게 공간정보에 접근케 해 구글어스와 같은 서비스 창출의 토대를 지원한다. 국토부 관계자는 “다양한 공간정보를 활용한 부가가치를 창출할 수 있는 기반을 제공해 한국에서도 구글, MS 등 외국 대형 포털과 같은 기업을 육성할 계획”이라고 각오를 밝혔다. 정진욱기자 coolj@etnews.co.kr ○ 신문게재일자 : 2010/03/29

각 칸에는 최대 여덟 개의 인접한 칸이 있을 수 있다. 아래에서 왼족에 있는 4*4지뢰밭에는 두 개가 있으며 각각은 '*'문자로 표시되어 있다. 이 지뢰밭을 방금 설명한 힌트 숫자로 표기하면 오른쪽에 있는 것과 같은 필드가 만들어진다.


입력                  출력
4 4 
*...                   *100
....                    2210
.*..                   1*10
....                    1110




일단 허접한 알고리즘으로 하긴했는데

두가지 문제점이 있다.

1. 해당 값이 * 일 경우 주변 값도 * 이면 *에 +1을 하지 못하도록 하여야한다.

2. 위에서 . * .
         -> . . . 가장 왼쪽에 점의 경우에 그 점이 지뢰라고하면 그 주위에 값들이 +1을 하게 알고리즘이 구성되었는데 저 위치 같은 경우에는 왼쪽에 아무것도 없는 벽이라는것을 표현해줘야한다. 그것이 안되어서 상단 오른쪽에 값이 엉뚱하게 들어가 버린다.


             . * .

이러한 알고리즘이 있다.

n= 10 이면

10 ,5, 16, 8, 4, 2, 1    cnt = 7 (사이클길이)

짝수이면 n/2 로 나누고 , 홀수이면 3n+1 로 한다.

이 알고리즘을 적용을하면 결국에 n 은 1에 이르게 된다.

이 가설은 적어도 1000000까지의 정수에 대해서는 참이라고 한다.


이제부터 문제다.

어떠한  두 정수를 입력받는다.

0~1000000까지만 값을 입력받을수 있도록 하고

예를 들어 1 , 10 을 입력받는다 그러면 1 ~10 사이에 대해 최대 사이클 길이를 구하면 된다.

입력예     출력 예
1 10        1 10 20
100 200   100 200 125

먼저 입력 받는 수를 a와 b 라고 하고 a에 대한 알고리즘을 구했고 그 다음에 a+1 에 대한 결과와 비교하고

또 a+1과 계속 비교해가면서 b까지 비교해서 가장 큰 최대사이클을 구하는 방식으로 하였다.

생각보다 알고리즘 문제 재밌는거 같다 ㅋㅋㅋ

                                                                           등록
                                                                           실행

이번 프로젝트는 WPF에서 영상을 띄우고 사용자가 그 영상에서 특정한 시간대에 자기가 넣고싶은 데이터를 등록하고 그것을 영상을 실행시켰을 때 등록한 데이터들이 영상 옆에 뜨는것이다.


옆에 텍스트창은 리치텍스트박스로 만들어져있고 5줄마다 한페이지로 기록되게해놓았다.
저장을하게되면 페이지마다 시작시간과 종료시간을 적고 저장을 하게된다.



영상을 실행을 하게되면 등록한 데이터들이 오른쪽 Flow Document에 뜨게된다.




우선..프로젝트를 진행하였지만 결론부터 말하면 실패다. 구현할려고 하였던 기능을 시간안에 구현하지 못하였다.
시간이 있으면 더 구현하였겠지만 지금 하고있는 최종 프로젝트가 끝나게 되거나 시간이 남을 시에 나머지를 다 구현해야겠다.

영상옆에 자막을 띄우는 정도밖에 못하였다.


다음에 추가적으로 구현해야 될 부분은

1. 이미지 추가
2. 영상 추가(해당영상 옆에 보조로 보여줄수있는 영상)
3. 텍스트 폰트 효과(Flow Document에 적용해야 한다.)
4. XML파일과 동영상파일 매핑시키기
5. 자막처리 알고리즘 보완

마우스 우클릭 후 항목선택을 한다.


WPF 구성요소를 클릭한다.




가져올 사용자정의컨트롤을 클릭한다.



도구상자에 컨트롤이 들어와있다. 이제 가져다쓰면된다~

           
             리스트뷰에 먼저 헤더를 삽입한다.
            처음에 "" 이렇게 빈 헤더를 넣었는데 이유는 모르겠으나 subitem을 넣을때 
            자꾸 첫번재 열 다음부터 값이들어가서 임의대로 ""로 해놓고 길이도 1로해놨다.
            이상하게 2번째 열부터 값이들어간다.

            listView1.Columns.Add("", 1, HorizontalAlignment.Left);
            listView1.Columns.Add("싱크시작", 100, HorizontalAlignment.Left);
            listView1.Columns.Add("싱크종료", 100, HorizontalAlignment.Left);
            listView1.Columns.Add("자막내용", 200, HorizontalAlignment.Left);

            listView1.View = View.Details;

            listView1.FullRowSelect = true;
            listView1.GridLines = true;


다음에 실제 값들을 넣는다.
            ListViewItem item;

            item.SubItems.Add(temp);
           
            item.SubItems.Add(temp2);

            item.SubItems.Add(temp3);                
                   
            listView1.Items.AddRange(new ListViewItem[] { item});

이렇게 값이들어간다.




마지막으로 값을 가져오고싶을때는 아래와같이 가져 올수 있다.

string name = listView1.Items[0].SubItems[1].Text;

우선 전에 썼었던 MediaTimeline과 MediaClock 클래스를 사용하지않았다.

Timeline을 셋팅하고 그 상태서 Clock을 생성하고 그 Clock을 MediaElement와 연결했지만

연결을 하게되면 MediaElement로 제어가 되질않고  미디어엘리먼트의 클락의 컨트롤러로 제어를 해야됐다. 그리고  MediaElement에 position을 지정 해줄수 가 없었다. position을 임의로 지정하게 되면

미디어를 지정하는동안 클락을 변경할 수 없다 라는 오류가 난다.

이것을 해결하기위해서 여러 방법을 써봤는데 해결하지 못하였고

결국 MediaTImeline과 MediaClock을 사용하지 않는 방법을 사용하였다.

해결방법은

DispatcherTimer를 이용하였는데  우선 bool 변수를 하나 선언해서

매초마다 이벤트가 발생해서 미디어 -> 슬라이더바가  변경 될때와

슬라이더바가 움직여서 영상이 바뀔때가 겹치지않게 bool로 제어를 해주었다.


아래와같다~!

bool con = false;

//마우스를 떼면 false로 바뀌고 Tick이 다시 계속 실행된다.
private void timebar_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
      con = false;            
}        

//마우스를 클릭하면 true로 바뀌고
private void timebar_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
      con = true;
}

//클릭하면서 true로 바뀌었고  Tick이 발생안한다. 그 때 바를 움직여서 Position을 바꿔놓는다.
private void timebar_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
       if (con)
      {
       int SliderValue = (int)timebar.Value;

       TimeSpan ts = new TimeSpan(0, 0, 0, 0, SliderValue);

       mediaElement1.Position = ts;
       }
}

//초기값이 false이기 때문에 계속 실행된다.
void timer_Tick(object sender, EventArgs e)
{
    if (!con)
    {
        timebar.Value = mediaElement1.Position.TotalMilliseconds;   
              
        TimeSpan ts = new TimeSpan();
        ts = mediaElement1.Position;
                
        textBox1.Text = (string)ts.Seconds;
                
    }
}   

네이버 OPEN API 나 DAUM OPEN API나 키 발급받는것은 비슷하기 때문에 올리지 않겠다.

키 발급받을대 주의 사항은 URL을 적는게 있는데 키 발급받은걸 사용하려면 키 발급받을때 적은 URL과 똑같이 만들어서 사용하던가 아니면 해당 URL의 하위폴더로해서 만들면 된다.



네이버


<Script type="text/javascript"
src="http://map.naver.com/js/naverMap.naver?key=발급받은 키">
</script>
 
</head>
<body>

<div id='mapBox' style='width:600px;height:600px'></div> //맵 사이즈 지정
   
<script type ="text/javascript">

    //****************************** Map 생성 ******************************
    var map = new NMap(document.getElementById('mapBox'));
    map.setCenterAndZoom(new NPoint(321198, 529730), 3);

    //****************************** NZoomControl 생성 ******************************
    var zoom = new NZoomControl();
    zoom.setAlign("left");    // 슬라이드바의 좌우 설정
    zoom.setValign("top");  // 슬라이드바의 위,아래 설정
    map.addControl(zoom);
    map.addControl(new NIndexMap());  // 미니맵 생성

    //****************************** 이벤트 리스너******************************
    var regFlag = false;

    function addClick() {  //맵이라는 객체에서 클릭이라는 이벤트가 발생하면 clicked라는 함수를 호출한다.

           NEvent.addListener(map, "click", clicked);
            regFlag = true;
        }
    }

    function removeClick() {   //등록된 이벤트리스너를 해제시킨다.
  NEvent.removeListener(map, "click", clicked);
        regFlag = false;
    }

    function clicked(pos) {
        alert("이곳의 좌표 : " + pos);
    }

    //****************************** 마크생성 ******************************
    var cnt = 0;
    NEvent.addListener(map, "click", clickMap);

    function clickMap(pos) {
        if (cnt >= 20) {
            alert('마커는 20개까지만 추가 가능합니다.');
            return;
        }

        cnt++;
        map.addOverlay(createMarker(pos, cnt, "마커" + cnt));
    }
   
    function createMarker(pos, count, content) {
        var iconUrl = "http://cfs.tistory.com/blog/plugins/tatterDesk/image/ico_tag.gif";
        var marker = new NMark(pos, new NIcon(iconUrl, new NSize(15, 14)));

        NEvent.addListener(marker, "mouseover", function(pos) { //마우스가 마커객체있을시에 정보를보여준다.
      infowin.set(pos,
            "<TABLE style='width:80px;height:50px;border:solid 1px #666666'><TR><TD>" + content + "  "+ pos + "</TD></TR></TABLE>"); infowin.showWindow()
        });

        NEvent.addListener(marker, "mouseout", function() { infowin.hideWindow(); });
//마우스가 나가면 정보를 안보여준다.
return marker;
    }     
   

    var infowin = new NInfoWindow();
    map.addOverlay(infowin);

   

</script>
    
    <button onclick='map.zoomIn()'>+</button>
    <button onclick='map.setZoom(1)'>1</button>
    <button onclick='map.setZoom(3)'>2</button>
    <button onclick='map.setZoom(5)'>3</button>
    <button onclick='map.setZoom(7)'>4</button>
    <button onclick='map.zoomOut()'>-</button>
   
<button onclick=addClick()>click event 실행</button><button onclick=removeClick()>click event 제거</button>
</body>
</html>



DAUM



<Script type="text/javascript" src="http://apis.daum.net/maps/maps2.js?apikey=발급받은 키script>
</head>
<body>

<div id="map" style="width:600px;height:400px;"></div> 
   
<script type ="text/javascript">      
   
    var cnt;
    //맵 생성
    var map = new DMap("map");
    map.setCenter(new DLatLng(37.529196714213114, 126.92506196011036), 2);
   
   
    //주요 컨트롤 셋팅
    var indexMapControl = new DIndexMapControl();
    var zoomControl = new DZoomControl();
    var mapTypeControl = new DMapTypeControl()
   
    map.addControl(indexMapControl);
    map.addControl(zoomControl);
    map.addControl(mapTypeControl);
   
    indexMapControl.setAlign("left");
    zoomControl.setVAlign("middle");
   
  
   //이벤트리스너 등록
   DEvent.addListener(map, "click", clickMap);
  
   //이벤트발생
   function clickMap(pos) {
        if (cnt >= 20) {
            alert('마커는 20개까지만 추가 가능합니다.');
            return;
        }

        cnt++;
        map.addOverlay(createMarker(pos));
    }
 
    //마커생성
    function createMarker(pos) {
       
        var marker = new DMark(pos);                    
       
        return marker;
   }

</script>
    
 
</body>
</html>


결론은 네이버나 DAUM이나 사용하는 함수나 방법은 거의 똑같다. 단 DAUM은 로드맵이나 더 많은 클래스들과 기능들을 제공해주는 거같다. 개인적으로 DAUM을 더 추천한다.

위에 예제는 그냥 API를 갔다 붙여서 쓰는정도 밖에 안되서 적절한 예제는 아니지만

활용방법 하나 예를 들자면 DB에 어느 특정 지역에대한 정보를 입력해놓고 맵을 마우스로 클릭했을때 마커를 등록시켜 해당 마커의 정보와 DB에 있는 데이터와 비교해서 찍은곳이 같은 곳일시에 DB에 그 해당 지역에 대한 정보들을 등록해놨던것을 보여주는 활용방법이 있겠다.

원래는 실현해볼려고했는데 자바스크립트도 잘모르겠고 뭔가 모르게 잘 안되서...나중에 꼭 다시 해서 API 활용법을 올리도록하겠다!~

주요 클래스

 

 

 

- 미디어를 대화형으로 중지, 일시 중지 및 재생할 수 있으려면 MediaElement의 LoadedBehavior속성을 Manual로 설정해야 합니다

 

 

 

 

- MediaTimeline에는 연결된 Duration 및 BeginTime 속성이 있으며 이 속성을 사용하여 미디어의 시작 시간과 재생 시간을 지정할 수 있다.

 

 

 

 

 

 

 

클래스간의 연동

 

 

- MediaTimeline 개체에서 생성된 Clock개체를 생성해서 MediaClock으로 값을 대입해주고 MediaClock을 MediaElement와 연결 시켜준다.

 

예)

1. MediaClock  mc =  MediaTimeline.CreateClock();

 

2. mediaelement.Clock = mc;

 

당연히 위에 타임라인에서 클락을 생성할 때 타임라인에는 기본적인 정보들이 들어가 있어야 한다.

 

 

 

 

 

미디어플레이어만들기

 

 

1.     미디어가 정보들이 셋팅되어서 열릴 준비가 되었을 때

 

타임슬라이더바에 전체시간 적용

 

 

 

2.     미디어를 열 때

 

파일을 열고 클락과 엘리먼트를 연동시켜준 후 이벤트를 등록한다.

 

 

 

 

 

 

3.     미디어타임 이벤트 발생시

 

시간변경시 타임슬라이더바 값 변경

 

 

 

4.     타임슬라이더 위치 수동으로 변화시

 

마우스 끌어서 슬라이더바 특정시간으로 옮기기

사실 위와같이 하면 포지션의 위치가 바껴야되는게 맞지만 클락과 엘리먼트가 연동되있는 상태에서는 이것이 안되는걸 발견하였다.

 

이러한 오류가발생한다.

미디어 플레이어에 클럭이 지정되는 동안 이 작업을 수행할 수 없습니다

그래서 이것을 해결하기위해 미디어를 정지시켜놓고도 해보고  클락을 해제했다가도 해보고 여러가지 방법을 써봤지만 해결을 못하였다.

 

결론은 일단은 클락을 연동안시키고 해결하는 방법밖에 없다. 그러면 슬라이더바만을 특정시간으로 이동시킬수 있다.

 

방법이 있겠지만 아직 해결못하여서 해결되게되면 업데이트 하겠다.

5.     재생, 정지, 잠시멈춤, 다시재생

 

 

 

 

 

TIP – 위에서는 타임슬라이더 연동하는것만 나왔는데 볼륨슬라이더도 있다. 볼륨슬라이더는 아주 쉬운 방법으로 영상과 연동시켰다.

 

XAML 코드에 바인딩만 추가 하면 된다.

 

Value="{Binding ElementName=mediaElement1 , Path=Position, Mode=TwoWay}"

 

 
시간이 되면 못다한 기능들을 더 추가해야겠다!~!