2012 웹 사이트 리뉴얼 담당자 : 마케팅팀 박정은 대리 / 정영림 사원 작성일 : 2012. 07. 18.

Presentation on theme: "2012 웹 사이트 리뉴얼 담당자 : 마케팅팀 박정은 대리 / 정영림 사원 작성일 : 2012. 07. 18."— Presentation transcript:

1 2012 웹 사이트 리뉴얼 담당자 : 마케팅팀 박정은 대리 / 정영림 사원 작성일 :

2 개발 중점 요청 사항 구글 검색엔진 최적화 웹사이트 제작
: 웹 표준에 근거하여, 다양한 브라우저 환경 및 기기에서의 사용이 원활 수 있도록 제작. : 텍스트 기반 제작 및 해외 검색 환경을 고려한 구글 검색 최적화 가이드라인 준수. 2. 홈페이지 관리 인터페이스 탑재 : 관리자 모드로 접속 시 누구나 제품 관련 및 회사 소개 내용(텍스트, 이미지, 동영상, 자료 등)을 편집 할 수 있도록 등록/수정/삭제/업로드 가능한 관리 인터페이스 구축 테크놀러지 회사 성격 강화된 이미지 연출 : 전문성과 신뢰성 짙은 간결한 구조 및 레이아웃으로 사용성 높임 마케팅을 위한 데이터 트랙킹 : 로그 분석 기능 탑재

3 제품 개요, 기술 및 원리, 스펙, 갤러리(동영상, 이미지) 관련 자료(매뉴얼, 브로셔, 앱) 링크,
메뉴 구성 (메뉴선택, 구조화) 대분류 소분류 상세 페이지 페이지 구성 내용 HOME - PRODUCTS Life Science <Live cell image viewer> :JuLi <Cell counting> :ADAM rWBC :rWBC kits :ADAM MC :Accuchip :ADAM SCC :Somachip :C Chip 제품 개요, 기술 및 원리, 스펙, 갤러리(동영상, 이미지) 관련 자료(매뉴얼, 브로셔, 앱) 링크, Medical <Immunoassay> :FREND System :PSA :TSH (*up coming item) :Cardiac triple (*up coming item) OUR COMPANY Our story 회사소개, 지속보고서 다운로드 링크, 채용 정보 및 자료 링크 주가 자료 연동(KRX) News & Events 뉴스, 공지, 공시, 이벤트 게시판 CONTACT US Locations 정보

4 메인 화면 4 1 2 3 Product Image News and Events 페이지 명 메인 화면 필요 요소 특 징
Learn more ▶ News and Events Home Product Our company Contact us 페이지 명 메인 화면 필요 요소 메뉴 네비게이션 주요 제품 노출 뉴스 이벤트 검색 창 접속 표기 및 로그인 SNS 연동 기본 회사 info 특 징 간결한 구조 : 스크롤 최소화 : 직관적 레이아웃 확정 사항 특이 사항 4 1 2 3 Company info. Company contact info / Copyright / Site Map link 1 제품 이미지 5개 내외까지 관리자 모드를 통해 자유롭게 업로드 할 수 있도록 구성 2 Our company 메뉴의 > news 게시판의 최신 내용을 자동으로 끌어 오도록 구성 (텍스트 & 이미지) 3 회사 관련 자료를 5개 내외 까지 관리자 모드를 통해 자유롭게 업로드 할 수 있도록 구성 4 페이스북, 트위터, sales 메일 연동 링크 버튼 탑재

5 PRODUCT 상세 페이지( Tech. 탭) 1 2 3 페이지 명 상세페이지 (Tech. / Specification)
overview 설명 이미지 Related Products Learn more> 페이지 명 상세페이지 (Tech. / Specification) 필요 요소 Overview ,대표이미지, 관련 자료(브로셔, 매뉴얼, 앱) 다운로드 링크, contact info 고정 노출 Tab 형태 분류: Tech / spec. / video & image / FAQs 연관 제품 소개 확정 사항 특이 사항 Material link Brochure_ENG Manual_ENG Manual-CHN Introduction 2 Tech. Specification Video & Image 설명 (텍스트) 이미지 1 제품 개요(텍스트 및 이미지)로써 상시 노출 (관리자 모드를 통해 개요 및 material 등록/수정/삭제 가능해야 함) 2 탭으로써 내용 분류 하나의 탭의 내용은 관리자 모드에서 텍스트, 이미지 혹은 동영상을 등록/수정/삭제 할 수 있어야 함. 3 관련 제품을 노출시키는 것으로 써, 등록/수정/삭제 가능해야 함 3

