posted by 희정냥★ 2009. 8. 6. 16:31

* 과제소개 : Samsung Software Membership online 9th Exhibition
아래는 제가 2007년도에 멤버십 회원이 되고 나서 처음으로 했었던 과제이고,
2007년 5월부터 2007년 7월까지 진행했었습니다.
위에 링크되어 있는 온라인전시회 페이지에 소개된 내용입니다.


1. Introduction




웹 환경에서 프레젠테이션 문서를 제작함으로써 설치와 같은 환경의 제약이 없이 사용이 가능하며, 데이터 공유와 정보의 공개 등을 통한 새로운 사용자 컨텐츠 문화를 조성한다. 제작한 문서의 사용자간 공유 기능이 매우 뛰어난 장점이 있다. AJAX와 ASP .NET을 이용한 동적인 컨텐츠를 통해 표현의 제약을 뛰어 넘고, 나아가 여러 비즈니스 모델을 제시한다.




김정하  하승우  김희정 


 


            


이 서비스는 두 가지 측면의 문제를 해결하고자 기획되었다.


첫째, 프리젠테이션 프로그램의 로컬환경의 작업으로 인해 문서 및 정보의 사용자간 공유가 매우 힘들다는 점이다. 무거운 프로그램과 웹 환경에서 편집이 되지 않는 점 등이 웹 환경으로의 전환을 꾀하지 못한다는 단점이 있다.

둘째, 현재 존재하고 있는 온라인상의 많은 부분의 컨텐츠가 텍스트 위주의 정적인 컨텐츠이다. 또, 각 컨텐츠는 하나의 특징만을 가지는 독립적인 것이 대부분이다.

이 서비스를 통해 다양한 방법에서 표현할 수 있는 진정한 동적 컨텐츠를 생성하고자 하며 사용자간 데이터 공유와 정보의 공개 등을 통한 새로운 사용자 컨텐츠 문화를 조성하며, 서비스 제공자는 이를 통한 여러 상업적인 효과를 창출할 수 있다.



2. Development Description


본 과제는 웹 오피스 Web 2.0의 한 부분을 비중있게 다룬 작품이다.

많은 분야에서 이와 같은 모델이 연구되고 있지만 웹 오피스의 장점을 비즈니스 모델과 접목 시키는 부분에 대해서는 미흡한 것이 사실이다. 우리는 이에 착안하여 웹의 특성을 살린 사용자들간의 공유와 출판의 개념을 접목 시키고자 하였다. 또한, 관련 기술은 AJAX를 심도있게 다루었으며, ASP .NET을 이용하여 내부적인 비즈니스 로직을 제작하였다.

로컬 환경의 프로그램이 웹 환경으로 진화하면서 사용자들은 자신의 지식을 다른 사용자와 공유할 수 있으며, 이를 자신을 표현하고 나타내는 수단으로 사용할 수 있다. 또한 서비스 제공 업체에서는 관련 서비스를 이용하여 많은 비즈니스 모델을 구상할 수 있게 되었다.

이것은 바로 Web 2.0 의 개념을 가장 잘 표현한 부분이며, 이 작품에서 자신있게 보여주는 부분이다.



 

  



DB를 제외한 전체적인 3-Tier Architecture로 구성이 되어 있다. 이는 추후 서비스가 대형화 되었을 때를 대비하여 커넥션 풀링과 같은 부분을 고려하기 위함이라 할 수 있다.

1. UI

일반 사용자에게 보여지는 Web Site, PT문서작성, Open API를 포함한다. 사용자의 이벤트 등을 처리하며 입력 Data를 BIZ layer로 넘기거나 BIZ layer를 통해 Data를 조회한다.

2. BIZ

각종 업무단위로 묶여지며 입력 Data를 처리하고 처리된 Data를 DAC layer로 넘기거나 DAC layer를 통해 Data를 조회한다. AJAX처리를 위한 WebService BIZ와 일반적인 Web Site부분에서 사용될 BIZ부분으로 나누어지며 WebService BIZ는 다시 공용 BIZ를 사용하게 된다. 공용 BIZ는 COM+로 구성되며 Transaction 처리를 담당한다.

3. DAC

COM+과 SQL Helper을 통해 DataBase와의 Connection과 Connection Timeout등을 관리하며 Stored Procedure의 Parameter 생성과 호출을 담당한다.

4.  DataBase

MS SQL 2005로 구성된다.



 

5. XML

