2013.06.07

기업 웹 사이트 디자인, 13가지 간단 팁

Jennifer Lonoff Schiff | CIO
웹사이트 방문자들이 방문 즉시 떠나기를 바라는가? 찾고 있는 것을 찾기 어렵게 만들고 싶은가?

그렇지 않다면, 방문자들이 당신의 웹사이트에 더 오래 머물면서 클릭을 하거나 제품과 서비스를 구입하게 만들고 싶은가? 그렇다면 다음 13가지 웹 디자인 팁을 적용해보기 바란다.

1. 세련된 회사 로고를 만들어 홈페이지와 연결시킨다.
온라인 마케팅 회사인 리치로컬(ReachLocal)의 수석 콘텐츠 마케팅 매니저인 티파니 몬홀론은 "로고는 브랜드에서 아주 중요한 역할을 한다. 따라서 눈에 잘 들어올 수 있도록 웹사이트에 위치시켜야 한다. 고해상도 이미지의 로고를 만들어 모든 페이지의 왼쪽 상단에 배치해야 한다. 또 방문자들이 쉽게 웹사이트를 둘러볼 수 있도록 로고를 홈페이지와 연결시키는 것이 좋다"고 말했다.

2. 직관적인 내비게이션을 활용한다
디지털 마케팅 회사인 인스파이어 비즈니스 컨셉트(Inspire Business Concepts)의 파트너 가운데 한 명인 브라이언 가티는 "사이트 상단을 따라 수직 메뉴 막대기 형태로 내비게이션 메뉴를 배치하는 사례가 많다. 이 주 내비게이션 매뉴 아래 또는 사이트 왼쪽에(일명 사이드바) 두 번째 네비게이션 메뉴를 제공하기 바란다"고 말했다.

직관적인 내비게이션이 왜 중요할까? 가티는 "혼동을 주는 내비게이션 레이아웃은 사람들이 해당 페이지를 떠나도록 만든다. 따라서 중요한 정보나 행위에 방해가 되는 덜 중요한 페이지 링크를 홈페이지 또는 다른 페이지의 상단에 위치시켜서는 안 된다. 중요하지 않은 링크나 정보는 페이지 바닥에 위치시키는 것이 좋다"고 말했다.

3. 어수선하게 만들지 말자
디지털 마케팅 대행 회사인 드래곤서치(DragonSearch)의 선임 디지털 마케팅 전략가인 파올로 비달리는 "최근 이미지를 지나치게 많이 넣는 사례가 많다. 선택할 이미지 정보가 너무 많아 두뇌가 정보 처리를 멈출 지경이다”라고 말했다.

방문자를 사이트에 계속 잡아두기 위해서는 너무 많은 액션이나 비주얼 클러터(예, 많은 그래픽, 사진, 애니 GIF 등)를 배치하지 말아야 한다. 방문자가 가장 중요한 정보에 집중을 하도록 하기 위해서다”라면서, “클러터를 더 줄이기 위한 방편 가운데 하나로 헤더나 푸터의 링크나 옵션을 제한하는 방법을 고려할 수 있다"고 덧붙였다.

페이지를 간결하게 만드는 또 다른 팁이 있다. 인터넷 마케팅 회사인 포텐트(Portent, Inc.)의 이안 루리 CEO는 "단락을 간결하게 유지해야 한다. 대부분의 웹사이트에서 단락은 최대 5-6줄 이내여야 한다"고 충고했다.

4. 방문자에게 '숨을 돌릴 공간'을 제공한다
웹 디자인 및 온라인 마케팅 대행 회사인 코얼리션 테크놀러지스(Coalition Technologies)의 한나 스펜서 그래픽 디자이너는 "단락과 이미지 사이에 충분한 공간을 배치, 방문자가 여유를 갖고 사이트나 기업이 제공하는 기능을 더 많이 흡수할 수 있도록 해야 한다"고 충고했다.

노보아 미디어(Novoa Media)의 설립자이자 CEO인 폴 노보아는 "사용자가 콘텐츠에 집중하고, 사용자의 흐름을 통제할 수 있도록 레이아웃 전반에 걸쳐 여백을 관리해야 한다. 웹과 모바일 환경에 비주얼이 넘쳐나고 있는 상황에서 간결할 수록 더 장점이 있다. 여백을 잘 관리하면 사용자 체험을 개선해 웹사이트를 통한 수익을 늘릴 수 있다"고 말했다.

