- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
Web Design (웹디자인) 웹기획 탄탄한 홈페이지 설계방법 (스토리보드 다운로드)
2017.10.10 07:17
웹기획 탄탄한 홈페이지 설계방법 (스토리보드 다운로드)
10_홈페이지+스토리보드-(연습공유용+양식제공).pptx
스토리보드 첨부해놨습니다~!! 연습하실때 다운로드 받아가세요~!!

안녕하세요~^^ 웹스입니다~
이번 포스팅은 웹기획 방법에 대해
이야기 해보려고 합니다~^^

웹기획이란 무엇일까요??
웹기획은 홈페이지 제작의 기초공사라 할 수 있습니다~
홈페이지를 구축 하기 전에 홈페이지 제작에 대한
설계 방식과 구성 및 디자인을 계획하고 구상하는 작업을 말하는데요~
웹기획은 홈페이지의 초기계획부터 완성까지의 모든 단계를
기획하는 것이기 때문에 웹기획이 탄탄할수록 제작과정이 원만하고
완성도 있는 홈페이지가 제작되게 됩니다~

웹기획에 앞서 목표와 계획을 먼저 세우는데요~
웹기획 자체의 진행 계획을 세워 그에 맞춰 진행합니다~
위 사진은 웹기획서의 버전과 수정내용을 보여주는데요~
웹기획서를 제작하더라도 그대로 바로 웹제작을 진행하는 것이 아니라
클라이언트와의 회의를 거쳐 클라이언트가 원하는 완성도 있는
웹기획서가 나올 때까지 수정을 거듭합니다~

사이트맵은 웹페이지의 구성에 있어 중요한 역할을 하는데요~
전체 메뉴를 구성함으로
웹페이지의 우선순위와 상하관계를 한눈에 보여줍니다~

위 이미지는 온라인 추리 게임 홈페이지의 기획안입니다~
메인 화면의 컨셉을 파워포인트를 활용해 구성해줍니다~
이때 사이트맵의 구성을 참고해서 메뉴배치를 하면 더욱 작업이 수월하지요~
파워포인트는 벡터 기반이라 화면을 늘려도 깨지지 않기 때문에 PT를 할 때
많은 분들이 선호합니다~

웹기획의 단계에서부터 세부사항에 대한 기획도 함께합니다~
실제 홈페이지라 생각하며 사소하더라도 실제 사용되는
모든 웹페이지를 구상합니다~

웹사이트의 구성을 미리 예측하고 제작해봄으로써
이러한 작업은 컨텐츠의 위치와 뼈대를 잡고 자리를 잡아주는 역할을 합니다~

공지사항 게시판 기획시안의 모습
이벤트 게시판 기획시안의 모습
업데이트 게시판 기획시안의 모습
위와 같이 같은 형식의 게시판이라도
사용 용도를 달리 하기 때문에 각각의 시안을 설정해줍니다~
각 페이지끼리의 사소한 변경점이라도 웹기획자가 잡아내어
구성해야하죠~

웹기획자는 홈페이지의 UI/UX 디자인을 고려하여
기획을 구성해야 합니다~
사용자에게 어떤 서비스를 제공하고 어떤위치에서 편리하게
사용될 수 있을지 고려해서 제작해야하죠~

이와 같이 웹기획안이 탄탄할수록 웹제작의 시작부터 마무리까지
모든 과정이 원할하게 잘 진행됩니다~
첫 단추가 잘 끼워져야 하듯 웹기획은 웹제작에 있어
첫 단추이기에 신중하게 고민하면서 제작해야하죠~

신중하고 탄탄한 웹기획을 하는 웹에이전시~
웹스와 함께하세요^^
[출처] 웹기획 탄탄한 홈페이지 설계방법 (스토리보드 다운로드)|작성자 웹스당
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 9 |
테이블 태그 셀 합치기 그리고, 테이블 안 테이블
| 졸리운_곰 | 2019.03.23 | 566 |
| 8 | 테이블 컬럼 너비 고정 : Fixed Table Cell Width | 졸리운_곰 | 2019.03.21 | 767 |
| 7 | 포지션 css - position (static, relative, absolute, fixed 차이) | 졸리운_곰 | 2019.03.16 | 496 |
| 6 |
DIV 태그를 이용하여 레이아웃 만들기
| 졸리운_곰 | 2019.02.06 | 806 |
| 5 | HTML DIV tag: 세 개의 DIV영역을 가로로 나란히 놓는 방법 - 테이블과 비교 | 졸리운_곰 | 2019.02.04 | 589 |
| 4 |
카드형 디자인/갤러리/리스트 코딩하기.
| 졸리운_곰 | 2018.09.06 | 481 |
| 3 |
[HTML5] span과 div의 차이
| 졸리운_곰 | 2018.06.04 | 800 |
| 2 | HTML div 왼쪽, 오른쪽 배치 | 가을의곰 | 2017.06.10 | 493 |
| 1 |
XPath 이야기
| 졸리운_곰 | 2017.03.20 | 591 |