데이터베이스에서 문서를 불러오거나 사용자의 요구에 의해서 문서가 편집 되었을 때, 하나의 XML 문서의 형태로 데이터가 저장되어 제어를 할 한다. 또한 이렇게 제작된 XML 데이터를 바탕으로 사용자 디스플레이에 렌더링 된다.




  

1. 과제 목표

본 과제는 동기에서 볼 수 있듯이 Web 2.0 이란 기술을 활용해서 웹 오피스와 접목 시켰을 경우, 얼마나 많은 상승 효과를 보여줄 수 있는 지에 대한 증명을 목표로 하고 있다.

프로그램 측면에서 기본적인 텍스트와 이미지의 입력과 편리한 유저 인터페이스의 제공을 목표로 하고 있으며, 웹 컨텐츠 확보를 위한 포스팅과 사용자들간의 자료 공유에 중점을 두어 프로젝트의 기획을 하게 되었다.

또한, 데이터베이스의 확장성과 향후 서버의 확장을 고려하여 XML 문서의 형태를 분리 저장하고 로딩되는 과정에서 통합하는 형태로 자료구조를 설계하고자 하였다.

2. 과제 결과

2.1. UI

오피스 제품군을 사용하던 사용자들이 웹 환경에서 본 서비스를 사용하였을 때, 이질감을 줄이기 위해 최대한 편리한 UI를 제공해주고 있는데, 이와 같은 UI의 형태를 리본 UI라고 한다.

           

 

2.2. Editing

편집 기능에서는 로컬에서 제공되는 것과 같은 텍스트 입력과 이미지, 멀티미디어 등이 제공되며, 각 객체에는 애니메이션을 부여하여 동적인 문서를 제작할 수 있다.
또한, 이미지에 대한 그룹화와 스마트 아트를 지원하고 있으며, Redo/Undo 기능을 위한 메모리 스택을 제작하였다.

프리젠테이션 프로그램의 특성을 살려 분할 출력 기능이나 클립보드와 같은 기능 역시 제공을 하고 있다.

2.3. Viewing

제작된 문서는 다음과 같은 화면의 형태로 사용자에게 보여지게 된다.

좌측 하단에 현재 페이지가 나오고 있으며, 우측 하단에는 페이지 이동, 슬라이드쇼, 프린트 기능 등을 제공하고 있다.

               

 

2.4. Posting

사용자는 서비스 사이트에서 제공되는 문서를 포스팅 하여 자신의 블로그나 타 사이트의 게시판에 포스팅 할 수 있다. 이러한 기능을 통해 사용자들은 기존의 텍스트, 이미지가 아닌 새로운 형태의 매체를 접할 수 있게 된다.

               

 

2.5. Contents Upload

웹의 특징을 활용한 부분의 한 방법으로 컨텐츠의 업로드 기능이 있다.

사용자는 자신이 만든 도형이나 클립아트, 템플릿 등을 서버에 업로드를 할수 있으며 이를 이용하여 다른 사용자들과 공유를 할 수 있게 된다.

이러한 기능을 통해 사용자간의 데이터 공유의 활성화를 기대할 수 있으며, 이는 사용자들의 컨텐츠 제작의 질을 한층 더 향상 시킬 수 있다.

               

 

2.6. Task Sharing

다음 그림은 두명의 사용자가 하나의 문서를 동시에 작업할 수 있다는 것을 보여주고 있다.

파일 기반의 서비스의 경우 하나의 문서에 대해서 여러명이 동시에 작업을 할 경우에, 문서를 제작하고 통합하는 과정이 번거로웠다. 하지만 웹환경에서는 문서 작업을 원하는 사용자에게 편집 권한만을 부여해주는 행위 하나만으로 사용자간의 협업 시스템이 훌륭하게 이루어 지게된다.



 

2.7. Service Site

위에서 설명한 모든 기능을 서비스하기 위한 서비스 사이트를 제작하였으며, 이 사이트 역시 전반적인 AJAX 기술을 활용하여 제작하였다.

사용자의 편의성을 위해, 카테고리별 등록과 실시간 인기 검색어, 검색 자동완성 기능 등을 제공해 주고 있다.

 

 

[[applied technology]]

1. AJAX

서버와 클라이언트의 비동기 통신 방식인 AJAX 기술을 활용하여, PT 제작 부분의 전반적인 부분에 활용이 되었다.

