SlideShare a Scribd company logo
발전 window movie maker            제안서  강민혜 강현석 박충만 신선아
:contents  1 . Window              1 ) 목적 분석          movie            2 ) 기존의 인터페이스 분석           maker          3 ) 문제점 4 ) 문제에 대한 근거   2 .Step for    new movie       maker  1 ) 새 디자인의 주요 고려사항  2 ) 벤치마킹  3.  New         movie maker            detail   상단 바   동영상 작업창 3) 소스 창 & 프리뷰 4) 타임라인 일부
3        1 . Window movie maker
 1 . Window         movie               목적 분석  maker 1 – 1 . 목적분석 “ Windows Movie Maker로 재미있는 홈 비디오를 만들 수 있습니다.끌어서 놓기 동작 몇 번만으로 손쉽게 홈 비디오가 만들어집니다. 새로운 사용자 인터페이스, 마법사, 장면 전환, 효과, 타이틀 등의 새로운 기능으로 가정에서도 더욱 쉽게 동영상을 제작할 수 있습니다. ” “  전문가 수준의 동영상 제작할 수 있습니다.영화나 tv에서 늘 보던 전환과 효과를 넣어 보십시요. 보다 높은 수준의 작업을  해보십시요. Windows Movie Maker에는 고정 스크린 비디오로부터 클레이메이션에 이르기까지 여러분의 창의력을 마음껏 발휘할 수 있는 도구와 기능이 들어 있습니다. “                                                                          -http://windows.microsoft.com . 1 – 2 인터분석.  1 – 3 . 문제점 1 – 4 . 문제의 근거
 1 . Window                movie               목적 분석           maker “ Windows Movie Maker은 동영상 편집 작업을 할 수 있는 어플리케이션 중 하나이다. 앞의 제작진의 설명에서 알 수 있듯이 윈도우 무비메이커의 가장 큰 목적은 사용자들의 동영상 편집 작업이 쉽게 이루어 지도록 돕는 것이다. 여기서 작업이 쉽게 이루어지게 목적한다는 것은 크게 두 가지 의미가 있다. 첫 번째는 무비 메이커의 사용방법이 직관적으로 사용자들에게 보여진다는 것이고, 두 번째는 작업하는 동안 작업이 어려움 없이 진행 될 수 있다는 다는 것이다.      하지만 동영상 작업이 쉽게 진행 되기 때문에 작업 수준의 질이 낮아 진다는 의미는 아니다. 홈 비디오 정도의 메이킹을 할 수 있을 만큼의 질적 작업 환경을 제공하는 것 역시 Windows Movie Maker 가 추구 하는 목적이다.  특히 Windows Movie Maker 가 홈비디오 정도의 작업이 이해하기 쉽게 진행되기를 목적한다는 점을 고려해 볼 때 주 사용층을 전문가 보다는 일반인들 특히 초보자를 고려 했다는 것을 알 수 있다.  그렇다면 결국 무비메이커의 가장 핵심이 되는 목적은 초보자들도 쉽게 동영상 편집 작업을 하도록 돕는 것이다.  1 – 1 . 목적분석 1 – 2 . 인터분석 1 – 3 . 문제점 1 – 4 . 문제의 근거
 1 . Window                movie               기존 인터페이스 분석            maker 1 . 동영상 작업창 제일 왼쪽에 위치한 창이다.  초보자들의 가이드라인이 될 수 있게 끔소스를 불러오고, 동영상을 편집하고, 저장을 하는 세 가지 큰 작업순서를 제시한다. . 비디오 효과 , 비디오 전환효과, 자막 생성의 동영상 편집작업을 시작할 수 있다.  단, 자르고 붙이는 컷 작업, 오디오에 대한 작업은이곳이 아니라 타임라인에서  가능하다. .  1 – 1 . 목적분석 1 – 2 인터분석 1 – 3 문제점  1 – 4 . 문제의 근거
 1 . Window                movie               기존 인터페이스 분석            maker 2 . 소스창 화면 중간에 위치한 창으로 불러온 비디오, 사진, 오디오소스가 이곳에 표시된다.  불러온 소스들을 클릭하면 프리뷰  윈도우에서 미리보기 할 수 있으며 타임라인으로는 드래그해서 넣는다. 비디오 효과 작업을 할 때에는 위치하고 있던 소스가 사라지고 그 자리에 비디오 효과들이 나타나며, 역시 드래그로 비디오에 효과를 적용할 수 있다.  1 – 1 . 목적분석 1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점
 1 . Window                movie               기존 인터페이스 분석            maker 3. 프리뷰 윈도우 프리뷰 윈도우에서는 소스와 편집하고 있는 동영상을 재생해서 볼 수 있다.  사용자의 시선이동을 고려해 오른쪽에 위치해 있으며 창의 크기는 조절 가능하다. ( 프리뷰윈도우가 커지면 소스창은 줄어 들게 된다. ) 왼쪽아래의 버튼은 순서대로 재생, 정지 , 뒤로 이전프레임 , 다음프레임 , 앞으로 이다. 오른쪽 아래의 이 아이콘은 동영상을 자르는 버튼이고이 버튼은 동영상 캡쳐 버튼이다.  1 – 1 . 목적분석 1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점
 1 . Window                movie            기존 인터페이스 분석            maker 1 – 1 . 목적분석 1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점 4 . 타임라인  타임라인은 작업하고 있는 동영상을 시간에 따라 소스 별로 분해 해서 표시 한다. 위쪽의 아이콘은 차례대로 오디오 비율 조절 버튼, 나래이션 녹음버튼, 타임라인 확대 축소 버튼, 되감기, 재생 버튼이다.  그 아래 가로 라인은 동영상의 시간을 표시해 주는 줄이며 그 아래  세로라인에는순서대로 비디오  전환, 오디오,  오디오/음악, 제목 오버레이순으로 배치가 되어 있다. 각각의 클립 에서 오른쪽 버튼을 누르면 효과를 적용할 수 있다. 단 자막생성은 동영상 작업창에서만이루어 질 수 있다.
 1 . Window                movie               기존 인터페이스의 문제점             maker 1 . 사용자의 자연스런 액션의 흐름이 방해 받는다.       부적절한 네이밍과 상징을 사용하고 있다.     3 . 동영상 작업에 대한 하위 단계가 부적절하다. 4 . 자막에 대한 개념이 부적절하게 분류되었다.  5 . 필요한 기능이나 도구를 가시화 하지 않아 사용자의  작업 단계가 늘어나게 된다. 6 . 불필요한 도구나 반복되는 도구의 가시화로 미적 구성의 완전성이 떨어진다. 1 – 1 . 목적분석 1 – 2 . 인터분석 1 – 3 문제점 .  1 – 4 . 문제의 근거
 1 . Window                movie               기존 인터페이스의 문제점             maker 1 . 사용자의 자연스런 액션 흐름이 방해 받는다.   1 – 1 . 목적분석 1 – 2 . 인터 분석 1 – 3 . 문제점 동영상 편집기에서 가장 주된 액션은 동영상을 편집하는 것이다. 여기서 동영상을 편집한다는 것의 의미는 가장 먼저 동영상을 자르고 붙이는 컷편집, 장면효과 편집 , 오디오 편집 , 자막편집이란 액션을 포함하고 있다.  그런데 윈도우 무비메이커에선 이 주된 액션이 행해지는 공간이 통일 되어 1 – 4 . 문제의 근거 있지 않다. 실제로 컷편집과 오디오 작업은 타임라인에서 진행되고, 비디오효과와 자막에 대한 작업은 왼쪽의 동영상 작업 창에서 진행된다.     때문에 사용자는 동영상 작업이란 액션을 진행할 때 계속해서 위아래 창을 오가야 한다. 특히나 초보자들의 동영상 편집 과정을 관찰해 본 결과, 비디오 작업, 오디오 작업,  자막작업, 컷 작업이 일정 순서대로 진행되는 것이 아니라 복합적으로 진행되기 때문에 작업의 동선이 어수선해지고 사용자들은 헤메게 된다. 때문에  작업 환경이 분할되어 있는 것은 작업 액션이 매끄럽게 진행되는 것을 방해한다.
 1 . Window                movie               기존 인터페이스의 문제점             maker 2 . 부적절한 네이밍과 상징을 사용하고 있다.  윈도우 무비 메이커에서는 몇 가지의 부적절한 네이밍과 상징으로 사용자들의 혼란을 초래하는 것이 있다.  첫 번째로      이 아이콘의 경우 동영상을 자르는 프레임 분할 아이콘으로 프리뷰윈도우아래에 위치해 있다. 하지만 초보자들은 이 아이콘을 이해하는데 어려움을 겪는다. 초보자들에게 프레임을 자른다는것의 이미지는 마치 가위로 동영상의 중간을 자르는 것 같은 이미지다.  하지만 위의 아이콘은 초보자들이 가지고 있는 이미지와 일치하거나 비슷하지도 않기 때문에 사용자들은 혼란을 겪는다. 게다가 자르기 작업이 이루어 1 – 1 . 목적분석 1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점 지는 타임라인에  버튼이 위치해 있는 것이 아니라 프리뷰윈도우 아래 위치하고 있기에 더욱 의미를 판단해 내기란 쉽지 않다. 이 버튼 역시마찬가지 예시로 부적절한 상징을 사용한다. 이 버튼은 비디오 자체음과 사용자가삽입한 음악의 비율을 조절하는 아이콘인데 그러한 상징을 아이콘이 나타내고 있지 못한다.  게다가 네이밍 마저 부적절한데 ‘오디오 수준 설정’이라는 네이밍을 사용해 이름도 상징도 사용자의 이해를 돕는데 도움이 되지 못한다.  이러한 부적절한 네이밍의 예로 제목 오버레이= 자막 , 오디오 = 비디오 자체음, 오디오/음악 = 삽입음악 , 비디오 캡처= 소스 불러오기 등이 있다.
 1 . Window                movie               기존 인터페이스의 문제점             maker 3 . 동영상 작업의 하위 단계가 부적절 하다.  1 – 1 . 목적분석 왼쪽의 그림은 동영상 작업창을 보여주고 있는데 이 창의 기능은 초보 사용자들에게 동영상 편집 작업에 대한 가이드라인을 제시해 주고 이 순서를 따라 작업의 완료까지 이끌고 있다.  그런데 1 ) 소스를 불러오고 ( 비디오  캡처라고네이밍 되어 있다.) 동영상을 완료하기 까지 사이에 일어나는동영상 편집작업에는 무엇이 있을까?  크게 1 ) 동영상을 자르고 붙이는 작업  2 ) 비디오효과나 비디오 전환효과를 주는 작업  3 )소리를 설정하는 작업 4 ) 자막을 넣는 작업  1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점 이 있다. 그런데 우측에 무비메이커에서 동영상 편집 작업의 하위 개념에는 1 ) 동영상 컷 편집 작업과 3 ) 소리를 설정하는 작업이 빠져있다. 따라서  동영상 작업 창을 가이드라인으로 따라가며 편집하던 초보자들은 동영상의 완료까지 자연스럽게 마칠 수 없게 된다. 결국 가이드라인으로써의 기능은 실패한다.
 1 . Window                movie               기존 인터페이스의 문제점             maker 4 . 자막에 대한 개념이 부적절하게 분류되었다.  1 – 1 . 목적분석 기존 윈도우 무비 메이커에서 자막을 생성하는 것은 비디오 효과와 같은 수준의 분류에 포함되어 있다. 즉 자막을 만드는 것을 비디오 효과와 같은 레벨로 본 것이다. 하지만 자막은 비디오, 사진, 음악과 같이 소스로 보아야 한다. 그 이유는 실제 클립의 형태로 만들어 질 수 있기 때문이다. 실제로도 비디오, 사진 오디오 등과 함께 타임라인에서는 소스로 표시 되고 있다. 또 사용자가 포토샵에서 작업한 자막 파일을 불러오는 경우도 있을 수 있기에 더욱 효과보다는 소스로 분류되어야 한다. 따라서 자막을 생성하는 탭은 소스를 불러오는 단계의 하위 수준으로 들어가야 하는 것이 맞는 것으로 보인다.  1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점
 1 . Window                movie               기존 인터페이스의 문제점   maker 5 . 필요한 기능이나 도구를 가시화 하지 않아 사용자의 작업 단계가 늘어나게 된다.  이러한 예시는 크게 세가지 정도 있는데 첫 번째로 창을 나가는 기본적인 표시가 없다는 것이다. 오른쪽에는 비디오 효과 작업을 하는 동안 중간에 위치하는 소스창이 비디오 효과창으로 변한 것이다. 이때 사용자가 비디오창을 끄고 다시 소스창을 보려면 어떻게 해야 하야 할지 바로 생각이 나는가?  그렇지 않다. 이러한 문제는       이러한 간단한 창닫기 버튼만 추가하면 해결 될 수 있는 문제인데 이 버튼이 없어 사용자들은 헤매게 된다.  1 – 1 . 목적분석 1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점
 1 . Window                movie               기존 인터페이스의 문제점   maker 이러한 문제의 또 다른 예로 소스창에 불려온 소스가 분류되어 보여지지 않는다는 것이다. 때문에 많은 소스를 불러와 작업할 경우 사용자는 자신이 필요한 소스를 찾아 수없이 스크롤을내려봐야 한다.  마지막으로 비디오 소스에서 필요한 부분을 정해 타임라인으로 가져올 수 있는 시작점 끝점 설정이 없다는 것이다.  만약 시작점 끝점이 있다면 사용자는 자신이 필요한 부분만을 설정해 가져와 편집하면 된다 하지만 그렇지 못한 현재의 경우 시작지점의 프레임을 나누고 끝 지점의 프레임을 나눠서 필요 없는 나머지 부분을 잘라내고 필요한 부분을 남기는 방법을 사용해야 한다.  .  1 – 1 . 목적분석 1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점
 1 . Window                movie               기존 인터페이스의 문제점             maker 6 . 불필요한 도구나 반복되는 도구의 가시화로 미적 구성의 완전성이 떨어진다. 일반적으로 사용자가 처음 새로운 어플리케이션을 접하게 될 때  그들은 그 어플리케이션의 외적 디자인을 보고 그곳에서 이루어질 수 있는 작업수준에 대한 암시를 받게 된다. 또 이 암시를 통해 자신들이 행하고자 하는 작업이 이 어플리케이션과 어울릴지 판단한다. 이 생각을 윈도우 무비 메이커에 적용해 본다면 윈도우 무비메이커의 주사용자인 초보자들은 복잡하고 디테일한 디자인의 편집기 보다는   1 – 1 . 목적분석 1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점        쉽고 심플한 디자인을 볼 때 자신들이 하려는 액션과 적절한 어플리케이션을 만났다고 생각한.다.  그런데 윈도우 무비메이커에는 사용빈도가 낮은 도구들도 모두 화면에 표시되어 있고, 상단의 작업 표시줄에는 하단 창에 표시되어 있는 도구들이 또다시 배치되고 있어 중복되고 깔끔하지 못한 인상을 준다. .  때문에 차라리 반복되는 도구들을 정리해 사용자들에게 깔끔하고 초보자들의 액션과 어울릴만한 디자인으로 재구성할 필요가 있다.
