Top 16 웹 디자인 기획서 Trust The Answer

You are looking for information, articles, knowledge about the topic nail salons open on sunday near me 웹 디자인 기획서 on Google, you do not find the information you need! Here are the best content compiled and compiled by the Toplist.maxfit.vn team, along with other related topics such as: 웹 디자인 기획서 웹디자인 기획서 양식, 웹디자인 기획서 ppt, 홈페이지 기획서, 웹 기획서 PDF, 웹 기획 순서, 웹 기획 툴, 웹기획이란, 웹 스토리보드 양식

홈페이지 제작 전 알아야 할 사항들 #2 – 기획서 작성법 기초편 [큐홈페이지]

웹 기획은 이렇게 하세요. 제발

Article author: brunch.co.kr
Reviews from users: 21038 Ratings
Top rated: 4.4
Lowest rated: 1
Summary of article content: Articles about 웹 기획은 이렇게 하세요. 제발 이를 위해서 개발은 물론, 마케팅, 디자인 등 다양한 분야의 기본적인 지식을 알고 있는 것은 상당히 중요한 부분입니다. 와이어프레임과 스토리보드, … …
Most searched keywords: Whether you are looking for 웹 기획은 이렇게 하세요. 제발 이를 위해서 개발은 물론, 마케팅, 디자인 등 다양한 분야의 기본적인 지식을 알고 있는 것은 상당히 중요한 부분입니다. 와이어프레임과 스토리보드, … 디자이너가 기획문서(스토리보드라던지 스토리보드 같은 그런 것들)를 보면서 하는 불만들을 살펴보면 꽤 일관적인 몇 가지가 있습니다. 먼저 “제대로 된” 기획서를 전달해주지 않는다는 점인데요. 와이어프레임 수준의 단순한 구성을 디자이너에게 전달 후에 그려달라고 하면 디자이너는 꽤나 난감할 수가 있습니다. 물론 이 외에도 기획 단계에서 고려된 것들이 실제 시각화
Table of Contents:

Article author: m.blog.naver.com
Reviews from users: 48252 Ratings
Top rated: 3.6
Lowest rated: 1
Summary of article content: Articles about [WEB] 웹 기획 프로세스 ② 스토리보드/ 기획서작성 : 네이버 블로그 디자인 시안이 아니라 메인 시안 단계이다. UX 디자인 단계라고 생각하면 좀 더 쉬운것 같다. 정해진 형식이나 폼이 따로 없지만 보통은 PPT로 작성한다. …
Most searched keywords: Whether you are looking for [WEB] 웹 기획 프로세스 ② 스토리보드/ 기획서작성 : 네이버 블로그 디자인 시안이 아니라 메인 시안 단계이다. UX 디자인 단계라고 생각하면 좀 더 쉬운것 같다. 정해진 형식이나 폼이 따로 없지만 보통은 PPT로 작성한다.
Table of Contents:

카테고리 이동

하디홀릭

이 블로그
웹기획[UX] 웹 TIP
카테고리 글

카테고리

이 블로그
웹기획[UX] 웹 TIP
카테고리 글

[WEB] 웹 기획 프로세스 ② 스토리보드/ 기획서작성 : 네이버 블로그

Article author: yslab.kr
Reviews from users: 24496 Ratings
Top rated: 3.8
Lowest rated: 1
Summary of article content: Articles about [웹/앱 설계의 기본] 화면설계서 작성방법 :: 기획자 데이먼 Updating …
Most searched keywords: Whether you are looking for [웹/앱 설계의 기본] 화면설계서 작성방법 :: 기획자 데이먼 Updating 프로덕트 매니저와 기획자의 메인 업무 중 하나는 UI 설계입니다. 이를 업계에서는 화면설계서, 화면정의서, 스토리보드, MMI(Man Machine Interface)등 다양한 이름으로 부르고 있는데요. 고놈이 고놈이라고 이해..키노라이츠에서 OTT 콘텐츠 포털을 만들고 있어요!
Table of Contents:

1 표지

2 목차

3 히스토리

4 메뉴 구조 (사이트맵)

5 화면 목록

6 설계

7 마무리

강의 영상

TAG

웹 기획은 이렇게 하세요. 제발

디자이너가 기획문서(스토리보드라던지 스토리보드 같은 그런 것들)를 보면서 하는 불만들을 살펴보면 꽤 일관적인 몇 가지가 있습니다.

