Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
W E B S I T E S T O R Y B O A R D
U P D A T E : 2 0 1 9 . 0 2 . 1 3
이 다 솜
목 차
01 02 03 04 05 06
1-1. Site Map 2-1. 레이아웃(공통)
2-2. 레이아웃(메인)
3-1. 레이아웃(서브공통)
4-1. 메인 페이지 5-1. 팔도소개
5-2. 브랜드소개
5-3. 제품소개
5-4. 팔도소식
5-5. 커뮤니티
5-6. 이벤트
Main Sub
6-1. Login Page
6-2. Join Page
6-3. Find ID
6-4. Find PW
웹 페이지
07 08
8-1. 팔도소개
8-2. 브랜드소개
8-3. 제품소개
8-4. 팔도소식
8-5. 커뮤니티
8-6. 이벤트
모바일 페이지
7-1. 메인 페이지
1. Site Map
Paldo main
팔도소개 브랜드소개 팔도소식 인재채용 커뮤니티 이벤트
기업소개
연혁
CI
사업영역
오시는길
전체제품
면브랜드
음료브랜드
간편식브랜드
뉴스&홍보
광고
고개의소리
FAQ
기업문화
채용안내
채용공고
인사제도 팔도SNS
완료된 Event
진행중인 Event
로그인 회원가입
아이디찾기 비밀번호찾기
제품소개(팔도비빔면)
2. 레이아웃(공통)
① 로고 & 메인 메뉴(header)
③ 주소 & 하단메뉴(footer)
② 메인 비주얼
① 로고 & 메인 메뉴(header)
- 왼쪽상단 홈페이지 검색기능
- 오른쪽상단 로그인,회원가입,아이디찾기,
비밀번호찾기 메뉴
- 메인메뉴: 팔도소개, 브랜드소개, 팔도소식,
인재채용, 커뮤니티, 이벤트
② 메인 비주얼
- 팔도주력상품 배너홍보
- 각각 좌우 화살표를 누르면 비주얼 이미지가
다른 이미지로 움직이며 바뀌게 됩니다.
- paging버튼을 누르면 해당 순서에 맞는
비주얼이 활성화 됩니다.
③ 주소 & 하단메뉴(footer)
- 하단메뉴: 이용약관, 이메일수집거부, 고객센터,
개인정보취급방침
- 주소: 서울특별시 서초구 강남대로 577
사업자등록번호: 308-81-03161
대표이사: 고정완
전화: 1577-8593
팩스: 02-3449-6657
* 모든 페이지에 header/footer 공통
2-1. 레이아웃(메뉴)
① 메인 메뉴
③ 광고배너
① 메인 메뉴
- 모든 페이지에 공통으로 포함
- 팔도소개, 브랜드소개, 팔도소식, 인재채용,
커뮤니티, 이벤트
- 각 메인 메뉴를 클릭 시 서브페이지로 이동
② 서브 메뉴
- 메인 메뉴에 hover 할 경우 서브 메뉴가 활성화
된다. 팔도의 전체 메뉴를 볼 수 있습니다.
③ 광고배너
- 메인 메뉴 hover 시 인재채용과 이벤트 배너가
활성화된니다.
②서브 메뉴
3. 레이아웃(서브공통)
② 경로표시 & 서브메뉴
① 서브 비주얼
① 서브 비주얼
- 서브페이지에 대한 간단한 설명
② 경로표시 & 서브메뉴
- 경로표시: 홈 바로가기 버튼과 상위메뉴와 하위
메뉴로 구성됨(현재 페이지 위치를 알려줌)
- 서브메뉴: 메인 메뉴 클릭 시 서브페이지의
서브메뉴들 존재(서브메뉴 없는 페이지도
존재)
* 모든서브페이지에 서브비주얼/경로 공통
Story board
Paldo main
팔도소개 브랜드소개 팔도소식 인재채용 커뮤니티 이벤트
기업소개
연혁
CI
사업영역
오시는길
전체제품
면브랜드
음료브랜드
간편식브랜드
뉴스&홍보
광고
고개의소리
FAQ
기업문화
채용안내
채용공고
인사제도 팔도SNS
완료된 Event
진행중인 Event
로그인 회원가입
아이디찾기 비밀번호찾기
제품소개(팔도비빔면)
4. Main Page
①
②
① 팔도의 신제품 이미지가 롤링
paging 버튼을 누르면 해당 순서에
맞는 제품으로 움직이며 보여집니다.
② 팔도의 인기제품을 라면,음료,신제품
tab 버튼을 누름으로써 각각 제품에
맞는 제품리스트가 활성화됩니다.
인기 제품을 한눈에 볼 수 있습니다.
③ 팔도의 사업영역 부분을 확인 할 수
있는 공간이다. 라면,음료,수출,물류
순으로 중요도가 큰 순서에 따라 배치
하고 컨텐츠 박스의 크기도 다릅니다.
More버튼을 누르면 해당하는 사업영
역으로 이동하여 더 상세한 정보를 확
인할 수 있습니다.
④ 팔도의 이모저모를 엿볼 수 있고 홍보
역할을 하는 공간인 커뮤니티 영역이
다. 인스타그램, 페이스북, 블로그,
유튜브 4가지 SNS로 연결되어 있습니
다. 각 컨텐츠마다 마우스를 올리면
opacity가 살짝 달라집니다.
* header/footer는 모든 페이지의레이아웃이 동일하므로 생략합니다.
화면명
화면경로
업데이트일
작성자명
메인페이지
Index.php
2019.02.13
이다솜
Description
③
④
* 기본폰트: 나눔고딕체 / color: #666
Paldo main
팔도소개 브랜드소개 팔도소식 인재채용 커뮤니티 이벤트
기업소개
연혁
CI
사업영역
오시는길
전체제품
면브랜드
음료브랜드
간편식브랜드
뉴스&홍보
광고
고개의소리
FAQ
기업문화
채용안내
채용공고
인사제도 팔도SNS
완료된 Event
진행중인 Event
로그인 회원가입
아이디찾기 비밀번호찾기
제품소개(팔도비빔면)
Story board
① ②
③
④ ⑤ ⑥
5-1. Sub Page
①
① 팔도기업에 대한 설명을 간단하고 한
눈에 보기 쉽게 모아둔 공간입니다.
팔도기업은 어떤 기업이며, CEO인사
말과 핵심가치에 대해 간략하게 설명
하고 있습니다.
② 핵심가치에 해당하는 아이콘박스는
주컬러인 #68962a와 #db3833과
보조컬러인 #8d7674를 사용합니다.
* header/footer는 모든 페이지의레이아웃이 동일하므로 생략합니다.
화면명
화면경로
업데이트일
작성자명
팔도소개 → 기업소개
paldo-about.php
2019.02.13
이다솜
Description
* 기본폰트: 나눔고딕체 / color: #666
②
5-2. Sub Page
①
① 팔도의 대표제품인 라면,음료, 간편식
브랜드의 신제품을 소개하는 영역.
각 tab 메뉴를 클릭하면 해당 제품들
이 배너형태로 활성화됩니다.
② 라면, 음료, 간편식이 각각 롤링배너
형태로 돌아갑니다. 가운데 이미지는
활성화되어 나오지만 양옆의 이미지는
opacity가 흐려지고 절반의 이미지만
노출되어 있습니다.
③ 제품들의 히스토리를 엿볼 수 있음.
제품소개를 클릭 시 해당하는 제품의
히스토리와 해당제품과 관련된 제품들
을 모아서 볼 수 있는 제품소개 페이지
로 이동합니다.
* header/footer는 모든 페이지의레이아웃이 동일하므로 생략합니다.
화면명
화면경로
업데이트일
작성자명
브랜드소개 → 전체제품
brand.php
2019.02.13
이다솜
Description
* 기본폰트: 나눔고딕체 / color: #666②
③
5-3. Sub Page
①
① 팔도의 각 제품마다 제품 소개 페이지
를 구현합니다. 제품이 탄생하게 된
탄생 배경부터 앞으로의 발전가능성
등 에 대해 설명합니다.
또한, 각 제품과 연관성 있는 제품들을
모아서 보여주는 기능도 하고 있습니
다.
* header/footer는 모든 페이지의레이아웃이 동일하므로 생략합니다.
화면명
화면경로
업데이트일
작성자명
전체제품 → 제품소개
product.php
2019.02.13
이다솜
Description
* 기본폰트: 나눔고딕체 / color: #666
5-4. Sub Page
①
① 팔도의 홍보영상과 뉴스를 간략하게
보여주고 있는 페이지. 홍보영상
을 클릭 시 바로 영상이 재생되고 제목
을 클릭하면 광고페이지로 이동하여
큰 화면으로 볼 수 있습니다.
또한 광고 페이지로 넘어가면 더 많은
광고를 볼 수 있습니다.
* header/footer는 모든 페이지의레이아웃이 동일하므로 생략합니다.
화면명
화면경로
업데이트일
작성자명
팔도소식 → 뉴스&홍보
paldo-news.php
2019.02.13
이다솜
Description
* 기본폰트: 나눔고딕체 / color: #666
5-5. Sub Page
①
① SNS 아이콘을 누르면 각 SNS의 상세
영역이 보여진다. 클릭 시 SNS의 글
로 이동합니다.
② 더보기 버튼을 클릭 시 SNS 컨텐츠 박
스가 늘어나며 더 많은 글이 보여집니
다.
* header/footer는 모든 페이지의레이아웃이 동일하므로 생략합니다.
화면명
화면경로
업데이트일
작성자명
커뮤니티 → 팔도SNS
community.php
2019.02.13
이다솜
Description
* 기본폰트: 나눔고딕체 / color: #666
②
5-6. Sub Page
①
① 진행중인 이벤트를 리스트로 나열하
여 보여줌. 이미지 또는 이벤트 제목
을 클릭하면 이벤트에 대한 상세페이
지로 이동합니다.
② 당첨자발표 버튼을 누르면 당첨자발
표 페이지로 이동하여 결과를 확인할
수 있습니다.
* header/footer는 모든 페이지의레이아웃이 동일하므로 생략합니다.
화면명
화면경로
업데이트일
작성자명
이벤트 → 진행중인 Event
event.php
2019.02.13
이다솜
Description
* 기본폰트: 나눔고딕체 / color: #666
②
Paldo main
팔도소개 브랜드소개 팔도소식 인재채용 커뮤니티 이벤트
기업소개
연혁
CI
사업영역
오시는길
전체제품
면브랜드
음료브랜드
간편식브랜드
뉴스&홍보
광고
고개의소리
FAQ
기업문화
채용안내
채용공고
인사제도 팔도SNS
완료된 Event
진행중인 Event
로그인 회원가입
아이디찾기 비밀번호찾기
제품소개(팔도비빔면)
Story board
① ②
③ ④
6-1. Login Page
①① 로고를 누르면 메인 페이지로 이동
② 로그인 성공 후 메인 페이지로 이동
③ 아이디 찾기, 비밀번호 찾기, 회원가입
메뉴로 이동 가능합니다.
* header는 없음. footer는 모든 페이지의 레이아웃이 동일하므로 생략합니다.
화면명
화면경로
업데이트일
작성자명
로그인
login.php
2019.02.13
이다솜
Description
* 기본폰트: 나눔고딕체 / color: #666
②
③
6-2. Join Page
①
① 로고를 누르면 메인 페이지로 이동
(header 영역)
② 회원가입 완료 후 로그인 페이지로
이동 됩니다. 아이디, 비밀번호, 이름,
생년월일, 성별, 보안 문자,휴대폰번호
는 필수 입력란입니다.
③ HOME, 아이디 찾기, 비밀번호 찾기
페이지로 이동 가능 합니다.
* header는 ①번 영역.footer는 모든 페이 지의 레이아웃이 동일하므로 생략 합니다.
화면명
화면경로
업데이트일
작성자명
회원가입
join.php
2019.02.05
이다솜
Description
* 기본폰트: 나눔고딕체 / color: #666
②
③
6-3. Find ID Page
①
① 로고를 누르면 메인 페이지로 이동
(header 영역)
② 아이디 찾기 완료 후 로그인 페이지로
이동합니다.
이름, 생년월일, 성별, 보안 문
자,휴대폰번호는 필수 입력란입니다.
③ HOME, 비밀번호 찾기, 회원가입
페이지로 이동 가능 합니다.
* header는 ①번 영역.footer는 모든 페이 지의 레이아웃이 동일하므로 생략 합니다.
화면명
화면경로
업데이트일
작성자명
아이디 찾기
findID.php
2019.02.13
이다솜
Description
* 기본폰트: 나눔고딕체 / color: #666
②
③
6-4. Find PW Page
①
① 로고를 누르면 메인 페이지로 이동
(header 영역)
② 비밀번호 찾기의 경우 아이디 입력란
추가됨. 비밀번호 찾기 완료 후 로그인
페이지로 이동합니다.
아이디, 이름, 생년월일, 성별, 보안 문
자,휴대폰번호는 필수 입력란입니다.
③ HOME, 아이디 찾기, 회원가입
페이지로 이동 가능 합니다.
* header는 ①번 영역.footer는 모든 페이 지의 레이아웃이 동일하므로 생략 합니다.
화면명
화면경로
업데이트일
작성자명
비밀번호 찾기
findPW.php
2019.02.13
이다솜
Description
* 기본폰트: 나눔고딕체 / color: #666
②
③
7. 모바일 메인
① 로고&전체메뉴&검색(header)
① 전체메뉴 아이콘을 누르면 팔도의
전체메뉴가 활성화됩니다.
돋보기 아이콘을 누르면 검색창이 활성
화됩니다.
② 메인 비주얼의 이전, 다음 버튼을 없애
고 플러그인을 이용하여 터치 형식으
로 페이지를 넘길 수 있습니다.
③ 웹 페이지 상에서 8개씩 상품이 노출
됐다면 모바일 페이지에서는 2개씩 노
출되며 터치로 넘겨서 나머지 상품들
을 볼 수 있습니다.
라면, 음료, 간편식 탭을 누르면 해당
상품이 활성화 됩니다.
④ 웹 페이지 상에선 사각형 박스로 구현
되어 있던 사업영역 부분을 모바일에
서는 리스트 형식으로 레이아웃을 조
정하였습니다.
⑤ 웹 페이지 상에선 박스 5개의 레이아
웃형태였다면 모바일에서는 박스 4개
의 레이아웃 형태로 바꾸었습니다.
⑥ 로고와 하단메뉴, 주소를 가운데 정렬
하여 간단하게 바꾸었습니다.
화면명
화면경로
업데이트일
작성자명
모바일 메인 페이지
m_index.php
2019.02.13
이다솜
Description
* 기본폰트: 나눔고딕체 / color: #666
② 메인비주얼
③
④
⑤
⑥주소&하단메뉴(footer)
8-1. 모바일 팔도소개
①
① 모바일에서는 현재경로와 서브메뉴는
제외하고 서브 비주얼만 배치하였습니
다. 나머지 컨텐츠는 동일합니다.
화면명
화면경로
업데이트일
작성자명
팔도소개 → 기업소개
m_paldo_about.php
2019.02.13
이다솜
Description
* 기본폰트: 나눔고딕체 / color: #666
* header/footer는 모든 페이지의레이아웃이 동일하므로 생략합니다.
8-2. 모바일 브랜드
①
① 신상품 배너는 1개씩만 보여집니다.
② 모바일 페이지에서도 전체제품 검색
이 가능하여 원하는 제품을 찾을 수 있
고, 기존 5열에서 2열의 형태로 레이
아웃을 변경하
였습니다.
화면명
화면경로
업데이트일
작성자명
브랜드소개 → 전체제품
m_brand.php
2019.02.13
이다솜
Description
* 기본폰트: 나눔고딕체 / color: #666
* header/footer는 모든 페이지의레이아웃이 동일하므로 생략합니다.
8-3. 모바일 제품소개
①
① 연관 제품을 모아서 보여주는 부분은
생략하고 브랜드 스토리 부분만 레이
아웃을 변경하여 기존과 동일하게 보
여줍니다.
화면명
화면경로
업데이트일
작성자명
전체제품 → 제품소개
m_product.php
2019.02.13
이다솜
Description
* 기본폰트: 나눔고딕체 / color: #666
* header/footer는 모든 페이지의레이아웃이 동일하므로 생략합니다.
8-4. 모바일 팔도소식
①
① 기존 3개씩 있던 동영상은 1개씩만 보
여짐. +를 누르면 홍보영상만 있는 페
이지로 이동합니다.
화면명
화면경로
업데이트일
작성자명
팔도소식 → 뉴스&홍보
m_paldo_news.php
2019.02.13
이다솜
Description
* 기본폰트: 나눔고딕체 / color: #666
* header/footer는 모든 페이지의레이아웃이 동일하므로 생략합니다.
8-5. 모바일 커뮤니티
①
① 3열의 레이아웃에서 1열의 리스트형
식으로 변경하였습니다. SNS tab을
클릭하면 해당 SNS의 글이 보여집니
다.
화면명
화면경로
업데이트일
작성자명
커뮤니티 → 팔도SNS
m_community.php
2019.02.13
이다솜
Description
* 기본폰트: 나눔고딕체 / color: #666
* header/footer는 모든 페이지의레이아웃이 동일하므로 생략합니다.
8-6. 모바일 이벤트
①
① 이벤트를 박스형식으로 리스트하여
화면에 보여줍니다.
화면명
화면경로
업데이트일
작성자명
이벤트 → 진행중인 Event
m_event.php
2019.02.13
이다솜
Description
* 기본폰트: 나눔고딕체 / color: #666
* header/footer는 모든 페이지의레이아웃이 동일하므로 생략합니다.
W E B S I T E S T O R Y B O A R D
U P D A T E : 2 0 1 9 . 0 2 . 1 3
THANK YOU