18 2 . Step for new movie maker
2 . Window                movie           새로운 movie maker의 주요 고려사항           maker 2-1 고려사항 새로 디자인한 무비메이커는 크게 세가지 고려사항을 중점으로 디자인 되었다.  1 ) 사용자 액션의 자연스런 흐름을 고려한다.  인터페이스 디자인의 가장 중요한 것은 사용자의 목적을 이루기 위한 액션이 순조롭게 진행되도록 구현되어야 하는 것이다. 하지만기존의 윈도우 무비 메이커의 경우 사용자의 액션에 대한 고려가 부족했다. 작업환경이 분할되어 액션의 흐름이 끊긴 다던지, 필요한 구조와 도구가 부족해 사용자의 욕구를 충족시키지 못했다. 때문에 우리는 사용자의 액션과 욕구를 고려하는 것을 최우선으로 두었다.  2 ) 사용자의 수준에서 모든 것을 고려한다. 두 번째로 중요시 생각한 것은 사용자에 대한 이해이다. 무비메이커의 경우 주 사용층이 초보자 수준의 일반인들이기에 이들의 이해도에 맞춰 인터페이스를 구현하고 , 사용에 대한 부담감을 줄인 쉬운 인터페이스를 디자인 하기 위해 노력하였다.  3 ) 분명한 개념 정립이 인터페이스 안에 구현된다.   마지막으로 중요하게 초점을 둔 것은 제작자, 우리의 동영상 편집에 대한 생각을 확실히 하고 이것을 인터페이스에 구현하도록 한 것이다. 분명하고 논리적으로 정리된 생각이 구현된 인터페이스는 마치 잘 조직된 연설과 같이 사용자들을 우리의 새로운 무비메이커로 이끌 수 있을 것이다.  2 -2 벤치마킹
 1 . Step for new movie               벤치마킹  maker 아이패드2의 iMovie 아이무비는 여느 편집어플리케이션과 달리 아이패드, 아이폰에서만 구현되는 어플리케이션이다. 따라서 키보드, 마우스 등 다른 입력장치가 없는 만큼 심플하면서도 기능에 대한 접근성이 높아야 한다. 실제로 아이무비는 원터치와투터치만으로 편집이 가능하다. 무비메이커 역시 이러한 기능에 대한 접근성과 심플함을 높이는 것에 중점을 맞추었다. 2-1 고려사항 2-2 벤치마킹
