드디어 홈페이지 제작과는 1도 관련 없는 비전공자로써, 한 중소기업의 대표로서 도전했던 홈페이지 제작기가 끝이 났다. 이게 완전한 끝은 아니다. 이것을 시작으로 직접 수출기업으로 거듭나기 위해 영문 홈페이지 작업도 시작할 예정이다. 이제 막 한글 홈페이지가 끝난 정도이지만, 많은 것을 배울 수 있었고 또 멋진 홈페이지를 얻게 된 뜻깊은 시간이었다.

2월 1일부터 한 달이 조금 넘는 시간 동안 업무 외 시간을 주로 투자하여 7년 묵은(?) 홈페이지 리뉴얼에 도전을 했다. 목표했던 한 달이라는 기간은 넘었지만 처음에 예상했던 것과는 차원이 다른 퀄리티의 결과물이 나왔다. 내용도 기능도 훨씬 추가된 것을 고려하면 이 정도 시간은 오히려 예상보다 더 빨리 끝낸 것이다.

그러면 기분 좋은 마음으로 어떤 홈페이지가 탄생했는지 나눠보겠다.

1. 모바일 최적화

기존 홈페이지(좌) 새로 개편된 홈페이지(우)

이렇게 보면 예전 홈페이지가 뭔가 더 많은 정보를 주고 있는 것 같이 보인다. 그렇지만 이전 홈페이지는 저 화면에서 보이는 것이 전부이고 새로 개편된 홈페이지는 가장 중요한 공지사항을 화면 중앙에 배치하여 집중받을 수 있도록 했다. 또 스크롤을 내리면 공시 블로그와 유튜브의 콘텐츠들이 올라온다. 그리고 가장 다른 것은 바로 반응형 홈페이지라는 것이다.

기존 홈페이지 모바일 화면 (좌) 개편 홈페이지 모바일 화면(중간) 개편 홈페이지 풀다운 메뉴(우)

기존 홈페이지의 경우 PC와 동일하게 화면이 나타난다. 그래서 확대를 해서 각 메뉴를 눌러야 했다. 7년 전 플래시의 호환성이 안 좋은 것을 고려해서 플래시를 쓰지 않은 것이 그나마 다행이라 생각한다. 모바일 접속이 PC 접속과 비교가 되지 않을 만큼 많은 요즘, 모바일 최적화를 했다는 것은 거의 없었던 홈페이지를 새로 만든 것이나 다름없는 정도라고 볼 수 있다.

2. 간편한 회원가입 그리고 편리한 제품 정보 확인

%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85_%EC%A0%95%EB%B3%B4%EC%9E%85%EB%A0%A5.jpg?type=w1

개편된 홈페이지에 회원가입을 위해 필요한 시간은 단 50초다. 우리는 살면서 1인당 ID/PW가 적게는 2~30개 많게는 100개가 넘어갈 정도로 '회원가입'을 많이 한다. 그래서 '회원가입'이라는 단어만 봐도 왠지 귀찮고, 적을게 많으면 가입을 하지 않게 된다. 홈페이지에서도 고객 경험을 높이기 위해 회원가입을 위한 시간을 최대한 줄이고자 했다. 그래서 고객의 소중한 시간을 아끼면서도 정보 보호도 할 수 있도록 최소한의 정보만으로 가입을 할 수 있도록 했다. 기기별로 잘 되지 않는 경우도 있는 까다로운 주소 찾기, 상세 주소 적기, 이메일 입력 및 인증, 성별 및 생년월일 입력 등과 같은 불필요한 정보 입력을 싹 없앴다.

%EC%A0%9C%ED%92%88%EB%93%B1%EB%A1%9D.jpg?type=w1

%EC%A0%9C%ED%92%88%EB%93%B1%EB%A1%9D_%EC%9E%85%EB%A0%A5%EC%B0%BD.jpg?type=w1

제품 관리를 위한 간편한 제품 정보 등록

간단하게 회원가입을 하면 우측 상단에 있는 '마이페이지'를 통해 제품 등록과 회원정보 수정이 가능하다. 이렇게 등록한 제품 정보에 따라 A/S 방문 전/후 안내, 제품 관리 시기 등 고객에게 유용한 정보를 알려드릴 예정이다. 아직 구매 전 고객분들도 소식받기를 체크하면 다양한 이벤트, 신제품 정보를 받을 수 있도록 했다.

3. 네이버 스토어팜과 연계를 통한 간편 제품 가격확인

%EB%AA%A8%EB%B0%94%EC%9D%BC_%EB%A9%94%EB%89%B4.jpg?type=w1

%EB%AA%A8%EB%B0%94%EC%9D%BC_%EC%8A%A4%ED%86%A0%EC%96%B4%ED%8C%9C.jpg?type=w1

%EB%AA%A8%EB%B0%94%EC%9D%BC_%EC%8A%A4%ED%86%A0%EC%96%B4%ED%8C%9C2.jpg?type=w1

