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)

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







훈련일 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법칙

  • E(Example) : 예화로 이야기를 시작한다. 특히, 본인이 이야기나 최근 이슈가 되고 있는 이야기를 바탕으로 근거 있는 싱례가 좋다.
  • O(Outline) : 전달하고자 하는 핵심 내용을 간략히 정리한다
  • B(Benefit) : 전달하고자 하는 내용이 상대방에게 어떤 이익을 주는가에 초점을 맞추어 설명한다






훈련일 2017. 06. 26(월)
훈련과정명 스마트기기 UX/UI 디자인(디지털 웹표준 디자인)
교과목명 스마트기기 UX/UI 디자인(디지털 디자인) 기본
능력단위명 디지털디자인 프로젝트 기획(0802010401_13v1.3)
능력단위요소 프로젝트 계약하기(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 어떻게 진행, 수행하는가?(전후 진행 사황 설명)






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

페르소나 모형(Persona Model)

페르소나는 디자인 프로젝트상에서 실제 사용자를 대표하는 가상의 인물을 말한다. 페르소나 모형의 목적은 핵심 사용자층에 속하는 대표적인 사용자의 행동 패턴 및 라이프 스타일 등 사용자 경험(User Experience)을 예측하는 것이므로 가상의 인물일지라도 구체적이고 자세허게 정의되어 야 한다.







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

정보 수집

개발 방향을 설정하기 위해 정보를 수집할 때에는 수집되는 정보를 바탕으로 섣부른 결론을 내리지 않기 위해 편견을 갖지 않도록 하여야 하고, 정보가 누락되는 것을 방지하여 되도록이면 많은 정보를 수집하도록 한다. 정보 수집 방법은 크게 인터넷 검색, 소셜 네트워크 서비스 분석, 통계, 학술 자료, 설문 조사 등 온라인 매체를 이용하는 방법과 관찰, 인터뷰, 포커스 그룹 인터뷰(Focus Group Interview), 신문, 비즈니스 트렌드 잡지 및 도서 등 오프라인 매체를 이용하는 방법으로 구분할수 있다.

  1. 필요성 : 무엇을 알고자 하는가
  2. 수집 범위 : 어디까지 수집할 것인가
  3. 출처 : 어디에서 수집할 것인가
  4. 정확성 : 출처 확인
  5. 보안성 : 비밀 유지
  6. 신선도 : 최대한 최신 정보 수집
  7. 정보망 : 정보 제공자 다수 확보
  8. 현장 중시 : 직접 찾아다니며 정보를 얻는다.
  9. 메모 : 정보는 반드시 기록
  10. 정보 유도 : 질문 역량 강화
  11. 판단력 : 정보를 이해하는 능력
  12. 수신기 : 다양한 견해를 경칭
  13. 정보 장비 : 웹, e-mail, 전화 등 다양한 매체의 활용
  14. 적극성 : 정보를 찾고자 하는 열의
  15. 대인 관계 : 정보 수집에는 타인의 협조가 필수
  16. 종합력 : 부분적인 것도 추구
  17. 객관성 : 숫자에 현혹되지 말 것
  18. 도전성 : 수집 불가능한 정보가 더 중요
  19. 정직성 : 정보를 왜곡하지 말것
  20. 생산성 : 효율적인 정보 수집 방법 강구

거시 환경(STEEEP) 분석

거시 환경(STEEP) 분석은 사회적(Social) 환경, 기술적(Technological) 환경, 경제적(Economic) 환경, 생태학적(Ecolgical) 환경의 5가지 요소로 기업의 활동에 영향을 주는 외부적 요인을 파악하는 방법을 말한다. 5가지 요소의 영문 첫 글자를 조합하여 STEEP 분석법이라고도 한다

  1. 사회적(Social)

    인구 통계, 출생률, 사망률, 평균 수명, 교육 수준, 사회 계층 간 임금 격차, 사회 각 영역의 인구 비율, 여성의 사회 진출, 문화적 태도, 문맹률, 관시므 믿음, 가치, 라이프 스타일, 사용자 생활 양식 등

  2. 기술적(Technological)

    보유 특허, 특허 보호 제도, R&D 예산 신기술정보 기술, 기술 변화 속도, 기술 클러스터 존재 여부, 서비스 혁신 속도, 기술 혁신 및 확산, 산업경제의 디지털화, 인터넷 기반 기술 등

  3. 경제적(Economic)

    GDP 성자률, 외한 보유고, 인플레이션율, 수입 배분 수준과 범위, 금융재정 정책, 구조 조정, 실업률, 입금 수준, 소비 성향, 시장 경쟁 구조 등

  4. 생태학적(Ecolgical)

    공기수질, 재활용 시설 규모, 애너지원, 서비스 수명 주기 발전 단계, 원자재 대체성, 환경 규제 수준 등

  5. 정치적(Political)

    개력 정책, 규제 기관의 활동, 재산권 보호법 존재 여부, 정치적 의사 결정에 대한 영향력, 여론, 정책 결정 구조의 성격, 구조의 성격, 지원 정책, 구제 합리화, 민영화, 특허 등

미시 환경 분석

미시 환경 분석은 기업의 내부적 환경과 공급자, 클라이언트, 경쟁자들, 관계자들의 상황과 동향등을 파악하는 방법을 말한다. 대표적인 방법으로 소비자(Customer), 경쟁사(Competitor), 자사(Company)를 분석하는 3Cs 분석법이 있다

  1. 소비자(Customer)

    목표 소비자, 이용 동기, 이용 경로, 소비자 영향력, 시장 규모, 시장 성장률 등

  2. 경쟁사(Competitor)

    현재의 경쟁사, 잠재적 경쟁사, 경쟁사의 시장 내 성과, 시장 내 강점 및 약점, 경쟁사의 마케팅 전략 등

  3. 자사(Company)

    인물 물적 기술적 자원, 기업의 문화, 기업의 이미지, 재무 자원, 생산 설비, 업지, 기업 내 타 부서의 영향을 받는 요인 등

SWOT 분석

SWOT분석은 프로젝트 전략 수립의 필수 기법으로, 분석하고자 하는 대상 기업의 내부 요인 상황과 경쟁자와 비교한 강점(Strenght), 약점(Weakness), 그리고 자사를 제외한 외부 환경인 기회(Opportunity), 위협(Threat)의 네 가지를 분석한다.

  1. SO(Strenght, Opportunity)

    내부도 강하지만 외부의 기회에도 강한 SO분석법은 기존 시장 장악은 물론 신규 시장 진출에 용이하다

  2. ST(Strenght, Threat)

    내부는 강하지만 외부의 위협이 도사리고 있는 ST분석법은 기존 시장 침투 및 확장의 장점과 단점을 각각 가지고 있다.

  3. WO(Weakness, Opportunity)

    내부는 약하지만 외부의 기회가 있는 WO분석법은 핵심 역량 강화라는 장점과 시장을 선도하고 있는 서비스와의 제휴를 통해 발전의 여지가 있는 전략이다.

  4. WT(Weakness, Threat)

    내부가 약할뿐더러 외부의 위협도 존재하는 WT분석법은 내, 외부 모두 각각의 위험이 도사리고 있으므로 시장 철수를 어느 시점에 어떠한 방식으로 진행할지를 분석하는 전략이다.







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






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

디자인 요구 사항 분석

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

  • 클라이언트 요구 사항 : 마케팅 지향점, 브랜드 이미지, 경쟁 브랜드의 차별화 전략 등
  • 사용자 성향 : 주 사용자의 연령, 성별, 기호, 심리, 행동 패턴 등
  • 기능적 요구 사항 : 서비스 환경, 필수 요소 등
  • 디자인 제약 조건 : 기업 CI 사용 규정, 기업 선호 색상 디자인 콘셉트 등
  • 입무 흐름 : 의사 결정권자 및 프로젝트 매니저의 디자인 성향 등






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

콘셉트 시각화 디자인 요소

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

  • Color : 해당 삼품의 이미지를 키워드로 설정하고,컬러 맵에 의해 키워드에 맞는 단일색, 배합색 등으로 표현한다.
  • Image : 해당 삼품의 이미지를 키워드로 설정하고, 사지느 그리므 동영상 등의 형태로 표현한다
  • Type : 본문과 기능성 메뉴 버튼 등은 가독성 중심으로 표현하고, 타이틀과 배경 등은 시각적 이미지를 고려하여 표현한다
  • Layout : 사용성을 중심으로 다양한 현태로 표현한다

톤 & 매너(Tone & Manner)

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







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

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

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

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

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

정보 구조화 유형

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

네비게이션 유형(Navigation)

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

  3. 로컬 내비게이션(Local Navigation)
  4. 글로벌 내비게이션의 하위 내비게이션으로 통칭 서브메뉴를 자칭하며, 대체로 글로벌 내비게이션의 바로 아래 또는 화면 구조에 따라 왼쪽, 오른쪽에 위치한다

  5. 콘텍스추얼 내비게이션(Contextual Navigation)
  6. 정보의 맥락상 유사한 정보로의 이동이 용이하도록 특정 이미지 및 단어에 관련 페이지를 연결하는 방식을 말한다.







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

아이디어 발상법

  • 창의성의 발현을 돕기 위해 개발되어 있는 다양한 발상 방법들은 다음과 같다.
  1. 브레인스토밍법
    특정한 주제 또는 문제에 대해 참여자 모두가 아이디어를 사전 조율 없이 그대로 내놓는 방법이다. 집단적 사고의 전형적인 형태인 이 방법에서 전제하고, 있는 기본 가정은 사고의 양이 질을 결정한다는 것이며, 양적으로 축젇된 아이디어를 목록별로 정리하고, 발전시켜 최종 산출물을 얻는다.
  2. 체크 리스트 기법
    어떤 일을 생각할 때 누락되는 것이 없도록 하나씩 체크해 가기 위한 일람표를 가리킨다. 체크 리스트 기법은 다양한 분야에서 활용할 수 있지만, 특히 제품 발상에 적합한 아이디어 발상 기법이 라고 할 수 있다.
  3. 마인드맵핑법
    두뇌 활동이 주로 핵심 개념을 상호 관련시키거나 통합하는 방식으로 이루어진다는 연구 결과를 바탕으로 하는 시각적 사고 기법으로, 생각하고 있는 간단한 그림과 기호, 상지을 색깔로 강조하며 짧은 낱말로 나뭇가지와 같은 가지를 그려서 그 위에 빠르게 표현하는 시각적인 도식이다.
  4. 시네틱스
    어떤 사물을 발상할 경우, 그 사물과 본질적으로비슷한 것이 무엇인가를 찾아내서 그것을 힌트로 하여 아이디어를 생각하는 것이다. 시네틱스는 자신의 주제에서 본질적으로 비슷한 것이 무엇인가를 찾는 기본적인 집단적 발상 기법으로, 제품 개발 등의 분야에 사용하면 큰 효과가 있다.
  5. 강제 결부법
    독특하고, 일상적인 것을 뛰어넘는 새로운 아이디어가 필요할 때, 혹은 문제에 대한 아이디어가 더 이상 떠오르지 않을 때, 다양한 시각에서 아이디어를 생성해 보고 싶을 때 사용하는 것이 바람직하다.
  6. 형태 분석법
    해결해야 할 문제를 모든 구성 요소의 조합으로 보고, 그것을 차트화하여 분석하는 방법이다. 즉, 해결해야 할 문제를 나열하여 3차원 도표의 변수로 보고, 이들 변수를 다시 세분화하여 각각의 항목들이 만나는 부분을 해결해 가는 방법이다.
  7. 육색모 사고법
    하양, 빨강, 검정, 노랑, 초록, 파랑의 6가지 색상에 각기 다른 독특한 관점을 정의해 두고 참여자들이 각자 다른 색깔의 관점에서 정해진 색상 순서로 역할을 분담해서 생각을 전개해 가는 방법이다.

데이터의 종류

  1. 매체 성격에 따른 분류 : 외부 데이터와 내부 데이터
    외부 데이터는 인터넷 외부에서 얻어지는 모든 데이터를 의미한다. 시장 정보나 주식 정보 등과 같이 인터넷이 등장하기 이전에 데이터화되어 사용자에게 제공되던 정보를 인터넷 데이터로 전환 시킨 것이다.
    내부 데이터는 인터넷에 관련된 정보를 제공하는 콘텐츠이다. '어떤 정보를 어디서 얻을 수 있는 지' 등의 데이터로, 검색 엔진에서 많이 활용되는 데이터나 비디오 클립,MP3 파일과 같은 데이터 를 뜻한다.
  2. 데이터 생성에 따른 분류 : 프로듀서 데이터, 컨슈머 데이터
    프로듀서 데이터는 인터넷 초창기에 주류를 이루었던 것으로, 사이트 제작자가 일방적으로 제공하는 콘텐츠를 뜻한다.
    컨슈머 데이터는 사이트의 사용자들이 만들어서 제공하는 데이터를 뜻한다. 비슷한 개념으로 사용자가 상업적인 의도가 없이 제작한 콘텐츠를 온라인상으로 나타낸 UCC(User Created Contents)가 있다. 최근에는 프로패셔널(Professional)과 아마추어(Amateur)의 합성어인 프로추어(Proteur)들이 자신의 블로그 등을 통해 제공하는 콘텐츠인 PCC(Proteur Created Contents)도 생겼다.
  3. 데이터 이용에 따른 분류 : 유로 데이터, 무료 데이터
    유료 데이터는 시간당 또는 건당으로 사용자에게 요금을 받는 콘텐츠를 뜻한다.
    무료데이터는 사용자가 인터넷에 접속하면 언제든디 별도의 비용 없이 이용할 수 있는 콘텐츠를 뜻한다.
  4. 프로슈머적 테이터
    프로슈머(Prosumer)는 판매나 교환을 위해서라기보다는 자신의 사용이나 민족을 위해 제품, 서비스, 경험을 생산하는 사람을 말한다. 사용자들의 콘텐츠를 사이트에서 직접 받아들이는 방식으로, 게시판이나 블로그 형태가 있다. 사용자입장에서는 사이트에 직접 참여한다는 의식이 사이트에 대한 참여도(royalty)를 가질 수 있게 한다. 엘빈 토플러(Alvin Toffler)가 "제3의 물결" 에서 '앞으로는 소비자가 신제품 개발에 직간접적으로 참여하게 될 것' 이라고 예견하면서 도입된 개념이다.

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

  1. designDB9(한국디자인진흥원의 디자인 포털) 바로가기
  2. 월간 디자인(디자인 잡기, 전시회 공모전) 바로가기
  3. 디자인정글(온라인 매저진, UCC, 아카데미, 도서, 공모전 등 정보 제공) 바로가기
  4. How design(디자인 관련 정보 제공) 바로가기
  5. flickr(혼라인 사진 관리 및 응용 프로그램) 바로가기
  6. 굿디자인웹(웹 사이트 심사 및 평가) 바로가기
  7. 디자인하우스(잡지 출판사)바로가기
  8. Pinterest(사이트 같은 이미지를 기반으로 하는 포털 사이트) 바로가기
  9. 비메오(미국 동영상 클립 공유 사이트) 바로가기
  10. 구글(방대한 데이터 검색 포털) 바로가기






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

데이터의 유형

  • 사실(Fact)
    누구나 이해할 수 있는 객관적이고 구체적인 자료이다. 이 데이터는 정보의 양은 적은 편이나, 구체성은 높고, 데이터 자체의 난이도는 낮은 특징을 보인다. '사실' 과 관련된 자료는 주로 텍스트 중심으로 제공되지만, 최근 들어 사용자의 직관적인 이해를 돕기 위해 추가적인 이미지나 동영상이 제공되기도 한다.
  • 개념(Concept)
    특정 대상에 대한 이래를 돕기 위해 사용하는 저으이 또는 특정 아이템이 어떤 개념과 효능을 지녔는지에 대한 정보를 말한다. 웹 사이트에서 제시하는 정보 이외에도 현실적으로 서비스의 기능이나 용도 또는 특징에 대한 설명을 '개념' 이라는 방법으로 제시하는 경우도 많다. 멀티미디어 콘텐츠가 일반화되면서 간단한 그림이나 동영상을 함께 사용하는 경우도 많아지고 있다.
  • 절차(Procedure)
    사용자가 수행해야 하는 순차적인 행위를 지정해 주는 자료로, 시스템을 사용하기 위해 사용자가 어떤 작업을 어떤 순서에 따라 수행해야 하는지를 알려 준다. 과거에는 텍스트와 그림 중심으로 표현되었지만, 단꼐별로 시스템의 상태와 사용자의 동작을 동영사응로 보여 줌으로써 사용자의 이해를 높이고자 하는 추세를 보이고 있다.
  • 원리(Principle)
    사용자가 수행해야 하는 순차적이 행위를 지정해 주는 자료로, 시스템을 사용하기 위해 사용자가 어떤 작을 어떤 순서에 따라 수행해야 하는지를 알려 준다. 과거에는 텍스트와 그림 중심으로 표현되었지만, 단계별로 시스템의 상태와 사용자의 동작을 동영상으로 보여 줌으로써 사용자의 이해를 높이고자 하는 추세를 보이고 있다.
  • 원칙(Rule)
    시스템이 사용자에게 제시하는 일종의 가이드라인의 개념으로, 시스템 이용 시 사용자가 준수할 행동 요령에 대한 내용이다. '원칙' 은 사용자에게 준수하도록 직접 요구하는 형식을 취할 수 있고, 성공 사례 등을 제공하는 것처럼 간접적인 형식을 취할 수도 있다.
  • 이야기(Story)
    실제 있었거나 만들어 낸 특정 경험을 의미한다. 블로그나 개인 홈페이지를 통해 공개되는 유형의 자료는 대부분 비공식적이며 무료로 제공되고, 생산 주체와 소비 주체가 같다는 특징을 가진다. '이야기' 는 주로 텍스트 형태나 웹툰처럼 만화 형식으로 전달된다.
  • 의견(Opinion)
    어떤 대상이나 사안에 대해 사용자가 가지고 있는 개인적인 생각을 의미한다. '의견' 은 인터넷 을 통해 양방향성이 증가하면서 확산되기 시작한 자료위 유형이다.
  • 묘사(Description)
    특정 대사으이 현재 상태를 여러 방식으로 표현하는 자료이다. 이미지가 멀티미지디어적 자료는 사용자의 감성에 영향을 주며 개인적인 취향과 관련이 있느 자료 유형으로, 사용자의 주관적이 선호도에 자료의 가치가 좌우한다.
  • 예측(Forecast)
    이미 있는 기초데이터를 수집하여 그것을 확률이나 통계와 같은 추가적인 분석을 거쳐 향후 추세를 예상하는 자료이다. 따라서 기존의 사실이나 원리 드으이 자료를 기반으로 추가적인 작업을 통해 발생하는 부가 정보라고 할 수 있다.
  • 메타데이터(Mata-Data)
    데이터에 관한 구조화된 데이터로, 다른 데이터를 설명해 주는 데이터이다. 일반적으로 정보의 위치와 내용, 작성자에 대한 정보를 담고 있으며, 주로 정보를 표현하기 위한 목적과 빨리 찾기 위한 목적으로 사용되고 있다.

저작권

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

좋은 디자인 조건

시대와 사회에 따라 디자인의 의미가 변하고, 많은 사람들의 다양한 생각과 개성만큼 디자인의 다양한 의미가 전개되었다. 대다수의 사람들이 동의하는 가장 기본적인 디자인의 요건은 기능에 충실하게 만들어져 소비자의 필요와 미학적 요구를 동시에 충족시키는 것이다. 디터 람스(Dieter Rams, 1961-1995)의 좋은 디자인 십계명은 다음과 같다.

  1. 좋은 디자인은 혁신적이다.
  2. 좋은 디자인은 제품을 유용하게 만든다.
  3. 좋은 디자인은 심미적이다.
  4. 좋은 디자인은 제품을 이해될 수 있게 만든다.
  5. 좋은 디자인은 요란하지 않다.
  6. 좋은 디자인은 정직하다.
  7. 좋은 디자인은 오랜 삶을 가지고 있다.
  8. 좋은 디자인은 마지막 디테일까지 철저하다.
  9. 좋은 디자인은 환경 친화적이다.
  10. 좋은 디자인은 가능한 최소한의 디자인이다.






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






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

시각화의 정의

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

  1. 시각화는 거대한 양의 데이터를 이해하기 쉽게 하는 능력이 있다.
  2. 시각화는 예측되지 못한 갑작스러운 속성의 인지를 가능하게 해 준다.
  3. 데이터 자체가 가지고 있는 결함 등을 빠르고 분명하게 나타내 준다.
  4. 시각화하는 큰 크기의 데이터 특징을 이해할 수 있도록 돕는다.
  5. 시각화는 가설을 형성하는 데 도움을 준다.

시각화 단계

  • 1단계 : 에스키스(Esquisse) - 자신의 구상을 간략하면서도 빠른 속도로 그리는 단계로, 이 단계에서 개념상의 문제를 검토하고, 최종 그림의 토대를 세운다.
    1. 간략하고, 빠른 속도로 그리는 그림이므로, 최선의 해결책에 접근할 수 있을 때까지 많은 그림을 그려 볼 수 있다.
    2. 많은 그림을 그리므로 수시로 자신의 아이디어를 검토해 볼 수 있다.
    3. 최종 그림의 결과를 어느 정도 예측해 볼 수 있다.
    4. 많은 그림을 중요도에 따라 순서를 정할 수 있다.
  • 2단계 : 덮어 놓고 그리기 - 1단계에서 검토한 그림을 정리해 나가는 과정으로, 에스키스한 그림 위에 트레이싱 페이퍼를 얹고, 잘못된 부분을 수정하는 단계이다, 1단계에서 체크하지 못한 부분이 있거나 새로운 아이디어가 나타난 경우에는 1단계로 다시 피드백 한다.
  • 3단계 : 정리 - 자신의 아이디러를 제대로 전달하기 위해 보는 사람의 입장을 충분히 고려한다. 이 단계에서 디자이너가 염두해 두어야 할 사항은 고안된 디자인이 클라이언트의 입장을 충분히 반영하여야 한다는 것이다.
  • 4단계 : 완성 - 명암, 반영, 채색 등을 통하여 아이디어의 표현을 극대화 한다.

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

  • 형태적 요소 : 레이아웃 형식화 과정의 첫 단꼐로 레이아웃의 척추를 만드는 일이다. 형태적 요소로는 레이아웃의 균형을 만다는 데 있어 크게 네 가지로 대칭적 균형, 비대칭적 슌형, 결정 구조적 균형으로 나뉜다.
  • 초점선 : 형태적 요소에서 결정한 레이아웃의 균형을 바탕으로 시각 방향으로 연구된다.
  • 구성 막대 : 초점과 지원 초점을 연결하는 시각 방향에 맞추어 구성 맏대를 사용하여 레이아웃의 구헝에 대한 시각적 감성을 결정한다. 시각적 감성을 조절할 수 있는 구성 막대는 좌측과 우측에 서로 반대되는 형용사를 사용한다. 구성 막대의 좌측 끝에는 '조용함' 이 있고, 우측 끝에는 '활기참' 이 있다. 이 두조건의 가치 사이를 조정할 수 있는데, '조용함' 에 가까울 수도 잇고, '활기찬' 에 가까울 수도 있다. 구성 막대에 의한 조건에 대한 가치는 모양, 굵기, 여백, 각도로 표현할 수 있다.
  • 시각 계층 막대 : 시각적인 요소의 중요성을 지시 대상과 함축 대상을 중심으로 진행한다. 시각 계층 막대는 한 개 이상을 만드 수 있는데, 막대마다 시각적 요소를 구분한다. 시각 계층 막대는 수직으로 표현되어 막대의 위쪽 부분은 지시 대상을 표현하고, 아래 부분은 함축 대상을 표현한다.






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

그리드 시스템

페이지를 구성하는 정보를 의미있고 논리적으로 일관성있게 구성하는 것을 중요시하는 그래픽 디자이너에게 도움을 주는 정밀한 프레임워크

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

  1. 페인팅과 드로잉 : 일러스트레이터, 코렐 페인터, 하버드 그래픽스
  2. 이미지 편집 : 포토샵, 코럴 포토페인트, 페인트샵
  3. 사운드 편집 : 골드웨이브, 오디션
  4. 3D 그래픽 소프트웨어 : 3D 맥스, 트루 스페이스, 소프트이미지 3D, 마야
  5. MIDI 소프트 웨어 : cakewalk, Nuendo, Sonar
  6. 애니메이션 편집 : 3Ds max, 플래쉬, 마야
  7. 비디오 영화 제작 : 프리미어, 파이널컷, 베가스, 윈도우무비메이커, 에프터 이펙트

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

216웹 안전색(216 Web Safety color)은 환경이 달라지더라도 변하지 않는 안전한 색으로 이루어진 팔레트.

  • 단색 이미지 공간 : 색상(Hue) 보다는 색조(Tone)
    1. 선명한 색조 : 부드럽고 동적인 이미지
    2. 어두운 톤 : 딱딱한 이미지
    3. 수수한 톤 : 동적이고 딱딱한 이미지
    4. 부드러운 톤 : 부드럽고 정적인 이미지
  • 배색 이미지 공간 : 은은하고 부드러운 느낌의 배색 : 부드럽고 정적인 이미지에 위치. 밝고 선명한 느낌의 배색 : 부드럽고 동적인 이미지






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

그리드 시스템 샘플 이미지

그리드1 그리드2 그리드3





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

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

그리드4





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

이미지의 형식과 종류 정리

이미지 파일은 일정한 규약에 의해 디지털 정보로 저장되며, 데이터 파일로 포맷이 이루어진다.

  1. psd
    • 포토숍의 기본 포맷 방식이다. 이미지의 레이어, 채널, 패스 등으로 작업한 정보를 저장할 수 있으며, 수정, 보완, 재사용이 가능하도록 다양한 작업 정보를 갖지만, 용량이 커지는 단점이 있다.
  2. bmp
    • 비트맵 이지의 대포적 파일 형식으로, 입출력 속도는 빠르지만 압축하지 않은 상태로 저장한다.
  3. gif
    • 웹의 표준 그래픽 포맷으로 널리 쓰인다. 8비트의 256색상까지 표현할 수 있고, 투명한 배경의 이미지나 여러 장의 이미지를 연결하여 동영상 이미지를 만들 수도 있다.
  4. eps
    • 인쇄 등 출력을 위한 포맷 방식으로, 포스트스크립트 언러를 기바으로 한다.
  5. pdf
    • 포스트스크립트의 한 변형으로, 문서를 이미지 형태로 보여 주는 파일 형식이다. 용량이 적고 호환성이 뛰어나다.
  6. png
    • gif나 jpg보다 압축률이 좋으며, 투명한 배경을 저장할 수 있다.
  7. tiff
    • 대부붑ㄴ의 이미지 모드를 지원하며, 윈도 및 맥 환경에서 공통으로 사용할 수 있는 호환성을 가지고 있다.
  8. jpeg
    • 웹 페이지를 제작할 때 많이 사용하는 이미지 파일 형식으로, 24비트 색상을 지원하여 이미지 손실이 적고 원하는 이미지의 품질을 지정할 수 있다.

영상 파일이 종류 정리

  1. mpeg
    • 'moving picture exports group' 의 약자로 국제 표준 영상 파일이며, PC에서는 주로 .mpg확장자로 표시한다. mpeg는 일반적인 동영상 파일을 고합축하여 파일의 크기를 기획적으로 줄여 놓은 것으로 화질 면에서도 뛰어나다.
  2. avi
    • 소리와 영상이 번갈아 기록된다는 뜻을 갖고 있으여, 압축률이 높지 않아 파일 크기가 크지만 제작 시에 여러 가지 압축 코덱을 사용하여 파일 크기를 줄일 수 있다.
  3. mov
    • 맥의 표준으로 사용되는 동영상 파일이다.
  4. asf
    • 통신망에서 실기간으로 멀티미디어 서비스를 받는 데 최적화되어 있다. 또한 소리 파일로 쓰일 수 있어서 mp3와 비슷하면서도 파일 크기가 더 작다. 영상, 소리, 그림, UPL, 응용 프로그램 까지 들어 있다.
  5. divx
    • MS 사가 스트리밍용으로 mpeg4를 수정하여 만든 것으로, 영상을 줄이고 mp3를 써서 소리트랙을 줄였으나 화질이나 소리는 mpeg4와 거의 같다.

소리 파일의 종류 정리

  1. wav
    • 윈도 운영 체제의 기본 소리 파일 형식으로, 다른 저장 방식에 비해 크기가 매우 커서 효과음, 편집, 음악 CD 제작에 쓰인다
  2. mp3
    • 사람이 들을 수 있는 신호만 모아서 압축(청각 심리 모델)하여 웨이브 파일의 약 1/50로 크기를 줄였으며, 스테레어 음악용으로 많이 쓰인다.
  3. ogg
    • mp3의 유료화에 반대하여 밤들어진 공개된 소리 파일 형식이다. 가변 비트 레이트를 써서 크기를 줄이고 중저음을 잘 살려서 음질도 손색이 없다.
  4. ra
    • 인터넷에서 처음으로 스트리밍 기술을 활용한 소리 파일 형식이다.
  5. au
    • 선마이크로시스템즈 사에서 표준으로 채택한 파일 형식으로, 유닉스 운영 체제 환경과 자바 프로그래밍 언어에서 쓰인다.
  6. midi
    • 미디는 컴퓨터 전자 악기, 전자 악기 사이의 정보 교환을 위한 규격이다. 디지털 소리 신호가 들어 있는 것이 아니라 소리를 내게 하는 명령이 들어 있다. 파일 크기가 매우 작다는 장점이 있으나, 사운드 카드와 스피커 수준에 따라 음질의 차이가 있다.

레이아웃 연습







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

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.3)
이름 박수호

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

  • 사용자와 사용 환경을 고려하여 좀 더 쓰기 쉬운 제품 또는 웹사이트를 만들고자 연구하는 HSCI, UCD, MMI 등 다양한 연구 분야와 연관
  • 디자인이 잘못되거나 필수적인 기능이 결여되는 웹사이트들이 생겨나고 웹 사이트를 통해 업무 및 거래를 하게 되면서 인지적 문제를 해소하기 위한 연구가 진행.
  • 피실험자의 수해엵을 측정, 피실험자의 멘탈 모델 조사, 전문가가 적절한 척도를 사용해 사용성 관련 문제점을 발견하는 등 웹사이트의인지적 문제점을 발견하고 개선하는 방복적인 과정.

