Swc발표자료3 3(seoul case3)

1998~ 2012. GABIA Ⓒ All rights reserved.

서울시 홈페이지 아키텍처 소개 및 리소스 개방

2012.08.31

가비아 SI사업부 총괄사업부장 : 윤 여 주

- 3 - IT WEB TOTAL COMPANY GABIA.

서울시 홈페이지 아키텍처

IEEE 1471 Architecture Model

Open CMS (Platform)

Application

Resource Center (OSMU)

Legacy System

COP (Contents Open Platform)

기반 기술 적용(ROA)

RESTful

Oauth Protocol

Open API

ATOM

Meta Data

H/W 기반 기술

가상화

클라우드 컴퓨팅

그린 IT 설계

추가 적용 기술

MDM(Master Data Mgmt.)

보안(OWASP Top10) Any Device


오픈 플랫폼

1 누구나

2 찾기 쉽고

3 보기도 쉽고

4 이해하기도 쉬운

1 누구나

2 콘텐츠 입력과 재활용이 쉽고

3 민원과 자원의 모니터링이 쉽고

4 관리가 용이하고 비용도 절감되고

시민을 위한 시공무원을 위한

5 꼭 필요한 정보만을 요약한

5 꼭 필요한 기능을 요약한

서울시 홈페이지


1 누구나

2 찾기 쉽고

3 보기도 쉽고

4 이해하기도 쉬운

1 누구나

2 콘텐츠 입력과 재활용이 쉽고

3 민원과 자원의 모니터링이 쉽고

4 관리가 용이하고 비용도 절감되고

시민을 위한 시공무원을 위한

5 꼭 필요한 정보만을 요약한

5 꼭 필요한 기능을 요약한

서울시 홈페이지

오픈 플랫폼


오픈 플랫폼

모범사례 연구

백악관 런던시청

정리된 정보

높은 시민참여

사용자 중심의 양방향 정보제공

오픈 소스 플랫폼 기반

콘텐츠 개방


오픈 플랫폼

2011년 2012년

SNS로의 콘텐츠 연계

다양한 디바이스 지원

사용자 중심의 양방향 정보제공

오픈 소스 플랫폼 기반

콘텐츠 개방 시도

서울시 홈페이지의 오픈 플랫폼 도입


반응형웹

반응형웹 기술을 통한 nScreen 전략

•HTML5, CSS3, Javascript

•One Source 에서 서비스 제공

•모바일 환경 고려, 사용자 중심의 UX,UI 제공

•컨텐츠 중심의 최적화 웹페이지 제공

•One Source 로서, 유지보수의 효율을 높임.

Responsible Web 제작


반응형웹

Width : A

Width : C

Width : B

Heig

ht

: a’

Heig

ht

: b’

Heig

ht

: c’

Media Query

•상대값 코딩

•미디어쿼리를 활용한

가변폭 웹 디자인기법 적용


리소스센터 개념

Word Press Server

Word Press Application Server

My-SQL

Post

Meta Data

API-

API

XML,JSON,RSS

Page

html

(Rest)

Open API / Dash Board

( )


서울시 리소스센터


서울시 리소스센터

건강

소방/민방위

경제

정보화

교통

주택/도시계획

문화/관광

토목/건설

복지

행정

세금/재정

환경

서울시 리소스 분류 체계


리소스센터 - 분야별


리소스센터 활용방법


메타데이터 수집

메타데이터 구성도

Core Engine

( )

Post Data

Seoul_ _post

Mapping Data

Seoul_resource_mapping

Resource Data

Seoul_resource_meta

My-SQLWordPress

MetaPlug-in

SerializeObject

Posting


리소스 메터데이터 전환

관리자 리소스 등록하기


리소스센터 – 메타데이터 형식







서울시 UI/UX 가이드 UX/UI 개발 방법론

사용자 경험 중심의 UI/UX 수립

+ =

내외부 핵심 이해관계자 파악, 관심 이슈 조사 분석

홈페이지 UI 구성 방안 및 가이드라인 도출

외부 이해관계자 파악 및 이슈분석

중요 이슈 분석

내부 이해관계자 의견수렴 및 검토

홈페이지 구성(안) 도출

홈페이지 이용자 설문 조사 기획 및 시행

홈페이지 개정 및 운영 가이드 개발

대학생

