산업별닷넷 3.0 적용사례download.microsoft.com/download/3/e/0/3e0e2351-cfa3-400b... · 2018-10-13 · - .NET Framework 3.0과Windows Vista의도구와기능은설계자와프로

산업별 닷넷 3.0 적용 사례

손정민

아키텍쳐 전도사(부장)

한국마이크로소프트

Agenda

• 산업별 .NET 3.0 적용 사례 및 적용 가능 아키텍쳐• 금융 (은행 및 증권사)

• 유통 (온라인 쇼핑몰)

• 제조

• 공공

• 통신

• 일반업무 및 기타

금융권 차세대 UX(User Experience)

AS-IS 시스템 화면 구성- 윈도우 어플리케이션 안에 웹 어플리케이션을 임베디드한 구조이며 별도의 통신모듈을 이용해 데이터를

주고받는 구조

Windows Application

Web Application

1차 PoC 화면- 기존 UI를 WPF의 새로운 기술을 이용하여 속성창의 Docking기능, 애니메이션 기능 등

차세대 UX(User Experience)구현


2차 PoC 화면- 포틀릿 구조의 화면 구성 및 포틀릿 추가/제거, 도킹, 메인화면의 스크롤, 메인 화면의 확대와 같은 좀더 향상된

UX 구현


은행 차세대 UX DEMO

메뉴바에 의한 2단 네비게이션 기능

차트, 그래프, 애니메이션을 활용한 향상된 UX 구현

속성창 Docking 기능

메뉴 숨기기 기능을 활용한 작업화면 최대화

포틀릿 UI기능

포틀릿 최소화, 최대화, 숨기기, 추가하기 기능

포틀릿 Docking 기능

Drag&Drop으로 자유로운 UI구성

작업화면 확대 기능으로 복잡한 UI구성에서 가독성 극대화

금융권 차세대 UX 구현 기능

App Server/배포서버단말기

Windows XP SP2이상

.NET Framework 3.0

Windows Server 2003 SP1

.NET Framework 3.0

금융권 차세대 WPF ApplicationSystem Architecture

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 적용 유의 사항

http://www.microsoft.com/korea/msdn/library/ko-kr/dnlong/html/netfx30.aspx



http://msdn2.microsoft.com/En-US/library/aa480219.aspx



.NET Framework 3.0 기반의 최신 기술 도입

날로 발전하는 사용자의 UX에 충족할 수 있는 차세대 UX 구축 및 서비스 가능- Animation, 3D, Style, Layout, Resource, DataBinding…

기존 어플리케이션의 호환성 문제 (ActiveX 컨트롤 등) 해결 가능

쉽고 용이한 배포기술 지원 및 유지보수의 용이

Service Oriented Architecture (SOA)의 기술 적용이 용이-WPF는 .NET Framework 3.0의 WCF와 연동

타 시스템과의 연동시 상호 운용성 제공

금융권 차세대 WPF 적용 효과

증권 차세대 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



• 제조

• 공공

• 통신


온라인 쇼핑몰 – OTTO의 혁신적 쇼핑몰

프로젝트 배경

- OTTO는 업계 개척자로서의 역할을 유지하면서 일반적인 전자 상거래 이상으로그 활동 범위를 넓혀 가고자 했음.

- 패션에 관심이 많은 고객의 경우 품목을 면밀히 조사하고 제품을 자세히살펴보고자 하며, 서로 다른 옷을 함께 입었을 때의 모양을 살펴보기를 원함.

- OTTO는 기존 전자 상거래의 한계를 극복하고, 고객과 더욱 밀접한 관계를 형성할패션 의류용 가상 쇼핑몰을 구축하기로 결정.

- 패션에 민감한 여성 고객들을 목표로 한 가상 쇼핑몰 구축을 위해서는 고품격시각 효과, 직관적 인터페이스, 유용한 제품 정보 및 사용하기 쉽고 안전한 전자상거래 기능이 필요했음.

- OTTO는 또한 커뮤니티 도구 및 끌어서 놓는 사용자 컨트롤 등과 같은 완전히새로운 전자 상거래 기능의 도입을 원함.

http://www.otto.com/


프로젝트 솔루션

- OTTO의 임직원들은 업계 컨퍼런스에 참석하여 Windows Vista 운영 체제의 인상적인 시연을 본 후 Windows Vista로 가능한 시각화, 통합, 커뮤니케이션 및 보안향상 기능의 이점을 활용하는 자체 응용 프로그램 구축을 원했음.

