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