사용자 조사 방법론의 구분

통계적인 조사, 직접 인터뷰 수행, 그룹을 모아 토론을 진행 등

  • 사용자의 행동을 측정하는 방법: 다양한 측정장비를 통해 이루어진다. 마우스의 이동과 클릭 상황, 페이지에 머무른 시간 등을 측정. 혹은 시선 추적 장치를 이용하여 사용자의 시선 이동을 측정. 혹은 사이트의 로그를 기록하여 다수의 사용자에 대한 특성을 파악하고 그들의 행동패턴을 분석할 수있다.
    1. 정석적 방법 : 사용자들의 행둉을 내용에 대해서 질적으로 분석하는 방법

      가설 정보를 확보하고, 그것을 이용하여 정량 조사를 실시할 수 있다.

    2. 정량적인 방법: 그들의 행동 수치를 이용하여 양적으로 분석하는 방법

      구조화된 설문을 이용하여 조사를 진행한다.

  • 사용자의 태도를 이용하는 방법 : 그들에게 질문을 해고 대답을 듣기 위해 설문조사와 포커스 그룹등의 조사방법을 사용. 주로 마케팅 부서에서 익숙한 방법론.

사용자 조사 방법론의 종류

  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.3)
이름 박수호

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

  1. 네티즌이해
    • 보편적인 네티즌의 경향성에 대하여 이하한다. 수치로 드러난 조사 사료를 바탕으로 사이트의 목표 새당이 될 사용자에 대해 다소 추상적이더라도 그들만의 특성을 정리할 수 있다.
  2. 트렌드
    • 다지털 문화의 트렌드, 온라인 공간의 트렌드, 웹 사이트의 트렌드, 소비자 라이프 스타일 트렌드 등의 정보를 꾸준히 살펴보는 것이 필요하다.
  3. 소비자 심리
    • 웹 사이트의 사용자는 윕 사이트를 이용할 때 디본적인 이용 경험이나 요구 상항이 충족되어야만 그다음 욕구 단계로 이동한다. 즉, 기본적인 요구 사항에 대한 충족이 이루어지지 않으면 그 다음 단계로 진행되지 않고 바로 해당 웹 사이틑 나가버릴 수 있다. 소비자의 경험욕구를 다루는 이론이나 최근 소비자 동향 조사 자료를 살펴보는 것이 도움이 돤다.
  4. 벤치마킹
    • 목표 대상이 비슷한 사이트들에서 사용자 분석과 이해의 단서를 찾는다. 동일한 목표 사용자를 가진 타 사이트에서는 어떻게 접근했는지, 어떤 효과를 얻었는지에 대한 벤치마킹도 필효하다
  5. 포커스 그룹 인터뷰(Pocus Group Interview)
    • 만들고자 하는 사이트이 목묘 사용자를 명확하게 가려내야 한다. 추상적인 구군가가 아니라, 구체적인 이미지를 가진 실체들을 먼저 가려내고, 그들에게 무엇을 어떻게 물어볼 것인지를 정한다.






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

