사이트내시경이라는 항목을 생성하고 첫째로 필자가 많은 도움을 얻은 대류커뮤니티를 먼저 살펴보았는데 아직 작성 초기단계라 어떤 식으로 구성해야할 지 방향을 잡지 못한 상태이나 진행해 나가며 조금씩 다듬어 나가겠습니다. 어색한 부분은 이해해주세요.^^;
보면 볼수록 상상이상 - 대류커뮤니티편
필자가 대류커뮤니티를 알게 된 것은 2004년 7월 경이다. 2003년 1월 18일에 오픈하여 햇수로 3년을 맞이한 대류커뮤니티는 해 년마다 한번씩의 리뉴얼을 거쳤으며 현재 사용되는 것은 3번째 Version이다.
대류라는 닉네임은 당시 자주 가던 nzeo에서 몇 번 본 적이 있었고 우연한 기회에 그의 사이트를 접한 후 깔끔하고 잘 정돈된 깨끗한 인상을 받은 기억이 난다.
그 뒤로는 정말 한 번도 빠지지 않고 하루에도 몇 번씩이나 그의 사이트를 찾는 단골손님이 되었다.
사이트를 둘러보기에 앞서 대류커뮤니티의 주제와 목적에 대해 알아보자.
대류커뮤니티는 03년 초기취지인
'초보들을 위한 웹사이트제작팁공유'가 주제이며 사이트를 제작함에 있어 한가지 팁을 얻기 위해 수많은 사이트들을 돌아다니는 수고를 덜기위해 알짜팁들을 알기쉽게 재구성하여 초보에게 제공하는 목적을 가지고 있다.
그리고 버전업을 하면서 점점 개인사이트로서의 성향이 짙어지고 있는데 이번 V3에서는 제작자의 공간이 더욱 커진 듯 하다.
대류커뮤니티 V3을 살펴보면서 느낀 점 하나는 '대류커뮤니티는 사용자를 실망시키지 않는다'는 것이다.
제작자가 User Interface:사용성(이하 UI)에 대해 나름대로의 공부를 했는 지는 알 수 없지만 제작자가 깔끔한 성격이라 그런지 사이트의 모든 요소는 정갈하게 자신이 있어야 할 곳에서 자신의 역할을 충분히 감당하고 있다.
상단 탑부분 주메뉴와 왼쪽상단의 서브메뉴의 위치선정은 사용자의 기본적인 감각에 충실히 따르고 있다.
주변의 사이트를 둘러보다 보면 가끔 사용자들을 의아하게 만드는 요소들을 접할 수 있는데, 예를 들어 사용자가 사이트의 로고를 클릭하면 메인화면으로 이동할 것이라는 생각을 가지고 쥐누름을 했지만 실제로는 로고에 링크가 걸려있지 않은 경우가 있다.
텍스트링크도 마찬가지.
사용자가 커서를 갔다대었을 때 링크가 걸려있다는 느낌을 이왕이면 확실히 갖게 하여야 한다.
대류커뮤니티는 V3으로 업그레이드하면서 CSS문서를 대폭 수정하였는데 그 중 하나는 마우스 오버 시 링크에 밑줄을 긋게 하여 확실한 링크를 확인할 수 있다는 것이다.
예전에는 미관상 좋지 않아서 인지 Underline효과가 있는 사이트는 찾아보기 힘들었지만 요즘은 거의 모든 사이트의 링크에 밑줄이 가는 것을 볼 수 있다.
'모든 링크는 파란색이어야 한다'는 UI의 대가 제이콥닐슨의 말에 반드시 따라야 할 이유는 없지만 조금의 불편함도 허용하지 않는 사용자를 1초라도 자신의 사이트에 더 붙잡아 놓기 위해서 사이트는 반드시 사용자의 입장에서 제작되어야 한다.
만약 그렇지 않고 조금이라도 UI를 고려하지 않은 사이트는 하나 둘씩 발걸음이 끊기게 될 것이다.
대류커뮤니티는 또한 빠른 로딩속도를 자랑한다.
처음 그의 미러사이트를 만들고 나서 필자의 사이트와 비교해보던 중 소스는 물론 모양까지 상단이미지의 차이외엔 다른 것이 없었음에도 대류커뮤니티는 누르면 거의 순간적으로 보여지는데 반해 필자의 사이트는 한참을 지나도록 모래시계만 떠서 답답했던 기억이 있다.
물론 그것이 게시물이미지를 썸네일로 표현한 것에서의 차이일 줄은 당시로선 전혀 알지 못했다.
사이트의 주요 최근게시물을 표현해 주는 메인화면에 텍스트링크만 있다면 왠지 사이트의 분위기는 밋밋해지고(하지만 나름대로의 정갈한 맛이 있다) 생동감이 부족하여 여러 사이트들은 대체적으로 한두군데 해당 게시물의 이미지파일을 추출해 내고 있다.
대부분의 사이트 속도는 이러한 부분에서 큰 차이가 난다고 본다.
이미지 하나의 크기는 평균적으로 볼 때 500~700KB정도인데 평균 4개정도만 불러온다고 해도 2MB이상의 부담이 사용자에게 돌아가고 뿐만 아니라 그 사이트의 운영자가 입주해있는 계정업체의 서버에도 심각한 부담을 안겨주게 된다.
이같은 형식의 이미지 추출은 크기만 줄여져서 출력되기 때문에 작은 크기의 이미지라도 용량은 그대로인데 반해 썸네일은 이미지자체를 지정한 크기에 맞춰 따로 생성하기 때문에 크기는 비교할 수 없을 정도로 줄여진다.
사이트가 어느정도의 속도를 유지하기 위해선 웹사이트를 구성하고 있는 한 페이지의 총 용량이 600KB를 넘지 않아야 한다고 한다. 필자는 언젠가 대류커뮤니티에서 가장 많이 불려지는 메인페이지의 총 용량을 계산해 본 적이 있다.
그 결과 메인페이지의 전체용량은 130KB가량이 되었다.
따로 계산해 보니, 상단메뉴부분이미지 12KB가량, 탑배너이미지 30KB가량, 그 외의 페이지를 구성하고 있는 기타 이미지등의 크기는 50KB정도에 썸네일로 추출되어진 몇 개의 이미지 용량은 30KB정도로 썸네일부분에서 이미지를 그대로 추출하는 사이트와 상당한 차이를 보이고 있다. 그 외의 기타 문서들의 크기 또한 100KB정도를 맴도는 수준이었다.
대류커뮤니티의 개성이 두드러지는 부분은 대류커뮤니티만이 가지고 있는 고유의 색상이 있다는 것이다.
대류는 사이트의 로고를 설명하며 검은색은 불투명한 미래를, 붉은 색은 대류 자신을 사랑하는 열정을 나타낸다고 말한다.
그의 사이트로고는 DaeRew의 영문 첫 글자 DR의 중간을 기준으로 각각 검은색과 붉은색으로 나누어 표현되어 있다.
이것은 대류커뮤니티에도 적용되어 메인컬러는 검은색으로, 링크는 또한 붉은 색으로 표현되었으나 텍스트링크부분은 검은배경에 적합치 않아서인지 이내 수정되었다.
그리고 각 페이지별로 인공적이지 않은 자신의 일상적인 모습이 들어간 독특한(?)이미지와 컬러를 사용하여 컨텐츠의 확실한 분류와 주목성을 꾀한 부분이 돋보인다.
사이트의 전체적인 구성을 살펴보면, 배경은 흰색과 회색등의 무채색계열을 공통적으로 사용하고 있으며, 흰색테두리로 경계부분을 처리한 사각형의 간단한 구성으로 심플함을 느낄 수 있다.
메인페이지는 전체적인 색상을 검은색으로 처리하여 무거운 느낌을 주지만, 로고에 사용된 영문대류문자의 금색과 더불어 사이트의 고급스런 분위기를 연출한다.
대체로 검은색을 사용한 곳에는 강한 메시지가 있다. 검은색이 가진 특징인 주목성을 강조한 메인이미지에는 운영자 대류 자신의 두 눈을 클로즈 업한 사진을 넣어 대류커뮤니티만의 강한 인상을 남기게 한다.
다음 메뉴의 시작인 대류공간부터 살펴보면, 시원하고 물이 흐르는 듯한 남국의 투명한 바다를 연상케 하는 청록의 색을 사용하여 '큰 흐름이 되어 뜻을 이룬다'는 운영자의 포부를 표현한 듯 하다.
포토갤러리의 메인색상은 자연을 닮은 색인 친근한 카키색으로 익숙한 느낌을 만들어 내고 있으며 운영자의 일상의 사진을 담는 공간이니만큼 향수를 불러일으키는 배색으로 자연스러운 분위기를 연출해 내고있다.
스크랩의 색은 갈색이다. 이러한 자연의 흙이나 나무 색의 배색은 사람의 마음을 안정시키는 가장 최적의 배색으로 꼽힌다. 갈색배색 시 채도가 낮은 배색을 할 경우 자칫하면 어두운 분위기가 될 수 있는데 적절히 높은 배색을 사용하여 가벼운 느낌이 나도록 표현한 것을 볼 수 있다.
웹스터디의 색은 빨강이다. 빨강색은 강렬하며 정열, 열정의 의미를 가지고 있다. 이 외에도 자극적이며 보는 이를 흥분시키는 힘이 있다. 그리고 탁월한 주목성이 있어서 지식을 공유하는 섹션이기에 사용자의 집중을 유도하는 효과를 얻을 수 있어 적절한 배색일 듯 싶다
자료실의 색상은 보라색이다. 선명한 톤의 보라색은 화려하고 강한 인상을 준다. 보라색의 세련된 이미지는 고급스럽고 간추려진 자료 선정의 이미지를 부각시키고 있다.
"남색은 보라색의 오묘한 이미지를 어느 정도 내포하고 있는 색으로 도시적인 세련미를 보여주며 심리적인 치유효과를 가지고 있어서 마음의 안정을 도와주고 창의력을 키워준다."
- '색깔있는 디자이너를 위한 웹컬러디자인'에서 발췌
대류커뮤니티에서 제공하고 있는 홈페이지제작서비스의 메인색상은 남색이다. 신뢰를 의미하는 파랑색과 화려하고 강한 인상을 심어주는 보라색의 조합인 남색은 사용자로 하여금 신뢰감과 아름다운 디자인의 작품성을 느끼기에 충분하다.
커뮤니티섹션의 색상은 파랑색이다. 파랑색은 초록색과 더불어 웹 사이트 뿐 아니라 여러 광고매체에서 가장 많이 사용되는 색 중의 하나이다. 물과 하늘의 맑은 이미지를 가지고 있는 파랑색은 매우 시원한 느낌을 주는데 파랑색이 가지고 있는 특유의 활동적인 이미지는 여러 사람의 의견교환이 이루어지는 만남의 장인 커뮤니티섹션과 부드럽게 조화되고 있다.
이상으로 대류커뮤니티에 대해 간단하게나마(?) 알아보았다.
필자가 처음 방문했던 7월이후로 대류커뮤니티는 운영자의 사이트에 대한 변치않는 애정으로 꾸준히 업데이트되어 왔고 기능면, 디자인면에서도 항상 '어제와 다른' 모습을 보여주었다.
다만 지금은 작성초기단계라 진행방향이 분명치 못하고 필자의 글능력이 부족하여 대류커뮤니티의 가능성을 보다 깊게 살펴보지 못한 안타까움이 남는다.

drcV3_050119.jpeg (162.7 KB)