SK컴즈 세미나




        고광일

우송대학교 방송시스템학부
    스마트TV방송전공
나의 앞머리가 무성한 이유는
사람들이 나를 보았을 때 쉽게 붙잡을 수 있게 하기 위함이고,

         뒷머리가 대머리인 이유는
     내가 지나가고 나면 다시는 나를 붙잡지
         못하도록 하기 위함이며,

         발에 날개가 달린 이유는
   그들 앞에서 최대한 빨리 사라지기 위해서이다.

             나의 이름은
                …


           기회이니라
스마트TV의 성공적
 비행에 대한 이야기..
스마트TV = Connected TV + 앱스토어
스마트TV 앱
기존 강자 앞에 죽으러 갈 것인가?
강하게 한번 붙자~
키워드는 감성!!
할머니가 스마트TV를 만났을 때…
감성 자극의 지존, 게임은 혹시?
감성 자극의 도가 지나치네…
마리오의 아버지 시게루 칼을 뽑다!
TV 앞의 새로운 세상
TV 콘텐츠의 새로운 가능성
아~ UI/UX
UI/UX가 일등공신인데…
이것으로 도대체 무엇을 하란 말인가?
나름 노력했어요~
스마트폰의 가치




           +
           ||


     +          +
스마트폰의 활용 - 리모트앱
스마트TV의 성공적 비행을 위해서…
감성적
       콘텐츠
      개발, 활성



      UI/UX의
        발전

사용자            생태계
확보             형성
UI/UX의 이해
UI/UX는 플랫폼이다!




           UI/UX




          플랫폼
UI/UX는 콘텐츠다!




           UI/UX




           콘텐츠
호리병에 담긴 자장면은 자장면일까?
자장면 = 면+그릇+나무 젓가락+단무지..
UI/UX를 콘텐츠 개발자 손에…




       스마트한
    UI/UX 개발 환경
스마트 UX(sMartUX)
sMartUX란?



  sMartUX =
   스마트TV 앱 UX 개발 패러다임
            +
     스마트TV 앱 개발 환경
UX 개발 패러다임

           앱 개발자와
UX 품질 향상    소비자의
           편의 향상
UX 개발 패러다임
기본 원리
 스마트폰과 연동
 스마트폰 기능의 최대한 이용
 앱 개발자의 UX 개발에 편의 제공
 소비자의 앱 이용에 편의 제공
스마트폰과의 연동




  스마트TV                         스마트폰


                  통신 세션         스마트TV
  스마트TV 앱   데이터   데이터     데이터    앱 UI
UX 설계에 스마트폰 기능의 최대 활용


     자이로
                   UI 그래픽
     센싱
스          스마트폰
마                             앱
트    중력            UI Scene   사
T    센싱
           스마트TV
                      전환      용
V           앱 UI              자
앱
     터치              UI
     센싱            애니메이션
스마트폰 상의 UI 설계

              그래픽                 그래픽


 모드 1         장면1-1               장면1-2
        애니메            센싱   애니메            센싱
        이션            데이터    이션           데이터




              그래픽                 그래픽


 모드 2         장면2-1               장면2-2
        애니메            센싱   애니메            센싱
        이션            데이터    이션           데이터
메뉴, 차량
                        이미지 등
초기 설정 모드
(차량 선택, 코
                        장면1-1
 스 선택 등)
            메뉴 깜박거림,               터치 센싱
            차량 회전 등                 데이터




                       속도계, 알람 등



 레이싱 모드                  장면2-1
             속도계 바늘                자이로 센싱, 터
              움직임 등                치 센싱 데이터
앱 개발자의 UX 개발에 편의 제공

  난 사용자가 어떤 스마트폰을 사
     용하는지 관심 없어요~

  전, 제 UI/UX에만 집중할래요..

  나중에 스마트폰 쪽에서 알아서
    처리하도록 해주세요~
앱 개발자의 UX 개발에 편의 제공

         추상적 스마트폰
                              스마트폰 A
스
마               센싱 데이
트      메타데이터    터, 그래픽,
T      작성 언어    애니메이션
V                  API
                              스마트폰 B
앱
개        언어
발        문법    Completeness
자
                Soundness     스마트폰 C
         언어
         의미
앱 개발자의 UX 개발에 편의 제공

  스마트TV 앱 유통도 신경쓰고~

   스마트폰에 UI 앱 유통도 신경
       쓰긴 싫어요~

   스마트TV앱 유통으로 한번에
      될 순 없을까요?
앱 개발자의 UX 개발에 편의 제공

 스마트TV 앱

   스마트폰 UI
  (메타데이터)
                                 스마트폰
             스마트TV
             스마트TV 앱             스마트TV 앱 UI
                         통신 세션
 스마트TV 앱
               스마트폰 UI             스마트폰 UI
 유통 시스템       (메타데이터)             (메타데이터)


                                 UI 실행 엔진
소비자의 앱 이용에 편의 제공
            새로운 스마트TV 앱 사용할
             때마다 스마트폰 앱 마켓에
                접속해서 UI 받기
                   귀찮아요~




 친구가 짜증내고
   있어요..
    ㅡ.ㅡ