6 PRODUCT 상세 페이지( Specification 탭)
1 Overview 설명 이미지 Related Products Learn more> 페이지 명 상세페이지 (Tech. / Specification) 필요 요소 Overview ,대표이미지, 관련 자료(브로셔, 매뉴얼, 앱) 다운로드 링크, contact info 고정 노출 Tab 형태 분류: Tech / spec. / video & image / FAQs 연관 제품 소개 확정 사항 특이 사항 Material link Brochure_ENG Manual_ENG Manual-CHN Introduction 2 Tech. Specification Video & Image 설명 (텍스트) 1 제품 개요(텍스트 및 이미지)로써 상시 노출 (관리자 모드를 통해 개요 및 material 등록/수정/삭제 가능해야 함) 2 탭으로써 내용 분류 하나의 탭의 내용은 관리자 모드에서 텍스트, 이미지 혹은 동영상을 등록/수정/삭제 할 수 있어야 함. 3 관련 제품을 노출시키는 것으로 써, 등록/수정/삭제 가능해야 함 3

7 PRODUCT 상세 페이지 (Video & Image 탭)
Overview 설명 이미지 Related Products Learn more> 페이지 명 상세페이지 (Video & Image) 필요 요소 사진 및 영상의 이미지 통합 페이지로 구성 확정 사항 특이 사항 Material link Brochure_ENG Manual_ENG Manual-CHN Introduction Principle Tech. Specification Video & Image 1 Showing area 이미지 설명 텍스트 비디오 설명 텍스트 설명 텍스트 1 이미지 혹은 동영상 파일을 올리면, Showing area에서 보여지거나 play 되어야 함 관리자 모드에서 이미지 혹은 동영상 파일을 등록/수정/삭제 할 수 있어야 함

8 SUSTAINABILITY REPORT
Our company(our story ; PR MOVIE 탭) 페이지 명 Company story 필요 요소 회사소개, 지속보고서 다운로드 링크, 채용 정보 및 자료 링크 특 징 확정 사항 특이 사항 Home Product Our company Contact us Our story News & Events 2 1 회사 소개 이미지 1 회사소개(텍스트 및 이미지)로써 관리자 모드를 통해 등록/수정/삭제 가능해야 함 2 주가 정보로써, 한국거래소 정보를 연동해야 함 3 탭으로써 내용 분류 함 PR MOVIE 탭은 PRODUCT 상세페이지의 image & video 탭의 기능과 같음 3 PR MOVIE DISCLOSURE SUSTAINABILITY REPORT CAREER thumbnail Showing area thumbnail thumbnail

9 SUSTAINABILITY REPORT
Our company(our story ; DISCLOSURE 탭) 페이지 명 Company story 필요 요소 회사소개, 지속보고서 다운로드 링크, 채용 정보 및 자료 링크 특 징 확정 사항 특이 사항 Home Product Our company Contact us Our story News & Events 2 1 회사 소개 이미지 1 회사소개(텍스트 및 이미지)로써 관리자 모드를 통해 등록/수정/삭제 가능해야 함 2 주가 정보로써, 한국거래소 정보를 연동해야 함 3 탭으로써 내용 분류 함 DISCLOSURE 탭은 공지 정보 게시판으로써, 한국 거래소 정보의 공지 자료를 연동해야 함 3 PR MOVIE DISCLOSURE SUSTAINABILITY REPORT CAREER

10 SUSTAINABILITY REPORT
Our company(our story ; SUSTAINABILITY REPORT탭) 페이지 명 Company story 필요 요소 회사소개, 지속보고서 다운로드 링크, 채용 정보 및 자료 링크 특 징 확정 사항 특이 사항 Home Product Our company Contact us Our story News & Events 2 1 회사 소개 이미지 1 회사소개(텍스트 및 이미지)로써 관리자 모드를 통해 등록/수정/삭제 가능해야 함 2 주가 정보로써, 한국거래소 정보를 연동해야 함 3 탭으로써 내용 분류 함 SUSTAINABILITY REPORT탭은 파일명, 등록 날짜, 다운로드 아이콘으로 구성된 게시판 형태로써 파일을 업로드 가능해야 함 3 PR MOVIE DISCLOSURE SUSTAINABILITY REPORT CAREER

