국비지원교육정보

  • 전체과정일정표
  • 입학상담문의 053-421-1313
  • 국비정보 및 강의정보


대구 직업전문학교 국비지원 무료교육 센터  국비지원교육정보   |    

로케이션
> 국비지원교육정보

국비모음 상세보기

국비모음 상세보기
대구컴퓨터학원 - 와이어프레임 기반 스토리보드 제작하기 - UIUX스마트반응형웹기반 프론트엔드실무
작성자 학사지원 조회수 28 추천수

0

등록일 2022.04.25

 

UIUX스마트반응형웹기반 프론트엔드실무A

▶ 스토리보드

웹에서의 스토리보드는 웹 사이트 개발에 있어서 중요한 설계도이자 구체적인 작업 지침 서로, 각 화면에 대한 정의와 구성, 내용, 기능, 서비스 흐름을 상세하게 설계하고 정의한 문서이다. 와이어 프레임이 화면의 구조와 흐름을 파악하거나 전체 구조를 조감하기 위해 비교적 단순화한 작업인 반면, 스토리보드는 각 화면의 흐름이 자세히 포함된 작업이다. 스토리보드의 완성은 기획 단계의 마무리를 의미하는데, 스토리보드에 명시된 내용을 토 대로 디자이너는 시각 인터페이스를 디자인하고, 프로그래머는 프로그램을 설계하고 세부 적인 코딩을 진행하게 된다.

사용자 등록이미지

 


▶ 스토리보드 작성
스토리보드는 대개 표지와 개정 이력, 공통 요소 정의, 정보 구성도, 서비스 흐름도, 화면 설계의 순으로 작성하며, 프로젝트 규모 등에 따라 세부적 내용은 변경될 수 있다.

1. 표지
제작하는 웹이나 애플리케이션의 프로젝트의 이름과 문서명, 작성자 이름, 문서 버전, 작 성일, 최종 수정일, 결재 영역 등으로 구성된다.

2. 개정 이력
성공적인 웹·애플리케이션 개발을 위해서는 기획자와 디자이너, 개발자, 클라이언트 등 다양한 구성원 간의 협업이 중요하며, 끊임없는 커뮤니케이션을 통하여 제작 과정과 내용 등을 수정한다. 개정 이력에는 프로젝트 개발에 참여하는 구성원들이 수정된 내용을 한눈 에 알아볼 수 있도록 수정된 날짜와 상세 내용, 수정 버전 등을 작성한다.

사용자 등록이미지



3. 정보 구조도
I.A(information architecture)라고도 표기하며, 정보 구조 및 흐름을 한눈에 파악할 수 있도 록 작성한 문서이다.


사용자 등록이미지


4. 서비스 흐름도(flow chart)
서비스 흐름도는 각 메뉴와 주요 기능별 프로세스 흐름을 한눈에 파악할 수 있도록 도와 준다.

사용자 등록이미지



5. 화면 설계
화면 설계 페이지는 크게 세 가지 영역으로 구분할 수 있으며, 표준화된 규격이 없기 때 문에 작성자나 업체에 따라 조금씩 차이를 보인다.
(1) 페이지 정보 영역
주로 페이지 상단에 위치하며, 프로젝트명, 화면 이름 및 파일명에 해당하는 화면 ID, 화면 경로 등 문서에 관련된 전반적 정보 등을 명시하는 영역이다.
(2) 화면 설계 영역
각 페이지의 화면 구조, 내비게이션 구성과 위치, 시각 인터페이스 요소별 기능, 이미 지나 아이콘, 텍스트와 같은 콘텐츠 요소 등에 대하여 상세하게 묘사하는 영역이다.
(3) 화면 설명 영역
화면 설계 영역에서 표현하지 못한 내용이나 상세 기능 및 동작 방식, 요구 사항 등을 글로 상세하게 명시하는 영역으로 디자이너 및 개발자의 이해를 도울 수 있다.
(4) 하단 영역
문서 작성자와 회사명, 페이지 숫자 등을 기입한다.

 

사용자 등록이미지

  • 페이스북으로 글 보내기
  • 트위터로 글 보내기
  • 목록
  • 인쇄
  • 삭제

국비모음 목록

국비모음 목록
번호 제목 작성자 추천 조회 등록일
870 대구국비지원무료교육센터 - 패션봉제부속물 테이핑 처리 - 스마트패션디자인 학사지원 0 4 2022.08.08
869 대구국비지원학원 - 스마트 패션디자인 - 의류생산 부속물 종류 학사지원 0 6 2022.08.02
868 대구국비지원무료교육 - 객체지향 프로그래밍 기법구현 - JAVA활용SW융합기술 학사지원 0 7 2022.07.25
867 대구 국비지원 - 3D프린팅 주얼리제작 - 보석의감정 유색보석 학사지원 0 8 2022.07.20
866 (산대특) 아웃도어 패션 메이킹 양성과정 - 대구국비 - 패션의류생산의뢰서(원자재/부자재) 학사지원 0 11 2022.07.12
865 대구컴퓨터학원 - JAVA활용SW융합기술B - 객체지향 프로그래밍 언어 활용 학사지원 0 13 2022.07.04
864 대구국비지원무료교육센터 - 3D프린터 활용 G코드확인 - 3D프린터 활용 제품디자인 모델링 학사지원 0 13 2022.06.27
863 3D프린터 활용 제품디자인 모델링 - 대구국비지원학원 - 3D제품 기획 학사지원 0 20 2022.06.20
862 대구국비지원교육센터 - 인터페이스구현 - JAVA활용 SW융합기술 학사지원 0 31 2022.06.14
861 대구직업전문학교 - 렌더링 디자인 2Dㆍ3D 도면 제도작업 - 3D프린터 활용 제품디자인 모델링 A 학사지원 0 19 2022.06.09
860 대구국비지원학원 - 서버프로그램구현 개발환경 구축 - JAVA활용SW융합기술 학사지원 0 20 2022.05.30
859 실내디자인 프로세스 - 스마트 퍼블릭 디자인 - 대구국비지원무료교육 학사지원 0 20 2022.05.23
858 대구 국비지원 - UIUX 스마트반응형 웹기반 프론트엔드실무 - 그래픽 이미지를 활용 정보표현 학사지원 0 16 2022.05.16
857 대구국비 - 실내디자인 공간계획 색채계획 - 3D프린터를 활용한 스마트 퍼블릭 디자인 학사지원 0 22 2022.05.10
856 실내인테리어 공간및 환경분석 - 대구국비지원컴퓨터학원 - 3D프린터를 활용한 스마트 퍼블릭디자인 학사지원 0 30 2022.05.02
비밀번호를 입력하세요.
비밀번호
확인
취소
비밀번호를 입력하세요.
비밀번호
확인
취소
게시판을 선택하세요.
게시판선택
확인
취소
신고사유를 선택하세요.
확인
취소
  • 입학신청
  • 전체과정일정표
  • 교육상담
  • 우수기관