소비자의 앱 이용에 편의 제공
 스마트TV
 스마트TV 앱 A
              스마트폰-1     UI for 스마트   스사
                            TV 앱 A
  스마트폰 UI-A
  (메타데이터)     UI 실행 엔진                마용
                                      트자
                                      폰
 스마트TV 앱 B                            1
                         UI for 스마트
  스마트폰 UI-B
              스마트폰-2        TV 앱 B
  (메타데이터)                             스사
              UI 실행 엔진                마용
 스마트TV 앱 C                            트자
                         UI for 스마트   폰
  스마트폰 UI-C                           2
  (메타데이터)
                            TV 앱 C
앱 운용 동적 모델 (시나리오)

     스마트TV 앱
     유통 시스템

1. 앱 다운로드

                                        스마트폰
     스마트TV
                                       4. (7.) 스마트TV
     스마트TV 앱        2. 통신 세션 형성         앱 UI (재)구현


       스마트폰 UI
                  3. UI 메타데이터 전송          스마트폰 UI
      (메타데이터)    5. 센싱 데이터 전송 (앱 운용)     (메타데이터)

                    6. UI 변경 신호
                                       UI 실행 엔진
스마트TV 앱 구조

               스마트TV 앱


     스마트TV에서
                스마트폰과의     스마트폰의 UI
    운용될 프로그램
                통신 관리 모듈    관리 모듈
       모듈




    스마트폰의 센싱               UI 메타데이터
                UI 메타데이터
     데이터 처리
                전송 관리 모듈
       모듈
앱 개발 환경
스마트폰 상의
sMartUX UI 실행 모듈
  추상적 스마트폰 형상
추상적 스마트폰의 기능

  추상적 스마트폰

          센싱 데이
 메타데이터    터, 그래픽,
 작성 언어    애니메이션
                        스마트TV 앱과 통신 세션 형성
             API
                        UI 메타데이터 해석 및 UI 구현
  언어
                        스마트TV 앱이 요구하는 센싱
  문법     Completeness
                        데이터 전송

          Soundness     스마트TV 앱의 모드에 따라 UI
  언어
  의미                    재 구현
sMartUX UI 실행 모듈의 구조
    UI 장면     UI 장면     UI 장면           UI 장면
       1         2         3               N




                sMartUX UI 실행 모듈

            UI 관련 API & 메타데이터 문법/의미

    메타데이터 해석
                      UI 구현 모듈     UI 전환 관리 모듈
       모듈


            스마트폰TV 앱과의 통신 세션 관리 모듈


                스마트폰 추상화 레이어


                  스마트폰 운영체제
결론…
sMartUX는 범용적인 UX 플랫폼…
  PC 플랫폼과 스마트폰으로 프로토
  타입 개발 중…
험난한 세상에 등대가 되어…




      감사합니다.

