단계

산출물

대 

중 

소 

 

 

 요구분석

현행시스템 분석서 

  ○  ○  ○

 

 

 요구사항 정의서(명세)

  ●  ●  ●

 

 

 아키텍쳐 정의서

  ●  ●  ●

 

 

 개발표준 정의서

  ●  ●  ○

 

 

 업무기능 분해도

  ●  ● ●

 

 

 프로세스 다이어그램

 ●

 ●

 ○

 

 

 프로세스 명세서

 ●

 ●

 ●

 

 

 ui 목록

 ●

 ●

 ●

 

 

 UI 정의서

 ●

 ●

 ●

 

 
 인터페이스 정의서 ● ● ●  
 매핑&GAP 분석서 ○

 ○

 ○  
 논리ERD ● ● ○  
 ENTITY 정의서 ● ● ○  
 데이터이행 계획서 ○ ○ ○  
 테스트 전략서

 ○

 ○ ○  
 소계11 11 7   

 설계

ui정의서(설계) 

 ● ● ○  
 인터페이스정의서(설계) ● ● ●  
 프로그램 목록 ● ● ●  
 프로그램명세서 ● ● ●  
 물리erd ● ● ●  
 TABLE 정의서 ● ● ●  

 DATABASE 정의서

 ● ●   
 코드정의서 ● ● ●  
 데이터이행시나리오 ○ ○ ○  
 테이블/컬럼/코드 매핑 정의서 ○ ○ ○  
 테스트 계획서 ● ● ○  

 단위 테스트 케이스

 ● ● ○  
 소계 10

10 

6   
 구현 시스템오픈 계획서 ● ● ○  
 프로그램 소스코드 ● ● ●  
 데이터이행(테스트) 결과서

 ○

 ○ ○  
 단위테스트게이스/로그● ● ○  
 단위테스트 결과서 ● ○ ○  
 통합테스트 시나리오/케이스 ● ● ●  

 시스템테스트 케이스

 ○ ○ ○  
 교육훈련 계획서 ○ ○ ○  
 소계 5

 4

 2  
 테스트 및 이행통합테스트 게이스/로그  ● ● ●  
 통합테스트 결과서 ● ● ○  
 결함추적(통합테스트) ● ● ○  
 시스템테스트 케이스/로그 ○ ○ ○  
 시스템테스트 결과서 ○ ○ ○  

사용자 메뉴얼

 ● ● ●  
 운영자 메뉴얼 ● ● ●  
 인수테스트 결과서 ● ○ ○  
 결함 추적(인수테스트) ○ ○ ○  
 교육훈련 결과서 ● ○ ○  
 데이터 이행 결과서 ○ ○ ○  
 시스템 오픈점검 결과서

 ●

 ● ●  
 소계8 6 3   
  총합계34 31 18   
       


'학습분야(IT) > 웹기획' 카테고리의 다른 글

웹 접근성 이해  (0) 2018.11.25
용어 설명  (1) 2018.10.10
[도구] PowerMockup  (0) 2018.10.05
1. 웹 기획 - 개요  (0) 2018.10.04


웹 접근성이란

- 접근하기 쉽게 / 이용하게 쉽게

웹 콘텐츠에 쉽게 접근할 수 있는 능력


'학습분야(IT) > 웹기획' 카테고리의 다른 글

규모별 테일러링 가이드  (0) 2018.12.03
용어 설명  (1) 2018.10.10
[도구] PowerMockup  (0) 2018.10.05
1. 웹 기획 - 개요  (0) 2018.10.04

건축물을 짓기 위해서는 구체적인 설계도면이 필요하듯이 웹사이트 또는 모바일 앱 서비스를 제작하기 위해서도 설계도면이 필요합니다. 


IT 현장에서는 이를 화면 설계라 지칭하며 

- 와이어프레임, 

- 스토리보드, 

- 프로토타입

으로 구분


국내에서는 파워포인트로 제작한 스토리보드가 표준 설계 방법으로 사용되고 있지만, 

보다 원활한 커뮤니케이션을 위해 점차 다양한 툴로 확장되고 있음






o 와이어프레임(Wireframe)


- 와이어프레임은 화면 단위의 레이아웃을 설계하는 작업

. 의사소통 관계자들과 레이아웃을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 사용하며 

. UI, UX 설계에 집중

- 와이어프레임 툴 

