제발 종결하고 싶다...

1. 소셜 IDE 연계형 웹 프레임워크 기반
의 대국민 서비스 구축 사례
Presenter: 유엔진솔루션즈
조진원
somehow@uengine.org

2. Problem:
왜 우리나라에는 페이스북
이나 구글 같은 회사가 없
나요?
But, They Do.

3. 고난이 요구사항
• 순수웹
• 페이지 비전환
• Lazy Loading
• 키/마우스 바인딩
• 모바일 동시지원
• NIO기반 채팅
품질 비용
target • 서버/클라이언트 개발
• 트랜잭셔널 자 그리고 디자이너 역
• 요소간 간섭최소화 할구분어려워 –
• 일관성 있는 사용자 CSS/JS/Java/AJAX
경험과 예측성 • 다양한 언어를 넘나드
• UI기반의 테스트 는 과정의 커뮤니케이
자동화 션 비용
• 순수자바개발자만
있다.

4. 1. 가장 좋은 차
 빠른차 X, 알아서 운전하는 차
2. 가장 좋은 배우자
 똑똑한 배우자 X, 내마음을 잘 알아서 알아서 다해주
는 배우자
그렇담 가장 좋은 프레임워크….란?
 요구사항을 알아서 구현해주는 프레임워크???
 그것도 가능한 초짜만 투입하면서,
 높은 품질과 기능성을 제공하는.
 에잇, 그런게 어딨어???
 그냥 개발자 잘 뽑으면 돼
 그냥 노력하면 돼
 그냥 하면 돼… 화면된다.. 대신 오래걸린다.

5. 메타데이터 중심 프레임워크 – 메타웍스3
1. 객체지향언어의 확고한 체계로 객체를 선언하고
2. 어노테이션으로 의미 (메타데이터)를 적절히 부여하면
3. 도메인 모델 이외의 기술적 디테일 (다음 페이지) 에 관
여되는 구현을 최소화 하는 프레임워크
 원래 다른 프레임워크도 다 그런데요???
넵, 물론, 그렇습니다, 하지만 약간 크게 다릅니다.
+ 거기에 보너스로,
4. 내장된 웹 기반 개발도구 (클라우드 IDE) 를 통하여 컴파
일, 오류확인, 디버그

6. 잘 정의된
모델
< 선언형 프로그래밍 모델과 추상성 극대화를 통한 생산성>
• 프로그래밍 모델 추상화
• 자바-자바스크립트 간 통신 추상화
• 자바-자바스크립트 간 메타데이터 자동 동기화
• 자바스크립트 인터랙션 (버튼, 키보드/마우스) 추상화
• 네비게이션 추상화
• 롱-폴링 기반 콜백 추상화
• 데이터베이스 접근 추상화
• JPA어노테이션 기반 ORMapping
• 데이터베이스 캐시 / 동기화
• 트랜잭션 자동화 (스프링없이 동작가능)
<테스트 자동화와 품질 향상>
• 매우 짧은 코드 – 품질에 직결 적응력 높고
견고한
• 설계가 곧 구현 – 모델중심의 생산성과 품질 어플리케이션
• 아규먼트 없는 서비스메서드 – 객체의 응집도를 유지
• 웹 기반 테스팅 자동화
• Guided Tour 기능 자동화

7. 백문이 불여 일타

8. 법칙 1: 객체 매핑
로그인 모듈에 대한 객체 매핑 방법
속성은
프로퍼티로
행위는
Login.java 메서드로
• String email
• String password
• Main login()

9. Setter/getter가
있으면 „프로퍼티‟
라고 하며, 웹상
에서는 입출력이
요망되는 주요데
이터가 된다
행위는 일반적 내
부 행위와 웹에서
출력될(버튼) 행
위와의 구분을 위
하여
@ServiceMetho
d 애노테이션을
준다

10. 법칙2: 리턴 행위는 객체의 변화를 암시한다.
Login.java Main.java
UserId
Password return
Login new Main();
login() 이 실행되면 Main
을 리턴하므로
Main을 화면에 그려라!

11. Main.java
Menu object MenuItem object Contents object

12. protected 로 생
성자가 보안처리
되었기 때문에 앞
서 Login.login()
을 통하지 않고서
는 진입할 수 없
게된다.

13. 법칙3 : 리턴객체는 가장 편한 곳으로 자리한다.
Login.java Main.java
UserId
Password
return Menu.java Content.java
new Main()
Login
return
Selection.java new AContent() AContent.java
return
new BContent() Bcontent.java
(화면에 여러 객체가 이미 존재하
는 경우) 리턴된 객체는 자신이 가
장 부합되는 응집력을 가진 화면
요소에 가서 그려짐