- Windows Vista 기술로 특정 품목을 입은 패션 모델의 통합 비디오와 같은 작업을 수행할 수 있었습니다. 일반적인 웹 기술은 미디어를 웹 페이지에서 그 자체 별도의 창 또는 틀로 구속하지만 WPF(Windows Presentation Foundation)은 미디어를 이러한 환경에 깊이 통합합니다.[Roland von Gehlen, 소프트웨어 개발 부회장, OTTO]



새로운 개념의 쇼핑 환경 실현

- OTTO는 Microsoft의 기술 전문가 및 파트너사와 함께 Windows 운영 체제용새로운 관리 코드 프로그래밍 모델인 Microsoft .NET Framework 3.0을 사용하여가상 매장인 OTTO Store를 구축.

- OTTO Store는 풍부하고 신속한 사용자 경험을 위해 로컬 하드웨어와 소프트웨어 리소스의 장점을 이용하는 스마트 클라이언트입니다. 스마트 클라이언트를 사용하면 쇼핑객이 인터넷에 연결되어 있지 않을 때에도 OTTO store를 이용할 수있음.


쇼핑몰 OTTO UX DEMO


새로운 개념의 쇼핑 혜택

혁신적인 쇼핑 환경

- OTTO Store 쇼핑객들은 정적인 축소판 이미지로 검색하는 대신 의상 카탈로그 검색을 위해 움직이는 3-D 컨베이어를 통해 신속하게 회전할 수 있음.

- 또한 OTTO Store를 사용하면 의류 품목 자체만을 보는 것이 아니라 살아있는 모델을 통해 의상을 구현하는 비디오를 삽입하는 등 비디오를 훌륭히사용할 수 있음.

- 우리는 OTTO Store로 즐겁고 재미있는 온라인 쇼핑을 만들고자 했음.

- 우리의 목표는 고객의 기본적 욕구만을 해결하는 것이 아니라 기분을 변화시켜 고객에게 동기를 주는 것입니다. 결국, 향상된 사용자 경험은 매출을증가시키고 새로운 고객을 불러들입니다.” [Thomas Schnieders]




편리한 보안

- OTTO는 독일에서 선두 유통 브랜드이므로 전자 상거래에서 높은 신용을보유하고 있음. - Windows CardSpace의 사용으로 OTTO는 고객 인증 및 온라인 ID 관리를위한 새롭고 쉬운 방법으로 신뢰할 수 있는 온라인 유통업체로서의 위치를굳건히 할 수 있음.- OTTO Store 고객은 로그인시 암호를 기억해야 하는 번거로움 없이 사전에설정된 온라인 ID 카드를 제시할 수 있음.

확대된 범위 및 유연성

- 오늘 날 웹 콘텐츠 및 서비스는 웹 브라우저 밖으로 나와 Windows 바탕화면 및 모바일 서비스로 옮겨가고 있음.- OTTO Store는 컴퓨터에서 작동되는 스마트 클라이언트이므로 더 많은 고객에게 다가가고 더 많은 매출 기회를 줄 것이라 확신.




효율적인 개발

- .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 실행이 되어야 함.

23

Web/App (WebLogic, IIS)

Client PC

System Architecture

국내 3D 온라인 쇼핑몰 시나리오

Oracle DB Server

& SQL DB Server

24

Web/AppServer(WebLogic)

Oracle DB Server

& SQL DB Server

Client PC

Linux/Unix

Web Logic JSP/Servlet

Container

JVM

JSP/Servlet Page

Windows Vista/XP

Service Pack 2

Internet Explorer 6.0/7.0

.NET Framework 3.0

Web/App Server(MS)

Windows 2000/2003

IIS 6.0 / 7.0

.NET Framework 3.0

ASP.NET

Visual Studio 2005

XBAP

Expression Interactive

Designer/Expression

Graphic Designer

국내 3D 온라인 쇼핑몰 시나리오Software Architecture

25

Web/App Server(WebLogic)

SQL DB

Client PC

JSPPage

Internet Explorer 6.0/7.0

WPF XBAPBrowser

1.JSP Service

Request

1. 브라우저에서 jsp 파일의 URL로 최초 요청

2. JSP 페이지에서 XBAP 어플리케이션으로 파라미터를 전송

이때 VS 2005 프로젝트 파일에 <TrustUrlParameters>true</TrustUrlParameters> 설정

3. XBAP 어플리케이션에서 3D 화면 프로세스를 처리

4. 클라이언트에서 3D 화면을 Render해서 보여줌

4. 3D CRUD

DB Process

XBAP Compile

SQL.NET

2.JSP Parameter Send

3. Parameter Parsing & 3D Engine Process Handling

JDBC

Oracle DB

Legacy DB

Process4. 3D Rendering

국내 3D 온라인 쇼핑몰 시나리오Application Architecture

