[양재혁의 와인IT] 와인 관련 웹사이트 제작, 그 기본에 충실하자

[양재혁의 와인IT] 필자는 1996년부터 IT업계에서 근무하다가 최근 ‘와인과 IT의 결합’이라는 주제로 창업해 열심히 서비스 준비 중인 스타트업 대표입니다.

앞으로 격주에 한번씩 와인 분야에서의 IT 관련 내용을 담고자 합니다. 컬럼 관련해서 궁금한 점은 언제든지 메일로 문의 주시기 바랍니다.

와인 관련 웹사이트 제작, 그 기본에 충실하자.

저도 IT업계에만 있다가 ‘운명적으로' 와인 관련된 일을 시작하게 되면서, 와인 업계에 있는 회사 들의 웹사이트를 많이 보게 됐는데, 제가 받은 인상은 ‘IT 지식에 대한 부분이 많이 부족한 것 같다' 라는 것이었습니다. 물론, 이건 비단 한국만의 문제는 아니고, 가까운 일본 그리고 전 세계적으로 ‘와인에 대한 정보화' 그 자체가 많이 부족한 것 같습니다.

오늘은 그 중에서는 ‘기본에 충실하자' 라는 내용으로 시작으로 하려고 합니다. 우리는 흔히 ‘기본으로 돌아가라'라는 말을 많이 하곤 합니다. ‘기본을 지키는 일'이 굉장히 중요하면서도 실제로는 하기가 어려워서 생긴 말일지도 모르겠습니다.

실제로 ‘기본'을 지키는 일은 상당히 귀찮고 피곤한 일이지만, 이 기본을 제대로 지키기만 한다면 여러 가지로 좋은 점이 많습니다.

예를 들어, 돈 한푼도 안 들여도 검색엔진에서 최상단에 우리 회사 웹사이트 URL이 나오게 되고, 새로운 모바일 디바이스가 나와도 아무런 작업 없이 그대로 잘 표시되고, Wifi 환경이건 LTE환경이건 상관 없이 빠르게 웹사이트가 표시되는 등 다양한 긍정적 효과를 얻을 수 있습니다.

앞으로 언급할 부분들은 이러한 ‘표준 준수'에 대한 부분으로 여러분의 웹사이트가 좀 더 많은 사람에게 잘 노출될 수 있도록 도와줄 것이라고 감히 말씀 드립니다.

첫째, 플래시(Flash) 기술을 이용해서 사이트 메뉴나 애니메이션 효과를 낸 사이트들이 아직도 종종 보이는데, 당장 해당 부분을 버리고 표준에 의거해서 웹 사이트를 만들기 바랍니다. 이 기술은 이제 끝난 기술로 모바일에서도 제대로 표시되지 않고, 모든 서비스 제공 업체들이 ‘서비스 종료' 형태로 가고 있습니다.

▲ 오래된 플래시 기술 사용한 예 : 와인 소개 사이트에서 메인 비주얼 부분을 어도비 사의 플래시 기술로 구현한 모습. 마이크로소프트를 비롯 여러 브라우저에서도 서비스 종료 예정임.

만약 아직도 상기 화면과 같이 플래시를 사용하고 계시다면 과감하게 교체하시길 권고합니다. 여러 가지 면에서 좋지 않습니다. 당장 바꾸도록 하십시오.

둘째, 이미지 사용에 있어서 주의하시기 바랍니다. 구체적인 예로는 정말 큰 크기의 이미지를 사용한다거나, 이미지에 많은 내용들을 담는데 비해 실제로 해당 이미지가 어떤 내용을 가지고 있는지 설명을 하는 ‘대체 텍스트(ALTernative Text)'를 입력하지 않는 등의 문제입니다.

아래의 이미지는 브로셔 작업 등을 위해서 작업했던 내용을 이메일에 첨부해서 그대로 보낸 경우. 약 2.3MB 크기로 5G 시대에 사는데 무슨 상관이냐 할지 모르겠지만, 최적화를 통해 사이트가 빠른 부분에 사람들이 얼마나 민감한지 모르고 하는 소리입니다. 서비스에 지장이 없는 한, 항상 최적화에 노력을 기울여야 합니다.

▲ 부적절한 큰 이미지 사용

위의 그림처럼 큰 이미지를 보내는 경우. 디자인 할 때 브로셔 형태로 작업했던 것을 웹 용으로 별도 가공하지 않고 그냥 그대로 사용한 것으로 추정됨. 디바이스에 맞게 작업을 하거나, 여러 개 이미지로 분할하는 등 최적화 노력을 해야 함.

다음 화면은 에노테카코리아에서 이벤트로 사용한 이미지입니다. 이미지 크기도 크기이고, 해당 행사에 대한 내용 관련해서 이미지를 설명하고 있는 자세한 설명이 별도로 입력되어 있지 않고 이미지로만 표현되어 있습니다. 이럴 경우, 사람은 이미지를 읽고 그 내용을 알 수 있지만, 검색엔진과 같은 시스템은 이미지라고만 인지하지, 저 이미지 안에 어떤 내용이 있는지 알 수 없어서 그 내용을 검색할 수가 없습니다.

▲ 대체 텍스트 없는 이미지

에노테카코리아 이벤트 행사는 이미지에 와인 명을 포함한 정상 가격 등 많은 내용이 포함되고 있어 사람은 인지할 수 있으나, 컴퓨터는 인지할 수 없으며 단순 이미지로만 인식한다.

▲ 대체 텍스트 없는 이미지 HTML 소스 코드