14. 14

16. 메타웍스3 프로그래밍 모델 – 전체
Login Content
• String email • String title
• String password • String html
• Main login()
returns inherits
Main AContent BContent
• Menu menu • String title = “a” • String title = “b”
• Content content • String html=“XXX • String html=“YYY
” ”
part-of returns
Menu part-of Selection
• Selection[] selections • Content content
• Content select()

17. #퀴즈
# 메인화면에서 로그인 화면으로 이동하는 “로그아웃”은 어떻게 하면 될까요?

18. # 정답
Login Content
• String email • String title
• String password • String html
• Main login()
returns returns inherits
Main AContent BContent
• Menu menu • String title = “a” • String title = “b”
• Content content • String html=“XXX” • String html=“YYY”
• Login logOut()
part-of returns
Menu part-of Selection
• Selection[] selections • Content content
• Content select()

19. 그외의 법칙들
법칙4: 서비스 메서드는 파라미터를 가질 수 없다.
<왜요?>
 Reason1: Simple is good.
 Reason2: 자연스럽게 당신의 모델은 높은 응집도와 낮은 결합도를 갖게 된다.
<그럼 파라미터는?>
 멤버 프로퍼티로 받는다: 일종의 Value Object Pattern
 멤버 프로퍼티를 남발하는 상황이면?: 세부 포함 객체로 나누어 준다.
 참조해야할 객체를 클라이언트에서 넘겨받아야 한다면: @AutowiredFromClient
를 사용한다.
 이후 어떤 액션이 어느 객체의 메서드에 의해 제공되는지는 명확하게 추측된다.

20. @AutowiredFromClient 의 사용
@AutowiredFromClient
public Session session;
@ServiceMethod(inContextMenu=true, callByContent=true)
public Session cut(){
session.setClipboard(this);
return session;
}

21. Annotations
표현/표시 관련 행위 관련 DB 관련
@Face @ServiceMethod @Table
@Hidden @AutowiredFromClient @Id
@AutowiredToClient
@Name @ORMapping
데이터 관련 기타
@Range @Available
@Validator @Test
@NonEditable

22. Annotation: 객체와 필드의 얼굴정보
@Face(
displayName=“화면에 뿌릴 명칭”,
ejsPath=“템플릿 파일 위치”,
)
@Hidden(
when: „보이지 않을 때‟
)
@Available(
when: „보일 수 있는 때‟
)

23. Annotation: 객체와 필드의 얼굴정보 - 용례

24. Annotation: ejs 템플릿
* EJS: Embedded Javascript Template Engine 로, 기존 JSP, PHP 문법을 지원하
는 클라이언트 기반 템플릿엔진

25. Annotation: 서비스 메서드
@ServiceMethod(
target=“self | popup | auto”, //리턴값을 어디로?
callByContent=true|false, //속성값을 태울것인가?
payload={„field1‟, „field2‟,…}, //요 속성들만 태워라
except={„field1‟, „field2‟,…}, //요 속성들은 빼고 태워라
keyBinding=“Alt|Shift|Ctrl+Key”, //키가 눌려지면 콜
mouseBinding=“left|right|dblclick”, //마우스가 눌려지면 콜
inContextMenu=true|false, //컨텍스트 메뉴에 걸어
needToConfirm=true|false, //정말 할건지 물어
when=“context” //언제 활성화 될건지
)

26. Annotation: 서비스 메서드

27. Annotation: 저장관련 정보 (JPA-호환)
<선언 관련>
@Table(
name=“DB 테이블 명”
)
@Id // 프라이머리 키
@NonSavable // 저장 필드 아님
@NonLoadable // 읽을 필드 아님
<ORMapping 관련>
@TypeSelector(
values={„값1‟, „값2‟, …},
classes={„서브클래스명1‟, „서브클래스명1‟,…}
)
@ORMapping(
objectFields={ „객체속성1‟, „객체속성2‟, ….},
databaseFields={„테이블컬럼1‟, „테이블컬럼2‟,…}
)

28. Annotation: 저장관련 정보 (JPA-호환)

29. Libraries
리턴 객체 위치잡기 팝업 관련 레이아웃 잡기
ToPrepend Popup
ModalWindow
Layout
ToAppend
ToNext ToOpener
교체하기/제거하기 브로드캐스팅 하기 기본 가젯들
Refresh Grid
pushClientObjects Window
Remover Chart