청년

취업자

공무원

노인


서울시 UI/UX 가이드 영역별 가이드

영역별 가이드

Layout 가이드

GNB 가이드

LNB 가이드

로그인 가이드

Footer 가이드


서울시 UI/UX 가이드 영역별 가이드

영역별 가이드

Layout 가이드

GNB 가이드

LNB 가이드

로그인 가이드

Footer 가이드


서울시 UI/UX 가이드 요소별 가이드

요소별 가이드

타이틀 가이드

로고가이드

컬러가이드

버튼, 탭스타일 가이드

아이콘 스타일 가이드

이미지 가이드

동영상 가이드


서울시 UI/UX 가이드 요소별 가이드

요소별 가이드

타이틀 가이드

로고가이드

컬러가이드

버튼, 탭스타일 가이드

아이콘 스타일 가이드

이미지 가이드

동영상 가이드


서울시 UI/UX 가이드 개별폼 가이드

개별 폼가이드

스태틱 컨텐츠 가이드

게시판 가이드

EMS 가이드

팝업 가이드

이벤트, 프로모션 가이드


서울시 UI/UX 가이드 개별폼 가이드

개별 폼가이드

스태틱 컨텐츠 가이드

게시판 가이드

EMS 가이드

팝업 가이드

이벤트, 프로모션 가이드


서울시 플러그인 활용사례 플러그인 개념

Open-API

XML

JSON

RSS

Dash Board

Ext-JS (그리드,챠트)

보안

Application(Spring)

MVC (REST)

AOP Ext-JS (jdbc)

Batch

Core Data

DBMS

App Data Meta Data

ADD-ON Open-API Dash Board

Meta-Data

Open Platform Core

Open Platform 물리적 아키텍처 Open Platform 개념적 아키텍처

Plug-in/Theme

Open Platform

Theme Plug-in


서울시 플러그인 활용사례 적용 플러그인- 시민과 찰칵찰칵

Oauth Key를 통한 Flickr 연동


서울시 플러그인 활용사례 적용 플러그인- 태그, CCL


서울시 플러그인 활용사례 적용 플러그인- 섹션 메인 플러그인


서울시 플러그인 활용사례 실제 사용 중인 Plug-in

번호 이름 내용

1 CMS2WP CMS2 게시판의 내용을 WP로 이관하는 기능

2 seoul mayor citizen 시민이 시장이다

3 seoul mayor photo 시민과 찰칵찰칵

4 seoul mayor talk 시장실 정책워크숍

5 seoul print 화면 인쇄하기 버튼

6 seoul search tweet 검색트윗 가져오기 플러그인

7 seoul SNS button SNS 연동 플러그인

8 seoul tag cloud 태그 클라우드 스타일 변경

9 서울 만족도 플러그인 만족도 평가, 통계

10 서울 스크랩 플러그인 포스트 스크랩

11 서울시 라이브원순 동영상설정 플러그인 서울시 라이브원순 동영상설정 플러그인

12 서울시 연계태그 프러그인 리뉴얼 템플릿에 적용되는 연계태그 플러그인

13 서울시 위원회 회의록 정보소통광장 위원회 회의록 플러그인

14 서울시 정보소통광장 공표주기 삽입 글쓰기에 커스텀필드로 공표주기/등록번호 추가


번호 이름 내용

15 서울시 주요회의록 정보소통광장 주요회의 플러그인

16 서울시 트윗위젯 최신 트윗가져오기 플러그인

17 seoul board 게시판 플러그인

18 seoul CCL CCL 플러그인

19 seoul common comment 댓글 플러그인

20 seoul content manager 콘텐츠 담당자 표시 플러그인

21 seoul dashboard 서울시 대쉬보드 커스터마이징 플러그인

22 seoul LiveRe 소셜댓글 라이브리 적용

23 seoul no robot 포털 로봇 검색방지 플러그인

24 seoul rating 게시물 평가 플러그인

25 Seoul To Excel 엑셀 다운로드 플러그인

26 섹션메인 새템플릿 섹션메인 구성 플러그인

27 서브메인 새분야별 템플릿 서브메인 구성 플러그인

서울시 플러그인 활용사례 실제 사용 중인 Plug-in


서울시 열린데이터 광장

감사합니다.

Documents

Swc발표자료3 3(seoul case3)