NCS

훈련일 2017. 06. 19(월)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 디지털 디자인 프로젝트 기획
능력단위요소 프로젝트 파악하기
이름 김소진

제안 요청서(REP : Request For Proposal)

프로젝트를 제안하기를 요청하기 위하여 클라이언트가 작성되는 최초의 요구 사항 정의서 이다. 프로젝트의 취지,목적,범위,기능적 요구, 개발 환경, 일정,예산,업무 요건 등 전반적으로 프로젝트를 파악할 수 있는 내용을 기본으로 하며, 제안내용에서 클라이언트가 특별히 기대하고 원하는 내용과 방향에 관한 요구 사항이 포함된 문서다.

프로젝트 브리프(Project Brief)

프로젝트의 최종 목표(Goal) 및 성격을 정하고 문제, 목표, 방향을 규명하기 위해 간략하게 정리한것이다.







훈련일 2017. 06. 20(화)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 디지털 디자인 프로젝트 기획
능력단위요소 프로젝트 파악하기
이름 김소진

프로젝트 제안 필수 항목

정성 조사 방법(Qualitative research)

정성 조사는 사용자의 믿음이나 감정, 동기요인 등 사용자의 심리적인 부분에 대한 답을 얻는 것으로 사회적, 문화적 맥락에서 사용자의 잠재된 니즈를 찾아내는 데 유용하다. 대표적인 방법으로는 인터뷰가 있다.

정량 조사 방법(Quantitative research)

정량조사는 동일한 특성을 지닌 표본 집단을 대상으로 사용자의 인식과 반응을 파악할 수 있도록 사회 통계적 증명을 통해 답을 얻어내는 방법이다. 대표적인 방법으로 설문 조사가 있다.

디자인 플래닝(Design Planning)

디자인 플래닝은 사용자의 드러나 있지 않은 소비 욕구와 필요성, 즉 니즈(Needs)를 찾아내어 그 니즈에 대응하는 디자인의 전략적 접근 과정을 계획하는 것이다. 사용자의 잠재된 니즈를 찾아내는 데에는 여러가지 방법이 사용되는데, 정성 조사와 정량 조사의 결과를 기존 활동의 성과파악과 새로운 디자인 전략 수립의 방향성 설정에 활용 할 수 있다.







훈련일 2017. 06. 21(수)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 디지털 디자인 프로젝트 기획
능력단위요소 프로젝트 제안하기
이름 김소진

프로젝트 제안 필수 항목 요소

구성 요소 내용
클라이언트 회사,브랜드,서비스 소개 및 관련 수행 부서
프로젝트 개요 현황 및 추진 개요, 목적, 대상, 개발 범위
제안 요구 사항 콘텐츠, 기능, 마케팅, 관리 , 기타 등 요구 사항 분류
핵심 요구 사항 제안 요구 사항 중 가장 중요한 핵심 파악
조사 방향 수립 요구 사항 해결 방안을 위한 조사 방향 및 항목 정리
개발 환경, 요건 H/W, S/W, OS, Data Base 시스템 개발 환경, 준수 사항
수행 조직 프로젝트 매니저, 업무별 프로젝트 리더, 투입 인력
일정 및 예산 개발 일정 및 예산에 따른 견적






훈련일 2017. 06. 22(목)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 디지털 디자인 프로젝트 기획
능력단위요소 프로젝트 제안하기
이름 김소진

제안서 내용 구성 및 목차 설정

귀납적 접근 연약적 접근
제안 개요 및 배경으로 부터 일반적이고 보편적인 내용을 토대로
제안방향과 전략을 유도하여 요구 사항
해결 방안의 근거와 대안을 제시하는 방법

  1. 프로젝트개요
  2. 시장 및 환경 분석
  3. 벤치마킹 및 분석
  4. 구축전략 및 핵심 과제
  5. 요구 사항 해결 방안
  6. 왜 우리여야 하는가?
재기하는 문제 또는 핵심적인 명제를 먼저 부각시키고
해결 방안을 이끌어 내어 대안으로 제시하는 방법.

문제제기 또는 '왜 우리여야 하는가?'로 시작해서
풀어 나갈 수 있는 경우의 수가 매우 다양함






훈련일 2017. 06. 23(금)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 디지털 디자인 프로젝트 기획
능력단위요소 프로젝트 제안하기
이름 김소진

커뮤니케이션의 EOB의 법칙

(1)E(Example)

(2)O(Outline)

(3)B(Benefit)







훈련일 2017. 06. 26(월)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 디지털 디자인 프로젝트 기획
능력단위요소 프로젝트 계약하기(0802010401_13v1.3)
이름 김소진

계약에 대한 법리적 기본 지식

클라이언트의 권리와 의무

수행자의 권리와 의무







훈련일 2017. 06. 27(화)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 디지털 디자인 프로젝트 분석 설계
능력단위요소 요구사항 분석 사용자 정의하기(0802010402_13v1)
이름 김소진

요구 사항 정의서 (Project Profiler)

구성 요소 내용
기업 일반 사항 회사명, 인원, 해당 산업군, 주요 서비스 등
프로젝트 개요 구축 목적, 구축 배경, 기대 효과, 예산, 일정 등
기능적 요구 사항 H/W. S/W. OS. Data Base, 서비스 환경, 필수 요소 등
디자인 제약 조건 기업 CI 사용 규정, 기업 선호 색상, 디자인 콘셉트 등
업무 흐름 의사 결정권자 및 프로젝트 매니저, 업무 흐름도 등

문서 정리 문장 구성

구분 내용
Who 누가행하는가?(행위의 주체,투입 인력 또는 상품이나 서비스)
What 무엇을 말하는가?(문서의 핵심 부분으로 사실의 대상)
When 언제 시행되는가?(작성 일자, 문서와 관련된 시간
Where 어디에서 시행되는가?(장소)
Why 목적,왜, 이유나 원인으로 결론에 근거하는 요소, 기대 효과 등
how 어떻게 진행, 수행하는가?(전후 진행 상황 설명)

페르소나 모형(Persona Model)







훈련일 2017. 06. 28(수)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 디지털 디자인 프로젝트 분석 설계
능력단위요소 요구사항 분석 사용자 정의하기(0802010402_13v1)
이름 김소진






훈련일 2017. 06. 29(목)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 디지털 디자인 프로젝트 분석 설계
능력단위요소 시장환경 조사하기(0802010402_13v2)
이름 김소진

정보 수집

거시 환경 분석

- 정보 수집의 원칙과 습관

순번 구성 요소 내용
1 필요성 무엇을 알고자 하는가
2 수집 범위 어디까지 수집할 것인가
3 출처 어디에서 수집할 것인가
4 정확성 출처 확인
5 보안성 비밀 유지
6 신선도 최대한 최신 정보 수집
7 정보망 정보 제공자 다수 확보
8 현장 중시 직접 찾아다니며 정보를 얻는다.
9 메모 정보는 반드시 기록
10 정보 유도 질문 역량 강화
11 판단력 정보를 이해하는 능력
12 수신기 다양한 견해를 경청
13 정보 장비 웹,e-mail, 전화등 다양한 매체의 활용
14 적극성 정보를 찾고자 하는 열의
15 대인 관계 정보 수집에는 타인의 협조가 필수
16 종합력 부분적인 것도 추구
17 객관성 숫자에 현혹되지 말 것
18 도전성 수집 불가능한 정보가 더 중요
19 정직성 정보를 왜곡하지 말 것
20 생산성 효율적인 정보 수집 방법 강구
  1. 사회적(Social)환경
  2. 인구 통계 출생률, 사망률, 평균 수명,교육 수준,사회 계층 간 임금 격차, 사회 각 영역의 인구 비율, 여성의 사회 진출, 문화적 태도, 문맹률, 관심, 믿음, 가치, 라이프 스타일,사용자 생활 양식등
  3. 기술적(Technological)환경
  4. 보유 특허, 특허 보호 제도, R&D예산, 신기술/정보기술, 기술 변화 속도, 기술 클러스터 존재여부, 서비스 혁신 속도, 기술 혁신 및 확산,산업/경제의 디지털화, 인터넷 기반 기술 등
  5. 경제적(Economic)환경
  6. GDP 성장률, 외환 보유고,인플레이션율, 수입 배분 수준과 범위, 금융재정 정책, 구조 조정, 실업률, 임금 수준, 소비 성향, 시장 경쟁 구조 등
  7. 생태학적(Ecological)환경
  8. 공기/수질, 재활용 시설 규모, 에너지원, 서비스 수명 주기 발전 단계, 원자재 대체성, 환경 규제 수준 등
  9. 정치적(Political)환경
  10. 개혁 정책, 규제 기관의 활동, 재산권 보호법 존재 여부, 정치적 의사 결정에 대한 영향력, 여론, 정책 결정 구조의 성격, 지원 정책, 규제 합리화, 민영화, 특허 등

미시 환경 분석

  1. 소비자(Customer) 분석
  2. 목표 소비자, 이용 동기, 이용 경로, 소비자 영향력, 시장 규모, 시장 성장률 등
  3. 경쟁사(Cimpetitor) 분석
  4. 현재의 경쟁사, 잠재적 경쟁사, 경쟁사의 시장 내 성과, 시장 내 강점 및 약점, 경쟁사의 마케팅 전략 등
  5. 자사(Company) 분석
  6. 인적/물적/기술적 자원, 기업의 문화, 기업의 이미지, 재무 자원, 생산 설비, 입지, 기업 내 타 부서의 영향을 받는 요인 등

SWOT 분석

  1. SO(Strength Opportunity)
  2. 내부도 강하지만 외부의 기회에도 강한 SO분석법은 기존 시장 장악은 물론 신규 시장 진출에 용이하다.
  3. ST(Strength Threat)
  4. 내부는 강하지만 외부의 위협이 도사리고 있는 ST분석법은 기존 시장 침투 및 확장의 장점과 단점을 각각 가지고 있다.
  5. WO(Weakness Opportunity)
  6. 내부는 약하지만 외부의 기회가 있는 WO분석법은 핵심 역량 강화라는 장점과 시장을 선도하고 있는 서비스 와의 제휴를 통해 발전의 여지가 있는 전략이다.
  7. WT(Weakness Threat)
  8. 내부가 약할 뿐더러 외부의 위협도 존재하는 WT분석법은 내, 외부 모두 각각의 위협이 도사리고 있으므로 시장 철수를 어느 시점에 어떠한 방식으로 진행할지를 분석하는 전략이다.






훈련일 2017. 06. 30(금)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 디지털 디자인 프로젝트 분석 설계
능력단위요소 시장환경 조사하기(0802010402_13v2)
이름 김소진






훈련일 2017. 07. 03(월)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 디지털 디자인 프로젝트 분석 설계
능력단위요소 디자인 방향성 정의하기(0802010402_13v3)
이름 김소진

디자인 요구 사항 분석

디자인의 방향성과 관련하여 사용자 성향과 클라이언트의 요구 사항을 분석하여 정의하고, 이를 바탕으로 디자인 콘셉트를 수립하기 위한 근거를 준비한다.


디자인 요구 사항 정의서 구성 요소






훈련일 2017. 07. 04(화)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 디지털 디자인 프로젝트 분석 설계
능력단위요소 디자인 방향성 정의하기(0802010402_13v3)
이름 김소진

콘셉트 시각화 디자인 요소

콘셉트를 시각화할 수 있는 디자인 요소에는 컬러(Color),이미지(Image),타입(Type),레이아웃(Layout)등이 있는데, 컬러는 사용자에게 해당 상품에 대한 첫 인상으로써 연상 작용을 일으키는 매우 중요한 요소이다. 이미지는 해당 상품에 대한 키워드를 시각적으로 구체화 시키는 요소로써 사진,그림,동영상 등으로 표현된다. 타입은 가독성을 중심으로 본문 내용에서 주로 다루어지는 요소이나, 시각적 이미지로 사용되기도 한다. 레이아웃은 앞 3가지 요소의 조화에 의한 결과로, 디지털 디자인 분야에서는 주로 사용성을 중심으로 이루어지는 요소이나 때로는 실험적인 시도도 가능하다.


콘셉트 시각화 디자인 요소

톤 & 매너(Tone & Manner)

톤 & 매너(Tone & Manner)는 모든 디자인 분야에서 작업물의 색상 분위기나 방향성, 그리고 표현 방법에 관한 전반적인 것을 말하는 것으로 디자인의 기획 단계에서 다루는 시각적인 분위기를 말한다.Tone & Manner가 결정이 되면 그에 맞춰 세부적인 컬러,이미지,표현 방법,타입, 레이아웃 등의 디자인 요소가 일관된 형태로 진행된다.







훈련일 2017. 07. 05(수)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 디지털 디자인 프로젝트 분석 설계
능력단위요소 정보구조 설계 시나리오 작성하기(0802010402_13v4)
이름 김소진

시나리오 기획 프로세스 방법

  1. 자료 수집 계획 : 자료 수집 목표, 조사 대상자 확정,인터뷰 유형 결정, 조사 상황 결정, 조사팀구성
  2. 자료 준비 : 선정기준표 작성, 소개글 작성, 참가 동의서 작성, 사전 및 사후 설문지 작성,비밀 보장 각서 작성,답례품 준비
  3. 인터뷰 준비 : 인터뷰 역할 분담, 인터뷰 일정 확인, 인터뷰 준비물 확인
  4. 인터뷰 진행 : 소개, 변환, 현장 인터뷰 진행
  5. 내용 해석 : 인터뷰 결과 내용 검토 및 자료 정리

에스노그래피 조사 (Ethnography Research)

현지 조사 방법의 하나로, 실제 환경에서 대화, 질문 등을 통해 조사 대상자와 상호 작용을 하면서 그의 행동, 신념, 선호 등을 자세하고 깊이 있게 관찰하며 조사한다.에스노그래피 조사는 다양한 장소와 상황에서 이루어지기 때문에, 조사 대상자의 의식주 양식 뿐만 아니라 일하고 여가를 즐기는 모든 방식을 보다 정확하게 파악할 수 있다.

정보 구조와 유형

정보 구조 (Information Architecture)
정보 구조 (Information Architecture)유형
  1. 계층 구조 : 각 상위 메뉴에서 하위메뉴로 Top-Down 하는 방식으로 이동할 수 있는 구조
  2. 계열 구조 : 정보를 한 페이지씩 차례대로 나열하여 보여주는 구조
  3. 그리드 구조 :수평과 수직 형태로 연결되어 있는 구조
  4. 네트워크 구조 : 비선형적으로 배열되어 특정 페이지로의 이동이 자유로운 구조

네비게이션 유형

(1)글로벌 네비게이션 (Global Navigation)

정보 구조 중 가장 상위에 위치하고, 모든 페이지에서 접근이 가능하다. 웹 사이트의 경우 대체로 상단에 위치한 제너럴 네비게이션 바 (GNB : General Navigation Bar)를 지칭한다.

(2)로컬 네비게이션 (Local Navigation)

글로벌 네비게이션의 하위 네비게이션으로 통칭 서브메뉴를 지칭하며, 대체로 글로벌 네비게이션의 바로 아래 또는 화면 구조에 따라 왼쪽, 오른쪽에 위치한다.

(3)콘텍스 추얼 네비게이션(Contextual Navigation)

정보의 맥락상 유사한 정보로의 이동이 용이하도록 특정 이미지 및 단어에 관련 페이지를 연결하는 방식을 말한다.







훈련일 2017. 07. 06(목)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 프로토타입 제작
능력단위요소 기초 데이터 수집하기
이름 김소진

아이디어 발성법

창의성의 발현을 돕기 위해 개발되어 있는 다양한 발상 방법들은 다음과 같다.

데이터의 종류

(1) 매체 성격에 따른 분류 : 외부 데이터와 내부 데이터

외부 데이터는 인터넷 외부에서 얻어지는 모든 데이터를 의미한다. 시장 정보나 주식 정보 등과 같이 인터넷이 등장하기 이전에 데이터화되어 사용자에게 제공되던 정보를 인터넷 데이터로 전환 시킨 것이다. 내부 데이터는 인터넷에 관련된 정보를 제공하는 콘텐츠이다. ‘어떤 정보를 어디서 얻을 수 있는 지’등의 데이터로, 검색 엔진에서 많이 활용되는 데이터나 비디오 클립, MP3 파일과 같은 데이터 를 뜻한다

(2) 데이터 생성에 따른 분류 : 프로듀서 데이터, 컨슈머 데이터

프로듀서 데이터는 인터넷 초창기에 주류를 이루었던 것으로, 사이트 제작자가 일방적으로 제공하 는 콘텐츠를 뜻한다. 컨슈머 데이터는 사이트의 사용자들이 만들어서 제공하는 데이터를 뜻한다. 비슷한 개념으로 사용 자가 상업적인 의도가 없이 제작한 콘텐츠를 온라인상으로 나타낸 UCC(User Created Contents)가 있다. 최근에는 프로페셔널(Professional)과 아마추어(Amateur)의 합성어인 프로추어(Proteur)들이 자신의 블로그 등을 통해 제공하는 콘텐츠인 PCC(Proteur Created Contents)도 생겼다.

(3) 데이터 이용에 따른 분류 : 유료 데이터, 무료 데이터

유료 데이터는 시간당 또는 건당으로 사용자에게 요금을 받는 콘텐츠를 뜻한다. 무료 데이터는 사용자가 인터넷에 접속하면 언제든지 별도의 비용 없이 이용할 수 있는 콘텐츠를 뜻한다.

(4) 프로슈머적 데이터

프로슈머(Prosumer)는 판매나 교환을 위해서라기보다는 자신의 사용이나 만족을 위해 제품, 서비 스, 경험을 생산하는 사람을 말한다. 사용자들의 콘텐츠를 사이트에서 직접 받아들이는 방식으로, 게시판이나 블로그 형태가 있다. 사용자 입장에서는 사이트에 직접 참여한다는 의식이 사이트에 대한 참여도(royalty)를 가질 수 있게 한다. 엘빈 토플러(Alvin Toffler)가“제3의 물결”에서 ‘앞으 로는 소비자가 신제품 개발에 직간접적으로 참여하게 될 것’이라고 예견하면서 도입된 개념이 다.1)