본 프로젝트의 경우 데이터의 로딩과 저장을 하는 과정이 AJAX 기술을 가장 많이 활용한 부분이다. 이를 이용해 웹 상에서의 데이터 유실을 막을 수 있는 자동저장과 같은 기능을 구현하였다.

2. Vector Image 제작

웹 환경에서는 로컬 환경의 오피스 제품군과는 달리 벡터 형식의 이미지 처리를 지원하지 못한다.

때문에 이미지의 확대나 축소와 같은 기능을 사용자에게 제공하기 위해서는 사용자로부터 입력받은 마우스의 위치 데이터를 파악하여야 한다. 벡터 이미지 계산 수식을 적용하여 비즈니스 로직 부분에서 계산된 데이터를 바탕으로 렌더링 과정을 통해 브라우저로 실시간에 표시하게 된다.

3. COM+

3Tier Architecture 상에서 BIZ Layer 와 DAC Layer에 COM+ 기술을 적용하였다.

BIZ Layer에서는 데이터 처리상에 Transaction 을 담당하게 되고 DAC Layer에서는 Connection Pooling을 담당하게 되는데 이를 통해 대규모의 Data 및 다수의 동시접속자에 대한 처리를 할 수 있도록 설계하였다.




1. Software 

  [IDE] Visual Studio .Net 2005
  [Database] MS SQL 2005
  [Etc] JAVASCRIPT (AJAX 기술 포함)



3. Improvement



 

1. PPT 포맷 호환

현재는 자체 제작한 XML Document의 형태로 문서가 저장되고 있지만, 추후 업데이트를 통해 MS사의 PPT와도 호환이 가능하도록 구현할 예정이다. 이러한 호환이 가능해 질 경우 사용자들에게 편의성을 증가시키고, 서비스의 확대를 가지고 올 수 있다.

2. 모바일 장치와의 연동

웹 환경 어디에서든 적용이 가능하기 때문에 모바일 장치에서도 문서를 제작하거나 볼 수 있는 환경을 만들 수 있다.



4. Epilogue

 


1. 그래픽 환경

로컬 환경의 프로그램의 경우 벡터형태의 이미지로 이루어진 반면, 웹에서는 벡터 이미지를 표현해 주지 않기 때문에 이 부분을 처리하는데 어려움이 있었지만, 내부적인 계산 로직을 적용하여 해결할 수 있었다.

2. 표

사이즈의 조절과 같은 기능은 제공을 할 수 있지만, 표 안에 내용을 직접 삽입하는 등의 방법에서 많은 에로사항이 발생하였다. 이 부분에 대해서는 향후 적합한 방법을 모색중에 있다.

3. 텍스트 입력

텍스트 박스를 로컬 환경과 같은 모습으로 제작하기 위해서는 상당히 많은 기술적인 부분을 요구 했지만, 개발의 목적과 시간을 고려하여 텍스트 입력창을 따로 두었던 점이 약간의 아쉬운 점으로 남는다.

 

5. Manager's comment


 

현재 활발히 연구되고 있는 Desktop Client의 한 분야로써, 로컬 환경에서만 사용되었던 프로그램을 설치 없이 웹에서 사용할 수 있다는 점에 Web 2.0 개념을 접목시켜 사용자 측면의 편의성을 최대한으로 높였다. 기존의 파워포인트를 웹에서도 클라이언트처럼 실행할 수 있다는 것이 상당한 매력이다.
[SW멤버십 WEB2.0 공모전 금상]



 

'Computer > Web' 카테고리의 다른 글

CSS Box Model  (0) 2011.09.18
CSS 선택자  (0) 2011.09.18
Web 2.0 기반의 Presentation On The Web  (0) 2009.08.06
syntaxhighlighter를 tistory에서 사용 하는 방법  (0) 2008.10.08
IE6,IE7 ,FireFox 에 대해 CSS 맞추기  (0) 2008.07.09
CSS에서 브라우저 구별 (IE6, IE7, FIREFOX)  (0) 2008.07.09

댓글을 달아 주세요

posted by 희정냥★ 2008. 3. 18. 20:57

2월, 3월에 제가 발표했던 ppt들 입니다.


2월 18일~21일엔 멤 기술세미나,

3월 15일엔 디자인패턴 스터디 때문에

발표를 했습니다.


ppt 내용은 다 web에서 긁어모은것들이라,

혹시 저작권이 문제된다면 말씀해주세요.. ㅎㅎ


기술세미나 같은 경우는,,

ppt엔 사실 별 내용이 없어요... ㅎㅎ