5. 색상을 전략적으로 사용한다.
엑스페디아(Expedia) 그룹의 출장 여행 사업 부문인 에젠시아(Egencia)의 웹 디자인 책임자인 마크 호벤은 "중성색을 사용해야 사이트를 더 우아하고, 깨끗하고, 현대적으로 보이게 할 수 있다. 제목이나 중요한 그래픽에 작은 칼라 대시를 사용하면 방문자들을 가장 중요한 콘텐츠로 유도할 수 있다"고 설명했다.

또 로고를 보완하고, 다른 마케팅 자료와 일치하는 색상을 사용하는 것도 중요하다.

6. 양질의 전문 사진에 투자를 한다
패런하이트 마케팅(Fahrenheit Marketing)의 제인 슈와르츠로스 홍보 책임자는 "웹 사이트 방문자들은 1초 이내에 평범한 사진들을 알아볼 수 있다. 그러면 당신 회사도 평범하다고 생각할 것이다. 그러나 당신 회사는 평범하지 않다. 그렇다면 전문 사진에 투자를 해, 이를 방문자에게 보여줘야 한다"고 말했다.

가티는 "우리는 고객들에게 전문 사진에 투자를 하고, 전문 사진들을 대량 구입할 것을 권고하고 있다. 좋은 사진은 사람들의 시선을 끈다. 그리고 콘텐츠에 동화를 시키는 역할을 한다"고 설명했다. 전달하려고 하는 메시지와 관련이 없는 사진이나 품질이 나쁜 사진은 사진을 아예 사용하지 않는 것보다 더 나쁘다.

사진과 관련해 한 가지 팁이 더 있다. 고객과 방문자를 실시간으로 분석해주는 서비스를 제공하는 우프라(Woopra)의 공동 창업자이자 CEO인 엘리 쿠리는 "특정 콘텐츠나 '버튼'으로 관심을 유도하고 싶다면 해당 콘텐츠를 응시하고 있는 사람의 사진을 포함시켜라. 사람이란 다른 사람의 얼굴에 즉시 시선이 가기 마련이다. 또 그 사람이 응시하고 있는 대상에도 눈길을 주게 된다"고 설명했다.

7. 기기와 브라우저 전반에 걸쳐 읽기 편한 폰트를 선택해 사용한다
폰트를 선택할 때 유념할 부분이 있다. 사람들이 노트북 컴퓨터는 물론 모바일 기기를 이용해서도 웹사이트를 방문, 확인한다는 것이다. 노보아는 "일부 대형 폰트들은 컴퓨터 모니터에서는 쉽게 읽을 수 있지만, 모바일 기기에서는 축소나 렌더링이 잘 되지 않아, 의도한 모양과 느낌을 상실하곤 한다"고 말했다. 그는 보편적으로 많이 사용하는 폰트를 사용하라고 충고를 했다.

그루부 커머스(Groove Commerce)의 에단 지핀 CEO는 "쉽게 읽을 수 있는 11포인트 크기의 서체를 골라야 한다. 웹 폰트를 사용할 경우, 빠른 불러오기 시간을 위해 유사한 폰트 2개 이하를 사용해야 한다"고 말했다.

루리는 "넓이가 고정된 디자인을 사용하고 있다면 줄당 최대 15-20단어가 들어갈 수 있는 폰트 크기를 적용해야 한다. 넓이가 고정되지 않은 디자인의 경우, 900-1,000 픽셀 기준, 줄당 15-20 단어가 들어갈 수 있는 폰트 크기를 사용한다"고 충고했다.

