Korea Evangelist

Developer & Platform Evangelism, Microsoft Korea

July, 2011

  • Korea Evangelist

    개발자들을 위한 Windows Phone Mango 베타 OS 및 SDK 공개

    • 1 Comments

    WP_000350_thumb1윈도우폰 망고 개발 도구 베타1이 발표 되었는지 한 달 만에 즐거운 소식을 여러분들께 전달하게 되어서 매우 기쁩니다!

    그 동안 저는 내부적으로 한 해를 마감하고 새로운 한 해를 위한 계획들을 정리하고 있어서 블로깅이 뜸 했습니다만 이번에 윈도우폰 망고 개발 도구 베타2 내면서 App Hub 등록된 개발자들이라면 현재 판매 되었던 모든 윈도우폰7 장치에 대해 영문용 윈도우폰 망고 OS 베타를 다운로드 받아 개발할 있도록 지원됩니다!

    그렇다면, 어떠한 내용이 바뀌어졌는지에 대해 좀더 상세히 말씀해 드리도록 하겠습니다!

    여러분들도 잘 알고 있다시피, 작년 11월에 윈도우폰7 디바이스 출시 및 마켓플레이스를 오픈하여 현재까지 25,000개 올라와져 있습니다. 이것은 이미 RIM Marketplace 에 올라와져 있는 앱의 개수를 초월하고 있습니다. 현재 고품질의 앱을 준수하고 있는데, XBOX Live 와 결합된 게임이나 실생활에서 유용한 앱들이 계속적으로 나오고 있습니다.

    그래서 이러한 혁신적인 앱들을 윈도우폰 망고 OS에 대해 개발해 주시기를 바라는 희망으로 이번에 개발자들을 위한 Mango OS 베타를 공개하게 되었습니다. 또한 이 Mango OS 베타는 윈도우폰 망고 개발 도구 및 SDK 베타2와 동시에 발표했는데, 여기에 가면 다운로드를 받을 수 있습니다.

    이번 윈도우폰 7.1 SDK 베타2에서는 베타1에서 지원되는 기능을 좀 더 확장시키고 정리시켜 놓았습니다!

    기능 설명
    멀티태스킹(Multi-Tasking) 윈도우폰 망고 부터는 멀티태스킹을 지원하는 데, 이러한 멀티태스킹을 지원하는 API를 지원합니다.
    FAS(Fast Application Switching)과 실행 모델(Execution Model) 윈도우폰 7.0 에서는 application process 의 state management 를 위하여 Tombstoning 이라는 개념을 도입했는데, 이번에 멀티태스킹을 지원하면서 태스크 스케쥴러에 관련된 State를 저장할 수 있도록 지원하는 데 이 상태를 dormant state 입니다. 이 dormant state 에서 빠르게 앱을 실행시킬 수 있도록 지원해주는 것이 바로 FAS 입니다. 이 API 를 어떻게 활용하는지에 대해 지원합니다.
    Background Agents (Scheduled Notifications and Tasks) 현재 프로그램이 돌아 가는 도중에도 Background Agents 를 통해 스케쥴링에 대해 예약을 할 수 있도록 제공해 줍니다. 예를 들어, Reminder 나 Alarm 등을 사용할 수 있습니다.
    Background Audio 여러분의 audio application 은 백그라운드에서 동작시킬 수 있도록 API 를 지원합니다. 따라서 여러분의 앱에서 배경으로 Audio 를 쓸 수 있도록 제공해 줍니다.
    Background File Transfers 백그라운드에서 웹 서비스로 이미지나 동영상을 다운로드하거나 스트리밍할 때 사용하는 API로 컨텐츠 중심의 경험을 만들 수 있도록 도와 줍니다.
    센서(Sensors) 장치 안에 포함되어 있는 Accelerometer, Compass Sensor, Gyroscope 그리고 Combined Motion 센서 등을 사용할 수 있도록 API를 제공해 줍니다.
    Sockets 지원 TCP 및 UDP 프로토콜을 지원함으로 클라우드 서비스와의 양방향 커뮤니케이션을 가능하도록 해줍니다. 예를 들어, 인스턴스 메시징이나 멀티 플레이어 게임등을 제공해 줍니다.
    Network Information 네트워크 및 네트워크 인터페이스에 대한 정보를 접근할 수 있도록 제공하는 API로 이통사 3G 나 WiFi와 같은 네트워크 연결성에 대해 식별할 수 있습니다.
    Push Notifications 푸시 노티케이션을 쓸 수 있도록 제공하는 API 로써 보내고 받을 수 있도록 제공되며, 앱이나 인터넷을 실행시켜 주는 Raw 타입과 메시지를 보여주는 Toast 타입, 라이브 타일 타입 등을 지원해 줍니다.
    Live Titles 시작화면에 좀더 동적으로 이미지나 숫자를 표현하고 정보를 사용자에게 보여줄 수 있도록 차별화할 수 있는 API 를 제공 합니다.
    Silverlight 와 XNA 통합 Silverlight 와 XNA 프레임워크를 동시에 쓸 수 있도록 제공해 줍니다. 각각의 프레임워크를 장점을 쓸 수 있도록 제공해 줍니다.
    Application Profiling 여러분 앱이나 게임 등을 만들 때 CPU나 메모리와 같은 것에 대해 문제가 발생할 때 시스템 리소스를 살펴 보고 그 결과를 코드에 반영시킬 수 있도록 하는 프로파일링을 할 수 있도록 지원해 줍니다.
    Windows Phone Emulator 하드웨어 센서와 데이터 등을 장치에서 사용하지 않고 에뮬레이터에서 쓸 수 있도록 제공해 줍니다.
    Visual Basic Support Silverlight 및 XNA Framework 를 Visual Basic 에서도 쓸 수 있도록 제공해 줍니다.
    Multi-Targeting and App Compatibility 윈도우폰 7.0 에서 윈도우폰 7.1로 개발할 때 애플리케이션 호환성, 변경된 API 그리고 타겟 버전에 대해서 업그레이드 할 수 있도록 제공해 줍니다.
    Web Browser Control WebBrowser 컨트롤은 Internet Explorer 9 엔진을 그대로 쓸 수 있도록 제공되며 HTML5 렌더링할 수 있도록 제공해 줍니다. 또한 Cookie 등을 접근하여 프로그래밍할 수 있도록 제공해 줍니다. 예를 들어, 엔터프라이즈의 MEAP 나 Hybrid App 을 개발 할 때 사용할 수 있도록 지원 해 줍니다!
    Device Status 배터리나 외부 전원, 장치 제조사, 키보드를 사용할 수 있는지 없는지에 대한 것을 지원할 수 있는 지 DeviceStatus 클래스를 지원해 줍니다.
    Local Database 애플리케이션이 실행될 때 저장소등을 통해 파일 입출력이나 데이터베이스를 사용할 수 있도록 해 주는데, Linq to SQL를 통해 로컬용 데이터베이스를 조작할 수 있습니다.
    Isolated Storage Explorer Isolated Storage 에 파일를 복사하거나 삭제할 수 있도록 커맨드 라인에서 제공해 줍니다.
    Launchers and Choosers 새로운 Launchers and Choosers 를 쓸 수 있도록 제공하는 데, 주소를 선택하거나, 게임 플레이어들에게 Game Session 에 대해 초대하거나, 지도를 크게 하거나 축소하거나 보여줄 수 있도록 제공 됩니다. 새롭게 추가된 Task 는 Address Chooser, Bing Maps, Bing Maps Directions Task, Game Invite Task, Save Ringtone Task, Share Link Task, Share Status Task 등이 있습니다.
    Contacts and Calendar People 허브에 있는 연락처 및 캘린더 정보를 읽을 수 있도록 제공해 주는 API 입니다.
    새로운 Camera API Raw 프레임을 접근할 수 있도록 리얼 타임 액세스를 포함할 수 있습니다. 따라서 이를 이용해서 스캐닝이나 Augmented Reality 애플리케이션을 개발할 수 있도록 제공해 줍니다.
    Pictures Extensibility 여러분의 앱에서 Picture 허브를 접근할 수 있도록 제공해 줍니다.
    Search Extensibility 여러분의 앱에서 Bing 검색을 제공해 줍니다.
    System Tray and Progress Indicator System Tray 로서 opacity 및 colors 를 지원해 줍니다.
    oData Client Linq를 이용하여 오픈 데이터 서비스를 이용할 수 있도록 oData 를 사용할 수 있습니다. id 와 password를 oAuth 가 아닌 데이터를 주고 받을 수 있도록 제공할 수 있습니다.
    시험판 앱 만들기(Trial Mode) 여러분의 앱을 판매하기 전에 시험판을 쓸 수 있도록 API를 제공해 줍니다.

    모두 설치하고 나면 아래와 같이 Visual Studio 2010 Express Edition 기반의 수 많은 템플릿과 Visual Basic.NET 에서도 앱을 개발할 수 있도록 제공하는 화면이 나올 것 입니다. 한편, 여러분들이 좀더 편리하게 앱을 개발하기 위해 “Windows Phone Mango 개발자를 위한 MSDN Webcast 제2탄” 과 "실습 교재(HOL)”를 현재 번역 중 입니다. 따라서 이 달 말쯤은 MSDN 을 통해 공개 될 예정입니다.

    wp7-2_thumb1

  • Korea Evangelist

    앱 캠프가 시작됩니다 – 7/20(수) PM7

    • 0 Comments

    자신의 PC를 가져와서 같이 앱을 개발 해보는 방식의 앱 캠프가 시작 됩니다. 관심 있는 많은 개발자 분들과 만날 수 있었으면 합니다.

    ‘첫 클래우드 앱 개발하기’ 세션에서 필요한 것은 본인의 PC에 여기 링크에서 Get Tools & SDK 를 클릭하시면 나오는 WPI를 통해서 윈도우 애저 개발에 필요한 도구를 모두 설치하신 후에 참석하셔야 합니다.

  • Korea Evangelist

    드디어 한국 개발자 앱 등록 개시!!

    • 0 Comments

    와우!! 감격적인 순간 입니다!! 드디어 한국 개발자들이 윈도우폰 앱을 올릴 수 있다는 소식을 전하게 되었습니다!

    제가 이 역사적인 순간을 위해 지난 주 뉴욕, 이매진컵 대회의 윈도우폰 부문 우승으로 석권하고 손살같이 귀국 했습니다!

    내부적으로는 이번 주 월요일 부터 AppHub 사이트에 테스트를 시작하였고, 오늘 새벽에 드디어 엔지니어링 팀이 완료하여 본사 Windows Team Blog 에 App Hub 가 새롭게 업데이트 되었습니다. 따라서 우리 나라와 더불어 7개 나라가 추가적으로 개발자 등록 및 앱 서밋을 할 수 있습니다. 그렇다면, 여러분들의 소원이었던 앱 허브 등록에 대한 새로운 소식을 제가 안 전할 수가 없겠죠?

    첫째, 현재 윈도우폰7 마켓플레이스 앱은 27,000 개를 넘어서고 있습니다. 윈도우폰7 차세대 버전인 윈도우폰 망고는 현재 베타 버전이며, 곧 RTM이 될 예정인데, 기존의 16개 나라 외에 이번 윈도우폰 망고 버전부터는 19개의 새로운 나라가 더 추가 됩니다. 19개국은 새로운 언어를 지원하는 Brazil, Chile, Colombia, Czech Republic, Denmark, Finland, Greece, Hungary, India, Japan, Netherlands, Norway, Poland, Portugal, Russia, South Africa, South Korea, Sweden, Taiwan 입니다.

    이 나라 이름을 보시고 어떠한 생각들이 드시는지요? 저는 앞으로 여러분들이 만든 앱을 더 넓은 나라에 판매 될 것을 상상 하니 이 무더운 여름이 참 시원하게 느껴집니다!

    둘째, 소비자가 앱을 다운로드 할 수 있는 마켓은 총 37개 뿐만 아니라 7개의 나라가 더 추가적으로 개발자들이 앱 등록을 할 수 있도록 추가 되는 데, 우리나라 외에 Chile, Colombia, Czech Republic, Hungary, Israel, South Africa 가 더 추가 되었습니다. 또한 중국은 올 가을 쯤에 개봉할 예정입니다. 한국에 중국 분들이 많은 데, 중국용 앱을 함께 개발해 보는 것도 좋을 것 같습니다.

    AppHub01

    아울러, 개발자 등록 및 앱 서밋 포털을 마이크로소프트에서는 App Hub 라고 부릅니다. 여기에 우리나라 사람들을 위해 한글로 읽기 쉽게 배려 해 놓았습니다. 뿐만 아니라 일본어와 Simplified Chinese 도 추가 시켜 놓았습니다.   

    셋째, 다른 타 스마트폰 마켓 플레이스가 달리 앱의 가격이 모든 우리나라 돈으로 표시 됩니다. 달러를 기본으로 하여 환율을 적용하여 표시 됩니다. 다시 말해, 소비자가 윈도우폰에서 앱을 살 때에도 달러로 표시되는 것이 아니라 한국 돈으로 얼마이다라고 표시됩니다. 개발자 정산도 마찬가지로 환율로 변환하여 지불 됩니다.

    money

    이렇게 하는 이유는 앱 가격에 대하여 부가세 포함하여 각 나라 현지 법에 맞는 TAX에 대해 투명하게 세금을 낼 수 있도록 ISV 개발자들에게 배려하는 측면이 있고, 세계 외환 환율이 변동성이 심한데 이를 고정적으로 유지하기 위함입니다. 따라서 윈도우폰 망고 런치 시점까지 몇몇 나라의 통화량이 변동이 심할 수 있는데, 5달러 정도 변폭을 줄 수 있도록 가격 옵션을 정할 수 있도록 추가시켜 놓았습니다. 

    넷째, Microsoft PubCenter 를 이용한 모바일 광고 탑재 앱을 추가해 넣을 수 있습니다. 2011년 말 부터 Australia, Belgium, Canada, Denmark, Finland, France, Germany, Hong Kong, India, Italy, Japan, Mexico, Netherlands, Norway, Spain, Sweden, Switzerland, United Kingdom 와 같은 나라에서 사용할 수 있습니다. 한국은 내년에 가능할 것 같습니다. 본사로 부터 업데이트 받으면 다시 게재 하도록 하겠습니다.

    끝으로 ISV 개발자를 등록하는 것은 법인 개발자와 개인 개발자, 학생 등록이 있습니다. 법인 개발자와 개인 개발자는 1년 기간 12만원(99달러)를 결제를 해야 합니다. 수익률은 개발자가 70% 를 가져 가고 100개까지 무료 앱을 개발할 수 있습니다. 또한 3개까지 개발자 디바이스 언락을 해서 개발할 수 있도록 해 줍니다.

    학생들은 DreamSpark 를 통해 무료입니다만 학생 인증을 반드시 거쳐 합니다. 절대로 학생이 아니신 분들이 학생으로 등록하지 마세요! GeoTrust 에서 엄격히 체크함을 알려 드립니다. 또한 법인 개발자는 법인으로 등록된 매니저나 대표 이사에게 승인을 받는 절차가 더 포함이 되어 있습니다. 자세한 사항은 지금 매뉴얼을 만들고 있으니 별도로 공유하도록 하겠습니다.

    뭐니뭐니 해도 가장 중요한 것은 Windows Phone SDK 7.1 Beta 2를 다운로드 받아 윈도우폰 망고 앱을 시작해야겠지요! 윈도우폰 망고 앱은 8월에 RC 버전이 나올 계획인데 그때 부터 올릴 수 있도록 제공할 예정입니다. 그 외 궁금한 사항이 있다면 저에게 연락 주세요!

  • Korea Evangelist

    [Orchard 강좌] 0. Orchard CMS 소개

    • 1 Comments

     

    이 내용은 ASP.NET MVP로 활동하고 계신 박용준님이 작성하신, 오픈소스 기반 웹사이트 제작 엔진인 Orchard로 처음 웹사이트를 구축 및 개발하기 위한 시리즈 강좌입니다. 많은 도움 되시길 바랍니다.
    ==================================================================================================

     

    소개

    안녕하세요. 박용준입니다.

    이번 강좌부터 Orchard CMS에 대한 강좌를 진행해 보도록 하겠습니다.

    제가 이 강좌를 30회에 걸쳐서 진행할텐데요… 그 목적은 이 글을 읽으시는 분들에게 Orchard에 대한 사용법을 전달하는 것 단 한가지입니다. 이 강좌에서는 어려운(?) 코드도 거의 나오지도 않고, 마우스 클릭 몇 번, 데이터 입력 몇 번의 단계를 거쳐서 하나의 웹 사이트를 만들어가는 과정을 보여드립니다.

    자, 그럼, Orchard가 무엇인지 그 탐험을 떠나보도록 하겠습니다…

    CMS(Content Management System)

    CMS는 웹에서 소스 수정 없이 모든 콘텐츠에 대한 생성/수정/삭제 등을 관리자 모드(또는 대시보드)에서 관리해주는 응용 프로그램을 말합니다. 웹 분야에 종사하시는분들이라면 익히 들어본 제로보드(XE)라던가 그누보드 등의 게시판 솔루션도 하나의 CMS로 볼 수 있습니다.

    그런 CMS 솔루션 중 최신 닷넷(.NET) 기술로 만들어진 Orchard(http://www.orchardproject.net)에 대한 소개 및 활용 방안을 여러분들께 소개하고자 하는 시간을 갖도록 하겠습니다.

    여기서 질문 한가지를 드려보도록 하겠습니다.

    여러분들은 웹 사이트를 만들 때, 처음부터 모든 것을 다 만들기 시작합니까? 아니면, 이미 만들어져 있는 시스템(기존 소스)에 내용을 추가하는 방법을 사용합니까?

    아마도 많은 분들이 기존 소스에 덧붙여서 새롭게 디자인하고 기능을 추가하는 방식을 많이 사용하실 것입니다. 이 방법이 생산성 면에서 비즈니스 요구사항을 가장 빨리 받아드릴 수 있는 방법이 아닐까 합니다. 우리가 오픈소스를 사용하는 가장 큰 이유도 바로 이러한 부분이 아닐까 합니다.

    Orchard

    Orchard라고 하면 무엇이 떠오르시나요? 예… “과수원”입니다. Orchard는 단어 자체의 의미와 동일합니다. 넓디넓은 과수원 땅에 구역을 나누어 한곳은 배나무 다른 한곳은 사과나무 등 관리자가 필요한 만큼 농사를 지어 풍성한 수확을 거두는 곳입니다.

    Orchard 프로젝트는 ASP.NET 기술로 만들어진 오픈소스 CMS 솔루션으로 Orchard 웹 사이트에 여러분들이 가꾸고자하는 페이지 및 위젯(부분 영역)을 맘껏 가꾸어나갈 수 있는 기반을 제공합니다.

    1_OrchardProjectWebsite_thumb.png

    [그림] Orchard 공식 사이트(http://www.orchardproject.net/)

    Orchard는 최신의 ASP.NET MVC 3와 Razor Syntax로 만들어져 있어, 성능과 확장성에서 매우 뛰어난 장점을 지닙니다. 무엇보다도 믿음직스러운 점은 일반 개발자들이 모여서 오픈소스 프로젝트가 구성된 점이 아닌, Microsoft 본사 개발자가 직접 참여하여 오픈소스 프로젝트를 진행하는 부분이기에 Microsoft의 직접 지원을 받을 수 있어 믿고 사용할 수 있다는 점과 꾸준히 업그레이드가 진행될 로드맵이 구성되었다는 장점 등 많은 이점을 가지고 태어난 오픈소스입니다.

    Orchard vs. DotNetNuke vs. Umbraco

    ASP.NET 기술로 만들어진 성공적인 오픈소스를 꼽자면 DotNetNuke(http://www.dotnetnuke.com/)가 있습니다. 국내에서는 많이 활성화되진 못했지만, 해외에서는 상당히 많이 사용되고 있는 오픈소스입니다. 이러한 DotNetNuke와 Orchard를 비교하자면, DotNetNuke는 이미 2003년쯤부터 프로젝트가 시작되어 지금은 상당히 방대한 커뮤니티가 활성화되어있습니다. 하지만, Orchard는 2011년 1월에 시작해서 2011년 4월에 버전 1.1로 만들어진 따끈따근한 새내기 오픈소스입니다. 또한, DotNetNuke와 같이 ASP.NET Web Forms 기술을 기반으로 만들어진 또 하나의 성공적인 오픈소스는 Umbraco(http://www.umbraco.com) 입니다. Umbraco도 CMS 기반으로 규모로 따지면, DotNetNuke만큼 많이 사용되는 닷넷으로 만들어진 CMS 솔루션입니다.

    DotNetNuke와 Umbraco는 ASP.NET Web Forms 기반으로 만들어져 있으며, Orchard는 ASP.NET MVC 기반으로 만들어져 있어, 각각의 영역에 관심있는 개발자로 나눠지는 경향이 있을 수 있습니다. 이에 필자는 Web Forms 기반 CMS는 DotNetNuke 및 Umbraco에게 손을 들어주고, MVC 기반 CMS에는 단연코 Orchard에게 힘을 실어 주고자 합니다.

    어쨌든, 본 강좌 시리즈에서는 Orchard에 대한 내용을 설명드리고, 추가로 DotNetNuke와 Umbraco에 대한 관심이 있는 분들은 각각의 공식 사이트를 방문해 보기 바랍니다.

    비전

    Orchard는 아래와 같은 여러 역할에 따른 기능을 비전으로 제시하여, 개발자와 디자이너의 기본 요구사항을 충족시킬 수 있습니다.

    • 일반사용자:
      • 인터넷 기반의 웹사이트를 간단하고 빨리 생성 가능
    • 개발자:
      • ASP.NET MVC 기반으로 모듈 단위 개발 및 프레임워크 기능 확장 가능
    • 디자이너:
      • 유연하고, 웹 표준 기반의 UI를 제작할 수 있는 테마 제공 가능
    • 웹 전문가:
      • Orchard는 모듈과 테마 개념을 적용하여 현대적인 웹 사이트 제작에 필요한 모든 것을 재정의할 수 있는 CMS 솔루션 제공

    Orchard 아키텍처(Architecture)

    image_thumb.png

    [그림] Orchard Architecture

    위 그림처럼, Orchard는 기본 베이스로 ASP.NET MVC를 기반으로 Orchard CMS Core 엔진이 위에 Orchard 모듈 기반으로 모든 페이지가 구성됩니다. Orchard 설치 후 모든 기능을 관리자 모드(대시보드)에서 새로운 페이지(Pages) 생성 및 관리, 블로그(Blogs) 생성 및 관리 등 웹 응용 프로그램 제작에 필요한 모든 구성요소를 Orchard CMS를 통해서 제공 받을 수 있습니다.

    커뮤니티

    앞서 제시하였지만, Orchard 프로젝트는 시작하지 얼마되지 않았고, 앞으로 계속 진행형입니다. Orchard에 대한 성공 여부는 얼마나 많은 커뮤니티가 활성화되느냐에 달려있다고 봐도 됩니다.

    이에 필자는 국내에 Orchard에 대한 소개 및 사용법을 짧지만 알차게 구성하여 여러분에게 소개하고자 이러한 강좌시리즈를 구성하였습니다. 이에 여러분들의 적극적인 참여도 부탁드립니다.

    마무리

    자~ 그럼, Orchard에 대한 소개는 여기까지 마치고, 다음시간부터 Orchard에 대한 A to Z를 진행해 보도록 하겠습니다. 단, 여기서 당부 드리고 싶은 말은 제 강좌는 무척 쉽습니다. 그냥 물 흐리듯이 최대한 따라하기 위주로 진행될 예정이고, Orchard에 대한 제 주관적인 생각보다는 Orchard 공식 사이트에서 제공하는 매뉴얼(Documents)처럼 Orchard에 대한 기능소개를 최우선으로 진행하고자 합니다…

    그럼, 다음 시간에 뵙도록 하겠습니다.

    끝.

    관련글

  • Korea Evangelist

    [Umbraco 강좌] 24. 사진 갤러리(Gallery) 만들기 3 : jQuery 슬라이드 쇼 플러그인 적용

    • 0 Comments

    이 내용은 ASP.NET MVP로 활동하고 계신 박용준님이 작성하신, 오픈소스 기반 웹사이트 제작 엔진인 Umbraco로 처음 웹사이트를 구축 및 개발하기 위한 시리즈 강좌입니다. 많은 도움 되시길 바랍니다.
    ==================================================================================================

    소개

    이번 강좌는 간단한 사진 갤러리 작업의 마지막 시간입니다.

    Umbraco CMS에서 자바스크립트를 인클루드하여 사용하는 방법 중 jQuery 플러그인을 적용하는 방법에 대해 설명합니다.

    절차

    1. 아래 그림은 현재까지 만들어진 사진 갤러리의 모습을 나타냅니다. [Gallery] 페이지에 사진을 2개 업로드 한 상태를 단순 리스트로 출력하는 예입니다.

    062511_1335_24Gall1.png

    2. 사진 갤러리를 표시해주는 수많은 jQuery 플러그인 중 하나인 PikaChoose 플러그인을 아래 경로에서 다운로드 받고 압축을 풉니다.

    062511_1335_24Gall2.png

    http://pikachoose.com/demo/

    3. 압축 푼 소스의 아래 경로에 가면 simple.html 문서가 들어있습니다. 이를 활용하여 현재 만들고 있는 갤러리에 적용해 보도록 하겠습니다.

    062511_1335_24Gall3.png

    4. 위 경로의 simple.html 문서를 웹 브라우저로 실행해보면 간단하게 사진이 슬라이드쇼로 보여집니다.

    062511_1335_24Gall4.png

    5. simple.html 문서를 Visual Studio 2010과 같은 에디터로 열어보니 아래와 같이 단순하게 적용할 수 있는 형태로 제작되어져 있습니다.

    062511_1335_24Gall5.png

    6. 다운로드 받은 플로그인의 소스 중 jquery.pikachoose.js 파일을 복사한 후 이를 Umbraco CMS의 scripts 폴더에 붙여넣기 합니다.

    062511_1335_24Gall6.png

    7. 다운로드 받은 플러그인 소스 중 simple.html 페이지에서 사용한 simple.css 파일을 복사한 후 Umbraco CMS의 css 폴더에 붙여넣기 합니다.

    062511_1335_24Gall7.png

    8. Umbraco [백오피스]로 돌아와서 XSLT 파일 중 [lstPhotos.xslt] 파일을 열고 아래와 같이 ul 태그에 id 속성을 주고 속성값으로 "pikame"를 지정합니다.

    062511_1335_24Gall8.png

    9. [백오피스]의 템플릿 중 [Gallery] 템플릿을 열고 아래와 같이 소스를 입력합니다.

    062511_1335_24Gall9.png

    위에서 입력된 소스는 아래와 같습니다.

    <%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>

    <asp:Content ContentPlaceHolderId="ContentPlaceHolderDefault" runat="server">

    <link type="text/css" href="/css/simple.css" rel="stylesheet" />

    <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>

    <script type="text/javascript" src="/scripts/jquery.pikachoose.js"></script>

    <script language="javascript">

                $(document).ready(function (){

                        $("#pikame").PikaChoose();

                    });

    </script>

    <umbraco:Macro Alias="LstPhotos" runat="server"></umbraco:Macro>

    </asp:Content>

    10. [Gallery] 페이지를 다시 웹 브라우저로 실행시키면 아래 그림과 같이 2개의 이미지가 슬라이드 형태로 실행됨을 확인할 수 있습니다. 다만, 이미지 사이즈가 조금 달라서 표현되는 모양이 조금 달라 보일 뿐입니다.

    062511_1335_24Gall10.png

    현재까지의 소스는 아래 경로에서 실시간으로 확인할 수 있습니다.

    http://umbraco.VisualAcademy.com/

    마무리

    문서 타입 생성부터 템플릿 편집 그리고 페이지 생성 후 XSLT 사용 및 jQuery 플러그인까지의 전반적인 순서대로 하나의 완성된 사진 갤러리를 완성해 보았습니다.

    Umbraco CMS는 이처럼 기존 웹 개발 기술에 전반적으로 사용하던 방식을 어렵지 않게 구현할 수 있습니다.

    이번 시간은 [Upload]와 [Folder Browser] 타입의 문서 타입으로 이러한 기능을 구현했지만, 실제로는 Umbraco CMS에 훨씬 더 다양한 Data Type이 존재합니다. 다 설명 드리지 못하겠지만 이러한 많은 수의 Data Type을 사용하여 현업에서 필요한 여러 가지 기능을 웹 기반으로 구현할 수 있는 CMS로서의 역할을 충분히 하고 있는 모습을 보여주고 있습니다.

    끝.

    관련글

Page 1 of 14 (68 items) 12345»