21 3 . New window movie maker detail
“수정 포인트” 1) 상단 바  2) 동영상 작업창3) 소스 창 4) 프리뷰   5) 타임라인 일부
“수정된디자인” 23
“상단 바”  이미 동영상 작업 창에 나열되어 있는 기능과 효과가 도구 창에 다시 배열되어 있다.   같은 작업 환경이 좀 더 딱딱하게 나와 있는 것.          “동영상 작업 창 이랑 같은 거만 있길래 그 담부턴 사용 안 했는데..?”                                                                              - 강민혜          “작업 하는 동안 마우스가 아래쪽에서만 왔다 갔다 했어.”                                                                              - 신선아  조원 3명을 포함 주변인들에게 물어봤을 때 위와 같은 의견을 보인 초보자는 5명  5명으로 나타났고 이에 우리는 상단 바의 사용도가 현저히 낮을 거라 판단, 상단 바 필요하지 않다고 생각했다.    다음과 같이 변경된 상단 바를 확인 할 수 있다.
“간소화 및 이미지화” ▼
“상단 바[DO SIMPLIFY] ” ,[object Object]
동영상 작업환경에 배치되어 있던 도움말 기능을 삭제 하고 상단 바에 배치하였다.
위 두 가지의 작업을 통해, 단순히도구 창을 단순 간소화 하는 것 뿐만 아니라초보자에게 ‘무비메이커가 가진 기능에 한계가 있음을 암시’시킬 수 있을 거라 기대하고 있다.26
“동영상 작업창” ,[object Object]
동영상 작업창을 없애고 작업창 안에서 실행되던 여러 기능들을 타임라인과 소스창에 골고루 배분하였다.
대다수의 윈도우 사용자들이  처음 사용하는 프로그램일 경우 어떠한 액션이 발생할 것을 기대하고 무심코 ‘더블클릭’하는  것을 볼 수 있었다.
이를 바탕으로 알고리즘 적으로 한번의 클릭에 의해 일어나던 화면 효과 적용을 타임라인으로 배치하여 자연스러운 더블클릭과정에서 효과창을 발견함으로써 사용자의 능동적 참여를 유도하였다.,[object Object]
② 소스 구분 배치 ,[object Object],29
③ 클립화 하기 ,[object Object],30
④더블 클릭 액션 ,[object Object],31
▼ 32 ④ 더블클릭액션 - 화면효과적용 ▼
33 ④ 더블클릭액션 - 화면전환적용 ▼
⑤자막  ‘자막 한 문장 넣으려고 계속 이거랑 저거랑 왔다 갔다 중…’                                                            - 강민혜 ‘자막 삽입 어떻게 한 거야? 아~ 제목/제작진 만들기었어? ’                                                            - 신선아  ‘…………………………’                                                            - 박충만 ,[object Object]
또한 자막의 위치 조정을 보다 쉽게 할 수 있도록 원하는 화면에 직접 커서를 위치시켜 자막 작업을 할 수 있도록 개선 하였다.
제목 또는 제작진 만들기 라는 이름이 자막과 빨리 연관 되지 않아 이름을 자막으로 변경 하였다.34
⑤자막 - MOVIE MAKER 자막 작업 순서 35
⑤자막 - 변경된 자막추가 36