데이터의 검색에 유용한 사이트 목록

사이트 명 URL 내용
designDB http ://www.designdb.com 한국디자인진흥원의 디자인 포털
월간 디자인 http ://mdesign.design.co.kr 디자인 잡지, 전시회, 공모전
디자인정글 http : //jungle.co.kr 온라인 매거진, UCC, 아카데미, 도서, 공모전 등 정보 제공
How design http ://www.howdesign.com 디자인 관련 정보 제공
flickr http : //flickr.com 온라인 사진 관리 및 응용 프로그램
굿디자인웹 http : //www.gdweb.co.kr 웹 사이트 심사 및 평가
디자인하우스 http : //www.design.co.kr 잡지 출판사
Pinterest http ://www.pinterest.com 사진과 같은 이미지를 기반으로 하는 포털사이트
비메오 http : //www.vimeo.com 미국 동영상 클립 공유 사이트
구글 http : //google.co.kr 방대한 데이터 검색 포털






훈련일 2017. 07. 07(금)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 프로토타입 제작
능력단위요소 기초 데이터 수집하기 (0802010403_13v1.1)
이름 김소진

데이터의 유형

(1)사실(fact)

누구나 이해할 수 있는 객관적이고 구체적인 자료이다. 이 데이터는 정보의 양은 적은 편이나, 구체성은 높고, 데이터 자체의 난이도는 낮은 특징을 보인다. '사실'과 관련된 자료는 주로 텍스트 중심으로 제공되지만, 최근 들어 사용자의 직관적이 이해를 돕기위해 추가적인 이미지나 동영상이 제공되기도 한다.

(2)개념

특정 대상에 대한 이해를 돕기 위해 사용하는 정의 또는 특정 아이템이 어떤 개념과 효능을 지녔는지에 대한 정보를 말한다. 웹 사이트에서 제시하는 정보 이외에도 현실적으로 서비스의 기능이나 용도 또는 특징에 대한 설명을 '개념'이라는 방법으로 제시하는 경우도 많다. 멀티미디어 콘텐츠가 일반화 되면서 간단한 그림이나 동영상을 함께 사용하는 경우도 많아지고 있다.

(3)절차

사용자가 수행해야하는 순차적인 행위를 지정해 주는 자료로, 시스템을 사용하기 위해 사용자가 어떤 작업을 어떤 순서에 따라 수행해야 하는지를 알려 준다. 과거에는 텍스트와 그림 중심으로 표현되었지만, 단계별로 시스템의 상태와 사용자의 동작을 동영상으로 보여 줌으로써 사용자의 이해를 높이고자 하는 추세를 보이고 있다.

(4)원리

특정 아이템의 구체적 작동 원리 및 진행 과정에 대한 자료를 의미한다.

(5)원칙

시스템이 사용자에게 제시하는 일종의 가이드라인의 개념으로 , 시스템 이용시 사용자가 준수할 행동 요령에 대한 내용이다. '원칙'은 사용자에게 준수하도록 직접 요구하는 형식을 취할 수 있고, 성공 사례 등을 제공하는 것처럼 간접적인 형식을 취할 수 도 있다.

(6)이야기

실제 있었거나 만들어 낸 특정 경험을 의미한다. 블로그나 개인 홈페이지를 통해 공개되는 유형의 자료는 대부분 비공식적이며 무료로 제공되고, 생산 주체와 소비 주체가 같다는 특징을 가진다. '이야기'는 주로 텍스트 형태나 웹툰처럼 만화 형식으로 전달된다.

(7)의견

어떤 대상이나 사안에 대해 사용자가 가지고 있는 개인적인 생각을 의미한다. '의견'은 인터넷을 통해 양방향성이 증가하면서 확산되기 시작한 자료의 유형이다.

(8)묘사

특정 대상의 현재 상태를 여러 방식으로 표현하는 자료이다. 이미지와 멀티미디어적 자료는 사용자의 감성에 영향을 주며 개인적인 취향과 관련이 있는 자료 유형으로, 사용자의 주관적인 선호도에 자료의 가치가 좌우된다.

(9)예측

이미 있는 기초 데이터를 수집하여 그것을 확률이나 통계와 같은 추가적인 분석을 거쳐 향후 추세를 예상하는 자료이다. 따라서 기존의 사실이나 원리 등의 자료를 기반으로 추가적인 작업을 통해 발생하는 부가 정보라고 할 수 있다.

(10)메타데이터

데이터에 관한 구조화된 데이터로 , 다른 데이터를 설명해 주는 데이터이다. 일반적으로 정보의 위치와 내용, 작성자에 대한 정보를 담고 있으며, 주로 정보를 표현하기 위한 목적과 빨리 찾기 위한 목적으로 사용되고 있다.

저작권

  1. 저작권(Copyright)
    1. 소설, 시, 음악, 미술 작품과 같은 저작물을 창작한 저작자의 권리를 말하며, 저작자의 허락 없이 다른 사람이 저작물을 이용할 수 없게 하는 배타적 권리이다. 저작물은 인간의 사상 또는 감정을 표현한 창작물을 뜻하므로, 사실을 그대로 기록한 것은 저작원의 보호를 받지 못한다. 따라서 전화번호부의 성명과 전화번호를 단순히 가나다순으로 정리한 것은 저작권의 보호를 받을 수 없다. 또한 독창적이라 하더라도 글이나 그림, 음악 등으로 표현된 사상이나 감정만 저작권의 보호를 받을 수 있다. 저작권으로 보호되는 것은 사상이나 감정의 독창적 표현이지 사상이나 감정 자체가 아니기 때문이다.
  2. 저작물의 종류
    1. 소설, 시, 논문, 강연, 연설, 각본, 그 밖의 어문 저작물
    2. 음악 저작물
    3. 연극 및 무용, 무언극, 그 밖의 연극 저작물
    4. 회화, 서예, 조각, 판화, 공예, 응용 미술 저작물, 그 밖의 미술 저작물
    5. 건축물, 건축을 위한 모형 및 설계 도서, 그 밖의 건축 저작물
    6. 사진 저작물(이와 유사한 방법으로 제작된 것을 포함한다.)
    7. 영상 저작물
    8. 지도, 도표, 설계도, 약도, 모형, 그 밖의 도형 저작물
    9. 컴퓨터 프로그램 저작물
    10. 2차적 저작물(원저작물을 번역·편곡·변형·각색·영상 제작, 그 밖의 방법으로 작성한 창작물)

좋은 디자인 조건







훈련일 2017. 07. 10(월)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 프로토타입 제작
능력단위요소 기초 데이터 수집하기 (0802010403_13v1.1)
이름 김소진






훈련일 2017. 07. 11(화)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 프로토타입 제작
능력단위요소 아이디어 스케치 (0802010403_13v1.2)
이름 김소진

시각화의 정의

일반적으로 시각화라는 용어는‘대뇌에서 시각적 이미지를 만드는 것’의 의미로 쓰이지만, 정보 사회에 접어들어 보다 체계적이고 수용자가 중심이 되는 정보가 필요해짐에 따라 ‘정보의 구성 요소인 데이터나 콘셉트의 그래픽적 표현’이라는 의미를 가지게 되었다. 즉, 시각화의 정의는 ‘설계하는 이미지가 아닌, 의사 결정을 돕기 위한 외부적 인공물’로 그 범위가 확대되었다.

① 시각화는 거대한 양의 데이터를 이해하기 쉽게 하는 능력이 있다.

② 시각화는 예측되지 못한 갑작스러운 속성의 인지를 가능하게 해 준다.

③ 데이터 자체가 가지고 있는 결함 등을 빠르고 분명하게 나타내 준다.

④ 시각화하는 큰 크기의 데이터 특징을 이해할 수 있도록 돕는다.

⑤ 시각화는 가설을 형성하는 데 도움을 준다.

시각화의 단계

(1) 1단계 : 에스키스(Esquisse)

자신의 구상을 간략하면서도 빠른 속도로 그리는 단계로, 이 단계에서 개념상의 문제를 검토하고, 최종 그림의 토대를 세운다.


① 간략하고, 빠른 속도로 그리는 그림이므로, 최선의 해결책에 접근할 수 있을 때까지 많은 그림을 그려 볼 수 있다.

② 많은 그림을 그리므로 수시로 자신의 아이디어를 검토해 볼 수 있다

③ 최종 그림의 결과를 어느 정도 예측해 볼 수 있다.

④ 많은 그림을 중요도에 따라 순서를 정할 수 있다.


(2) 2단계 : 덮어놓고 그리기

1단계에서 검토한 그림을 정리해 나가는 과정으로, 에스키스한 그림 위에 트레이싱 페이퍼를 얹고, 잘못된 부분을 수정하는 단계이다. 1단계에서 체크하지 못한 부분이 있거나 새로운 아이디어가 나타난 경우에는 1단계로 다시 피드백한다.

(3) 3단계 : 정리

자신의 아이디어를 제대로 전달하기 위해 보는 사람의 입장을 충분히 고려한다. 이 단계에서 디자 이너가 염두해 두어야 할 사항은 고안된 디자인이 클라이언트의 입장을 충분히 반영하여야 한다는 것이다

(4) 4단계 : 완성

명암, 반영, 채색 등을 통하여 아이디어의 표현을 극대화한다.