정보의 설계

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

  • 웹 사이트의 정보 구조 이해
  • 정보 내비게이션 구조의 이해 및 분석 능력
  • 웹 사이트 구척에 대한 제반 기능의 이해와 사용 윤의 운용 능력 보유

정보 설꼐한, 뤱 사이트 및 디지털디바이스 기반의 사용자에게 정보를 정확하고 원활하게 제공하기 위해 정보 체계를 세우고 설계하는 것을 의미한다

  • 정보 체계와 정보의 구조화(웹 사이트의 정보 구조화와 메뉴 구조화)
  • 내비게이션
  • 레이블링, 정보 색인, 검색 등이 포함






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

와이어 프레임

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







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

스토리보드의 구성

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

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






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

스토리보드의 화면 설게

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

스토리보드 제작







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

프로토 타입 제작

그리드4





훈련일 2017. 07. 31(월)
훈련과정명 스마트기기 UX/UI 디자인(디지털 웹표준 디자인)
교과목명 스마트기기 UX/UI 디자인(디지털 디자인) 기본
능력단위명 디자인 구성요 제작
능력단위요소 스토리보드 제작하기 (0802010404_13ㅍ1.1)
이름 박수호

웹 디자인 심미적 요소와 구성요소

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

  1. 시각화
    • 시각화란, 정보의 의미와 상호 관계를 그래프, 이미지, 일러스트레이션, 색체, 타이포그래피 등의 그래픽 요소로 나타내서 사용자들이 정보를 쉽게 찾고 이해하도록 시선을 안내하고 유도하는 것을 말한다.
  2. 아이덴티티 디자인(Identity Design)
    • 아이덴티티 디자인이란, 인식이라는 관념적인 대상을 시각화 라여 다양한 방식으로 표현해 이를 사용자에게 전달하는 조합적 수단이다.
      1. 아이덴티티 디자인은 사용자가 기억하기 쉽고 차별화되고 영속성과 유연성을 포함하여야 한다.
      2. 기업이나 발주자가 추구하는 의미와 가치를 전달하여야 한다.
      3. 심벌마크,로고, 컬러 등의 구성 요소를 갖는다.

