Swc발표자료3 3(seoul case3)

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

2012.08.31

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

1998~ 2012. GABIA Ⓒ All rights reserved.

서울시 홈페이지 아키텍처

추가 적용 기술

MDM(Master Data Mgmt.)

Any Device 보안(OWASP Top10)

기반 기술 적용(ROA)
Resource Center
(OSMU) RESTful

Open CMS Oauth Protocol
(Platform)
Open API

ATOM
Legacy System
Meta Data

Application H/W 기반 기술

COP 가상화
(Contents Open Platform)
클라우드 컴퓨팅

그린 IT 설계
IEEE 1471
Architecture Model
IT WEB TOTAL COMPANY GABIA. -3-

오픈 플랫폼

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

1 누구나 1 누구나

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

서울시 민원과 자원의
3 보기도 쉽고 3 모니터링이 쉽고
홈페이지

관리가 용이하고
4 이해하기도 쉬운 4 비용도 절감되고

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


오픈 플랫폼
모범사례 연구

런던시청 백악관

높은 시민참여

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

오픈 소스
콘텐츠 개방
플랫폼 기반


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

2011년 2012년

다양한
디바이스 지원

SNS로의 사용자 중심의
콘텐츠 연계 양방향 정보제공

오픈 소스 콘텐츠 개방
플랫폼 기반 시도


반응형웹

Responsible Web 제작
•HTML5, CSS3, Javascript
•One Source 에서 서비스 제공
•모바일 환경 고려, 사용자 중심의 UX,UI 제공
•컨텐츠 중심의 최적화 웹페이지 제공
•One Source 로서, 유지보수의 효율을 높임.

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


반응형웹

Width : A
Media Query
•상대값 코딩

Height : a’
•미디어쿼리를 활용한
가변폭 웹 디자인기법 적용

Width : B
Height : b’

Width : C
Height : c’


리소스센터 개념

Dash Board
Open API /

( )
API
XML,JSON,RSS Word Press
Application Server
Meta Data

API- (Rest)

Post
Page
html
My-SQL
Word Press Server

IT WEB TOTAL COMPANY GABIA. - 10 -

서울시 리소스센터


서울시 리소스센터
서울시 리소스 분류 체계

건강 경제 교통 문화/관광 복지 세금/재정

소방/민방위 정보화 주택/도시계획 토목/건설 행정 환경


리소스센터 - 분야별


리소스센터 활용방법


메타데이터 수집
메타데이터 구성도

WordPress My-SQL

Post Data
Posting

Seoul_ _post
Mapping Data
( ) Core
Engine
Seoul_resource_mapping
Meta Serialize
Plug-in Object Resource Data

Seoul_resource_meta


리소스 메터데이터 전환
관리자 리소스 등록하기


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


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

대학생
내외부 핵심 이해관계자 파악, 외부 이해관계자 내부 이해관계자 홈페이지 이용자
청년 관심 이슈 조사 분석 파악 및 이슈분석 의견수렴 및 검토 설문 조사 기획 및 시행

취업자

공무원 홈페이지 UI 구성 방안 및 홈페이지 구성(안) 홈페이지 개정 및 운영
중요 이슈 분석
노인
가이드라인 도출 도출 가이드 개발

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


영역별 가이드

영역별 가이드
Layout 가이드
GNB 가이드
LNB 가이드
로그인 가이드
Footer 가이드


요소별 가이드

요소별 가이드
타이틀 가이드
로고가이드
컬러가이드
버튼, 탭스타일 가이드
아이콘 스타일 가이드
이미지 가이드
동영상 가이드


개별폼 가이드

개별 폼가이드
스태틱 컨텐츠 가이드
게시판 가이드
EMS 가이드
팝업 가이드
이벤트, 프로모션 가이드


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

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

Open-API Dash Board

XML

ADD-ON Open-API Dash Board
JSON Ext-JS 보안
(그리드,챠트)

RSS

Application(Spring)
Meta-Data Plug-in/Theme

MVC AOP Ext-JS Batch
(REST) (jdbc)

DBMS
Theme
Plug-in Open Platform Core
Core Data App Data Meta Data

Open Platform


적용 플러그인- 시민과 찰칵찰칵

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 서울시 정보소통광장 공표주기 삽입 글쓰기에 커스텀필드로 공표주기/등록번호 추가


실제 사용 중인 Plug-in

번호 이름 내용

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 서브메인 새분야별 템플릿 서브메인 구성 플러그인


서울시 열린데이터 광장


Swc발표자료3 3(seoul case3)

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (12)

Similar a Swc발표자료3 3(seoul case3)

Similar a Swc발표자료3 3(seoul case3) (20)

Swc발표자료3 3(seoul case3)