8. 모든 페이지를 랜딩 페이지로 디자인한다
호스팅 VoIP, 클라우드 기반 PBX 서비스, 기업용 전화 시스템을 공급하고 있는 쇼어텔(ShoreTel, Inc.)의 검색 및 애널리틱스 부문 마이클 프리먼 수석 매니저는 "대부분의 웹사이트는 디자인을 할 때, 사용자가 홈 페이지를 통해 들어온 후 사이트를 네비게이션 한다고 가정한다. 그러나 실제, 대부분의 사이트에서 방문자 다수가 홈페이지가 아닌 페이지부터 네비게이션을 시작한다"고 말했다. 즉 방문자가 방문하는 페이지가 어디이든 핵심 정보를 위치시키는 방식으로 사이트를 디자인해야 한다.

9. 폴드를 중시한다
CIO닷컴이 디자인과 관련해 가장 도움이 되는 팁을 물었을 때 모든 디자이너들이 다음과 같은 대답을 즉시 내놓았다. '웹사이트 상단에 '호소하고자 하는 내용'을 전화번호 및 이메일 주소(고객이 전화나 이메일을 하도록 유도하고 싶을 경우)와 함께 배치한다.' 웹사이트 디자인 및 SEO(검색엔진 최적화) 서비스 회사인 리드허브(Leadhub)의 애론 와터스는 "홈페이지 이미지의 경우, 가로를 꽉 채우는 슬라이더 대신 가로의 2/3 정도를 차지하고 폴드(Fold) 위에 연락처를 집어 넣을 수 있는 이미지를 사용할 것을 권장한다"고 말했다.

10. 자동 조정되는 반응형 디자인을 사용한다
윅슨 주엘러스(Wixon Jewelers)의 제이미 프레체로프 온라인 마케팅 디렉터는 "기기 별로 사이트를 각각 개발하기 보다는 브라우저 크기에 조정되는 반응형 사이트를 디자인하면 사용자 체험을 높일 수 있다"고 충고했다. 이런 사용자 체험은 더 많은 사이트 방문 시간, 더 많은 구매 전환율로 이어진다.

11. 플래시는 잊어라
유저테스팅닷컴(UserTesting.com)의 다렐 베나타 CEO는 "어도비와 애플의 지속적인 갈등에 일부 기인해, 인터넷 표준 역할을 했던 플래시가 종말을 맞아가고 있다. 이런 상황에서, 또 더 웹 및 사용자 친화적인 대안이 있는데 대역을 많이 잡아먹는 플래시를 이용할 이유가 어디에 있겠는가?"라고 질문을 던졌다. 그는 HTML5를 대신 사용하라고 말했다. 베나타 CEO는 "HTML5를 지원하는 웹이 늘고 있다. 또 검색 엔진에도 친화적이고, 많은 모바일 운영 체제에서도 플러그인 없이 사용할 수 있다. 플래시는 그렇지 못하다"고 말했다.

12. 버튼을 명심한다
와터스는 "웹 양식 하단의 'Submit'이나 'Send' 버튼이 웹 사이트에서 가장 보기 싫은 부분이 될 수 있다"고 말했다. 그는 디자이너들이 양식의 '제출' 버튼을 디자인 할 때, 방문자들이 이를 클릭할 수 있도록 디자인해야 한다고 강조했다. 그는 "방문자들이 제출 버튼에 마우스를 가져다되면, 색상이나 그라데이션, 투명도, 폰트가 바뀌도록 해야 한다"고 말했다.

13. 디자인을 테스트한다
애틀란타에 위치한 인터랙티브 마케팅 대행 회사인 레드 클레이 인터랙티브(Red Clay Interactive)의 린지 마샬 생산 담당 디렉터는 "강조점을 달리 배치하는 문제이든, 색상 음영을 테스트하는 문제이든, 웹사이트 최적화가 수익에 큰 영향을 가져올 수 있다. 빙(Bing)의 사용자 체험 관리자 가운데 한 명은 마이크로소프는 파란색의 음영을 테스트하는 것만으로 연간 8,000만 달러의 추가 수익을 창출했다고 말한 적이 있다"고 말했다.

인터렉티브 생산 회사인 너드리(The Nerdery)의 마이크 존슨 사용자 체험 디렉터는 "디자인 결정은 결국 하나의 가설에 불과하다. 사용자 테스팅, A/B 비교 테스팅, 분석을 통해, 그리고 실제 사용자의 피드백을 통해 지속적으로 디자인을 개선해야 한다"고 충고했다. editor@itworld.co.kr