먼저 “제대로 된” 기획서를 전달해주지 않는다는 점인데요. 와이어프레임 수준의 단순한 구성을 디자이너에게 전달 후에 그려달라고 하면 디자이너는 꽤나 난감할 수가 있습니다.

물론 이 외에도 기획 단계에서 고려된 것들이 실제 시각화 단계에서는 비현실적이거나 구조적으로 적절하지 않아 약간의 트러블이 발생할 수도 있습니다.

몇 차례 다른 글에서도 밝혔듯 기획자는 다양한 각도와 시선에서 제품을 살펴보고 만들어낼 수 있어야 합니다. 이를 위해서 개발은 물론, 마케팅, 디자인 등 다양한 분야의 기본적인 지식을 알고 있는 것은 상당히 중요한 부분입니다.

와이어프레임과 스토리보드, 프로토타입은 다릅니다.

기획자가 최초 화면 설계를 진행하는 모습을 지켜보면 파워포인트에 영역을 어느 정도 잡아둔 뒤에 문서를 그대로 전달하는 모습을 쉽게 볼 수 있었는데, 여기까지 작업된 형태는 와이어프레임 단계라고 볼 수 있습니다.

와이어프레임은 화면 설계에서 각 기능 또는 콘텐츠가 어떤 위치에 존재할 것인지를 대략적으로 잡아내는 것을 의미하며, 실질적인 콘텐츠의 배치보다는 전체적인 레이아웃에 초점을 두고 있습니다.

그러다 보니 큰 그림은 알아볼 수 있어도 각각의 요소에 대한 상세한 정보를 담고 있지 않습니다.

이런 형태는 모두 와이어프레임이라고 말합니다.

와이어프레임은 기획문서를 완성하기 위해 처음 스케치를 진행하는 것으로 볼 수 있습니다. 그림으로 비유해보자면 아직 채색작업이 이루어지지 않은 상태인 거고, 만화를 빗대어보면 대사가 들어가지 않은 상태인 거죠.

그러니까 여기까지 작업하고 디자인 해달라고 하지 마세요.

의견정도는 물어본다고 하더라도, 디자인을 의뢰하는 단계가 아닙니다.

와이어프레임이 정리가 되면 기획자는 이제 기획문서를 만들어야 합니다.

일반적으로 알려진 스토리보드라고 불리오는 기본 포맷은 사실 모두 비슷한 구성을 띄고 있긴 합니다만, 편의를 위해서 어느 정도는 포맷을 바꾸는 것도 문제는 없습니다.

중요한 것은 해당 문서를 디자이너와 개발자가 알아볼 수 있어야 한다는 점입니다.

이를 위해서 파워포인트를 써도 좋고, 제플린이나, 여타 프로토타이핑 툴을 사용해도 괜찮습니다.

핵심은 상대방이 알아보는 것이니까요.

이런 형태는 스토리보드로 볼 수 있습니다.

스토리보드는 많은 정보를 내포하고 있습니다. 기본적으로 디자인 레이아웃을 짤 수 있는 정보가 제공되어야 함은 물론이며, 각각의 요소가 디자인 및 개발의 영역에서 고민할 수 있는 여지가 제공되어야 합니다.

버튼이 어떤 식으로 동작하는 것을 의도했는지를 안다면 해당 버튼을 중요도를 인지하고 디자인에 강조 효과가 들어갈 수도 있을 것이며, 개발자 역시 해당 영역에서 필요한 부분들을 검토할 수 있습니다.

복잡한 기능이 요구되는 영역은 보다 상세하게 기술하여 혼동되는 상황을 피해야 하는 것은 당연한 이야기입니다.

이를 위해 일반적으로 문서에 대한 설명이 별도로 포함되는 편이고, 이러한 설명을 생략할 정도로 스토리보드 문서를 매우 상세하게 작성하는 방법도 있습니다.

이런 정보 역시 스토리보드에서 다루어져야 합니다.

특히 스토리보드에서 중요한 요소 중 하나를 꼽아보면 플로우 차트가 있습니다. 이 플로우 차트는 실제 사용자의 동선이 어떻게 이동되며, 각각의 인터렉션 요소가 어떤 흐름으로 이어지도록 고안되어 있는지를 보여주기 때문에 전체적인 디자인의 흐름을 파악하는데 중요한 정보가 됩니다.

