Evaluation 평가 - 평가내역

WEB AWARD KOREA evaluation

등록정보

타이틀 국립과천과학관(다국어)
Gwacheon National Science Museum Multilingual Websites
서브타이틀 국립과천과학관 다국어 웹사이트 개편
GNSM Multilingual Websites Renewal
URL http://www.sciencecenter.go.kr/english/index.do 사이트보기
소개 다양한 해상도의 디바이스를 충족시킨 국립과천과학관 다국어
키워드 국립과천과학관,Gwacheon National Science Museum,GNSM,PCN ,피씨엔
제작년월 2012.9
등록구분 데스크탑웹
후보등록분야 문화/레포츠 부문 > 문화/전시관
등록분야 목록보기
세부분류 학문 > 기록/자료관
소속사 국립과천과학관
제작사

PCN

제작사 제작진 PM 권현진

기획 이민정, 하진영

디자인 이송현, 양정원, 박수지

개발 김형일

멀티미디어 노우선

퍼블리싱 김정민, 김보형

품질관리 이성진, 윤대룡, 박우석

기타 이금탁, 김성훈
웹사이트 설명 이번 프로젝트는 기 구축된 국문 웹사이트와 통일감 유지와 노후화된 콘텐츠 정비하고 다양한 전시나 행사를 소개할 수 있는 공간을 마련하여, 국립과천과학관을 현장감 있게 접할 수 있는 콘텐츠를 제공하는 것이었다. 이에 기존 대비 80%이상 볼거리 풍부한 다국어 페이지가 구성되었고, 과학관의 특징을 나타내는 생동감 있는 디자인으로 표현할 수 있었다.
더불어, 하나의 마크업 페이지로 다양한 해상도를 지원하는 Mdedia Query을 이용하여 다양한 해상도의 디바이스를 충족하기 위한 시도로 반응형웹을 선택하였으며, 차세대 웹 표준인 HTML5를 모든 페이지에 적용함으로써, 시멘틱한 마크업으로 앞으로의 웹 환경에 더 적합하고 접근이 용이한 사이트로 제작했다.
그리고 Flash 사용을 지양하면서도 사용자 경험을 축소하지 않기 위해 다양한 스크립트로 작업됐다.
이번 프로젝트는 Mdedia Query를 이용한 반응형 웹 디자인으로 제작됐다. 애초에 반응형웹을 지향하여 설계된 UI가 아닌 국문의 스타일을 차용하여 간다는 것이 콘셉트였기 때문에 모바일 사이즈를 고려한 뎁스구조가 되어야 함에도 불구하고, A.I.에 한계가 있었고, 따라서 Navigation System 구조화하는데 애를 먹기도 했다. 플래시를 걷어내고 그와 유사한 효과를 표현하기 위해서는 jQuery 등의 스크립트를 사용했다. 특히 국문에서 플래시로 제작된 메인 비쥬얼의 경우 비슷한 모션 효과를 주기 위해 다양한 플러그인이 이용되기도 했다.
각 페이지들을 해상도 구간별로 2벌 혹은 3벌의 화면을 디자인 해야 했고, 이 모든 케이스를 고려한 마크업이 이루어져야 하며, 이를 고려한 레이아웃과 콘텐츠 기획이 전제되어야 했다.
이러한 협업 과정에 있어 처음에는 많은 시행착오와 잦은 커뮤니케이션 등으로 어려움을 겪기도 했지만, 궁극에는 기획자와 디자이너 퍼블리셔 모두가 같이 처음부터 설계자가 되어야 한다는 것에 동의했으며, 구현에 들어가기 전에 모두가 같이 좀 더 나은 사용성을 위해 그리드 시스템 개발을 같이 고민하고 분업화가 아닌 협업의 중요성에 대해 느끼게 됐다.

- 과천 다국어 해상 별 구간
과천 다국어 사이트는 css3 미디어 쿼리를 이용한 기법으로 해상도별 구간을 3단계로 작업함으로써 모든 장치의 해상도특성에 대응할 수 있도록 작업함
/* 990px 이상 해상도에서 실행할 CSS 코드를 작성 */
@media screen and (min-width:990px){...}
/* 720px 이상 989px 이하 해상도에서 실행할 CSS 코드를 작성 */
@media screen and (min-width:720px) and (max-width:989px){.....}|
/* 719px 이하 해상도에서 실행할 CSS 코드를 작성 */
@media screen and (max-width:719px){...}

-영문 외 웹사이트 주소
www.sciencecenter.go.kr/chinese/index.do (중문)
www.sciencecenter.go.kr/japanese/index.do (일문)
추가이미지
제작/구축 관련 자료 w_201210110812530138894560.pdf




평가의견