웹사이트를 만들 때 간과하기 쉽지만 중요한 사항 7가지

온라인 접점이 없이 사업을 하는 것은 밥을 안먹거나 잠을 안 자고 살아갈 수 있다는 말처럼 상상하기 힘들어졌습니다. 거의 모든 회사가 온라인에서 무언가를 해놓고 있습니다. 아직까지는 네이버, 페이스북, 인스타그램, 유튜브 등의 플랫폼에 의존하는 경향이 강하지만, 앞으로는 고유매체가 점점 더 중요해질 것입니다.
지금도 웹사이트가 중요하다고 느끼는 회사는 이미 많습니다. 하지만 마케팅 관점에서 현재 웹사이트 제작의 수준은 극히 낮습니다. 마케팅을 위해 웹사이트를 어떻게 쓸지 제대로 이해하고 고민하지 못한 상태에서 웹사이트를 만들어온 관행이 오랫동안 지속되어왔기 때문입니다.
많은 웹사이트들이 영화나 방송촬영의 세트장, 혹은 테마파크에서 외벽만 있고 뒷면은 아무 것도 없는 형태처럼 제작되고 유지됩니다.

이번 글에서는 마케팅의 중추가 되는 웹사이트를 만들 때 간과하기 쉬운 8가지 사항을 이야기합니다.

1. 구조

1) 콘텐츠 관리 시스템

문제상황

웹사이트도 소셜미디어 플랫폼처럼 지속적으로 콘텐츠가 올라가야 합니다. 커머스 웹사이트는 상품이 바뀌기 때문에, 그리고 지속적인 업데이트가 매출에 직접 영향을 주기 때문에 관계자들이 콘텐츠 관리 시스템의 중요성을 많이 이해합니다. 그러나 커머스 기능이 없는 웹사이트의 관계자들의 대부분은 이 점을 이해하지 못합니다.
콘텐츠 업로드가 빈번하지 않더라도, 회사의 상황 변화에 따라 타깃 방문자나 이들에 대한 메시지는 조금씩 바뀌어야 할 때가 많습니다. 그러나 처음부터 콘텐츠 관리 시스템을 고려하지 않고 웹사이트를 만든 경우 사소한 내용변경도 복잡하고 어렵습니다.

해결책

콘텐츠 관리 기능이 잘 되도록 웹사이트를 만들어야 합니다. 물론 어지간한 예산으로는 제대로 된 관리기능까지 개발하기 어렵고, 관리 시스템을 따로 만들어야 할 정도의 회사는 드뭅니다.
워드프레스로 웹사이트를 만들면 콘텐츠 관리 시스템 문제는 99.9% 해결됩니다. 워드프레스로 웹사이트를 만들었다면 관계자들은 기본적으로 콘텐츠를 업로드하고 수정할 수 있는 업무체계를 구축하는 일이 중요합니다.

2) 사이트 구조

문제상황

여기서 말하는 사이트 구조는 사용자 스토리/사이트 UX, 더 쉽게 말하면 페이지 메뉴구성 입니다. 언뜻 생각하기에는 쉽지만 제대로 하려면 어렵습니다. 한 쪽 짜리 글의 수준이 모두 다르듯이, 겉으로 보기엔 간단한 일을 제대로 하기는 어렵습니다.
사이트 구조는 사용자가 웹사이트를 처음 방문하여 나가는 여러 접점들의 형태와 역할을 설계하고 이해하는 능력이 필요합니다. 또한 사용자가 웹사이트를 통해 이루고자 하는 목표와 회사가 웹사이트를 통해 이루고자 하는 목표를 명확하게 이해해야 합니다. 그리고 이 둘에 모두 부합하는 사용자흐름(사이트 구조)를 규명하여 구현해야 합니다.

해결책

커머스 기능이 있는 웹사이트라면 이용자가 다른 곳이 아니라 이 웹사이트를 찾는 정확한 이유를 찾고, 그 이유에 부합하도록 페이지와 기능을 구성해야 합니다. 커머스 기능이 없는 웹사이트라면 웹사이트가 회사 소개서라고 생각하되 인터랙티브하고 입체적으로 내용을 구성한다고 생각하면 좋습니다.
내용을 나열하고 상위와 하위 페이지, 전면 페이지에 들어갈 내용을 층위에 맞게 조직하고 조정해나가는 일을 계속 해야 합니다. 이 작업은 생각보다 오래 걸릴 수도 있습니다. 웹사이트 구조도 콘텐츠 업데이트 같은 관점에서 필요에따라 바꾸고, 사용자의 반응을 테스트하며 가장 좋은 방안을 찾아나가는 환경이 이상적입니다.