11 SUSTAINABILITY REPORT
Our company(our story ; CAREER 탭) 페이지 명 Company story 필요 요소 회사소개, 지속보고서 다운로드 링크, 채용 정보 및 자료 링크 특 징 확정 사항 특이 사항 Home Product Our company Contact us Our story News & Events 2 1 회사소개(텍스트) 회사 이미지 1 회사소개(텍스트 및 이미지)로써 관리자 모드를 통해 등록/수정/삭제 가능해야 함 2 주가 정보로써, 한국거래소 정보를 연동해야 함 3 탭으로써 내용 분류 함 CAREER 탭은 소개 영역과 서류 다운로드 영역으로 나뉨. 소개영역은 이미지 업로드 혹은 텍스트 입력이 가능해야 하며 서류 다운로드 영역은 업로드 한 파일을 보여주어야 함 3 PR MOVIE DISCLOSURE SUSTAINABILITY REPORT CAREER 채용정보 소개 (이미지 or 텍스트) 서류 다운로드 (게시판 형태) 신입지원 경력지원 download download

12 Our company(News & Events)
페이지 명 Company news 필요 요소 뉴스, 공지, 이벤트 게시판 특 징 확정 사항 특이 사항 Home Product Our company Contact us Our story News & Events 1 English Korean 2 Category selection 3 Category Subject Date News A Event B C D E Notice F G 1 영문/한국어 공지 게시판을 탭으로 분류 2 공지 게시판의 자료를 분류하는 기준으로써, 뉴스, 이벤트, 공지사항 등 3가지가 있으며, 관리자가 카테고리의 추가/삭제/수정 이 가능해야 함 3 실제 내용이 보여질 수 있는 게시판 ◀ … ▶

13 Our company(News & Events)
페이지 명 Company news 필요 요소 뉴스, 공지, 이벤트 게시판 특 징 확정 사항 특이 사항 Home Product Our company Contact us Our story News & Events 1 English Korean 2 Category selection 3 News A 이미지 1 영문/한국어 공지 게시판을 탭으로 분류 2 공지 게시판의 자료를 분류하는 기준으로써, 뉴스, 이벤트, 공지사항 등 3가지가 있으며, 관리자가 카테고리의 추가/삭제/수정 이 가능해야 함 3 실제 내용이 보여질 수 있는 게시판 텍스트 Subject List

14 Contact us 페이지 명 Contact 필요 요소 특 징 확정 사항 특이 사항 Locations 정보,
Home Product Our company Contact us

15 Search 결과 화면 Search Result “JuLI” Product Our story News & Event JuLI
Home Product Our company Contact us Search Result “JuLI” Product Our story News & Event 1. Alive cell viewer JuLI JuLI is the best solution for …. 2. Alive cell viewer JuLI 3. Alive cell viewer JuLI 1. Alive cell viewer JuLI JuLI is the best solution for …. 2. Alive cell viewer JuLI 1. Alive cell viewer JuLI JuLI is the best solution for …. ◀ … ▶

16 관리자 페이지 구성 1 2 1 2 메인 배너 등록 1. 메인 배너 등록 > 배너 1 - 배너 1 - 배너 2 - 배너 3
- 배너 4 - 배너 5 2. 제품 등록 3. 회사 소개 등록 4. 뉴스 & 이벤트 등록 5. 컨택 정보 등록 1. 메인 배너 등록 > 배너 1 1-1. 메인 배너 형태 선택 Text Image Video Image Video 1 2 1 2 A B 1-2. 텍스트 편집기 텍스트 편집기 등록 수정 삭제 1-3. 이미지 업로드 A 선택시, 이미지 사이즈 000 * 000 / B 선택시, 이미지 사이즈 000 * 000 안내 문구 이미지 업로드 창 등록 수정 삭제 1-4. 비디오 업로드 Video 1 File 업로드 창 / 썸네일 업로드 창 Video2 File 업로드 창 / 썸네일 업로드 창 등록 수정 삭제

17 관리자 페이지 구성 메인 배너 등록 2. 제품 등록 - 배너 1 - 배너 2 - 배너 3 - 배너 4 - 배너 5
3. 회사 소개 등록 4. 뉴스 & 이벤트 등록 5. 컨택 정보 등록 2. 제품 등록 2-1. 제품 등록 카테고리 선택 / 제품 명(메뉴 바 노출) 입력 제품 카테고리 선택 LIFE SCIENCE MEDICAL 제품 명 입력 제품 명 로고 파일 업로드 창 등록 수정 삭제 2-2. Overview 탭 제품 개요 텍스트 편집기 제품 대표 이미지 업로드 창 ( 파일 업로드 / URL 업로드) 제품 관련 자료 (pdf 파일) 업로드 창 연락처 정보 입력 창 ( 1 / tel 1 / tel 2) 등록 수정 삭제 2-3. Tech 탭 텍스트 편집기 이미지 업로드 창 (파일 업로드 / URL 업로드) 등록 수정 삭제 2-4. Specification 탭 텍스트 편집기 등록 수정 삭제