거의 다 직접 보여주는 형식으로 했거든요...^^;;


(매쉬업 캠프 내용이 정말 많은 도움이 되었습니다.^^ http://cutewebi.tistory.com/358)


2월 18일 프로그래머가 알아야 할 Photoshop :

2월 19일 생활속의 Web 2.0 :

2월 20일 OpenAPI 이용하기 :

2월 21일 Mashup! :

2월 22일 BlogAPI를 이용한 원격 호스팅 :


그리고 디자인패턴 ppt는 시간이 없어서 공부도 많이 못하고, 준비도 많이 못했어요.

게다가 내용도 사실 잘 모르는 상태에서 발표준비를 해서인지

글자가 너무 많고 이미지는 너무 없다고,,  혼났습니다.. ㅎㅎ


3월 15일 디자인패턴 스터디 Bridge Pattern :

'Computer > Web' 카테고리의 다른 글

CSS에서 브라우저 구별 (IE6, IE7, FIREFOX)  (0) 2008.07.09
Daum UI DevDay  (0) 2008.05.18
희정냥의 ppt  (0) 2008.03.18
강의편람이 나와따;  (0) 2008.01.29
신나는 Mash Up Camp!  (6) 2008.01.14
웹 서핑하다가 발견한 사이트! - 링크나우  (1) 2007.10.12

댓글을 달아 주세요

posted by 희정냥★ 2007. 10. 12. 14:40

방금 웹서핑을 하다가 발견한 사이트.

인맥 네트워크 사이트이다.

자신의 프로필을 등록하고, 검색해서 관심 상대를 찾고,

그러다 인연이 되서 연락을... (ㅡ_ㅡ);;;; 하는 그런 사이트인것 같다.

주소는 http://www.linknow.kr/ 이다.





방금 가입해서 대충 프로필을 넣었는데;; 이렇게 태그로 링크시켜서 보여주게 하고,

관심 있으면 1촌 맺고, 2촌, 3촌... 이렇게.. 등록을 하는 듯 하다.

Web 2.0 특징 중에 소셜 네트워크라는 것이 있는데,

바로 이런 인맥 네트워크를 말한다.

IBM 사내 인트라넷에는 이미 도입이 되었고(데모를 보긴 했다).

간단하게 어떤 기술을 가진 사람을 찾고 싶을때, 검색을 하고,

그 사람을 아는 사람도 검색이 되고, 그사람이 아는 사람의 아는 사람도....;;

뭐 이런 네트워크 이고, 이 특징이 구현된 사이트라고 생각된다.

엠파스에 있는 인물 검색도 비슷한 유형인데,

이름을 넣고 검색하면 그 사람과 관계된 사람들도 다 검색이 된다.

음... ;; 나를 필요로 하는곳이 있을까...?
 
스토커만 안 붙는다면 재밌을것 같다. ㅎㅎㅎ

'Computer > Web' 카테고리의 다른 글

강의편람이 나와따;  (0) 2008.01.29
신나는 Mash Up Camp!  (6) 2008.01.14
웹 서핑하다가 발견한 사이트! - 링크나우  (1) 2007.10.12
웹 2.0 기술의 주역 - OpenAPI의 무한한 가능성  (0) 2007.05.10
색상표  (0) 2007.04.26
JSP / request 내부 객체  (1) 2007.03.16

댓글을 달아 주세요

  1. BlogIcon achiven 2007.10.13 00:28 신고  Addr  Edit/Del  Reply

    스토커 붙으면 재밌겠는걸..ㅋㅋ

posted by 희정냥★ 2007. 10. 3. 23:15


아... 완전 기쁘다... 흐흐흐... ^------------^;;

(결과 발표 : 2007.09.27)

사용자 삽입 이미지



-----------------------------------------------------

발표하던날 서울가는 길에~

(과제 발표 : 2007.09.20)

사용자 삽입 이미지

우리팀 정하오빠랑 승우오빠.... 이 사진은 왠지...완전 썩...소.... ㅡ_ㅡ;;;;;;;;;;;;;;;;;;;;;;;;;



사용자 삽입 이미지
KTX 타고 서울 가는길에 ... 창밖의 풍경.. ㅡ_ㅡ;; 심심해서 찍었음;;



사용자 삽입 이미지
63빌딩이시다.. -0-;;




사용자 삽입 이미지
여기는 내 자리~"




사용자 삽입 이미지
발표 장소였던 강남멤버십;;'



댓글을 달아 주세요