레이아웃 형식화 디자인 과정

(1) 형태적 요소

레이아웃 형식화 과정의 첫 단계로 레이아웃의 척추를 만드는 일이다. 형태적 요소로는 레이아웃 의 균형을 만드는 데 있어 크게 네 가지로 대칭적 균형, 비대칭적 균형, 원심적 균형, 결정 구조적 균형으로 나뉜다.

(2) 초점선

형태적 요소에서 결정한 레이아웃의 균형을 바탕으로 시각 운동을 표현하는 선들을 그어, 선들이 겹치는 부분들에 의도적으로 초점과 강조를 결정하고, 지원 초점들을 따라 시각 방향으로 연구한다.

(3) 구성 막대

초점과 지원 초점을 연결하는 시각 방향에 맞추어 구성 막대를 사용하여 레이아웃의 구성에 대한 시각적 감성을 결정한다. 시각적 감성을 조절할 수 있는 구성 막대는 좌측과 우측에 서로 반대되는 형용사를 사용한다. 구성 막대의 좌측 끝에는 ‘조용함’이 있고, 우측 끝에는 ‘활기참’이 있다. 이 두 조건의 가치 사이를 조정할 수 있는데, ‘조용함’에 가까울 수도 있고, ‘활기참’에 가까울 수도 있다. 구성 막대에 의한 조건에 대한 가치는 모양, 굵기, 여백, 각도로 표현할 수 있다.

(4) 시각 계층 막대

시각적인 요소의 중요성을 지시 대상과 함축 대상을 중심으로 진행한다. 시각 계층 막대는 한 개 이상을 만들 수 있는데, 막대마다 시각적 요소를 구분한다. 시각 계층 막대는 수직으로 표현되어 막대의 위쪽 부분은 지시 대상을 표현하고, 아래 부분은 함축 대상을 표현한다.







훈련일 2017. 07. 12(수)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 프로토타입 제작
능력단위요소 아이디어 스케치 (0802010403_13v1.2)
이름 김소진

그리드 시스템 개념

건축 계획이나 도시 계획에서 모듈로서의 기준 치수에 의한 격자형 패턴에 따라서 평면적, 입체적으로 구성하는 계획 수법을 말한다.

그래픽 소프트웨어의 종류와 특징

(1)이미지 편집 프로그램

ex)Photoshop,앨더스 포토스타일러,마이크로 픽쳐플리셔, 포토 스케이프, 포토 웍스 등

(2)3차원(3D) 프로그램

ex) 3Ds Max,MAYA, Z-Brush, Blender 등.

(3) 애니메이션 프로그램

ex) 3Ds Max,MAYA,Blender 등.

웹 디자인에서의 컬러 활용 방법

웹 컬러: 웹에서 보이는 컬러는 동일한 컬러일지라도 모니터, 운영 체제, 비트 심도, 웹 브라우저의 종류에 따라 다르게 나타난다. 216 웹 안전색(216 Web Safety color)은 이러한 환경이 달라지더라도 변하지 않는 안전한 색으로 이루어진 팔레트이다. 웹 안전색은 호환성을 위해 16,777,216가지나 되는 색의 가짓수를 대폭 줄여서 표준으로 설정한 색을 말한다. 웹 안전 색상의 색값은 모두 51의 배수로 이루어져 있는데, 이는 최대값인 255를 5로 나눈 것이다. 재현되는 색의 조합으로 210가지의 유채색과 6가지의 무채색으로 표현 가능한 가짓수는 모두 216가지이다.







훈련일 2017. 07. 13(목)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 프로토타입 제작
능력단위요소 아이디어 스케치 (0802010403_13v1.2)
이름 김소진

그리드 시스템 샘플 이미지

그리드작업





훈련일 2017. 07. 14(금)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 기본
능력단위명 프로토타입 제작
능력단위요소 아이디어 스케치 (0802010403_13v1.2)
이름 김소진

그리드 시스템을 이용한 디자인 작업







훈련일 2017. 07. 17(월)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 프로토타입 제작
능력단위요소 프로토타입 제작하기
이름 김소진

이미지의 형식과 종류 정리

영상 파일의 종류 정리

소리 파일의 종류 정리

레이아웃 연습







훈련일 2017. 07. 18(화)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 프로토타입 제작
능력단위요소 프로토타입 제작하기
이름 김소진

UI(User Interface)

UI란 사람이 사용자가 되어 어떠한 사물이나 기계 장치, 컴퓨터 프로그램 등과 의사소통을 하려는 목적으로 만들어진 물리적 또는 가상적 매개체를 뜻한다. UI는 사용자가 사물을 조작하는 입력 시스템과 사물이 사용자의 입력에 반응하여 결과를 보여 주는 출력 시스템으로 나뉜다. UI를 평가 할 때의 사용성의 정의는 ‘인터페이스를 사용함에 있어서 사용자가 생리학적, 심리적인 측면에서 지각하는 효과성과 효율성의 정도’라고 할 수 있다. 효율적으로 입력하여 효과적으로 출력을 얻어 내는 것이 UI가 지향해야 할 목표라고 할 수 있다.

UX(User Experience)

UX, 즉 사용자 경험이란 제품을 사용하면서 내재화되는 모든 것을 의미하며 여기에는 경험을 비롯하여 느낌, 기억, 만족감 등도 포함된다. 이런 사용자 경험을 디자인하는 사용자 경험 디자인이 란, 사용자가 어떤 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하게 되는 총체 적 경험을 말한다. 이는 단순히 기능이나 절차상의 만족뿐 아니라, 전반적인 지각 가능한 모든 면에서 사용자가 참여, 사용, 관찰하고, 상호 교감을 통해서 알 수 있는 가치 있는 경험이다. 그러므 로 사용자 경험은 우리가 만드는 것이 아니라, 개인이 마음속에 가지고 있는 주관적인 경험을 바탕으로 하며, 제품과 사용자가 인터랙션을 하는 과정에서 발생한다.







훈련일 2017. 07. 19(수)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 프로토타입 제작
능력단위요소 프로토타입 제작하기(0802010403_13v1.3)
이름 김소진

프로토타이핑의 개념 및 목적

(1) 프로토타이핑의 개념

개발자들과 사용자들의 의사소통상의 효과를 증진시키기 위하여 취하는 시스템 개발 기법이다. 프로토타이핑 기법을 수행할 때 중요한 점은 개발자와 사용자 간의 상호 이해 및 지식 교환을 위한 작업이라는 점을 명심하는 것이다. 일반적인 분석 방법을 취할 경우 양자 간에 서로 다른 이해를 가져올 수 있으므로, 프로토타입이라는 의사소통 도구를 만들자는 것이다.

(2) 프로토타이핑의 목적

먼저, 오직 사용자의 요구 분석이 목적인 경우 폐기 처분용 프로토타입을 만들 수 있고, 둘째 가급적 빨리 개발해야 하는 경우 4GL 등을 써서 개발하는 quick and dirty 프로토타입이 있다. 셋째 상세 설계와 구현까지 마친 다음 대량 생산에 앞서 시험용으로 개발된 프로토타입이 있을 수 있다. 넷째로, 입출력의 사례를 보여줄 뿐 실제 데이터도 없고 절차 논리도 구현되지 않는 프로토타입이 있으며, 마지막으로 개발된 프로토타입을 계속 진화시켜 나감으로써 최종적인 시스 템으로 발전시키는 진화형 프로토타입이 있다.







훈련일 2017. 07. 20(목)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 프로토타입 제작
능력단위요소 사용성 테스트(0802010403_13v1.4)
이름 김소진

웹 사이트 사용성 테스트의 개념

웹 사이트 사용성 테스트는 사용자와 사용 환경을 고려하여 좀 더 쓰기 쉬운 제품 또는 웹 사이트를 만들고자 연구하는 HSCI, UCD, MMI 등 다양한 연구 분야와 밀접하게 연관되어 있다. 1990년대에 웹이 빠른 속도로 전파됨에 따라 디자인이 잘못되었거나 필수적인 기능이 결여되어 본연의 역할을 하지 못하는 웹 사이트들이 생겨났고, 또한 웹 사이트를 통해 사람들이 업무 및 거래를 하게 되면서 웹 사이트 내에서 발생하는 인지적 문제를 해소하기 위한 본격적인 연구가 진행되기 시작했다. 웹 사이트 사용성 테스트란 피실험자의 수행력을 측정하거나, 피실험자의 멘탈 모델을 조사하거나, 전문가가 적절한 척도를 사용해 사용성 관련 문제점을 발견하는 등 웹 사이트의 인지적 문제점을 발견하고, 발견된 문제점을 개선하는 반복적인 과정을 말한다

사용자 조사 방법론의 구분

사용자 조사를 수행하기 위해서는 다양한 방법을 사용할 수 있다. 통계적인 조사를 할 수도 있고, 직접 인터뷰를 수행할 수도 있고, 그룹을 모아 토론을 진행할 수도 있다. 이런 사용자 조사를 위한 다양한 방법론들은 [그림 4-1]과 같은 형태로 구분될 수 있다. 사용자 조사를 위해서 자료를 얻는 방법에는 크게 두 가지가 있다. 하나는 사용자의 행동을 측정하는 방법이고, 다른 하나는 사용자의 태도를 이용하는 방법이다. 사용자 행동에 대한 측정은 주로 다양한 측정 장비를 통해 이루어진다. 장비를 통해 사용자의 마우스 이동과 클릭 상황, 페이지에 머무른 시간 등을 측정할 수 있으며, 시선 추적 장치를 이용하면 사용자 시선의 이동을 측정할 수도 있다. 사이트의 로그를 기록하고 있었다면 이것을 분석하여 다수의 사용자에 대한 특성을 파악하고, 그들의 행동 패턴을 분석할 수도 있다. 사용자들의 태도를 분석하면 그들이 왜, 어떤 이유로 행동하는지 알 수 있다. 사용자의 태도를 파악하기 위해서는 그들에게 질문을 하고, 대답을 들어야 하는데, 설문 조사와 포커스 그룹 등이 이에 해당하는 조사 방법이다. 사용자의 태도를 파악하는 이런 방법들은 고전적인 마케팅 조사에 서 사용되던 것들이어서 마케팅 부서에서 익숙한 방법론들이다. 사내에서 이와 같은 조사를 진행 하는 경우 마케팅 부서와 함께 진행하는 것이 수월하고, 효과적인 방법이 될 수 있다. 사용자 조사 방법론은 조사를 접근하는 방법에 따라서 두 가지로 나눌 수 있다. 사용자들의 행동을 내용에 대해서 질적으로 분석하는 정성적 방법과, 그들의 행동을 수치를 이용하여 양적으로 분석하는 정량적인 방법이다. 이 조사 방법들은 각각 다른 특성을 가지므로, 원하는 결과에 따라 적당한 방법론을 사용해야 한다. 정량 조사는 구조화된 설문을 이용하여 조사를 진행하는데, 조사를 위한 기초 자료가 충분하지 않은 경우에는 의미 있는 설문을 작성할 수 없는 경우가 많다. 이런 경우 우선 정성 조사를 통해 가설 정보를 확보하고, 그것을 이용하여 정량 조사를 실시할 수 있다.

사용자 조사 방법론의 종류

  1. 1사분면
    • 사용자 행동에 대해 간접적으로 분석하는 방법론들이 위치한다. 웹 로그 분석과 A/B 테스트, 사용 자 패널에 대한 조사는 사용자의 행동을 정량적으로 조사하는 방법들이다
  2. 2사분면
    • 사용자의 행동을 직접 조사하는 방법들이 위치한다. 유저빌리티 테스트, 아이트래킹, 유저빌리티 벤치마킹이 이 영역에 속하며, 이 방법들을 이용하여 사용자의 행동을 분석하고, 그것의 의미를 파악할 수 있다.
  3. 3사분면
    • 사용자의 태도를 직접 조사하는 방법들이 위치한다. 대표적인 기법인 사용자 인터뷰와 포커스 그룹을 비롯하여 참여 디자인, 그룹 작업 조사, 요구 사항 조사, 다이어리·카메라 조사 등이 여기에 속한다.
  4. 4사분면
    • 사용자의 태도를 간접적으로 조사하는 방법들이 나열되어 있다. 사용자 설문과 고객 지원 자료 분석이 이 영역에 속한다.
  5. 2, 3사분면과 3, 4사분면
    • 혼합 형태로 사용자의 태도와 행동을 직접 조사하는 방법으로는 필드 스터디가 있고, 3, 4사분면의 혼합 형태로 사용자의 태도에 대한 전반적인 조사를 수행하는 방법으로는 카드 소팅이 있다.






훈련일 2017. 07. 21(금)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 프로토타입 제작
능력단위요소 사용성 테스트(0802010403_13v1.4)
이름 김소진

목표 사용자에 대한 이해도를 높이기 위한 방법

(1) 네티즌 이해

보편적인 네티즌의 경향성에 대하여 이해한다. 수치로 드러난 조사 자료를 바탕으로 사이트의 목표 대상이 될 사용자에 대해 다소 추상적이더라도 그들만의 특성을 정리할 수 있다.

(2) 트렌드

디지털 문화의 트렌드, 온라인 공간의 트렌드, 웹 사이트의 트렌드, 소비자 라이프 스타일 트렌드 등의 정보를 꾸준히 살펴보는 것이 필요하다.

(3) 소비자 심리

웹 사이트의 사용자는 웹 사이트를 이용할 때 기본적인 이용 경험이나 요구 사항이 충족되어어야만 그다음 욕구 단계로 이동한다. 즉, 기본적인 요구 사항에 대한 충족이 이루어지지 않으면 그 다음 단계로 진행하지 않고 바로 해당 웹 사이트를 나가버릴 수 있다. 소비자의 경험욕구를 다루는 이론이나 최근 소비자 동향 조사 자료를 살펴보는 것이 도움이 된다.

