Flat UI 로 만든 관리자 페이지를 보고싶다면?

플랫 디자인으로 만든 관리자 페이지? 있지!

뭐.. 물론 애플도 지금 아이클라우드 플랫UI로 베타 날려서 하고 있긴 하지만

이미 실전에서도 플랫 UI를 채택한 관리자 페이지가 있다는 말씀.

어디냐.. 윈도우 애져 관리자 페이지다.

Capture24.png

Capture25.png

메트로 UI로 플랫UI 상용화에 신호탄 때린 마소의 메트로UI 쏙 빼닮은 플랫 UI 관리자 페이지 되시겠다.

한글 글꼴이 굴림이라 촌스러워도 봐줘라. 영어로 하면 정말 플랫UI의 신세계를 맛볼 터이니.

19.png

영어로 하면 글꼴 덕분에 플랫UI가 지대로 살아난다.

안타깝게도 그냥은 못보고 애져 체험이라도 가입해야 한다. 90일 체험인데 신용카드 요구한다. 체험하기 싫거든 그냥 이 이미지로 만족하라. ㅈㅅ.

http://manage.windowsazure.com

composite / 2013년 8월 16일 / 미분류 / 0 Comments

Website in Windows Azure 후기

후기 올리라는 카페에다가 올리고 여기에 Mighty and Powerful 하게 올렸습니다.
오늘 애져를 들어가자마자 깜짝 놀랬던건 바로…
 Capture25.png

올ㅋ 한글화도 했네요. 이제 문서도 한글화하면 되겠군요.
여담인데 JDBC for MSSQL 도 한국인들이 많이 사용합니다. 저도 참 좋아하는데요.
(JAVA와 오라클이 찰떡궁합이라면서 JAVA와 MSSQL 쓰는 시스템 의외로 많더군요,)
그것도 문서가 한글화된게 없어서 아쉬웠다는 후문이 있습니다. 냅두세요. 굳이 한글화 안해도 알아서 잘써요.

어쨌든 오늘은 웹사이트 애져가 생긴 기념으로 웹사이트 애져를 만진 후기를 올려보도록 하겠습니다.
하지만 그냥 ASP.NET 이나 ASP.NET MVC로 애져 돌리면 식상(?)합니다. 그래서 오늘 제가 만질 프레임워크는 바로..

logo

낸시입니다. 루비에서 간단하고 빠르게 웹 앱을 만들 수 있는 문화컬쳐 프레임워크 sinatra 의 닷넷 버전이죠.

http://img.viame-cdn.com/photos/4731d520-2f08-0130-db54-1231380fae95/r600x600.jpg
저도 참 좋아하는데요.

그래서 강좌도 올렸습니다. 관심있다면 링크 클릭하시와요.
http://www.sqler.com/447154

자 이제 낸시 웹환경을 구축하겠습니다.

Capture1.png

먼저 빈 웹 프로젝트를 만들어 줍니다. 우~야~

Capture2.png

이제 프로젝트를 오른쪽마우스 클릭해서 Nuget 패키지를 엽니다.
낸시는 .NET 4.0 이상이 요구되기 때문에 VS2010 이상에서 작업이 가능합니다. (없어도 개발하기 쉬울정도지만..ㅋ)
VS2010 에서부터 확장기능이 지원되기 때문에 Nuget 은 필수겠죠?

Capture3.png

체크된거 받습니다. 여러분이 낸시를 가장 쉽고 빠르게 접할 수 있는 방법입니다.
ASP.NET MVC3 을 만져봤다면 Razor 쓰는데 지장없을 겁니다.

Capture4.png

그런 다음 낸시를 돌릴 클래스가 필요하죠.

Capture5.png

클래스 이름가지고 저는 뭐라하지 않습니다. 마음대로 지어주세요.

Capture6.png

이 한줄 하나로 요청과 응답이 끝납니다. 홈페이지 들어가자마자 Hello World 라고 람다식으로 반환해줍니다. 이렇게 하면?

Capture7.png

요로코롬 나옵니다. 참 쉽죠?
이렇게 끝나면 안되죠. 이제 뷰를 만들어봅시다.

Capture8.png

새항목을 추가해주세요.

Capture9.png