More Related Content

Similar to 기획서 최종본

다음 팟인코더 개선방안(최종)
다음 팟인코더 개선방안(최종)다음 팟인코더 개선방안(최종)
다음 팟인코더 개선방안(최종)hahahiho
 
Vid 2012 1
Vid 2012 1Vid 2012 1
Vid 2012 1
수정 김
 
UID DOIT 기말 발표
UID DOIT 기말 발표UID DOIT 기말 발표
UID DOIT 기말 발표
한솜 김
 
유아이디 두잇 기말 발표
유아이디 두잇 기말 발표유아이디 두잇 기말 발표
유아이디 두잇 기말 발표
한솜 김
 
9th.lecture.ui.design
9th.lecture.ui.design9th.lecture.ui.design
9th.lecture.ui.design
Jeongeun Kwon
 
Fedevtalk 15 jds
Fedevtalk 15 jdsFedevtalk 15 jds
Fedevtalk 15 jds
NAVER Engineering
 
131 deview 2013 yobi-채수원
131 deview 2013 yobi-채수원131 deview 2013 yobi-채수원
131 deview 2013 yobi-채수원NAVER D2
 
영상 스터디 3회차
영상 스터디 3회차영상 스터디 3회차
영상 스터디 3회차
준혁 이
 
동영상제작가이드북
동영상제작가이드북동영상제작가이드북
동영상제작가이드북
수정 김
 
역기획 클로바 마이탭
역기획 클로바 마이탭역기획 클로바 마이탭
역기획 클로바 마이탭
DavidKwon38
 
GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기
GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기
GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기
GDG Korea
 
오래가는 Ux 디자인 파이널 1414905 이서현
오래가는 Ux 디자인 파이널  1414905 이서현오래가는 Ux 디자인 파이널  1414905 이서현
오래가는 Ux 디자인 파이널 1414905 이서현
서현 이
 
Endisk
EndiskEndisk
UI아트 작업자를 위한 언리얼엔진4 UMG #1
UI아트 작업자를 위한 언리얼엔진4 UMG #1UI아트 작업자를 위한 언리얼엔진4 UMG #1
UI아트 작업자를 위한 언리얼엔진4 UMG #1
Hong-Gi Joe
 
Android Developer JeongJaeyun
Android Developer JeongJaeyunAndroid Developer JeongJaeyun
Android Developer JeongJaeyun
jaeyunjeong1
 
About matinee
About matineeAbout matinee
About matinee
TonyCms
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
JinKwon Lee
 
7th.lecture.middle.pt.guideline
7th.lecture.middle.pt.guideline7th.lecture.middle.pt.guideline
7th.lecture.middle.pt.guideline
Jeongeun Kwon
 
Sencha 사용후기
Sencha 사용후기Sencha 사용후기
Sencha 사용후기Younuk Park
 