[한국의SNS 컨퍼런스]N스크린 기반 스마트UX

  • 1.
    SK컴즈 세미나 고광일 우송대학교 방송시스템학부 스마트TV방송전공
  • 3.
    나의 앞머리가 무성한이유는 사람들이 나를 보았을 때 쉽게 붙잡을 수 있게 하기 위함이고, 뒷머리가 대머리인 이유는 내가 지나가고 나면 다시는 나를 붙잡지 못하도록 하기 위함이며, 발에 날개가 달린 이유는 그들 앞에서 최대한 빨리 사라지기 위해서이다. 나의 이름은 … 기회이니라
  • 4.
  • 5.
    스마트TV = ConnectedTV + 앱스토어
  • 6.
  • 7.
    기존 강자 앞에죽으러 갈 것인가?
  • 8.
  • 9.
  • 10.
  • 11.
    감성 자극의 지존,게임은 혹시?
  • 12.
    감성 자극의 도가지나치네…
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 23.
  • 24.
    감성적 콘텐츠 개발, 활성 UI/UX의 발전 사용자 생태계 확보 형성
  • 25.
  • 26.
  • 28.
    UI/UX는 콘텐츠다! UI/UX 콘텐츠
  • 30.
  • 31.
    자장면 = 면+그릇+나무젓가락+단무지..
  • 32.
    UI/UX를 콘텐츠 개발자손에… 스마트한 UI/UX 개발 환경
  • 33.
  • 34.
    sMartUX란? sMartUX= 스마트TV 앱 UX 개발 패러다임 + 스마트TV 앱 개발 환경
  • 35.
    UX 개발 패러다임 앱 개발자와 UX 품질 향상 소비자의 편의 향상
  • 36.
    UX 개발 패러다임 기본원리 스마트폰과 연동 스마트폰 기능의 최대한 이용 앱 개발자의 UX 개발에 편의 제공 소비자의 앱 이용에 편의 제공
  • 37.
    스마트폰과의 연동 스마트TV 스마트폰 통신 세션 스마트TV 스마트TV 앱 데이터 데이터 데이터 앱 UI
  • 38.
    UX 설계에 스마트폰기능의 최대 활용 자이로 UI 그래픽 센싱 스 스마트폰 마 앱 트 중력 UI Scene 사 T 센싱 스마트TV 전환 용 V 앱 UI 자 앱 터치 UI 센싱 애니메이션
  • 39.
    스마트폰 상의 UI설계 그래픽 그래픽 모드 1 장면1-1 장면1-2 애니메 센싱 애니메 센싱 이션 데이터 이션 데이터 그래픽 그래픽 모드 2 장면2-1 장면2-2 애니메 센싱 애니메 센싱 이션 데이터 이션 데이터
  • 40.
    메뉴, 차량 이미지 등 초기 설정 모드 (차량 선택, 코 장면1-1 스 선택 등) 메뉴 깜박거림, 터치 센싱 차량 회전 등 데이터 속도계, 알람 등 레이싱 모드 장면2-1 속도계 바늘 자이로 센싱, 터 움직임 등 치 센싱 데이터
  • 41.
    앱 개발자의 UX개발에 편의 제공 난 사용자가 어떤 스마트폰을 사 용하는지 관심 없어요~ 전, 제 UI/UX에만 집중할래요.. 나중에 스마트폰 쪽에서 알아서 처리하도록 해주세요~
  • 42.
    앱 개발자의 UX개발에 편의 제공 추상적 스마트폰 스마트폰 A 스 마 센싱 데이 트 메타데이터 터, 그래픽, T 작성 언어 애니메이션 V API 스마트폰 B 앱 개 언어 발 문법 Completeness 자 Soundness 스마트폰 C 언어 의미
  • 43.
    앱 개발자의 UX개발에 편의 제공 스마트TV 앱 유통도 신경쓰고~ 스마트폰에 UI 앱 유통도 신경 쓰긴 싫어요~ 스마트TV앱 유통으로 한번에 될 순 없을까요?
  • 44.
    앱 개발자의 UX개발에 편의 제공 스마트TV 앱 스마트폰 UI (메타데이터) 스마트폰 스마트TV 스마트TV 앱 스마트TV 앱 UI 통신 세션 스마트TV 앱 스마트폰 UI 스마트폰 UI 유통 시스템 (메타데이터) (메타데이터) UI 실행 엔진
  • 45.
    소비자의 앱 이용에편의 제공 새로운 스마트TV 앱 사용할 때마다 스마트폰 앱 마켓에 접속해서 UI 받기 귀찮아요~ 친구가 짜증내고 있어요.. ㅡ.ㅡ
  • 46.
    소비자의 앱 이용에편의 제공 스마트TV 스마트TV 앱 A 스마트폰-1 UI for 스마트 스사 TV 앱 A 스마트폰 UI-A (메타데이터) UI 실행 엔진 마용 트자 폰 스마트TV 앱 B 1 UI for 스마트 스마트폰 UI-B 스마트폰-2 TV 앱 B (메타데이터) 스사 UI 실행 엔진 마용 스마트TV 앱 C 트자 UI for 스마트 폰 스마트폰 UI-C 2 (메타데이터) TV 앱 C
  • 47.
    앱 운용 동적모델 (시나리오) 스마트TV 앱 유통 시스템 1. 앱 다운로드 스마트폰 스마트TV 4. (7.) 스마트TV 스마트TV 앱 2. 통신 세션 형성 앱 UI (재)구현 스마트폰 UI 3. UI 메타데이터 전송 스마트폰 UI (메타데이터) 5. 센싱 데이터 전송 (앱 운용) (메타데이터) 6. UI 변경 신호 UI 실행 엔진
  • 48.
    스마트TV 앱 구조 스마트TV 앱 스마트TV에서 스마트폰과의 스마트폰의 UI 운용될 프로그램 통신 관리 모듈 관리 모듈 모듈 스마트폰의 센싱 UI 메타데이터 UI 메타데이터 데이터 처리 전송 관리 모듈 모듈
  • 49.
    앱 개발 환경 스마트폰상의 sMartUX UI 실행 모듈  추상적 스마트폰 형상
  • 50.
    추상적 스마트폰의 기능 추상적 스마트폰 센싱 데이 메타데이터 터, 그래픽, 작성 언어 애니메이션 스마트TV 앱과 통신 세션 형성 API UI 메타데이터 해석 및 UI 구현 언어 스마트TV 앱이 요구하는 센싱 문법 Completeness 데이터 전송 Soundness 스마트TV 앱의 모드에 따라 UI 언어 의미 재 구현
  • 51.
    sMartUX UI 실행모듈의 구조 UI 장면 UI 장면 UI 장면 UI 장면 1 2 3 N sMartUX UI 실행 모듈 UI 관련 API & 메타데이터 문법/의미 메타데이터 해석 UI 구현 모듈 UI 전환 관리 모듈 모듈 스마트폰TV 앱과의 통신 세션 관리 모듈 스마트폰 추상화 레이어 스마트폰 운영체제
  • 52.
    결론… sMartUX는 범용적인 UX플랫폼… PC 플랫폼과 스마트폰으로 프로토 타입 개발 중…
  • 53.
    험난한 세상에 등대가되어… 감사합니다.