. 손그림, 

 파워포인트, 

. 키노트, 

. 스케치, 

. 일러스트, 포토샵 등



o 스토리보드(Storyboard)


- 디자이너/개발자가 참고하는 최종적인 산출문서

. 정책, 프로세스, 콘텐츠 구성, 와이어프레임(UI, UX), 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 문서

. 현업에서는 해당 문서를 바탕으로 커뮤니케이션을 진행 


- 스토리보드 툴 

. 파워포인트, 

. 파워목업

. 키노트, 

. 스케치, 

. Axure 등




o 프로토타입(Prototype)


- 프로토타입은 실제 서비스와 흡사한 모형을 만드는 작업

. 정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 인터랙션(동적 효과)을 적용함으로써 실제 구현된 것처럼 시물레이션 할 수 있으며, 

. 단시간에 구현이 가능하기 때문에 사용자 경험에 대한 테스트를 진행할 수 있음

. 이를 통해 설계 단계의 리스크를 사전에 예방할 수 있음


- 프로토타이핑 툴 : 

. HTML/CSS, 

. AXURE, 

. INVISON, 

. Flinto, 

. FRAMER, 

. UXPin, 

. 네이버 프로토나우, 카카오 오븐 등.



'학습분야(IT) > 웹기획' 카테고리의 다른 글

규모별 테일러링 가이드  (0) 2018.12.03
웹 접근성 이해  (0) 2018.11.25
[도구] PowerMockup  (0) 2018.10.05
1. 웹 기획 - 개요  (0) 2018.10.04

웹 기획을 위해 필요한 프로그램의 한 종류로 파워목업이란 도구가 있다.

파워포인트로 기획 업무를 하던

파워목업은 파워포인트를 베이스로 한 툴이다. 

따라서, 이미 익숙한 파워포인트 기반으로 문서 작업을 하므로, 

기능성 및 편의성이 뛰어나다. 


파일포맷이 파워포인트 파일(*.ppt, *.pptx)로 저장되니, 제작된 슬라이드는 파워목업이 설치되지 않은 PC에서도 열어서 수정할 수 있습니다. 웹페이지나, 모바일페이지, 애플리케이션 개발등을 하시는 분들에게 상당히 유용한 플러그인이 될것 같습니다.

다운로드 장소 : 




1. 개요 :

라이브러리 창을 PowerPoint 창에 통합하는 애드온 방식을 취하며

와이어 프레임 및 도형 등에 대해 쉽게 액세스 할 수 있음


2. 파워포인트와 연계한 이유에 대한 설명


홈페이지를 가보시면 Powermockup이 파워포인트를
베이스로 만들어진 이유를 소개

- 가장 중요한 사용하기가 쉽다는 점,

- 코딩이나 별도 디자인 툴을 사용하지 않고, 파워포인트라는 하나의 프로그램으로 끝낼 수 있다는 점,

- 스토리보드를 구성할 수 있다는 점(애니메이션이나 하이퍼링크 등 기존PPT 기능 활용)

- 팀으로 일할 경우 함께 작업을 공유할 수 있어 콜라보레이션 작업에 유용하다는 점,

- 다양한 소스의 삽입(import)도 편리하고, 다양한 형태로 내보내기(export)도 가능하다는 점,