많은 회사들이 여러 이유로 자사몰을 구축하여 활용한다. 그렇지만 나 역시도 쇼핑을 할 때 네이버 쇼핑을 가장 많이 활용하고 N페이가 워낙 편리해서 선호한다. 특히나 자주 들어오지도 않는 물건을 사려고 불편한 회원가입을 하고, 잘 작동하지도 않는 결제 페이지를 꾸역꾸역 활용하기는 정말 싫다.

결정적으로 우리 회사가 제조하는 자동차 튜닝부품은 핸드폰 케이스처럼 아무나 사서 핸드폰에 씌우기만 하면 되는 제품이 아니기 때문에 개인 구매가 굉장히 적은 편이다. 주로 제품 사양 확인, 가격 확인용으로 사용되기 때문에 자사몰을 구축할 필요가 없다고 판단했다. '사용자 편의'를 최우선으로 두었다. 그래서 제품 구매는 네이버 스토어팜으로 접속이 되도록 했다. 이렇게 접속해서 콘텐츠부터 제품 구매까지 불편함이 없도록 하는 것에 집중했고 '믿고 구매하실 수 있는' 신뢰를 드리고자 한 것이다.

4. 카카오톡 오픈 채팅 (1:1 문의), 다양한 소통 채널

기존에 고객 문의 게시판이 있었으나 여러 채널로 오는 메시지에 홈페이지의 게시판까지, 문의 가능한 채널이 불필요하게 많았다. 그래서 가장 활발하게 활용할 수 있고 또 고객에게는 최대의 편의를 줄 수 있는 오픈 채팅을 주 소통 창고로 삼기로 했다. 또 우리 회사같이 작은 회사의 SNS가 어떤 것들이 있는지 고객들이 다 알 수가 없다. 그래서 이런 정보를 보기 쉽게 한 번에 제공해줄 무언가가 필요했다. 'SNS' 메뉴를 구성해서 현재 운영하고 있는 다양한 채널들의 운영 목적을 알려드리고, 목적에 맞는 채널을 활용할 수 있도록 연결고리를 만든 셈이다.

5. 콘텐츠별 최적화된 소통 플랫폼 활용

%EC%B0%A8%EA%B3%A0%EC%84%B8%ED%8C%85_1.jpg?type=w1

최근에는 각 소셜 플랫폼들도 자신들이 강점이 있는 분야에 '최적화'되고 있다. 예를 들어 이렇게 여러 장의 사진과 텍스트를 함께 설명하려면 인스타그램, 페이스북은 부적합하며 텍스트를 유튜브에 올리는 것은 의미가 없다. 또 동영상을 블로그에 올리는 것보다는 유튜브에 올리는 것이 좋다. 물론 둘 다 올려도 상관은 없지만 말이다. 각 플랙폼들은 콘텐츠의 종류에 맞게 특징이 있고 가장 적합한 콘텐츠를 올리는 것이 효과적이다. 현재 내가 하고 있는 사업은 자동차 튜닝분야이기 때문에 제품을 취급하는 사람들이 필요한 정보가 많다. 그래서 이러한 정보들을 블로그를 통해 제공하고 있다. 예전에는 어디서 이런 정보를 봐야 할지 몰랐지만 개편된 홈페이지를 통해 적합한 정보들을 찾아가기 쉽도록 해놓았다.

6. 장착점, A/S 센터 안내

%EC%84%9C%EC%8A%A4%ED%8E%9C%EC%85%98_%EC%98%A4%EB%B2%84%ED%99%80_%EC%84%BC%ED%84%B0.JPG?type=w1

%EC%A0%84%EA%B5%AD_%EB%8C%80%EB%A6%AC%EC%A0%90.jpg?type=w1

중소기업 제품을 구매함에 있어서 A/S는 가장 큰 걸림돌이나 마찬가지다. 더군다나 자동차와 관련된 부품이라 전문적인 장착, 수리점에 대한 정보는 필수다. 그래서 제품의 A/S가 가능한 전문 센터 그리고 일반 취급점을 구분하여 정보를 제공하도록 했다.

7. 장착 매뉴얼, FAQ 등 유용한 자료 확인

제품을 판매하는 입장에서는 늘 고객들에게 제공해야 할 정보가 많다. 이런 정보들을 쉽게 제공하기 위해 <소통하기> 메뉴에 <기술자료> 게시판을 만들었다. 게시판 내에는 [서스펜션 매뉴얼], [브레이크 매뉴얼], [Q&A] 머리말을 사용해 원하는 자료를 쉽게 찾을 수 있도록 했고 검색 기능도 함께 추가했다.

8. 제품 라인업 확인

%EC%A0%9C%ED%92%88_%EB%9D%BC%EC%9D%B8%EC%97%85_%ED%99%95%EC%9D%B8.jpg?type=w1

%EB%B8%8C%EB%A0%88%EC%9D%B4%ED%81%AC_%EB%9D%BC%EC%9D%B8%EC%97%85.JPG?type=w1

