디자이너들이 웹 디자인 시 알아야 하는 것 1
디자인과 졸업전시를 개발+디자인하며 느낀점 1편
사라져 버린 오프라인 졸업전시...
올해는 정말 이례적인 일이 많았던 것 같다. 지금은 언텍트사회에 적응이 되어 행사가 언텍트로 열리는 것에 대해 새롭지 않지만 초기에는 연례행사가 사라진다는 것에 대해 많은 아쉬움이 있었다.
by 마이멜로디디자인과의 하나의 통과의례 같던 오프라인 졸업전시가 사라지고 그 빈자리를 온라인 졸업전시가 매웠다. 원래 하는 1학기 졸업전시 보다 오픈 예정일이 늦어진 감이 있었는데, 이는 졸업전시를 언제 할 것인가를 정할 때 코로나의 눈치를 보고 있었기 때문이다. 눈치를 보아하니 오프라인 전시는 어려울 듯하고, 이렇게 된 이상 온라인 졸업전시를 해야 하는데 코로나 때문에 전시를 언제 할지를 두고 고민하느라 시간도 많이 지났다.
눈치 보느라 늦어진 졸업전시는 급한 준비 기간으로 돌아왔다. 사이트의 개발 기간은 한 달이었고 디자인 기간은 약 2주였다. 이런 상황에서 불행인지 다행인지 나에게 졸업 전시 사이트를 개발할 수 있는 기회가 주어졌다.
웹사이트 디자인에 참여하는 동시에 프런트엔드 개발을 하였다. 하지만 짧은 기간으로 인해 많은 분들의 의견을 다 수용하지 못하고, 함께 완성도를 높여가는 기간이 없었던 것이 아쉬움으로 남는다.
구현하는 입장에 있다 보니 이런저런 내용을 신경 써서 디자인을 해야 한다고 팀원 분들께 말씀드린 부분이 몇 가지 있다. 또한 디자인 초기부터 이런 부분을 차마 생각하지 못해서 개발을 하면서 수정한 내용도 있다. 그 내용과 경험이 처음 웹 디자인을 하는 분들께 도움이 될까 하여 글로 풀어 보고자 한다.
1. 웹은 반응형으로 만드는게 좋아요
구글 애널리틱스 - 사이트 접속 현황많은 사람들이 데스트톱이 아니라 모바일로 사이트를 접근한다. 이런 경향은 디자인과 졸업전시도 벗어날 수 없다. 위 사진은 이 졸전 사이트의 구글 애널리틱스 분석 결과이다. 구글 애널리틱스를 통해 얼마만큼의 인원이 어떤 경로로 사이트에 들어왔는지, 접근한 기기는 무엇인지 알 수 있다. 사진을 보면 모바일로 웹사이트를 보는 비율이 67.2%로 압도적으로 많다. 데스크톱으로 사이트를 보는 사람의 약 2배 이상의 인원이 모바일로 졸업전시 사이트를 봤다는 뜻이다.
사람들이 처음 이 웹을 만났을 상황을 한번 상상해 보자, 아마 이 사이트에 접근하는 대다수의 사람들은 어디에선가 추천을 받고 들어왔을 것이다. 친구에게 졸전을 보라고 카톡을 받았을 수도 있고, 인스타그램, 혹은 트위터에서 졸업전시 소개를 보고 웹사이트를 접하게 되었을 수도 있다. 이렇게 예시를 든 사이트를 주로 어떤 기기로 접근하고 있는지 생각해 보면 데스크톱보다는 모바일이 먼저 떠오를 것이다.
타 모바일 앱을 통한 접근이 우세한 분위기에서 모든 뷰를 데스트톱에서만 볼 수 있게 하는 것은 유저의 이탈을 이끄는 방향이다. 인스타나 트위터, 페이스북 등에서 사이트에 유입된 사람들의 사이트의 첫인상은 모바일 뷰로 형성된다.
주변에 웹사이트 경험에 대하여 물어봤을 때, 일단 추천을 받자마자 모바일로 한번 웹사이트에 들어와 훑어보고, 볼만 하다고 생각되면 시간이 있을 때 웹 접속을 하여 사이트를 보는 경우가 많다는 사실을 알게 되었다. 반응형 웹은 사이트에서 그냥 있으면 좋고 없어도 상관없는 하나의 부가적인 기능이 아니라 현대 웹이라면 필수적으로 갖춰야 할 기본이 되어 버렸다. 보통 웹사이트를 제작한다고 하면 웹 디자인을 어떻게 할지 먼저 고려하지만 오히려 모바일 경험을 우선적으로 생각해야 한다.
2. 가변적인 영역을 신경 써 주세요.
디자인을 깔끔하게 유지할 수 있는 적절한 텍스트의 양이 있다. 시안으로 볼 때 딱 아름다운 텍스트의 정도. 실제 서비스의 UI 디자인에 익숙하지 않은 경우에는 샘플 텍스트 얹었을 경우 보기 좋은 레이아웃을 잡기 쉽다. 하지만 그래픽 디자인을 하는 것과 다르게 인터페이스 디자인은 텍스트의 양이나 이미지가 가변적이기 때문에 변하는 부분의 디자인을 어떻게 해야 할지 신경을 써야 한다.
시안을 시안에만 그치게 해서는 안된다. 디자인이 프로덕트 레벨로 가기 위해서는 발생할 수 있는 다양한 상황에 대한 고려가 필요하다. 또한 동시에 디자인을 하며 디자인이 과연 사용하기 괜찮은 UX를 제공하는가를 생각해봐야 한다.
사이트를 사용하는 사람들은 말도 안 되게 짧은 텍스트를 넣을 수도 있고, 반대로 엄청 긴 텍스트를 넣을 수도 있다. 디자인을 손상시키지 않기 위해 이런 경우를 다 포용할 수 있는 디자인을 해야 한다. 또한 글자 수를 어디까지 허용할 것인지, 최소 글자 수는 몇 자로 정할 것인지, 사람들이 글자를 아예 쓰지 않았을 경우를 허용할 것인지 말 것인지... 등등 발생할 수 있는 경우의 수를 생각해가며 단순히 화면만 그리는 것이 아니라 정책까지 디자인해야 한다.
3. 폰트는 웹폰트를 사용할 수 있는 것으로 지정해 주는게 좋아요.
otf나 ttf파일을 다운로드하면 사용할 수 있는 컴퓨터의 시스템 폰트와는 달리 웹사이트의 폰트는 어디에선가 불러와서 사용해야 한다. 가장 대표적으로 구글 웹폰트를 CDN으로 불러와서 사용하는 방식이 있다.
무료로 웹폰트를 사용할 수 있는 google fonthttps://fonts.google.com/?authuser=1
기존 웹폰트를 제공하는 서비스에서 제공하지 않는 특이한 폰트를 사용하고 싶다면 서버에 폰트를 올려서 서버에서 폰트를 불러와야 한다. 안타깝게도 한 번에 모든 브라우저를 커버하는 폰트 파일 형식은 없다. 다양한 형식의 폰트 파일(ttf, woff, eot...)을 서버에 올려야 하는데 이러한 여러 종류의 폰트 파일을 제공하는 폰트가 아니라면 적용이 힘들다.
폰트의 라이선스 또한 신경 써야 하는 부분이다. 라이선스가 해결되지 않은 폰트를 사용했다가는 웹 전체를 그냥 내려야 하는 상황이 발생할 수도 있으므로 디자인에 사용하고 싶은 폰트의 라이선스 범위가 어디까지인지 확인이 필요하다.
이 글은 2편으로 이어집니다.