3) 페이지 구조

문제상황

페이지 구조는 검색엔진 최적화에 중요합니다. 사람이 보기에 똑같은 형태라도 어떤 것은 검색엔진이 정확히 이해하며 어떤 것은 전혀 이해하지 못합니다.
많은 웹사이트들이 이 페이지 구조를 제대로 지키지 않습니다. 텍스트를 이미지화하는 것,헤더나 본문을 구분하지 않는 것이 대표적인 예입니다. 이런 식으로 웹사이트와 콘텐츠를 만들면 검색엔진 최적화에서는 성공하기 힘듭니다. 물론 이정도로 웹, 콘텐츠, 온라인에 대한 이해가 없다면 마케팅 자체도 잘 안 될 것입니다.

해결책

이미지-텍스트

텍스트는 텍스트로, 이미지는 이미지로 써야 합니다. 국내에서 랜딩페이지나 상세페이지를 만드는 관습과는 동떨어져있지만, 이것이 정석입니다. 오픈마켓이나 상품 페이지를 위해 만든 상세페이지가 있어도, 경우에 따라서는 검색엔진 최적화를 위해 재가공해야 합니다. 웹사이트 배너에 들어가는 텍스트를 이미지로 만드는 일은 하지 말아야 합니다.

텍스트

텍스트 헤더 태그를 제대로 지켜 써야 합니다. 타이틀과 헤더에 맞게 h1, h2, h3 태그, 본문을 구분해서 쓰세요.

2. 웹사이트의 내부

1) 속도

문제상황

시각적으로 매력적인 웹사이트, 혹은 이런 저런 기능이 많은 웹사이트를 만들려다보면 css와 자바스크립트 등을 복잡하게 사용해야될 때가 있습니다. 호스팅이나 사이트 내 콘텐츠 형태도 속도에 영향을 줍니다.
웹사이트가 느리면 방문자가 이탈합니다. 이탈하지 않고 인내력인 방문자에게도 회사에 대해 안 좋은 인상을 주게 됩니다.
웹사이트 제작의 여러 단계를 거치다보면 속도 문제를 간과하기 쉽습니다. 최종 검수 단계에서 담당자는 여러번 해당 사이트에 접속했기 때문에 캐싱된 상태의 사이트, 즉 컴퓨터나 모바일폰에 내용이 다 저장되어 있는 것을 보게 되기 쉽습니다. 그러면 실제 첫 방문자가 경험하는 사이트 속도는 느리지만, 담당자들은 속도가 빠르다고 착각하게 됩니다.
웹사이트 속도에 영향을 주는 요인은 사이트 제작 외에도 많습니다. 호스팅과 도메인 문제, 온라인에서 웹 콘텐츠가 전달되는 과정 전반에 관한 이해가 없이 웹사이트 속도 개선은 힘듭니다.

해결책

우선 조심할 것은 구글 등의 사이트 속도 측정 툴입니다. 측정 툴에서 제안하는 속도개선 내용은 대체로 맞지만, 이런 측정 툴의 수치와 실제 웹사이트 속도는 큰 상관이 없는 때가 많습니다. 측정 툴의 점수를 맞추려다보면 사이트가 망가지기도 합니다. 속도를 측정할 때는 직접 여러 기기에서 속도를 살펴보세요. 측정 툴에서 점수가 나빠도 실제 속도가 빠르면 괜찮습니다.

a. 좋은 서비스와 툴 사용

속도에는 다양한 변수가 많기 때문에 한 가지를 집어 해결책으로 제시하기는 힘듭니다. 대체로는 좋은 호스팅과 도메인 서비스(저는 국내 서비스들은 기능이 부족하거나 기능에 비해 너무 비싸다고 봅니다), CDN, 이미지 처리와 호스팅, 워드프레스의 경우 적절한 캐싱 툴 등을 조합하여 사용하면 됩니다. 속도에 대해 신경쓰는 에이전시를 찾는 것도 간단한 방법입니다.

