Category: Interactive Design

  • 인터랙티브 애니메이션 ②

    일반적으로 시대의 흐름에 따라 디지털 미디어가 인간의 요구에 맞게 발전해 왔다. 과거 폐쇄적인 애플리케이션 방식에서 현재 개방적인 웹 방식으로 변모하는 과정에 있다. 특히나 대중적인 검색을 기반으로 하는 콘텐츠의 경우에는 대부분 개방형을 지향하고 있다. 상호작용을 기반으로 하는 인터랙티브 미디어 개발에서는 두 가지 방식을 선호하는데 그것이 오늘 이야기할 문서 타입(Web)과 컴포넌트 타입(App)이 바로 그것이다.

    컴포넌트 타입 ( App )
    • 폐쇄형 콘텐츠 지향
    • 로컬 기반
    • 계층형
    • 네이티브 타입
    • Embed
    • 보안 중심
    • 은행, 민원 등
    문서 타입 ( Web )
    • 개방형 콘텐츠 지향
    • 네트워크 기반
    • 검색 기반
    • 마크업 HTML
    • 멀티 객체 문서
    • 도메인
    • 사이트, 정보시스템 등
    혼합형 ( App || Web )
    • 개방형/폐쇄형 콘텐츠 수용
    • 네트워크/로컬
    • 검색/계층
    • 네이티브/마크업 HTML
    • Embed/멀티 객체
    • 도메인/보안
    • 쇼핑몰, 모바일, 키오스크 등

    주요 용어

    Hype 사용법을 배우기 위한 9 가지 기본 용어는 장면(Scenes), 요소(Elements), 속성(Properties), 키프레임(Keyframes), 애니메이션(Animations), 타임라인(Timelines), 액션(Actions), 심벌(Symbols), 행동(Behaviors)입니다.

    1. 장면(Scenes)
    각 Hype 문서는 하나 이상의 장면으로 구성된다. 장면은 Keynote 또는 PowerPoint 프레젠테이션의 슬라이드 또는 HyperCard의 카드와 유사하다. 장면에는 요소와 타임라인이 포함되며, 동작은 여러 장면 사이를 전환하는 데 사용된다.

    2. 요소(Elements)
    요소는 장면에서 조작 가능한 객체를 말한다. 모양, 텍스트, 버튼, 질감 버튼, 이미지, 비디오, HTML 위젯 등을 말한다.

    3. 속성(Properties)
    속성은 요소의 스타일, 위치 지정 및 보조 정보를 정의하는 내용을 말한다. 대부분의 속성은 애니메이션 가능하며, 속성은 Hype의 장면 편집기에서 요소를 조작하거나 속성에서 값을 변경하여 정의 또는 변경된다. 속성은 요소의 위치, 크기, 색, 테두리 또는 요소에 적용된 효과를 여러 가지로 정의한다.

    4. 키프레임(Keyframes)
    키 프레임은 타임라인의 특정 시간에 속성 값을 정의한다.

    5. 애니메이션(Animations)
    애니메이션은 일정 기간 동안 속성 값을 변경한다. 속성의 애니메이션의 시작 및 끝 값을 설정하는 두 개의 키 프레임으로 정의된다. Hype은 다른 값을 가진 모든 키 프레임 사이에서 자동으로 애니메이션을 만든다. 애니메이션은 또한 다른 여유 효과, 즉 여유 공간, 여유 공간, 여유 공간, 인스턴트, 바운스 및 선형과 같은 다양한 변화율을 가지고 있다. 또한 모션 경로를 사용하여  요소를 임의의 복잡한 곡선을 따라 움직일 수 있다.

    6. 타임라인(Timelines)
    타임라인에는 애니메이션이 포함되어 있다. 각 장면에는 장면이 표시될 때 자동으로 시작되는 기본 타임 라인이 있으며, 장면에는 여러 개의 타임 라인이 동시에 있을 수 있으며 타임라인 재생을 제어하는 ​​데 사용된다.

    7. 액션(Actions)
    액션은 문서를 대화식으로 만듭니다. 무엇보다도 액션은 장면을 변경하고 타임라인 재생을 제어하며 사운드를 시작 또는 중지하거나 사용자 정의 JavaScript 함수를 실행하는 데 사용된다. 액션은 마우스 클릭이나 탭 제스처와 같은 사용자 이벤트 및 장면 로드 또는 타임라인 재생 완료와 같은 장면 이벤트에 대한 응답으로 트리거 된다. 특정 시간에 트리거 되도록 작업을 타임라인에 배치할 수도 있다.

    8. 심벌(Symbols)
    심벌은 요소, 타임라인 및 애니메이션을 쉽게 다시 사용할 수 있게 해주는 강력한 도구이다. 심벌을 장면 내 장면으로 생각하라. 심벌에는 장면의 요소와 독립적으로 트리거할 수 있는 자체 요소, 타임라인, 액션 및 비헤이비어가 있다. 심벌의 한 인스턴스를 편집하면 모든 인스턴스가 변경되기 때문에 심벌은 동일한 장면의 여러 장면 또는 다른 위치에서 동일한 요소를 공유하는 데 유용하다.

    9. 행동(Behaviors)
    사용자 비헤이비어는 Hype의 빌트인 액션 핸들러처럼 트리거 될 수 있는 자신 만의 액션 핸들러를 생성할 수있게한다. Hype의 내장 액션 핸들러처럼, 당신 자신의 행동은 일련의 행동을 유발할 수 있다. 비헤이비어를 사용하면 복잡한 작업을 만들고 사용할 때 작업을 반복하지 않아도 된다.

    타임라인 만드는 3가지 방법

    타임라인 선택기 메뉴
    타임라인은 메뉴를 클릭하고 새 타임라인 명령을 선택하여 타임라인 선택기 팝업 메뉴를 통해 추가할 수 있다. 새로 생성된 타임 라인이 자동으로 편집을 위해 선택된다.

    액션 핸들러 메뉴
    타임라인은 타임라인에서 타임라인 시작, 타임라인 일시 중지, 타임 라인 계속 또는 타임 라인에서 시간 이동을 선택할 때 생성될 수 있다. ( Hype의 다양한 액션 핸들러에 대한 자세한 정보가 있다.) 액션 중 하나를 선택하면 타임 라인 팝업 메뉴가 표시되고 새 타임 라인을 선택하면 타임 라인이 생성된다.

    Scene Inspector의 애니메이션 타임라인
    타임라인은 장면 속성의 애니메이션 타임라인 섹션에 추가할 수 있다. ‘+’ 버튼을 클릭하여 새로운 타임라인을 추가한다.

    타임라인 재생 방향
    타임 라인은 정방향(forwards) 또는 역방향(backwards)으로 재생할 수 있다. 기본적으로 타임 라인은 전진하고 한 번만 재생된다. 타임 라인을 반대 방향으로 재생하려면 ‘역순으로 재생(Play in reverse)’을 선택한다. 종료 지점에서 타임 라인을 시작하려면 ‘타임 라인 시작(Start Timeline)’작업을 만들고 ‘반대로 재생(Play in reverse)’을 선택한다. 애니메이션이 끝날 때 타임 라인을 역방향으로 재생하려면 타임 라인 액션을 사용하여 타임 라인 계속하고 아래와 같이 역 재생을 선택하면 된다.

    반복 재생 타임 라인
    타임 라인을 루프하는 쉬운 방법은 타임 라인의 끝 부분에 ‘타임 라인 시작’ 타임 라인 액션을 추가하는 것이다. 루프를 오가며 (앞으로 재생 한 다음 역방향으로 재생하려는 경우) 타임 라인 끝에서 ‘역방향 재생’ 옵션이 선택된 상태로 ‘계속 진행’ 동작을 추가한다. 타임 라인 시작 부분에 ‘계속 타임 라인’ 전달 작업을 추가해야 한다.

    슬라이드 자료

    Helvetica vs. Arial

  • 인터랙티브 디자인 사례

    왜 인터랙티브해야 하는가?

    인터랙티브는 ‘상호 간’이라는 뜻을 지닌 인터(Inter-)와 ‘활동적’이라는 뜻을 지닌 액티브(Active)의 합성어로, 상호활동적인, 곧 쌍방향이라는 의미를 지니고 있다. 인터랙티브 한 디자인이란 사용자와 상호작용을 하는 텍스트 기반, 또는 그래픽 사용자 인터페이스를 디자인하는 것으로 사용자의 직접 참여 및 리액션을 필요로 하는 디자인이다. 디자이너 혼자 완성해 선보이는 것이 아니라 사용자나 관객의 참여가 요구되는 디자인을 말한다. 

    인터랙티브 디자이너 가운데는 인쇄, 영상, 시각, 폰트, 창의적인 손글씨 등을 작업하는 이들과 그에 관심을 쏟고 있는 일반인 등 새로운 접근 방식을 요구하는 사람들이 많다. 사용자를 위한 디자인을 할 때, 그들이 어떻게 인식하고 사용할 것인가를 본능적으로 이해하기란 매우 어려운 일이며, 그들의 궁극적인 니즈를 만족시키기 위해 더 훌륭한 아이디어가 필요하다. 그러므로 우리는 다양한 요소의 균형을 맞추며 사용자의 욕구에 따른 기술과 예산까지 고려해 성공적인 목표를 잡아야만 한다. 대상을 잡고, 소통의 목적과 사용자가 원하는 것은 무엇인지 합리적인 디자인 사례를 참고해 인터랙티브 한 예측을 해야 한다. 

    티셔츠 디자인

    일본의 디자이너 노토(noto)와 후사이(fusai)의 Interactive design 티셔츠이다. 평범한 프린팅 같지만 자세히 보면 프린팅과 사물이 일치된 듯한 효과를 보여주고 있다. 즉각적이고 정서적인 친밀감으로 재미를 더하며, 단순한 티셔츠가 아닌 가능성을 탐구하기 위한 인터랙티브 디자인이라고 할 수 있다. 

    일본의 디자이너 노토(noto)와 후사이(fusai)의 Interactive design 티셔츠 사례

    북 디자인

    ‘잘 관리되고 있는(In Good Hands)’이란 이름의 이 북디자인은 손바닥이 닿으면 그 온기로 리포트 커버에 초록빛 일러스트가 표현된다. 이는 하나의 메타포이다. 한 사람의 따뜻한 손이 얼마나 많은 것들을 실현할 수 있는지를 상징한 것이다. 손바닥 온기로 색이 변화하는 인쇄 버전처럼, 아이패드 버전도 터치로 똑같은 효과를 낼 수 있다고 한다. 손바닥 온기와 책의 상호작용을 바탕으로 만들어진 기발한 북디자인이다.

    북디자인 아드리스 그룹 연간 리포트 by 브루케타 & 지닉, 출처 바로 가기

    프로모션

    Nestlé Contrex는 이 독특한 TV 광고에서 운동을 권장하고 있다.
    아래의 영상은 프랑스 생수 회사 콘트렉스(Contrex)의 ‘미네랄워터’ 프로모션이다. 다이어트 생수 제품을 기발한 아이디어로 풀어냈으며, 특히 이 영상은 유튜브에서 그 당시 약 1,500만 뷰를 기록하며 성공적인 프로모션 사례로 인용되고 있다.

    이 광고는 물의 필요성을 표현하고 있는데요, 핑크빛 운동기구를 여러 개 비치한 뒤 사람들이 페달을 밟으면 레이저 불빛 스트립쇼가 계속 이어진다. 호기심 어린 사람들은 계속 페달을 밟게 되고 즉, 자연스럽게 운동을 하게 된다. 이렇게 열심히 땀을 흘린 이들은 콘트렉스 미네랄워터를 마시며 땀을 식히며 재미, 웃음, 협동심을 한데 모은 유쾌한 프로모션이라고 할 수 있다.

    콘트렉스의 이 프로모션은 프랑스 주요 매체를 비롯해 많은 블로거에게 공유됐고, 매출이 4.2%까지 증가하는 효과도 얻었다. 타깃 고객의 참여도를 이끌어내는 인터랙티브 콘셉트, 다이내믹한 감성 등을 잘 버무려 유쾌한 브랜드 이미지를 각인한 것이다. 대표적인 ‘인터랙티브 성공 마케팅’ 가운데 하나라고 할 수 있다.

    Nestlé Contrex Commercial: “Ma Contrexpérience”
    Live Contrex
    CONTREX / Ma Contrexpérience saison 2

    아트

    인터랙티브 아트는 그림을 ‘감상’하는 차원이 아니라, 내가 그림을 그리는 것처럼 ‘체험’할 수 있는 형태이다. 관객의 참여로 하나의 작품이 완성되는 셈이다. 그림을 그리는 작가와 관람자 사이 상호작용을 주제로 한 실험적인 작품이 많이 시도되고 있으며, ‘인터랙티브 미디어 아트’라고도 불린다.

    아래 동영상은 Freemote’11 & Fiber Festival에 전시되었던 ‘In Order to Control’이라는 작품인데, 윤리와 도덕에 관한 내용(깨알 같은 활자 이미지들)이 바닥에 흐르고, 사람들이 그 문장을 읽기 위해 작품 안으로 들어서면 몸을 타고 글씨가 흐른다. 벽과 자아의 상호작용을 상징화한 작품이다.

    In Order to Control – Interactive Installation
    In Order to Control – NOTA BENE Visual.mov
  • 인터랙티브 애니메이션 ①

    인터랙티브 애니메이션 ①

    본질적으로 어떤 것도 한 지점에서 다른 지점으로 선형 이동하지 않는다. 실제로, 물건이 이동할 때 가속하거나 감속하는 경향이 있다. 우리의 뇌는 이러한 종류의 모션을 예상하므로 애니메이션을 만들 때 이러한 모션을 활용해야 한다. 자연스러운 모션은 앱 사용자에게 편안한 느낌을 주고 전반적인 사용 환경을 개선해 준다. – Paul Lewis(Paul is a Design and Perf Advocate)

    • easing은 애니메이션을 자연스럽게 만든다.
    • UI 요소에 대해 ease-out 애니메이션을 선택한다.
    • 짧게 유지할 수 있는 경우를 제외하고 ease-in 또는 ease-in-out 애니메이션을 피한는 것이 좋다. 최종 사용자에게 굼뜬 느낌을 줄 수 있기 때문이다.

    전통적인 애니메이션에서 느린 시작 후 가속하는 모션을 ‘slow in’이라고 하고 빠른 시작 후 감속하는 모션을 ‘slow out’이라고 한다. 웹에서는 각 모션에 대해 ‘ease in’ 및 ‘ease out’이라는 용어를 주로 사용한다. 두 모션이 조합된 경우는 ‘ease in out’이라고 한다. easing은 실제로 애니메이션을 더욱 부드럽고 편안한 느낌이 들게 만드는 프로세스이다.

    1. 선형(linear) 애니메이션

    LINEAR_EASE.gif

    easing을 사용하지 않은 애니메이션을 선형이라고 한다.
    시간 경과에 따라, 값이 균일하게 증가하며, 선형 모션을 사용할 경우, 로봇처럼 부자연스러운 느낌을 주므로 사용자가 불편함을 느낄 수 있다. 일반적으로, 선형 모션을 피하는 것이 좋다.

    2. Ease-in 애니메이션

    EASE_IN_CURVE.gif

    Ease-in 애니메이션은 ease-out 애니메이션과 반대로 느리게 시작했다가 빠르게 끝난다.
    이러한 종류의 애니메이션은 무거운 돌이 떨어지는 것처럼 느리게 시작하고 낮은 쿵 소리와 함께 빠르게 지면을 때린다.
    하지만 상호작용 관점에서 ease-in은 갑작스럽게 끝나기 때문에 약간 부자연스러운 느낌이 들 수 있다. 실제 세상에서 움직임은 단순히 갑자기 멈추는 것이 아니라 감속하는 경향이 있기 때문이다. 또한 ease-in은 시작 시 굼뜨게 움직이는 듯한 잘못된 효과로 인해 사이트나 앱에서 반응 인지에 부정적 영향을 미칠 수 있다.

    3. Ease-out 애니메이션

    EASE_OUT_CURVE.gif

    Easing out은 선형보다 더 빠르게 애니메이션을 시작하며 마지막에 감속한다.
    Easing out은 빠른 시작으로 애니메이션에 반응 효과를 주면서도 마지막에 자연스러운 감속 효과를 나타내기 때문에, 일반적으로 사용자 인터페이스 작업에 가장 적합하다.

    4. Ease-in-out 애니메이션

    EASE_IN_OUT_CURVE.gif

    Easing in 및 easing out은 차량의 가속 및 감속과 유사하며, 적절히 조합하여 사용하면 easing out만 사용하는 것보다 더욱 드라마틱한 효과를 제공할 수 있다.

    ease-in은 애니메이션을 더디게 시작하기 때문에 애니메이션 기간을 지나치게 오래 설정하지 않는 것이 효과적이다. 일반적으로 300-500ms 사이의 임의 값이 적합하지만, 정확한 값은 프로젝트의 느낌에 따라 상당히 달라진다. 그러나 느린 시작, 빠른 중간, 느린 종료로 인해 애니메이션의 대비가 증가하여 사용자에게 만족감을 줄 수 있다.

    5. Ease In Back 애니메이션

    EASE_IN_BACK.gif

    Ease In Back 은 애니메이션이 초기 키프레임 값을 지난 다음 끝에 도달함에 따라 가속되는 경우이다. 이것은 애니메이션에 바운스를 만들어 관객을 준비시키고 주요 액션을 강화하는 예측 액션 역할을 한다. 천천히 Ease In과 매우 유사 하게 Ease In Back는 개체를 보기에서 부드럽게 전환하는 데 적합하다.

    6. Ease Out Back 애니메이션

    EASE_OUT_BACK.gif

    Ease In Back 의 반대이다 . 애니메이션은 빠르게 시작한 다음 느려지고 종료 키프레임의 값을 지나간다. 이렇게 하면 기본 동작에 대한 부드러운 종료 전환을 만드는 정착 역할을 하는 애니메이션에 바운스가 생성된다. Ease Out 과 유사하게 Ease Out Back 은 개체를 보기로 이동하는 데 적합하다.

    7. Ease In And Out Back 애니메이션

    EASE_IN_OUT_BACK.gif

    애니메이션이 초기 키프레임 값을 초과할 때 천천히 시작한 다음, 속도가 느려지고 끝 키프레임 값을 초과하기 전에 빠르게 가속된다. 이것은 최종 상태 이전에 리바운드 모션과 함께 시작, 빠른 모션에서 예상되는 바운스를 만든다.

    슬라이드 자료

  • 반응형 웹 디자인의 9가지 기본 원칙

    반응형 웹 디자인의 9가지 기본 원칙

    반응형 웹 디자인은 다중 스크린 문제에 대한 훌륭한 솔루션이지만 인쇄 관점에서 볼 때 어려움을 겪습니다. 고정 된 페이지 크기가 없으며, 밀리미터 또는 인치가 없으며, 물리적 인 제약이 없습니다. 점점 더 많은 방문자가 웹 사이트를 열 수 있기 때문에 데스크톱 및 모바일 용 픽셀 단위로만 설계하는 것도 과거입니다. 따라서 여기에 반응형 웹 디자인의 기본 원리를 설명해 보겠습니다. 간단하게 유지하기 위해 레이아웃에 중점을 둘 것입니다.

    반응형(Responsive) vs 적응형(Adaptive) 웹 디자인

    그것은 같아 보일지 모르지만 그렇지 않습니다. 두 가지 방법 모두 서로 보완 적이므로 올바른 방법이나 잘못된 방법은 없습니다. 내용을 결정하게 하십시오.

    흐름(The Flow)

    화면 크기가 작아짐에 따라 콘텐츠가 더 많은 수직 공간을 차지하기 시작하고 아래의 모든 내용이 푸시 다운됩니다. 이를 흐름이라고 합니다. 픽셀과 포인트로 디자인하는데 익숙하다면 이해하기 까다로울 수 있지만 익숙해지면 완전히 이해할 수 있습니다.

    상대 단위(Relative units)

    캔버스는 데스크톱, 모바일 화면 또는 그 사이의 모든 것일 수 있습니다. 픽셀 밀도도 다양 할 수 있으므로 유연하고 모든 곳에서 작동하는 장치가 필요합니다. 그것은 퍼센트와 같은 상대적 단위가 유용 할 때입니다. 그래서 무언가를 50% 넓이로 만들면 항상 화면의 절반 (또는 viewport 창은 열려있는 브라우저 창의 크기)이됩니다.

    브레이크포인트(Breakpoints)

    브레이크포인트를 사용하면 레이아웃을 미리 정의 된 지점에서 변경할 수 있습니다. 즉, 데스크톱에서는 3 개의 열이 있지만 휴대 기기에서는 1 개의 열만 있습니다. 대부분의 CSS 속성은 하나의 중단 점에서 다른 중단 점으로 변경할 수 있습니다. 일반적으로 콘텐츠를 두는 위치는 콘텐츠에 따라 다릅니다. 문장이 중단되면 중단 점을 추가해야 할 수도 있습니다. 그러나 주의해서 사용하십시오. 무엇이 영향을 미치는지를 이해하는 것이 어려울 때 빠르게 지저분해질 수 있습니다.

    최대 값(Max values)과 최소 값(Min values)

    때로는 콘텐츠가 휴대 기기와 같이 화면의 전체 너비를 차지하지만 콘텐츠가 TV 화면의 전체 너비까지 펼쳐지는 것이 좋지 않은 경우가 종종 있습니다. 이것이 Min / Max 값이 도움이되는 이유입니다. 예를 들어 너비가 100%이고 최대 너비가 1000px 인 경우 내용이 화면을 채우지 만 1000px를 넘지는 않습니다.

    중첩 된 객체(Nested objects)

    상대 위치를 기억 하십시오. 서로에 따라 많은 요소를 가지면 제어하기가 어려우므로 컨테이너의 요소를 래핑하면 더 이해하기 쉽고 깨끗하며 깔끔하게 유지할 수 있습니다. 여기서 픽셀과 같은 정적 단위가 도움이 될 수 있습니다. 로고와 버튼처럼 크기를 조정하지 않으려는 콘텐츠에 유용합니다.

    모바일(Mobile) 또는 데스크톱(Desktop) 우선

    기술적으로 작은 화면에서 큰 화면 (모바일 우선) 또는 그 반대로 (데스크톱 우선) 프로젝트를 시작하면 큰 차이가 없습니다. 그러나 모바일을 처음 사용하는 경우 추가 제한 사항이 추가되고 의사 결정을 내리는 데 도움이됩니다. 종종 사람들은 한 번에 양 끝에서 시작하기 때문에 실제로 무엇이 더 잘 작동하는지 확인해야 합니다.

    웹 폰트 vs 시스템 폰트

    귀하의 웹 사이트에 멋지게 보이는 Futura 또는 Didot을 원하십니까? 웹 폰트 사용! 그들이 멋지게 보일지라도, 각각이 다운로드 될 것이고 더 많이 가질수록 페이지를 로드하는데 더 오래 걸릴 것임을 기억하십시오. 반면에 시스템 글꼴은 매우 빠르며 사용자가 로컬 글꼴을 가지고 있지 않은 경우를 제외하고는 기본 글꼴로 돌아갑니다.

    Bitmap images vs Vectors

    아이콘에 많은 세부 정보가 있고 멋진 효과가 적용 되었습니까? 그렇다면 비트 맵을 사용하십시오. 그렇지 않은 경우 벡터 이미지 사용을 고려하십시오. 비트 맵의 경우 jpg, png 또는 gif를 사용하고 벡터의 경우 SVG 또는 아이콘 글꼴을 사용하는 것이 가장 좋습니다. 각각에는 몇 가지 이점과 단점이 있습니다. 그러나 크기를 염두에 두십시오. 사진을 최적화하지 않으면 온라인 상태로 만들 수 없습니다. 반면에 벡터는 종종 작지만 일부 오래된 브라우저는 벡터를 지원하지 않습니다. 또한 곡선이 많으면 비트맵보다 무거울 수 있으므로 현명하게 선택하십시오.

    출처 : 9 basic principles of responsive web design