30. Libraries
리턴객체의 위치 잡기
A
return new ToPrepend(
A, //추가될 영역을 가진 객체 B
B//추가할 객체
);
A
return new ToAppend(
A, //추가될 영역을 가진 객체
B//추가할 객체
);
B

31. Libraries
리턴객체의 위치 잡기
목록
return new ToNext( A
C, //추가될 영역을 가진 객체
D //추가할 객체 B
);
C
D

32. Libraries
팝업관련
B
public class B{
public Popup action(){
return new Popup( A
A //팝업될 객체.
);
}
}
return new ModalWindow(
A //팝업될 객체 (중앙배치)
);

33. Libraries: pushClientObjects
ToPrepend 를 이용하여 객체를 포장해
서 브로드캐스트 했기 때문에 목록을
보고 있는 유저에게만 추가된 아이템이 사용자2: 목록을 보고 있는 유저
나타남
이름: 오이
사용자1: ‘오이’를 추가함
이름: 감자 이름: 고구마
이름: 오이 사용자3: 디테일 화면에 들어가 있는 유저
추가
이름: 고구마
……
고구마(학명: Ipomoea batatas)는 메꽃과의 한해살
이 뿌리 채소로, 주로 전분이 많고 단 맛이 나는 혹뿌
리를 가진 재배용 작물이다.

34. Libraries: pushClientObjects
상황: 특정 아이템이나 주제에 대하
여 화면상에 해당 아이템을 보고 있
는 유저에게만 영향주기
사용자2: ‘고’로 검색한 상태
이름: 고구마  당근
사용자1: ‘고구마’의 이름을 수정함
이름: 감자 이름: 고사리
이름: 고구마 renam 사용자3: ‘감’으로 검색한 상태
새이름: 당근 e
이름: 감자
……
new Refresh(obj)는 화면
이름: 오이 에 있는 경우만 refresh 시
이름: 감 킨다.
……

35. 사례: 동시 공유 메모 편집기
추가:
new ToNext(node)
수정:
new Refresh(node)
삭제:
new Remover(node)

36. Tools
개발 테스트 관리 운영
테스트 레코더 소셜 코딩
MW3 전용 IDE
테스트 러너 ALM
UX 개선 지원
가이디드 투어 생
성
모바일 테스팅

37. Cloud IDE
• Pure Web based
IDE
• 동적 자바 컴파일 (재기동 불필)
• Instant IDE
 사용 중 오류 나면 바로 IDE접
속  수정  반영
• Code Assistance
 기본 코드 어시스트를 넘어
 데이터베이스 객체 생성
 웹서비스 호출 객체 생성
• EJS, EJS.JS 개발 및
테스트 용이
• EJS 템플릿 개발을 위한 웹 에디터
(FckEditor)
• 모바일 사이즈 시뮬레이터

38. 앞서 소개된 클라우드IDE (유클립스) 는 페이스북 및 자체 SNS (프로세스 코디) 를
기반으로 내부/외부 SNS와 연계된 공개 개발, 피어-리뷰, 크라우드 소싱등을 수행할
수 있어요…

