마야울과 함께해요

DAUM과 NAVER의 검색 API를 이용을 할때, 무의식적으로 코딩을 하다보면 한글 검색이 되지 않을 것입니다.

1. 개요
1. 왼쪽의 트리뷰는 실시간 검색어를 가지고 오며, 처음에는 통합적인 실시간 검색어를 가지고 오고, 이후 뉴스, 인물, 영화를 선택하여 각각의 실시간 검색어를 확인 할 수 있다.
2. 실시간 검색어 앞의 +표시를 클릭을 하면 각각의 검색어에 대한 추천 검색어를 확인하여 좀더 많은 정보를 확인 할 수 있다.
3. 실시간 검색어 자체를 클릭을 하면 그 검색어에 대한 뉴스와 이미지를 검색을 할 수 잇다.
2. 검색엔진( Naver, Daum, LiveSearch)
1. LiveSearch가 기본값으로 설정되어 있으며, Naver는 실시간 검색어를 가지고 오고 추천 검색어를 가져오기 때문에 트래픽 제한에 걸릴 수 있음
3. 주소
1. http://www.xellos.pe.kr

Open API 중에서 네이버나 다음말고도 마이크로소프트에서도 LiveSearch라는 것을 지원을 합니다.
XML, JSON, SOAP방식을 지원하는 것으로 알고 있습니다.

XML방식은 네이버나 다음을 통해서 많이 사용을 해보았으니, .NET기술에서는 간단하게 사용이 가능 할 거라고 생각한 저는 SOAP 방식을 이용해서 개발을 해보았습니다.

우선 Silverlight와 접합을 시키기 위해서는 약간의 작업을 필요로 하는데, 저는 WCF라는 기술을 이용을 하여, WCF에서는 검색을 하고 검색결과를 리턴을 해주는 함수를 하나 만들었습니다. 이 함수를 Silverlight에서 요청을 하고 그 결과값을 이용을하여 출력을 하는 방식입니다.

우선 Silverlight프로젝트가 아닌 .NET 프로젝트에 Add Web Reference를 클릭을 하여 Reference를 추가를 해줍니다. URL은 http://soap.search.msn.com/webservices.asmx?wsdl 이 주소를 넣으시면 되시고 그다음에 Go를 클릭을 하시면 아래의 그림이 나올 겁니다.

그다음에 Web reference name을 정하시고 Add Reference를 클릭을 하시면 정상적으로 Web Reference가 추가가 됩니다.

여기까지는 수월 합니다. 그다음에 .Net 프로젝트에 WCF를 하나 추가를 해줍니다. Add->New Item을 가시면Silverlight-enabled WCF Service가 있습니다. 이것을 클릭하여 WCF 서비스를 하나 만들어 주세요~