웹 디자인의 심미적 구성 요소

  1. 페이지 레이아웃의 균형 : 페이지 그리드 시스템의 적용에 따른 안정적 균형감
  2. 웹 페이지의 대비 : 타이포그래피, 모양, 컬러, 크기, 명함 등 디자인 요소의 대비를 다양한 페이지의 목적에 맞도록 구성
  3. 웹 페이지의 강조 : 웹 페이지의 디자인 핵심 콘셉트를 타이포 그래피, 모양, 컬러, 명암 등 디자인 요소를 통해 구현
  4. 웹 페이지의 리듬 : 각 페이지의 일관성 및 차별화를 달성하기 위한 디자인 요소를 반복, 규칙성 등의 리듬 요소를 통해 구현

그리드 시스템 작업 이미지

그리드4





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

비주얼 콘셉트(Visual Concept)

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

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






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

디자인 작업

그리드4 그리드4 그리드4





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

UI(User Interface)

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

UI 구조화를 위한 원칙

  • 메타포(metaphor) : 메타포는 UI에서 사용자가 시스템이 어떻게 적용되는지 파악하고 동작할 수 있도록 하며, 시스템을 통해 사용자 학습의 양을 최소화 하는 데 사용되는 유추적 모형이다.
  • 사용자 조정(User in Control) : 사용자가 시스템을 따라근 것이 아니라 스스로 시스템을 조정하는 것처럼 느끼도록 구성한다.
  • 직접 조작(Direct manipulation) : 사용자가 동작을 진행하고, 동작에 대한 결과를 느낄 수 있도록 구성한다. 예를 들어 모니터에서 파일을 드래그할 때, 그 이동 경로를 자연스럽게 보여주는 것이다. 즉, 사용자에게 직접 조작의 인터페이스를 제공하면서 조작에 대한 피드백을 바로 제공하는 것이다.
  • 일관성(Consistency) : UI의 일관성은 사용자가 습득할 지식을 더 빠르게 배울 수 있도록 해준다. 또한 사용할 때의 실수와 오동작을 최소화하며, 인터페이스를 친숙하게 한다.
  • 피드백(Feedback) : 사용자가 수행한 동작에 대한 시스템의 피드백을 통해 사용자와 시스템의 상호 작용을 형성하는 것을 말한다. 일반적으로 시스템 응답 시간은 시스템 성능의 중요한 요소이다.
  • 멘탈 모델(Mental Model) : 사용자가 처음 보는 시스템을 접했을때 기존의 작업과 비교, 유추하여 사용 가능하게 한다.
  • 내비게이션(Navigation) : 콘텐츠, 메뉴 등의 사이 간의 이동, 버튼 간의 이동 편의를 제공한다.
  • 외양 : 사용된 폰트의 크기와 유형, 혹은 전체적인 느낌을 말한다.






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

콘텐츠 시각화의 목적

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

콘텐츠 시각화 단계

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

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의 단점 중 하나이다.1






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