자동차 튜닝은 자신의 기호에 맞게 차량을 꾸미거나 변경하는 것을 뜻한다. 그래서 모두 다른 고객의 기호를 하나하나 다 맞출 수는 없지만 그래도 튜닝 기업이라 하면 가능한 많은 수요를 수용해야 한다. 다양한 라인업이 갖춰져 있기 때문에 라인업에 대한 명확한 설명들을 함으로써 제품 선택 시 참고도 할 수 있고 대리점에서 고객에게 설명드리는 용도로도 활용할 수 있도록 했다.

9. 네오테크와 협업하기

%ED%98%91%EC%97%85%ED%95%98%EA%B8%B0_1.jpg?type=w1

%ED%98%91%EC%97%85%ED%95%98%EA%B8%B0_2.jpg?type=w1

이번 홈페이지 제작에서 약간 새롭게 시도한 것이 바로 이 <협업하기> 메뉴다. 사실 해당 회사의 소개라든지, 장비 목록, 연혁과 같은 내용은 일반 소비자가 크게 궁금해하는 내용은 아니다. 나 역시 그 제품이 필요해서 사지 그 브랜드의 깊은 팬이 되기 전까지는 제조사에 대해서 깊이 궁금해하지는 않는다. 반면, 어떤 업체와 협업을 할 때는 그 회사는 어떤 회사인지, 어떤 사람들로 구성되어 있는지, 충분한 장비와 실력은 갖추었는지와 같은 기업에 대한 디테일을 궁금해 할 수밖에 없다. 그래서 회사의 인력 및 장비 소개, 연혁, 로고, R&D 수행내역을 <협업하기>라는 메뉴에 묶었고, 주제별로 담당 연락처를 확인할 수 있는 '협업 제안'페이지를 만들어 각 담당별 연락처를 적어두었다. 홈페이지는 우리 제품을 소개하는 역할도 있지만 다양한 형태로 우리와 협업을 원하는 사람들에게 충분한 정보를 제공하는 역할을 해야 한다.

10. 페이지 링크 별 최적화 이미지

지인에게 회사를 소개하거나 회사의 링크를 페이스북 등의 플랫폼에 올리게 되면 '미리 보기'이미지가 나온다. 이때 페이지별 텍스트 및 이미지가 최적화되어있다면 받는 이에게 훨씬 전문적인 이미지를 주고, 꾸준히 관리되고 있다는 느낌을 줄 수 있다. 그런 면에서 이러한 페이지별 SEO관리는 작은 부분이지만 큰 역할을 할 때가 있다. 개선된 홈페이지의 페이지별 주소를 카카오톡을 통해 보내게 되면 위와 같이 보이게 된다. 각 링크가 어떤 것을 뜻하는 것인지 명확하게 알 수 있음은 물론이고 빨리 클릭하고 싶도록 하는 효과는 덤이다. 페이스북이나 블로그 글 작성 시에도 마찬가지로 이러한 이점을 누릴 수 있다.

11. 월등히 개선된 크롬 Audits 지수

Audits 비교 개선 전(좌) 개선 후(우)

끝으로 Audits 지수 비교를 해보면 결과를 명확히 알 수 있다. 기존 홈페이지는 Audits가 정상 작동하지 않았다. 이 분야에 대해서 잘 아는 것도 아니기 때문에 왜 그런지는 알 수 없다. 그렇지만 어쨌든 이런저런 에러가 너무 많이 떠서 성능점수가 아예 나오지 않는 상태였다. 반면 지금은 모든 분야에서 꽤 높은 점수가 나온다. 90점 이상이 나오지 않는 이유는 대부분 내가 제공한 파일의 포맷과 크기 때문이다. 현재 홈페이지 활용에 큰 문제가 있는 것도 아니고 낮은 점수가 아니기 때문에 별도의 변경은 하지 않을 예정이다.

이번 홈페이지 제작기를 통해 정말 많은 것을 배웠다. 아직 홈페이지를 '내가 원하는 대로' 꾸미시지 못한 대표님들이 계시다면 나의 지난 글들을 보고 홈페이지 제작을 모르고도 충분히 퀄리티 있는 홈페이지를 만들 수 있다는 점을 확인하셨으면 좋겠다. 분명한 것은 홈페이지 제작에 회사의 대표 또는 임원은 반드시, 꼭! 참여해야 한다는 것이다.

그럼 완성된 실제 결과물이 궁금하신 분들을 위해!

http://www.neosus.co.kr/v1/main.php

네오테크 공식 홈페이지: Neotech Official Homepage

네오테크 공식 홈페이지: Neotech Official Homepage

http://www.neosus.co.kr/v1/

keyword

다시살기 소속 네오테크 직업 CEO

자동차 부품을 제조하고있는 청년사업가 입니다. 독서하고 글짓기를 하면서 그 내용을 삶에, 비지니스에 적용하고 있습니다. 자기계발, 경영에세이, 서평 등을 써나가고 있습니다.

팔로워 552

매거진의 이전글경험자의 얘기를 들어야 하는 이유영문 홈페이지 제작으로 다시 한번매거진의 다음글