마소 역시 기대에 부흥하는군요. Razor 뷰파일은 일반 웹 앱에서 제공 안하죠. HTML 파일 선택하시고 걍 확장자를 cshtml 파일로 바꾸시면 됩니다.
(VB.NET 도 지원합니다. 쓰실 분은 vbhtml 로 확장자 바꾸시면 됩니다.)

Capture10.png

여기서 모델을 사용하려면 @inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<모델타입> 을 상속받아야 합니다.
제네릭 없어도 됩니다. 없으면 Model 속성은 dynamic이 되거든요.

Capture11.png

그리고 또하나 요청과 응답을 만들어줍니다. 메서드 방식이 아닌 인덱싱 방식입니다.
인덱싱 방식이라서 보기에도 정말 깔쌈하지 않나요?
View 속성에서 첫번째 인자는 뷰 파일, 두번째 인자는 전달할 모델입니다. 참 쉽죠?
그럼 빌드하고 접속해 보겠습니다.

Capture12.png

<br/> 태그 넣는걸 깜빡했지만 잘나오는거 보니 감격스럽지 않습니다나까?

a59e81d330a119345a96567e2740ad07.JPG

이런 낸시 웹 앱을 이제 애져로 배포하겠습니다!

 Capture14.png

게시 프로필 다운로드 클릭해서 로긴하고 프로필 다운받아서 겨져오기만 하면..

Capture15.png

이렇게 알아서 세팅을 해줍니다. 아주 쉽죠?

Capture16.png

뭐 구성은 어떻게 해도 상관은 없지만 저는 Release 가 선택되서 그냥 이대로 가겠습니다.

Capture13.png

인증서 오류가 뜨는데… 애져 공식인데 왜뜰까.. 에라이 모르겠다.

Capture17.png

이렇게 올라갈 파일이 뜹니다. 이제 최후의 버튼인 게시 버튼만 누르면…

Capture18.png

게시됩니다. 게시되는동안 커피한잔 하세요. 저는 물한모금 마신다음 보니 완료되있더군요.
이제 부풀린 마음으로 게시된 웹사이트에 접속해 볼까요?

Capture19.png

어 뭐야… 왜이래.. 이상한가..

Capture20.png

디버깅을 한번 해보겠습니다. 설정설정설정… 그런다음 새로고침..

Capture21.png

… 뭐여 갑자기 잘만뜨네..

Capture22.png

문제 하나도 없이 잘만뜹니다…

1d8328ed5c15d042d3f496995949da7e.JPG

본의아니게 정말 완벽하게 멋집니다.

Capture23.png

알고보니 애져에서 빌드를 안하고 그냥 냅다 띄워버렸군요.. 애져 이것좀 어떻게 해주세요.
어쨌든 사건은 해결하였으니 서비스할때 불필요한 항목은 해제하겠습니다.

Capture24.png

이렇게 해서 빠르고 쉬운 낸시를 애져로 돌리는데 성공했습니다. 어때요. 참 쉽죠?

애져 웹사이트는 .NET 과 PHP를 지원한다고 합니다. .NET 3.5 또는 4.5 를 띄울 수 있기 때문에 VS2008 로 만든 사이트도 띄울 수 있죠.

회사에서 일하면서 클라우드에 대한 얘기를 들어봤습니다.
학생이 천명 이상인 대학이 있다고 합니다. 그런 대학에서 전산관리는 정말 빡세다고 하더군요.
이때 전산종사자가 가장 두렵고 힘든 시기가 있는데 바로 수강신청이라고 합니다.
수강신청 시기에 학생들이 많이 몰리다보니 서버 뻗는건 한순간이라고 하더군요.
그래서 어떤 대학은 자체 서버에서 수강 신청을 하는 대신 전문 대기업 (KT같은 통신사 등)에다가 클라우드로 띄운다고 합니다.
수강신청기간 동안 트래픽은 거기로 몰리고, 자체 서버가 다운되는 부담은 감소했습니다. 물론 그만큼의 비용도 절약했죠.
그리고 수강신청기간이 끝나면 클라우드에 있던거는 내린다고 합니다. 그리고 쓴만큼 비용 물고 철수.

