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



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


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


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



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


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



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



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


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

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

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

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



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

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



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


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



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



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


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



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



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


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



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

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