39. • 테스트 자동화를 위한 레코더 (Shift + F12)
• Shift + F12를 누르면 mw3기반 어플리케이션
의 입력값, 버튼 클릭 순서를 기록
• 기록된 테스트는 JSON(텍스트)으로 콘솔에 남
음 (크롬)
• 콘솔에 남은 JSON을 저장해 놓았다가
• 자동화 테스팅을 만들거나
e.g.
mw3.testSet={"testScenario": <Recorded Test JSON Here>]};
mw3.test("testScenario");
• 가이디드 투어를 만들 수 있습니다.
e.g.
mw3.testSet={"testScenario": <Recorded Test JSON Here>]};
mw3.test("testScenario“, {guidedTour: true});
 mw3기반 어플리케이션들의 품질과 UX를 만족시
키기 위한 강력한 도구죠???

40. Metaworks3 IDE eXo IDE Cloud9 IDE Orion
(UClipse)
License MIT/LGPL Commercial Commercial EPL
/SaaS (Free) /SaaS (Free)
Online Coding O O O O
Compilation O O O (Node.js) X
Run O ? (need PaaS) O (Node.js) X
Debugging O (LGPL) X O (Node.js) X
SCM SVN/Git Git Git Git
Process Modeling O (LGPL) X X X
Entity Modeling O (LGPL) X X X
Rule Modeling O (LGPL) X X X
Layout Editor O (LGPL) X X X
Security O ? (need PaaS) O X
Social Coding Chatting/FB X Chatting X
ALM Code Review / Code Review / Code Review X
CI / Scrum CI (need PaaS)

41. – 흩어진 메타데이터를 자동으로 관리하는 메타웍스3
General Approach: Using Metaworks3:
Spring MVC, JSON, jQuery, Hibernate
meta
data Controlle
r
Domain class
Controlle (java version)
r
View DAO
You have to
meta Synchronize the gap meta
Metaworks Metaworks
View data DAO data
Synchronizes the Proxy
meta
Synchronizes the Proxy
data
Domain class
Domain class Domain
(Hibernate ver
(JS version)
sion) Class
(Java)

43. 적용 사례 모음

44. 적용사례: 프로세스 코디 서비스
SaaS
워크플로우 및 통합 커뮤니케이
집단지성 및 매시업 기능 개인 직무 및 프로젝트 관리
션
• 찾아오는 업무 방식 – 워크 • 집단지성 마인드맵 • 공유 캘린더
리스트 및 프로세스 자동화 • 마인드맵 이슈 트래킹 • 워크리스트 (투두리스트)
• 이메일/ SNS/ 채팅 통합 • 마인드맵 콘텐츠 매시업 기 • 업무 예약
• 전자결재 능 • 간트 챠트 기반 프로젝트 관리
• 창의적 의사소통 원활화 • 내부 데이터 매시업 기능
파일(문서) 관리 보안관련 프로세스 관리 기능
• 개인/그룹별/롤별 권한 부여
• 문서 분류 및 버전 관리 • 프로세스 관리 (수정/추가) 기
• 그룹에 부여된 권한에서 일
• 문서 바로 편집 • 공유 캘린더 능
원만 제외 처리 가능
• 폴더 관리 (마인드맵으로) • 워크리스트 (투두리스트) • 프로세스 모니터링 및 분석 기
• 하위 폴더 권한 계승
• 문서 내용 검색 (ppt, doc, xls, • 업무 예약 능
• 문서/프로세스/채팅/마인드
pdf, hwp 등) • 간트 챠트 • 시스템 통합 (EAI) 기능
맵 보안기능
44

45. 적용사례: 클라우드 IDE & PaaS
범위:
1.Cloud IDE
2.Cloud ALM (Application Lifecycle Management)
3.Application Platform
4.Integration Platform
5.Model Platform
6.UI Framework
클라우드 IDE 클라우드 ALM
코드 어시스트 컴포넌트 마켓 버저닝(형상관리), 테스팅, 빌드/배포 자동화
플레이스 접근 개발 On
운영
모델 플랫폼 (비즈니스 전문가) 어플리케이션 플랫폼
the Cloud
관리
데이터베이스
(Structured/Unstruct 웹어플리케이션
비즈니스 프로세스 비즈니스 룰 ured DBMS) 가상화 프레임워크/서버

46. 적용사례: OO정보원
• 신청 심사 프로세스 모델링
Model-Driven
• 가격산출 룰 모델링 & • 기간계 업무
SOA Maturity
Level – 7*
• 대고객 홈페이지
수준의 • 테이블 40개
대민 서비스
구축
• 화면 200본
• 계정 업무 화면 및 비즈니스로직
• DAO 생성 / WS호출 및 노출
* IBM’s SOA Maturity Level-7:
Dynamically Re-Configurable Services 수준으로 Process-
Orchestration Approach를 포함한 가장 높은 SOA수준

47. 파격실험:
문외한에서 시작한 3개월 개발자
vs. 5~6 년차 경력 개발자

48. • 개발리소스: SW개발 문외한 3명
• 미션: 하이엔드급 서비스 사이트의 구축
– 페이스북, G-Market 쇼핑몰, SalesForce.com
중 하나를 만들라!
• 프로그램:
– 1개월차 : 객체 모델링 (UML)학습만
– 2개월차 : 모델링  자바매핑만
– 3개월차 : HTML 코딩만
– 4개월차 : 미션 수행!

49. 강서구 과장 (33세)
• 직무: 영업 관리
• 초등학교 부터 컴퓨터를 좋아했으나, 프로그래밍은 해
본적 없음.
• 가장 프로그래밍과 유사한 것으로 엑셀을 잘 사용함.
안병성 사원 (31세)
• 직무: 서버 관리 및 SE
• PHP 기초 경험
김영재사원 (25세)
• 직무: 테스팅 및 모델링
• 프로그래밍 경험 전무
• 산업공학 전공

50. 실험이 성공하면,
모델링인력(아키텍트)만으로도
(웹 디자이너 포함)
하이엔드급 웹 어플리케이션을 개발할 수 있다?
결과는 3개월 후에~ 기대바랍니다.
metaworks3.org:8080/mw3/
code.google.com/p/metaworks3/