반응형웹디자인기획서 _ 일민미술관 Responsive web design Planning document_ilmin Museum of Art 기획자 : 박성준 목차 기획일 : 2017. 09. 16 01. 기획의도 02. 필요성인식및경쟁사분석 03. 컬러시스템과컨셉 04. 레이아웃프로토타입
01. 기획의도 Intention of the plan ㄱ. 일민미술관개요 일민문화재단에서운영하는미술관으로전동아일보명예회장김상만의업적과생애를기리기위하여설립되었다. 1926년에지어진동아일보사의옛사옥에 3개의전시실을갖추고문을열었다. 고려시대와조선시대의도자기와서화, 근대기의회화등일민컬렉션과동아일보, 신동아, 여성동아에실렸던회화, 삽화등동아일보소장품, 사회적메시지가담겨있는현대미술작품을소장하고있다. 회화, 사진, 비디오, 설치등의매체를통한대중적이고동시대적인현대미술전시를기획하고있다. ㄴ. 문화적욕구충족의필요성과현대미술의대중화 이른바 ' 먹고살기급급했던 ' 시대가지나간뒤, 한국사회는누구나영화관에서보고싶었던영화를보고, 유명한뮤지컬팀이내한공연을한다면한번쯤보러갈수있게되었다. 이는박물관및미술관등에도다르지않았는데, 과거에는전공자나중산층이상의상징이었던관람등의행위가 20~30대젊은층의가벼운데이트코스혹은취미생활등으로여겨지고있다. 이중현대미술및디자인분야의전시는국립현대미술관, 서울시립미술관, 대립미술관그룹, 일민문화재단등이서울전시관람문화의선두주자로자리잡고있으며, 일민미술관은현대미술의난해함을대중에게친근하게접근할수있도록시간마다도슨트투어를운영하는등의노력을기울이고있으며, 이는대림미술관의이용자들에게큰호응을얻었고대림미술관의 1층은카페와서점등의대중적인문화공간이되었고, 대림미술관이용객들의증가라는결과를가져오게되었다.
02. 필요성 인식 및 경쟁사 분석 Need Awareness and Competitive Analysis ㄱ. 사용자 경험을 고려하지 않은채 예술적인 부분에 초점을 맞춘 웹페이지 앞서말한 일민미술관의 이용객들을 위한 실제적인 노력과는 역설적으로 웹페이지는 지나치게 난해한 현대미술의 컨셉을 보이고 있다. 우선 사이트 전체를 뒤덮는 메인비쥬얼은 3가지 패턴의 전시물의 일부가 빠르게 변화하며 보여지는데, 이미지가 어두운 이미지로 변경될 때 상단의 로고와 타이틀이 부적절한 위치에서 어둡게 보이지 않음은 물론이고, 대부분의 사용자는 진행중인 전시 혹은 다가오는 전시에 대한 정보를 웹페이지의 메인에서 얻기를 기대하는데 이를 충족시키지 못하고 있다. 또한 GNB와 LNB의 위치또한 일반적인 사이트의 이용과는 많이 달라서 이용자에게 혼동을 주며, LNB의 상세분류 역시 지속적으로 일민미술관에 관심을 갖는 이용객이 아닌이상 알 수 없는 애매한 분류로 되어있었다. 하단에 있는 화살표버튼을 누르면 이용객들이 가장 궁금해할 관람 정보들이 위에서 아래로 올라오는데, 눈에 띄지않아 아쉬움이 크다. 마지막으로, 일민문화재단 역시 대림미술관 그룹처럼 일민미술관, 일민문화재단, 신문박물관이라는 3개의 세부 단체들로 구성되며 홈페이지 에서도 이들의 사이트로 연결되도록 구성되었는데, 일민문화재단은 일민미술관과 같은 형식의 틀을 가진 단일 페이지이고 신문박물관은 퀄리티가 많이 떨어지는 아예 다른 형식의 사이트 이다. 대림미술관그룹이 통일된 레이아웃과 퀄리티를 가진 세부사이트를 가진것에 비교된다. <일민미술관 웹페이지 문제점 정리> *좌측 상단부터 a,b,c a. 일민미술관의 메인페이지 01. 사용자 경험을 고려하지 않은 지나치게 컨셉츄얼한 웹페이지 b. 어두운 배경이미지에 가려 제대로 보이지않는 로고와 타이틀 02. 웹페이지의 로고와 타이틀이 가시성이 떨어짐 c. 일민미술관과 같은 계열의 사이트지만 전혀 다른 레이아웃인 '신문박물관' 웹페이지 03. 웹페이지의 구성요소가 일반적이지 않은 위치에 존재에 이용자에게 혼란을 줌 04. 같은 재단의 사이트들과 통일되지 않은 홈페이지의 형식
02. 필요성인식및경쟁사분석 Need Awareness and Competitive Analysis ㄴ. 왜반응형웹페이지로만들어야하는가? 2017년현재미술관관람등의문화시설을이용하는주고객은 20~30대의젊은층이고이들이전시관련정보를얻는곳은웹, 타블렛, 모바일어디라고정확하게단정지을수없다. 이들은밖에서친구혹은연인과시간을보낼장소를모바일이나태블릿으로찾다가자신의디바이스에적합한사이트가나오지않으면불편함을느끼고이내다른전시장으로눈길을돌릴가능성이높다. ㄷ. 경쟁사분석 현재서울에서대중적이고규모있는미술및디자인전시장은국립현대미술관 (MMCA), 대림문화재단의디뮤지엄, 대림미술관, 구슬모아당구장, 그리고우리가새로디자인을내놓을일민미술관이있다. 이중국립미술관인국립현대미술관 (MMCA) 은다양한계층의이용객을대상으로하는공공기관으로써의보편적인웹페이지레이아웃을크게벗어나지않은채, 감성적이고컨셉츄얼한부분을잘드러내고있다. 다음으로, 대림문화재단의대림미술관과구슬모아당구장을보면보다젊은층의문화소통공간으로써의역할을하는곳으로좀더시원시원하고직관적인사이트의구성을볼수있다. 또한, 네임드디자이너의개인전을위주로 하는대림미술관과젊은국내신인아티스트들의작업을소개하는구슬모아당구장은같은문화재단의기관으로써레이아웃은통일성을지키고있지만, 로고와메인비쥬얼이나타내는이미지가확연히다르다. 이에일민미술관은근현대미술품및한국근현대디자인에관한전시를주로한다는점과대중들의미술교육및문화소통공간으로써의역할을한다는점을복합적으로고려하여, 국립현대미술관 (MMCA) 과대림문화재단의웹사이트가가진장점을융합한 ' 보편적이면서직관적인 ' 웹페이지로재탄생하도록제작할것이다. * 좌측상단부터 a,b,c a. 국립현대미술관 (MMCA) 의메인페이지 b. 대림문화재단의대림미술관메인페이지 c. 대림문화재단의구슬모아당구장메인페이지
03. 컬러시스템과컨셉 Color System and Concept ㄱ. 컬러시스템 R : 233 R : 212 R : 74 R : 10 R : 186 G : 232 G : 212 G : 97 G : 15 G : 119 B : 227 B : 202 B : 104 B : 44 B : 110 ㄴ. 컨셉 일민미술관웹페이지리뉴얼의색채계획은한국미술품의은은하고동양적인색채와일민미술관이운영되는 동아일보옛사옥의근현대적인색채를복합적으로가져온다. 또한미술품과전시포스터가상대적으로눈에더 잘띄어야하는미술관웹페이지의특성을고려하여전반적인색채계획을저채도의은은한분위기로구성하였다.
Ilmin Museum of Art prototype web(1024 x 1700px) & wide (1025px ~) tablet(768 x 1600px) mobile(600 x 1600px) 1024 x 25px gnb영역 768 x 25px gnb영역 600 x 25px gnb영역 1024 x 50px lnb영역 768 x 50px lnb영역 600 x 50px lnb영역 1024 x 150px 1024 x 150px 600 x 150px fulldown_menu fulldown_menu fulldown_menu 682 x 430px 메인비쥬얼 342 x 280px 768 x 430px 600 x 430px 일민타이틀 메인비쥬얼 메인비쥬얼 342 x 150px 342 x 280px 342 x 200px 휴관여부, 일정안내 일민타이틀 휴관여부, 일정안내 전시안내 A 341 x 341px 341 x 341px 342 x 341px 전시안내 A 전시안내 B notice 전시안내 A 전시안내 B 전시안내 B 341 x 341px 341 x 341px 342 x 341px 전시안내 C 전시안내 D event notice 전시안내 C notice 341 x 341px 341 x 341px 342 x 341px cafe ima 기둥서점 출판 / 아카이브 전시안내 D event 1024 x 172px 푸터 전시안내 C cafe ima 기둥서점 header detail 768 x 172px 출판 / 아카이브 전시안내 D 일민미술관일민문화재단신문박물관 LOGIN JOIN SNS ENG 로고 VISIT EXHIBITION PROGRAM ARCHIVE SEARCH 768 x 172px 푸터 방문안내 현재전시 전시연계 전시도록 *hover 시서치영역슬라이드 * 현재전시관련이미지 미술관소개카페 / 서점오시는길 지난전시 전시계획 역자후기작가소개큐레이터렉쳐워크숍 일민시각문화 다큐멘터리 event footer detail 일민미술관 서울종로구세종대로 152 세종로 139-8 일민미술관 02-2020-2050 대표이사사업자등록번호통신판매업신고번호 문의전화이메일인증관련내용 sns icon 푸터 회사소개이용약관개인정보처리방침청소년보호정책제휴 / 프로모션문의이메일주소무단수집거부파트너센터사업자정보확인