웹페이지 설계, 기획서 작성 시 TIP

홈페이지 제작 전문가 칼럼

홈페이지 의뢰전 웹페이지 설계나 기획서 작성을 위해 검색을 하다보면 낯선 용어들을 종종 보게 되실텐데요.기본 용어정도는 알아두면 좀 더 체계적인 기획서 작성을 하실 수 있습니다.

오늘은 웹페이지 개발 관련하여 꼭 알아두어야 할 기획서관련 핵심 필수용어를 간단하게 알아보겠습니다.

참고로 스토리보드, 와이어프레임을 작성하는 프로그램은 PPT외에 파워목업, 카카오 오븐, 발사믹 목업등이 있으니 포털에 검색하여 참고하시기 바랍니다.

기획서 기본내용외에 전략기획에 관한 내용이 궁금하신 분은 아래 칼럼을 참고해주세요.

회사 홈페이지, 업계 1위 사이트 기획하는 제작 노하우

홈페이지 리뉴얼, 제작비용만 날리는 회사들의 2가지 특징(기획,디자인)

| 웹페이지 설계

1. 레이아웃

레이 아웃은 텍스트, 이미지, 버튼등 화면내에서 각 요소들을 배치하는 것을 말합니다.

쉽게 말해서 홈페이지의 배치와 화면구성을 말합니다.

효과적인 레이아웃은 사용자들에게 편안함과 아름다움을 선사합니다.

2. 와이어프레임

화면단위의 레이아웃을 설계하는 작업입니다.

의사소통 관계자들과 레이아웃을 협의하거나 전체적인 서비스의 구성을 공유하기 위해 사용하며

UI/UX 설계에 집중하여 진행합니다.

3. 스토리보드

디자이너/기획자/개발자가 최종적으로 참고하는 산출문서이며,

기능/정책/프로세스/콘텐츠/와이어프레임(UI/UX), DB연동등 웹사이트 구축을 위한 모든 정보가

구체적으로 담겨있는 문서입니다. 보통 의뢰인이 업체에 전달하거나 업체에서 대신 작성하는 최종 기획서라고 보면 됩니다.

스토리보드는 표지, 화면설계, 서비스 흐름도를 구성하여 디자인 요소 중 아주 중요한 부분을 차지합니다.

각 페이지의 정보를 요약하여 컨텐츠, 파일이름, 타이틀, 링크정보를 정리하여 작성합니다.

| 웹사이트 레이아웃 구조

웹사이트의 레이아웃 구조는 일반적으로 헤더, 내비게이션, 컨텐츠 영역, 푸터로 이루어집니다.

1. 헤더(Header)

헤더는 주로 페이지 최상단에 위치하며, 사이트 구성에 따라 좌우측, 하단에 위치하는 경우도 있습니다.

헤더안에는 로고, 사이트맵, 다국어 선택, 회원가입, 로그인등이 위치하여 사용자 편의성을 고려하여

구성되어야 하는 중요한 요소입니다.

2. 내비게이션(navigation)

쉽계 말해서 사이트맵이라고 생각하면 됩니다.

내비게이션은 GNB(Global Navigation Bar) 와 LNB(Local Navigation Bar)로 구성됩니다.

GNB는 상단 메뉴의 1Depth 즉 대메뉴라고 보면 되며,

LNB는 2Depth 이하 하위메뉴라고 보면 됩니다.

'네비게이션'이라는 이름에서 말하듯 특정 메뉴로 갈 수 있도록 도와줍니다.

3. 바디(Body)

사용자에게 전달하는 실질적인 정보가 담겨있는 영역입니다.

웹사이트에 들어갔을때 보여지는 전체적인 웹페이지 라고 보면 됩니다.

컨텐츠는 텍스트, 이미지, 동영상, 사운드등 사이트내에서 제공하는 서비스를 아우르는 개념입니다.

메인 페이지, 서브페이지의 특성및 구성에 따라 표현 방법이 달라집니다.

4. 푸터(Footer)

푸터는 페이지의 가장 하단에 위치하는 영역으로 쉽게 얘기해서 기업명, 주소, 사업자정보, 전화번호등의

회사정보가 들어가 있는 영역입니다.

푸터영역은 정보 통신망법에 명시하도록 규정되어 있어 반드시 기재해야합니다.

지금까지 웹사이트 제작전 알아아할 용어에 대해 알아봤습니다.

멋진 홈페이지 제작하시길 바라며, 그로스코드에 웹사이트 제작 의뢰시 상단의 홈페이지 아이콘을 클릭하셔서 문의 주시기 바랍니다.

👉 그로스코드 포트폴리오 보기

[도움되는 글]

홈페이지 견적 제대로 받는 방법 완벽가이드

홈페이지 제작, 실력있는 업체 고르는 노하우 4가지

홈페이지 제작비용, 4가지 필수 체크리스트

홈페이지 기획서, 6단계 필수 체크리스트

홈페이지 제작의뢰, 모르면 비용날리는 3가지

대기업 홈페이지 제작, 항공 우주 웹사이트 구축 사례 홈페이지 리뉴얼 업체, 제작비용 날리는 회사들의 공통점

목록

프로젝트 문의 →

COLUMNS