[펌] 전기방식의 이해 ? 분석 / [펌] 삼성전기 웹사이트 구축기

삼성전기 웹사이트 구축기[2003-04-01]사이트주소 : www.sem.samsung.co.kr클라이언트 : 삼성전기 홍보업무팀담당 에이전시 : 인터메이저제작기간 : 5개월오픈일 : 2003년 1월 20일 홍보에서 기능성 웹사이트로의 진화1973년 설립 후 올해로 창립 30주년을 맞는 전자 부품 전문기업인 삼성전기. 초기 A/V 부품에서부터 시작해 각종 전자제품에 공통으로 쓰이는 범용 부품과, Mobile용, 컴퓨터 관련 부품까지 생산 제품만 100 여개, 세부모델이 3만여 종에 이르는 글로벌 기업이다. 여기에 부품마다 각종 소개서와 사양, 설계자료 등 웹사이트내 관련 콘텐츠 범위는 상상을 뛰어 넘는다. 불과 수백 페이지의 단순 홍보성 기업 사이트와는 질적으로 다른 웹사이트였고 재구축에는 완전히 다른 시각이 필요했다. 우선 다양한 종류의 제품군과 세부 제품들에 대한 상세 정보를 홈페이지를 통해 일목요연하게 서비스하는 것은 기본이었다. 여기에 전세계에서 접수되는 고객 문의에 효과적으로 대응하기 위한 솔루션도 필요했다. 세부적으로는 기존 홈페이지보다 회사 관련 정보를 보다 신속, 정확하게 제공해야 하는 과제가 주어졌고, 새롭게 웹진도 제작해 임직원 가족이나 퇴직자 그리고 해외 주재원들을 위한 온라인 커뮤니케이션 공간도 마련해야 했다. 삼성전기가 생산하는 제품의 규모 만큼이나 방대한 과제를 정해진 시간 내에 가장 효율적으로 해결해야 하는 과제가 던져진 것이다.발상의 전환 - 기능성 웹사이트의 전형을 찾아라삼성전기 홈페이지는 단순히 홍보성 기업 웹사이트를 제작하는 것이 아니었다. 기존에 유행 따라가기에 급급했던 웹페이지가 명확한 구축 목적 하에 ROI를 꼼꼼히 따져보는 마케팅 커뮤니케이션 수단으로 인식되고 있듯이, 삼성전기 웹사이트는 단순 홍보에서 기능성 웹사이트로 진화해 가는 e-Business 발전의 전형을 보여 주는 프로젝트였다. 그만큼 새로운 발상의 전환이 필요한 가운데 클라이언트는 우리에게 다음과 같은 3대 과제를 제시했다. n 이용자를 위한 정확한 정보설계n 많은 제품과 신규 콘텐츠에 대한 정보 갱신을 쉽게 할 수 있는 유연성 제공n 온라인 고객문의에 대한 응대를 효율적으로 할 수 있는 이메일솔루션 구축세 가지 과제를 종합해보면 "콘텐츠를 얼마나 조직적으로 구조화하고, 얼마나 효율적으로 생성 가공하느냐 그리고 웹사이트 방문자에 대한 응대 업무를 어떻게 효과적으로 처리하느냐" 하는 문제로 압축할 수 있었다. 따라서 일반 홍보성 웹사이트나 사이버투어 등을 이용한 멀티미디어성 웹사이트와는 차별화되는 콘텐츠 중심, 정보 전달 중심의 웹사이트를 제작해야 했다.정보설계와 함께 무엇보다 콘텐츠 생성과 관리가 유연해야 한다는 클라이언트의 핵심 요구사항을 해결하기 위해 자체 개발한 XML(eXtended Marked-up Language)기반 CMS(Content Management System)솔루션인 ECC(Enterprise Content Center)를 적용키로 했다. CMS는 콘텐츠 설계와 생성, 수정 그리고 최종 웹으로의 퍼블리싱까지 콘텐츠 라이프사이클 전반을 관리하는 솔루션 이므로 삼성전기 프로젝트 성공을 위해 필수적인 솔루션 이었다. 사용자 중심의 IA, UI 를 찾아정보 설계를 위한 첫번째 단계는 User Analysis 이다. 대략 삼성전기 사이트 이용자들의 구성을 살펴보면 회사 전반에 대한 정보를 얻기 위한 일반 사용자 그룹과 제품 전문 정보를 찾는 업계 관련자 혹은 연구원 그룹, 그리고 제품에 대해 문의하는 고객 그룹으로 구분할 수 있었다. 이 세 부류는 User Analysis 결과 방문율, 이용률 등에서 고른 분포를 보였다. 기존 삼성전기 웹사이트는 이러한 사용자 그룹을 모두 고려했기 때문에 많은 양의 정보를 세분화하고 다소 일관되지 않은 여러개의 접근 경로를 통해 콘텐츠를 제공하고 있었는데 설계 자체가 평면적으로 돼 있어 원하는 정보 찾기가 쉽지만은 않았다. 즉 사용자들이 정보를 찾기 위해서는 많은 마우스 움직임이 필요했고 콘텐츠 간의 종적 횡적 연결성이 떨어지는 구조였던 것이다.제작팀은 우선 사용자들이 정보를 쉽게 찾을 수 있도록 하는 데 주안점을 두었다. 다소 파격적이라는 내부 논의도 있었지만 각 사용자들이 필요한 정보로 바로 접근할 수 있도록 'Company(일반 사용자)/Product(업계 관련자)/Contact(고객)' 등 세 가지 대분류를 두고 메인 페이지는 세 그룹의 사용자들이 선택하는 게이트 페이지로 설정했다.물론 세 가지 대분류는 각 카테고리 간의 이동을 보장하였고 정보설계와 맞물려 정보 접근성을 높이기 위한 논의도 이어졌다. 삼성전기 홈페이지는 분명 제품에 대한 정확한 정보를 이용자들에게 얼마나 효과적으로 보여주느냐가 관건이었다. 제품은 기존 Application별 분류와 Function별 분류에 덧붙여 원하는 제품을 알파벳 순서로 쉽게 찾을 수 있도록 A-Z Index도 마련했다. 또한 Software, Driver, Catalog, Manual 등 제품에 관한 자료만을 모아두는 Resource Library 라는 메뉴를 따로 두었다. 관리면에서는 CMS를 통해 하나의 제품 정보만 등록하면 이들 4가지 메뉴 모두에서 동시에 사용할 수 있도록 했다. 즉 CMS에서 한번만 콘텐츠로 등록하면 다양한 형태로 보여 줄 수 있도록 한 것인데 흔히 콘텐츠와 표현양식을 분리한다는 의미가 그것이다. 제품 정보를 보여줄 때도 제품 특징에 따라 다양한 형태의 페이지 구성이 필요했다. 특성 수치값이 중요한 제품의 경우 검색을 통해서 원하는 모델 정보를 볼 수 있도록 해야 했고 외형상의 모양이나 형태가 중요한 제품은 이미지와 설명 중심의 제품 정보로 보여지게 만들어야 했다. 이렇게 요구되는 제품 특성별로 정보 표현 방법을 모두 7가지로 규정했다. 그러나 이 7가지 형태는 처음에 고정되는 것이 아닌 언제라도 쉽게 다른 형태로 변경되어 질 수 있도록 유연성을 염두에 두고 설계해 나갔다. 가장 문제가 많았던 User Interface에서는 제품간의 손쉬운 이동을 위해 상단 메뉴영역에서는 각 분류를 고정하고 세부 제품들은 다단형식의 Layer로 구성했다. 이로써 언제든지 원하는 제품으로의 이동성을 제공하고 좌측 메뉴영역에는 해당 제품들의 상세 정보로 이동할 수 있도록 했다. 즉, 상단 메뉴영역은 횡적이동을, 좌측 메뉴영역은 종적인 이동만을 할 수 있도록 한 것이다. 좌측메뉴영역은 세 가지 Area로 나누었는데 첫번째 Area는 제품의 하위 네비게이션 정보를 풀어서 보여줌으로써 세부 정보로 이동하는 종적인 이동이 가능하도록 하고, 두번째 Area에는 기술관련 자료들을 다운로드 할 수 있도록 하였으며, 세번째 Area에서는 마케팅과 고객지원 관련 정보들을 두어 제품에 대한 모든 정보를 한자리에서 해결 할 수 있도록 했다. 이 좌측메뉴영역은 해당 제품의 상세 정보영역까지 들어가더라도 계속 보존되어 더 이상 정보를 보면서 길을 잃고 헤메는 일이 없도록 배려했다. 네비게이션 디자인사용자는 사이트가 담고 있는 기업에 대한 정보와 콘텐츠를 체계적이고 효율적으로 인지할 수 있어야 한다. 이를 위하여 가장 중요시되는 부분이 편리하고 효율적인 정보의 구조화를 통한 사용성의 극대화라는 데는 의심의 여지가 없다. 하지만 앞서 살펴 본 대로 기존 삼성전기 홈페이지는 일관되지 않은 UI구조로 인해 사용자로 하여금 정보에 대한 가독성을 저하시키고 있었다. 따라서 정돈된 카테고리 분류작업이나 IA와 UI구조의 개선을 통해 이를 해결해야만 했다. 삼성전기 I.A구조는 제품정보가 90% 이상을 차지하고 있어 한마디로 일반회사정보와 제품정보가 한데 묶이기엔 정보구조상 매우 불균형한 상태였다. 또한 해외에 여러 지사를 두고 있는 글로벌기업으로서 고객 Contact 서비스도 웹상에서 매우 중요한 역할을 차지 했다. 이러한 User의 특성과 I.A의 구조는 일반적인 방식의 네비게이션 시스템으로는 기존 사이트가 지닌 불편한 사용성을 개선하기 힘들다는 결론에 다다랐다. 따라서 IA 협의 결과 채택된 3가지 대분류 방식을 통해 방만한 네비게이션의 비대칭형태로 인해 생기는 사용자의 혼란을 최소화 하려고 했다.즉, 첫 화면에서 방문자의 방문목적에 따라 각각의 홈으로 유도되어 회사일반정보와 제품정보간의 depth충돌 및 혼란을 미연에 방지할 수 있도록 한 것이다. 또한 전체적으로 장식적이고 불필요한 요소를 없애고 기업홍보영역과 비즈니스영역의 균형을 조절해서 사이트의 구조와 네비게이션의 가독성을 높이고자 하였다.이를 위해 Sun Microsystems(www.sun.com), Janus(www.janus.com) 그리고 General Electric(www.ge.com) 등을 벤치마킹했다. 특히 Sun Microsystems의 네비게이션은 정보구조를 단순화, 체계화하여 사용자가 정보체계와 목적에 따라 쉽게 정보로 접근 가능하게 했다는 점에서 네비게이션을 보다 구조적으로 접근하는데 많은 도움이 되었다. : Tab방식과 Pulldown 방식을 혼용하여 매우 방대한 제품분류와 항목들을 한 번에 선택할 수 있도록 설계하여 기존의 페이지 리스트 링크방식의 불편함을 해결하였다. : 제품의 I.A구조를 분석하여 4가지type의 depth와 3가지type의 콘텐츠로 분류하였다. 0 1 템플릿 디자인삼성전기에 대한 이미지나 정보가 응집력있는 목소리를 내기 위해서는 분명하고 일관적인 네비게이션 시스템과 각 메뉴별로 그 내용에 부합되는 그리드 시스템이 필요했다. 더욱이 클라이언트는 CMS(Content Management System) 솔루션이나 이메일응대관리솔루션인 ERMS(Email Response Management System)를 이용하여 즉각적으로 콘텐츠를 추가하고 수정할 수 있는 매우 유동적인 사이트를 요구하고 있었다. 그렇기 때문에 콘텐츠를 사용하는데 있어 기본적인 템플릿과 함께 어떠한 환경요소들을 추가하더라도 유연성있게 콘텐츠 확장이 가능한 템플릿을 제시해야 했다. 따라서 삼성전기를 소개하는 Company, 제품에 대한 정보를 보여주는 Product, 사용자의 의문사항을 해결해주는 Contact의 특성에 맞는 체계적인 정보 전달에 주력하여 그리드 시스템과 템플릿으로 다양한 접근방법을 재구성하였다. 앞서 언급했듯이 UI의 일관성이나 정보 접근성을 강화하는 과정에서 장식적인 요소들이 상당부분 배제되었고 데이터중심의 화면이 대부분이었기 때문에 기본적인 스타일의 그리드가 주를 이루게 했다.2 3 컴포넌트 스타일 디자인컴포넌트 스타일 디자인은 정보의 구성을 높이기 위한 시각적 은유가 고안되는 부분이다. 콘텐츠 정리 측면에서 간과하기 쉬운 부분이지만, CMS 솔루션의 기능적인 측면과 디자인의 감성적인 측면의 연계를 위해 중요하게 고려되어야 할 점은 바로 개념을 그래픽적으로 해석할 때 그것을 명료화하는 작업일 것이다.실제로 이 부분에서 디자인적으로 상상력을 발휘하기에 어려운 점이 많았는데 그 이유는 사이트 자체가 CMS 솔루션에 의해 정교하게 짜여져야 했기 때문에 형식은 기본을 따르되 크리에이티브적으로 과감한 시도가 이루어지기 어려웠기 때문이다. 이미지는 업데이트의 효율성을 위해 각 메뉴별로 동일한 비율을 적용하였고, 블릿이나 버튼의 정의에 있어서는 사용자가 기존에 가지고 있던 내용과 관련된 의미를 사용자 스스로 올바르게 교정하거나 재확인할 수 있도록 동기를 부여하고자 했다. 이를 위해 단순한 조형요소와 객관적 은유를 사용해서 사용자가 사이트를 단계적으로 이해하는데 매개 역할을 할 수 있도록 했다. 콘텐츠 내용만 나열되는 페이지의 경우는 문제가 되지 않지만 세부요소의 구분이나 열거는 가독성을 고려하여 네가지 블릿을 순차적으로 이용했다.4 : 4depth의 타이틀은 페이지 내의 타이틀 구역에 위치하게 되지만 5depth의 타이틀은 블릿을 이용하여 사용자가 보고있는 정보의 위치를 알 수 있도록 하였다.웹컨텐츠 관리의 대명사, ECC !기존 삼성전기 웹사이트는 일반적인 정보 페이지나 제품에 대한 소개 페이지들이 별도 관리자 툴 없이 모두 HTML로 구성된 상태였다. 따라서 1장의 페이지라도 추가하려면 일일이 작업해야 하는 번거로움이 있었다. 이렇게 작업을 한 이후 서버에 접근 권한을 가지고 있는 몇 명의 관리자가 telnet, ftp를 이용하여 페이지와 연결시키는 등 사이트 전체의 관리가 한 두명의 관리자들에 의해서 이루어지고 있었다.그러나 새로 개편될 사이트에서는 3만여종의 모든 제품 정보들을 상세하게 보여줘야 하고, HR, IR 등지속적인 관리가 필요한 콘텐츠가 대폭 늘어날 예정이어서 웹마스터 1~2명이 관리한다는 것은 불가능한 일이었다. 이러한 상황에서 CMS 솔루션의 도입은 당연한 결과였고 자체 개발한 ECC의 full version이 적용되어 웹사이트 전체가 CMS 관리 체계로 정리되었다. 먼저 제품 상세정보 관리나 제품 데이터 추가는 제품관련 담당자가 하기로 하고 HR, IR 등의 각 섹션도 해당 업무 부서에서 간단하게 관리할 수 있도록 해야 했다. 이에 따라 사이트 관리자별 권한이나 소속된 그룹의 권한에 따라 사용할 수 있는 메뉴들을 제한하고 메뉴의 생성이나 추가, 수정, hidden 등 웹마스터나 프로그래머의 손을 빌어서 작업해야 되었던 사항들을 일반 사용자들이 바로 사용할 수 있도록 CMS를 적용했다. 또한 ECC를 통한 콘텐츠 작성시에도 템플릿과 Table, Bullet 에 대한 규칙이 미리 지정되어 있는 HTML Editor를 제공하여 웹사이트의 스타일 가이드가 항상 지켜지도록 했다.ECC는 또한 앞서 말한대로 XML 기반으로 개발되어 향후 카탈로그 시스템으로의 발전성도 고려했다. 아울러 웹마스터가 ECC 사용자들의 업무 관련 통계를 기간별, 사용자별로 볼 수 있도록 하는 등 CMS 본연의 기능 외에도 다양한 고객 중심의 추가 기능 보강으로 웹사이트 관리의 효율성을 극대화 했다.5 6 웹진에도 CMS 도입삼성전기는 창립30주년을 맞으면서 사보명을 'with'로 바꾸고 새로워진 신규 홈페이지에 새롭게 웹진을 발행하기로 했다. 기존의 사이트 운영 방식이었다면 매월 10꼭지 이상의 웹진을 만들기 위해 디자이너와 프로그래머가 몇 일 동안 작업하고 서버에 올리는 등 수작업으로 해야 했겠지만 CMS를 도입하면서 그같은 수고를 덜 수 있었다.7 웹진은 특성상 언제라도 섹션 변경이 이루어 질 수 있어야 한다. 따라서 매월 발행할 때마다 섹션들을 새로 만들 수 있게 했다. 그러나 매월 섹션들이 만들어 질 경우 참여 게시판 같은 경우에는 매번 새로 갱신되면서 사용자들의 참여가 떨어질 수 있는데 삼성전기 웹진에서는 호수가 지나더라도 해당 섹션에 대한 게시판을 누적해서 사용할 수 있게 제작 했다. 또한 콘텐츠 제작을 쉽게 하기 위해 HTML Editor기능을 둬 이미지등록(사이즈조정, 정렬), 테이블 등록(행추가, 열추가), 링크걸기, 텍스트처리 등의 작업을 모두 할 수 있도록 해 웹 관련 전문 지식이 없는 사용자라도 손쉽게 웹진을 관리 할 수 있는 강력한 툴을 만들었다.ERMS - 담당자 배정과 관리 효율화삼성전기에서는 전자 부품뿐만 아니라 일반 사용자들이 사용하는 컴퓨터 관련 제품들을 직접 생산하고 있어서 고객 문의 사항이 다양한 형태로 발생한다. 또한 국내 뿐 아니라 해외 사용자의 문의도 많아 웹마스터 혼자서는 문의 사항을 처리할 수도 없었고 해당 업무 또는 해당 제품의 현업 담당자들이 직접 들어오는 문의 사항들에 대하여 직접 응대하고 있는 실정이었다.이를 위해 ERMS를, CMS솔루션인 ECC의 사용자 관리 및 제품 메뉴관리 부분과 연계하여 개발하기로 했다.8 삼성전기 ERMS에서는 일반적인 채용, 투자, 홍보관련 문의 담당자 이외에도 100 여종의 각 개별 제품마다 고객응대 담당자를 배정할 수 있도록 했다. 또한 제품 관련 문의를 기술/구매/A/S/기타문의로 나누고 구매는 지역에 따라 국내/미주/유럽/중국/일본의 다섯 가지로 구분해 각 제품마다 8명의 응대 담당자가 배정되도록 했다. 이렇게 현업 담당자들이 고객의 요청을 직접 접수하고 처리함으로써 고객 만족도를 높이고 운영 효율을 높이도록 한 것이다. 그리고 ERMS에 고객응대 담당자들의 처리 현황을 모니터링하고 분석할 수 있는 툴을 도입하여 고객 문의 처리가 쉽게 이루어지고 있는지를 상위 관리자들이 확인해 볼 수 있도록 하는 기능도 추가했다. ERMS를 개발하는 기준에는 이 시스템만 독립적으로 운영하는 것이 아니라 홈페이지와 지속적으로 연계되도록 하는 것이 중요했다. 따라서 CMS에서 제품들이 추가 되면 즉각적으로 ERMS에 새로운 담당자를 배정할 수 있도록 했다. 사용자 관리도 CMS 사용자 관리와 연동되어 있어 ERMS 담당자들 중 권한이 있는 사용자들은 CMS에서도 콘텐츠를 등록하고 수정할 수 있도록 구성했다. 또한 문의 메일 접수 시 e-Mail 알람 기능, 자주 사용하는 답변 목록 작성 기능, 개인별 고객 리스트 관리기능, 답변 내용 FAQ 등록 기능, 단체 메일 발송 기능 등 다양한 부가 기능도 포함시켜 고객 응대 능력을 대폭 높였다.마치며삼성전기 홈페이지의 경우 여타 기업 홈페이지와는 규모와 데이터면에서 차이가 났다. 페이지 수로 따지자면 10만 페이지가 훨씬 넘는 매머드급 사이트라고 볼 수 있다. 하지만 무엇보다 웹사이트 규모나 기업 특성상 삼성전기 홈페이지에서 가장 중요한 것은 콘텐츠 즉 정보였다. 그렇지만 똑같은 정보에 대해서도 표현방식은 천차만별일 수 밖에 없다. 더구나 삼성전기 프로젝트에는 기능성 웹사이트라는 또다른 화두가 남아 있었다. 제작과 관리면에서 CMS 솔루션 도입이 필수였던 만큼 CMS 솔루션을 정점으로 콘텐츠 요구사항과 디자인 요소와의 균형을 맞추는 작업이 쉽지만은 않았다. 당연히 정해진 템플릿에 의한 작업이기에 창의성이나 디자인력에 있어서는 부자연스러운 프로젝트였다고 할 수도 있겠다. 그러나 요즘 구축되고 있는 웹사이트들이 멀티미디어적인 요소들을 많이 사용하면서 화려한 그래픽에 밀려 정보의 깊이가 얕다거나, 치장을 위해서 사용자들의 불편을 강요하고 있지는 않은지 생각해 볼 일이다. 삼성전기 웹사이트가 마무리되어 갈 무렵, 웹디자인 크리에이티브 담당자들은 마치 여러 곳을 거치며 풍파를 겪고 난 뒤 가장 정갈한 기본의 자리로 돌아온 느낌이었다고 입을 모았다. 글 : 인터메이저 Project Manager 손희선 / Senior Designer 이은미

www.shop-dwg.co.kr 구인, 구직 소개