매체별 특성 분석

  1. 웹(web)
    원래의 의미는 거미집으로, 하나의 사이트와 다른 사이트의 관계가 거미집처럼 복잡하게 얽혀 있기 때문에 붙여진 이름이다. 이러한 웹은 월드 와이드 웹(www)을 지칭하며, HTTP 통신 프로토콜 을 사용하여 전송과 수신을 하게 된다
    • 웹은 문자, 소리, 그림, 동영상을 통해 정보를 전달한다.
    • 웹은 관련된 정보를 서로 연결한다. 이를 하이퍼링크(Hyperlink)라 한다.
    • 웹 문서를 구성하는 기본 언어는 HTTP(Hypertext markup language)라 한다.
  2. 모바일(Mobile)
    이동성이 있는 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는 직관적인 인터페이스를 가지고 있어 누구나 사용 가능하다.
  3. 키오스크(KIOSK)
    옥외에 설치된 대형 천막이나 현관을 의미하는 터키 어에서 유래되었으며, 최근에는 기술 발전에 따라 공공장소에 설치된 무인 단말기를 의미하기도 한다. 특히 멀티미디어 스테이션(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년에 마이크로소프트 윈도 운영 체제에 이 소프트웨어를 기본으로 포함하기 시작하면서, 사용자가 급격히 증가했다. 1999년 이후에 세계에서 가장 널리 쓰이는 웹 브라우저가 되었지만, 모질라, 파이어폭스 등 대체 브라우저가 개발되면서 인터넷 익스플로러 7의 출시에도 불구하고 하락세가 계속되고 있는데, 우리나라에서는 인터넷 익스플로러의 의존도가 상대적으로 높다. 이는 온라인 뱅킹 호환성 문제와 더불어 우리나라의 웹 사이트 개발자 대다수가 여러 웹 브라우저와 운영 체제들의 호환성을 고려하 지 않고 현재 마이크로소프트사도 사용을 권장하고 있지 않는 ActiveX를 무리하게 채용하고 있기 때문이다.
  2. 모질라(Mozilla) 계열 파이어폭스
    모질라 파이어폭스(Mozilla Firefox)는 모질라 재단과 모질라 코퍼레이션이 개발한 자유 소프트웨 어 웹 브라우저로 윈도, 리눅스, 맥 OS X, 그리고 안드로이드에서 실행 가능하다.
  3. 오페라
    오페라는 노르웨이의 오페라 소프트웨어가 개발하고 있으며, 핵심 레이아웃 엔진("프레스토”)은 어도비 같은 협력 사업자들에게서 라이센스를 받았고, 어도비 크리에이티브 스위트에 통합되어 있다. 오페라는 스마트폰과 PDA를 위한 브라우저 분야에서 그들의 스몰 스크린 렌더링(Small Screen Rendering) 기술로 시장을 선도하고 있다. 오페라의 특징은 다양한 기능을 기본적으로 탑재하고 있으면서도 같은 종류의 다른 소프트웨어에 비해 작고 가벼우며, 페이지의 렌더링 속도 가 빠르다는 것이다
  4. 사파리(Safari)
    사파리는 애플사가 개발한 웹 브라우저이다. 사파리는 아이튠즈와 유사한 북마크 관리 체계를 가지고 있고, 애플의 퀵타임 멀티미디어 기술과 통합되어 있으며, 탭 브라우징 인터페이스를 사용 한다. 구글 검색 상자는 사파리 인터페이스의 기본 요소이며, 웹 주소 자동 완성과 웹 페이지 텍스트 영역의 맞춤법 검사를 지원한다
  5. 크롬(Chrome)
    구글(Google)의 크롬(Chrome)은 웹키트 레이아웃 엔진을 이용하여 개발 중인 프리웨어 웹 브라우 저이다. 크롬은 간단하고 효율적인 사용자 인터페이스를 제공하며, 현존하는 다른 웹 브라우저들 에 비해 향상된 안정성과 속도, 그리고 보안성을 갖는 것을 목표하고 있다.






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

웹 표준 사이트

웹표준사이트 웹표준사이트

한국형 웹 컨텐츠 접근성 지침

1. 인식의 용이성

  • 적절한 대체 텍스트 제공
    텍스트가 아닌 콘텐츠에는 대체 텍스트를 제공해야 한다
    1. 텍스트가 아닌 콘텐츠를 이용할 경우, 그 의미나 용도를 해당 미미지와 동등하게 인식하게 간단한 텍스트를 제공해야 한다.
    2. 단순 장식 형태의 콘텐츠는 설명을 제공 받을때 혼란을 일으킬 가능성이 있으므로 텍스트를 공백문자로 제공해야 한다.
    3. 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
  • 멀티미디어 디체 수단
    동영상, 음성 등 멀티미디어 콘텐츠를 이해할 수 있도록 대체 수단을 제공해야 한다.
    1. 멀티미디어 콘텐츠에는 자막, 대본 또는 수화를 제공해야 한다.
    2. 가장 바람직한 방법은 닫힌 자막을 오디오와 동기화시켜 제공하는 것이다
  • 명료성
    콘텐츠는 명확하게 전달되어야 한다.
    1. 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
    2. 웹 페이지에 보이는 핵심 텍스트 콘텐츠와 배경 간의 충분한 대비를 제공하여 저시력자, 색각 이상자, 고령자 등도 콘텐츠를 인식할 수 있도록 제공해야 한다
    3. 다른 감각을 통해서도 지시사항을 인식하는 데 문제가 없도록 제공해야 한다.
    4. 콘텐츠에서 제공하는 모든 정보는 색을 배제하여도 특정한 색을 구별할 수 없는 사용자나 흑백 디스플레이 사용자, 흑백 인쇄물을 보는 사용자가 해당 콘텐츠를 인식할 수 있도록 제공해야 한다.

2. 운용의 용이성

  • 입력장치 접근성
    콘텐츠는 키보드로 접근할 수 있어야 한다.
    1. 모든 기능은 키보드만으로 사용할 수 있어야 한다.
    2. Tab 키와 Shift + Tab 키에 의한 초점의 이동 순서는 논리적이며 일관성이 있어야 한다. (좌측 상단 영역에서 우측 하단 영역으로 이동)
    3. 키보드가 아닌 마우스나 태블릿 PC와 같이 정교한 조작을 요구하는 입력 장치로만 접근이 가능할 경우 손이 불편하거나 손을 자유롭게 사용할 수 없는 사용자는 접근이 불가능하기 때문에 사용자가 키보드의 버튼 입력만으로도 동등하게 사용할 수 있도록 해야 한다
    4. 키보드 내비게이션 과정에서 키보드 초점을 받은 링크, 컨트롤 및 입력 서식은 초점을 받지 않은 객체들로부터 구분될 수 있어야 한다.
  • 충분한 시간 제공
    콘텐츠를 읽고 사용하는 데 충분한 시간을 제공해야 한다.
    1. 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
    2. 시간제한이 있는 콘텐츠는 시간적인 제약이 있음을 사용자에게 반드시 알려주어야 한다. (예외의 경우에 해당하는 콘텐츠를 제외한 모든 콘텐츠는 시간제약을 회피하거나 우회할 수 있는 수단을 함께 제공)
    3. 저시력자나 지적장애인 등은 이동하거나 스크롤 되는 콘텐츠를 인지하기가 어렵다. 때문에 웹 콘텐츠는 사용자가 이동이나 스크롤을 일시 정지시키거나 지나간 콘텐츠 또는 앞으로 나타날 콘텐츠를 사용할 수 있도록 제공한다.
  • 광과민성 발작 예방
    광과민성 발작을 일으킬 수 있는 콘텐츠를 제공하지 않아야 한다.
    1. 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
    2. 깜빡임의 주기와 크기, 변화의 정도에 따라 광과민성 증후군이 있는 사용자에게 발작이나 졸도 등을 유발할 수 있으므로 깜빡이는 콘텐츠의 사용에 유의하여야 한다. (명도 대비나 채도 대비가 큰 화면이 주파수 초당 3~50회 이상으로 깜박 거리는 경우)
  • 쉬운 내비게이션
    콘텐츠는 쉽게 내비게이션 할 수 있어야 한다.
    태그 등을 부여하여 제목과 본문을 구분할 수 있도록 제공하는 것이 좋다.
    1. 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
    2. 링크 텍스트를 직관적이고 의미 있게 구성하고, 또한 주변 맥락을 통해서도 용도나 목적지를 명확히 이해 할 수 있게 제공해야 한다
    3. 제목은 불필요한 특수기호를 반복적으로 사용하지 말아야 하고 간단명료해야 한다. 그리고 해당 웹 사이트의 어느 페이지와도 다른 제목이어야 한다.
    4. 반복 영역을 화면 낭독 프로그램이 읽어주기 전 또는 읽는 도중에 사용자가 핵심 콘텐츠로 이동할 수 있는 수단을 제공해야 한다. 또, 건너뛰기 링크는 시각장애인 뿐 아니라 지체장애인도 키보드 조작 횟수를 줄일 수 있게 하는 효과적인 수단이므로 화면의 디자인측면을 고려하지 않아도 된다면 항시 보이도록 제공하는 것을 권장하고, 디자인측면을 고려해야 한다면 키보드 진입시 보이도록 제공해야 한다.

3. 이해의 용이성

  • 가독성
    콘텐츠는 읽고 이해하기 쉬워야 한다.
    1. 주로 사용하는 언어를 명시해야 한다.
    2. 화면 낭독 프로그램을 사용하는 경우, 텍스트 콘텐츠의 언어 정보를 화면 낭독 프로그램으로 제공하여 정확한 발음이 가능하도록 화면 낭독 프로그램을 제어하기도 한다. 따라서 웹 페이지를 구성하는 기본 언어는 정확히 명시해야 한다.
  • 예측 가능성
    콘텐츠의 기능과 실행결과는 예측 가능해야 한다.
    1. 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.
    2. 사용자가 인지하지 못한 상황에서 새 창, 팝업 창 등을 제공하지 않아야 한다.
  • 콘텐츠의 논리성
    콘텐츠는 논리적으로 구성해야 한다.
    1. 콘텐츠는 논리적인 순서로 제공해야 한다.
    2. 복잡한 데이터를 표로 제공할 경우, 시각장애인 등도 이해할 수 있도록 표의 이해를 돕기 위한 내용 및 구조에 대한 정보를 제공해야 한다.
    3. 화면 낭독 프로그램과 같은 보조 기기는 전체 콘텐츠를 보통 소스 코드 순서대로 풀어서 접근하므로 콘텐츠는 논리적인 순서로 제공해야한다.
  • 입력 도움
    입력 오류를 방지하거나 정정할 수 있어야 한다.
    1. 입력 서식에는 대응하는 레이블을 제공해야 한다.
    2. 입력 서식 작성 시 오류가 발생하지 않도록 미리 어떤 값을 넣어야 하는지 안내를 해주고, 만약 그래도 실수로 오류가 발생하는 경우, 어디에서 어떤 오류가 났는지 사용자가 알 수 있어야 하고, 이를 정정할 수 있는 방법을 제공해야 한다.
    3. 입력 서식을 사용할 때 현재 위치에 대한 정확한 안내, 특정한 서식으로의 빠른 이동, 정확한 맥락의 제공, 입력할 값의 범위에 대한 안내, 오류를 방지하거나 복구할 수 있는 방법 제공, 작업을 다시 하거나 취소할 수 있는 방법 제공, 충분한 시간적 여유를 제공 등을 통해 장애인의 서식 접근성을 확보할 수 있도록 해야한다.

4. 견고성

  • 문법 준수
    웹 콘텐츠는 마크업 언어의 문법을 준수해야 한다.
    1. 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
    2. 콘텐츠를 개발하는 과정에서 마크업 언어의 표준을 준수하고 가능한 한 문법적 오류나 모호성이 없도록 구현되어야 한다.
  • 웹 애플리케이션 접근성
    웹 콘텐츠는 마크업 언어의 문법을 준수해야 한다.
    1. 콘텐츠에 포함된 웹애플리케이션은 접근성이 있어야 한다.
    2. 플러그인이나 웹 애플리케이션은 반드시 보조기술 사용자가 접근할 수 있는 대체 수단을 함께 제공해야 한다.
    3. 러그인이나 웹 애플리케이션을 제공하는 경우, 플러그인이나 웹 애플리케이션은 반드시 사용자의 접근성을 지원하도록 구현해야 한다.






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

멀티미디어 개요 및 특성

  1. 멀티미디어 개요

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

  2. 멀티미디어의 특성
    1. 디지털화(Digitalization): 컴퓨터 시스템으로 제작되고 사용된다.
    2. 상호 작용(Interaction): 사용자와 대화할 수 있다.
    3. 비선형성(Non-Linear): 어느 시점이든 접근 가능하다.
    4. 통합성(Composition): 미디어를 통합할 수 있다.

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

  1. 멀티미디어 콘텐츠 개요

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

    • 표현의 가능성과 상호 작용
    • 복합적 미디어의 표현으로 구체적인 정보를 제공
    • 내용과 거래, 서비스가 내재된 신개념 콘텐츠
  2. 멀티미디어 콘텐츠의 특성
    1. 정보 수용자의 개념 변화
    2. 선형 패러다임의 변화
    3. 정보 확장의 전환
    4. 시공간 경계의 전환
    5. 개별 미디어 통합의 전환






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

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

스토리보드 작성 규칙

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

예시

웹표준사이트





훈련일 2017. 08. 14(월)
훈련과정명 스마트기기 UX/UI 디자인(디지털 웹표준 디자인)
교과목명 스마트기기 UX/UI 디자인(디지털 디자인) 기본
능력단위명 구현
능력단위요소 기능요소 구성하기 (0802010405_13v1.2)
이름 박수호






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

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

제작 프로세서

멀티미디어 저작은 문자, 그림, 소리, 동영상 등의 파일을 각각 제작한 후에 이들을 하나의 완성된 내용물로 결합하는 것. 멀티미디어 저작을 하기 위해서는 전체를 구성하는 저작 도구와 멀티미디어 내용물 재생에 필요한 재생 도구, 내용물을 제작할 수 있는 소프트웨어가 필요

  1. 웹 콘텐츠를 생성하기 위한 명시적인 용도와 목적을 지닌 편집 도구: HTML과 XML 편집기
  2. 웹 형식으로 내용을 저장할 수 있는 옵션을 제공하는 도구: 워드 프로세서나 탁상 출판 패키지
  3. 문서를 웹 형식으로 변환하는 도구 : 탁상 출판 패키지의 고유 형식으로 저장된 문서를 HTML로 변환하는 필터
  4. 멀티미디어 제작 도구, 특히 웹에서 사용하는 멀티미디어를 저작하는 도구 : 동영상 제작 및 편집 도구 모음, SMIL 저작 패키지

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

  1. 페인팅과 드로잉 소프트웨어

    일러스트레이터(Adobe Illustator), 코렐 페인터(Corel Painter), 하버드 그래픽스(Harvard Graphics), 맥드로우(MacDraw Pro), 맥페인터(MacPaint), 픽셀페인터(PixelPaint Pro), 윈도즈 드로우(Windows Draw) 등

  2. 이미지 편집 소프트웨어

    포토숍(Adobe Photoshop), 코렐 포토페인트(Corel Photo-Paint), 페인트숍(Jasc Paintshop), Ulead Photo Impact

  3. 사운드 편집 소프트웨어

    골드웨이브(Goldwave), 오디션(Adobe Audition)

  4. 3D 그래픽 소프트웨어

    3D 스튜디오 맥스(Studio Max), 트루 스페이스(True Space), 소프트이미지 3D(SoftImage 3D), 마야 (MAYA)

  5. MIDI 소프트웨어

    Cakewalk, Nuendo, Sonar

  6. 애니메이션 편집 소프트웨어

    3Ds MAX, Adobe Flash, MAYA

  7. 비디오 영화 제작 소프트웨어

    Adobe Premiere, Avid Xpress, Final Cut Pro, Pinacle Studio, Sony Vegas, Windows Movie Maker, Adebe Effects 등







훈련일 2017. 08. 17(목)
훈련과정명 스마트기기 UX/UI 디자인(디지털 웹표준 디자인)
교과목명 스마트기기 UX/UI 디자인(디지털 디자인) 기본
능력단위명 구현
능력단위요소 개발요소 혐업하기 (0802010405_13v1.2)
이름 박수호

애니메이션 기법

디지털 애니메이션은 스크립트와 스토리보드를 통해 줄거리를 만들고, 이를 컴퓨터를 사용하여 배경과 등장인물을 제작한 후 합성하는 과정이다. 대부분 전통적 애니메이션의 원리를 컴퓨터에 적용하여 제작한다

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

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

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

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

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

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

  4. 모핑(Morphing) 기법 :

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

동영상 파일 종류 및 정의

  1. AVI :

    오디오 데이터와 비디오 데이터가 내부적으로 번갈아 기록된다는 의미를 갖고 있는‘Audio Video Interleaved’의 약자로, 윈도에 포함되는 미디어 플레이어를 비롯하여 모든 동영상 플레이어에서 기본적으로 지원되는 대표적인 동영상 포맷이다.

  2. MPEG :

    영상과 오디오 압축에 관한 국제표준화기구(ISO)에서 제정한 형식으로, 해상도 및 용도에 따라 다음과 같이 구분한다.

    1. MPEG-1: 320×240 저해상도 디지털 저장 매체
    2. MPEG-2: 720×480 방송, 통신, DVD 영상
    3. MPEG-4: 720×480 고압축, 저노이즈 기술로 웹용
    4. MPEG-7: 720×480 영상 검색
  3. ASF(Advanced Streaming Format) :

    다운로드와 동시에 재생이 가능한 방식으로 인터넷 방송, 동영상 강좌 등에 사용한다.

  4. WMV(Windows Media Video) :

    ASF 와 동일한 용도이나, MPEG4 v7 코덱을 사용하여 mp3와 음질이 비슷하지만 mp3보다 적은 용량이 사용된다.

  5. MOV :

    매킨토시의 퀵타임 무비에서 사용한다.

  6. MP4 :

    MPEG 파일 규격의 한 종류로, 최근 휴대용 제품에서 자주 사용된다. 고화질을 유지하면서도 압축 률이 큰 장점을 갖고 있다.







훈련일 2017. 08. 18(금)
훈련과정명 스마트기기 UX/UI 디자인(디지털 웹표준 디자인)
교과목명 스마트기기 UX/UI 디자인(디지털 디자인) 기본
능력단위명 구현
능력단위요소 개발요소 혐업하기 (0802010405_13v1.2)
이름 박수호

객체 지향 언어

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

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

멀티미디어 프로그램

  1. MPC의 MME :
    ‘Microsoft Multimedia Extensions’의 약자로 MS-Windows를 위한 소프트웨어 성분과 서비스를 제공한다. 멀티미디어 개발자를 위한 API(Application Program Interface)를 지원하며, 다양한 미디어 타입에 대한 명세를 제공한다. MME의 멀티미디어 관련 파일로는 텍스트 파일, 이미지 파일, 오디오 파일, 비디오 파일, 구조화 된 멀티미디어를 위한 파일이 있다
  2. Visual C++:
    Microsoft사의 윈도 프로그래밍이 용이한 윈도 응용 개발 환경이라고 할 수 있다. 기존의 C와 Windows API를 이용한 윈도 프로그램에 비해 프로그램 개발 과정이 단순하고 시간도 짧아졌다.
  3. Visual Basic:
    MicroSoft사가 개발한 프로그래밍 언어이자 그래픽 프로그래밍 환경을 제공하는 최초의 프로그램이다. 프로그래머가 대화상자나 버튼을 클릭함으로써 작업을 수행할 수 있으 며, 점차 다른 프로그램의 표준이 되어 가고 있는 추세이다
  4. JAVA:
    Sun Microsystemsd의 고스링 팀이 개발한 객체 지향 프로그래밍 언어로, 다양한 장치 및 환경에서의 응용 프로그램 개발에 사용된다. 자바 언어는 단순하며 객체 지향적이고, 정적 타입, 컴파일 방식, 하드웨어 플랫폼에서 독립적, 다중 스레드 방식, 소형 언어 등의 특징을 갖고 있다.
  5. ActionScript:
    타임라인을 이용한 애니메이션 무비에 상호 작용이 포함된 멀티미디어 애니메이 션을 제작할 수 있도록 도와주는 언어로, 마우스나 키보드를 누르는 등의 이벤트를 발생시키면 무비에 지정한 액션에 의해 실행되도록 지정한다.
  6. 웹 기반 멀티미디어 프로그래밍
    서버 측 스크립트 언어: CGI, ASP, ASP.NET, PHP, JSP, Python, Ruby 등
    클라이언트 측 스크립트 언어: Javascript, VBScript, HTML, CSS, DHTML, SGML, XML, VRML, ActiveX






훈련일 2017. 08. 21(월)
훈련과정명 스마트기기 UX/UI 디자인(디지털 웹표준 디자인)
교과목명 스마트기기 UX/UI 디자인(디지털 디자인) 기본
능력단위명 구현
능력단위요소 개발요소 혐업하기 (0802010405_13v1.2)
이름 박수호

협업의 정의와 구분

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







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

디자인 산출물

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

리뷰(reviews)

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







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

수정보완 작업의 우선순위

수정,보완 작업을 수행할 때 적용할 주관적인 등급을 말한다. 수정,보완 작업의 우선순위 등급은 일반적으로 아래와 같이 정한다.
이 등급은 다른 항목과 비교한 해당 항목에 대한 주관적인 등급이므로, 높은 값(상)이 주어진 수정,보완 항목을 낮은 값(하)이 주어진 수정․보완 항목보다 먼저 작업하여야 한다.

  • 상 : 해당 항목을 해결하지 않으면 제품을 출시할 수 없으므로, 가능한 한 빨리 처리해야 한다
  • 중 : 해당 항목을 해결하지 않으면 제품을 출시할 수 없지만, 즉시 처리하지 않아도 된다.
  • 하 : 리소스, 시간 및 위험 정도를 기반으로 해당 항목의 작업 수행 시기를 선택적으로 결정할 수 있다.






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

배색

두 가지 이상의 색상을 잘 어울리도록 배치하는 일이다.배색은 웹 디자인, 제품 디자인, 환경 디자인, 인테리어, 광고․포스터 등 다양한 분야에서 활용되는데, 배색에 따라 그 느낌이 다양하게 나타난다

색상 요소

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

  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.1)
이름 박수호

디지털 콘텐츠의 특징

  1. 비파괴성(항상성) :
    디지털 자료는 아날로그 자료같이 세월이 흘러도 변하지 않고, 항상 똑같은 품질을 갖는다.
  2. 변형 가능성 :
    파괴적 의미의 변형이 아니라, 항상 디지털화되어 있기 때문에 별도의 비용을 추가하지 않아도 자유롭게 정보의 추가, 삭제, 수정이 가능하다
  3. 보관의 편리성 :
    보관 비용이 저렴하고, 공간적인 낭비가 거의 없다.
  4. 결합성 :
    여러 종류의 디지털 콘텐츠끼리 쉽게 결합하여 더 좋은 콘텐츠를 만들 수 있다.
  5. 재생산성 :
    한번 생산된 디지털 콘텐츠는 무한 반복 재생산이 가능하다. 디지털화 된 음악, 동영상, 애니메이션 등은 데이터베이스에 저장되어 사용자의 요구에 따라 언제든지 재생산이 가능하다.
  6. 상호 작용성 :
    정보 이용자가 동시에 정보 제공자가 되는 상호 작용이 가능하다.
  7. 편집성 :
    디지털 콘텐츠는 새로운 내용의 추가와 수정이 용이하다. 따라서 텍스트, 음악, 그림, 동영상, 애니메이션 등의 각종 미디어가 통합된 형태로 가공되어 새로운 멀티미디어를 창출할 수 있다.
  8. 비소멸성 :
    디지털 콘텐츠는 한번 생산되면 형태나 품질을 반영구적으로 유지할 수 있다. 따라서 필요에 따라 언제든지 원하는 형태로 사용이 가능하며, 수많은 사용자가 동시에 사용하더라도 디지털 콘텐츠 자체는 감소되지 않기 때문에 디지털 경제 발전의 원동력이 되고 있다.






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

반응형 웹 디자인

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

적응형 웹 디자인

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

HTML5이란?

HTML 5는 HTML 4.01, XHTML 1.0, DOM Level 2 HTML에 대한 차기 표준 제안 버전으로, 월드 와이드 웹의 마크업 언어이다. 최신 멀티미디어 콘텐츠를 브라우저에서 쉽고 용이하게 볼 수 있게 하는 것을 목적으로 한다.

CSS란?

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

사용자 경험 디자인이란?

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

웹 접근성이란?

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

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






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

쿠기

하이퍼텍스트의 기록서(HTTP)의 일종으로, 인터넷 사용자가 어떤 웹 사이트를 방문할 경우에 그 사이트가 사용하고 있는 서버에서 인터넷 사용자의 컴퓨터에 설치하는 작은 기록 정보 파일을 일컫는다. HTTP 쿠키, 웹 쿠키, 브라우저 쿠키라고도 한다. 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹 사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다.

세션

클라이언트와 서버 간의 상태를 유지하기 위한 일반적인 방법으로 세션이라는 개념을 이용한다. 따라서 이 세션 ID는 클라이언트가 재접속하였을 때 해당 클라이언트를 구분할 수 있는 수단이 된다







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

자바스크립트(JavaScript)

객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 사이트에서 많이 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다

jQuery

브라우저 호환성이 있는 HTML 속 자바스크립트 라이브러리이며, 클라이언트 사이드 스크립트 언어를 단순화할 수 있도록 설계되었다. jQuery는 오늘날 가장 인기 있는 자바스크립트 라이브러리 중 하나이다. 자유 오픈 소프트웨어이다. jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한 jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다







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

데이터베이스

여러 응용 시스템들의 통합된 정보들을 저장하여 운영할 수 있는 공용 데이터들의 묶음이다. 여러 사람들이 공유하고 사용할 목적으로 통합․관리되는 정보의 집합이다. 즉, 몇 개의 자료 파일을 조직적으로 통합하여 자료 항목의 중복을 없애고 자료를 구조화하여 기억시켜 놓은 자료의 집합체라고 할 수 있다

SQL

데이터 모델은 데이터를 조작하기 위한 연산 집합을 가져야 한다. 왜냐하면 그것은 데이터베이스 구조와 제약 조건을 정의하기 때문이다. 다시 말해, 관계 데이터 모델 연산 집합(a set of operations)은 관계 대수로 표현되고, 그 연산은 사용자에게 여러 질의를 가능하게 한다.

웹 서버

웹 브라우저 클라이언트로부터 HTTP 요청을 받아들이고, HTML 문서와 같은 웹 페이지에서 흔히 찾아볼 수 있는 자료 콘텐츠에 따라 HTTP에 반응하는 컴퓨터 프로그램을 말한다. 웹 서버의 주된 기능은 웹 페이지를 클라이언트에게 전달하는 것이다. 만약, 이를 수행할 수 없으면 오류 메시지로 응답한다. 웹 서버의 주된 기능이 콘텐츠를 전달하는 것이지만, 클라이언트 로부터 콘텐츠를 받는 것 자체도 해당 기능에 속한다. 이러한 기능은 파일의 업로드를 포함한 웹 폼 제출에 쓰인다.







훈련일 2017. 09. 01(금)
훈련과정명 스마트기기 UX/UI 디자인(디지털 웹표준 디자인)
교과목명 스마트기기 UX/UI 디자인(디지털 디자인) 기본
능력단위명 수정보완
능력단위요소 산출물 정리하기 (0802010407_13v1.1)
이름 박수호

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

  1. 프로젝트 수행 활동 작업을 계층화 및 상세화하여 프로젝트의 범위를 정의하는 방법으로, 직무 위주의 활동 가계도(Family Tree)라고도 하며,“프로젝트 요소인 산출물 중심의 분류 체계로 프로젝트의 전체 범위를 구성하고 정하는 것”으로 정의한다
  2. 패키지를 중심으로 담당자와 일정이 관리되므로, 3~4레벨 단위로 구체화되는 코드 체계(Code of Accounts)로 단계가 구분되어 산출물의 체계적 관리 기준이 만들어진다
  3. 작업 분류 체계에 따른 산출물 수집 목적
    • 프로젝트 단계를 분할하고 정의하는 과정에서 프로젝트에 대한 이해 개선
    • 일정 및 산출물의 예측 정확도 개선
    • 세분화된 작업 기준으로 산출물 수집 작업을 할당할 수 있어 효과적 관리 가능
    • 표준화된 프로젝트 절차 활용에 의한 의사소통 개선
    • 작업의 논리 관계 파악과 진행 중인 산출물의 효율적 통제 가능
    • 전사적 자료 축적 및 효율적 관리
  4. 프로젝트 관리 계획
    • 상향식(bottom-up) 방법 : 프로젝트에 수행될 작업을 작은 단위로 나누고 각 작업에 소요될 기간이나 노력을 예측하여 독립된 작업 사이에 병행하여 수행할 경우 단축되는 기간을 계산하 면 전체 소요 기간이나 노력을 구할 수 있다
    • 하향식(top-down) 방법 : 프로그램의 크기와 노력 사이의 관계를 나타내는 수학적 모델을 사용하여 시스템의 규모를 과거의 경험이나 구현 언어, 재사용 비율 등을 고려하여 예측하고, 이를 비용 모델(cost model)에 대입하여 노력이나 기간을 산출한다

개발 프로세스

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

  1. 폭포수 모델(waterfall model) : 단계별 승인을 거쳐, 순차적-하향식으로 개발이 진행되는 고전적 생명 주기 모델
    장점 : 이해하기 쉽고, 단계별 검토․승인과 체계적 관리 용이
    단점 : 요구 사항 도출이 어렵고, 상위 단계의 작업이 지연되면 하위 단계의 작업이 계속 누적 지연될 가능성이 있으며, 개발 중후반 문제점 발견 시 대처가 곤란
  2. 프로토타입 모델(prototype model) : 사용자의 의견(feedback)이 중요한 모델이며, 핵심적 기능을 샘플로 만들어 평가한 후 본 개발을 진행하는 점진적 개발 방법
    장점 : 요구 사항 도출 용이, 의사소통 향상
    단점 : 사용자의 오해(완제품), 폐기 시 비용 손해
  3. 점증적 개발 모델(incremental model) : 점증적(기능별로 릴리스 하기), 반복적(릴리스 할 때마다 기능완성도 높이기)방법으로 운영
    장점 : 점진적 개발로 실패 위험 감소, 테스트가 용이함
    단점 : 기능적 분해의 난이도 증가. 선제적인 명확한 요구사항 선결
  4. 나선형 모델(spiral model) : 위험 관리를 중요시하는 모델
    증분(Incremental) : 시스템을 분할하여 병행,순차 개발
    진화(Evolutional) : 프로토타입을 재사용 또는 진화시켜 개발
  5. V모델 : 테스트와 검증을 강조하는 모델
    장점 : 모든 단계에 검증과 확인 과정이 있어서 오류를 줄일 수 있음
    단점 : 생명 주기의 반복을 허용하지 않아 변경하기가 쉽지 않음
  6. 일정 중심 설계 모델(design to schedule model) : 출시 일정을 정확히 맞추기 위한 모델
    장점 : 초기 단계에서 중요한 기능들을 설계하고 구현한 후, 상대적으로 덜 중요한 기능은 나중에 구현함으로써 일정조절이 가능함
    단점 : 우선순위가 낮아 출시에 포함되지 않을 기능의 분석과 설계 등에 시간 낭비 발생






훈련일 2017. 09. 04(월)
훈련과정명 스마트기기 UX/UI 디자인(디지털 웹표준 디자인)
교과목명 스마트기기 UX/UI 디자인(디지털 디자인) 기본
능력단위명 수정보완
능력단위요소 산출물 정리하기 (0802010407_13v1.1)
이름 박수호

분류의 기본 원칙

  1. Inventory 개념의 문서 Life Cycle 관리를 통해 표준화, 디지털화한다.
  2. 각 산출물은 산출물의 제작 흐름에 따른 ID를 부여하여, 이전 단계 산출물 관련 ID로 산출물 간의 연관성을 추적하기 쉽도록 구성한다

산출물 체계화

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






훈련일 2017. 09. 05(화)
훈련과정명 스마트기기 UX/UI 디자인(디지털 웹표준 디자인)
교과목명 스마트기기 UX/UI 디자인(디지털 디자인) 기본
능력단위명 수정보완
능력단위요소 프로젝트 결과 보고서 작성하기 (0802010407_13v1.1)
이름 박수호

산출물의 선택과 가치 분석

  1. 디자인 직무수행에 유의미한 데이터의 추출이 가능한 산출물은 프로젝트 전 과정에서 다양하게 생길 수 있는데, 고객의 요구에 대한 객관적인 증거로서 효력을 갖는 자료를 잘 선택하고 단순 나열보다는 가공성에 중점을 둔 시각으로 정리한다.
  2. 유의미한 산출물의 분석 프로젝트 전 과정에서 발생한 산출물의 내용을 살펴, 보고서에 포함할 지 여부를 판단한다.
  3. 중간 단계에서 이미 사용된 데이터는 향후 업데이트와 완료까지의 변화된 사항을 중심으로 통합적 데이터로 정리한다






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

업그레이드와 유지 보수

  1. 디자인 측면 : 클라이언트의 요구가 가장 많은 부분으로, 부분 이미지 교체나 페이지 추가, 계절 분위기 조정, 콘텐츠 변경과 교체, 팝업 등이 해당한다. 디자인팀 영역이다
  2. 프로그램 측면 : 사이트 운영 관련 부분 개정, 흐름 조정, 간단한 기능 추가 등이 해당한다. 개발팀 영역이다
  3. 필요성 : 사용자에게 변화를 통한 신선함과 관심을 증폭시켜 사이트의 발전을 꾀하거나 관리자 의 편의를 위한 기능 개선을 위해 필요하다






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

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

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

  1. 작업의 전체 과정을 문서로 정리하되, 디지털 디자인은 선형적 작업의 특성을 갖고 있으므로, 순서에 맞춰 정리하는 것이 중요하다
  2. 작업을 완료한 후 관련된 것들을 정리하고, 다음 작업을 준비할 수 있도록 하는 데 그 의의가 있다. 산출물과 작업 내용을 정리한 Work Table을 만들면 유용하게 사용할 수 있다






훈련일 2017. 09. 11(월)
훈련과정명 스마트기기 UX/UI 디자인(디지털 웹표준 디자인)
교과목명 스마트기기 UX/UI 디자인(디지털 디자인) 기본
능력단위명 수정보완
능력단위요소 프로젝트 결과 보고서 작성하기 (0802010407_13v1.1)
이름 박수호

프로젝트 최종보고

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

  1. 프레젠테이션 작성 프로세스
  2. 발상의 전환, 아이디어 창출(Logical Thinking), 정보 수집과 가공 능력, 효과적인 도구 활용,프레젠테이션 스킬, 발표력

프레젠테이션의 절차

  1. 기획 : 프레젠테이션의 방향 설정, 목표 기술, 자료 및 정보 수집, 목차 설정, 핵심 항목 선정 및 논리 구조화, 세부 콘텐츠(내용) 레이아웃 등이 포함된다.
  2. 준비 : 사전 점검 사항 확인(목적 구체화, 청중 분석, 장소 확인, 시간 확인), 효과적인 전달 매체 선정, 자료 작성(파워포인트 등 이용), 자료 시각화(비주얼 자료 만들기) 등이 있다.
  3. 실시 : 서론(도입), 본론(전개), 결론(맺음), 질의응답 등으로 이루어진다.
  4. 평가 : 결과에 대한 자체 평가, 개선안 도출, 상대방(청중 또는 상대 회사)으로부터의 피드백이 실시된다

전략 이이디어 도출 기법

  1. 표적 집단 면접(Focus Group Interview) : 자유로운 발언 분위기 조성이 필요하므로, 진행자가 중요하다. 명확한 주제를 제시하여 5~8명의 전문가 그룹으로 진행한다.
  2. 브레인스토밍(brainstorming) : 양적으로 많은 아이디어를 창출하는 데 유리하다. 다른 사람의 의견에 대한 비판을 금해야 하며, 다른 사람의 아이디어를 확대․개선․표절하는 것이 가능하고, 적극적 참여자 확보가 필수적이다
  3. 의사 결정 권리 도구 : 권고, 승인, 실행, 투입, 결정의 역할 중 한 가지씩을 개인에게 각각 부여하여 진행하며, 질 높은 의사 결정과 신속한 성과 창출에 유리하다
  4. 스노카드(snow card) : 집단 의사 결정 기법으로, 참여자들이 포스트잇에 기록한 1개씩의 아이디어를 그룹화하여 우선순 위를 설정하거나 그룹화를 반복하여 합의점을 도출한다.
  5. PINC(positive, intriguing, negative, concerning) 여과기 모형 : 힘의 장 분석 기법의 확대 형식이며, 긍정, 호기심 유발, 부정, 걱정 끼치는 것을 의미한다. 브레인스 토밍 등과 함께 사용할 수 있다.
  6. 힘의 장 분석(force field analysis) : 찬성과 반대의 모든 힘을 명확히 하여 의사 결정을 지원한다. 사실, 자료, 브레인스토밍, 설문 조사 등의 결과를 근거로 추출하거나 힘의 강도를 결정할 수 있다
  7. 스캠퍼(scamper) : 체크 리스트법 기반의 문제 해결법이다. SCAMPER는 대체, 결합, 변경, 수정, 다른 용도로 사용, 제거, 거꾸로 힘의 첫 글자를 연결한 것이다
  8. 시네틱스(synetics : 친숙하지 않은 것을 친숙한 것으로 전환해 보는 유추 활동으로, 사물에 대한 새로운 관점의 이해와 다양한 아이디어를 찾아낸다.
  9. 상징 유추(symbolic analogy) : 서로 모순이 되는 것처럼 보이는 두 단어 속에서 비논리적 사고를 사용하는 아이디어 발상법이다
  10. CAF(consider all factors) : 주어진 문제 상황에서 모든 요인들을 고려하여 생각하도록 돕는 사고 기법으로, 사고 과정에서 놓친 것들을 재고려하도록 하여 생각의 범위를 넓혀 준다.
  11. PMI(Plus, Minus, Interest) : 제안된 아이디어를 다각적 측면에서 분석하고 평가하여 새롭고 개선된 아이디어를 생성하는 방법 이다. 한 측면을 평가할 경우, 다른 측면에 대해서는 생각하지 않도록 한다
  12. TRIZ : 기술 모순의 문제 분석에서 시작하여 모델 분석, 물리적 모순 기술, 자원 활용, 지식 기반, 문제 재구성, 모순 제거 원리 검토, 해법의 가능성 검토, 문제 해결 경로 분석의 9단계를 거치는 구조적 기법이다






훈련일 2017. 09. 12(화)
훈련과정명 스마트기기 UX/UI 디자인(디지털 웹표준 디자인)
교과목명 스마트기기 UX/UI 디자인(디지털 디자인) 기본
능력단위명 수정보완
능력단위요소 프로젝트 결과 보고서 작성하기 (0802010407_13v1.1)
이름 박수호

모니터링 대상요소

  1. 콘텐츠,스타일
  2. 표준, 유효성
  3. 검색 엔진 노출, 검색 엔진 최적화, 지표
  4. 기능
  5. 보안/위험
  6. 성능
  7. 기타

데이터베이스

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







훈련일 2017. 09. 13(수)
훈련과정명 스마트기기 UX/UI 디자인(디지털 웹표준 디자인)
교과목명 스마트기기 UX/UI 디자인(디지털디자인) 프로젝트 제작
능력단위명 디지털디자인 사후관리
능력단위요소 클라이언트 요청사항 반영하기(0802010408_13v1.2)
이름 박수호

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

  1. 전화예절
  2. 인사 태도와 표현
  3. 공손한 어법 및 표준어 사용
  4. 내용 요약 및 메모
  5. 단정한 몸차림
  6. 정확한 자기표현과 내용 전달
  7. 대화 내용 파악과 정리

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

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






훈련일 2017. 09. 14(목)
훈련과정명 스마트기기 UX/UI 디자인(디지털 웹표준 디자인)
교과목명 스마트기기 UX/UI 디자인(디지털디자인) 프로젝트 제작
능력단위명 디지털디자인 사후관리
능력단위요소 프로젝트 내부 공유 리뷰하기(0802010408_13v1.3)

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

  1. 계획
    • 소프트웨어는 시스템의 일부분이므로 사용자의 문제를 정의, 전체 시스템 이 갖추어야 할 기본 기능과 성능 요건을 파악, 이를 개발하고자 하는 소프트웨어의 기본 요구로 전환시킨다.
    • 이 단계에서 타당성 분석(feasibility study)도 이뤄지며, 그 결과는 시스템 정의서(system definition)로 문서화되어야 하며, 개발 계획서(project plan)에 포함된다.
  2. 분석
    • 사용자의 문제를 구체적으로 이해(understand)하고, 소프트웨어가 담당해야 하는 정보 영역 (information domain)을 정의
    • 사용자의 기능, 성능, 신뢰도 등에 대한 요구는 요구 사양서 (requirements specifications)로 문서화
    • 의사소통 기술이 필수적
  3. 설계
    • 소프트웨어의 구조(architecture)와 그 성분을 명확하게 밝혀 구현을 준비하는 단계
    • 외부 시스템 및 사용자와의 인터페이스를 중시하는 외부 설계(external design)와 시스템 내부를 설계하는 내부 설계(internal design)로 분류
    • 전체적 구조와 데이터 알고리즘을 설계하는 단계를 분리해 기본 설계(architecture design)와 상세 설계(detailed design)로 분류
    • 설계 단계 에서의 결과는 설계 사양서(design specifications)로 산출되어야 한다. 이 산출물과 요구 사양서를 토대로 사용자 지침서(user's manual)와 시험 계획서(test plan)가 작성
  4. 구현
    • 프로그래밍을 하는 단계
    • 각 모듈의 코딩과 디버깅이 이루어지고, 그 결과를 검증하는 단위 시험(unit test) 혹은 모듈 시험(module test)을 실시
  5. 시험
    • 개발된 모듈들을 통합시키며 시험하는 통합 시험(integration test), 완성된 시스템으로서 요구 사항 을 완벽히 관철시켰는가를 알아보는 시스템 시험(system test)
    • 장에서 검증해 보는 인수 시험(acceptance test) 등
  6. 운용 및 유지 보수
    • 소프트웨어를 직접 이용하고 이용상에 나타나는 문제점을 수정하거나 새로운 기능을 추가해 보다 유용한 소프트웨어로 발전시키는 단계

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

  1. 지원형템플릿, 모범 사례, 교육, 그리고 다른 프로젝트에서 습득한 교훈과 가용 정보를 제공하여 프로젝트 를 지원
  2. 통제형다양한 수단을 통해 지원을 제공하고 준수 사항을 요구,프로젝트 관리 기본 구조 또는 방법론을 적용하고, 특정 템플릿과 양식, 도구를 사용하며 거버넌스에 따르도록 하는 것이 포함
  3. 지시형프로젝트를 직접 관리하면서 프로젝트 통제를 지휘, PMO는 기업의 전략적 프로젝트로부터 도출된 데이터와 정보를 통합하여 프로젝트 목표의 성취도 현황을 평가, PMO는 조직의 포트폴리오, 프로그램, 프로젝트, 기업 측정 시스템(예: BSC) 간 연락 창구 성격 을 가진다.






훈련일 2017. 09. 15(금)
훈련과정명 스마트기기 UX/UI 디자인(디지털 웹표준 디자인)
교과목명 스마트기기 UX/UI 디자인(디지털디자인) 프로젝트 제작
능력단위명 디지털디자인 사후관리
능력단위요소 데이터베이스 관리하기(0802010408_13v1.4)

데이터베이스 관리 시스템(DBMS : database management system)

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

데이터 백업의 종류

  • 핫 백업(Hot backup) : 데이터베이스를 셧다운하지 않고 백업하는 방식으로, 일반적인 경우는 적용되지 않고 자신의 데이터베이스를 Archive Mode로 운영하는 경우에만 가능하다.
  • 콜드 백업(Cold backup) : 데이터베이스의 운영 상태가 close 상태에서 수행하는 백업으로, 데이터파일, Redo log 파일, 컨트롤 파일을 백업할 수 있다.
  • 물리적 백업(Physical backup) : 파일을 한 위치에서 다른 위치로 복사하는 물리적인 복제이다.
  • 풀 백업(Full backup) : 매일 데이터 전체를 백업한다.
  • 증분 백업(Incremental backup) : 변경된 부분만을 백업하다가 일정 기간이 지나면 풀 백업하는 것으로, 일요일 기준으로 월요일에서 토요일까지 변경된 부분만 백업하고, 일요일에 풀 백업한다.
  • 변경 백업(Differential backup) : 이전 백업 내용과 변경된 부분을 모두 백업하는 방식으로, 화요일에 백업한다면 월요일과 화요일에 변한 데이터를 모두 백업하고, 토요일에 백업한다. 월, 화, 수, 목, 금요일까지 5일간 변경된 데이터를 백업한다.
  • 합성 백업(Synthetic backup) : 풀 백업 + 증분 백업