산업별닷넷 3.0 적용사례 손정민 아키텍쳐전도사 ( 부장 ) 한국마이크로소프트
Agenda 산업별.NET 3.0 적용사례및적용가능아키텍쳐 금융 ( 은행및증권사 ) 유통 ( 온라인쇼핑몰 ) 제조 공공 통신 일반업무및기타
금융권차세대 UX(User Experience) AS-IS 시스템화면구성 - 윈도우어플리케이션안에웹어플리케이션을임베디드한구조이며별도의통신모듈을이용해데이터를주고받는구조 Web Application Windows Application
금융권차세대 UX(User Experience) 1차 PoC 화면 - 기존 UI를 WPF의새로운기술을이용하여속성창의 Docking기능, 애니메이션기능등차세대 UX(User Experience) 구현
금융권차세대 UX(User Experience) 2차 PoC 화면 - 포틀릿구조의화면구성및포틀릿추가 / 제거, 도킹, 메인화면의스크롤, 메인화면의확대와같은좀더향상된 UX 구현
은행차세대 UX DEMO
금융권차세대 UX 구현기능 메뉴바에의한 2단네비게이션기능 차트, 그래프, 애니메이션을활용한향상된 UX 구현 속성창 Docking 기능 메뉴숨기기기능을활용한작업화면최대화 포틀릿 UI기능 포틀릿최소화, 최대화, 숨기기, 추가하기기능 포틀릿 Docking 기능 Drag&Drop으로자유로운 UI구성 작업화면확대기능으로복잡한 UI구성에서가독성극대화
금융권차세대 WPF Application System Architecture 단말기.NET Framework 3.0 Windows XP SP2 이상 App Server/ 배포서버.NET Framework 3.0 Windows Server 2003 SP1
금융권차세대 WPF 적용유의사항 Windows XP SP2 이상, Windows Server 2003 SP1 이상요구.NET Framework 설치필요 NTD(No Touch Deploy) or ClickOnce Deploy 를위한배포서버필요 운영, 유지보수를위해 WPF 신기술습득필요.NET Framework 3.0 의최소사양 -CPU : 펜티엄 400MHz -RAM : 96MB.NET Framework3.0 의권장사양 -CPU : 펜티엄 1GHz -RAM : 256MB 이상 관련 URL -http://www.microsoft.com/korea/msdn/library/ko-kr/dnlong/html/netfx30.aspx -http://msdn2.microsoft.com/en-us/library/aa480219.aspx
금융권차세대 WPF 적용효과.NET Framework 3.0 기반의최신기술도입 날로발전하는사용자의 UX 에충족할수있는차세대 UX 구축및서비스가능 - Animation, 3D, Style, Layout, Resource, DataBinding 기존어플리케이션의호환성문제 (ActiveX 컨트롤등 ) 해결가능 쉽고용이한배포기술지원및유지보수의용이 Service Oriented Architecture (SOA) 의기술적용이용이 -WPF 는.NET Framework 3.0 의 WCF 와연동 타시스템과의연동시상호운용성제공
증권차세대 UX 적용시나리오 VC++ 임베이드된 WPF - 10 수년간 VC++ 로적용해서사용하고있는 HTS(Home Trading System) 에 WPF 가 Embedded 을해서사용하는구조 VC++ EXE
증권차세대 UX 적용시나리오 VC++ 임베이드된 WPF - 10 수년간 VC++ 로적용해서사용하고있는 HTS(Home Trading System) 에 WPF 가 Embedded 을해서사용하는구조 아키텍쳐요구사항 1. 기존 Win32/MFC 어플리케이션과 WPF 프로젝트의구성 => 기존 WIN32 Application + hwndhost 모듈 + C#/XAML WPF App 2. WPF 와 Silverlight 간개발공유모델이있는지? => 현재로서는 XAML 코드의재사용정도만가능한상태임 3. Native 모듈 ( Win32/MFC/ ) 와의이상적인데이터교환방식? =>?? 4. 지나치게많은객체 (UIElement, Shape) 를필요로하는화면 ( 차트 ) 의경우사용될프로그램구성방법? =>??
Agenda 산업별.NET 3.0 적용사례및적용가능아키텍쳐 금융 ( 은행및증권사 ) 유통 ( 온라인쇼핑몰 ) 제조 공공 통신 일반업무및기타
온라인쇼핑몰 OTTO 의혁신적쇼핑몰 프로젝트배경 - OTTO 는업계개척자로서의역할을유지하면서일반적인전자상거래이상으로그활동범위를넓혀가고자했음. - 패션에관심이많은고객의경우품목을면밀히조사하고제품을자세히살펴보고자하며, 서로다른옷을함께입었을때의모양을살펴보기를원함. - OTTO 는기존전자상거래의한계를극복하고, 고객과더욱밀접한관계를형성할패션의류용가상쇼핑몰을구축하기로결정. - 패션에민감한여성고객들을목표로한가상쇼핑몰구축을위해서는고품격시각효과, 직관적인터페이스, 유용한제품정보및사용하기쉽고안전한전자상거래기능이필요했음. - OTTO 는또한커뮤니티도구및끌어서놓는사용자컨트롤등과같은완전히새로운전자상거래기능의도입을원함.
온라인쇼핑몰 OTTO 의혁신적쇼핑몰 프로젝트솔루션 - OTTO 의임직원들은업계컨퍼런스에참석하여 Windows Vista 운영체제의인상적인시연을본후 Windows Vista 로가능한시각화, 통합, 커뮤니케이션및보안향상기능의이점을활용하는자체응용프로그램구축을원했음. - Windows Vista 기술로특정품목을입은패션모델의통합비디오와같은작업을수행할수있었습니다. 일반적인웹기술은미디어를웹페이지에서그자체별도의창또는틀로구속하지만 WPF(Windows Presentation Foundation) 은미디어를이러한환경에깊이통합합니다. [Roland von Gehlen, 소프트웨어개발부회장, OTTO]
온라인쇼핑몰 OTTO 의혁신적쇼핑몰 새로운개념의쇼핑환경실현 - OTTO 는 Microsoft 의기술전문가및파트너사와함께 Windows 운영체제용새로운관리코드프로그래밍모델인 Microsoft.NET Framework 3.0 을사용하여가상매장인 OTTO Store 를구축. - OTTO Store 는풍부하고신속한사용자경험을위해로컬하드웨어와소프트웨어리소스의장점을이용하는스마트클라이언트입니다. 스마트클라이언트를사용하면쇼핑객이인터넷에연결되어있지않을때에도 OTTO store 를이용할수있음.
쇼핑몰 OTTO UX DEMO
온라인쇼핑몰 OTTO 의혁신적쇼핑몰 새로운개념의쇼핑혜택 혁신적인쇼핑환경 - OTTO Store 쇼핑객들은정적인축소판이미지로검색하는대신의상카탈로그검색을위해움직이는 3-D 컨베이어를통해신속하게회전할수있음. - 또한 OTTO Store 를사용하면의류품목자체만을보는것이아니라살아있는모델을통해의상을구현하는비디오를삽입하는등비디오를훌륭히사용할수있음. - 우리는 OTTO Store 로즐겁고재미있는온라인쇼핑을만들고자했음. - 우리의목표는고객의기본적욕구만을해결하는것이아니라기분을변화시켜고객에게동기를주는것입니다. 결국, 향상된사용자경험은매출을증가시키고새로운고객을불러들입니다. [Thomas Schnieders]
온라인쇼핑몰 OTTO 의혁신적쇼핑몰 새로운개념의쇼핑혜택 편리한보안 - OTTO 는독일에서선두유통브랜드이므로전자상거래에서높은신용을보유하고있음. - Windows CardSpace 의사용으로 OTTO 는고객인증및온라인 ID 관리를위한새롭고쉬운방법으로신뢰할수있는온라인유통업체로서의위치를굳건히할수있음. - OTTO Store 고객은로그인시암호를기억해야하는번거로움없이사전에설정된온라인 ID 카드를제시할수있음. 확대된범위및유연성 - 오늘날웹콘텐츠및서비스는웹브라우저밖으로나와 Windows 바탕화면및모바일서비스로옮겨가고있음. - OTTO Store 는컴퓨터에서작동되는스마트클라이언트이므로더많은고객에게다가가고더많은매출기회를줄것이라확신.
온라인쇼핑몰 OTTO 의혁신적쇼핑몰 새로운개념의쇼핑혜택 효율적인개발 -.NET Framework 3.0 과 Windows Vista 의도구와기능은설계자와프로그래머의추상관념수준을끌어올려낮은수준의세부사항을처리할필요가없어지고대신제품출시기간은짧아졌음. - WCF 웹서비스기능 - 개발팀이자세한제품콘텐츠와같은타사웹리소스를쉽게사용할수있도록했음. - WPF 용 Expression Blend 및 Visual Studio 2005 - XAML 을사용하고개발자와설계자가 XML 기반모델을사용하여원하는사용자인터페이스동작을선언및지정하도록했음. - 일반적으로, 개발자는설계실물모형의기능버전을다시만들어야하겠지만 XAML 사용으로이제개발자와디자이너는동일한프로젝트파일을사용함.
국내 3D 온라인쇼핑몰시나리오 아키텍쳐요구사항 1. JSP와 WPF 연동이가능해야함. 2. XP에서도개발가능해야함. 3. Java 환경과충돌되는부분이없어야함. 4. html 페이지에서파라미터를받아서링크로.xbap 실행이되어야함.
국내 3D 온라인쇼핑몰시나리오 System Architecture Client PC Web/App (WebLogic, IIS) Oracle DB Server & SQL DB Server 23
국내 3D 온라인쇼핑몰시나리오 Software Architecture Web/AppServer(WebLogic) JSP/Servlet Page Client PC Web Logic JSP/Servlet Container JVM Linux/Unix Oracle DB Server & SQL DB Server Internet Explorer 6.0/7.0.NET Framework 3.0 Windows Vista/XP Service Pack 2 Web/App Server(MS) ASP.NET IIS 6.0 / 7.0 XBAP Expression Interactive Designer/Expression Graphic Designer Visual Studio 2005.NET Framework 3.0 Windows 2000/2003 24
국내 3D 온라인쇼핑몰시나리오 Application Architecture Client PC Web/App Server(WebLogic) Oracle DB 1.JSP Service Request JSP Page JDBC WPF XBAP Browser 4. 3D Rendering 2.JSP Parameter Send Legacy DB Process XBAP Compile SQL.NET SQL DB Internet Explorer 6.0/7.0 3. Parameter Parsing & 3D Engine Process Handling 1. 브라우저에서 jsp 파일의 URL로최초요청 2. JSP 페이지에서 XBAP 어플리케이션으로파라미터를전송 이때 VS 2005 프로젝트파일에 <TrustUrlParameters>true</TrustUrlParameters> 설정 3. XBAP 어플리케이션에서 3D 화면프로세스를처리 4. 클라이언트에서 3D 화면을 Render해서보여줌 25 4. 3D CRUD DB Process
국내 3D 온라인쇼핑몰시나리오 Deployment Architecture 배포구성도 효과 - 개발하여특정위치에올려놓으면버전관리가가능함. - 접속시버전관리하여자동배포가능함. (ClickOnce 방식으로 Registry 를사용않음, DLL Hell 문제없음 ) -.NET Framework 에서기본클래스제공 ( 설치후재시작불필요 ) - 웹프로그램, 리소스, 서비스의원격설치 - 자동배포 / 자동복구기능으로장애의비율이줄어듦 - 개발자는배포에대하여염려하는과정없이구현한프로세스및업무로직에집중할수있음. 개발 / 배포서버 개발 개발장비 ClickOnce 쇼핑몰운영장비
Agenda 산업별.NET 3.0 적용사례및적용가능아키텍쳐 금융 ( 은행및증권사 ) 유통 ( 온라인쇼핑몰 ) 제조 공공 통신 일반업무및기타
제조 두산인프라코어 C/S 와웹장점수용 프로젝트배경 - 기존의웹시스템이 C/S 클라이언트에비해기능성의제약이많음 - 작은수정에도화면전체를재컴파일, 서버와웹애플리케이션간통신으로인한화면깜빡임 - 웹갱신문제를개선하기위해 AJAX 도입을시도했지만, 엄청난코딩량에대한비생산성 - 기존개발프레임웍 (DICF 2.0) 을닷넷 3.0 기반으로업그레이드및 ALM 도입검토
제조 두산인프라코어 C/S 와웹장점수용 프로젝트솔루션 - NET 3.0 적용, 스마트클라이언트도입, 기존서비스의마이그레이션가이드작성 - 화면깜빡임등의사용자불편과개발생산성이슈를근본적으로해결하는답으로.NET 3.0 과 Visual Studio 2005 Team System 을택하고, 이기반위에서기존 C/S 환경의웹서비스전환기술로스마트클라이언트도입 - 스마트클라이언트는 Tabbed Windows, Progress Bar, Powerful DataGrid 등 C/S 환경의리치클라이언트가제공하는강력한 UI 의기능성을웹에서도구현가능하게함 - 하지만이러한 UI 의기능성은다분히일차원적이란한계가있다. WPF 와 XBAP 가적용되면문서, 미디어, 2 차원및 3 차원그래픽, 애니메이션, 웹특성등을포함하는 UI 를만들수있음 - 이렇게 UI 가짜인프로그램은 XBAP 을통해웹에서도 PC 용프로그램과동일한기능을제공하게됨 - 지금까지플래시등을통해경험해왔던보다직관적이고, 편의성높은웹 UI 에 PC 용애플리케이션에버금가는기능성을동시에제공할수있게끔
제조 두산인프라코어 C/S 와웹장점수용 프로젝트효과 - DICF 의세대교체에성공함에따라두산인프라코어는차세대웹환경마련, 기존 C/S 환경의웹전환을위한가이드라인마련, 개발생산성과사용자편의성극대화 - WPF 와 XBAP 은사용자편의성을가장우선시하던우리의개발문화에풍부한사용자경험 (Rich User Experience) 이란또하나의지향점을마련했음 - Visual Studio 2005 Team System 도입을통해이전보다개발자와프로젝트관리자간커뮤니케이션이원활해졌고이는개발결과물즉, 코드와서비스의품질향상으로이어졌음
두산인프라코어 UX 화면
Agenda 산업별.NET 3.0 적용사례및적용가능아키텍쳐 금융 ( 은행및증권사 ) 유통 ( 온라인쇼핑몰 ) 제조 공공 통신 일반업무및기타
공공차세대 UX(User Experience) AS-IS 시스템화면구성
공공차세대 UX(User Experience) TO-BE 시스템화면구성
공공차세대 UX(User Experience) System Architecture Application Server Database Server Database
공공차세대 UX(User Experience) Main Page More information using tooltip Interactive UX Popup Magnifying Glass Feature Automatic Min & Max Value (Amplitude awareness) Reporting Real-time Value Change
Agenda 산업별.NET 3.0 적용사례및적용가능아키텍쳐 금융 ( 은행및증권사 ) 유통 ( 온라인쇼핑몰 ) 제조 공공 통신 일반업무및기타
통신설비관리차세대 UX 3D 관리의필요성 환경설정 3D 환경구현시하드웨어가속가능여부 소프트웨어로설정하면많은연산량에의해랜더링속도저하 구현관련 Matrix 관련연산, Vector 연산 Object 의각종변환, 충돌등을계산 정점의 draw 옵션을통해선 ( 점선, 실선등.), 면 ( 삼각형, 다각형등.) 표현가능성 마우스클릭을통한정점추가기능 기본단위인정점을통해 Object 를표현 Object 의일부분을투명하게처리하는기능 문, 창문등을벽에놓으면문, 창문의중간부분이투명하게처리되야함. Object 픽킹 가능하다면어떤알고리즘으로픽킹을수행하는지확인필요 Object 이동, Object 간충돌검사 정점메모리관리 그래픽메모리에정점을관리할수있는지? 사용자인터렉션 마우스, 키보드이벤트처리유무
통신설비관리차세대 UX 3D 관리의필요성 카메라관련 카메라를표현하는방법 (ex, 시점위치, 카메라위치, 업벡터 ) 가능성 화면을분할하여다양한각도에서바라보는모습을표현가능 질감표현효과 밉맵기능 - 카메라시점에따른이미지해상도조절 여러이미지를조합하여하나의이미지로표현가능성 조명설장의정, 텍스쳐매핑기능, 그림자표현기능 새로운 Object 추가 X 파일포멧지원여부또는지원가능한파일포멧은? Object 상에텍스트 (Text) 표현방법 3D Object 에텍스트가붙어서움직임 (2D 아님 ) 가능성 LOD(lovel-of-detail) 구현방법 층개념및성능향상을위해랜더링되는정점의수조절가능여부
통신설비 UX DEMO
Agenda 산업별.NET 3.0 적용사례및적용가능아키텍쳐 금융 ( 은행및증권사 ) 유통 ( 온라인쇼핑몰 ) 제조 공공 통신 일반업무및기타
건설사차세대 UX(User Experience) 3D Cyber Model 구축 3DMAX
건설사차세대 UX(User Experience) 3D Cyber Model 구축 Zam3D
건설사차세대 UX(User Experience) 3D Cyber Model 구축 Windows Presentation Foundation
Cyber Model UX DEMO
인사시스템차세대 UX 적용내역 1. 자회사로부터각사그룹인사 Data 를받는다. 2. Data 는기본인적과발령사항으로구성되며 Data 추가에대응할수있다. ( 학력, 어학등 ) 3. 해당 Data 는정의된 rule 로검증하여 Data 처리현황, 오류 Report 를작성하며 Upload 된다. 4. 최종사용자는정의된검색조건에의해조회된다. 자회사별정의된항목에대한통계자료를확인한다. 5. 자회사는그룹인사자료를적절한인증을통해전송받을수있다. ( FTP, B2B ) 인사담당자 1. FTP Data 수집 2. Excel (e-mail) Data 검증 Data 변환 자회사 3. B2B (Web Method) Data 저장 / 시스템등록 그룹인사 DB
인사시스템차세대 UX AS-IS 시스템화면구성 - ASP 로단순웹기반의인사시스템 [ 사용자조회화면 ] 1. 그룹인사의기본인적조회화면 2. 회사 / 성명 / 주민등록번호를이용하여검색 3. 신규등록시주민번호 / 중복인원체크필요
인사시스템차세대 UX TO-BE 시스템화면구성 임원인사프로그램의시작화면 - 리스트에해당임원들의사진이나열되며리스트아이템은 MouseEnter 이벤트에의해이미지확대가된다.
HR UX DEMO
.NET StockTrader Application Service-Oriented 사례 고성능, 고신뢰성을제공하는.NET 3.0 와 WCF 코드적용.NET 3.0 와 WCF 를이용한서비스지향의샘플제공 http://msdn.microsoft.com/stocktrader 설치 StockTrader Composite Web Application 문서 StockTrader Business Services StockTrader Order Processing Service StockTrader Smart Client (WPF) Configuration Service and helper libraries/test harness.net forms-based data loaders for loading SQL Server, Oracle, DB2 Runs on Win XP/SP2, Vista, Win Server 2003, Win Server 2008 Benchmark Results Technical Overview Configuration Guide and Configuration Service overview Guide to Visual Studio solutions/projects
.NET StockTrader Application Service-Oriented 사례 고성능, 고신뢰성을제공하는.NET 3.0 와 WCF 코드적용 - NET 3.0 의 WCF 와 IBM WebSphere 6.1 최적성능과의비교결과치는 2.16 배이상의차이로.NET WCF 가월등한우위. - 고객의 TCO 측면에서, IBM 은트랜잭션당 $104.76 의비용이소요되고 MS 은 $49.25 가소요. - MS 플랫폼을이용했을때 IBM 보다트랜잭션당 $55.51 를절약. <.NET 3.0의 WCF와 IBM WebSphere 6.1 최적성능과의비교결과치 > > <.NET 3.0의 WCF와 IBM WebSphere 6.1 트랜잭션당비용 >
Q&A