개발 역시 마찬가지입니다. 각 페이지에서 뿌려주는 정보와 수집되는 정보가 어디에서 어떤 목적으로 활용되는지를 파악한다면 전체적인 설계에 도움을 얻을 수 있습니다.

여기까지가 기획자가 진행해야 할 “기획문서의 요건” 입니다.

만약 본인이 기획자라면, 이 정도의 정보가 다른 협업 부서 또는 담당자에게 전달되고 있는지 한번 살펴보는 것도 좋겠습니다.

프로토타이핑은 다음 챕터에서 이야기해보겠습니다.

프로토타이핑은 기획과 디자인의 협업 결과물입니다.

많은 이들은 프로토타입 작업에는 디자이너가 필요하다고 말합니다.

하지만 실제 전체 제품의 기획을 주도한 기획자의 의견이나 조율 없이 만들어진 프로토타이핑은 디자이너의 재해석이 이루어진 결과물에서 끝날 가능성이 높습니다.

디자이너는 의도와 기술적 요소를 고려하기 이전에 시각적으로 최적화시키는 것에 집중하기 때문인데요. 이때 기획의도나 개발 여건이 고려되지 않을 경우 불필요한 요소가 강조되거나 숨겨지는 등의 문제가 발생할 수도 있고, 적절한 타깃에게 유효하지 못한 디자인 타입이 활용될 수도 있습니다.

때로는 내부 개발 여건이 따라주지 못하여 구현 자체가 불가능한 디자인이 나올 수도 있습니다.

프로토타이핑의 목적은 시각화와 UI/UX의 점검입니다.

기획자의 설계문서는 실제로 만들어보면서 설계한 것이 아니기 때문에 논리적 오류가 발생할 수도 있고, 시각화 후에 의도했던 것과 다른 모습으로 실제 사용자의 편의성 또는 심미성이 부족한 상황을 초래할 수 있습니다.

프로토타이핑 과정은 개발에 착수하기 전에 실제 디자인을 입혀보고, 사용자의 흐름을 살펴보면서 발생하는 문제점을 해소하는 것에 있습니다.

이 과정에서 디자인의 디테일을 보정하고 사용자가 버튼을 클릭했을 때 등의 상황에서 발생되는 효과, 각 요소의 움직임, 기타 애니메이션 효과 등을 살피면서 콘텐츠의 집중도와 피로도를 점검하는 것 역시 진행합니다.

전체적인 심미적 요건을 디자이너가 맞춰낸다고 하더라도 전체적인 제품의 목적에 부합하는지를 살피는 것은 기획자가 필요하기 때문이 프로토타이핑 작업에서 기획자는 빠져서는 안 될 중요한 포지션입니다.

제품의 품질은 의도와 목적이 제대로 구현되는 것에서 결정됩니다.

당연하게도 이쁜 디자인, 멋진 디자인으로 구성된 콘텐츠는 사용자의 눈길을 끌 수밖에 없습니다. 여기까지가 디자이너의 역할이라면 사용자가 이 멋진 제품을 “제대로 이용”하도록 구성했는지는 기획자의 역할입니다.

처음 목적대로 제품이 동작하고 고객이 유입되며, 실질적인 전환이 발생하는지에 대해서 가장 큰 책임을 지고 기획을 시작한다는 것을 기획자는 잊어서는 안 됩니다.

[WEB] 웹 기획 프로세스 ② 스토리보드/ 기획서작성

스토리보드/ 기획서 작성 방법, 의미

디자인 시안이 아니라 메인 시안 단계이다. UX 디자인 단계라고 생각하면 좀 더 쉬운것 같다. 정해진 형식이나 폼이 따로 없지만 보통은 PPT로 작성한다. PPT로 작성해도 어떤 형식으로 작성하는지는 회사마다 스타일이 다른듯하다. (실제로 웹기획자나 UX디자이너를 구하는 곳을 보면 구직 조건에 PPT활용 능력을 필요로 하는 곳이 많다.) 이것을 누르면 특정 페이지로 넘어가고, 특정 컨텐츠를 페이지 안에서 찾기위해서 몇 뎁스(웹의 깊이)를 거쳐야 하는지, 해당 페이지에서 이미지들을 보여주는 방식은 어떻고 필터창은 어떤 내용들로 구성되어 대략적으로 어디에 배치되는지 등등 홈페이지의 흐름을 설계하는 것이다. 주의점은 내가 작성한 기획을 받는 사람이 쉽게 이해할 수 있게 작성해야 한다.