허니컴 태블릿 디자인
허니컴 태블릿 디자인허니컴 태블릿 디자인
허니컴 태블릿 디자인
Sang-min Lee
 

Similar to 기획서 최종본 (20)

다음 팟인코더 개선방안(최종)
다음 팟인코더 개선방안(최종)다음 팟인코더 개선방안(최종)
다음 팟인코더 개선방안(최종)
 
Vid 2012 1
Vid 2012 1Vid 2012 1
Vid 2012 1
 
UID DOIT 기말 발표
UID DOIT 기말 발표UID DOIT 기말 발표
UID DOIT 기말 발표
 
유아이디 두잇 기말 발표
유아이디 두잇 기말 발표유아이디 두잇 기말 발표
유아이디 두잇 기말 발표
 
9th.lecture.ui.design
9th.lecture.ui.design9th.lecture.ui.design
9th.lecture.ui.design
 
Fedevtalk 15 jds
Fedevtalk 15 jdsFedevtalk 15 jds
Fedevtalk 15 jds
 
131 deview 2013 yobi-채수원
131 deview 2013 yobi-채수원131 deview 2013 yobi-채수원
131 deview 2013 yobi-채수원
 
영상 스터디 3회차
영상 스터디 3회차영상 스터디 3회차
영상 스터디 3회차
 
동영상제작가이드북
동영상제작가이드북동영상제작가이드북
동영상제작가이드북
 
역기획 클로바 마이탭
역기획 클로바 마이탭역기획 클로바 마이탭
역기획 클로바 마이탭
 
GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기
GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기
GKAC 2014 Nov. - The Beautiful Design Collection 살펴보기
 
오래가는 Ux 디자인 파이널 1414905 이서현
오래가는 Ux 디자인 파이널  1414905 이서현오래가는 Ux 디자인 파이널  1414905 이서현
오래가는 Ux 디자인 파이널 1414905 이서현
 
Endisk
EndiskEndisk
Endisk
 
UI아트 작업자를 위한 언리얼엔진4 UMG #1
UI아트 작업자를 위한 언리얼엔진4 UMG #1UI아트 작업자를 위한 언리얼엔진4 UMG #1
UI아트 작업자를 위한 언리얼엔진4 UMG #1
 
Android Developer JeongJaeyun
Android Developer JeongJaeyunAndroid Developer JeongJaeyun
Android Developer JeongJaeyun
 
About matinee
About matineeAbout matinee
About matinee
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
 
7th.lecture.middle.pt.guideline
7th.lecture.middle.pt.guideline7th.lecture.middle.pt.guideline
7th.lecture.middle.pt.guideline
 
Sencha 사용후기
Sencha 사용후기Sencha 사용후기
Sencha 사용후기
 
허니컴 태블릿 디자인
허니컴 태블릿 디자인허니컴 태블릿 디자인
허니컴 태블릿 디자인
 