2) 보안

문제상황

보안이 되어 있지 않은 웹사이트는 안전하지 않습니다. 다양한 이용정보가 그대로 노출되어 있기 때문에, 가능성은 적지만 어떤 피해가 생길지 모릅니다. 보안 없는 웹사이트를 이용하는 일은 헬멧을 쓰지 않고 오토바이를 타는데 여태까지 사고가 안 났으니까 괜찮다고 생각하는 것과 비슷합니다.
그러나 국내 이용자들과 회사는 이 부분에 대해 크게 걱정하지 않는 듯합니다. 보안이 안 되어 있는 웹사이트가 아직도 많은 것을 보면요. 마케팅에서 웹사이트 보안이 중요한 이유는, 보안으로 인한 피해 외에도 인상의 문제입니다. 저는 보안 안 된 웹사이트를 방문하게 되면 ‘이 회사는 이렇게 간단한 것도 안 하는구나’라는 생각을 제일 먼저 하고, 회사에 대한 신뢰도를 매우 낮춥니다.

해결책

웹사이트 보안에 대한 글로 내용을 대체합니다.
웹사이트 보안 (SSL 인증, https)이 마케팅에서 중요한 3가지 이유 – Ballast I&C

기타

기타 사항들은 중요하지만 특정 유형으로 묶기 힘든 내용들입니다.

1) 이미지 처리

문제상황

이미지는 위에서 언급한 여러 가지와 모두 관련이 있습니다. 개념적으로는 별도 항목이 안 되지만, 여러 가지와 관련이 있기 때문에 중요해서 따로 언급합니다. 보통 웹사이트 콘텐츠에 들어가는 이미지는 열심히 작업합니다. 그러나 작업 과정에서 사이트의 속도, 검색엔진과의 관련성 까지는 잘 생각하지 않습니다. 많은 웹사이트에 있는 이미지들이 눈에는 멀쩡해보이지만 웹사이트와 검색엔진에는 안 멀쩡합니다.

해결책

a. 이미지 대체 텍스트

특별한 경우가 아니면 이미지 대체 텍스트를 사용합니다. 이미지 대체 텍스트는 검색엔진이 그 이미지의 키워드를 이해할 수 있게 해줍니다.

b. 웹용 해상도와 크기 조절

이미지의 크기와 해상도를 웹용으로 맞춥니다.
별도 이미지 호스팅과 최적화 툴 사용
이미지는 용량을 많이 차지합니다. 따라서 웹 서버나 호스팅에 그대로 이미지를 업로드하여 사용하면 사이트가 성장할수록 부담이 커집니다. 이미지는 별도 호스팅에 저장하고 웹사이트에서 해당 이미지를 최적화하여 불러올 수 있도록 하면 좋습니다. 예를 들어, 밸러스트는 아마존 S3를 imgix 와 연결하고, 이것을 다시 웹사이트에서 설정하여 사용합니다.

2) 모바일

문제상황

모바일에서 제대로 보이지 않는 웹사이트는 아무리 잘 만들고 잘 운영하고 있어도, 방치된 느낌을 강하게 줍니다.

해결책

해결책은 둘 중 하나입니다. 모바일용 사이트를 별도로 만들거나, 반응형으로 웹사이트를 만드는 것입니다. 장단점이 있지만, 저는 반응형 웹사이트를 선호합니다. 반응형 웹사이트를 만들면 별도 모바일 도메인이 필요없고, 이에따른 웹사이트와 콘텐츠 관리도 필요 없습니다.

웹사이트를 유기하지 말 것

인기 연예인이 반려동물을 유기하거나 인간적 관계에 따른 책임을 회피한 전력이 있고 알려진다면 이후 활동은 매우 힘들 것입니다. 웹사이트를 잘못 만들고 제대로 관리하지 않는 회사도 티가 당장 안 나고 좀 덜 날 뿐 이와 비슷한 인상을 줍니다.

소셜미디어에 이 글 공유하기
뉴스레터 구독하기

밸러스트의 새로운 인사이트 업데이트를 이메일로 받아보세요!