매뉴얼 웹사이트 리뉴얼

2016/2/21

매뉴얼 웹사이트를 오랜만에 리뉴얼 했습니다. 이번 리뉴얼의 초점은 무엇보다 모바일 최적화입니다. 경험을 통해 보면 요새는 모바일의 웹사이트 접속빈도가 데스트탑을 넘어서는 것 같습니다. 심지어 하나의 웹사이트를 구축한다고 가정하면 데스크탑보다 모바일에 최적화해서 만드는 것이 더 나아보이기도 합니다.

 

 

manual-mobile-view

 

 

모바일 최적화

모바일로 매뉴얼 웹사이트를 접속하면 위와 같이 나타납니다. 처음 만나는 사이에 마치 명함처럼 첫 페이지에서 연락에 필요한 정보만을 간략하게 정리해서 노출한 것입니다. 배경에는 저희가 일상에서 찍은 사진을 배치하였습니다. 포트폴리오 이미지가 아닌 풍경 사진을 배치한 것은 우리의 디자인이 특별하기보단 일상의 평범함과 가깝고자 하는 태도 때문입니다. 그래서 일상의 사진에 우리의 컬러와 정보를 조합해 보았습니다. 참고로 사진을 손가락으로 스윽하면 바꿔볼 수 있습니다.

모바일 최적화는 생각보다 신경써야 하는 것이 많은데, 이를테면 기기마다 특성이 달라서 디자인이 조금씩 차이가 납니다. 그리고 화면의 크기가 데스크탑보다 작다보니 데스크탑의 인터페이스를 그대로 사용하려고 하면 불편해지기도 합니다. 사용성이 안 좋아지는 것이죠. 예를들어 contact 페이지의 구글지도는 데스크탑에서는 편리할 수 있으나, 모바일기기에서 보기에는 작고 조작하기 불편합니다. 그래서 데스크탑에서는 구글지도를 그대로 사용하고, 모바일에서는 링크 방식으로 컨텐츠를 변경하였습니다. 더구나 지도의 경우 대부분 모바일기기에 앱으로 설치되어 있고, 이런 기능은 전용앱으로 실행하는 것이 모바일 환경에서는 좀 더 편리하고 효과적이기 때문입니다.

 

 

기능 개선과 아이덴티티

이번 리뉴얼을 하면서 신경 쓴 또 다른 포인트는 콘텐츠 보강, 사용성 증가입니다. 디자인에 있어서도 좀 더 매뉴얼다운 웹사이트로의 변신도 포함되어 있습니다. 먼저 인스타그램과 블로그 형태의 article 메뉴를 추가하여 기존보다 저희에 대한 다양한 소식을 알리고자 하였고, 포트폴리오가 늘어남에 따라 각 프로젝트를 구분해서 볼 수 있도록 필터링 기능(포트폴리오 페이지의 오른쪽 중간)을 추가하였습니다.

 

 

filter

 

 

포트폴리오나 article의 상세페이지에는 스크롤을 내렸을 때만 이전이나 다음 컨텐츠로 이동할 수 있는 버튼이 나타나도록 하였는데, 이렇게 하면 컨텐츠를 보는데 조금이라도 집중할 수 있고, 현재 컨텐츠를 보기 이전에 바로 다른 컨텐츠로 넘어가는 것을 방지할 수 있습니다. 하지만 때론 다른 컨텐츠로 바로 넘어가길 바라는 유저도 있을 수 있기 때문에 컨텐츠가 보여지는 직후에는 버튼을 보이도록 하였습니다. 모바일에서는 버튼이 바로 보이도록 했는데 화살표와 테두리의 정렬이 안 맞고 있습니다. 개선해 나가야지요. 후훗

사이트 디자인은 깔끔한 흰색을 바탕으로 아이덴티티 강화의 일환으로 녹색 컬러를 곳곳에 배치하였습니다. 반면 로고의 노출은 메인페이지로 제한해뒀는데, 이는 로고가 계속해서 노출되는 것은 컨텐츠를 읽는데 부담이 되는 것 같았기 때문입니다. 그런데 이렇게하면 아이덴티티 강화와는 반대로 되는 것 같아서 좀 망설여졌습니다. 일을 하다보면 가끔 논리적 일관성과 그냥 하고 싶은 개인적인 바람이 부딪히는 경우가 있는데, 이번에는 개인적인 바람을 선택했습니다. 서체는 기존에 sans-serif 계열에서 serif 계열로 바꿨는데 특별한 이유는 없고, 구글폰트에서 이것저것 써 보다가 예쁘길래 이참에 ‘바꾸자’ 해서 한 동안 사용해보려고 합니다. 참 한글에 사용된 서체는 타입스퀘어에서 제공하는 무료 웹폰트(산돌 명조네오 1)를 사용하였습니다.

 

 

about article contact

 

틈나는대로 신경써서 만들었는데, 해 놓고 보니 개선해야 할 부분들이 또 보입니다. 왜 일이 끝나지 않는지 의문입니다만 한편으로 일단 오픈 해뒀으니 뿌듯하기도 하네요 . 앞으로 이루어지는 개선에 대해서는 꾸준히 기록을 남길 생각입니다. 웹을 만들면서 가지고 있는 하나의 생각은 웹은 상당히 기능적인 매체라는 것입니다. 디자이너가 디자인을 참고하기 위해서가 아닌 다음엔 단순히 디자인이 예뻐서 웹사이트를 방문하는 경우는 많이 없다고 봅니다. 찾고자 하는 정보를 바로 찾을 수 있는지, 속도는 빠른지, 인터페이스가 헷갈려서 불편한 부분은 없는지 등을 우선 고려하여 웹사이트를 만드는 것이 좋은 디자인 행위가 아닌가 생각됩니다. 이런 생각을 기반으로 매뉴얼 웹사이트를 만들었고 또 저희가 하는 디지털 작업들도 그렇게 만들어 왔습니다. 앞으로 이런 부분에 대한 글도 종종 업데이트 하려고 하면서, 이 글은 여기서 줄입니다. 감사합니다.