여태까지 클라우드를 어떤 전략으로 사용하면 좋을까 이런 고민을 해봤는데. 정말 납득이 빨리 가는 사례를 이렇게 언뜻 접해보니까 신선한 프래시가 아닐 수 없습니다.
클라우드가 왜 주목받고 매력적인지 실감을 하게 된 사례라고 봐도 무방하겠습니다.

이것으로 애져 후기를 마치겠습니다. 감사!

composite / 2013년 3월 8일 / 미분류 / 0 Comments

윈도우 애져 후기 – Java in Windows Azure

왜 신개념 후기라면 바로 대우형님께서 제안하던 비주얼스튜디오로 배포하는게 아닌.. 바로!

http://allthingsd.com/files/2013/01/java_skull_crossbones-380x246.jpg

이겁니다. 아시다시피 자바죠. 위에 해골바가지가 왜 있냐구요? 아시는분은 아시겠지만 큰 보안이슈가 있었습니다.

오라클에서 미국의 강경대응 나오자 무섭게 발빠르게 보안 업데이트를 제공해줬습니다. 그러나…

한국에서는 보안 업데이트조차 두려워합니다. 비용도 들고 그동안 서비스 중단해야 하고…

그래서 한국 자바진영엔 결국 별다른 조치를 취하지 않았죠.

그러니..

http://cfile1.uf.tistory.com/image/12109D494FF40580148167

그러니까 개발자들은 자바를 멀리하고 닷넷을 가까이 하는 게 낫습니다.

…라고 하면 한국에서 쫒겨납니다.ㅋ

어쨌든 마소가 자바를 위한 애져 배포 환경을 제공했습니다. 그것도 오픈소스로.

공식적으로 이클립스 배포 환경이 제공되죠. http://www.windowsazure.com/en-us/develop/java/

이번 후기는 만약 가상머신이었다면 자바 쉽게 돌려보려고 했는데 인프라 서비스로 제공되는 바람에..

하지만 자바 하겠다고 했으니 해야죠.

먼저 개발 환경을 구축해 보겠습니다. 이클립스를 실행 후 Install New Software 가겠습니다.

1.png 

저장소 하나를 추가합니다. 이름은 아무렇게나 하고, 주소는

http://dl.msopentech.com/eclipse 되겠습니다.

2.png 

그러면 애져가 떡하니 뜹니다. 깔아주십시다. 깔아주는 과정이야 이클립스 확장 추가하는거와 별 다를 거 없습니다.

그리고 이클립스 재시작하면 툴바에 애져 로고가 뜰테고.. 어쨌든 프로젝트 하나 추가하도록 하겠습니다.

근데 안타깝게도 바로 나와 있지 않으니 Other 해줘야겠져죠.

3.png

이제 애져를 찾아볼까요?

4.png

오 요깄군요. 애져 배포 프로젝트. 추가해주겠습니다.

5.png

프로젝트 이름을 아무렇게나 정해주시고.

6.png

JDK 어딨냐 정해주도록 하겠습니다. 저같은경우는 무설치(포터블) 환경을 선호하는 탓에 수동으로 정해줬습니다.

7.png

웹 프로젝트를 한번 해볼까 해서 이번엔 톰캣 경로를 지정했습니다. 배포하면 JDK와 톰캣까지 같이 배포되겠습니다.

그래야 웹 어플리케이션이 돌아가죠. 애져 클라우드에는 암것도 없습니다. 닷넷만 딸랑 있죠.

8.png

그리고 배포한 웹 앱 파일을 지정해 주겠습니다. 헬로우 월드~

9.png

마지막 단계입니다. 세션 유지 정책과 캐시 정책, 원격 디버깅을 제공해줍니다. 자바 개발자에게 디버깅은 필수겠죠.

이렇게 해서 프로젝트를 다만들고 나면 구조는 요로코롬 생겼습니다.

10.png

왠지 조금 복잡해 보이긴 하지만 기분탓이겠죠.

여기서 여러분이 자주 만질 곳이 바로 startup.cmd 와 run.cmd 그리고 package.xml 입니다.

샘플에 startup.cmd 예제가 있습니다. 톰캣 예제가 하나 있습니다.

저는 이걸 복붙신공을 날렸습니다.