18 + + + 관리자 페이지 구성 메인 배너 등록 - 배너 1 - 배너 2 - 배너 3 - 배너 4 - 배너 5 이미지 등록
2. 제품 등록 3. 회사 소개 등록 4. 뉴스 & 이벤트 등록 5. 컨택 정보 등록 2-5. Image & video 탭 이미지 등록 이미지 업로드 창 (파일 업로드 / URL 업로드) 이미지 제목 / 간략 설명 입력 창 + 이미지 등록 추가 등록 수정 삭제 비디오 등록 비디오 업로드 창 (파일 업로드 / URL 업로드) 비디오 썸네일 업로드 창 (파일 업로드 / URL 업로드) 비디오 제목 / 간략 설명 입력 창 + 비디오 등록 추가 등록 수정 삭제 2-6. Related product 입력 썸네일 이미지 업로드 창 (파일 업로드 / URL 업로드) 링크 URL 입력 창 + 연관 제품 추가 등록 수정 삭제

19 + + 관리자 페이지 구성 메인 배너 등록 3. 회사 소개 등록 - 배너 1 - 배너 2 - 배너 3 - 배너 4 - 배너 5
2. 제품 등록 3. 회사 소개 등록 4. 뉴스 & 이벤트 등록 5. 컨택 정보 등록 3. 회사 소개 등록 3-1. 회사 소개 텍스트 편집기 이미지 업로드 창 ( 파일 업로드 / URL 업로드) 등록 수정 삭제 3-2. PR MOVIE 탭 이미지 등록 이미지 업로드 창 (파일 업로드 / URL 업로드) 이미지 제목 / 간략 설명 입력 창 + 이미지 등록 추가 등록 수정 삭제 비디오 등록 비디오 업로드 창 (파일 업로드 / URL 업로드) 비디오 썸네일 업로드 창 (파일 업로드 / URL 업로드) 비디오 제목 / 간략 설명 입력 창 + 비디오 등록 추가 등록 수정 삭제

20 + + 관리자 페이지 구성 메인 배너 등록 - 배너 1 - 배너 2 - 배너 3 - 배너 4 - 배너 5 2. 제품 등록
3. 회사 소개 등록 4. 뉴스 & 이벤트 등록 5. 컨택 정보 등록 3-3. SUSTAINABILITY REPORT 탭 파일 제목 입력 창 파일 업로드 창 ( 파일 업로드 / URL 업로드) 파일 썸네일 업로드 창 (파일 업로드 / URL 업로드) 메인 페이지에 노출 하기 체크 박스 + 새로운 리포트 추가 등록 수정 삭제 3-4. CAREER 탭 채용 정보 소개 등록 채용 정보 입력 형태 선택 이미지 텍스트 이미지 업로드 창 (파일 업로드 / URL 업로드) 텍스트 편집기 채용 서류 등록 파일 업로드 창(파일 업로드/ URL 업로드) + 서류 등록 추가 등록 수정 삭제

21 관리자 페이지 구성 메인 배너 등록 4. 뉴스 & 이벤트 등록 - 배너 1 - 배너 2 - 배너 3 - 배너 4 - 배너 5
2. 제품 등록 3. 회사 소개 등록 4. 뉴스 & 이벤트 등록 5. 컨택 정보 등록 4. 뉴스 & 이벤트 등록 4-1. 언어 선택 / 카테고리 선택 영문 게시판 국문 게시판 News Event Notice 등록 수정 삭제 4-2. 게시물 관리 (작성/수정/삭제) 게시물 제목 입력 창 게시물 내용 작성 텍스트 편집기 이미지 혹은 썸네일 업로드 창 ( 파일 업로드 / URL 업로드) 메인화면에 노출 여부 설정 체크박스 등록 English Korean Category Subject Date News A Event B C D ◀ … ▶ 수정 삭제

22 관리자 페이지 구성 메인 배너 등록 - 배너 1 - 배너 2 - 배너 3 - 배너 4 - 배너 5 2. 제품 등록
3. 회사 소개 등록 4. 뉴스 & 이벤트 등록 5. 컨택 정보 등록 4-3. 메인화면 노출 설정된 게시물 English Korean Category Subject Date News A Event B C 삭제

23 + 관리자 페이지 구성 메인 배너 등록 5. 컨택 정보 등록 - 배너 1 - 배너 2 - 배너 3 - 배너 4 - 배너 5
2. 제품 등록 3. 회사 소개 등록 4. 뉴스 & 이벤트 등록 5. 컨택 정보 등록 5. 컨택 정보 등록 5-1. 컨택 정보 등록 약도 제목 입력 창 약도 업로드 창 (파일 업로드 / URL 업로드) 주소 입력 텍스트 편집기 + 약도 등록 추가 등록 수정 삭제