-이 단계가 필요한 이유: 다른 팀원들과 협업하고 클라이언트와 쉽게 소통하고, 분쟁을 피하기 위해서이다. 클라이언트가 특정 사이트를 들고와서 ‘이렇게 만들어주세요!’라고 부탁한다. 그럴 때, 웹 기획자는 그 사이트의 (클라이언트가 필요로 하지 않는)모든 기능을 포함해서 만들어 달라고 이해할 수도 있고, 비슷해보이지만 미세하게 다른 ‘이 기능은 안넣어도 되겠지?’라는 자체적인 판단으로 만들게 될 수도 있다. 그럼 나중에 ‘이 기능을 왜 넣어서 돈을 왜 더 받냐’, ‘이 기능을 왜 빼서 추가 작업으로 추가 비용을 발생하게 하냐’같은 클라이언트와의 분쟁이 생길수도 있다. 그때, 기획서에 넣어지는 기능들이 제대로 명시되어 있다면 분쟁을 피할 수 있다. (기획서에 추가되는 기능들과 빠지는 기능들이 정확하게 명시되어 있을때, 서로 분쟁없이 일이 끝날 수 있다.)

[웹/앱 설계의 기본] 화면설계서 작성방법

프로덕트 매니저와 기획자의 메인 업무 중 하나는 UI 설계입니다.

이를 업계에서는 화면설계서, 화면정의서, 스토리보드, MMI(Man Machine Interface)등 다양한 이름으로 부르고 있는데요. 고놈이 고놈이라고 이해하시면 됩니다.

화면설계서는 대부분 파워포인트(키노트)로 제작합니다. 저도 주니어 시절에는 2년간 PPT 설계를 정말 열심히 했는데요. 그때는 설계 문서가 대외비이기도 하고 내 노하우를 남들에게 알려주기 싫어서 꽁꽁 싸매 놓고 있었습니다. 하지만 PPT 설계를 안 한 지도 어느새 10년이 넘었고 공개 가능한 내용도 있어서 문서 몇 개를 짜깁기해서 샘플 설계서를 만들어봤습니다.

이미 현업에 계시는 분들은 다 아실 내용이라 주니어 레벨에서 참고해보시면 좋겠습니다.

1. 표지

모든 문서의 첫 페이지는 표지로 시작합니다.

표지에는 [프로젝트명], [문서 버전], [작성일], [소속], [작성자]를 표기하는데 추가로 회사 로고를 넣거나 프로젝트 성격에 맞게 디자인을 하기도 합니다.

2. 목차

문서의 전체 순서를 간단히 정리합니다.

한글로 작성해도 되지만 많은 분들이 타이틀은 영어로 작성합니다. 영어로 작성하면 좀 더 있어 보이거든요 ^^;;

3. 히스토리

현재 문서의 버전과 히스토리를 정리합니다. 개발자들은 깃허브를 통해 그동안의 코드 변경내용을 상세히 알 수 있지만, 파워포인트 문서는 파일로 주고받다 보니 서로의 버전이 꼬일 수도 있고 변경내용을 추적하기가 어렵습니다. 그렇기 때문에 문서 앞부분에는 그동안의 변경내용과 문서 버전을 꼭 기록해야 합니다.

4. 메뉴 구조 (사이트맵)

제품의 전체 구조를 시각화합니다. 설계 문서를 여럿이 작업하는 경우에는 메뉴 기준으로 업무 범위를 나눌 수도 있고, 문서 양이 많은 경우에도 메뉴 구조별로 쪼개면 나중에 취합하기에도 좋습니다.

5. 화면 목록

문서에 담긴 화면 목록을 정리합니다. IA(InformationArchitecture)와 비슷하다고 보면 되는데 개발자와의 커뮤니케이션을 위해 Screen ID를 표기하기도 합니다. 맨 우측 열에는 페이지별 참고사항을 정리하는데 페이지가 삭제되거나 분리되었을 때 해당 행을 완전히 삭제하기보다는 아래 화면처럼 취소선과 비고를 적절히 활용하면 전체 히스토리를 파악할 수 있어서 좋습니다.

6. 설계

위에서 문서의 전체적인 개요를 정리했다면 이제부터는 본격적인 설계 내용을 포함합니다.

6-1 플로우차트

