#11 스마트문화앱 콘텐츠 설계

 

스마트문화앱 콘텐츠 설계 - 강의 내용.

 

NCS 학습자료  -> 자료다운로드

학습 1. 콘셉트 도출하기
           g2b : 입찰사이트 > 과업지시서(제안요청서).
           사업목표, 과업내용, 사업금액, 요구사항 기타등등.
           콘셉 > 방향성 > 수시로 확인.
           기간 : 5개월사업 : 시안컨펌 > 웹사이트제작 > 최종컨펌.
           비용 : 5천만원(End-Day).
           시방서 : 마지막 납기일로 부터 역으로 일정을 계산.
           D-day
           D-1달
           D-2달
           ....
>>> 90% 이상 디자인(웹디자인, 제품디자인, 시각디자인, 영상디자인)이 결정한다.

웹사이트를 만들 때 기획, 디자인, 퍼블리싱, 개발.

 1-1. 콘셉트 범위 결정
• 프로젝트 기획서를 바탕으로 콘셉트의 범위를 결정할 수 있다.
 1-2. 콘셉트 형태 결정
• 문화 콘텐츠 콘셉트에 필요한 디자인 기본 형태를 정할 수 있다.
• 스토리텔링을 하기 위한 콘텐츠 개발에 필요한 콘셉트를 정할 수 있다.
- 아이콘, 첫 화면, 메뉴 화면, 로딩 화면, 조작 인터페이스 등의 디자인도 콘셉트에 맞춰 진행.

학습 2. 스토리보드 작성하기
 2-1. 스토리 기획
• 결정된 콘셉트를 기반으로 아이디어 회의를 통해 스토리를 기획할 수 있다.
• 기획된 스토리텔링에 필요한 특성과 요소를 파악하고 앱 스토리를 작성할 수 있다.
 2-2. 스토리 시각화
• 스토리텔링의 스토리 내용을 완성된 스토리를 기반으로 주요 장면을 도출할 수 있다.
• 스토리텔링에서 작성된 스토리 내용을 표와 그림(시각화)으로 표현할 수 있다.

학습 3. 문화 콘텐츠 기획안 작성하기
 3-1. 기획서 작성
• 완성된 스토리보드를 기반으로 문화 콘텐츠 기획서 내용[배경, 캐릭터, 연출]을 결정
할 수 있다.
• 결정된 내용을 기반으로 소스(source)를 기획하고 플랫폼에 적용할 기획서를 작성할 
수 있다.
 3-2. 기획서 자료 추출

실습에 대한 방향성 = 쇼핑몰 기획

웹사이트 기준
스토리보드 : 화면설계서
각 페이지 마다 존재하는 요소들을 정의하고, 그 해당 요소의 동작에 대한 설명.
표현 기타 작업자가 알아야 할 사항에 대해 정의 한 문서.

메뉴구성도(IA) - 인포메이션 아키텍쳐
쇼핑몰 : 테마 자유(예:남성복 쇼핑몰)
- 메인화면(메인페이지)
공통영역 : 헤더(로고, 메인메뉴, 유틸메뉴-로그인, 회원가입, 장바구니 등등), 푸터, 기타(퀵메뉴)
- 서브화면(서브페이지)
공통영역 : 헤더, 푸터, 기타(퀵메뉴), 서브메뉴
회원정보
로그인
회원가입
정보수정
회원탈퇴
마이페이지
개인정보(이름, 주소, 연락처, 결제정보 등등)
구매내역
주문현황
카테고리
아우터
상의
하의
악세사리
신발
가방
...
상품상세
상품기본정보
상품상세정보
가격(할인가격)
장바구니
결제하기
상품후기
문의하기
비회원구매
결제관련
무통장
계좌이체
카드결제
휴대폰결제
상품권결제
------------------------------------------------
기획전
프로모션
추천상품
세일상품
인기상품

* 평가방법 *
1. 콘셉트 도출(쇼핑몰 테마, 콘셉)
2. 스토리보드(메인화면, 상품상세화면)
기획안에 대한 내용
3. 인포메이션 아키텍쳐 작성(기획안 작성)

CSS로 HTML 요소에 색 입히기.
글씨
color
글씨와 글씨 장식(밑줄, 윗줄, 취소선 등)을 그릴 때 사용할 색입니다.

background-color
글씨의 배경색입니다.

text-shadow
글씨의 그림자 효과를 설정합니다. 여러 옵션 중에서 그림자 색을 정할 수 있습니다. (이후 다른 옵션에 따라 흐려지고 배경과 섞입니다.)

박스
border
테두리 항목에서 박스 테두리에 사용할 수 있는 CSS 속성의 목록을 확인하세요.
background-color
전경 콘텐츠가 없는 곳에 표시할 배경색입니다.

테두리
모든 요소는 주위에 테두리를 가질 수 있습니다. 기본적인 테두리는 요소 콘텐츠의 모서리를 따라 그리는 선입니다.
border 단축 속성을 사용하면 색은 물론 너비와 스타일(실선, 점선 등)같은 속성을 한 번에 설정할 수 있습니다.

border-color
모든 면의 테두리가 사용할 단색입니다.
border-left-color, border-right-color, border-top-color, border-bottom-color

------------------------
절대경로
/ 를 기준으로 경로를 적는다.

상대경로
현재파일을 기준으로 경로를 적는다.

html폴더 안에 index.html 문서 위치를 기준으로
1. 절대경로로 지정하는 방법
<img src="/images/lion.jpg" alt="설명">
2. 상대경로로 지정하는 방법
<img src="images/lion.jpg" alt="설명">

/
index.html
css
images
js
port
work
work1.html
<img src="/images/lion.jpg" alt="설명">


로컬(나의pc) : 도메인도 없고 서버도 아니고 아무것도 아니다. 그래서 절대경로 사용하면 안된다.
서버 : 도메인과 연결된 pc.