상기 에노테카코리아 이벤트 행사 적용된 이미지 HTML 소스 코드로 이미지를 설명하는 부분에 대한 ‘대체 텍스트(ALT Text)’ 태그가 없어서 해당 이미지에 대한 설명이 없다. 그나마 하단에 해시태그가 있지만, 이 해시태그만으로는 해당 이미지의 내용을 잘 설명해줄 수 없다.

만약 저 이미지에 있는 부분도 검색엔진에서 검색되길 원한다면 해당 이미지를 표시하는 부분 옆에 ALT=”” 형태로 안에 해당 내용을 텍스트로 입력해두어야 검색엔진이 그 부분을 검색할 수 있게 됩니다. 귀찮더라도 반드시 입력해줘야 하는 부분이고, 만약 관리툴(어드민) 시스템을 사용하고 있다면 이러한 이미지에 대한 설명 부분을 반드시 입력해주시기 바랍니다.

셋째, 잘못 만들어진 웹사이트들도 있습니다. WineOK.com의 경우에는 특이하게 페이지 로드할 때 3.5초에서 4초 정도 지연이 되는 현상이 있습니다. 브라우저 캐시 때문에 빠르게 보이는 것 같지만, 기본적으로 페이지를 서버에서 만드는 과정이 무슨 이유에서인가 매번 일어나게 되어 항상 3-4초의 시간이 걸리는 문제입니다.

▲ 잘못 만들어진 사이트 예 WineOK : WineOK.com의 시간 지연 부분은 특정 페이지를 데이터베이스에서 불러와서 페이지 만드는 과정이 약 3.5초 정도 걸리는 지연 현상 발생.

이러한 문제는 실제로 외부에서 해당 서비스 내부의 구체적인 부분은 알 수 없기에 단언하기 어렵지만, 아마도 잘못된 데이터베이스 사용으로 인해서 생기는 문제로 판단됩니다.

다음, ‘씨에스알와인’의 ‘The VIN CSR’의 사이트는 사이트 자체는 깔끔하게 만들었지만, 데이터 처리 부분을 잘못 설계해서 사이트 전반에 걸쳐 느린 사이트로 구성되었습니다.

▲ 잘못 만들어진 사이트 예 CSR : VIN CSR에서는 웹사이트 오픈소스 기반의 저작도구인 ‘워드프레스(WordPress)’의 API를 잘못 사용해서 사이트 전반적으로 속도가 느리게 만들어져 있음.

수입하고 있는 와인이 많은 반면 마우스가 아래로 움직일 때마다 로딩 되는 ‘동적 로딩’ 형태로 구현을 하다 보니 정보를 찾는 것이 쉽지 않습니다. 워드프레스 구축 전문가 수배를 통해서 사이트 최적화를 통해 사용자들이 훨씬 빠르게 정보를 확인할 수 있도록 개선하기 바랍니다.

넷째, 검색엔진 최적화 기법인 ‘SEO (Search Engine Optimization)’가 거의 작업되어 있지 않습니다. 검색엔진에서 특정 와인이나 브랜드로 검색했을 때 검색결과에 자신의 웹사이트가 첫번째 페이지 내에 나오지 않는다면 뭔가 잘못되었다고 생각해도 무방합니다.

특히, 이러한 부분은 와인 소개나 설명 부분에서 특히 두드러지는데, 와인서처 (wine-searcher.com)나 비비노(vivino.com)와 같은 글로벌 와인 검색 기업들이 이러한 와인 관련 정보를 최상단에 표시하기 위해서 SEO에 노력하는 부분을 충분히 벤치마킹 하고 이를 적용하기 위해서 노력해야 합니다.

▲ SEO 적용 사례 - Pahlmeyer Jason Cabernet Sauvignon 입력했을 때 모습. 와이너리 보다 상단에 위치하여 표시하는 와인서처와 비비노의 모습. 별도의 마케팅 비용을 들이지 않고 표준과 SEO에 신경 쓰는 것으로 검색 결과의 최상단에 위치시킬 수 있는 모습.

다섯째, 웹 사이트 품질과 사용자 편의성 고려 부족입니다. 실제로 와인 업계 전반적으로 웹 사이트에 대한 품질이나 편의성 부분이 많이 부족한 것이 사실입니다. 이러한 부분에 대해서 일일이 지적하기는 어렵고, 사이트 개편 시에 비전문가 보다는 다소의 예산을 들여서라도 웹 에이전시나 뷰저블(https://www.beusable.net/), 몬캣(https://www.moncat.co.kr) 등의 서비스를 이용 하시길 권장합니다. 그리고 가능하면 현재의 사이트를 수정하기 보다는 사이트 개편 시에 적극적으로 검토 하시길 바랍니다.

▲ UI/UX 개선 사이트

위의 그림은 뷰저블 서비스 화면으로, UX에 대한 원인 분석 서비스 개선을 할 수 있습니다. 간단한 사이트의 경우라면 2주간 무료이니 꼭 사용해 보시기 바랍니다.

지금까지 다섯 가지 큰 사례를 통해서 웹 사이트 제작에 있어서 기본을 지키지 않아서 생긴 문제와 간단한 그 해결책에 대해서 알아보았습니다. 실제로 더 많은 잘못된 부분과 기본을 지키지 않아서 생기는 문제들이 있지만, 지면 관계상 이번에는 이 정도로만 언급하고 다음에 또 별도로 지면을 할애해서 살펴보도록 하겠습니다.