(4) 벤치마킹

목표 대상이 비슷한 사이트들에서 사용자 분석과 이해의 단서를 찾는다. 동일한 목표 사용자를 가진 타 사이트에서는 어떻게 접근했는지, 어떤 효과를 얻었는지에 대한 벤치마킹도 필요하다.

(5) 포커스 그룹 인터뷰(Focus Group Interview)

만들고자 하는 사이트의 목표 사용자를 명확하게 가려내야 한다. 추상적인 누군가가 아니라, 구체 적인 이미지를 가진 실체들을 먼저 가려내고, 그들에게 무엇을 어떻게 물어볼 것인지를 정한다.







훈련일 2017. 07. 24(월)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 스토리보드 제작하기(0802010404_13v1.1)
이름 김소진

정보의 설계

기획 공학 (Planning Science), 정보 디자인(Information Design),유저 인터페이스 (User Interface),그래픽 디자인(Graphic Design),컴퓨터 그래픽(Computer Design)운영 등 필요 지식을 기반으로 정보를 계층화 하고 설계해야 한다.







훈련일 2017. 07. 25(화)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 스토리보드 제작하기(0802010404_13v1.1)
이름 김소진

와이어 프레임

프레임이란 최종적으로 화면에 표시될 구성,정보 체계,기능,콘텐츠를 요약하여 보여주는 것으로 색상,타이포그래피, 이미지등의 정보를 최소화하여 도식(Schematic), 청사진, 프로토타입(Prototype)의 형식으로 보여 주는 것을 의미하며, 자신의 생각을 시각화하여 보여 주게 된다. 이때 그래픽 요소나 시각적 요소의 표현보다는 계층 요소의 구현을 중심으로 표현해야 한다.







훈련일 2017. 07. 26(수)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 스토리보드 제작하기(0802010404_13v1.1)
이름 김소진

스토리보드의 구성

스토리보드란 화면의 구성에 대한 아이디어 스케치이다. 즉, 화면 구성에서 각 화면에 대한 정의, 기능정의, 서비스 흐름도의 역할을 하게 된다. 웹 제작 전체의 프로세스 상에서 실제 제작의 전 단계이며, 요구 분석, IA작성 서비스 흐름도 작성 후 최종의 문서가 되는 것이다.

  1. 스토리보드는 표지, 개정 이력, 화면 설계, 서비스 흐름도의 구성을 갖는다.
  2. 스토리보드는 첫 번째로 프레임의 사용 여부와 메뉴의 구성 위치, 콘텐츠의 위치 등 전체적인 화면 구성을 보여 주어야 한다. 메뉴 구성을 포함한 페이지의 구성은 디자인 요소 중 아주 중요한 부분을 차지하게 된다.
  3. 두번째로 그 페이지의 정보를 요약하여 보여준다. 저장될 디렉터리, 파일 이름 페이지 title 등을 메모하듯이 작성한다.
  4. 세번째로 링크 정보를 정리하여 작성한다. 링크는 다양한 방법으로 후반 작업에 유리하도록 작성한다.
  5. 네번째로 프로그램 요소를 기재한다. 스크립트 기능. ASP나 PHP 등의 프로그램 등을 표시하고, 그 기능을 적는다.






훈련일 2017. 07. 27(목)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 스토리보드 제작하기(0802010404_13v1.1)
이름 김소진

스토리보드의 화면설계

제작자의 의도가 정확하게 전달 될 수 있도록 자세하게 설계하는 것이 중요하다. 스토리보드의 화면을 설계할 때에는 디자인적 요소의 표현이 아닌, 페이지에 노출되는 정보, 즉 주요한 구성요소가 표현되도록한다. 스토리보드는 화면 설계와 함께 화면 설명이 매우 중요하다. 즉, 실직적인 페이지 디자인 작업을 수행하기 위해 각 페이지의 구성 요소에 대해 설명하여야 한다. 스토리보드는 다양한 기능 및 콘텐츠등 최대한 상세한 정보를 나타내야 하며, 화면 설명으로만 부족할 때에는 보다 자세한 설명을 위하여 별도의 서비스 프로세스 페이지가 필요하다.

스케치 작업







훈련일 2017. 07. 28(금)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 스토리보드 제작하기(0802010404_13v1.1)
이름 김소진

프로토 타입 제작







훈련일 2017. 07. 31(월)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 심미성구성요소 제작하기(0802010404_13v1.2)
이름 김소진

웹 디자인 심미적 요소

인간은 시각에 의존하여 정보를 인식하고 사고하며 행동한다. 한 연구에 따르면 인간의 전체 감각 중 80%를 시각이 차지한다고 한다. 특히, 인간은 주변의 데이터나 언어 등의 정보를 시각 요소의 정보로 변환하여 생각하는 특징을 가지고 있다. 따라서 정보의 구성에 시각 요소를 도입하는 것은 중요한 작업이라 할 수 있다.


(1)시각화

시각화란, 정보의 의미와 상호 관계를 그래프, 이미지, 일러스트레이션, 색채, 타이포 그래피 등의 그래픽 요소로 나타내서 사용자들이 정보를 쉽게 찾고 이해하도록 시선을 안내하고 유도하는 것을 말한다.

(2)아이텐티티 디자인 (Identity Design)

아이텐티티 디자인 (Identity Design)이란, 인식이라는 관념적인 대상을 시각화하여 다양한 방식으로 표현해 이를 사용자에게 전달하는 종합적 수단이다.

  1. 아이덴티티 디자인은 사용자가 기억하기 쉽고, 차별화되고, 영속성과 유연성을 포함하여야 한다.
  2. 기업이나 발주자가 추구하는 의미와 가치를 전달하여야 한다.

그리드 시스템 작업 이미지

그리드시스템이미지





훈련일 2017. 08. 01(화)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 심미성구성요소 제작하기(0802010404_13v1.2)
이름 김소진

비주얼 콘셉트(Visual concept)

비주얼 콘셉트는 사용자에게 가치 있는 것이며 효용을 제공한다. 그 근본은 사용자의 니즈이며, 콘셉트의 창출은 서비스나 상품을 사고 싶다고 생각하게 하는 힘을 만드는 것이다. 또한 콘셉트를 도출하기 전에 사이트를 위한 정의를 한다

  1. 웹 사이트의 성격(쇼핑몰, 커뮤니티, 동호회, 홍보 등)을 분류한다
  2. 웹 사이트의 사용자의 분류 및 분석: 웹 사이트의 성공적인 완성을 위해서는 실제 사용자의 방문자/URL 분석을 통해 개발 전략을 수립하고 전개한다
    • 사이트 방문자의 성별, 연령별 비율을 통해 주요 이용자 성향 파악
    • 콘텐츠 이용량에 따른 활성 콘텐츠와 비활성 콘텐츠 파악
    • 경쟁사 사이트의 콘텐츠 이용률을 파악하여 경쟁 우위 활성 콘텐츠와 비활성 우위 콘텐츠 상품 개발
  3. 웹 사이트 레이아웃 콘셉트

디자인 작업

디자인작업1 디자인작업1





훈련일 2017. 08. 02(수)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 사용성 구성요소 제작하기(0802010404_13v1.3)
이름 김소진

UI(User Interface)

UI는 사용자오 ㅏ사물 또는 시스템 사이에서 의사소통을 가능하게 하는 일시적 혹은 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 의미한다. UI는 물리적인 하드웨어와 논리적인 소프트웨어 요소를 포함하고 있다. UI는 입력 (사용자가 시스템을 조작)과 출력(입력에 대한 결과를 표시)의 두 가지 수단을 통해 상호 간의 의사소통을 가능하게 한다.

UI 구조화를 위한 원칙

  1. 메타포(metaphor): 메타포는 UI에서 사용자가 시스템이 어떻게 작용하는지 파악하고 동작할 수 있도록 하며, 시스템을 통해 사용자 학습의 양을 최소화하는 데 사용되는 유추적 모형이다.
  2. 사용자 조정(User in Control): 사용자가 시스템을 따라가는 것이 아니라 스스로 시스템을 조정하는 것처럼 느끼도록 구성한다.
  3. 직접 조작(Direct manipulation): 사용자가 동작을 진행하고, 동작에 대한 결과를 느낄 수 있도록 구성한다. 예를 들어 모니터에서 파일을 드래그할 때, 그 이동 경로를 자연스럽게 보여 주는 것이다. 즉, 사용자에게 직접 조작의 인터페이스를 제공하면서 조작에 대한 피드백을 바로 제공하는 것이다
  4. 일관성(Consistency): UI의 일관성은 사용자가 습득할 지식을 더 빠르게 배울 수 있도록 해준다. 또한 사용할 때의 실수와 오동작을 최소화하며, 인터페이스를 친숙하게 한다.
  5. 피드백(Feedback): 사용자가 수행한 동작에 대한 시스템의 피드백을 통해 사용자와 시스템의 상호 작용을 형성하는 것을 말한다. 일반적으로 시스템 응답 시간(Reaction time)은 시스템 성능의 중요한 요소이다






훈련일 2017. 08. 03(목)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 사용성 구성요소 제작하기(0802010404_13v1.3)
이름 김소진

콘텐츠 시각화의 목적

콘텐츠 시각화의 목적은 그림이나 도형, 사진 등 다양한 시각적 형상을 이용하여 정보를 사용자에 게 명확하고 효과적으로 전달하는 것이다. 따라서 콘텐츠를 시각화할 때에는 다양한 아이디어를 미적 형태와 기능성을 고려하면서 직관적이고 효율적으로 표현하여야 한다.

콘텐츠 시각화 단계

  1. 데이터의 수집 : 실제 사이트 내에 구성되어야 하는 다양한 데이터를 수집하여 종류별로 정리, 분석한다.
  2. 연결 고리의 구성 : 나열되어 있는 다양한 정보들을 계층적으로 또는 평면적으로 구성하고, 이를 기준에 따라 연결할 연결 고리를 만든다.
  3. 사이트의 콘셉트와 주제 만들기: 데이터 내에 핵심 주제와 내용, 스토리텔링으로 내러티브를 제공하기 위한 주제를 만든다.
  4. 문제점의 파악 : 기술적 요소와 그래픽적 요소의 문제점을 파악하고, 이를 해결하기 위한 툴을 선택한다.
  5. 포맷의 선택 : 각 그래픽 요소의 시각화를 위한 포맷을 선택한다. 이때 효율성을 극대화하기 위한 다양한 그래픽 소스의 포맷과 툴이 결정된다.
  6. 시각적 접근 방법의 선택 : 콘텐츠를 시각화하는 방법은 크게 데이터를 차트나 그래프의 형태로 제작하는 방법과 일러스트와 메타포를 이용하여 표현하는 방법으로 나뉜다.
  7. 정제(Filtering)와 테스트(Test) : 작업 과정의 중복과 과잉 표현, 무거운 실행 파일 등 원래의 목적에 부합하지 않는 결과물의 도출을 피하기 위해 정제 과정을 통해 정리하고, 이를 테스트하 여 결과에 근접하는 모형을 만든다. 이 과정을 지속적으로 반복하고 검증하여 완성도를 높인다






훈련일 2017. 08. 04(금)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 사용성 구성요소 제작하기(0802010404_13v1.3)
이름 김소진

UX(User Experience)

UX는 사용자가 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하게 되는 총체적 인 경험을 말한다. 여기서의 경험은 단순한 지각의 경험이 아니라, 지각 전반에 걸친 사용자가 참여하여 사용하고, 관찰하며 상호 교감을 통해 누적하게 되는 가치 있는 경험이다. 또한 사용자의 입장에서 경험 요소를 최대한 예측 가능하도록 디자인하는 것이다. UX와 관련한 키워드는 아래와 같다

① 리서치(Research)
② 사용성(Usability)
③ 정보 설계(Information Architecture)
④ 인터랙션 디자인(Interaction Design)
⑤ 비주얼 디자인(Visual Design)
⑥ 콘텐츠(Content)

UX 분석을 위한 FGI

(1) FGI(Focus Group Interview)

FGI는 정성적 조사의 대표적 방법 중 하나로, 집단 심층 면접 조사 또는 표적 집단 면접 조사라고 한다. FGI는 특정 목적을 위해서 준비한 주제로 그 목적에 따라 모인 소수(5-8인) 그룹을 인터뷰하 여 집단 반응과 개인 반응 등을 통합해 분석하여 가설을 추출하고 검증하는 등 목적에 따라서 대상을 관찰하고 분석하는 방법이다.

(2) FGI의 목적

FGI의 목적은 포커스 그룹의 인터뷰 과정에서 조사 목적과 관련된 유용한 정보를 얻거나 공식적인 설문 조사에서 기대하지 못한 결과를 발견하는 것이다.

(3) FGI의 장점

FGI의 장점은 통제되고 있는 집단을 설정하여 집단적 토론 방식의 결과를 도출함으로써 다양한 의견과 심화된 내용을 만들어 낼 수 있고, 표적 집단의 동질성으로 편안하게 의견을 개진할 수 있다는 것이다.

(4) FGI의 단점

FGI의 단점은 여러 사람을 모아서 진행하기 때문에 사람들이 상식적인 방향으로만 의견을 말하는 경향이 있어, 개인의 성격이나 사회적 통념에 부합하지 않는 내용은 믿을 만한 결과를 도출하기 어렵다는 것이다. 또한 사회자의 원활한 진행 기술이 필요하기 때문에, 결과가 사회자의 능력에 따라 달라질 수 있어 결과의 체계적인 분석과 해석이 어려운 것도 FGI의 단점 중 하나이다