설계 화면이 간단한 경우에는 굳이 플로우차트를 만들지 않아도 됩니다. 하지만 복잡해질수록 플로우차트를 먼저 정리하고 시작하기를 권장하는데요. 플로우차트를 그릴 때는 [페이지]는 네모로, [프로세스]는 평행사변형, [분기]는 마름모 도형을 사용하면 됩니다. 시작과 끝은 [배경색]을 주면 좀 더 명확합니다.

한 가지 팁을 드리면 [비밀번호 찾기] 우측의 화면처럼 해당 페이지에서 필요한 필드 값을 함께 정리해두면 뒤에서 UI를 그릴 때 큰 고민 없이 바로 시작할 수 있습니다. 또한 얼럿 메시지도 눈에 띄게 표현해주면 좋습니다.

아이디/비밀번호 찾기

6-2 기본 정책

플로우차트와 정책은 세트로 묶어서 한 흐름에 이어가면 좋습니다. 플로우차트에서 담지 못한 내용은 정책 문서로 따로 분리해서 각 항목에 대한 고민사항과 결정사항을 정리합니다.

6-3 권한 정책

프로젝트 성격에 따라 권한 설계가 필요한 경우도 있고 불필요한 경우도 있습니다. 아래 화면은 권한 정책에 대한 예시인데요. 행은 [페이지]와 [사용자 그룹]으로 쪼개고, 열은 [CRUD]로 쪼개면 한눈에 들어와서 보기 좋습니다. 페이지에 따라 특정 기능을 사용할 수 없는 경우에는 명확하게 Block처리를 해주면 좋습니다.

6-4 UI 설계

UI 설계 화면은 이미 익숙하실 거라 생각합니다. 상단 영역에는 화면 목록에서 정리한 내용을 담고, 왼쪽 영역에는 UI를, 우측 영역에는 각 번호에 해당하는 디스크립션을 정리합니다. 디스크립션 작성 팁 중 하나는 아래 화면처럼 [Description], [Check Point], [Related ID]와 같이 성격에 따라 영역을 구분하면 좀 더 깔끔하게 정리할 수 있습니다. 모바일 설계도 같은 방식으로 진행하면 됩니다.

유효성 검사 디스크립션 작성 팁!

설계를 하다 보면 [필수 입력항목]과 [유효성 체크] 시나리오도 정리해야 하는데 우측 공간이 너무 좁은 경우에는 디스크립션을 작성하기가 불편합니다. 이 때는 별도 페이지로 분리해서 아래 화면처럼 [상황, 문구, 처리 시나리오]를 표로 만들어서 정리하면 작성하기도 쉽고 개발자들이 보기에도 훨씬 좋습니다 ^^

7. 마무리

마지막 페이지는 Thank you 혹은 EOD(End of Document) 텍스트로 마무리하면 됩니다. 표지 화면과 디자인 스타일을 비슷하게 유지하면 좋습니다.

네, 여기까지 화면설계서의 구성요소를 간단히 정리해봤습니다. 한 가지 빠진 부분은 ‘모바일 제스처’라던지 ‘얼럿 메세지 스타일’, ‘게시판 작동방식’ 등 문서에서 공통으로 사용되는 내용은 앞 부분에 함께 정리하면 좋습니다.

강의 영상

글에서 담지 못한 내용은 영상으로 정리했으니 이해가 어려우신 분들은 영상도 함께 참고해주세요! ^^

반응형

So you have finished reading the 웹 디자인 기획서 topic article, if you find this article useful, please share it. Thank you very much. See more: 웹디자인 기획서 양식, 웹디자인 기획서 ppt, 홈페이지 기획서, 웹 기획서 PDF, 웹 기획 순서, 웹 기획 툴, 웹기획이란, 웹 스토리보드 양식

Top 16 웹 디자인 기획서 Trust The Answer

웹 기획은 이렇게 하세요. 제발

[WEB] 웹 기획 프로세스 ② 스토리보드/ 기획서작성 : 네이버 블로그

[웹/앱 설계의 기본] 화면설계서 작성방법 :: 기획자 데이먼

웹 디자인 기획서

[웹디자인]웹디자인(홈페이지) 기획서 레포트

웹 기획은 이렇게 하세요. 제발

[WEB] 웹 기획 프로세스 ② 스토리보드/ 기획서작성

[웹/앱 설계의 기본] 화면설계서 작성방법

Leave a Comment Cancel reply