2013.06.07

기업 웹 사이트 디자인, 13가지 간단 팁

Jennifer Lonoff Schiff | CIO
웹사이트 방문자들이 방문 즉시 떠나기를 바라는가? 찾고 있는 것을 찾기 어렵게 만들고 싶은가?

그렇지 않다면, 방문자들이 당신의 웹사이트에 더 오래 머물면서 클릭을 하거나 제품과 서비스를 구입하게 만들고 싶은가? 그렇다면 다음 13가지 웹 디자인 팁을 적용해보기 바란다.

1. 세련된 회사 로고를 만들어 홈페이지와 연결시킨다.
온라인 마케팅 회사인 리치로컬(ReachLocal)의 수석 콘텐츠 마케팅 매니저인 티파니 몬홀론은 "로고는 브랜드에서 아주 중요한 역할을 한다. 따라서 눈에 잘 들어올 수 있도록 웹사이트에 위치시켜야 한다. 고해상도 이미지의 로고를 만들어 모든 페이지의 왼쪽 상단에 배치해야 한다. 또 방문자들이 쉽게 웹사이트를 둘러볼 수 있도록 로고를 홈페이지와 연결시키는 것이 좋다"고 말했다.

2. 직관적인 내비게이션을 활용한다
디지털 마케팅 회사인 인스파이어 비즈니스 컨셉트(Inspire Business Concepts)의 파트너 가운데 한 명인 브라이언 가티는 "사이트 상단을 따라 수직 메뉴 막대기 형태로 내비게이션 메뉴를 배치하는 사례가 많다. 이 주 내비게이션 매뉴 아래 또는 사이트 왼쪽에(일명 사이드바) 두 번째 네비게이션 메뉴를 제공하기 바란다"고 말했다.

직관적인 내비게이션이 왜 중요할까? 가티는 "혼동을 주는 내비게이션 레이아웃은 사람들이 해당 페이지를 떠나도록 만든다. 따라서 중요한 정보나 행위에 방해가 되는 덜 중요한 페이지 링크를 홈페이지 또는 다른 페이지의 상단에 위치시켜서는 안 된다. 중요하지 않은 링크나 정보는 페이지 바닥에 위치시키는 것이 좋다"고 말했다.

3. 어수선하게 만들지 말자
디지털 마케팅 대행 회사인 드래곤서치(DragonSearch)의 선임 디지털 마케팅 전략가인 파올로 비달리는 "최근 이미지를 지나치게 많이 넣는 사례가 많다. 선택할 이미지 정보가 너무 많아 두뇌가 정보 처리를 멈출 지경이다”라고 말했다.

방문자를 사이트에 계속 잡아두기 위해서는 너무 많은 액션이나 비주얼 클러터(예, 많은 그래픽, 사진, 애니 GIF 등)를 배치하지 말아야 한다. 방문자가 가장 중요한 정보에 집중을 하도록 하기 위해서다”라면서, “클러터를 더 줄이기 위한 방편 가운데 하나로 헤더나 푸터의 링크나 옵션을 제한하는 방법을 고려할 수 있다"고 덧붙였다.

페이지를 간결하게 만드는 또 다른 팁이 있다. 인터넷 마케팅 회사인 포텐트(Portent, Inc.)의 이안 루리 CEO는 "단락을 간결하게 유지해야 한다. 대부분의 웹사이트에서 단락은 최대 5-6줄 이내여야 한다"고 충고했다.

4. 방문자에게 '숨을 돌릴 공간'을 제공한다
웹 디자인 및 온라인 마케팅 대행 회사인 코얼리션 테크놀러지스(Coalition Technologies)의 한나 스펜서 그래픽 디자이너는 "단락과 이미지 사이에 충분한 공간을 배치, 방문자가 여유를 갖고 사이트나 기업이 제공하는 기능을 더 많이 흡수할 수 있도록 해야 한다"고 충고했다.

노보아 미디어(Novoa Media)의 설립자이자 CEO인 폴 노보아는 "사용자가 콘텐츠에 집중하고, 사용자의 흐름을 통제할 수 있도록 레이아웃 전반에 걸쳐 여백을 관리해야 한다. 웹과 모바일 환경에 비주얼이 넘쳐나고 있는 상황에서 간결할 수록 더 장점이 있다. 여백을 잘 관리하면 사용자 체험을 개선해 웹사이트를 통한 수익을 늘릴 수 있다"고 말했다.