• 배포 구성도

- 개발하여 특정 위치에 올려놓으면 버전 관리가 가능함.

- 접속 시 버전 관리하여 자동 배포 가능함. (ClickOnce방식으로 Registry를 사용 않음,

“DLL Hell”문제 없음)

-.NET Framework 에서 기본 클래스 제공 (설치 후 재 시작 불필요)

- 웹 프로그램, 리소스, 서비스의 원격설치

• 효과

- 자동 배포/자동 복구 기능으로 장애의 비율이 줄어듦

- 개발자는 배포에 대하여 염려하는 과정 없이 구현한 프로세스 및 업무 로직에 집중할 수 있음.

개발

개발/배포 서버

개발 장비

쇼핑몰 운영 장비

ClickOnce

국내 3D 온라인 쇼핑몰 시나리오Deployment Architecture

Agenda



• 제조

• 공공

• 통신


제조 – 두산 인프라코어 C/S와 웹 장점 수용

프로젝트 배경

- 기존의 웹 시스템이 C/S 클라이언트에 비해 기능성의 제약이 많음

- 작은 수정에도 화면 전체를 재 컴파일, 서버와 웹 애플리케이션 간 통신으로 인한 화면 깜빡임

- 웹 갱신 문제를 개선하기 위해 AJAX 도입을 시도했지만, 엄청난 코딩량에 대한 비 생산성

- 기존 개발 프레임웍(DICF 2.0)을 닷넷 3.0 기반으로 업그레이드 및 ALM 도입 검토


프로젝트 솔루션

- 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용애플리케이션에 버금가는 기능성을 동시에 제공할 수 있게끔


프로젝트 효과

- DICF의 세대교체에 성공함에 따라 두산인프라코어는 차세대 웹 환경 마련, 기존 C/S 환경의 웹 전환을 위한 가이드 라인 마련, 개발 생산성과 사용자 편의성 극대화

- WPF와 XBAP은 사용자 편의성을 가장 우선시 하던 우리의 개발 문화에 풍부한사용자 경험(Rich User Experience)이란 또 하나의 지향점을 마련했음

- Visual Studio 2005 Team System 도입을 통해 이전보다 개발자와 프로젝트 관리자 간커뮤니케이션이 원활해 졌고 이는 개발 결과물 즉, 코드와 서비스의 품질 향상으로 이어졌음

두산 인프라코어 UX 화면

Agenda



• 제조

• 공공

• 통신


공공 차세대 UX(User Experience)

AS-IS 시스템 화면 구성


TO-BE 시스템 화면 구성

Database ServerApplication Server

Database

공공 차세대 UX(User Experience) System Architecture


Main Page More information using tooltip

Interactive UX

Popup Magnifying Glass Feature

Automatic Min & Max Value(Amplitude awareness)

Reporting Real-time Value Change

Agenda



• 제조

• 공공

• 통신


통신 설비 관리 차세대 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



• 제조

• 공공

• 통신


3DMAX

건설사 차세대 UX(User Experience) 3D Cyber Model 구축

Zam3D


Windows Presentation Foundation


Cyber Model UX DEMO

1. 자회사로부터 각사 그룹인사 Data를 받는다.

2. Data는 기본 인적과 발령 사항으로 구성되며 Data추가에 대응할 수 있다. ( 학력, 어학 등 )

3. 해당 Data는 정의된 rule로 검증하여 Data 처리 현황, 오류 Report를 작성하며 Upload된다.

4. 최종 사용자는 정의된 검색 조건에 의해 조회된다. 자회사별 정의된 항목에 대한 통계 자료를 확인한다.

5. 자회사는 그룹인사 자료를 적절한 인증을 통해 전송 받을 수 있다. ( FTP, B2B )

3. B2B (Web Method)

Data 수집

Data 검증

Data 변환

Data 저장/시스템 등록그룹인사 DB

2. Excel (e-mail)

자회사

인사 담당자

1. FTP

인사 시스템 차세대 UX적용 내역

[ 사용자 조회 화면]

1. 그룹인사의 기본인적 조회 화면

2. 회사/성명/주민등록번호를

이용하여 검색

3. 신규 등록 시

주민번호/중복인원 체크 필요

인사 시스템 차세대 UX

AS-IS 시스템 화면 구성- ASP로 단순 웹 기반의 인사 시스템

인사 시스템 차세대 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

http://msdn.microsoft.com/stocktrader

.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

Documents

산업별닷넷 3.0 적용사례download.microsoft.com/download/3/e/0/3e0e2351-cfa3-400b... · 2018-10-13 · - .NET Framework 3.0과Windows Vista의도구와기능은설계자와프로