기획서 최종본

  • 1. 발전 window movie maker 제안서 강민혜 강현석 박충만 신선아
  • 2. :contents 1 . Window 1 ) 목적 분석 movie 2 ) 기존의 인터페이스 분석 maker 3 ) 문제점 4 ) 문제에 대한 근거 2 .Step for new movie maker 1 ) 새 디자인의 주요 고려사항 2 ) 벤치마킹 3. New movie maker detail 상단 바 동영상 작업창 3) 소스 창 & 프리뷰 4) 타임라인 일부
  • 3. 3 1 . Window movie maker
  • 4. 1 . Window movie 목적 분석 maker 1 – 1 . 목적분석 “ Windows Movie Maker로 재미있는 홈 비디오를 만들 수 있습니다.끌어서 놓기 동작 몇 번만으로 손쉽게 홈 비디오가 만들어집니다. 새로운 사용자 인터페이스, 마법사, 장면 전환, 효과, 타이틀 등의 새로운 기능으로 가정에서도 더욱 쉽게 동영상을 제작할 수 있습니다. ” “ 전문가 수준의 동영상 제작할 수 있습니다.영화나 tv에서 늘 보던 전환과 효과를 넣어 보십시요. 보다 높은 수준의 작업을 해보십시요. Windows Movie Maker에는 고정 스크린 비디오로부터 클레이메이션에 이르기까지 여러분의 창의력을 마음껏 발휘할 수 있는 도구와 기능이 들어 있습니다. “ -http://windows.microsoft.com . 1 – 2 인터분석. 1 – 3 . 문제점 1 – 4 . 문제의 근거
  • 5. 1 . Window movie 목적 분석 maker “ Windows Movie Maker은 동영상 편집 작업을 할 수 있는 어플리케이션 중 하나이다. 앞의 제작진의 설명에서 알 수 있듯이 윈도우 무비메이커의 가장 큰 목적은 사용자들의 동영상 편집 작업이 쉽게 이루어 지도록 돕는 것이다. 여기서 작업이 쉽게 이루어지게 목적한다는 것은 크게 두 가지 의미가 있다. 첫 번째는 무비 메이커의 사용방법이 직관적으로 사용자들에게 보여진다는 것이고, 두 번째는 작업하는 동안 작업이 어려움 없이 진행 될 수 있다는 다는 것이다. 하지만 동영상 작업이 쉽게 진행 되기 때문에 작업 수준의 질이 낮아 진다는 의미는 아니다. 홈 비디오 정도의 메이킹을 할 수 있을 만큼의 질적 작업 환경을 제공하는 것 역시 Windows Movie Maker 가 추구 하는 목적이다. 특히 Windows Movie Maker 가 홈비디오 정도의 작업이 이해하기 쉽게 진행되기를 목적한다는 점을 고려해 볼 때 주 사용층을 전문가 보다는 일반인들 특히 초보자를 고려 했다는 것을 알 수 있다. 그렇다면 결국 무비메이커의 가장 핵심이 되는 목적은 초보자들도 쉽게 동영상 편집 작업을 하도록 돕는 것이다. 1 – 1 . 목적분석 1 – 2 . 인터분석 1 – 3 . 문제점 1 – 4 . 문제의 근거
  • 6. 1 . Window movie 기존 인터페이스 분석 maker 1 . 동영상 작업창 제일 왼쪽에 위치한 창이다. 초보자들의 가이드라인이 될 수 있게 끔소스를 불러오고, 동영상을 편집하고, 저장을 하는 세 가지 큰 작업순서를 제시한다. . 비디오 효과 , 비디오 전환효과, 자막 생성의 동영상 편집작업을 시작할 수 있다. 단, 자르고 붙이는 컷 작업, 오디오에 대한 작업은이곳이 아니라 타임라인에서 가능하다. . 1 – 1 . 목적분석 1 – 2 인터분석 1 – 3 문제점 1 – 4 . 문제의 근거
  • 7. 1 . Window movie 기존 인터페이스 분석 maker 2 . 소스창 화면 중간에 위치한 창으로 불러온 비디오, 사진, 오디오소스가 이곳에 표시된다. 불러온 소스들을 클릭하면 프리뷰 윈도우에서 미리보기 할 수 있으며 타임라인으로는 드래그해서 넣는다. 비디오 효과 작업을 할 때에는 위치하고 있던 소스가 사라지고 그 자리에 비디오 효과들이 나타나며, 역시 드래그로 비디오에 효과를 적용할 수 있다. 1 – 1 . 목적분석 1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점
  • 8. 1 . Window movie 기존 인터페이스 분석 maker 3. 프리뷰 윈도우 프리뷰 윈도우에서는 소스와 편집하고 있는 동영상을 재생해서 볼 수 있다. 사용자의 시선이동을 고려해 오른쪽에 위치해 있으며 창의 크기는 조절 가능하다. ( 프리뷰윈도우가 커지면 소스창은 줄어 들게 된다. ) 왼쪽아래의 버튼은 순서대로 재생, 정지 , 뒤로 이전프레임 , 다음프레임 , 앞으로 이다. 오른쪽 아래의 이 아이콘은 동영상을 자르는 버튼이고이 버튼은 동영상 캡쳐 버튼이다. 1 – 1 . 목적분석 1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점
  • 9. 1 . Window movie 기존 인터페이스 분석 maker 1 – 1 . 목적분석 1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점 4 . 타임라인 타임라인은 작업하고 있는 동영상을 시간에 따라 소스 별로 분해 해서 표시 한다. 위쪽의 아이콘은 차례대로 오디오 비율 조절 버튼, 나래이션 녹음버튼, 타임라인 확대 축소 버튼, 되감기, 재생 버튼이다. 그 아래 가로 라인은 동영상의 시간을 표시해 주는 줄이며 그 아래 세로라인에는순서대로 비디오 전환, 오디오, 오디오/음악, 제목 오버레이순으로 배치가 되어 있다. 각각의 클립 에서 오른쪽 버튼을 누르면 효과를 적용할 수 있다. 단 자막생성은 동영상 작업창에서만이루어 질 수 있다.
  • 10. 1 . Window movie 기존 인터페이스의 문제점 maker 1 . 사용자의 자연스런 액션의 흐름이 방해 받는다. 부적절한 네이밍과 상징을 사용하고 있다. 3 . 동영상 작업에 대한 하위 단계가 부적절하다. 4 . 자막에 대한 개념이 부적절하게 분류되었다. 5 . 필요한 기능이나 도구를 가시화 하지 않아 사용자의 작업 단계가 늘어나게 된다. 6 . 불필요한 도구나 반복되는 도구의 가시화로 미적 구성의 완전성이 떨어진다. 1 – 1 . 목적분석 1 – 2 . 인터분석 1 – 3 문제점 . 1 – 4 . 문제의 근거
  • 11. 1 . Window movie 기존 인터페이스의 문제점 maker 1 . 사용자의 자연스런 액션 흐름이 방해 받는다. 1 – 1 . 목적분석 1 – 2 . 인터 분석 1 – 3 . 문제점 동영상 편집기에서 가장 주된 액션은 동영상을 편집하는 것이다. 여기서 동영상을 편집한다는 것의 의미는 가장 먼저 동영상을 자르고 붙이는 컷편집, 장면효과 편집 , 오디오 편집 , 자막편집이란 액션을 포함하고 있다. 그런데 윈도우 무비메이커에선 이 주된 액션이 행해지는 공간이 통일 되어 1 – 4 . 문제의 근거 있지 않다. 실제로 컷편집과 오디오 작업은 타임라인에서 진행되고, 비디오효과와 자막에 대한 작업은 왼쪽의 동영상 작업 창에서 진행된다. 때문에 사용자는 동영상 작업이란 액션을 진행할 때 계속해서 위아래 창을 오가야 한다. 특히나 초보자들의 동영상 편집 과정을 관찰해 본 결과, 비디오 작업, 오디오 작업, 자막작업, 컷 작업이 일정 순서대로 진행되는 것이 아니라 복합적으로 진행되기 때문에 작업의 동선이 어수선해지고 사용자들은 헤메게 된다. 때문에 작업 환경이 분할되어 있는 것은 작업 액션이 매끄럽게 진행되는 것을 방해한다.
  • 12. 1 . Window movie 기존 인터페이스의 문제점 maker 2 . 부적절한 네이밍과 상징을 사용하고 있다. 윈도우 무비 메이커에서는 몇 가지의 부적절한 네이밍과 상징으로 사용자들의 혼란을 초래하는 것이 있다. 첫 번째로 이 아이콘의 경우 동영상을 자르는 프레임 분할 아이콘으로 프리뷰윈도우아래에 위치해 있다. 하지만 초보자들은 이 아이콘을 이해하는데 어려움을 겪는다. 초보자들에게 프레임을 자른다는것의 이미지는 마치 가위로 동영상의 중간을 자르는 것 같은 이미지다. 하지만 위의 아이콘은 초보자들이 가지고 있는 이미지와 일치하거나 비슷하지도 않기 때문에 사용자들은 혼란을 겪는다. 게다가 자르기 작업이 이루어 1 – 1 . 목적분석 1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점 지는 타임라인에 버튼이 위치해 있는 것이 아니라 프리뷰윈도우 아래 위치하고 있기에 더욱 의미를 판단해 내기란 쉽지 않다. 이 버튼 역시마찬가지 예시로 부적절한 상징을 사용한다. 이 버튼은 비디오 자체음과 사용자가삽입한 음악의 비율을 조절하는 아이콘인데 그러한 상징을 아이콘이 나타내고 있지 못한다. 게다가 네이밍 마저 부적절한데 ‘오디오 수준 설정’이라는 네이밍을 사용해 이름도 상징도 사용자의 이해를 돕는데 도움이 되지 못한다. 이러한 부적절한 네이밍의 예로 제목 오버레이= 자막 , 오디오 = 비디오 자체음, 오디오/음악 = 삽입음악 , 비디오 캡처= 소스 불러오기 등이 있다.
  • 13. 1 . Window movie 기존 인터페이스의 문제점 maker 3 . 동영상 작업의 하위 단계가 부적절 하다. 1 – 1 . 목적분석 왼쪽의 그림은 동영상 작업창을 보여주고 있는데 이 창의 기능은 초보 사용자들에게 동영상 편집 작업에 대한 가이드라인을 제시해 주고 이 순서를 따라 작업의 완료까지 이끌고 있다. 그런데 1 ) 소스를 불러오고 ( 비디오 캡처라고네이밍 되어 있다.) 동영상을 완료하기 까지 사이에 일어나는동영상 편집작업에는 무엇이 있을까? 크게 1 ) 동영상을 자르고 붙이는 작업 2 ) 비디오효과나 비디오 전환효과를 주는 작업 3 )소리를 설정하는 작업 4 ) 자막을 넣는 작업 1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점 이 있다. 그런데 우측에 무비메이커에서 동영상 편집 작업의 하위 개념에는 1 ) 동영상 컷 편집 작업과 3 ) 소리를 설정하는 작업이 빠져있다. 따라서 동영상 작업 창을 가이드라인으로 따라가며 편집하던 초보자들은 동영상의 완료까지 자연스럽게 마칠 수 없게 된다. 결국 가이드라인으로써의 기능은 실패한다.
  • 14. 1 . Window movie 기존 인터페이스의 문제점 maker 4 . 자막에 대한 개념이 부적절하게 분류되었다. 1 – 1 . 목적분석 기존 윈도우 무비 메이커에서 자막을 생성하는 것은 비디오 효과와 같은 수준의 분류에 포함되어 있다. 즉 자막을 만드는 것을 비디오 효과와 같은 레벨로 본 것이다. 하지만 자막은 비디오, 사진, 음악과 같이 소스로 보아야 한다. 그 이유는 실제 클립의 형태로 만들어 질 수 있기 때문이다. 실제로도 비디오, 사진 오디오 등과 함께 타임라인에서는 소스로 표시 되고 있다. 또 사용자가 포토샵에서 작업한 자막 파일을 불러오는 경우도 있을 수 있기에 더욱 효과보다는 소스로 분류되어야 한다. 따라서 자막을 생성하는 탭은 소스를 불러오는 단계의 하위 수준으로 들어가야 하는 것이 맞는 것으로 보인다. 1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점
  • 15. 1 . Window movie 기존 인터페이스의 문제점 maker 5 . 필요한 기능이나 도구를 가시화 하지 않아 사용자의 작업 단계가 늘어나게 된다. 이러한 예시는 크게 세가지 정도 있는데 첫 번째로 창을 나가는 기본적인 표시가 없다는 것이다. 오른쪽에는 비디오 효과 작업을 하는 동안 중간에 위치하는 소스창이 비디오 효과창으로 변한 것이다. 이때 사용자가 비디오창을 끄고 다시 소스창을 보려면 어떻게 해야 하야 할지 바로 생각이 나는가? 그렇지 않다. 이러한 문제는 이러한 간단한 창닫기 버튼만 추가하면 해결 될 수 있는 문제인데 이 버튼이 없어 사용자들은 헤매게 된다. 1 – 1 . 목적분석 1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점
  • 16. 1 . Window movie 기존 인터페이스의 문제점 maker 이러한 문제의 또 다른 예로 소스창에 불려온 소스가 분류되어 보여지지 않는다는 것이다. 때문에 많은 소스를 불러와 작업할 경우 사용자는 자신이 필요한 소스를 찾아 수없이 스크롤을내려봐야 한다. 마지막으로 비디오 소스에서 필요한 부분을 정해 타임라인으로 가져올 수 있는 시작점 끝점 설정이 없다는 것이다. 만약 시작점 끝점이 있다면 사용자는 자신이 필요한 부분만을 설정해 가져와 편집하면 된다 하지만 그렇지 못한 현재의 경우 시작지점의 프레임을 나누고 끝 지점의 프레임을 나눠서 필요 없는 나머지 부분을 잘라내고 필요한 부분을 남기는 방법을 사용해야 한다. . 1 – 1 . 목적분석 1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점
  • 17. 1 . Window movie 기존 인터페이스의 문제점 maker 6 . 불필요한 도구나 반복되는 도구의 가시화로 미적 구성의 완전성이 떨어진다. 일반적으로 사용자가 처음 새로운 어플리케이션을 접하게 될 때 그들은 그 어플리케이션의 외적 디자인을 보고 그곳에서 이루어질 수 있는 작업수준에 대한 암시를 받게 된다. 또 이 암시를 통해 자신들이 행하고자 하는 작업이 이 어플리케이션과 어울릴지 판단한다. 이 생각을 윈도우 무비 메이커에 적용해 본다면 윈도우 무비메이커의 주사용자인 초보자들은 복잡하고 디테일한 디자인의 편집기 보다는 1 – 1 . 목적분석 1 – 2 . 수용자분석 . . 1 – 3 . 인터분석 1 – 4 . 문제점 쉽고 심플한 디자인을 볼 때 자신들이 하려는 액션과 적절한 어플리케이션을 만났다고 생각한.다. 그런데 윈도우 무비메이커에는 사용빈도가 낮은 도구들도 모두 화면에 표시되어 있고, 상단의 작업 표시줄에는 하단 창에 표시되어 있는 도구들이 또다시 배치되고 있어 중복되고 깔끔하지 못한 인상을 준다. . 때문에 차라리 반복되는 도구들을 정리해 사용자들에게 깔끔하고 초보자들의 액션과 어울릴만한 디자인으로 재구성할 필요가 있다.
  • 18. 18 2 . Step for new movie maker
  • 19. 2 . Window movie 새로운 movie maker의 주요 고려사항 maker 2-1 고려사항 새로 디자인한 무비메이커는 크게 세가지 고려사항을 중점으로 디자인 되었다. 1 ) 사용자 액션의 자연스런 흐름을 고려한다. 인터페이스 디자인의 가장 중요한 것은 사용자의 목적을 이루기 위한 액션이 순조롭게 진행되도록 구현되어야 하는 것이다. 하지만기존의 윈도우 무비 메이커의 경우 사용자의 액션에 대한 고려가 부족했다. 작업환경이 분할되어 액션의 흐름이 끊긴 다던지, 필요한 구조와 도구가 부족해 사용자의 욕구를 충족시키지 못했다. 때문에 우리는 사용자의 액션과 욕구를 고려하는 것을 최우선으로 두었다. 2 ) 사용자의 수준에서 모든 것을 고려한다. 두 번째로 중요시 생각한 것은 사용자에 대한 이해이다. 무비메이커의 경우 주 사용층이 초보자 수준의 일반인들이기에 이들의 이해도에 맞춰 인터페이스를 구현하고 , 사용에 대한 부담감을 줄인 쉬운 인터페이스를 디자인 하기 위해 노력하였다. 3 ) 분명한 개념 정립이 인터페이스 안에 구현된다. 마지막으로 중요하게 초점을 둔 것은 제작자, 우리의 동영상 편집에 대한 생각을 확실히 하고 이것을 인터페이스에 구현하도록 한 것이다. 분명하고 논리적으로 정리된 생각이 구현된 인터페이스는 마치 잘 조직된 연설과 같이 사용자들을 우리의 새로운 무비메이커로 이끌 수 있을 것이다. 2 -2 벤치마킹
  • 20. 1 . Step for new movie 벤치마킹 maker 아이패드2의 iMovie 아이무비는 여느 편집어플리케이션과 달리 아이패드, 아이폰에서만 구현되는 어플리케이션이다. 따라서 키보드, 마우스 등 다른 입력장치가 없는 만큼 심플하면서도 기능에 대한 접근성이 높아야 한다. 실제로 아이무비는 원터치와투터치만으로 편집이 가능하다. 무비메이커 역시 이러한 기능에 대한 접근성과 심플함을 높이는 것에 중점을 맞추었다. 2-1 고려사항 2-2 벤치마킹
  • 21. 21 3 . New window movie maker detail
  • 22. “수정 포인트” 1) 상단 바 2) 동영상 작업창3) 소스 창 4) 프리뷰 5) 타임라인 일부
  • 24. “상단 바” 이미 동영상 작업 창에 나열되어 있는 기능과 효과가 도구 창에 다시 배열되어 있다. 같은 작업 환경이 좀 더 딱딱하게 나와 있는 것. “동영상 작업 창 이랑 같은 거만 있길래 그 담부턴 사용 안 했는데..?” - 강민혜 “작업 하는 동안 마우스가 아래쪽에서만 왔다 갔다 했어.” - 신선아 조원 3명을 포함 주변인들에게 물어봤을 때 위와 같은 의견을 보인 초보자는 5명 5명으로 나타났고 이에 우리는 상단 바의 사용도가 현저히 낮을 거라 판단, 상단 바 필요하지 않다고 생각했다. 다음과 같이 변경된 상단 바를 확인 할 수 있다.
  • 26.
  • 27. 동영상 작업환경에 배치되어 있던 도움말 기능을 삭제 하고 상단 바에 배치하였다.
  • 28. 위 두 가지의 작업을 통해, 단순히도구 창을 단순 간소화 하는 것 뿐만 아니라초보자에게 ‘무비메이커가 가진 기능에 한계가 있음을 암시’시킬 수 있을 거라 기대하고 있다.26
  • 29.
  • 30. 동영상 작업창을 없애고 작업창 안에서 실행되던 여러 기능들을 타임라인과 소스창에 골고루 배분하였다.
  • 31. 대다수의 윈도우 사용자들이 처음 사용하는 프로그램일 경우 어떠한 액션이 발생할 것을 기대하고 무심코 ‘더블클릭’하는 것을 볼 수 있었다.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36. ▼ 32 ④ 더블클릭액션 - 화면효과적용 ▼
  • 37. 33 ④ 더블클릭액션 - 화면전환적용 ▼
  • 38.
  • 39. 또한 자막의 위치 조정을 보다 쉽게 할 수 있도록 원하는 화면에 직접 커서를 위치시켜 자막 작업을 할 수 있도록 개선 하였다.
  • 40. 제목 또는 제작진 만들기 라는 이름이 자막과 빨리 연관 되지 않아 이름을 자막으로 변경 하였다.34
  • 41. ⑤자막 - MOVIE MAKER 자막 작업 순서 35
  • 42. ⑤자막 - 변경된 자막추가 36
  • 43. 37
  • 44. 38 “소스 창과 프리뷰 화면”
  • 45.
  • 46.
  • 47.
  • 48. 이 기능의 이름을 오디오 밸런스라 다시 부치고 원음 그대로를 비디오 자체음, 오디오/음악을 삽입음 이라고 알기 쉽게 이름을 주었다.
  • 49. 둘 사이의 수치를 제시함으로 비율을 확인 할 수 있다.41