5. 색상을 전략적으로 사용한다.
엑스페디아(Expedia) 그룹의 출장 여행 사업 부문인 에젠시아(Egencia)의 웹 디자인 책임자인 마크 호벤은 "중성색을 사용해야 사이트를 더 우아하고, 깨끗하고, 현대적으로 보이게 할 수 있다. 제목이나 중요한 그래픽에 작은 칼라 대시를 사용하면 방문자들을 가장 중요한 콘텐츠로 유도할 수 있다"고 설명했다.

또 로고를 보완하고, 다른 마케팅 자료와 일치하는 색상을 사용하는 것도 중요하다.

6. 양질의 전문 사진에 투자를 한다
패런하이트 마케팅(Fahrenheit Marketing)의 제인 슈와르츠로스 홍보 책임자는 "웹 사이트 방문자들은 1초 이내에 평범한 사진들을 알아볼 수 있다. 그러면 당신 회사도 평범하다고 생각할 것이다. 그러나 당신 회사는 평범하지 않다. 그렇다면 전문 사진에 투자를 해, 이를 방문자에게 보여줘야 한다"고 말했다.

가티는 "우리는 고객들에게 전문 사진에 투자를 하고, 전문 사진들을 대량 구입할 것을 권고하고 있다. 좋은 사진은 사람들의 시선을 끈다. 그리고 콘텐츠에 동화를 시키는 역할을 한다"고 설명했다. 전달하려고 하는 메시지와 관련이 없는 사진이나 품질이 나쁜 사진은 사진을 아예 사용하지 않는 것보다 더 나쁘다.

사진과 관련해 한 가지 팁이 더 있다. 고객과 방문자를 실시간으로 분석해주는 서비스를 제공하는 우프라(Woopra)의 공동 창업자이자 CEO인 엘리 쿠리는 "특정 콘텐츠나 '버튼'으로 관심을 유도하고 싶다면 해당 콘텐츠를 응시하고 있는 사람의 사진을 포함시켜라. 사람이란 다른 사람의 얼굴에 즉시 시선이 가기 마련이다. 또 그 사람이 응시하고 있는 대상에도 눈길을 주게 된다"고 설명했다.

7. 기기와 브라우저 전반에 걸쳐 읽기 편한 폰트를 선택해 사용한다
폰트를 선택할 때 유념할 부분이 있다. 사람들이 노트북 컴퓨터는 물론 모바일 기기를 이용해서도 웹사이트를 방문, 확인한다는 것이다. 노보아는 "일부 대형 폰트들은 컴퓨터 모니터에서는 쉽게 읽을 수 있지만, 모바일 기기에서는 축소나 렌더링이 잘 되지 않아, 의도한 모양과 느낌을 상실하곤 한다"고 말했다. 그는 보편적으로 많이 사용하는 폰트를 사용하라고 충고를 했다.

그루부 커머스(Groove Commerce)의 에단 지핀 CEO는 "쉽게 읽을 수 있는 11포인트 크기의 서체를 골라야 한다. 웹 폰트를 사용할 경우, 빠른 불러오기 시간을 위해 유사한 폰트 2개 이하를 사용해야 한다"고 말했다.

루리는 "넓이가 고정된 디자인을 사용하고 있다면 줄당 최대 15-20단어가 들어갈 수 있는 폰트 크기를 적용해야 한다. 넓이가 고정되지 않은 디자인의 경우, 900-1,000 픽셀 기준, 줄당 15-20 단어가 들어갈 수 있는 폰트 크기를 사용한다"고 충고했다.

