웹사이트 디자인을 처음 계획해보거나 리뉴얼을 생각하는 분들께 도움이 되는 글을 모았습니다. 웹디자인의 역사를 포함해 홈페이지 방문자 수를 늘리는 7가지 팁까지, 웹디자인에 대한 다양한 글을 읽고 웹디자인에 대한 이해를 높여보세요.



1. 짤방으로 이해하는 웹 디자인의 역사 


웹디자인의 역사는 어떻게 발전해왔을까요? 웹의 암흑기부터 반응형 디자인까지 거쳐온 웹디자인의 발전을 간단한 짤방으로 이해할 수 있습니다.


짤방으로 이해하는 웹 디자인의 역사 (→글 읽기)



2. 움짤로 이해하는 반응형 웹디자인의 9가지 요소 


반응형 웹디자인이라는 말 많이 들어보셨을 텐데요. 다양한 디스플레이 환경에 대응할 수 있는 반응형 웹디자인에 대해 정확히 이해할 수 있도록 돕는 글입니다. 아직도 반응형 웹디자인의 개념이 모호하다면 꼭 읽어보세요.



움짤로 이해하는 반응형 웹디자인의 9가지 요소 (→글 읽기)



3. 우리 홈페이지, 어떻게 만들어 활용할까? 


웹사이트 제작을 고민하는 분이라면 꼭 읽어 보아야 할 내용입니다.

1편은 웹사이트, SNS, 블로그 이 세가지 온라인 매체를 자세히 소개

2편은 온라인 콘텐츠의 성격과 순환구조, 특징에 따른 자원목록화(보유자원감사) 방법

3편은 웹사이트의 개발 및 운영에서 필수적으로 알고 있어야 할 사항을 설명합니다.



우리 홈페이지, 어떻게 만들어 활용할까? 

