웹 디자인, 온라인에서 기관을 건축하다.
Web Design, Build on Online.
작년 한 해는 코로나의 여파로 많은 기관이 온라인 행사를 진행했다.
지금까지 기관의 첫인상이라고 생각되는 것이 물질적으로 건축된 건물이었다면, 이제는 온라인에서 ‘건축’된 웹사이트가 그 역할을 차지하게 되었다. 2020년 대한민국 농업박람회도 마찬가지이다. 지난 박람회는 코로나19로 인해 전면 온라인으로 진행되었다. 관람객이 직접 현장에 참여할 수는 없지만 편리하게 구성된 웹사이트 화면으로 주목받았다. 박람회의 주제인 농업의 현재와 미래를 상단 메뉴바에 카테고리화해서 웹사이트 사용자들이 핵심적인 콘텐츠에 쉽게 접근할 수 있도록 구성되어 있다.
이렇듯 웹사이트를 기획할 때 가장 중요한 첫 번째 순서는 웹사이트를 만드는 기관이 보여주고 싶은 부분과 사용자들이 궁금해 하는 부분을 정리하는 것이다. 해당 웹사이트에 접속하는 사용자들이 그 기관에 대해 알고 싶었던 정보를 얻고, 기관이 사용자에게 주고자 했던 브랜드 이미지까지 받아 갔다면 그 웹사이트의 기획은 성공이라고 볼 수 있다.
웹 디자인은 어떻게 진행될까? 크게 기획, 디자인, 웹 개발, 출시(Launching)로 이루어진다. 기획 단계에서는 전체 흐름과 구조를 설정하는데 이때 사용자 동선을 결정하는 Site map이 구성된다. 훌륭하게 기획된 웹사이트는 사용자가 거치는 동선과 기획자가 중요하게 생각하는 정보의 우선순위가 일치한다. 다음 단계는 디자인이다. 기획에서 정한 방향성을 바탕으로 비주얼(Visual)을 제작하는데 와이어 프레임(Wire-frame)으로 일차 제작이 된다. 이 과정에서 구조화에 대한 부분이 충분히 논의되면 실제 UI 제작으로 이어진다. 이후 기획과 동일하게 웹사이트를 구동시킬 수 있도록 코딩 작업이 진행된다. 위 과정을 통해 웹 개발이 완료되면 사이트를 출시하게 된다.
웹사이트를 제작할 때 반응형 웹사이트로 기획하는 것이 일반화되고 있다. 이제는 웹사이트에 접속하는 주 채널이 데스크톱에서 핸드폰으로 옮겨갔다는 것에 누구나 공감할 것이다. 가로형 비율에 맞추어진 웹사이트보다는 한 손가락으로 가볍게 스크롤 할 수 있는 모바일 화면이 대세가 되었다. 모바일 환경에 맞춘 것이 사용자들에게 더 많이 노출되는 웹사이트의 형태가 된 것이다. 세로형 화면에 배열된 정보들의 강점은 수직으로 스크롤할 때 우선순위를 적용하여 메인 정보에 집중시킬 수 있다는 점이다. 그러나 이런 강점이 동시에 단점으로 작용할 수도 있다. 핸드폰은 마음대로 스크롤이 용이한 만큼, 해당 웹사이트의 정보가 사용자의 시선을 잡지 못한다면 쉽게 스쳐지나가게 된다. 일반적인 데스크톱보다 사용자가 머무르는 시간이 줄어들 수 있는 것이다.
코로나19로 대면이 힘들어진 상황에서 웹사이트는 기관의 첫인상을 결정하는 중요한 요소가 되었다. 핸드폰으로 검색해서 들어가는 웹사이트의 첫 화면이 그 기관의 첫인상이 되는 시대가 온 것이다. 그래서 어느 때보다 웹사이트에 대한 디자인 기획 및 구성이 중요해졌다. 실제로 그 기관이 혁신을 이끌며 빠른 행정 체제로 사람들에게 유익함을 주는 곳이더라도, 웹사이트의 접근성이 떨어지고 UX가 불편하게 구성되어 있다면 좋은 이미지를 남길 수 없다. 이로써 사람들이 그 기관에 대해 답답하고 느리고, 똑똑하지 못하다고 느낄지도 모른다.
*와이어 프레임(Wire-frame): 철사를 이어 만든 뼈대라는 뜻으로 웹 디자인에서는 선과 간단한 표현으로 구성을 보여주는 형태를 의미한다.
글 newlooks