훈련일 2017. 08. 07(월)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 매체성 구성요소 제작하기
이름 김소진

매체별 특성 분석

  1. 웹(web)
  2. 원래의 의미는 거미집으로, 하나의 사이트와 다른 사이트의 관계가 거미집처럼 복잡하게 얽혀 있기 때문에 붙여진 이름이다. 이러한 웹은 월드 와이드 웹(www)을 지칭하며, HTTP 통신 프로토콜 을 사용하여 전송과 수신을 하게 된다
    • 웹은 문자, 소리, 그림, 동영상을 통해 정보를 전달한다.
    • 웹은 관련된 정보를 서로 연결한다. 이를 하이퍼링크(Hyperlink)라 한다
    • 웹 문서를 구성하는 기본 언어는 HTTP(Hypertext markup language)라 한다.
  3. 모바일(Mobile)
  4. 이동성이 있는 IT 기기들을 총칭한다. 최근에는 휴대용 정보 단말기가 인터넷선이나 전화선 등을 활용하여 정보를 주고받는 기기를 대표하고 있기 때문에, 휴대용 정보 단말기 자체를 모바일이라 고 하기도 한다
    1. 폰(Phone): 최근에는 스마트폰을 통한 모바일성이 크게 확대되고 있어 콘텐츠의 활용이 급증하 는 계기가 되고 있는데, 운영 체제에 따라 IOS 기반의 iPhone과 Android 기반의 폰 계열로 나눌 수 있다.
      • 모바일(Mobile)은 상시성을 갖는다.
      • 모바일(Mobile)은 All in One 디바이스이며, 즉시 접속성을 갖는다
      • 모바일(Mobile)은 실시간성을 지니며 인간과 24시간 커뮤니케이션하고 있다.
    2. 태블릿(Tablet)PC: 태블릿은 모바일폰과 노트북 및 컴퓨터의 중간 단계의 기기로 통신과 인터넷 검색이 가능한 대형 PDA로 볼 수 있으며 스마트 패드(Smart Pad)라고도 한다. 모바일의 장점과 개인용 컴퓨터의 장점을 모두 가지고 있기 때문에 물류나 POS, 기업 Network 등 다양한 분야에 적용 가능한 장비이다
      • 태블릿 PC는 휴대가 용이하다.
      • 태블릿 PC는 마우스나 키보드 등의 입력 장치 없이 쉽게 조작 가능하다.
      • 태블릿 PC는 사용 시마다 부팅되는 것이 아니라 상시 전원 상태로 쉽게 접근할 수 있다.
      • 태블릿 PC는 스마트폰보다 화면이 크고, 대용량 데이터 처리가 가능하다.
      • 태블릿 PC는 직관적인 인터페이스를 가지고 있어 누구나 사용 가능하다.
  5. 키오스크(KIOSK)
  6. 옥외에 설치된 대형 천막이나 현관을 의미하는 터키 어에서 유래되었으며, 최근에는 기술 발전에 따라 공공장소에 설치된 무인 단말기를 의미하기도 한다. 특히 멀티미디어 스테이션(Multimedia Station), 셀프서비스 스테이션(Self Service Station)의 역할을 하며, 터치스크린과 키보드 입력 장치를 가지고 있다.

웹 표준

웹 표준의 ‘웹’은‘월드 와이드 웹(www: World Wide Web)’의 줄임말이다. 월드 와이드 웹은 데이터와 정보를 표시하고 연결하며 공유, 교환하는 방법이다. 일반적 의미로 웹 표준은 W3C(World Web Consortium), ECMA(European Computer Manufacturers Association) International, IETF(The Internet Engineering Task Force), OASIS(Organization for the Advancement of Structured Information Standard)와 같은 표준화 기구에서 승인한 개방형 인터넷 표준을 말한다.