(→1편 읽기) (→2편 읽기) (→3편 읽기



4. 보기 좋은 약관이 읽기도 좋다. 


회원 가입이 필요한 웹사이트라면 약관은 꼭 필요합니다. 대부분의 약관은 지루하고 이해하기 어려운데요, 사용자의 입장에서 보기 좋고 이해하기 쉬운 약관을 보여주는 방법을 알아봅니다.



보기 좋은 약관이 읽기도 좋다. (→글 읽기) 



5. 기본에 충실한 웹 사이트 만들기, (사용자를) 생각하게 하지마!


사용자에게 친절한 웹사이트는 무엇일까요? 도서 ‘(사용자를) 생각하게 하지마’에 나온 웹사이트 메뉴 위치, 메뉴명, 태그라인 선정 방법에 대해 알아봅니다.



기본에 충실한 웹 사이트 만들기, (사용자를) 생각하게 하지마! (→글 읽기)



6. 홈페이지 방문자 수를 늘리기 위한 7가지 팁


모든 콘텐츠가 홈페이지에 드러나는 것은 좋은 방법일까요? 기업과 서비스의 철학과 메시지에 맞게 방문자가 흥미를 느끼고 다시 찾아올 수 있도록 하는 7가지 팁을 전합니다. 



홈페이지 방문자 수를 늘리기 위한 7가지 팁 (→글 읽기) 

Posted by slowalk

웹사이트를 제작하고 운영하면서 콘텐츠에 대한 중요성을 다시 한 번 강조하여도 부족함이 없습니다만, 좋은 콘텐츠를 보유하였더라도 이를 출판(발행)할 매체가 없다면 필요한 사람들에게 그 정보를 전달하기가 어렵습니다. 네트워크와 인터넷 기술의 발전으로 고전적인 HTML 문서를 게시하는 것부터 간편하게 스마트폰에서 업로드 할 수 있는 수많은 방법이 생겨났습니다.  


하지만 기관을 대표하는 공신력 있는 웹사이트를 제작하는 것은 단순한 SNS 페이지를 보유하는 것 이상으로 고려해야 할 사항이 많습니다. 이번 포스팅에서는 Mr.slo의 예시로 독립적인 웹사이트의 개발 및 운영에서 필수적으로 알고 있어야 할 사항에 대해 설명하도록 하겠습니다.



가상사례

A 기관의 담당자인 Mr.slo는 최근 신설된 A 기관의 온라인 마케팅 담당자로서 부임하게 되었습니다. 


<다양한 감정을 가진 Mr.slo>
출처:슬로데이 인스타그램


사회활동가로 일하던 Mr.slo는 혼자서 간단한 웹사이트를 만들어 운영해 본 경험이 있으며 자신의 블로그를 운영하고 있지만, 그저 단순한 자기 주변의 가십거리 정도를 올리는 용도로 사용 중입니다.


그에게 부여된 임무는 바로 ‘A 기관의 홈페이지(웹사이트)’를 만들어라 - 라는 것입니다. 일부의 정부 지원금과 지정기부금 단체로써 모금된 금액으로 운영되는 A 기관은 빠듯한 예산 중 일부를 할애하여 사업예산을 이미 책정해 둔 상태이고, 기관의 사업범위 중 온라인 마케팅과 관련된 부서나 협력업체 거래는 전혀 없는 상태입니다.


Mr.slo는 우선 사업진행을 위해 관련 업체를 섭외해 보기로 했습니다. '홈페이지 제작’으로 인터넷으로 검색하니 수많은 업체의 링크와 광고글, 블로그글, 까페글로 화면이 가득 차며 제각각 장점을 내세우는 문구들로 가득합니다. 몇 가지 글을 클릭해 읽어보다 도통 무슨 소린지 알 수 없는 내용을 반복적으로 읽다 지쳐 가장 위쪽에 있는 업체부터 클릭해 천천히 둘러보기 시작했습니다. 


다들 자신들의 방법론과 솔루션을 장점으로 내세우며 견적문의로 유도하는 구조 속에 몇 가지 업체의 사이트에 견적문의 글을 남깁니다.


"Q: 홈페이지 제작 견적 문의드립니다.

저희는 작은 NGO기관입니다. 현재 웹사이트는 없는 상태이며, 간단하고 심플하지만 기관을 잘 나타낼 수 있는 이미지와 추후 사업분야의 확장을 고려한 확장성 있는 형태의 웹사이트를 제작하고 싶습니다. 현재 예산은 X백만 원으로 책정되어 있습니다. 견적서와 작업일정을 알려주세요."


글을 남긴 뒤 몇 몇개 업체에서 답변 메일과 전화가 걸려왔고, 그중 몇 개의 업체로부터 최저금액과 최고금액의 차이가 10배 가까운 견적서들이 수신됩니다. 전화로 문의한 업체들은 기관의 규모와 ‘사이트맵’이 정해져 있는지, 홈페이지에서 원하는 기능들이 어떤 것인지를 물어봅니다. 그렇게 수집된 견적서들에는 50만원 부터 1000만원 까지 200배가 차이나는 가격이 적혀있습니다.  Mr.slo는 대체 이게 무슨 차이인지, 누가 사기를 치고 있는지 혼란스러운 와중에 얼마 전 S 에이전시와 웹사이트를 제작한 활동가 친구 B에게 이에 대해 문의를 하게 됩니다.



“대체 견적이 왜 이렇게 천차만별이지?"

일반적인 공산품과는 달리, 웹사이트는 기능과 구조, 그에 따른 운영 시스템에 따라 제작 및 운영에 드는 비용이 크게 달라집니다. 이를 결정하는 것은 제작하려는 웹사이트의 목적과 운영에 필요한 인적/물적 자원의 유무에 좌우됩니다.


기본적으로 고려해야 할 지점은 도메인 등록 및 연결 / 웹사이트 개발 / 웹서버 또는 웹호스팅 / 운영 및 유지보수 입니다.



도메인
웹사이트의 ‘주소'로써 물리적인 웹서버의 위치를 논리적으로 연결된 DNS를 사용해 접근할 수 있게 합니다. 예를 들어, '서울특별시 중구 태평로 1가 31번지’ 의 위치에 서울시청이 위치하지만, 사람들이 ‘서울시청’이라고 말하면 해당하는 위치를 떠올리고 찾아갈 수 있게 하는 것과 유사하다고 볼 수 있습니다. 국제 도메인(.com, .net 등)의 경우 국제 인터넷 주소자원 관리기관(ICANN)에서, 국적도메인(.kr, .co.kr 등)의 경우 한국인터넷정보센터(KRNIC)에서 등록/관리하며 개인이 직접 등록하는 것도 가능하나 그 절차가 복잡하고 다소 까다로워 등록대행업체를 이용해 년 단위로 임대하고 그에 대한 비용을 지불합니다. 

도메인은 무형 자산으로 취급되므로 등록 시 제작을 대행하는 에이전시나 업체의 명의로 등록하기보다 주관기관 명의로 직접 등록하여야 추후 발생할 수 있는 소유권 문제를 사전에 방지할 수 있습니다.




<IP주소와 도메인의 동작개요>
출처:KISA, KRNIC


웹사이트 개발

웹 브라우저가 인식할 수 있는 언어 또는 프로그램으로 웹사이트를 만들어 내는 일련의 과정으로 해당 분야에 지식이 있는 전문인력이 그 역할을 수행합니다. 일반적으로 개발작업은 투입인력과 투입시간에 비례하여 산정되며 복잡하고 어려울수록 비용이 증가합니다. 개발 단계는 개략적으로 ‘요건분석 > 기획 > 설계 > 디자인, 프로그램 개발 > 검수 > 납품’의 단계로 진행됩니다. 이 단계 중 기획-설계 부분에서 구축하려는 웹사이트가 가진 성격과 요구되는 기능/디자인의 요소를 정확하게 커뮤니케이션 하는 것이 중요합니다. 단순히 '있으면 좋겠다' 라는 생각으로 기능이나 페이지를 추가할 경우, 개발에 추가되는 비용뿐만 아니라 이를 운용함에도 물리적 비용뿐만 아닌 시간과 인적자원이 투입됨을 유념하여야 합니다. 


정해진 가격을 제시하는 아주 저렴한 웹사이트를 제작하는 업체의 경우, 본인들이 보유하고 있는 플랫폼 또는 무료로 제공되는 플랫폼 구조 속에 기관에서 제공되는 이미지(주로 로고나 활동사진)와 텍스트를 입수한 뒤 액자에 사진을 넣듯이 정해진 틀에 내용을 채워 넣는 식으로 작업이 이루어집니다. 필연적으로 제작에 필요한 기간 역시 짧은 편이며, 단순히 기관/단체의 연락처와 하고 있는 일 정도를 대외적으로 알리는 용도로는 부족함 없이 사용할 수 있습니다. 다만, 정해진 틀 이상의 작업을 고려하여 제작되지 않았으므로 추후 확장성에 매우 제한적인 단점이 있습니다.


웹호스팅
개발된 웹사이트가 언제나 사용자가 접근할 수 있도록 상시 전원과 인터넷 네트워크에 연결된 컴퓨터, 즉 웹 서버에 위치해야 합니다. 물론 집이나 회사에 서버를 설치하고 유지할 수 있으나 전원유지에 필요한 전기요금과 방열/방습 등 환경적인 요인, 그리고 정전 등의 불가피한 상황에서도 정상적인 서비스가 유지될 수 있는 웹서버/호스팅 업체의 서비스를 이용하는 것이 일반적입니다. 소규모 웹사이트의 경우 1대의 웹서버 자원을 모두 사용하지 않고 호스팅 업체에서 제공하는 서버의 일부 용량과 회선을 임대하는 월간 지불방식을 주로 이용합니다.

<충격과 공포의 구글 IDC 센터에서 서버를 관리중인 엔지니어>
출처: 구글 데이터센터


자료를 저장할 수 있는 용량인 HDD용량과, 하루 전송량이 제한된 경우 일일 트래픽(업로드+다운로드 합산)을 주의하여 계약해야 합니다. 저렴한 호스팅 서비스 중 일부는 제공되는 일간 트래픽 용량이 적어 웹사이트에서 제공할 콘텐츠가 대용량 자료일 경우 수 명이 여러 차례 다운로드 했을 때 일일 트래픽을 소진하는 시점부터 자정까지 해당 일의 웹사이트 접속이 차단되는 경우가 발생할 수 있습니다. 호스팅 계약 시 트래픽을 계산하는 기준이 보통 일 3Gbyte 와 같이 용량 단위로 측정이 되는데, 간단히 3Mbyte의 영상을 1000번 조회(또는 다운로드)했을 때 3000Mbyte = 3Gbyte 용량을 사용한다고 볼 수 있습니다. 이러한 방식을 고려하여 제공하려는 콘텐츠의 종류와 용량을 미리 파악하여 서비스를 선택합니다.


운영 및 유지보수 

개발이 완료된 웹사이트가 웹호스팅을 통해 사용자에게 상시 제공되도록 설정된 이후에 실질적인 웹사이트의 운영 시 발생할 수 있는 추가적인 작업에 대한 필요성과 웹사이트의 기능이 불가항력적인 이유로 인해 정상적으로 작동하지 않을 때 이를 위해 투입되어야 하는 물적/인적 자원 소요를 말합니다. 작은 기관과 단체의 경우 내부에 웹을 위한 별도의 디자인 인력이나 운영을 위해 교육된 개발자 인력이 부재한 경우가 대다수이므로 이에 대응하기 위해 허용된 자원범위 안에서 월간/연간 필요한 소요를 미리 산정한 뒤 이를 수행하는 것을 약속하는 형태로 유지보수의 계약이 이루어집니다. 

인지해야 할 점은 하자보수와 유지보수의 차이점입니다. 웹 개발계약서상에 약속한 기능과 형태가 정상적으로 구현되지 않았을 경우 이를 수정하는 작업은 통상 계약서에 명기된 하자보수 기간에 무상으로 제공되고, 계약 시 약속된 범위 이외의 필요기능이나 수정사항이 발생했을 경우에는 별도의 유지보수의 개념으로 취급되어 이에 대한 비용을 필히 염두에 두어야 합니다. 이러한 점 때문에 웹사이트의 개발 착수 전 사이트의 목적성에 대한 명확한 정의와 함께 이를 뒷받침할 수 있는 요구기능에 대한 정의와 분석, 그리고 그에 적합한 기능에 대한 개발요구가 선행되어야 합니다.


정리하며
웹사이트란 단순하게 보자면 정보를 담는 그릇과 같지만, 그 정보를 담고 효율적으로 전달하기 위해 디자인적인 요소뿐만 아니라 기술적 요소와 운영의 전략 등 많은 부분이 유기적으로 연결된 복잡한 구성체입니다. 다음 포스팅에서는 제한적인 자원을 기반으로 한 운영 목적에 따라 웹사이트를 구현하는 방식과 플랫폼을 선택하고, 이를 사용하는 방법에 대하여 알아보도록 하겠습니다.


더 읽기 > 우리 홈페이지, 어떻게 만들어 활용할까? 1편

            우리 홈페이지, 어떻게 만들어 활용할까? 2편


by 물범 발자국


Posted by slowalk

이 글은 디자인 에이전시 Digital Telepathy의 "7 Signs Your Website Design Is Bad for Business" 글을 "홈페이지 방문자 수를 늘리기 위한 7가지 팁"이라는 제목으로 번역하고 일부 수정하여 작성하였습니다.







하루에도 수십 개의 홈페이지가 개발됩니다. 살펴보면 비슷한 형태와 구성의 웹사이트들을 많이 볼 수 있습니다. 왜 그럴까요? 각 회사의 특징이 다를 텐데 말이죠. 다양한 프로젝트를 진행하면서 접하는 여러 클라이언트의 요구는 이렇습니다. 다양한 콘텐츠를 웹사이트 메인에 모두 드러내 주세요. 그렇다면 그 콘텐츠를 방문자가 다 읽어보고 클릭할까요?


"(사용자를) 생각하게 하지마!" 도서에는 이런 내용이 있습니다. 제작자는 사이트가 "훌륭한 작품"이 되기를, 아니면 적어도 '제품 안내책자'정도는 되기를 꿈꾸지만, 사용자는 우리가 만든 페이지를 "시속 95km로 달리는 차 안에서 보는 광고판"에 가깝다고 인식합니다. 그리고 실제 방문자가 페이지에 머무는 시간은 단 몇 초에 불과합니다."

(사용자를) 생각하게 하지마! 도서 후기 보러 가기>


그럼 방문자가 머무는 짧은 시간에 어떻게 흥미를 유발하고 결론적으로 다시 찾아오게 할까요? 홈페이지 방문자를 늘리는 7가지 팁을 살펴봅니다.



1. 회사의 장점이나 제공하는 서비스가 드러나는 맞춤 페이지를 만드세요.

서두에 짧게 언급하였듯이 회사마다 특징이 있지만, 그 특징을 잘 표현하지 못하는 경우가 많습니다. 서비스, 제품, 영업방식, 사내문화, 소통 등 각 회사의 특징에 집중하여 그 콘텐츠가 잘 드러나도록 집중하는 것이 중요합니다. 그럼 방문자들에게도 그 회사의 스토리가 잘 전달되며, 더 설득력 있게 다가갈 수 있습니다.



"okdork" 홈페이지 

방문자의 행동을 이끄는 부분에 초점을 맞춰 사용자에게 명료하게 다가갑니다




2. 뉴스레터 구독 버튼을 적절한 위치에 배치하세요. 

페이스북이나 트위터 사용자의 피드에 노출되기가 점점 더 어려워지고 있는데요. 그런 의미에서 사용자에게 직접 다가갈 방법은 이메일주소 입니다. 홈페이지에서 흔히 볼 수 있는 뉴스레터 구독 버튼은 페이지 맨 아래에 위치시킨다면 위험합니다. 좀 더 매력적인 문구와 함께 적절한 위치에 뉴스레턴 구독 버튼을 위치시킨다면 더 많은 사용자의 이메일 주소를 얻을 수 있습니다.  




 "Digital Telepathy 홈페이지"

상단메뉴에 "구독하기"를 위치시켜 신청률을 높입니다




 "Digital Telepathy 홈페이지"

서브페이지 하단에 "구독하기 버튼"을 노출하여 신청률을 높입니다



3. 픽셀의 디테일보다 사용자를 위한 프로세스 개선에 집중하세요.

보통 웹 디자이너들은 1pixel의 차이에 예민한 경우가 많습니다. 하지만 외적인 부분에 불필요하게 집중한 나머지 다른 것을 놓치는 경우가 종종 있습니다. 화면에 그려지는 것보다 중요한 건 구조와 기능의 프로세스입니다. 


4. 단일페이지에서는 한 가지에만 집중하세요. 

보통 의뢰받은 일을 할 경우 많이 접하는데요. 클라이언트의 요구는 보통 이렇습니다. 

-구매가 많이 일어나도록 해주세요.

-구독자를 늘려주세요.

-팔로워 수를 늘려주세요.

-브랜드 스토리를 잘 보여주세요. 

웹사이트를 구축할 때 드는 비용을 생각하면 많은 콘텐츠를 함께 노출하여 이익을 만들어내는 건 당연합니다. 한 가지 초점에 집중하고 나머지는 버린다는 것이 매우 어렵기도 하고요. 하지만 많은 콘텐츠가 동시에 노출된다면 방문자는 복잡한 사이트라 여겨 금방 다른 곳으로 빠져나갈 수 있습니다. 처음은 어렵겠지만, one page, one goal을 생각하며 진행하는 건 어떨지요. 


5.랜딩페이지를 활용하세요. 

랜딩페이지(Landing Page)란 검색엔진, 광고 등을 경유하여 접속하는 사용자가 최초로 보게 되는 웹페이지를 말합니다. 그럼 좋은 랜딩페이지의 기준은 무엇일까요?

-홈페이지와 같은 메인 내비게이션은 삭제해주세요. (사용자가 최대한 그 페이지에 오래 머물도록 )

-광고에 사용된 단어를 랜딩페이지와 일치시킵니다. (만약 광고에서 슬로워크 버닝데이가 많이 쓰였다면 랜딩페이지 타이틀은 슬로워크 버닝데이 단어를 매치시킴으로써 해당 페이지에 잘 도착했다는 느낌을 주세요)

- 소셜 미디어 공유 버튼을 노출하세요. (더 많은 이용자에게 전달되도록)

좋은 랜딩페이지를 만드는 방법 더 보기 >


6. 모바일 환경을 고려해 주세요. 

모바일 유저 중 60%는 모바일기기로만 웹사이트에 접속합니다. 그만큼 모바일을 위한 페이지 구성 또한 중요합니다. 현재는 모바일에 대부분의 기업이 반응형 웹을 이용하여 최적화하지만 아직 기능적으로 구현이 부족하거나 UX 적으로 많은 실험이 오가는데요. 그만큼 모바일이 중요함에 따라 이제는 웹이 기준이 아닌 모바일을 기준으로 웹을 구현하는 방식도 필요한 시대입니다. 


7. 검색엔진 최척화를 고려해주세요.

검색엔진 최적화를 SEO(Search engine optimization)라고 부릅니다. 말 그대로 검색에 잘 노출되도록 최적화하는 것을 말합니다. 프론트엔드 부분에서 많이 고려되는 부분으로 최적화 하기 위한 다양한 방법이 있습니다. 중요한 이름이나 콘텐츠, 링크를 표시할 때는 이미지가 아닌 텍스트를 사용한다거나, 이미지에는 ALT 속성값을 주어 읽히도록 하는 등 다양한 방법이 있습니다. 더 자세한 사항은 구글에서 공유한 SEO에 최적화하기 위한 가이드를 참고해주세요. 

SEO에 최적화하기 위한 12가지 팁>

구글 검색엔진 최적화 기본 가이드 보러가기>



알려드린 방문자를 늘리는 방법은 7가지이지만, 지키기 위해선 많은 집중과 노력이 필요합니다. 가장 중요한 점은 회사의 핵심에 초점을 맞춰 홈페이지를 세워나가는 것이라 생각합니다. 



출처 : Dtelepathy


> 더 읽기: 웹사이트 블로그 방문자 통계 및 분석, 구글애널리틱스란?

              보기 좋고, 읽기 좋은 이메일을 만드는 4가지 방법


by 종달새 발자국

Posted by slowalk

인류의 역사에서 콘텐츠는 어디에선가, 누군가로부터 늘 제작되어 왔고 이는 구전을 통해, 종이와 활자를 통해, 그리고 매체를 통해 전달되어져 왔습니다.


인터넷 역시 디지털화되거나, 디지털을 기반으로 생산된 정보가 오가는 매개로써 급속한 기술의 발전에 힘입어 손쉽게 정보를 습득할 수 있는 주요한 통로로 자리매김 하였고, 이러한 특징들로 인해 현재 기관이나 단체 그리고 개인에 이르기까지 누구나 인터넷을 이용해 자신이 생산한 콘텐츠를 전달하거나, 타인의 콘텐츠를 조회할 수 있게 되었습니다.


지난 글 '우리 홈페이지 어떻게 만들어 활용할까 1편'에 말씀드린 바와 같이 여기에서 말하는 웹사이트는 그 자체로서 의미 있는 콘텐츠를 담고 있는 웹페이지들이 일련의 장소에 일목요연하게 모여 제공되는 곳입니다. 이번 포스팅에서는 온라인 콘텐츠의 성격과 순환구조, 특징에 따른 자원목록화 방법에 대해 설명하겠습니다.




1. 콘텐츠

콘텐츠의 사전적 의미는 어떤것의 속에 든 것들, 내용물, (책의)목차, 내용 및 주제 등과 같은 뜻을 내포하고 있습니다. 본 포스팅에서 논하고자 하는 콘텐츠의 의미는 컴퓨터에서 취급하는 정보를 규정하는 것으로, 각종 유·무선 통신망을 타고 흐르는 정보를 통칭합니다. 지상파 방송에 필요한 문자, 음성, 화상 등의 방송정보와 컴퓨터 네트워크로 교환되는 교육용 소프트웨어, 게임소프트웨어, 영화 등 모든 종류의 정보가 이에 포함됩니다. 최근에는 방송과 컴퓨터 통신의 융합화 추세에 따라 ‘디지털화’된 모든 정보를 뜻하게 되었습니다. 좀더 세부적인 접근으로 웹 콘텐츠는 위에서 나열한 것들이 인터넷을 매개로 하여 취급되는 정보들을 말하며, 인터넷에 접근할 수 있는 단말기를 통해 제공되는 모든 형태의 디지털 콘텐츠를 말합니다.


2. 웹 콘텐츠의 순환구조

웹 콘텐츠는 생산,유통,확산,재생산의 순서로 순환하며 유지됩니다. 이는 구전으로 전해지는 '이야기'와 크게 다르지 않지만, 확산의 속도가 이전과는 비교할 수 없이 빠르다는 차이가 있습니다. 

<콘텐츠 순환개요도>


1. 생산

웹사이트의 운영자 또는 사용자가 웹서비스가 제공되는 플랫폼 또는 DB, 서버 등에서 콘텐츠를 작성/개발/업로드 등 일련의 행위를 통해 인터넷으로 본인 또는 타 사용자가 이용하거나 조회할 수 있는 형태로 제작/가공합니다. 


2. 유통

생산된 웹 콘텐츠가 해당 웹플랫폼으로 '직접' 접근한 사용자에게 제공되고, 의도에 적합하게 이용됩니다. 유통단계에서는 제공되는 정보의 권한을 부여하여 특정 사용자 그룹이나 대상에게 차별적으로 제공될 수 있습니다. 통상 일반적인 웹사이트나 플랫폼은 회원가입과 사용자 계정을 통해 접근 권한을 조정하며, 플랫폼의 성격에 따라 접속할 수 있는 경로나 IP대역을 제한적으로 운용하는 인트라넷(폐쇄적 네트워크)이 있습니다.


3. 확산

생산된 웹 콘텐츠가 유통될 때, 1차 사용자의 특정한 행위(스크랩, 트랙백, 전문/부분 인용, 다운로드 후 업로드 등)을 통해 최초 생산된 웹 플랫폼을 거치지 않는 다른 경로를 통해 2차, 3차 이하 사용자의 의도에 적합하게 제공됩니다. 웹 상에 게시되는 콘텐츠의 경우 일반적으로 제공 플랫폼이나 시스템에 별도의 조치가 없을 때 확산되는 것을 막기가 어렵습니다. 따라서 해당 콘텐츠의 중요도에 따라 명시적이고 법리적인 저작권 정책을 적용(예: CC 저작권 표시) 하는 것을 고려해야 합니다.


4. 재생산

확산된 웹 콘텐츠를 접한 사용자 또는 타 웹서비스의 운영/이용자 등이 해당 콘텐츠를 기반으로 하여 유사하거나 변조된 새로운 콘텐츠를 생산할 수 있습니다. 이 때 기존 원본 콘텐츠의 출처를 밝혀 원본 소스로 유입시키기도 하지만, 보통 콘텐츠에서 핵심내용이나 본인이 원하는 부분을 변조하거나 조합하여 새로운 콘텐츠로 생산해 활용됩니다. 또한 기존 콘텐츠에 대한 피드백 또는 리뷰들이 그 자체로 다른 사용자에게 유용한 새로운 콘텐츠가 되기도 합니다. 



인터넷 상에서 다수에 의해 다양한 콘텐츠로 재생산 된 <Grumpy Cat>
출처 : Grumpy Cat Official Facebook Page


웹 콘텐츠는 몇가지 특징이 있습니다. 스스로 잉태하거나, 자라나지 않습니다. 제작자(사용자 또는 운영자)에 의해 생산되며, 생산된 콘텐츠는 유통을 위해 웹서버 내 공간이나 데이터베이스(DB)에 저장됩니다. 유행에 뒤처질 수 있으나 수명을 다해 사라지지 않습니다. 데이터가 유효하지 않게되는 순간(물리적/논리적인 이유로 사용자가 더는 엑세스 할 수 없게 되는 순간)까지 해당 위치에 존재하게 됩니다. 또한 체계적인 관리를 한다면 다용도로 사용 가능한 자원이 되지만, 단순히 양적으로 접근할 경우 원하는 정보를 찾는 사용자를 혼란스럽게 만들 수 있습니다. 


대부분의 기관 및 단체가 웹사이트를 제작하고, 보유하려는 의도가 위의 특징과 일치하지 않는 경우가 많습니다. 개인사용자나 회사의 경우 보유하고 있는 자원을 뚜렷한 목적성에 의해 인터넷 상에서 제공하고자 웹사이트를 구축하지만, 일반적인 기관 및 단체의 경우 '우리도 하나쯤 있어야 하지 않을까' 내지 '다른 곳이 운영하고 있으니까' 라는 의도로 웹사이트를 제작하려는 경우가 이에 해당합니다. 


웹 콘텐츠는 스스로 생성되지 않기 때문에, 그저 웹사이트를 만들어 공개해 둔다고 해서 활성화되지 않습니다. 오히려 중요한 것은 웹사이트를 개설한 이후부터입니다. 해당 웹사이트에서 취급하고, 제공해야 할 콘텐츠들을 면밀히 검토하여 효율적인 방법으로 사용자에게 제공되기를 기대해야 합니다. 웹에 공개되는 콘텐츠는 어떠한 방식으로든 사용자에게 저장될 수 있으며, 법적인 절차로 이를 규제하는 방법 외에는 퍼져나가는 것을 막을 수 있는 기술적인 방법이 극히 제한적입니다. 또한 사용자가 원하는 정보를 찾아 들어왔을 때 이를 놓치지 않고 올바른 정보를 제공하는 것이 가장 중요합니다. 이를 위해 필요한 것이 보유 콘텐츠 감사입니다.



3. 보유 콘텐츠 감사(자원목록화)

사용자에게 효과적으로 정보를 제공하기에 앞서, 보유하고 있는 콘텐츠들에 대해 조사해 볼 필요가 있습니다. 일례로 텍스트로 제공되는 문서와, 영상은 분명히 사용자에게 제공되는 형태가 다르기 때문입니다. 텍스트는 문서 내의 정보들을 손쉽게 검색하도록 제공할 수 있지만 영상이나 이미지에 비해 동일한 내용을 직관적으로 제공하기 어렵습니다. 반면 이미지나 영상은 내부에 담고 있는 텍스트가 시각적으로는 인식이 가능하지만, 이를 검색하거나 조회하도록 하는 것이 일반적으로 불가능하기 때문에 해당 영상이나 이미지의 내용을 설명하는 별도의 메타정보를 준비하여 제공하여야 하는 등의 차이점이 있습니다. 콘텐츠가 대외적으로 공개될 수 있는 것인지, 특정 대상에게만 제공되어야 하는지, 제공한다면 어느 플랫폼이나 위치에서 제공할 것인지 등이 이 감사 분류체계를 결정합니다.


<보유콘텐츠 감사 분류체계>


아래 양식을 참고하여 보유 콘텐츠를 감사하고, 분류하여 보관하면 추후 온라인 사업이나 내부 이슈로 인한 정보확인 시 큰 도움이 될 것입니다.


콘텐츠_감사양식.xlsx



정리하며

정돈된 양질의 콘텐츠는 빠른 유속의 인터넷의 흐름 속에서 무서운 속도로 퍼져나갈 수 있습니다. 그 흐름을 효과적인 통로로서 배치하고 보유한다면 사업의 목표달성을 위한 큰 힘이 될 것입니다. 다음 포스팅에서는 실제 기관에서의 사례를 들어 독립적인 웹사이트의 개발 및 운영에서 필수적으로 알고 있어야 하는 것들에 대한 설명을 이어나가도록 하겠습니다.


더 읽기 > 우리 홈페이지, 어떻게 만들어 활용할까? 1편

           우리 홈페이지, 어떻게 만들어 활용할까? 3편

by 물범 발자국

Posted by slowalk



세로형 내비게이션이란? 

웹사이트의 콘텐츠 항목을 볼 수 있는 메뉴 내비게이션은 일반적으로 가로형과 세로형이 있습니다. 현재 슬로워크의 내비게이션은 상단에 가로로 보이는 가로형 내비게이션입니다. 흔히 접할 수 있는 방식이죠. 그럼 세로형 내비게이션은 무엇일까요. 세로형은 브라우저 영역을 기준으로 왼쪽 위 기업 로고 아래 수직 배열로 정렬되는 구조를 말합니다. 일반적으로 가로형 내비게이션이 많이 쓰이지만, 스크롤로 제어하는 원 페이지 구조가 등장하면서부터 이에 적합한 세로형도 많이 볼 수 있게 되었습니다.



세로형 내비게이션 메뉴 활용법 

1. 단일 페이지 레이아웃을 활용하여 상하로 동작하도록 만들어주세요.

단일페이지란 반응형 웹에 따라 사용되는 구조인데요. "One page", "Full page" 라고 불리며, 서브페이지로 이동 없이 한 페이지에 보이는 형식으로 사용자에게 스크롤을 유도합니다. 단일 페이지 구성처럼 콘텐츠 양이 적을수록 세로형 내비게이션이 유리합니다.    


jorgerigabert.com : 단일 페이지로 구성되었으며, 왼쪽 메뉴를 하나씩 클릭할 때마다 페이지가 상하로 움직입니다.



2. 2차 메뉴는 3~4단으로 구성하여 같은 시선의 흐름을 유지하세요.

그럼 콘텐츠 양이 많은 사이트는 어떻게 사용하면 좋을까요? 맥도널드 영문 사이트를 예로 들어봅시다. "FOOD"메뉴에 마우스를 가져가 보면 2차 메뉴가 오른쪽으로 펼쳐집니다. 펼쳐진 2차 메뉴의 각 콘텐츠는 3단으로 나뉘며 상하로 정렬됩니다. 즉, 1차 메뉴와 2차 메뉴를 보는 시선이 상하로 동일한 사용자 경험을 제공합니다.


mcdonalds.com: 2차 메뉴의 각 콘텐츠는 3단으로 나뉩니다. 상하로 정렬되어 1차 메뉴와 2차 메뉴를 탐색하는 시선이 상하로 같습니다.



3. 메뉴명은 명료하고 단순할수록 잘 읽힙니다.

세로형 내비게이션을 구성할 때 가장 중요한 부분으로 메뉴의 높이가 세로로 무한대로 길어지면 곤란합니다. 이유는 해상도가 낮은 컴퓨터의 웹 브라우저 뷰포트에서 전체 메뉴가 한눈에 보이지 않기 때문이죠. 이처럼 웹사이트 디자인 전 IA(Information Architecture) 설계, 즉 메뉴구조를 정의하는 작업은 매우 중요합니다. 세로형뿐만 아니라 모든 메뉴구조에서 정보를 효율적으로 압축하여 제시하는 것이 가장 중요합니다. 좋은 메뉴명을 붙이는 방법은 지난 블로그 글 '클릭을 유도하는 이름 붙이기'에서도 다뤘습니다.


edmedu.com : 이번에 슬로워크 웹 개발실에서 리뉴얼한 ed:m에듀케이션의 웹사이트입니다. 세로형 내비게이션을 적용하였고 메뉴명은 짧고 명확하게 만들었습니다. 사용자가 볼 때 쉽게 이해 가능하며 지칭할 수 있습니다. 



세로형 내비게이션 메뉴를 활용하는 방법은 더 많을 텐데요. 분명 비주얼보다는 적절한 콘텐츠와 직관적인 메뉴구조로 정확하게 설계된 웹사이트가 오래도록 남을 수 있습니다. 웹사이트 내비게이션의 메뉴명만 읽어 보아도 어떤 용도의 사이트인지 이해 가능하다면 사용자가 원하는 정보를 찾기 위해 모든 콘텐츠를 확인하여야 하는 번거로움이 줄어들 것입니다. 그럼 조금 더 현명한 웹사이트를 만들 수 있지 않을까요?


참고 : webdesignledger





by 종달새 발자국









Posted by slowalk

친절한 웹사이트는 어떤 모습일까요? 사용자가 생각하지 않고 쉽게 이해 가능한 사이트가 아닐까요? 한 권의 책, "(사용자를) 생각하게 하지마"를 통해 그 방법을 알아볼게요.



스티브 크룩(Steve Krug)이 지은 이 책은 화려한 UX가 아닌 기본에 충실한 UX를 보여줍니다. 웹 실무에 바로 적용 가능한 기본 팁들과 왜 그렇게 적용되는지 이유도 쉽게 설명되어 있어요. 종종 귀여운 카툰도 등장하고요. 다 읽고 난 다음엔 카툰이 먼저 생각나는 묘한 책입니다. 친절한 웹 사이트를 만드는 방법은 많이 있습니다. 그럼 가장 핵심에 다가가는 방법은 어떤 것일까요? 아마도 화려한 테크닉이 아닌 조용하지만 강한, 즉 기본에 충실한 UX가 사용자에게 감동을 준다 생각합니다. 그럼 이 책에 담겨있는 "관례 사용하기" 부분을 통해 기본에 충실한 UX를 알아볼게요.

 


첫째, 페이지상 항목 위치


보통 상단 위쪽 슬로워크 로고부터 순서대로 읽힙니다.


"로고를 예로 들어보자. 사용자는 로고가 보통 페이지 상단 위쪽 모서리에 있으리라 생각하며 최초의 탐색은 왼쪽 위에서 대각선 아래로 이루어진다. 적어도 왼쪽에서 오른쪽으로 글을 읽는 나라에서는 그렇다." (p33_관례를 이용하라)

"웹 사이트의 사이트 ID나 로고는 건물의 이름 같은 역할을 한다."(p72_여기는 캔사스가 확실히 아냐)


건물의 이름이 있어야 할 장소에 다른 내용으로 대체되어 있다면 방문자는 분명 당황합니다. 이처럼 웹사이트의 상단 왼쪽에는 로고를 넣는 게 좋습니다. 클라이언트 작업을 할 때면 로고 부분에 단체에서 많이 사용되는 단어나 연락처 등을 넣어달라는 요청이 종종 있는데요. 위의 사용자 패턴을 고려하여 단체나 기관의 심볼을 넣고 단어나 연락처를 넣었던 기억이 나네요. 



둘째, 적절한 네이밍


"메뉴 이름을 예로 들어보자. 흔히 귀엽고 참신한 이름, 마케팅에서 비롯된 이름, 특정 회사에서만 사용하는 이름, 익숙하지 않은 기술적인 이름들이 이런 문제를 일으키는 주범이다"(p14_사용자는 이럴 때 고민한다)


만약 슬로워크에서 "구인"이라는 단어는 참신하지 않다는 이유로 "슬로워커"라고 가정합시다. 만약 슬로워크 홈페이지에 처음 방문한 사람은 이게 뭐지? 슬로워커? 일하는 사람? 그 카테고리의 목적을 모른 채 클릭을 하게 되는 것이죠. 



셋째, 태그라인  


"태그라인이란? 사이트 ID 바로 옆 공간은 몸값이 가장 비싼 곳 중 하나다. 우리는 ID에 시각적으로 연결된 문구가 태그라인이며 그 문구가 사이트 전체를 설명한다는 사실을 안다." (p99_중요한 메시지는 이렇게 전달하라)


태그라인을 선택할 때 고려해야 할 몇 가지 특성 (p102_좋은 태그라인이 최고야)

1. 좋은 태그라인은 명확하고 유익하며 여러분이 만든 사이트나 여러분이 몸담은 조직이 하는 일을 정확하게 설명한다.

2. 좋은 태그라인은 충분한 내용을 담고 있되 과하게 길지 않다. 6~8단어 정도의 분량이 적당하다. 

    그 정도면 전체 생각을 담지 못할 정도로 짧지 않고 집중도가 떨어질 정도로 길지도 않다.

3. 나쁜 태그라인은 포괄적이다.



번외, 슬로워크의 태그라인 사용 사례


태그라인이 있는 슬로워크 홈페이지 (~2013)


태그라인이 사라진 슬로워크 홈페이지 (2014~)


위 사진 2장의 상단메뉴를 봐주세요. 차이점을 발견하셨나요? 디자인 레이아웃의 변화도 있지만, 로고 옆에 있던 태그라인은 현재 홈페이지에서는 사라진 걸 알 수 있습니다. 초창기 슬로워크는 대부분의 클라이언트에게 낯설었죠. 그래서 로고 옆에 무엇을 하는 곳인지 알려주었습니다. 하지만 지금은 많은 분이 알아봐 주시기에 과감히 삭제하고 콘텐츠로 슬로워크를 알리고 있습니다.


책에서는 이 밖에도 홈페이지 환영 문구를 어떻게 적어야 하는지 등, 기본적인 팁들도 배울 수 있습니다. 일단 위의 3가지만 잘 지켜진다면 어떤 사업을 하는 곳인지, 사용자가 클릭 전에 바로 알 수 있는 친절한 사이트를 만들 수 있지 않을까요? 



참고도서 : 사용자를 생각하게 하지마!


by 종달새 발자국




Posted by slowalk

슬로워크 웹개발실과 함께 해 주신 분 가운데 많은 비율을 차지하는 고객군 중 하나는 비영리 단체나 기관입니다. 웹이 세상에 선보인 이래 현재에 이르기까지 소위 말하는 ‘홈페이지’는 명함과 더불어 ‘조직’이 가져야 하는 기본적인 주요 홍보 매체가 되었습니다. 


단순한 Plain HTML로 구성된 웹브로슈어, CMS엔진을 탑재해 온라인 컨텐츠를 직접 생산/발행할 수 있는 플랫폼 형태의 웹사이트나 블로그. 사용자와 소통할 수 있는 온라인 서비스로 제공되는 SNS 또는 블로그 솔루션. 끝이 없어 보이는 수많은 형태의 온라인 플랫폼이 무엇인지, 그리고 어떻게 우리가 효율적으로 운영할 수 있을지에 대한 슬로워크의 생각을 정리해 보았습니다.




이야기를 시작하기에 앞서, '홈페이지' 와 운영에 필요한 온라인 매체의 이해를 위한 사전지식을 간략하게 설명합니다.


1. 웹사이트


"The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents."


1990년 웹의 창시자 CERN의 팀 버너스리가 만든 최초의 웹사이트 첫 문단구절입니다. 정보를 효과적이고 효율적으로 작성하고, 이를 누구나 볼 수 있도록 하는 이상을 잘 나타내는 구절입니다. 



최초의 웹사이트를 텍스트 단말기 형태의 시뮬레이터로 구현한 모습
출처 : CERN


웹사이트의 사전적 의미는 자체로서 의미 있는 텍스트(Contents)를 담고 있는 웹페이지들이 일련의 장소(Server, 네트워크에 접속된 컴퓨팅 시스템)에 일목요연하게 모여 제공되는 곳을 뜻합니다. 보통 한국에서 많이 쓰이는 ‘홈페이지’의 정식 명칭이라고 할 수 있습니다. 


좀 더 자세히 기술하자면 인터넷 프로토콜 기반(TCP/IP)의 네트워크상에서 도메인이나 IP경로와 같은 고정적이고 일반적(URL) 주소로 접속하여 조회할 수 있는 웹 서버(Web Server, 인터넷에 상시 접속된 컴퓨팅 시스템)에서 호스팅(Hosting, 서버의 일정 공간을 할애하여 웹페이지를 구동하여 접속 사용자에게 제공하는 서비스 등 일련의 행위) 되는 형태로 제공됩니다. 이를 요약해 표현하면, 상시 인터넷에 접속된 서버 컴퓨터에서 컨텐츠를 인터넷으로 접속하는 사용자에게 제공하는 형태가 웹사이트입니다. 



<1분동안 인터넷에서 일어나는 일>
출처 : Intel


서두의 설명처럼 기관의 공식 홍보채널로 주로 사용되는 공식 웹사이트는 기관의 주요정보를 제공하고 원하는 정보를 사용자에게 제시하는 형태로 이용됩니다. 인터넷 초기에는 공식 웹사이트 자체에 많은 기능을 담아 사용자에게 서비스를 제공하는 것이 높은 가치로 중시되었습니다. 그러나 현재는 정보 기술의 발달과 다양한 웹 플랫폼의 대두, 모바일 단말기의 보급으로 인한 사용자 이용 행태가 변화하고 있습니다. 따라서 공식 웹사이트는 기관의 공신력 있는 정보와 정체성을 가진 정보를 중심으로 최대한 간결하게 사용자가 원하는 정보를 직관적인 형태로 제공하며 변화하고 있습니다. 



2. SNS

초기 웹 환경은 HTML문서 형식으로 서버에서 사용자에게 정해진 형태의 일방향 정보를 제공하는 웹 1.0을 시작으로 했습니다. 그리고 현재는 사용자가 서버에 원하는 정보를 요청하여 제공받는 단계를 지나, 사용자가 곧 생산자가 되는 참여형 웹 2.0에 이르는 다양한 형태의 웹사이트가 만들어 지고 있습니다. 특히 참여와 공유를 중시하는 웹 2.0에서는 기관의 ‘홈페이지'라도 단순한 형태의 문서정보를 제공하는 것에 그치지 않고 사용자의 참여를 유도하고 컨텐츠를 간접적으로 유통시키는 구조로 변화하고 있습니다.


이를 위해 효과적으로 사용되는 것이 바로 SNS입니다. 공식 웹사이트는 컨텐츠가 매우 고정적이고, 기관의 이미지 등을 고려하였을 때 확인된 정보만을 취급하므로 정보의 갱신이나 사용자에 대한 피드백 기간도 깁니다. 이 단점을 SNS를 이용해 보완할 수 있습니다. 페이스북, 트위터 등의 SNS 플랫폼은 쉬운 사용법, 플랫폼 내 상호 연결된 인적네트워크에서 정보가 빠른 속도로 전파되는 특성과 함께 컨텐츠에 대한 즉각적인 상호 작용(공유, 좋아요, 추천 등)이 일어나는 구조로 되어 있는데요. 이를 이용해 기관과 사용자의 직접적인 소통이 즉각적으로 이루어 지기도 합니다. 


박원순 서울시장 공식 트위터, 고양시청, 한국민속촌의 페이스북 채널, 부산경찰청 등의 공식SNS채널이 SNS의 장점을 극대화  한 좋은 사례로 볼 수 있습니다. 해당 채널들은 단순히 SNS를 통한 소통을 넘어, 실질적인 현안들에 대해 담당 부서나 기관의 즉각적인 피드백이 이루어지게 하고, 다시 SNS로 게시함으로써 사용자의 신뢰를 얻었습니다. 물론 해당 채널의 페르소나를 정립하여 운영하는 것 역시 인기의 비결이었다고 볼 수 있겠습니다.




<2012년 최성 前 고양시장의 페이스북 좋아요 목표달성 인증샷>
출처 : 고양시청 페이스북 페이지



3. 블로그

타임라인 기반의 SNS는, 데이터는 저장되지만 컨텐츠의 주제나 분류 등의 메타정보를 설정하지 않는 측면이 지난 데이터를 효과적으로 다시 검색조회하거나, 재사용을 위해 가공할 때 불리한 점으로 작용합니다. 시일이 지난 대화는 점점 의미를 잃고 중요한 정보는 SNS에서 취급되기 어려운 점이 있습니다. 하지만 공식 웹사이트에서 이러한 정보를 취급하는 것은 즉각적인 행동으로 이어지기에 제작 및 절차상의 문제가 있습니다. 해당 정보가 유용하지만 직접 생산한 정보가 아니거나 공식 웹사이트에서 취급하기에 문제가 있는 자료이기 때문에 SNS로만 유통시키기에는 다소 아쉬운 점이 있습니다. 이를 보완할 수 있는 플랫폼이 바로 블로그 입니다. 


블로그는 보통 네이버나 다음, 티스토리 등의 국내 포털사이트의 회원제 서비스로 사용하는 임대형 블로그, 웹서버에 직접 텍스트큐브, 워드프레스 등의 블로그 엔진을 설치하여 사용하는 설치형 블로그로 구분됩니다. 최신 컨텐츠가 사이트의 전면에 모든 내용을 노출하는 기본 형태를 가지고 있습니다. 특정 서비스 벤더에 종속되는 임대형 블로그는 해당 서비스 벤더가 포털사이트부류의 통합서비스 제공사일때 검색 노출빈도에서 상당한 이점을 가지고 있습니다. 특히 네이버에서 제공되는 블로그 서비스는 네이버의 검색정책에 따른 검색조건을 만족하면 먼저 해당 검색어에 대한 상위노출이 가능합니다. 


최근에는 블로그의 초기화면에 내부 컨텐츠를 큐레이션 할 수 있도록 제공되기도 합니다. 이를 이용해 웹 서버부터 직접 구축하는 독립형 웹사이트 대신, 블로그를 공식 웹사이트 형태로 운영하는 기관들도 존재합니다. 이 방법은 웹사이트의 구축 및 운영비용을 절감할 수 있지만, 고정적인 플랫폼의 형태에서 벗어날 수 없습니다. 이 때문에 보유 자산의 컨텐츠가 획일적인 형태로 제공 된다는 단점 역시 고려해야 할 부분입니다.






정리하며

위 세 가지 형태의 온라인 매체를 동시에 운영하는 것이 가장 이상적인 구성일 것입니다. 그리고 각 매체 담당자가 해당 매체에 대한 완벽한 이해를 바탕으로 운영한다면 온라인 사업의 성공은 확정적일 수밖에 없을 것입니다. 


하지만 현실은 언제나 싸늘합니다. 비영리 단체나 기관 구조상 온라인 업무만 하는 담당자가 있기는 어려울 것입니다. 그리고  갑자기 시작된 온라인 사업에 배정받은 담당자는 제반 지식이 부족한 경우가 많습니다. 웹사이트 구축 예산은 적으나, 내려온 사업지시는 많은 것을 요구합니다. 


다음 2편에서는 온라인 컨텐츠의 방식과 종류, 취급방법 및 가상의 예시 사례를 들어 기관과 단체가 제한적인 자원 속에서 목표를 달성하기 위해 취할 수 있는 선택들을 보겠습니다.또한, 거의 무료로 제공되고 있는 웹 솔루션을 이용해 온라인 사업에서 활용하는 방식을 순차적으로 안내하도록 하겠습니다.

더 읽기 > 우리 홈페이지, 어떻게 만들어 활용할까? 2편

            우리 홈페이지, 어떻게 만들어 활용할까? 3편

by 물범 발자국


Posted by slowalk

슬로워크의 다양한 프로젝트와 디자인 작업물을 만나볼 수 있는 공간! 슬로워크 홈페이지(slowalk.co.kr)에 방문해보신 적이 있나요? 초창기 3명의 직원으로 시작해 이제는 25명의 구성원이 일하는 회사로 성장한 슬로워크. 양적인 크기뿐 아니라 더 깊이 있게 다양한 영역을 확장해가는 슬로워크에게 홈페이지 리뉴얼은 꼭 필요한 과정이었습니다. 



기존의 슬로워크 홈페이지



슬로워크만의 스타일과 기존 홈페이지의 쉽고 간편한 방향성은 유지하되 확장된 크기와 사업 영역에 맞춰 전문성을 더하고, 많은 분들께 조금 더 친절하고 가깝게 다가가는 홈페이지를 만들기 위한 고군분투! 실력과 열정을 겸비한 슬로워크 웹 개발실에서 개발, 디자인하고 슬로워크의 각 구성원들이 지속적으로 함께 참여해 만들어가는 slowalk.co.kr을 소개합니다. 



리뉴얼된 슬로워크 홈페이지



움직임 | 매일, 최근의 정보들이 자동으로 업데이트 되는 메인 페이지




메인 페이지의 상단 4개의 박스는 블로그, 슬로데이(Sloday), 슬로워크 캠페인&프로젝트, 보트포그린(I Vote for Green) 캠페인 등 각각의 역할을 가지고 있습니다. 각 사이트와 연동되어 매일매일 그리고 가장 최근의 자료들이 자동으로 업데이트 되는 구조로 만들어졌는데요. 블로그와 슬로데이, 보트포그린의 경우 매일, 슬로워크 캠페인은 가장 최근의 자료가 업데이트 됩니다. 각 영역을 클릭하면 해당 사이트로 이동하여 보다 자세한 정보를 살펴볼 수 있습니다. 메인 페이지의 하단 부분은 슬로워크 페이스북과 트위터의 글이 실시간으로 올라오는 구조로 되어 있어 홈페이지의 생동감을 더합니다.



연결 | 링크로 연결되어 원하는 정보로 쉽게 접근할 수 있는 유연한 구조




새롭게 바뀐 슬로워크 홈페이지에서는 유난히 클릭을 해서 다른 페이지로 연결되는 링크를 많이 볼 수 있는데요. 홈페이지에서는 쉽고 간결하게 표현하되, 블로그에 있는 컨텐츠를 연결하여 더 깊이 있고 풍성한 홈페이지를 만들고자 하였습니다. 각 작업 별 간단한 설명과 링크를 클릭하여 슬로워크 블로그에서 관련된 포스팅 내용을 자세히 살펴볼 수 있습니다. 





또한 관련 태그와 각 구성원의 이름도 클릭을 할 수 있는데요. 태그를 클릭하면 관련된 키워드의 작업들을 찾을 수 있습니다. 작업과 함께 게시된 디렉터와 디자이너의 이름을 클릭하면 개인별로 참여한 작업들을 한번에 모아서 볼 수 있습니다. 슬로워크의 홈페이지면서 또 각 구성원의 포트폴리오가 될 수도 있는 유연한 구조입니다. 





인포그래픽 카테고리는 그래픽 이미지를 클릭하면 큰 이미지로 실제 정보를 확인할 수 있도록 구성하였습니다.



친절함 | 한 눈에 파악해서 볼 수 있는 썸네일(thumbnail) 이미지




한 눈에 작업들을 쭉 모아 볼 수 있는 썸네일 이미지 형태는, 작업물 전부가 쭉 펼쳐져 있던 기존 홈페이지와 큰 차이점이라 할 수 있는데요. 예전의 작업들을 찾기 위해 일일이 페이지를 많이 넘겨봐야 했던 기존 홈페이지의 단점을 보완하여, 작업들의 작은 대표 이미지를 통해 한 눈에 쉽게 들어오는 포트폴리오를 만들었습니다. 빠르게 필요한 이미지들을 찾을 수 있고, 슬로워크 디자인의 스타일과 각 작업물의 특성을 한 눈에 살펴볼 수 있습니다.





뉴스와 프레스 부분도 썸네일 이미지로 정보를 판단하여, 클릭했을 때 상세한 설명을 만나볼 수 있습니다. 썸네일 만으로도 수많은 정보들 속에서 빠르게 필요한 정보를 선택하여 볼 수 있다는 장점이 있겠지요.



구체성 | 사진으로 촬영해 실제적인 이해도를 높인 포트폴리오





기존 홈페이지에서는 작업 대부분이 그래픽 이미지로 표현되어 있는 경우가 대부분이었는데요. 실제로 인쇄된 책자, 브로슈어, 그리고 구조가 복잡한 패키지 작업물의 경우 물성을 표현하는데 한계가 있었던 것이 사실입니다. 그래서 이번 홈페이지 리뉴얼을 통해서 실제로 인쇄된 작업물은 사진으로 촬영하여 실제적인 이해를 도울 수 있도록 하였습니다. 앞으로 자체적으로 지속 가능한 포트폴리오 촬영을 위해 장비 구입, 교육, 여러 가지 실험을 통한 자체 촬영 프로세스를 만들어가는 중에 있습니다.^^  



간결함 | 복잡하지 않은 메뉴 구성




메뉴 구성에 있어서는 불필요하게 많은 카테고리나 여러 번 클릭해야 하는 복잡한 단계를 피하였는데요. 각 카테고리 당 4개를 넘지 않는 하위 카테고리, 한번에 펼쳐지는 구성으로 메뉴 구조를 단순화시켜 사용자 접근성과 이해도를 높였습니다. 



편의성 | 모바일 환경에서의 편의성




리뉴얼된 슬로워크 홈페이지의 큰 장점 중에 하나. PC, 태블릿PC, 스마트폰 등 어디에서도 편리하게 최적화되어 볼 수 있다는 점인데요. 단 수의 차이만 있을 뿐 태블릿PC와 모바일 환경에서도 불편함 없이 PC와 같은 기능으로 슬로워크 홈페이지를 이용할 수 있습니다.



처음 슬로워크에 입사 지원할 당시, 웹 상에서 다른 정보를 찾기 쉽지 않았던 재야의 숨겨진 조직이었던 슬로워크. 그 때 slowalk.co.kr에 올라와 있던 단 몇 개의 포트폴리오가 한줄기 빛처럼 느껴졌던 기억이 나는데요.^^ 그만큼 회사의 홈페이지는 관심을 가지고 지켜보는 사람들, 클라이언트, 입사를 희망하는 사람들에게 간접적으로나마 회사를 경험해보고 다양한 프로젝트를 공유하고 소통하는 공간이라 할 수 있겠지요. 


그런 공간인 만큼 실제와 보여지는 것 사이의 간극을 줄여 더 가깝게 다가갈 수 있는 slowalk.co.kr이 되도록 노력하겠습니다. 많은 관심 가지고 함께 지켜봐주세요. :-)




by 해달 발자국




Posted by slowalk