8. 모든 페이지를 랜딩 페이지로 디자인한다
호스팅 VoIP, 클라우드 기반 PBX 서비스, 기업용 전화 시스템을 공급하고 있는 쇼어텔(ShoreTel, Inc.)의 검색 및 애널리틱스 부문 마이클 프리먼 수석 매니저는 "대부분의 웹사이트는 디자인을 할 때, 사용자가 홈 페이지를 통해 들어온 후 사이트를 네비게이션 한다고 가정한다. 그러나 실제, 대부분의 사이트에서 방문자 다수가 홈페이지가 아닌 페이지부터 네비게이션을 시작한다"고 말했다. 즉 방문자가 방문하는 페이지가 어디이든 핵심 정보를 위치시키는 방식으로 사이트를 디자인해야 한다.

9. 폴드를 중시한다
CIO닷컴이 디자인과 관련해 가장 도움이 되는 팁을 물었을 때 모든 디자이너들이 다음과 같은 대답을 즉시 내놓았다. '웹사이트 상단에 '호소하고자 하는 내용'을 전화번호 및 이메일 주소(고객이 전화나 이메일을 하도록 유도하고 싶을 경우)와 함께 배치한다.' 웹사이트 디자인 및 SEO(검색엔진 최적화) 서비스 회사인 리드허브(Leadhub)의 애론 와터스는 "홈페이지 이미지의 경우, 가로를 꽉 채우는 슬라이더 대신 가로의 2/3 정도를 차지하고 폴드(Fold) 위에 연락처를 집어 넣을 수 있는 이미지를 사용할 것을 권장한다"고 말했다.

10. 자동 조정되는 반응형 디자인을 사용한다
윅슨 주엘러스(Wixon Jewelers)의 제이미 프레체로프 온라인 마케팅 디렉터는 "기기 별로 사이트를 각각 개발하기 보다는 브라우저 크기에 조정되는 반응형 사이트를 디자인하면 사용자 체험을 높일 수 있다"고 충고했다. 이런 사용자 체험은 더 많은 사이트 방문 시간, 더 많은 구매 전환율로 이어진다.

11. 플래시는 잊어라
유저테스팅닷컴(UserTesting.com)의 다렐 베나타 CEO는 "어도비와 애플의 지속적인 갈등에 일부 기인해, 인터넷 표준 역할을 했던 플래시가 종말을 맞아가고 있다. 이런 상황에서, 또 더 웹 및 사용자 친화적인 대안이 있는데 대역을 많이 잡아먹는 플래시를 이용할 이유가 어디에 있겠는가?"라고 질문을 던졌다. 그는 HTML5를 대신 사용하라고 말했다. 베나타 CEO는 "HTML5를 지원하는 웹이 늘고 있다. 또 검색 엔진에도 친화적이고, 많은 모바일 운영 체제에서도 플러그인 없이 사용할 수 있다. 플래시는 그렇지 못하다"고 말했다.

12. 버튼을 명심한다
와터스는 "웹 양식 하단의 'Submit'이나 'Send' 버튼이 웹 사이트에서 가장 보기 싫은 부분이 될 수 있다"고 말했다. 그는 디자이너들이 양식의 '제출' 버튼을 디자인 할 때, 방문자들이 이를 클릭할 수 있도록 디자인해야 한다고 강조했다. 그는 "방문자들이 제출 버튼에 마우스를 가져다되면, 색상이나 그라데이션, 투명도, 폰트가 바뀌도록 해야 한다"고 말했다.

13. 디자인을 테스트한다
애틀란타에 위치한 인터랙티브 마케팅 대행 회사인 레드 클레이 인터랙티브(Red Clay Interactive)의 린지 마샬 생산 담당 디렉터는 "강조점을 달리 배치하는 문제이든, 색상 음영을 테스트하는 문제이든, 웹사이트 최적화가 수익에 큰 영향을 가져올 수 있다. 빙(Bing)의 사용자 체험 관리자 가운데 한 명은 마이크로소프는 파란색의 음영을 테스트하는 것만으로 연간 8,000만 달러의 추가 수익을 창출했다고 말한 적이 있다"고 말했다.

인터렉티브 생산 회사인 너드리(The Nerdery)의 마이크 존슨 사용자 체험 디렉터는 "디자인 결정은 결국 하나의 가설에 불과하다. 사용자 테스팅, A/B 비교 테스팅, 분석을 통해, 그리고 실제 사용자의 피드백을 통해 지속적으로 디자인을 개선해야 한다"고 충고했다. editor@itworld.co.kr

X