주요 웹 브라우저 특징

  1. 인터넷 익스플로러(Internet Explorer : IE)
    • 인터넷 익스플로러는 마이크로소프트사 에서 개발한 웹 브라우저로, 1995년에 마이크로소프트 88 윈도 운영 체제에 이 소프트웨어를 기본으로 포함하기 시작하면서, 사용자가 급격히 증가했다. 1999년 이후에 세계에서 가장 널리 쓰이는 웹 브라우저가 되었지만, 모질라, 파이어폭스 등 대체 브라우저가 개발되면서 인터넷 익스플로러 7의 출시에도 불구하고 하락세가 계속되고 있는데, 우리나라에서는 인터넷 익스플로러의 의존도가 상대적으로 높다. 이는 온라인 뱅킹 호환성 문제와 더불어 우리나라의 웹 사이트 개발자 대다수가 여러 웹 브라우저와 운영 체제들의 호환성을 고려하 지 않고 현재 마이크로소프트사도 사용을 권장하고 있지 않는 ActiveX를 무리하게 채용하고 있기 때문이다
  2. 모질라(Mozilla) 계열 파이어폭스
    • 모질라 파이어폭스(Mozilla Firefox)는 모질라 재단과 모질라 코퍼레이션이 개발한 자유 소프트웨 어 웹 브라우저로 윈도, 리눅스, 맥 OS X, 그리고 안드로이드에서 실행 가능하다
  3. 오페라
    • 오페라는 노르웨이의 오페라 소프트웨어가 개발하고 있으며, 핵심 레이아웃 엔진("프레스토”)은 어도비 같은 협력 사업자들에게서 라이선스를 받았고, 어도비 크리에이티브 스위트에 통합되어 있다. 오페라는 스마트폰과 PDA를 위한 브라우저 분야에서 그들의 스몰 스크린 렌더링(Small Screen Rendering) 기술로 시장을 선도하고 있다. 오페라의 특징은 다양한 기능을 기본적으로 탑재하고 있으면서도 같은 종류의 다른 소프트웨어에 비해 작고 가벼우며, 페이지의 렌더링 속도 가 빠르다는 것이다.
  4. 사파리(Safari)
    • 사파리는 애플사가 개발한 웹 브라우저이다. 사파리는 아이튠즈와 유사한 북마크 관리 체계를 가지고 있고, 애플의 퀵타임 멀티미디어 기술과 통합되어 있으며, 탭 브라우징 인터페이스를 사용 한다. 구글 검색 상자는 사파리 인터페이스의 기본 요소이며, 웹 주소 자동 완성과 웹 페이지 텍스트 영역의 맞춤법 검사를 지원한다.
  5. 크롬(Chrome)
    • 구글(Google)의 크롬(Chrome)은 웹키트 레이아웃 엔진을 이용하여 개발 중인 프리웨어 웹 브라우 저이다. 크롬은 간단하고 효율적인 사용자 인터페이스를 제공하며, 현존하는 다른 웹 브라우저들 에 비해 향상된 안정성과 속도, 그리고 보안성을 갖는 것을 목표하고 있다. 2008년 9월 3일 마이크로 소프트 윈도용 베타 버전이 나왔으며, 2008년 12월 11일 첫 안정화 버전이 출시되었다.






훈련일 2017. 08. 08(화)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 매체성 구성요소 제작하기
이름 김소진

웹 표준 사이트

웹표준1 웹표준2 웹표준3

한국형 웹 콘텐츠 접근성 지침서

인식의 용이성
  1. 대체 텍스트:텍스트가 아닌 콘텐츠에는 대체 텍스트를 제공해야 한다.
  2. 멀티미디어 대체 수단: 동영상,음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체 수단을 제공하여야한다.
  3. 명료성:콘텐츠는 명확하게 전달 할 수 있어야한다.
운용의 용이성
  1. 입력장치 접근성:콘텐츠는 키보드로 접근 할 수 있어야한다.
  2. 충분한 시간 제공:콘텐츠를 읽고 사용하는데 충분한 시간을 제공해야한다.
  3. 광과민성 발작 예방: 광과민성 발작을 일으킬 수 있는 콘텐츠를 제공하지 않아야한다.
  4. 쉬운 내비게이션:콘텐츠는 쉽게 네비게이션 할 수 있어야 한다.
이해의 용이성
  1. 가독성:콘텐츠를 읽고 이해하기 쉬워야한다.
  2. 예측 가능성:콘텐츠의 기능과 실행결과는 예측가능해야한다.
  3. 콘텐츠의 논리성:콘텐츠는 논리적으로 구성해야한다.
  4. 입력 도움:입력 오류를 방지하거나 정정할 수 있어야한다.
견고성
  1. 문법 준수: 웹 콘텐츠는 마크업 언어의 문법을 준수해야 한다.
  2. 웹 애플리케이션 접근성:웹 애플리케이션은 접근성이있어야한다.






훈련일 2017. 08. 09(수)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 콘텐츠구성하기(0802010405_13v1)
이름 김소진

멀티미디어 개요 및 특성

텍스트(문자), 그래픽(이미지), 애니메이션(만화, 게임), 사운드(음향, 음성, 효과음) 등의 다양한 매체를 두 가지 이상 복합적으로 사용하여 제작된 디지털 콘텐츠이다. 시간과 공간의 제약 없이 사용자가 특정 시스템을 통해서 상호 작용하면서 정보를 얻을 수 있다.
멀티미디어의 특성은 네 가지로 나눌 수 있으며, 간략한 내용은 아래와 같다.

멀티미디어 콘텐츠 개요 및 특성

아날로그 미디어 대비 신개념 뉴미디어의 개념에 속한다. 사이버 공간에서의 상호 작용을 활성화 하기 위해 정보를 실시간으로 교류하는 장으로, 디지털 마인드에 따라 디지털 데이터로 가공된 정보를 말한다. 멀티미디어 콘텐츠는 다음과 같이 정의할 수 있다.

멀티미디어의 특성

  1. 정보 수용자의 개념 변화
  2. 선형 패러다임의 변화
  3. 정보 확장의 전환
  4. 시․공간 경계의 전환
  5. 개별 미디어 통합의 전환






훈련일 2017. 08. 10(목)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 콘텐츠구성하기(0802010405_13v1)
이름 김소진

스토리보드 작성 규칙 및 예시

프로젝트명 사이트명 또는 사이트 URL
작성자 해당 페이지 스토리보드 작성자의 소속 부서와 성명
페이지 번호 스토리보드의 분실을 막고, 화면 전환 표시로 사용
화면 ID 화면을 저장할 파일명
화면 주제 화면의 내용, 용도를 쉽게 알 수 있도록 이름 기입
화면 경로 홈 화면에서부터 현재 위치를 나타내는 경로
화면 구성 화면의 내용과 구성을 시각적으로 쉽게 이해하도록 스케치
화면 설명 상호 작용 구성 요소를 구체적으로 설명
- 기능, 내비게이션 버튼, 멀티미디어 효과, 사운드 효과
F/C와 Logic 업데이트 및 수정 가능하게 폴더 경로를 자세하게 표시
첨부 사항 내용이 많은 텍스트는 출력하여 첨부

예시

스토리보드예시





훈련일 2017. 08. 11(금)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 콘텐츠구성하기(0802010405_13v1)
이름 김소진






훈련일 2017. 08. 14(월)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 기능요소 구현하기(0802010405_13v2)
이름 김소진






훈련일 2017. 08. 16(수)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 기능요소 구현하기(0802010405_13v2)
이름 김소진

멀티미디어 제작 프로세서 및 저작도구

제작 프로세서

멀티미디어 저작 도구

멀티미디어 저작은 문자, 그림, 소리, 동영상 등의 파일을 각각 제작한 후에 이들을 하나의 완성된 내용물로 결합하는 것을 의미한다. 멀티미디어 저작을 하기 위해서는 전체를 구성하는 저작 도구 와 멀티미디어 내용물 재생에 필요한 재생 도구, 내용물을 제작할 수 있는 소프트웨어가 필요하다. 다음은‘한국형 웹 저작 도구 접근성 지침 1.0’에 의한 저작 도구에 대한 정의이다. 저작 도구는 웹 콘텐츠를 제작하는 데 쓰이는 넓은 범위의 소프트웨어를 지칭한다. 그 범주 안에는 다음의 소프트웨어가 포함된다.

  1. 웹 콘텐츠를 생성하기 위한 명시적인 용도와 목적을 지닌 편집 도구: HTML과 XML 편집기 등
  2. 웹 형식으로 내용을 저장할 수 있는 옵션을 제공하는 도구: 워드 프로세서나 탁상 출판 패키지 등
  3. 문서를 웹 형식으로 변환하는 도구 : 탁상 출판 패키지의 고유 형식으로 저장된 문서를 HTML로 변환하는 필터 등
  4. 멀티미디어 제작 도구, 특히 웹에서 사용하는 멀티미디어를 저작하는 도구 : 동영상 제작 및 편집 도구 모음, SMIL 저작 패키지 등
    • 데이터베이스로부터 동적으로 웹 사이트를 자동 생성하는 도구, 실시간 데이터․문서 변환 도구 등을 포함하는 웹 사이트 관리 및 웹 사이트 편집 도구 등
    • 내용물 자리 배치(layout) 관리 도구: CSS 편집 도구 등

멀티미디어 제작 소프트웨어의 종류







훈련일 2017. 08. 17(목)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 개발요소 협업하기(0802010405_13v.3)
이름 김소진

애니메이션 기법

디지털 애니메이션은 전통 방식의 셀 애니메이션과 달리 컴퓨터를 이용하여 제작하는 애니메이션 을 말한다. 크게 2D와 3D로 구분할 수 있다. 특히, 웹상에서 구현되는 웹 애니메이션은 동적인 영상을 통해 인터넷 사용자의 이목을 집중시킴으로써 효과적인 정보 전달 수단으로 인정받고 있다. 웹 애니메이션에는 인터페이스 애니메이션, 키네틱 기법 애니메이션, 캐릭터 애니메이션 등이 있다. 웹 애니메이션은 CF, 테마파크 영상, 만화 영화, 극영화, 시뮬레이션을 비롯해 특히, 유아용 교육 툴에 크게 활용되고 있다

‘애니메이션 기본 원칙’

  1. Squash and stretch
  2. Anticipation
  3. Staging
  4. Straight ahead and pose-to-pose
  5. Follow through and overlapping action
  6. Slow in and out
  7. Arcs
  8. Secondary action
  9. Timing
  10. Solid Drawing
  11. Appeal

(1) 플립북 원리를 이용한 프레임 바이 프레임(Frame by frame) 기법

연속된 동작을 보여 주는 애니메이션으로, 단순한 애니메이션이나 2차원 게임에서 캐릭터의 움직 임을 보여 줄 경우 사용된다.

(2) 셀 애니메이션의 원리를 이용한 스프라이트(Sprite) 기법

배경과 캐릭터를 별도의 레이어로 작업하는 방식으로, 디지털 애니메이션에서는 특히 캐릭터에 해당하는 용어가 스프라이트이다.

(3) 키 프레임 원리를 적용시킨 키 프레임 애니메이션

2개의 키 프레임(시간) 사이에 필요한 움직임이 자동으로 생성되는 트위닝(Tweening) 기법을 이용 한 애니메이션이다.

(4) 모핑(Morphing) 기법

서로 다른 2개의 이미지를 특정 모습으로 서서히 변화시키는 기법이다.

동영상 파일 종류 및 정의







훈련일 2017. 08. 18(금)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 개발요소 협업하기(0802010405_13v.3)
이름 김소진

객체 지향(Object-Oriented) 언어

하드웨어 기술의 발달에 비해 소프트웨어 기술의 발달이 미미하여 모든 애플리케이션의 성능이 저하되는 소프트웨어의 생산성 위기 때문에 생겨났다. 이러한 위기에서 벗어나기 위한 자구책으로 코드의 재사용이라는 개념이 생겨났다.

  1. 객체 지향의 기본 요소: 객체와 클래스, 연산과 메소드(Operation & Method), 메시지(Message)
  2. 객체 지향의 특성: 상속성(Inheritance), 자료 추상화(Data Abstraction), 캡슐화(Encapsulation), 다형성(Polymorphism), 관계성(Relationship)

멀티미디어 프로그램







훈련일 2017. 08. 21(월)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디자인 구성요소 제작
능력단위요소 개발요소 협업하기(0802010405_13v.3)
이름 김소진

협업의 정의와 구분

협업이란‘함께 일하는’또는‘협력하여 일하는 것’이라는 의미로 공동으로 작업을 수행하는 것을 가리키는 말이다. 디지털콘텐츠서비스를 위한 구현 단계에서 협업은, 콘텐츠 구성하기에 따라 개발진 간 작업 진행 방식을 공유하며 분담과 공동 작업의 범위와 개발 방법을 정하여 구현을 수행하는 것을 말한다.



제작 프로세서





훈련일 2017. 08. 22(화)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 수정보완
능력단위요소 심미적 디자인 요소 수정 보완하기(0802010406_13v1.1)
이름 김소진

디자인 산출물

프로젝트 수행 과정에서 팀원들 간의 원활한 커뮤니케이션, 의사 결정 및 기록 등을 통해 만들어지 는 결과물을 디자인 산출물이라 하며, 콘셉트, 내비게이션, 페이지 레이아웃, 아이콘 디자인, 폰트, 컬러, UI 구조 등의 디자인 구성 요소를 모두 포함한다.

리뷰(reviews)

리뷰는 결함(defects)을 찾는 작업으로, 대부분 목적한 작업을 통해 제작된 산출물을 시험하고, 그에 대한 논평을 하는 것이다. 소프트웨어의 리뷰는 소프트웨어 작업 산출물(코드를 포함해서)을 테스트하는 방법으로, 요구 사항 문서, 디자인 명세, 테스트 케이스, 테스트 스크립트, 사용자 가이드, 웹 페이지를 포함한 모든 소프트웨어 작업 산출물이 대상이 될 수 있다. 리뷰는 전적으로 인력을 요하는 활동이지만, 도구를 이용하는 것 역시 가능하다. 초기에 리뷰를 통해 발견된 결함들 이 나중에 발견된 결함들보다 제거하는 비용이 적게 든다. 리뷰의 혜택은 초기의 결점 발견과 정정, 개발 생산성 향상, 개발 시간과 비용 절약, 테스팅 비용과 시간 절약, 결함의 감소와 커뮤니케 이션의 증가를 포함한다







훈련일 2017. 08. 23(수)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 수정보완
능력단위요소 심미적 디자인 요소 수정 보완하기(0802010406_13v1.2)
이름 김소진

수정보완 작업의 우선순위

수정․보완 작업을 수행할 때 적용할 주관적인 등급을 말한다. 수정․보완 작업의 우선순위 등급은 일반적으로 아래와 같이 정한다.

이 등급은 다른 항목과 비교한 해당 항목에 대한 주관적인 등급이므로, 높은 값(상)이 주어진 수정․보완 항목을 낮은 값(하)이 주어진 수정․보완 항목보다 먼저 작업하여야 한다.







훈련일 2017. 08. 24(목)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 수정보완
능력단위요소 심미적 디자인 요소 수정 보완하기(0802010406_13v1.3)
이름 김소진

배색

두 가지 이상의 색상을 잘 어울리도록 배치하는 일이다. 이를 평가하는 기준은 사람마다 다를 수 있는데, 색채 조화라는 개념이 정립되면서 보편적 원리나 법칙이 있을 것이라는 주장 아래, 그것을 밝히려는 연구가 진행되고 있다. 배색은 웹 디자인, 제품 디자인, 환경 디자인, 인테리어, 광고․포스터 등 다양한 분야에서 활용되는데, 배색에 따라 그 느낌이 다양하게 나타난다. 색채마다 고유의 이미지나 성격을 지니고 있는데, 예를 들어 빨강은 정열, 열정, 화 등을 나타낸다. 하지만, 각 색이 지닌 이미지는 배색에 따라 온화하거나 여성스러운 느낌 혹은 무겁고 중후한 느낌 등 다양하게 변화할 수 있다.

색상 요소

세가지 이상의 색상들을 배색할 때, 흔히 색상들을 기조색, 주조색, 강조색으로 구분한다.

(1) 기조색(Base Color)

일반적으로 배색 대상이 되는 색으로, 가장 큰 면적을 차지하는 색이다. 바탕색으로 많이 사용하기 때문에, 튀는 색보다는 무난한 색을 주로 쓴다.

(2) 주조색(Dominant Color)

기조색 다음으로 면적 비율이 큰 색으로, 보통 기조색을 보조하는 역할을 한다. 기조색과 동일, 유사, 대비, 보색 등의 관계를 나타내는데, 부차적 컬러라고도 한다.

(3) 강조색(Accent Color)

배색 중에서 가장 작은 면적을 차지하지만 눈에 제일 띄는 포인트 컬러로, 전체 색조를 마무리하거 나 집중시키는 효과를 낸다.

색상에 의한 배색

(1) 동일 색상 배색

같은 색상이라도 명도나 채도 차이를 둔 배색이다. 이는 명도나 채도의 변화를 주어 조화시켜야 하는데, 통일감과 완성감을 느낄 수 있다(세련미, 친근감).

(2) 유사 색상 배색

색상환에서 색상의 차이가 근접하거나 유사한 배색을 말한다. 예를 들면, 빨강과 노랑․주황, 파랑과 남색과 같은 배색이다. 이는 친근하고 즐거운 느낌을 주며, 협조적이고 온화함, 상냥함을 느낄 수 있다. 유사 색상 배색도 동일 색상 배색과 마찬가지로 명도나 채도의 변화를 통해서 조화시켜야 한다. 보통 주조색에 의한 배색에 많이 활용된다. 그러나 색의 차이가 너무 작을 경우 오히려 조화롭지 못한 배색이 되기도 한다.

(3) 반대 색상 배식

빨강과 청록, 노랑과 남색 등과 같이 색상환에서 거리가 멀거나 보색 관계에 있는 배색을 말한다. 반대 색상의 배색은 화려하고 강한 느낌을 줌과 동시에 자극적이고 동적인 생동감을 느낄 수 있다. 이 배색도 역시 채도와 면적의 변화를 통해 색을 조화시켜야 하며, 활동성이 높은 분야의 배색에 적합하다. 그러나 너무 지나치면 혼란스럽거나 복잡해 보일 수 있다.

명도에 의한 배색

(1) 고명도 배색

순색에 하양을 섞은 파스텔톤 색상의 배색을 말한다. 고명도 배색은 밝고 귀여운 느낌을 주며, 여성스럽고 부드러운 이미지를 전달한다.

(2) 중명도 배색

회색과 같은 중간 명도를 가진 색, 즉 Dull톤 색들의 배색을 말한다. 중명도 색끼리의 배색은 무난하 지만, 그 경계가 불분명하고 모호한 느낌을 준다.

(3) 저명도 배색

순색에 검정을 섞은 Dark톤 색상의 배색을 말한다. 저명도 색끼리의 배색은 어두우며 음침한 느낌을 준다.

(4) 명도 차가 큰 배색

고명도 색과 저명도 색의 배색을 말한다. 명도 차가 크면 색들의 관계가 뚜렷하고 명쾌한 느낌을 준다

채도에 의한 배색

(1) 고채도 배색

채도가 높은 Vivid톤 색들의 배색을 말한다. 고채도 배색은 매우 화려하고 자극적이지만, 자칫 산만한 느낌을 줄 수 있다. 그럴 때 중성색이나 무채색을 사용하면 색의 반발성이나 산만함을 줄일 수 있다.

(2) 저채도 배색

채도가 낮은 저채도 색들의 배색은 부드럽고 온화한 느낌을 준다. 하지만, 저채도 – 저명도의 배색은 침울하고 어두운 느낌을 준다.

(3) 채도차가 큰 배색

고채도와 저채도의 배색으로, 채도 차이가 큰 배색은 활기 있어 보이고 명쾌한 이미지를 준다. 또 채도 차가 클수록 확실한 배색이 된다.







훈련일 2017. 08. 25(금)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 수정보완
능력단위요소 콘텐츠 사용성 수정 보완하기(0802010406_13v1.2)
이름 김소진

디지털 콘텐츠의 특징

기존의 아날로그적 콘텐츠를 디지털화한 것이다. 문자, 음성, 음향, 이미지, 영상과 같은 콘텐츠를 디지털 형식으로 제작 혹은 가공한 것이다. 디지털과 콘텐츠가 결합한 개념으로, 기존에 아날로그 형태로 존재하던 텍스트, 음성, 화상, 영상 등 각종 정보 형태를 0과 1이라는 비트(bit) 단위로 디지털화한 콘텐츠를 총칭하는 개념이며, 첨단 IT 기술을 사용하여 디지털 포맷으로 가공, 처리하 여 정보 통신망, 디지털 방송망, 디지털 저장 매체 등을 통하여 활용하는 정보를 말한다. Digital Contents라는 단어를 나눠서 살펴보면, Digital은 정보 표현 방식, Contents는 부호, 문자, 소리, 영상, 화상, 이미지 등 여러 형태로 이루어진 정보, 지식, 데이터베이스를 총칭하는 것을 알 수 있다. 디지털 콘텐츠는 인터넷을 이용하여 유통되는 문자, 소리, 화상, 영상 등의 형태로 이루어진 내용물이지만, 정보와 단순한 내용물만을 의미하는 것이 아니라, 여러 정보 기술을 이용 하여 부가 가치를 창출하는 자산으로 거래 및 서비스가 내재된 형태의 통합적 개념이기도 하다. 따라서 디지털 콘텐츠는 정보 상품(Information goods)과 정보 서비스(Information service), 그리고 정보 생산품(Information products)이 합쳐진 것이라고도 말할 수 있다.



(1) 비파괴성(항상성)

디지털 자료는 아날로그 자료같이 세월이 흘러도 변하지 않고, 항상 똑같은 품질을 갖는다.

(2) 변형 가능성

파괴적 의미의 변형이 아니라, 항상 디지털화되어 있기 때문에 별도의 비용을 추가하지 않아도 자유롭게 정보의 추가, 삭제, 수정이 가능하다.

(3) 보관의 편리성

보관 비용이 저렴하고, 공간적인 낭비가 거의 없다

(4) 결합성

여러 종류의 디지털 콘텐츠끼리 쉽게 결합하여 더 좋은 콘텐츠를 만들 수 있다.

(5) 재생산성

한번 생산된 디지털 콘텐츠는 무한 반복 재생산이 가능하다. 디지털화 된 음악, 동영상, 애니메이션 등은 데이터베이스에 저장되어 사용자의 요구에 따라 언제든지 재생산이 가능하다.

(6) 상호 작용성

정보 이용자가 동시에 정보 제공자가 되는 상호 작용이 가능하다.

(7) 편집성

디지털 콘텐츠는 새로운 내용의 추가와 수정이 용이하다. 따라서 텍스트, 음악, 그림, 동영상, 애니메이션 등의 각종 미디어가 통합된 형태로 가공되어 새로운 멀티미디어를 창출할 수 있다.

(8) 비소멸성

디지털 콘텐츠는 한번 생산되면 형태나 품질을 반영구적으로 유지할 수 있다. 따라서 필요에 따라 언제든지 원하는 형태로 사용이 가능하며, 수많은 사용자가 동시에 사용하더라도 디지털 콘텐츠 자체는 감소되지 않기 때문에 디지털 경제 발전의 원동력이 되고 있다.







훈련일 2017. 08. 28(월)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 수정보완
능력단위요소 콘텐츠 사용성 수정 보완하기(0802010406_13v1.2)
이름 김소진

반응형 웹 디자인 (RWD: Responsive Web Design)

사용자의 환경과 행동 패턴에 유기적으로 적절하게 반응하는 웹 요소들에 대한 총체적 디자인을 말한다. 협의적 관점에서 보면 Screen Size, Resolution, Orientation 등 사용 단말 환경에 반응하여 웹 페이지를 제공하는 것이라고 정의할 수 있다. 즉, 화면 너비에 따라 유동적으로 변하는 유동형 레이아웃(fluid layout)과 유연한 이미지(flexible image), 그리고 미디어 쿼리(media queries)가 어우 러져서 특정 환경에 ‘최적화’된 방법이 아니라, 환경에 반응하여 스스로 적응하는 방법이다. 반응형 웹은 %단위를 사용하여 각 디자인의 폭에 유동적으로 반응하여 콘텐츠의 크기가 줄거나 커지고, 오브젝트 배열이 달라지기도 한다.

적응형 웹 디자인(AWD: Adaptive Web Design)

몇 개의 해상도를 정의하여 CSS 코딩 시 브라우저가 범위 사이즈에 속하면 그에 따라 정의된 스타일로 표현한다. 적응형 웹은 PX단위를 사용하여 정해진 해상도에 적응된 형태로 화면에 그려 지기 때문이다. 반응형 웹과 적응형 웹 모두 공통적으로 미디어 쿼리를 사용한다

HTML5이란?

HTML 5는 HTML 4.01, XHTML 1.0, DOM Level 2 HTML에 대한 차기 표준 제안 버전으로, 월드 와이드 웹의 마크업 언어이다. 최신 멀티미디어 콘텐츠를 브라우저에서 쉽고 용이하게 볼 수 있게 하는 것을 목적으로 하며, 2004년 6월부터 Web Hypertext Application Technology Working Group(WHATWG)에서 웹 애플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하여 2014년 2월 현재에도 개발 중이다

CSS란?(CSS: Cascading Style Sheets)

CSS는 W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. CSS는 여러 수준과 프로파일을 가지고 있는데, 각 수준의 CSS는 일반적으로 새로운 기능을 담고 있으며, CSS 1, CSS 2, CSS 3으로 나뉜다. 프로파일들은 일반적으로 특정한 장치나 사용자 인터페이스를 위해 만들어진 하나 이상 수준의 CSS의 하부 집합인데, 현재 휴대용 장치, 프린터, 텔레비전 수상기를 위한 프로파 일들이 있다.

1996년에 도입된 CSS 1은 공식 W3C 권고안이 되어 CSS의 바탕이 되었다. CSS 2는 W3C가 개발하였 으며, 1998년 5월에 권고안으로 발표되었다. CSS 2.1은 CSS의 표준으로, 이전 버전에 비하여 새로운 기능과 도구가 추가되었다. 대다수의 웹 브라우저는 CSS 2.1을 잘 지원한다(인터넷 익스플로러의 경우, 버전 7이 되면서 CSS 2.1을 지원한다). CSS 3은 2005년 12월 5일 이후 개발 중에 있는데, 현재 W3C에서는 CSS 3을 표준으로 만들고 있다. W3C의 CSS 3 로드맵은 요약과 도입부를 제공하고 있다. 전체가 모듈화되어 사용자 에이전트가 모듈에 대한 모든 모듈을 지원하지 않거나 자유롭게 선택할 수 있도록 하고 있으며, 다른 세로 글쓰기와 HTML 이외의 규격에까지 관여하는 내용으로 되어 있다. 현재 어떤 모듈도 권고안까지 이른 것은 없다

사용자 경험 디자인이란?(UX design: User Experience Design)

사용자가 콘텐츠를 사용하거나 체험할 때, 지각하는 것이 가능한 조직적 상호 교감적인 모델을 창조하고 개발하는 디자인의 한 분야이다. 사용자 경험 디자인은 사용자 중심 디자인의 원리에 기반하고 있어 인간 공학, 인간과 컴퓨터 상호 작용, 정보 아키텍처, 휴먼 팩터스, 사용자 인터페이 스 디자인, 사용성 공학(Usability Engineering) 분야와 많은 공통된 요소를 가지고 있다.

또한 사용자 경험 디자인은 다학제적인 성격을 가지고 있어 심리학, 인류학, 컴퓨터 공학, 마케팅, 그래픽 디자인 및 산업 디자인 분야와 깊은 관련을 맺고 있다. UX 디자인은 매체에 국한하지 않은 매체 독립적이며, 또한 여러 매체를 아우르는 경험을 만들어 낸다. 그래서 UX 디자인의 대상은 어느 한 상품이나 서비스에 초점을 맞추기보다는 전체적이며 다각적인 지각, 감각, 인지와 행동을 통한 분명한 경험을 만들어 낸다. 좁게는 어떤 콘텐츠를 사용할 때 일어나는 경험의 효율성 과 디자인의 합목적성을 이루기 위한 디자인을 말하는데, 예를 들면 쉽게 검색할 수 있는 웹 사이트 를 만드는 일이다. 보다 넓게는 어떤 제품이나 서비스의 소비 과정에서 긍정적 경험을 만들어 내어 사용자를 만족시키는 일 또한 브랜드 경험을 만들어 내어 사람들에게 그 브랜드에 대한 긍정적 이미지를 형성한다. 따라서, 사이트 내의 콘텐츠들이 전달하고자 하는 목적과 내용에 따라 보다 쉽고 편하게 제작되어 사용자에게 제공되도록 하는 것이 중요하다.

웹 접근성이란? (Web Accessibility)

장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹 사이트를 이용할 수 있게 하는 방식을 가리킨다. 웹 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들이 정보와 기능에 동등하게 접근할 수 있다. 웹 접근성에는 다음의 사항들을 고려하여야 한다.

  1. 시각 : 실명, 색각 이상, 다양한 형태의 저시력을 포함한 시각 장애
  2. 이동성 : 파킨슨병, 근육병, 뇌성 마비, 뇌졸중과 같은 조건으로 인한 근육 속도 저하, 근육 제어 손실로 말미암아 손을 쓰기 어렵거나 쓸 수 없는 상태
  3. 청각 : 청각 장애
  4. 발작 : 깜박이는 효과나 시각적인 스트로보스코프를 통해 일어나는 간질성 발작
  5. 인지 : 문제 해결과 논리 능력, 집중력, 기억력에 문제가 있는 정신 지체 및 발달 장애, 학습 장애(난독증, 난산증 등)






훈련일 2017. 08. 29(화)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 수정보완
능력단위요소 매체 기능적 수정 보완하기(0802010406_13v1.3)
이름 김소진

쿠키

하이퍼텍스트의 기록서(HTTP)의 일종으로, 인터넷 사용자가 어떤 웹 사이트를 방문할 경우에 그 사이트가 사용하고 있는 서버에서 인터넷 사용자의 컴퓨터에 설치하는 작은 기록 정보 파일을 일컫는다. HTTP 쿠키, 웹 쿠키, 브라우저 쿠키라고도 한다. 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹 사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다. 이것은 넷스케이 프의 프로그램 개발자였던 루 몬툴리(Lou Montulli)가 고안한 것으로 오늘날 많은 서버 및 웹 사이트 들이 브라우저의 신속성을 위해 즐겨 쓰고 있다. 쿠키는 소프트웨어가 아니기 때문에 컴퓨터 내에 서 프로그램처럼 실행될 수 없으며, 바이러스를 옮길 수도 없고, 악성코드를 설치할 수도 없다. 56 하지만, 스파이웨어를 통해 사용자의 브라우징 행동을 추적하는 데에 사용될 수 있고, 누군가의 쿠키를 훔쳐서 해당 사용자의 웹 계정 접근 권한을 획득할 수도 있다.

세션(Session)

클라이언트와 서버 간의 상태를 유지하기 위한 일반적인 방법으로 세션이라는 개념을 이용한다. 클라이언트가 처음 접속했을 때 클라이언트에게 유일한 세션 ID를 부여하게 되고, 클라이언트는 이 ID를 자동으로 쿠키에 임시 저장하거나, 쿠키가 지원되지 않을 경우에 URL 끝에 붙여 가지고 다니게 된다. 따라서 이 세션 ID는 클라이언트가 재접속하였을 때 해당 클라이언트를 구분할 수 있는 수단이 된다.







훈련일 2017. 08. 30(수)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 수정보완
능력단위요소 매체 기능적 수정 보완하기(0802010406_13v1.3)
이름 김소진

자바스크립트(JavaScript)

객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 사이트에서 많이 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 자바스크립트는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 처음에는 모카(Mocha)라는 이름으 로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발하였으며, 최종적으로 자바스크립트 가 되었다. 자바스크립트가 썬마이크로시스템즈의 자바와 구문(syntax)이 유사한 점도 있는데, 이는 사실 두 언어 모두 C 언어의 기본 구문을 바탕으로 하였기 때문이고, 자바와 자바스크립트는 직접적인 관련성이 없다. 이름과 구문 외에는 자바보다 셀프와 유사성이 많다.

제이쿼리(jQuery)

브라우저 호환성이 있는 HTML 속 자바스크립트 라이브러리이며, 클라이언트 사이드 스크립트 언어를 단순화할 수 있도록 설계되었다. 존 레식이 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다. jQuery는 오늘날 가장 인기 있는 자바스크립트 라이브러리 중 하나이다. jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서 v2의 듀얼 라이선스를 가진 자유 오픈 소프트웨어이다. jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한 jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다.







훈련일 2017. 08. 31(목)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 수정보완
능력단위요소 매체 기능적 수정 보완하기(0802010406_13v1.3)
이름 김소진

데이터베이스

여러 응용 시스템들의 통합된 정보들을 저장하여 운영할 수 있는 공용 데이터들의 묶음이다. 여러 사람들이 공유하고 사용할 목적으로 통합․관리되는 정보의 집합이다. 논리적으로 연관된 하나 이상의 자료의 모음으로 그 내용을 구조화함으로써 검색과 갱신의 효율화를 위한 것이다. 즉, 몇 개의 자료 파일을 조직적으로 통합하여 자료 항목의 중복을 없애고 자료를 구조화하여 기억시켜 놓은 자료의 집합체라고 할 수 있다.

SQL

SQL(Structured Query Language, SEQUEL: Structured English Query Language)는 개체 관계형 데이터베이스를 지원하기 위해 1974년에 IBM 연구소에서 창안하였다. 이 언어는 수학적 관계 대수와 관계 논리(relational calculus)에 기반을 두고 있다. 데이터 모델은 데이터를 조작하기 위한 연산 집합을 가져야 한다. 왜냐하면 그것은 데이터베이스 구조와 제약 조건을 정의하기 때문이다. 다시 말해, 관계 데이터 모델 연산 집합(a set of operations)은 관계 대수로 표현되고, 그 연산은 사용자에게 여러 질의를 가능하게 한다.

웹 서버

웹 브라우저 클라이언트로부터 HTTP 요청을 받아들이고, HTML 문서와 같은 웹 페이지에서 흔히 찾아볼 수 있는 자료 콘텐츠에 따라 HTTP에 반응하는 컴퓨터 프로그램을 말한다. 웹 서버의 주된 기능은 웹 페이지를 클라이언트에게 전달하는 것이다. 이는 HTML 문서뿐 아니라 문서에 들어갈 수 있는 기타 부가 내용, 이를테면 그림, 스타일 시트, 자바스크립트의 전달을 말한다. 흔히 웹 브라우저 또는 웹 크롤러로 부르는 클라이언트는 HTTP를 사용하여 특정 리소스 요청을 하며 통신을 시작하고, 서버는 해당 리소스의 콘텐츠를 가져다주며 응답한다. 만약, 이를 수행할 수 없으면 오류 메시지로 응답한다. 웹 서버의 주된 기능이 콘텐츠를 전달하는 것이지만, 클라이언트 로부터 콘텐츠를 받는 것 자체도 해당 기능에 속한다. 이러한 기능은 파일의 업로드를 포함한 웹 폼 제출에 쓰인다.







훈련일 2017. 09.01(금)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 프로젝트완료
능력단위요소 산출물 정리하기(0802010407_13v1.1)
이름 김소진

프로젝트 매니저의 작업 분류 체계(WBS : work breakdown structure)

  1. 프로젝트 수행 활동 작업을 계층화 및 상세화하여 프로젝트의 범위를 정의하는 방법으로, 직무 위주의 활동 가계도(Family Tree)라고도 하며,“프로젝트 요소인 산출물 중심의 분류 체계로 프로젝트의 전체 범위를 구성하고 정하는 것”으로 정의한다. 전체 업무를 분류하여 구성 요소 로 만든 후, 각 요소를 평가하고 일정을 계획하며, 그것을 완수할 수 있는 사람에게 할당해 주는 역할을 한다. 현대적인 프로젝트 관리에서 주춧돌과 같은 역할을 하며,‘단계(Phase) - 활동(Activity) - 작업(Work) - 절차(Step) - 패키지(Work Package)’의 계층을 갖는다.
  2. 패키지를 중심으로 담당자와 일정이 관리되므로, 3~4레벨 단위로 구체화되는 코드 체계(Code of Accounts)로 단계가 구분되어 산출물의 체계적 관리 기준이 만들어진다. 이를 통해 공통 작업 항목을 계획 및 통제가 가능한 수준으로 분해하여 구체적 중간 산출물 및 전체 산출물에 적용한다.
  3. 작업 분류 체계에 따른 산출물 수집 목적은 아래와 같다.
    • 프로젝트 단계를 분할하고 정의하는 과정에서 프로젝트에 대한 이해 개선
    • 일정 및 산출물의 예측 정확도 개선
    • 세분화된 작업 기준으로 산출물 수집 작업을 할당할 수 있어 효과적 관리 가능
    • 표준화된 프로젝트 절차 활용에 의한 의사소통 개선
    • 작업의 논리 관계 파악과 진행 중인 산출물의 효율적 통제 가능
    • 전사적 자료 축적 및 효율적 관리
  4. 프로젝트 관리 계획
    • 상향식(bottom-up) 방법 : 프로젝트에 수행될 작업을 작은 단위로 나누고 각 작업에 소요될 기간이나 노력을 예측하여 독립된 작업 사이에 병행하여 수행할 경우 단축되는 기간을 계산하 면 전체 소요 기간이나 노력을 구할 수 있다. 작은 단위 작업에서 출발하여 전체 프로젝트의 기간을 예측한다. 프로젝트를 위한 소작업에 소요되는 기간을 구하고, 여기에 투입되어야 할 인력과 투입 인력의 참여도를 곱하여 최종 인건비를 계산한다(WBS, CPM 네트워크, 갠트 차트).
    • 하향식(top-down) 방법 : 프로그램의 크기와 노력 사이의 관계를 나타내는 수학적 모델을 사용하여 시스템의 규모를 과거의 경험이나 구현 언어, 재사용 비율 등을 고려하여 예측하고, 이를 비용 모델(cost model)에 대입하여 노력이나 기간을 산출한다. 전체 규모로부터 기간을 예측하여 정하고, 소단위 작업의 노력을 추정한다. 프로그램의 규모를 예측하고 과거 경험을 바탕으로 예측한 규모에 대한 소요 인력과 기간을 추정한다(FP, LOC, Man-Month, COCOMO).

개발 프로세스

프로젝트에서 이루어져야 할 중심 프로세스, 수행할 개발 및 품질 보증 작업 일체를 말하며, 모델 유형은 다음과 같다.

(1) 폭포수 모델(waterfall model)

단계별 승인을 거쳐, 순차적-하향식으로 개발이 진행되는 고전적 생명 주기 모델이며, 간략한 특징은 아래와 같다.

(2) 프로토타입 모델(prototype model)

사용자의 의견(feedback)이 중요한 모델이며, 핵심적 기능을 샘플로 만들어 평가한 후 본 개발을 진행하는 점진적 개발 방법으로 정의할 수 있다.

(3) 점증적 개발 모델(incremental model)

※ 점증적(기능별로 릴리스 하기), 반복적(릴리스 할 때마다 기능완성도 높이기)방법으로 운영

(4) 나선형 모델(spiral model)

위험 관리를 중요시하는 모델이며, 간략한 특징은 아래와 같다.

(5) V모델

테스트와 검증을 강조하는 모델이며, 간략한 특징은 아래와 같다.

(6) 일정 중심 설계 모델(design to schedule model)

출시 일정을 정확히 맞추기 위한 모델이며, 간략한 특징은 아래와 같다.







훈련일 2017. 09.04(월)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 프로젝트완료
능력단위요소 산출물 정리하기(0802010407_13v1.1)
이름 김소진

분류의 기본 원칙

  1. Inventory 개념의 문서 Life Cycle 관리를 통해 표준화, 디지털화한다.
  2. 안전행정부 산하 한국정보화진흥원 공지‘표준산출물가이드(2012. 12. 15)’참조
  3. 각 산출물은 산출물의 제작 흐름에 따른 ID를 부여하여, 이전 단계 산출물 관련 ID로 산출물 간의 연관성을 추적하기 쉽도록 구성한다

산출물 체계화

  1. 산출물은 다양한 디지털 형태로 축적되어 빠른 검색을 거쳐 선택, 가공, 분석할 수 있어야 한다.‘산출물의 체계화’라고 부르는 일련의 과정을 통해 의미 있는 내용으로 전환하여 의사 결정을 지원하는 중요한 영업 활동으로서의 의미를 갖게 된다.
    • 코드 관리나 미디어 관리를 위한 자료를 클라이언트를 위한 산출물로 이해한다.
    • 출물을 보면 관련 문서의 흐름대로 시간과 인력 등의 측정이 가능해진다.
    • 원가(Cost) 개념을 적용하여 불필요한 문서 작업을 제거해 나간다.
  2. 물리적인 산출물 체계화
    • ‘중앙화’또는‘공유 가치화’를 위해 관리의 표준화와 외부 유출 예방, 협업과 공용을 위한 업무 표준화, 모바일 서비스, 원격 근무, 문서의 Life Cycle 관리, 지속적 정리 정돈, TCO 절감, 정보 수집 지원 개방 등의 업무 프로세스를 가시화하는 데 기여한다.
    • Ÿ 산출물의 체계화를 통해 프로젝트 완료 보고서와 디자인 가이드를 작성하면, 작업자와 클라이 언트 모두에게 효율성을 제공하게 된다.
    • 콘텐츠 유지 보수 및 관리를 위한 최종 작업 산출물은 디자인 가이드에 포함하여 체계화한다.






훈련일 2017. 09.05(화)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 프로젝트완료
능력단위요소 프로젝트 결과 보고서 작성하기(0802010407_13v1.2)
이름 김소진

산출물의 선택과 가치 분석







훈련일 2017. 09.06(수)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 프로젝트완료
능력단위요소 프로젝트 결과 보고서 작성하기(0802010407_13v1.2)
이름 김소진

업그레이드와 유지 보수







훈련일 2017. 09.07(목)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 프로젝트완료
능력단위요소 프로젝트 결과 보고서 작성하기(0802010407_13v1.2)
이름 김소진

프로젝트 보고서 작성에 따른 필요 사항

프로젝트의 유지 보수 작업에 필요한 산출물 관리와 달리, 작업을 마친 후 클라이언트에게 보고하 는 최종 보고서를 만드는 과정이다.







훈련일 2017. 09.11(월)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 프로젝트완료
능력단위요소 클라이언트 최종 보고하기(0802010407_13v1.2)
이름 김소진

프로젝트 최종보고

완료된 프로젝트의 기획과 수행 과정은 물론, 완료된 제품의 사후 관리까지의 내용을 체계적으로 구성하여 설명과 설득의 방법으로 클라이언트에게 보고하는 것으로, 클라이언트와 보고자의 쌍방향 커뮤니케이션으로 이루어진다.

프레젠테이션의 절차

전략 아이디어 도출 기법

① 표적 집단 면접(Focus Group Interview)

자유로운 발언 분위기 조성이 필요하므로, 진행자가 중요하다. 명확한 주제를 제시하여 5~8명의 전문가 그룹으로 진행한다.

② 브레인스토밍(brainstorming)

양적으로 많은 아이디어를 창출하는 데 유리하다. 다른 사람의 의견에 대한 비판을 금해야 하며, 다른 사람의 아이디어를 확대․개선․표절하는 것이 가능하고, 적극적 참여자 확보가 필수적이다.

③ 의사 결정 권리 도구

권고, 승인, 실행, 투입, 결정의 역할 중 한 가지씩을 개인에게 각각 부여하여 진행하며, 질 높은 의사 결정과 신속한 성과 창출에 유리하다.

④ 스노카드(snow card)

집단 의사 결정 기법으로, 참여자들이 포스트잇에 기록한 1개씩의 아이디어를 그룹화하여 우선순 위를 설정하거나 그룹화를 반복하여 합의점을 도출한다.

⑤ PINC(positive, intriguing, negative, concerning) 여과기 모형

힘의 장 분석 기법의 확대 형식이며, 긍정, 호기심 유발, 부정, 걱정 끼치는 것을 의미한다. 브레인스 토밍 등과 함께 사용할 수 있다.

⑥ 힘의 장 분석(force field analysis)

찬성과 반대의 모든 힘을 명확히 하여 의사 결정을 지원한다. 사실, 자료, 브레인스토밍, 설문 조사 등의 결과를 근거로 추출하거나 힘의 강도를 결정할 수 있다.

⑦ 스캠퍼(scamper)

체크 리스트법 기반의 문제 해결법이다. SCAMPER는 대체, 결합, 변경, 수정, 다른 용도로 사용, 제거, 거꾸로 힘의 첫 글자를 연결한 것이다.

⑧ 시네틱스(synetics)

친숙하지 않은 것을 친숙한 것으로 전환해 보는 유추 활동으로, 사물에 대한 새로운 관점의 이해와 다양한 아이디어를 찾아낸다.

⑨ 상징 유추(symbolic analogy)

서로 모순이 되는 것처럼 보이는 두 단어 속에서 비논리적 사고를 사용하는 아이디어 발상법이다.

⑩ CAF(consider all factors)

주어진 문제 상황에서 모든 요인들을 고려하여 생각하도록 돕는 사고 기법으로, 사고 과정에서 놓친 것들을 재고려하도록 하여 생각의 범위를 넓혀 준다.

⑪ PMI(Plus, Minus, Interest)

제안된 아이디어를 다각적 측면에서 분석하고 평가하여 새롭고 개선된 아이디어를 생성하는 방법 이다. 한 측면을 평가할 경우, 다른 측면에 대해서는 생각하지 않도록 한다.

⑫ TRIZ

기술 모순의 문제 분석에서 시작하여 모델 분석, 물리적 모순 기술, 자원 활용, 지식 기반, 문제 재구성, 모순 제거 원리 검토, 해법의 가능성 검토, 문제 해결 경로 분석의 9단계를 거치는 구조적 기법이다.







훈련일 2017. 09.12(화)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디지털디자인 사후관리
능력단위요소 오류수정하기(0802010408_13v1.1)
이름 김소진

모니터링 대상요소

데이터베이스

콘텐츠 개발에 사용되는 데이터베이스는 크게 유닉스(UNIX) 계열과 윈도즈(Windows) 계열로 나뉜다. 개발된 콘텐츠가 어떤 브라우저와 어떤 운영 체제(OS)를 사용하느냐에 따라 사용하는 데이터베 이스도 영향을 받게 된다







훈련일 2017. 09.13(수)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디지털디자인 사후관리
능력단위요소 오류수정하기(0802010408_13v1.1)
이름 김소진

클라이언트와의 커뮤니케이션에 필요한 내용

클라이언트의 요구에 대한 대처 방법

  1. 디자인을 무조건 바꾸어 달라고 할 때
    • 클라이언트의 요구 사항과 유사한 동종 업계의 사이트를 분석(차별화, 트렌드 파악) 하여 제시한다.
    • 타깃 고객층의 특성을 고려한 목표 성향을 분석하여, 메인 메뉴와 서브 메뉴를 결정한다.
    • 목표 고객층에 맞는 색상과 디자인을 제안한다.
    • 클라이언트와 협상한 내용을 토대로 스토리보드 및 화면을 설계하여 클라이언트와 재협상한다.
    • 스토리보드와 화면 설계가 확정된 후, 포토숍 작업을 수행한다.
  2. 클라이언트의 요구가 자주 바뀔 때
    • 클라이언트와 요구 협상을 할 때, 회의록을 작성하여 클라이언트의 사인을 받는다
    • 프로젝트 초반에 확실하게 클라이언트의 요구를 확인하고 도장을 받은 후, 프로젝트 구현을시작한다.
  3. 시안이 확정되지 않을 때
    • 제시한 시안을 정해진 기일 안에 결정하도록 일정을 알린다.
    • 다양한 결정 방법(이사진에서 결정, 인트라넷과 사내 게시판을 통한 시일 내 결정 등)을 제안한다.
  4. 클라이언트가 계속해서 수정과 추가 작업을 요구할 때
    • 유상과 무상의 업무에 대해 설명하고, 계약서와 요구 사항 명세서 등을 통해 필요하면 추가 견적을 제시하고, 이러한 상황을 예상하고 필요한 자료들을 준비하여 제시하고 협상한다.






훈련일 2017. 09.14(목)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디지털디자인 사후관리
능력단위요소 오류수정하기(0802010408_13v1.1)
이름 김소진

프로젝트 개발 5단계 중요사항

프로젝트 진행과 관리를 위한 PMO 유형







훈련일 2017. 09.15(금)
훈련과정명 스마트 기기 UX/UI 디자인 (디지털 웹표준 디자인)
교과목명 스마트 기기 UX/UI 디자인 (디지털 디자인) 제작
능력단위명 디지털디자인 사후관리
능력단위요소 오류수정하기(0802010408_13v1.1)
이름 김소진

데이터베이스 관리 시스템

DBMS(database management system) : 데이터베이스 관리 시스템은 다수의 컴퓨터 사용자들이 데이터베이스 안에 데이터를 기록하거나 접근할 수 있도록 해 주는 프로그램이다. DBMS는 사용자 요구 사항들이나 다른 프로그램의 요구 사항들을 관리함으로써, 사용자들이나 다른 프로그램들이 실제로 그 데이터가 저장 매체의 어느 곳에 저장되어 있는지를 이해하지 않고서도, 다중 사용자 환경의 모든 사람이 데이터를 이용할 수 있도록 해 준다. 사용자 요구 사항들을 처리함에 있어, DBMS는 데이터의 무결성(데이터베이스가 계속해서 접근이 가능하며, 의도한 대로 조직화되어 있다는 사실을 확인해 주는 것)과 허가된 사용자들만이 데이터에 접근할 수 있게 하는 보안성을 보장한다. 가장 일반적인 형태의 DBMS가 관계형 데이터베이스 관리 시스템이다. DBMS는 데이터베이스 내의 데이터를 관리하는 파일 관리자인데, 개인용 컴퓨터에서는 마이크로 소프트 액세스가 단일 사용자 및 소규모 사용자용 DBMS의 대표적이며, SQL Server는 다중 사용자 들의 데이터베이스 요구를 지원하는 DBMS이고, IBM의 DB2, 인포믹스, 오라클 등의 DBMS 등이 있다.

데이터 백업의 종류