- 마이크로소프트 오피스를 기반으로 하다보니 (엑셀, 워드 등과 함께 사용하기 좋다는 점


3. 특징

- 800개 이상의 UI를 가지고 있으며, 웹 기획에 최적화된 요소를 제공

. 이러한 요소들은 프로토타입을 생성하는데 매우 수월하게 해 주는 특징을 가짐




3.1 (Quick Search)빠른검색기능 제공

- 800개 이상의 와이어프레임 등이 각 카데고리별로 분류되어 제공되지만 개별적으로 찾아서 사용하는 것에는 어려움이 따를 수 있음. 즉, 하나하나 카테고리별로 눌러가며 찾는 것보다 검색 시스템이 잘 되어 있어 훨씬 편리

따라서, 각 모양을 검색해서 사용할 수 있도록 검색 기능을 제공함


3.2 (Drag and Drop)드래그앤드롭

- 원하는 아이콘을 원하는 위치로 이동시키면 되는 단순하고 손쉬운 형태를 가짐

검색을 통해 원하는 소스를 찾았다면 삽입 역시 편리하게 드래그 앤 드롭으로 직관적으로 사용





3.3 (Custom Shapes) 사용자 커스텀 도형기능

- 사용자가 제작한 도형을 마우스 오른쪽버튼을 클릭하면 [ Add to PowerMokup ] 메뉴가 나타나면서 파워목업에 모양을 등록해서 사용할 수 있음. 즉, 자주 사용하는 모양을 여러 시트에 바로 적용할 수 있도록 지원함

. 내가 직접 만든 구성요소를 파워목업 라이브러리에 저장해두고 필요할 때 바로 꺼내쓸 수 있음
. 동일한 형태의 요소를 여러곳에서 활용한다면 그때마다 다른 슬라이드를 찾아 복사할 필요 없이 쉐이프 라이브러리에 추가하여 사용함.


3.4 (Smart Shapes)스마트 모양 기능

- 드롭다운 메뉴 등 텍스트 수정이 필요한 모양을 삽입하면 내용을 수정할 수 있는 창이 제공되어 손쉽게 텍스트 내용을 수정(파워포인트에 있는 스마트아트 기능과 유사)

. 모든 항목을 일일이 선택하는 수고로움을 줄이기 위해 전체 사이즈를 함께 줄이기 위해서 그룹지정을 하는 등 편리함 제공




3.5 (Company-wide Library)회사 공용 라이브러리

- 개인적으로 일을 하는 경우가 아니라면 기획안을 작성 시 팀내 협업이 필요하거나 타 부서와의 협조가 필요한 경우 사용
    . 이때 자주 사용하는 쉐이프는 별도 라이브러리를 지정할 수 있어 타 팀원이나 부서에서 수정변경할 때에도 편리하게 이용


4. 파워목업 설치 후 모습

- 파워목업을 설치하면 파워포인트에 ADD-ON 형태의 모습을 보인다.

. PPT에 익숙하다면 어렵지 않게 사용할 수 있을 것이다.



5. 파워목업의 가격 정책

- 파워포인트 플러그인 형태로 사용할 수 있는 파워목업은 개인 사용자 용으로는 $59.99(한화 : 6만원 이상)로서 구매 가능



6. 무료로 사용하는 방법

- 블로그 포스팅 후 이메일을 발송하면 1인 라이센스를 발급해 준다.

해당 사항을 진행할 때는 블로수 방문자 수 및 블로그 사용 현황을 보기 때문에 블로그에 신경쓰길 바란다. 


- 블로거라면 이렇게 파워목업을 소개하는
포스팅을 작성한 후 파워목업 측에 메일을 보내면 됨

https://www.powermockup.com/order/free-license





[출처] 저도 파워목업 다운로드 받아서 사용해 봤습니다~^^ (파워빌더 커뮤니티(PBExpertClub)) |작성자 은근


'학습분야(IT) > 웹기획' 카테고리의 다른 글

규모별 테일러링 가이드  (0) 2018.12.03
웹 접근성 이해  (0) 2018.11.25
용어 설명  (1) 2018.10.10
1. 웹 기획 - 개요  (0) 2018.10.04

1. 웹 기획 개요 및 목적


1.1 개요


- 구축하려는 웹 사이트 주제와 관련하여 무엇을 어떻게 만들지에 대해 기획하는 것이며

- 디자이너와 개발자가 무엇을 어떻게 작업해야 할 지에 대한 근거 마련을 위한 의사소통 할 수 있는 문서


1.2 목적

- 이를 위해, 고객의 추상적 요구에 대한 객관화를 위해 요구 사항 분석을 진행하게 되며, 

- 고객이 원하는 방향대로 분석을 통해 얻은 요구 사항을 적절하게 조합하여 최상의 결과물을 만들어 내고

- 이 결과물을 디자이너, 개발자에게 전달했을 때 그들이 쉽게 이해하여 작업에 반영할 수 있도록 

- 컨셉에 맞는 스토리보드를 작성한다. 




2. 웹 기획의 전반적인 구성(역할)




[ 빨간색 테두리 부분(분석, 설계) 부분이 웹기획 역할 ]

2.1 역할

분석 과정에서
- 제작할 사이트가 어떤 용도인지, 클라이언트가 원하는 방향은 무엇인지, 경쟁 사이트 벤치 마킹 등을 파악하고 

설계 단계로 
- 이를 토대로 사이트에 대한 구성, 디자인, 기능, 소비자 트렌드 등을 상세하게 조사하고 
- 고객이 원하는 방향에 보다 가까워질 수 있도록 설계함 

2.2 전반적인 웹 구축 연계 내용

- 사전 작업 : (서비스 기획) 웹서비스를 구상하고 컨덴츠를 생산할 수 있는 기반이 되는 가이드를 마련

. 웹서비스 구현 모델 기획(IA, 메뉴구조도) / 스토리보드 작성(사용자화면, 운영자화면)


- 진행 작업 : 기획 의도대로 디자인 및 프로그래밍이 될 수 있는 역할 수행

. 디자인, 개발작업 일정 관리(작업항목, 목표일정, 작업진척도)


- 테스트 작업 : 디자인, 프로그래밍 결과에 잘못된 점이 없는지 확인

. 테스트(시나리오작성, 버그리포트)


- 인계 작업 : 운영자가 만들어진 서비스를 사용할 수 있도록 메뉴얼을 만들고 교육 이루어짐

, 메뉴얼, 운영교육

  



3. 웹 기획자의 역할 및 목적

- 전체적으로 사이트를 디자인 하는 일을 한다. 
. 즉 어떤 사이트를 만들 것인가에서부터 효율적인 컨텐츠의 구성과 배치 등등의 일을 하게 된다. 
. 고객이 원하는 사이트를 사용자들의 니즈에 맞춰 제공될 수 있도록 이를 설계하고, 
. 설계된 사이트가 방향에 맞게 완성되어 지도록 유도 하는 것이다.


- 설계된 내용을 디자이너와 개발자에게 전달

. 디자이너와 개발자는 그에 맞게 작업을 진행

. 그 과정에서 기획자는 초기 디자인 컨셉, 홈페이지 기능, 클라이언트가 원하는 방향 등을 디자이너와 개발자에게 끊임없이 인식시켜주는 역할을 해야 함. 그렇지 않으면 초기의 기획 방향과 다른 방향으로 흘러갈 수 있기 때문


- 고객의 요구 사항 수용 및 관리
. 프로젝트 중간중간 클라이언트의 요구사항이 달라지는 경우가 발생하면 그 변경사항을 디자이너와 개발자에게 전달하고 관리

- 도와주는 역할
. 디자이너와 개발자는 오로지 그들의 작업에만 몰두할 수 있도록 도와주는 역할

- 시간 관리
. 프로젝트 전체 일정을 파악하고 수시로 점검하며 프로젝트 진행에 차질은 없는지 확인해야하며 
. 문제 발생 시, 인력, 비용, 시간 손실을 최소한으로 줄이기 위해 노력
. 진행되는 작업에서 발생할 수 있는 문제를 사전에 최대한 방지




4. 웹 기획과 관련된 업무 소개


4.1. 웹기획
- 개요 : 고객의 요구에 맞춘 웹페이지 기획을 담당
. 사용자 요구 파악
. 메뉴 설계, 내부 컨텐츠 정의

4.2. 웹디자인
- 개요 :  웹 화면의 디자인        
. 기획안에 따른 ui/ux 정의
. 내부 컨텐츠 정의, 디자인

4.3. 퍼블리셔
- 개요 : 화면 디자인을 코드화 하여 웹브라우저로 구현 하는 것
. 프론트엔드 개발자와 동일
. 웹디자인에 따른 웹 페이지지 생성

4.4. 웹개발
- 개요 : 웹페이지가 실제로 동작할수 있도록 프로그래밍을 함
. 서버 구축, 서버 관리
. 퍼블리셔 데이터를 기반으로 웹 개발
. 백엔드 개발자와 동일



5. 웹 기획과 관련된 프로그램 소개

- Power Point : 프리젠테이션을 목적으로 만들어진 프로그램 

. 사용의 편의성으로 기획서 및 스토리보드를 작성하는데 도움이 됨

- Power Mockup : 웹 기획에 꼭 필요한 필수 프로그램

. 기획서 및 스토리보드를 작성하는데 편의





'학습분야(IT) > 웹기획' 카테고리의 다른 글

규모별 테일러링 가이드  (0) 2018.12.03
웹 접근성 이해  (0) 2018.11.25
용어 설명  (1) 2018.10.10
[도구] PowerMockup  (0) 2018.10.05

+ Recent posts

티스토리툴바