비전공자의 홈페이지 제작기 : 설계
홈페이지의 목적, 참고사이트 그리고 요구사항
7년 만의 홈페이지 리뉴얼
https://brunch.co.kr/@wnsaud524/76
홈페이지는 '회사의 얼굴'이다. 그런데 이 얼굴이 너무 '늙었다.' 우리 회사의 홈페이지는 제작한 지 7년이나 지났다. 사실 그때만 해도 나름대로 트렌드를 반영하고 미래를 예측하고자 많은 힘을 썼다. 애플에서는 아이폰 5S를, 삼성에서는 갤럭시 S4를 신제품으로 내놓던 시절이다. 모바일 사용량이 급격히 증가하는 흐름의 중심에 있었기에 모바일 호환성이 좋지 않은 플래시를 빼기로 결정했었고, 모바일로도 전 메뉴가 작동 가능하도록 꾸몄다. 그 덕에 7년이란 세월이 지난 지금까지 '도저히 못써먹는' 정도는 면할 수 있었던 것 같다. 하지만 지금은 적당히가 아니라 '최고로 잘' 해야 하는 시기 이기에 '얼굴'을 잘 가꿔야만 한다.
홈페이지로 보여주고자 하는 것
나는 컴퓨터 공학 전공이 아니다. 그렇다고 웹디자인이나 퍼블리싱 전문가도 아니다. 교과 과정에서 계산기나 조금 만들어 보고 코딩의 사전적 의미 정도만 겪어본 기계공학과 출신이다. 그럼에도 불구하고 홈페이지 제작의 모든 과정을 다 외주에 맡기거나, 온라인 마케팅 담당 직원에게 '홈페이지 리뉴얼하세요' 따위의 무책임한 행동은 하지 않는다. 홈페이지를 통해서 대표자가 직접 원하는 것을 명확히 드러내게 되면 다음과 같은 장점이 있다.
1. 고객에게 신뢰를 줄 수 있다.
2. 새로운 연결의 가능성을 높인다.
3. 경쟁사를 견제할 수 있다.
홈페이지의 목적
홈페이지를 통해 얻고자 하는 기능적인 목표는 다음과 같다.
1. 간편한 회원 가입을 통해 고객 DB 확보
2. 제품 검색(가급적 네이버 스토어 팜과 연결하여 관리 피로도 감소)
3. 회사의 활동 알림 (소셜, 영상, 블로그 등)
홈페이지의 요구사항
필요한 상세 기능의 경우 차후 협업할 업체가 정해지면 다시 상의를 해야 하는 부분이다. 그래서 혼자 설계하는 단계에서는 영문 버전으로 바꾸기 효과적인 구조, 최대한 갖고 있는 자원(소셜, 영상, 블로그)을 '연결'할 수 있는 구조, 모바일 시대에 부합하는 반응형 사이트. 이 정도만 고려해보았다.
타사 사이트 분석
홈페이지를 본격적으로 기획하기 전 반드시 해야 하는 것이 바로 타사 사이트를 분석하는 것이다. 이러한 분석과 벤치마킹 과정은 1. 우리가 혹시 간과할 부분을 일깨워준다. 2. 트렌드를 알 수 있다. 3. 본받을 점과 걸러야 할 점을 알 수 있다. 4. 협업 시 구체적 요구사항 제시에 큰 도움이 된다. 분석은 다음과 같은 순서대로 진행했다.
사이트 분석할 업체 선정
사이트를 분석하는 것은 위에 말한 것처럼 나에게 도움이 될 뿐 아니라, 전문가와 협업을 할 때 굉장히 큰 도움이 된다. 구체적으로 원하는 방향을 설명하는데 좋은 예시가 되어주기 때문이다. 또 어떤 업체의 홈페이지가 잘 되어 있는지 각 업체의 온라인 시장 관리 현황을 알 수 있으며 이는 곳 그 업체의 방향성을 예측하는데 도움이 된다. 예를 들면 인터넷에 신경 쓰지 않는 업체는 분명 여러 OEM, ODM을 하고 있을 경우가 많다. 자신의 브랜드를 강조해야 하는 업체는 홈페이지와 사이트 최적화에 신경을 많이 쓸 수밖에 없다. 이런 배경을 바탕으로 10개의 업체를 선정했다.
메인 화면 구성 및 반응형 구축 여부
먼저 메인 화면 구조가 어떻게 짜여있나 확인했다. 최근에는 상단 좌측 또는 우측에 메뉴를 두고 고화질의 큰 사진 1,2개만 보이도록 하는 것이 추세다. 그리고 '반응형'으로 되어있느냐 아니냐는 그 회사가 얼마큼 홈페이지에 신경 쓰고 있는지를 보여준다. 박리다매를 하는 회사 거나 (우리 회사처럼) 제조를 하느라 바빠 온라인을 차마 신경 쓰지 못하는 우를 범하는 회사들은 반응형으로 되어있지 않다. 그래서 기기에 따라 활용도 차이가 많이 날 수밖에 없다. 홈페이지를 활용하지 못한다는 것은 곧 기회의 상실과 같다.
차후 세부적인 콘텐츠를 정할 때도 반응형 구조로 만들 것을 고려해 사진과 화면 구성에 신경 쓸 필요가 있다.
사이트 맵(Site map)
애플의 사이트맵사이트맵은 '무엇을 보여 줄 것인가?'와 '필요 기능', '내용 작성'등 홈페이지를 기획하는 '핵심'이라고 할 수 있다. 여러 경쟁사의 사이트를 참고하여 어떤 메뉴는 꼭 빠지지 않고, 어떤 메뉴가 특이한지 따라서 우리 회사의 사이트 맵은 어떻게 구성할 것인지를 고민하기 위한 아주 중요한 자료가 된다.
사이트 평가(Audits)
감사(Audits) 기능은 개발 후 사이트 점검용으로 사용되지만, 설계 단계에서 다른 사이트를 벤치마킹할 때 활용할 수도 있다. 각 사이트의 감사 기능을 활용해 보았다. 퍼포먼스 지수를 통해 어떻게 구성하면 가볍게 잘 작동하고 어떤 기능이 들어가면 다소 무거워질 수 있는지 확인이 가능하다. Accessibility를 통해서는 접근성이 좋은지를 알 수 있다. 즉, 텍스트가 인식하기 쉽고 읽기 쉬운지, 색 대비는 명확한지, 이미지에 설명은 잘 반영되어 있는지 등의 내용을 점수로 볼 수 있다. 특히 SEO지수를 통해 어떤 회사가 검색 최적화가 잘 되어 있는지, 어떤 부분이 SEO지수를 높였는지에 대해 고민해 볼 수 있다. 또한 Opportunities를 통해 각 사이트의 단점을 봄으로써 나의 개발에 고려할 점으로 삼을 수도 있다.
이로써 설계 단계의 기초 작업을 끝냈다. 내일은 참고 사이트와 목적, 요구사항을 기반으로 하여 사이트맵, 각 메뉴의 주제, 상세 필요 기능, 필요 자료 확보에 대해 실시할 예정이다. 최대한 빨리 혼자서 할 수 있는 준비를 마치고 나의 기획에 최적화된 협력업체를 선정하는 단계까지 가야 한다.