11.png

대충 준비가 됐으니 이제 배포 단계로 넘어가겠습니다. 프로젝트에 마우스 오른쪽 클릭하면…

12.png

Deploy to Windows Azure Cloud 가 있습니다. 클릭!

13.png

이제 여러분의 애져 환경을 세팅해야 하는데.. 모르면 그냥 저 따라하세요.

윈도우 애져에는 배포환경 세팅 파일을 제공해줍니다. 이거 하나면 여러분 애져 환경은 세팅 끝나죠. 빨간박스를 누르면…

14.png

조그만 창이 뜨는데. 먼저 빨간 박스 버튼을 누르면 창 하나 또 뜨면서 애져 로긴창이 뜹니다.

로그인 해주면 알아서 바로 다운로드 해줍니다. 다운 받아 주시고,

아래 Path 에 다운받은 세팅 파일을 불러와 주시고 OK 만 눌러주면 됩니다.

15.png

그러면 애져 계정 세팅은 끝!

 16.png

이건 원격 데스크탑에 접속하기 위한 환경설정입니다. 자바 앱이 잘돌아가는거 확인은 해야죠. 가뜩이나 콘솔 기반인데.

애져는 친절하게도 이렇게 원격 데스크탑으로 들어가서 자바앱이 잘 돌아가나 확인을 할 수 있는 환경을 제공합니다.

여러분이 설정할 것은 원격 데스크탑 아디와 비번입니다. 나머지는 냅두는 것이 정신건강에 이롭습니다.

인증서 다룰 줄 아시면 인정서 바꾸셔도 됩니다.

그리고 원하시면 맨 아래 “배포후 원격 데스크톱 시작” 체크해서 배포 끝나고 바로 원격 데스크탑에 들어갈 수도 있습니다.

이제 최후의 버튼인 Publish 가 있습니다. 눌러주면 애져로 배포 시작합니다.

17.png

솰라솰라솰라…

18.png 

Staging 은 그냥 개발 환경이라 생각하시면 됩니다. 그밖에 Production 이 있는데 그건 실제 운영 환경이죠.

애져는 이렇게 두가지 환경으로 테스트와 서비스를 넘나들 수 있기 해줍니다.

이제 배포중인 걸 확인해 봐야죠? 애져 관리자 페이지에 들어가 보겠습니다.

19.png

여러분이 선택한 앱클라우드에 인스턴스 하나 저렇게 떡하니 뜨면 끝!

어때요. 자바도 참 쉽죠?

마소가 어떤 언어던 정말 배려를 많이 해준 듯 합니다.

이렇게 쉽게 배포가 가능하다면 자바 웹 프레임워크의 유망주인 Play! Framework 도 쉽게 배포할 수 있다는걸 알게 됐습니다.

비록 가상운영체제처럼 자유도가 조금 떨어지지만, 애져의 IaaS 를 활용하여 어떤 앱이던 그냥 배포만 해도 바로 테스트하고 서비스할 수 있는 환경을 만들 수 있다는거에 놀라움을 금치 못했습니다.

근데 한글 메뉴얼이 없는게 아쉽기도 합니다. 뭐.. 자바진영에는 애져를 거들떠도 안볼거라는 슬픈 현실이 있지만..

JSP 커뮤니티에서도 이슈 다뤄본 것도 없다능. 근데 클라우드는 운영체제 막론하고 돈이 드는건 사실이잖아요.

한국에서 클라우드와 언어의 다양성 존중과 다양한 접근이 개발자에게 필요한 시점이긴 하죠.

물론 개발자 천국이라는 제니퍼소프트같은 회사가 아니라면 어려울 것 같긴 하겠지만.

저같이 팍팍한 프리랜서 뛰면서 자유를 갈망하는 개발자도 이런 새로운 시도를 하는데..

여기서 MSSQL 만지는 자바개발자분들 있다면 한번 도전해보세요. 다음 애져 체험이 언제일지는 모르겠디만

아마 또 이 서비스로 체험 이벤트 뜰지도 모를 일이지만.

이것으로 후기를 가장한 팁을 마치겠습니다.

감사합니다.

composite / 2013년 3월 7일 / 미분류 / 0 Comments