그럼 여기서부터 시작입니다. 이제 간단한 함수를 하나만 만들어 주시면 됩니다.
위의 소스는 준서아빠님 블로그(http://www.uxkorea.net)님의 게시물 중 하나인 http://www.uxkorea.net/blog_post_178.aspx의 소스를 보고 제가 나름 수정을 한 소스입니다.
잠깐의 설명을 드리면 offset은 검색 결과중 어디서 부터 출력을 할것인지 정하는거고 count는 한꺼번에 출력할 갯수라고 생각하시면 됩니다. msdn을 보니 최대 결과 검색의 수는 1000개 까지만 되니 offset과 count의 값을 합한것이 1000을 넘으면 안된다고 합니다.

여기까지 하시면 WCF서비스를 만드는것은 끝이 났습니다. 이제는 이 서비스를 이용을 하는 Silverlight 프로그램만 만들면 되는데요. 이것은 간단합니다.
Silverlight프로젝트에서 Add Service Reference를 클릭을 하시고 Discover만 누르시면 방금 만든 WCF서비스를 찾을 겁니다.
적당한 Namespace를 넣으신다음에 OK를 클릭을 하시면 됩니다.
이제 이서비스를 사용하기만 하면 됩니다. 저는 이 소스를 쓴 곳은 Main.xaml.cs라는 곳에 사용을 하였고.. 여러분은 아무곳에나 사용을 하면 됩니다. 더 자세한 설명을 안드려도 이 소스 잠깐 보시면 어떻게 사용할지를 아실거 같네요... 혹 질문이 있으면 댓글이나 방명록에 글을 남겨주세요..

비주얼 2008에서 코딩을 하면 WCF가 잘 돌아가던 것이 원격에 있는 IIS에 올리면은 에러가 나온다.! 그 에러의 내용은 아래와 같다~!


에러의 간략한 내용이
이런식으로 나온다면 한번 따라해 보는것을 추천한다.

Service1.svc와 Service1.svc.cs 파일이 2개가 있다고 가정하에 시작을 하겠습니다.

Service1.svc.cs파일을 아래의 소스를 추가 해줍니다.

    public class MyServiceHostFactory : ServiceHostFactory
    {
        protected override ServiceHost CreateServiceHost(Type serviceType, Uri[] baseAddresses)
        {
            // 특정한 WCF 웹서비스 주소를 넣으면 됩니다.
            Uri webServiceAddress = new Uri("http://www.xellos.pe.kr/LiveSearch/LiveSearchService.svc");
            MyServiceHost webServiceHost = new MyServiceHost(serviceType, webServiceAddress);
            return webServiceHost;
        }
    }
    public class MyServiceHost : ServiceHost
    {
        public MyServiceHost(Type serviceType, params Uri[] baseAddresses)
            : base(serviceType, baseAddresses)
        { }
        protected override void ApplyConfiguration()
        {
            base.ApplyConfiguration();
        }
    }

그리고 Service1.svc파일도 약간 수정을 해야합니다. 비주얼 2008에서는 아무리 열어보려고 해도 저는 Service1.svc.cs파일만 열려서 EditPlus로 따로 작업을 했습니다. 열어보시면 단 한줄의 소스만 있을 겁니다.

<%@ ServiceHost Language="C#" Debug="true" Service="Gossip.Web.LiveSearch.LiveSearchService" Factory="MyServiceHostFactory" CodeBehind="LiveSearchService.svc.cs" %>

다른건 그대로 두시고 Factory를 추가시켜 줍니다. 그러면 웹서비스의 에러가 사라지고 아래의 화면이 나올 겁니다.

CodePlex(http://www.codeplex.com)을 돌아다니다가 Silverlight Contrib 라는 컨트롤 라이브러릴를 알게 되었습니다.

여기서 가장 생소하고 좋다고 생각한 기능은 CoolMenu라고 하는거인데..

RocketDock이나 ObjectDock의 같은 비슷한 기능을 보여줍니다.

데모는 여기에 들어가시면 볼 수 있습니다.
http://silverlightcontrib.org/demo/

간단한 CoolMenu 사용방법은 기존의 라이브러리 사용하는 방법과는 크게 다르지는 않습니다.

이렇게 사용을 하시면 됩니다. 

Codeplex(http://www.codeplex.com)을 가보시면 Silverlight_Toolkit_December 버전이 나와있습니다. 제가 보던건 November버전이었는데 December버전이 새로 나왔더군요
그럼 11월 버전과 12월 버전의 차이점은 무엇일까? 하는 생각이 드는데요. 한번 차이점을 찾아 보겠습니다.
왼쪽이 11월 지원 컨트롤이고 오른쪽이 12월 지원 컨트롤 목록입니다. 아무래도 최신 버전을 사용하는 것 같아요

지원하는 Theming 목록들입니다. 이 목록은 파일을저장한곳\Silverlight_Toolkit_December_08\Binaries\Themes에서 확인을 할 수 있습니다.

11월 버전보다 3가지의 Theming이 추가 되었군요~~ㅋ^^
저는 이중에서 BureauBlack와 WhistlerBlue라는 것을 사용해 보겠습니다.
우선 Theming을 사용하기 위해서는 밑에 네모박스로 체크를 해둔것을 추가 하셔야 합니다.
Microsoft.Windows.Controls.Theming.BureauBlack 과 Microsoft.Windows.Controls.Theming.WhistlerBlue 같은 경우는 자신이 사용할 Theming만 추가 하셔도 됩니다.

References를 추가를 해주셨다면, 이제는 이 References를 사용해야겠죠?
UserContol에 정의를 해주세요. 저의 경우에는
이렇게 정의를 하였습니다. BureauBlack를 사용하고 싶다면 WhistlerBlue부분을 BureauBlack로만 바꿔주시면 됩니다.

이렇게 정의를 해주신 다음에 가장 최상위에 Theming를 정의를 하면 하위 컨트롤은 다 Theming이 정의가 됩니다. 하지만 한번 해보시면 TabControl과 DataGrid는 적용이 되지를 않습니다. 이를 해결하기 위해서는 간단한 코드를 다시 정의를 해야합니다.


이것이 바로 간단한 정의 입니다.
TabControl의 이름을 tcMain입니다. DataGrid도 똑같이 정의를 해주면 됩니다.


이렇게 테마를 적용하면 어떻게 변하는지 알고 싶으세요?
그러면 아래의 링크를 따라가 보세요.
http://www.codeplex.com/Silverlight/Wiki/View.aspx?title=Silverlight%20Toolkit%20Overview%20Part%203

Silverlight에서 LayoutRoot를 Canvas가 아닌 Grid로 설정을 하고 Column이나 Row를 설정을 할 때가 있는데..

여기서 *과 Auto로 설정하는 차이가 있습니다.

어제 프로그래밍을 하던 결과로는 다르더군요..

정확히 왜 다른지는 모르겠습니다. 하지만 이 2개가 같다고 생각하시면 안될것은 확실합니다.

우선

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
</Grid>

이런식으로 설정을 하였을 경우 0번째 Row에 Height속성값이 변하는 StoryBoard를 만들경우 생각하는 거하고는 다른 모습으로 StoryBoard가 작동을 할 것입니다. 또한 0번째 Row의 Height가 줄어들고 그 줄어든 공간을 1번째 Row에서 차지를 해야하는데 그렇게 나오지를 않습니다.

그다음에 1번째는 *로 설정을 한 이유는 Blaclight라는 라이브러리에서 DragDropPanel이라는 것을 사용을 하는데 이곳에서는 Auto로 값을 주면은 제대로 된 모습이 안나옵니다.

왜이렇게 *과 Auto로 설정을 주는것에 차이가 있는지는 아직은 모르지만, 어제 엄청난 삽질로 알아낸 사실은 분명히 다르다는 겁니다.


훈스닷넷(http://www.hoons.kr)에 문의 결과
 XAML에서 auto 속성은 C#코드로 구현할 경우 Double.NaN 필드를 사용하더군요.
* 은 측정된 전체크기에서 나머지부분을 할당하기때문에 그런 결과가 나오는 게 아닐까요??
두가지 예제코드 ^^
<Grid ShowGridLines="True" Height="400" Width="400">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderBrush="Black" BorderThickness="2" />
<Border Grid.Row="1" BorderBrush="Black" BorderThickness="2" />
</Grid>


<Grid ShowGridLines="True" Height="400" Width="400">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderBrush="Black" BorderThickness="2" />
<Border Grid.Row="1" BorderBrush="Black" BorderThickness="2" />
</Grid>

이렇게 결론이 나왔습니다.

현재 버전을 3개를 만들었으면 3개 모두 올렸습니다.

버전1 : http://mashup.xellos.pe.kr/v1.aspx

버전2 : http://mashup.xellos.pe.kr/v2.aspx

버전3 : http://mashup.xellos.pe.kr/v2_5.aspx

현재 버전1이 가장 좋은 평을 받았고..
이걸로 닌텐도를 받았으니...

버전2는 사람들이 어떻게 사용하는지 조차 잘 모르는...
하지만 유일하게 소스를 공개를 해놓은 버전

버전2_5는 버전2를 수정을 했지만...
그렇게 평이 좋지는 않습니다~!

어떤 모습인지는 아래의 사이트로 들어가셔서 확인 하시기 바랍니다.
http://www.hoons.kr/Board.aspx?Name=mysilverlight&Mode=2&BoardIdx=18508&Key=&Value=

또한 소스는 공개를 하겠습니다.

원하시는 분은 확인 해보세요..

소스를 가져가시는 분은 댓글은 필수^^ㅋ

버전1과 2의 스샷의 자료는 없지만..

하루내내 버전2로 수정을 했지만...

버전1이 났다는 사람이 워낙 많아서...

버전2를 다시 바꾸어 버렸다는...

간단한 스샷을 올리면

메인화면입니다. 너무나 심플합니다....ㅜㅜ

검색어 설정에서 실시간 검색어를 클릭을 하면은 실시간 검색어를 토대로 검색어를 추가를 할 수 있습니다. 이미 추가된 검색어는 추가가 되지 않으며, 추가된 검색어를 확인 할 수 있습니다.

검색 결과에서 이미지 검색을 클릭을 했을때  모습..
이렇게 만든것이 반응이 괜찮으면 기능을 더욱 추가할 예정~~