마을예술창작소 웹사이트 리뉴얼, 서로맑음 스튜디오와 함께한 작업물입니다. 마을예술창작소는 장소 및 행사 등을 지원하여 예술가들의 소모임을 장려하는 단체이다. 국내에 수십개가 이 마을예술창작소의 도움을 통해 유지되고 있다.기존의 웹사이트가 커뮤니티 형식의 기능을 수행하고 있어 사용에 불편함이 많았다. 그래서 새 웹사이트로 리뉴얼하며 웹진 혹은 블로그 형식의 사이트로 새로 기획하였으며마을예술창작소를 더 재미있게, 쉽게 알릴 수 있도록 캐릭터를 함께 제작하여 진행하였다.마을예술창작소에서 진행하는 활동들을 더 극대화하여 알릴 수 있도록 메인페이지부터 캐러셀을 활용하였고 마우스오버상태, 로딩중의 상태에도 마이크로 애니메이션을 통해 웹사이트를 이용하는 데에 재미를 주도록 하였다. 메인페이지에서 로고 시그니처의 심볼과 레터타입을 분리하여 글로벌 네비게이션 바(GNB)가 왼쪽 끝에 세로로 위치해있음을 쉽게 확인하도록 하였다. 단, 반응형 웹사이트으로 제작되었기 때문에 태블릿 이하의 화면에서는 익숙한 화면이라고 할 수 있는 위치에 GNB를 위치하였다.연재중인 웹진을 올리는 '웹진' 페이지에선 연도별로 필터링할 수 있도록 하였다. 기존 사이트에서 커뮤니티게시판이란 이름으로 사용하던 게시판은 '자료실' 이라는 이름으로 새로 바뀌어 사용할 수 있도록 하였다. 이 페이지들은 물론 자체적으로 관리자페이지를 제작하였고 관리자가 수정 및 삭제를 용이할 수 있도록 제작하였다. '마술소 찾기' 페이지에서는 구글 맵 API를 활용하였고 서울 곳곳에 위치한 마을예술창작소의 위치를 핀 형태로 제작하였다. 마우스를 올리면 툴팁(tooltip) 으로 마을예술창작소의 이름이 나타나며 클릭을 하면 팝업으로 해당 마을예술창작소의 정보, 이미지 등이 나타난다.마지막으로, 사이트가 제대로 작동되질 않았거나 잘못된 사이트로 이동했을 때 자동으로 리디렉션될 에러페이지 또한 구현하였다. 사용이 잘못됐을 때에도 피드백을 받아야한다고 생각했기 때문이며 다시 메인페이지로 이동할 수 있도록 하였다. Maeul Art Studio is an organization that encourages artists’ small gatherings by supporting spaces and events. Dozens of groups across Korea are sustained with its help. The previous website worked like a community board and was inconvenient to use, so the new site was planned as a webzine or blog, and a character was created so Maeul Art Studio could be introduced in a more engaging and accessible way. A carousel was used from the main page so the organization’s activities could be presented more fully, and micro-animations were added to hover and loading states to make the site more enjoyable to use. On the main page, the logo signature’s symbol and lettering were separated so it is easy to see that the global navigation bar sits vertically at the far left. Because the site is responsive, screens at tablet size and below place the navigation where users already expect it. The Webzine page, where ongoing issues are published, can be filtered by year. The board formerly called the community board was renamed Archive. An admin page was built for these sections so managers can edit and delete content easily. The Find a Studio page uses the Google Maps API and marks Maeul Art Studios across Seoul as pins. Hovering shows the name in a tooltip, and clicking opens a popup with information and images. An error page was also implemented so visitors are redirected automatically when the site fails or they land in the wrong place, and so they can return to the main page.
마을예술창작소 웹사이트 리뉴얼
마을예술창작소는 장소 및 행사 등을 지원하여 예술가들의 소모임을 장려하는 단체이다. 국내에 수십개가 이 마을예술창작소의 도움을 통해 유지되고 있다.기존의 웹사이트가 커뮤니티 형식의 기능을 수행하고 있어 사용에 불편함이 많았다. 그래서 새 웹사이트로 리뉴얼하며 웹진 혹은 블로그 형식의 사이트로 새로 기획하였으며마을예술창작소를 더 재미있게, 쉽게 알릴 수 있도록 캐릭터를 함께 제작하여 진행하였다.마을예술창작소에서 진행하는 활동들을 더 극대화하여 알릴 수 있도록 메인페이지부터 캐러셀을 활용하였고 마우스오버상태, 로딩중의 상태에도 마이크로 애니메이션을 통해 웹사이트를 이용하는 데에 재미를 주도록 하였다. 메인페이지에서 로고 시그니처의 심볼과 레터타입을 분리하여 글로벌 네비게이션 바(GNB)가 왼쪽 끝에 세로로 위치해있음을 쉽게 확인하도록 하였다. 단, 반응형 웹사이트으로 제작되었기 때문에 태블릿 이하의 화면에서는 익숙한 화면이라고 할 수 있는 위치에 GNB를 위치하였다.연재중인 웹진을 올리는 '웹진' 페이지에선 연도별로 필터링할 수 있도록 하였다. 기존 사이트에서 커뮤니티게시판이란 이름으로 사용하던 게시판은 '자료실' 이라는 이름으로 새로 바뀌어 사용할 수 있도록 하였다. 이 페이지들은 물론 자체적으로 관리자페이지를 제작하였고 관리자가 수정 및 삭제를 용이할 수 있도록 제작하였다. '마술소 찾기' 페이지에서는 구글 맵 API를 활용하였고 서울 곳곳에 위치한 마을예술창작소의 위치를 핀 형태로 제작하였다. 마우스를 올리면 툴팁(tooltip) 으로 마을예술창작소의 이름이 나타나며 클릭을 하면 팝업으로 해당 마을예술창작소의 정보, 이미지 등이 나타난다.마지막으로, 사이트가 제대로 작동되질 않았거나 잘못된 사이트로 이동했을 때 자동으로 리디렉션될 에러페이지 또한 구현하였다. 사용이 잘못됐을 때에도 피드백을 받아야한다고 생각했기 때문이며 다시 메인페이지로 이동할 수 있도록 하였다.
Maeul Art Studio is an organization that encourages artists’ small gatherings by supporting spaces and events. Dozens of groups across Korea are sustained with its help. The previous website worked like a community board and was inconvenient to use, so the new site was planned as a webzine or blog, and a character was created so Maeul Art Studio could be introduced in a more engaging and accessible way. A carousel was used from the main page so the organization’s activities could be presented more fully, and micro-animations were added to hover and loading states to make the site more enjoyable to use. On the main page, the logo signature’s symbol and lettering were separated so it is easy to see that the global navigation bar sits vertically at the far left. Because the site is responsive, screens at tablet size and below place the navigation where users already expect it. The Webzine page, where ongoing issues are published, can be filtered by year. The board formerly called the community board was renamed Archive. An admin page was built for these sections so managers can edit and delete content easily. The Find a Studio page uses the Google Maps API and marks Maeul Art Studios across Seoul as pins. Hovering shows the name in a tooltip, and clicking opens a popup with information and images. An error page was also implemented so visitors are redirected automatically when the site fails or they land in the wrong place, and so they can return to the main page.
- 기관/업체 웹사이트
