와우!! 감격적인 순간 입니다!! 드디어 한국 개발자들이 윈도우폰 앱을 올릴 수 있다는 소식을 전하게 되었습니다!
제가 이 역사적인 순간을 위해 지난 주 뉴욕, 이매진컵 대회의 윈도우폰 부문 우승으로 석권하고 손살같이 귀국 했습니다!
내부적으로는 이번 주 월요일 부터 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 가 더 추가 되었습니다. 또한 중국은 올 가을 쯤에 개봉할 예정입니다. 한국에 중국 분들이 많은 데, 중국용 앱을 함께 개발해 보는 것도 좋을 것 같습니다.
아울러, 개발자 등록 및 앱 서밋 포털을 마이크로소프트에서는 App Hub 라고 부릅니다. 여기에 우리나라 사람들을 위해 한글로 읽기 쉽게 배려 해 놓았습니다. 뿐만 아니라 일본어와 Simplified Chinese 도 추가 시켜 놓았습니다.
셋째, 다른 타 스마트폰 마켓 플레이스가 달리 앱의 가격이 모든 우리나라 돈으로 표시 됩니다. 달러를 기본으로 하여 환율을 적용하여 표시 됩니다. 다시 말해, 소비자가 윈도우폰에서 앱을 살 때에도 달러로 표시되는 것이 아니라 한국 돈으로 얼마이다라고 표시됩니다. 개발자 정산도 마찬가지로 환율로 변환하여 지불 됩니다.
이렇게 하는 이유는 앱 가격에 대하여 부가세 포함하여 각 나라 현지 법에 맞는 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 버전이 나올 계획인데 그때 부터 올릴 수 있도록 제공할 예정입니다. 그 외 궁금한 사항이 있다면 저에게 연락 주세요!
자신의 PC를 가져와서 같이 앱을 개발 해보는 방식의 앱 캠프가 시작 됩니다. 관심 있는 많은 개발자 분들과 만날 수 있었으면 합니다.
‘첫 클래우드 앱 개발하기’ 세션에서 필요한 것은 본인의 PC에 여기 링크에서 Get Tools & SDK 를 클릭하시면 나오는 WPI를 통해서 윈도우 애저 개발에 필요한 도구를 모두 설치하신 후에 참석하셔야 합니다.
이 내용은 ASP.NET MVP로 활동하고 계신 박용준님이 작성하신, 오픈소스 기반 웹사이트 제작 엔진인 Umbraco로 처음 웹사이트를 구축 및 개발하기 위한 시리즈 강좌입니다. 많은 도움 되시길 바랍니다. ==================================================================================================
소개
이번 강좌에서는 지금까지 로컬 컴퓨터에서 작업한 소스를 그대로 원격 서버로 업로드 해서 운영하는 방법에 대해서 설명 드리고자 합니다.
제 환경은 아래와 같습니다.
로컬 컴퓨터
C:\Users\Umbraco\Documents\My Web Sites\Umbraco CMS
http://localhost:XXXXX/
원격 서버
http://umbraco.VisualAcademy.com/
순서
- 로컬에 있는 Umbraco CMS 폴더의 모든 소스를 그대로 원격 서버로 FTP로 전송
- 원격 서버에서 Umbraco 소스 폴더를 ASP.NET 4.0 웹 사이트(또는 응용 프로그램)로 설정
- SQL Server CE / WebMatrix 관련 필수 구성 요소 설치
따라하기
1. 지금까지 30여회에 걸쳐서 작업이 진행된 소스는 필자의 로컬 컴퓨터의 아래 경로에 있습니다.
2. 이를 로컬에서 실행시킬 때에는 1회차부터 계속해서 Microsoft WebMatrix를 사용하여 진행이 되어왔습니다.
3. 아래 그림은 로컬에서 실행한 Umbraco CMS 메인 페이지의 모습입니다.
4. 또한, 로컬에서 실행한 [Skin3] 페이지의 모습도 아래와 같이 살펴볼 수 있습니다.
5. 아래 경로는 로컬 소스를 그대로 원격 서버로 업로드 후 이를 실행한 모습을 나타냅니다. 로컬에서 잘 돌아가는 사이트 그대로 원격 서버에서도 잘 실행됨을 확인할 수 있습니다.
필자는 로컬 컴퓨터의 소스를 FTP를 사용하여 원격 서버로 업로드 후 업로드 된 Umbraco CMS 폴더를 ASP.NET 4.0 웹 응용 프로그램으로 설정하였습니다. 이 부분은 따로 테스트가 어려우므로 아래에 제시한 경로에서 실행 내역을 확인하기 바랍니다.
원격 서버의 테스트 주소 : http://umbraco.VisualAcademy.com/
6. 원격 서버에서 실행되는 [Skin3] 페이지의 모습입니다.
7. 아래 그림은 왼쪽은 localhost에서 오른쪽은 원격 서버에서 실행되는 [시작하기] 페이지의 모습을 나타냅니다.
마무리
제가 Umbraco CMS에 대해서 준비한 과정은 여기까지입니다.
처음 Umbraco에 대해서 접했을 때에는 국내에는 소개 강좌 이외에는 전반적인 내용을 다루는 강좌를 찾아보기 어려웠습니다. 그러다 보니, Umbraco CMS 강좌를 준비하면서 고생이 이만 저만 아니었습니다.
다행히 Tech-ED, MIX, PDC 등의 자료와 Umbraco 공식 사이트의 강좌를 보면서 강좌 한 개씩 한 개씩 만들어 가능 과정을 거쳐서
현재에 이르렀습니다.
강좌 내용이 많이 부족할 수 있겠지만, 오픈소스인 Umbraco로 웹 사이트 제작을 염두 해 두고 있다면 제 강좌가 조금이라도 이해하는데
도움이 되었으면 합니다.
이제는 이 글을 읽는 여러분들이 Umbraco에 대해서 많은 경험을 쌓아서 여러 가지 기능 및 새로운 기능을 제게 소개해주는 강좌가 많이 올라왔으면 합니다. 기다리고 있겠습니다.
이상입니다.
감사합니다.
박용준
끝.
관련글
이번 강좌에서는 탑 메뉴와 서브 메뉴간에 왼쪽 영역 상단에 동일한 타이틀을 보여주고자 할 때 사용하는 서브 타이틀을 입력하는 기능에 대한 소개입니다.
1. 현재까지 디자인 시안 페이지를 바탕으로 아래 3개의 기능을 구현을 하였습니다. 상단 메뉴, 서브 메뉴, 사이트 맵 패스 기능이 그것인데요. 이번에는 아래 화살표로 표시되는 부분에 대한 타이틀이 동적으로 페이지 별로 변경되도록 설정해보도록 하겠습니다.
2. [Skin3] 문서 타입은 현재는 메인 콘텐트 영역에 데이터가 출력될 하나의 속성만을 가지고 있습니다. 이곳에 서브 타이틀을 입력할 수 있도록 하나의 속성을 더 추가하도록 하겠습니다. 아래 그림과 같이 [Left Title]이란 이름으로 속성을 하나 더 추가하도록 하겠습니다.
3. [Left Title] 속성이 추가된 [Skin3] 문서 타입을 사용하는 [Skin3] 페이지를 보면 하단에 [Left Title]을 입력하는 텍스트박스가 하나 더 나타납니다. 이곳에 적당한 서브 타이틀을 입력하면 됩니다.
4. 서브 타이틀이 출력될 위치를 잡고 이곳에 [Umbraco 페이지 필드]인 [leftTitle]을 추가합니다.
위에서 사용된 소스의 일부분은 아래와 같습니다.
<div id="aside-first" class="aside-first group">
<div id="ub_main_comm">
<div class="comm_menu">
<h1><umbraco:Item field="leftTitle" runat="server"></umbraco:Item></h1>
<umbraco:Macro Alias="umb2ndLevelNavigation" runat="server"></umbraco:Macro>
<p><img src="../Styles/images/@banner1.jpg"></p>
<p><img src="../Styles/images/@banner2.jpg"></p>
</div>
5. [Skin3] 페이지를 웹 브라우저로 실행하면 아래 그림처럼 [Skin 3 제목] 식으로 왼쪽 상단에 서브 타이틀이 정상적으로 출력됩니다.
6. 단, 여기서 [Sub1]과 [Sub2] 페이지를 실행하면 [Left Title] 속성을 입력하지 않아서 아래 그림과 같이 부모에 정의된 [Left Title] 속성이 상속되지 않습니다. 만약, 자식 메뉴에서 속성을 입력하지 않았을 때에는 부모 메뉴에서 정의된 속성값이 출력되고자 한다면 그 때에는 [Umbraco 페이지 필드] 삽입 시 [Recursive] 속성을 체크하며 됩니다.
7. 아래 그림은 [Left Title] 속성을 부여할 때 옵션으로 [Recursive] 체크박스를 체크하는 모습을 나타냅니다.
위 동작의 결과값으로 만들어지는 템플릿 코드의 일부는 아래와 같습니다.
<h1><umbraco:Item field="leftTitle" recursive="true" runat="server"></umbraco:Item></h1>
8. 아래 그림은 최종적으로 웹 브라우저로 [Skin3], [Sub1], [Sub2] 페이지를 모두 테스트하고, 각각의 페이지 모두 부모 페이지인 [Skin3] 페이지에서 정의한 서브 타이틀이 적용되어서 출력되는 모습을 보여줍니다.
자~자~자~자~자~… 여기까지입니다.
지금까지 지난 31회에 걸쳐서 일반적으로 Umbraco에서 사용되는 전반적인 기능을 모두 설명한 듯 합니다.
아쉽지만, 기본적인 기능은 여기까지 설명 드리도록 하겠습니다.
다음 시간에는 현재까지 만든 내용을 실제 도메인에서 실행될 수 있도록 원격 서버에서 실행하는 모습을 보여드리도록 하겠습니다.
이번 강좌에서는 디자인 시안을 적용한 Umbraco의 좌측 메뉴 부분인 서브 메뉴와 사이트 맵 패스(Bread crumb) 기능을 추가하는 방법에 대한 설명입니다.
1. 아래 그림은 29회차 강좌까지의 Skin3 페이지를 실행한 결과입니다. 상단에 메뉴가 정상적으로 적용되어 출력됨을 확인할 수 있습니다. 이번 강좌에서는 아래 2개의 영역인 서브 메뉴 영역과 Message 영역에 사이트 맵 패스를 출력하는 기능을 꾸며 보도록 하겠습니다.
2. [Skin3] 문서 타입 하위로 [Skin3] 문서 타입을 사용하도록 [자식노드 타입 허용] 옵션을 줍니다.
3. [Skin3] 콘텐트 페이지 하위로 Sub1과 Sub2로 2개의 새로운 페이지를 생성합니다. 이 때 [선택 문서 유형은] 반드시 [Skin3] 문서 타입으로 설정합니다.
4. 아래 그림과 같이 [Skin3] 페이지 하위로 [Sub1]과 [Sub2] 만들어진 모습입니다. 내용은 간단하게 입력합니다.
5. [Skin3] 템플릿을 열고 왼쪽 메뉴의 타이틀 하단에 아래 그림과 같이 [Umbraco 매크로]를 사용하여 2nd Level Navigation을 삽입합니다.
위 코드의 일부는 아래와 같습니다.
6. 웹 브라우저를 열고 [Skin3], [Sub1], [Sub2] 페이지를 실행시켜보면 아래와 같이 3개 페이지 공통으로 서브 메뉴가 출력됩니다.
7. 이번에는 디자인 시안 중 [messages] 영역에 아래 그림과 같이 또 다른 매크로인 [Bread Crumb]를 추가합니다.
위에서 사용한 코드의 일부는 아래와 같습니다.
<div id="messages">
<umbraco:Macro Alias="BreadcrumbNav" runat="server"></umbraco:Macro>
8. 사이트 맵 패스 기능을 추가한 후의 실행 모습입니다. [Skin3], [Sub1], [Sub2] 페이지 모두 해당 위치가 정상적으로 Message 영역에 출력됨을 확인할 수 있습니다. 여기까지의 단계를 거치면서 상단 메뉴와 왼쪽의 서브 메뉴 그리고 콘텐트 상단에 현재의 위치를 보여주는 사이트 맵 패스 기능까지 모두 구현을 해 보았습니다.
앞선 강좌들에서 다루었던 [문서 타입], [템플릿], [페이지] 등을 만들고 [템플릿]에 [Umbraco 페이지 필드] 및 [Umbraco 매크로] 기능을 사용하여 HTML 영역에 새로운 기능을 삽입하는 과정을 거치다 보니 어느덧 조금씩 생동감 있는 사이트로 변경되는 듯 합니다.
제가 따로 다뤄드리지 않겠지만, 더 많은 페이지 필드와 매크로 등의 기능을 사용하면 만들려고 하는 어떤 사이트가 되었든지 모두 Umbraco CMS로 충분히 구현할 수 있으리라 봅니다.
수많은 사이트가 Umbraco CMS로 구축된 이유가 이런 여러 가지 장점을 모두 갖추어서 그렇지 않을까 합니다.