우리가 대학에 대해 궁금한게 생기면 먼저 웹사이트를 들어가본다. 나 또한 학교 알아보려고 할 때 대학 웹사이트를 많이 들어가보는데, 너무 복잡하고 디자인이 별로라 첫 인상이 너무 안좋아지고 기분이 팍 상해버린(?) 경험이 꽤 있었다. 그런만큼 요즘에는 모바일 환경에 대응하기 위해 대학이나 연구실 홈페이지를 대부분 반응형으로 구성하고, 또 그 속에 다양한 디자인 요소를 넣어서 사용자 경험을 끌어올린다. 이때까지 본 대학 홈페이지 중에, i) 디자인 그리고 ii) 아이디어의 참신함 측면에서 (아주 주관적으로) 뛰어난 홈페이지 몇가지를 골라보았다.
Monash University, Australia
예전에 호주에 잠시 살 때, 나랑 같이 룸메를 하던 형이 다니던 모나쉬 대학교. 멜버른 시티에서 트레인으로 대충 1시간 거리의 Clayton에 소재하고 있는데, 호주 내에서도 ANU, 멜번대와 함께 최고 수준의 대학으로 평가받는 곳이었다 (TMI).
사실 이 홈페이지는 색 조합도 편안하고 자연스럽지만, 그것보다도 DESKTOP 사진에 보이는 저 쿠키 설정창이 너무 문화충격이어서 좋은 웹사이트로 꼽아보았다. 사실, EU와 같이 온라인에서 나름 급진적인 정책을 펼치는 집단은 웹사이트가 쿠키를 수집하려면 이렇게 동의를 강제한다. 하지만, 대부분의 경우에선 ‘우리는 쿠키를 수집하니까, 불만 있으면 사용하지 마. 만약 우리 홈페이지를 사용하면 그건 동의한걸루 간주할게’ 식으로 넘겨버린다. 만약 동의를 받더라도 모든 종류의 쿠키를 단 하나의 ‘동의’를 받는 방식으로 하는데, 이 홈페이지에서는 총 4가지 목적으로 나눈 뒤 (필수 기능, 개인화, 분석, 그리고 광고), 사용자가 선택적으로 동의할 수 있게 하였다. 사실 쿠키 동의 화면은 사용자에게는 조금 귀찮은 요소일 수도 있는데, 쿠키 화면을 이렇게 사용자 친화적인 요소로 만드는 것을 보면서 모나쉬의 웹사이트는 되게 창의적이고 privacy에 민감하다고 생각했다. 쿠키 동의여부를 물어보는 경우가 드문 우리나라에선 좀처럼 보기 힘든 서비스 기획이다.
또한, 또 하나 흥미로운 디자인 요소가 있었는데, 바로 대학의 트위터 계정에서 올린 post를 real-time으로 쏴주고 여기서 사람들의 conversation을 유도하는 것이다. 사실 대학 사이트의 기본 목적은 정보를 전달하는 거라 대부분 static한 정보를 제공해주고 거기에 추가적으로 공지사항 몇개 띄워주는 식으로 update하는게 대부분인데, 모나쉬의 홈페이지에선 사람들의 참여를 유도하는 요소가 있는게 너무 신기했다.
Aalto University, Finland
유럽에서 HCI 연구로 꽤나 유명한 핀란드의 알토대학교. 디자인을 처음 보고, ‘와 노란색을 어떻게 저렇게 자연스럽게 녹여내지?’라는 생각이 처음으로 떠올랐다.
사실 유채색은 어느 디자인에서나 적용하기가 꽤나 힘들다. 잘 적용하면 브랜드 아이덴티티를 아주 잘 전달할 수 있지만, 자칫하다간 디자인이 정말 촌스럽게 변하기 때문이다. 특히 예전에 빨간색을 베이스로 한 애플리케이션 디자인을 한 적이 있었는데, 너무 강렬해서 적절한 색 조합을 찾는게 매우 어려웠다. 그런데 이렇게 background는 흰색으로 설정하고, navigation bar의 검색 부분에 살짝 노란색으로 포인트를 주고, 메인에 비대칭의 text box를 노란색으로 배치하니 너무 조합이 잘 맞고 신선하다고 느꼈다.
게다가, 검색 버튼을 누르면 Android 휴대폰의 그것을 누를 때랑 비슷한 확산 애니메이션이 등장한다. 우리 학교 홈페이지는 언제쯤이면 이런 급진적인 디자인을 시도해볼까?
다만 아쉬운 점은, 아무래도 웹을 반응형으로 만들다 보니 휴대폰 스크린에서는 그냥저냥한 디자인이 돼버렸다 (물론 이것마저 디자인이 전혀 어색하진 않다).
MIT Media Lab, United States
몇 개월 전, 꿈의 학교, MIT 미디어랩의 웹사이트를 한번 들어가봐야 겠다는 생각이 들어서 한번 들어가봤다. 그런데 다음과 같은 이유로 엄청나게 충격적이었는데…
1. Branding: Identitiy design
먼저, 미디어랩의 로고는 저렇게 정방형에 L + 시계방향으로 45도 돌린 M으로 이루어져 있다. 처음에 ‘와 아이디어 좋다’라고 생각을 했는데, 미디어랩 내의 분야를 소개하는 홈페이지를 보고는 더 충격이었다. 저런 형식으로 모든 연구그룹의 로고를 다 만든 거였다!! 예를 들어, Hiroshi 교수로 아주 유명한 Tangible Media 그룹의 로고는 각 단어의 첫 글자인 T, M으로 정방형의 로고를 구성하였다. 아주 간단한 디자인이지만, 일관되게 디자인을 하기 위하여 이런 디자인 사고를 한다는 것이 너무 충격적이었다.
실제로 이게 뛰어난 디자인의 예시인지 너무 궁금해서, 이걸 보고 며칠 있다 디자인을 전공하는 친구를 만나서 이 디자인에 대해 물어보았다. 그 친구는 이게 Identity Design의 아주 좋은 예시라며, 단순하면서도 본인들의 정체성을 전달하기 위해 정말 머리를 쓴 흔적이 보인다고 말했다. 휴, 나만 이쁘다고 생각한게 아니구나.
2. Search bar
일반적으로, 대학 웹사이트와 같이 많은 정보를 제공할 경우 서치바를 제공하여 사용자가 검색할 수 있게 한다. 하지만, (대부분의 경우에는 검색도 잘 안되지만) 오른쪽 상단에 조그마하게 숨겨져있고, 검색 범위도 잘 알려주지 않는 경우가 대부분이다.
미디어랩의 웹에서 가장 이쁘다고 느낀 것은, 수십개가 되는 그룹을 일렬로 나열하는 것으로 모자라 이렇게 인터랙티브하게 검색할 수 있게 한 것이었다. 특히, “We are an interdisciplinary research lab working to invent the future of # ~~~”라는 포맷을 제공하여, 해당 서치바에서 어떤 내용으로 검색할 수 있는지를 얄려주는 placeholder 느낌으로 구성하여 너무 신기했다 (근데 이상한게 원래는 antidisciplinary였는데 단어가 바뀌어있넹).
이렇게 디자인과 기획 아이디어가 뛰어난 몇가지 홈페이지를 알아보았다. 개인적으로는 웹사이트가 괜찮다는 느낌을 주려면 다음과 같은 기준을 만족해야 하는 것 같다.
- 디자인이 플랫할 것
- 반응형일 것
- 인터랙티브한 요소가 하나 이상 있을 것
그렇다면, 우리의 자랑스런 모교 서울대의 홈페이지는 어떨까?
Seoul National University, Korea
그렇다고 한다.
(디자인이 별로인건 그렇다고 치더라도, 요즘 세상에 반응형 웹이 아닌건 너무하지 않나 ㅠㅠ 오히려 단과대 홈페이지가 더 이쁜게 너무 아이러니…)