Skip to Menus Skip to Contents
Share this
Made with

Share this
Made with

D.FY Relay project

D.FY's views on whatever interests us, no matter how small. Because inspiration is found in the tiniest of details.

우리는 별거 아닌 것에서 새로움과 영감을 받곤 합니다. 소소하고 때론 사소하고 대단히 놀라울 것도 없습니다.
그저 관심이 가는 것에 관해 디파이 사람들의 시선을 담아보려 합니다.

No.One

The Faces

Design & illustration by Gwon Soongyu

Faces live in worlds of their own. Breathing as days go by. Disclosing their hidden layers. Only when faces cross do worlds connect as one.

우리의 얼굴은 저마다의 세상에서 서로 다른 현실을 이야기한다.
우리의 얼굴은 제각기 다른 시간이 흐르지만, 서로 교차하고 얽히며 하나의 풍경으로 연결된다.

No. 001

Designed by Soongyu Gwon Creative director at D.FY on July 10, 2018

No.Two

Moving to Korea

Composed by Dana Melanz

Major events, good or bad, can seem overwhelming. But in the grand scheme of things, they're simply a part of life. This poem is a look back on how one very stressful choice changed my life forever, but was only the first of many life-changing events to come.

좋거나 나쁜 큰 사건들은 감당하기 힘들어 보일 수 있습니다. 하지만 인생이라는 숲을 봤을 때 그 일들은 나무에 불과합니다. 제 삶을 송두리채 바꿔놓은 한 번의 선택을 돌아보며 이 시를 썼습니다. 그 선택은 저를 괴롭게 했지만 이것은 새로운 인생의 출발점이었습니다.

the consulate
eventful, emotional
visa obtained, eventually. 

the preparation
harried, frantic
cleaning and packing, then repacking. 

the goodbyes
see you later, keep in touch
all the while anticipating a short stay. 

the flight
two beers, two movies
excitement preventing sleep’s best efforts. 

the arrival
early morning, nothing open
waiting for the buses to start running. 

the start
shopping, exploring
but discomfort, homesickness. 

the trip
shinjuku, sushi
a familiar face from nyc greeting me. 

the return
language learning, job searching
all the while expecting to go home. 

the conflict
staying, leaving
missing america yet wanting the challenge. 

the job
interview, desire
thank you for coming in, when can you start. 

the dream
relief, relief
december 2016. i’m still here.

No. 002

Composed by Dana Melanz Copywriter at D.FY on July 25, 2018

No.Three

What color is your summer?

Designed by Baek Sohyun

파아란 하늘, 푸르른 바다, 새하얀 모래, 붉은 태양
계절을 떠올리게 하는 사물과 색이 있습니다.
무더운 여름, 서로 다른 방법으로 이 계절을 보내겠지만 예쁘게 추억할 수 있는 컬러풀한 여름이 되길 바랍니다.

Let's Go together
Let's Go together
SWEET!!
SWEET!!
SUMMER
No. 003

Designed by Sohyun Baek Designer at D.FY on August 6, 2018

No.Four

D.FY re-design concept

Designed by Lee Seul

디파이는 모든 서비스를 제공하는 에이전시입니다. 그래서 로고에서도 포괄적으로 담을 수 있는 이미지가 나왔으면 좋겠다는 목적으로 재해석해서 리디자인 콘셉트를 진행하게 되었습니다. 평소 디파이의 가지고 있는 이미지인 단순함과 그 속에 + 무엇이든 담을 수 있는 공간을 제시하여 이미지를 표현하게 되었습니다. 전체적으로 현대적임을 유지하되 로고 디자인 안에서 다채로운 이미지를 적극적 다양한 소통 공간으로 활용합니다. "모든 스토리를 담아내다."라는 확장성 있는 공간의 디파이를 제공하여 좀 더 다양하고 다채로운 지금 시대의 공간 속에서 많은 이야기를 보여주는 활용으로 로고의 이야기를 담았습니다.  

No. 004

Designed by Lee Seul Designer at D.FY on August 10, 2018

No.Five

Chatbot

Written by Kim Nanhyun

Retrospective of Chatbot Research

대화형 인터페이스는 이미 우리 일상 곳곳에 스며들어 있습니다. 이제는 Siri나 Alexa 같은 AI 기반 음성 Agent에게 오늘 날씨를 물어보고, 음악을 추천받으며, 운전 중에 문자를 보내 달라고 요청하는 일이 낯설지 않습니다. 챗봇 역시 대화형 인터페이스의 한 형태입니다. 인공지능을 활용하여 인간과 상호작용 할 수 있도록 고안된 프로그램이며 메신저의 형태를 띠고 있지요. 이번 DFY INSIGHT에서는 챗봇 프로젝트 투입 전 리서치 내용을 바탕으로 시나리오 기반 챗봇 설계를 위한 팁, 그리고 챗봇의 미래에 관해 이야기해 보려고 합니다.

챗봇의 현주소 (feat. 현실 챗봇)

사용자가 무슨 말을 하든 챗봇이 적절한 답변을 척척 내놓으면 좋으련만, 현실의 챗봇은 사용자가 한 말을 잘 이해하지 못하거나 엉뚱한 대답을 하는 경우가 많습니다. 물 흐르듯 자연스러운 대화를 할 수 있을 만큼의 인공지능이 아직 보편화 되지 않았기 때문인데요. 이 때문에 현재 상용화되어있는 대부분의 챗봇은 시나리오 기반의 챗봇입니다.

시나리오 기반 챗봇은

  • 우선순위와 실현 가능성을 고려하여 챗봇이 제공할 기능들을 정의하고
  • 각각의 기능에 대해 정해진 플로우에 맞춰 대화를 전개합니다.
  • 그 과정에서 사용자가 입력한 말에서 특정 단어나 어구를 스캔하여 미리 준비된 응답을 출력합니다.

이러한 특징 때문에 챗봇이 학습하지 못한 말을 입력하거나 정해진 시나리오를 벗어날 경우 곧잘 '잘 이해하지 못했어요'라는 문구를 노출하게 되는데요.

커피주문 플로우 비교 (사람vs챗봇) byhttps://medium.com/assist/theres-a-dozen-ways-to-order-a-coffee-why-do-dumb-bots-only-allow-one-27230542636d

왼쪽 예시는 실제 바리스타에게 주문하는 플로우를 보여줍니다. 정해진 주문 순서가 없으며 자유롭게 주문을 수정할 수 있습니다. 한편 오른쪽 예시는 챗봇에게 커피를 주문하는 플로우를 보여줍니다. 정해진 시나리오 순서대로 주문해야 하며, 주문 내용은 바꿀 수 없습니다. 주문을 완료하고 뒤늦게 우유를 변경하는 시나리오가 챗봇에 없기 때문입니다.

시나리오 기반 챗봇이 긍정적인 사용자 경험을 제공하려면?

  1. 1. 챗봇이 답변해줄 수 있는 내용을 쉽게 알 수 있어야 합니다.

    챗봇을 이용하다 보면 챗봇과의 대화가 쉽지 않다고 느껴질 때가 있습니다. 챗봇이 대답해 줄 수 있는 내용이 무엇인지, 어떤 식으로 말을 해야 할지 몰라서 선뜻 대화를 시작하고 이어나가기가 어려웠던 적, 다들 한 번쯤은 경험해보셨을 것 같습니다. 이러한 이슈를 닫힌 선택지를 통해 어느 정도 해결할 수 있습니다.

    ※ 좌우 비교 예시에서 출처로 표기된 서비스들은 우측의 예에 해당하며 좌측의 예는 비교를 위해 임의로 제작한 것임을 밝힙니다.
    SSG '1:1 고객상담톡' (오른쪽)

    왼쪽의 예시는 챗봇이 대답해줄 수 있는 범위를 알 수 없어서 대화를 시작하기가 쉽지 않은 반면, 오른쪽 예시는 주요 기능들을 카테고리화 하여 제공함으로써 사용자가 챗봇의 기능 범위를 한눈에 파악하고 자연스럽게 대화(시나리오)를 시작할 수 있게 합니다.

    https://medium.com/swlh/conversational-ui-principles-complete-process-of-designing-a-website-chatbot-d0c2a5fee376

    닫힌 선택지는 UI 형태뿐만 아니라 챗봇과의 대화(Dialogue)에도 녹일 수 있는데요. 오른쪽 예시처럼 대화의 범위를 알려줄 경우 사용자는 챗봇에게 무엇을 질문할 수 있는지 명확하게 인지하고 그에 따른 답변을 예측할 수 있습니다. 결과적으로 챗봇과의 대화를 더욱 매끄럽게 이어나갈 수 있게 됩니다. 또한 시나리오를 벗어날 확률이 낮아지는 만큼 사용자가 오류를 경험할 확률 역시 낮아지기 때문에 챗봇에 대해 긍정적인 이미지를 형성할 수 있습니다.

  2. 2. 챗봇 안에서의 정보탐색는 쉽고 편리해야 합니다.

    챗봇에서는 정보 탐색 흐름에 따라 원하는 정보를 쉽고 빠르게 찾을 수 있어야 합니다. 이러한 설계는 챗봇이 다루는 정보의 양의 많을수록 더욱 중요해집니다.

    11번가 '11톡' 디지털챗봇

    11번가의 디지털챗봇은 제품별 특징을 간략하게 요약하여 사용자가 더욱 쉽게 제품을 선택할 수 있게 도와주고,(오른쪽) 제품별 상세 정보는 챗봇 내의 레이어팝업 안에서 좌우로 스와이프하여 손쉽게 탐색할 수 있게 설계되어 있는데요.(왼쪽) 한 화면에서 원하는 정보를 쉽게 찾을 수 있기 때문에 좋은 사용자 경험을 제공하게 됩니다.

  3. 3. 오류 발생 시 적절한 피드백을 제공해야 합니다.

    사용자가 요청한 내용을 즉시 수행할 수 없는 경우, 적절한 안내 문구와 함께 해당 태스크를 끝까지 수행할 수 있도록 기능을 제공해야 합니다. 아래 예시는 장바구니가 비어있는데 '주문하기'를 요청해서 오류가 발생한 상태인데요. 챗봇이 주는 피드백에 따라 경험의 질이 확연히 달라진다는 것을 알 수 있습니다.

    11번가 '11톡' 마트챗봇 (오른쪽)

    왼쪽의 예시는 단순히 주문할 수 없는 상태라는 것만 알려주기 때문에 상품 주문을 하기 위해 무엇을 해야 할지 사용자가 직접 찾아봐야 하는 불편함이 발생합니다. 반면, 오른쪽 예시는 왜 주문을 할 수 없는지 그 이유를 알려주고 주문을 할 수 있도록 (장바구니에 상품을 담을 수 있도록) 상품 탐색 기능을 함께 제시해 주고 있습니다. 이러한 피드백은 자연스럽게 대화의 흐름을 이어가면서 태스크를 끝까지 마칠 수 있도록 도와주기 때문에 긍정적인 사용자 경험을 제공합니다.

마치며

이번 리서치를 통해 시나리오 기반 챗봇에서 나아가 AI 기반의 챗봇과 그 미래에 대해서도 생각해볼 수 있었는데요. 특히 VUI로 가는 길목에서 만나게 될 대화형 커머스와 차세대 모바일 플랫폼으로 언급되는 메세징 앱(Messaging App)이 인상 깊었습니다. 다수의 사용자와 챗봇이 한 화면 안에서 대화를 주고받으며 서비스를 이용하는 일이 자연스러운 일상이 되고, 더 나아가 화면이 사라진 VUI의 시대에는 어떻게 해야 사용자에게 좋은 경험을 제공할 수 있을까요? 이번 리서치가 던져준 물음표와 함께 글을 마칩니다.

대화형 커머스 프로토타입https://dribbble.com/shots/2749390-Messenger-Bots-Partial-payment-Concept
No. 005

Written by Kim Nanhyun Planner at D.FY on August 23, 2018

No.Six

180714~0716 BUSAN TRAVEL

Designed by Kim Sanggeun

뜨거운 여름, 처음으로 떠난 부산 여행.강렬한 인상, 자유로움,
그리고 낯선 지역에서 얻은 소중한 우리의 추억들.

No. 006

Designed by Kim Sanggeun Designer at D.FY on September 5, 2018

No.Seven

SVG <path> motion

Written by Jeon Sohyeon

최근 다양한 프로젝트에서 그래픽 모션을 넣는 경우가 많아지고 있습니다. 그 중에 SVG의 <path> 를 이용한 모션 종류를 찾아보고 그 중 하나의 예제를 구현해보겠습니다.
예제 사이트(https://cuberto.com/)

왜 SVG(Scalable Vector Graphics)인가?

SVG는 확장 가능한 벡터 그래픽으로 XML 을 기반으로한 드로잉 표준입니다.
픽셀로 렌더링 되고 그래픽을 변경해야 하는 경우 전체를 다시 그려야 하는 캔버스(Canvas)와 달리, CSS와 애니메이션, 자바스크립트로 SVG 의 일부 혹은 전체를 자유자재로 조작 가능합니다. 이러한 특징 때문에 웹 사이트 모션 작업에는 SVG가 가장 적합하다고 할 수 있습니다.

(이제 웹 사이트의 13.3%가 SVG를 사용하고 있습니다, w3techs, 2018.09.08) https://w3techs.com/technologies/changes/im-svg

SVG or Canvas? СHoosing Between the Two, Mihai Sucan, 2010.04
(https://dev.opera.com/articles/svg-or-canvas-choose/)
How (& Why) SVG Is Going to Take Over in 2018, CARRIE COUSINS, 2018.01.31
(https://designshack.net/articles/graphics/how-why-svg-is-going-to-take-over-in-2018/)

기술분석

  1. 1. Line Drawing Effect(Stroke-Dasharray & Stroke-Dashoffset)

    선이 그려지는 효과는 stroke-dasharray 속성과 stroke-dashoffset 을 사용하여 제어합니다.
    stroke-dasharray 는 path 의 점선의 간격을 설정하고, stroke-dashoffset 은 stroke-dasharray 가 시작되는 위치를 설정하는 속성입니다. SVG의 path 속성을 조작하는 것이기에 path 혹은 line 일 때만 작동됩니다.
    stroke-dasharray 속성(https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)
    strokeDashoffset 속성 (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset)

    원리

    stroke-dasharray를 각 path의 길이(length)로 설정합니다. 사라져야 하는 svg 의 stroke-dashoffset 를 0에서 stroke-dasharray 만큼 증가시키고, (사라짐) 보여줄 svg 의 stroke-dashoffset 을 stroke-dasharray 에서 0 으로 감소시킵니다. (나타남) stroke-dashoffset 가 stroke-dasharray 에서 설정된 길이만큼 시작 위치가 달라지면서, path 가 마치 그려지는 효과로 보이게 됩니다.

    Polygon feature design: SVG animations for fun and profit, dz, 2018.11.25 (https://product.voxmedia.com/2013/11/25/5426880/polygon-feature-design-svg-animations-for-fun-and-profit)

  2. 2. Path Morphing Effect

    모핑이란 하나의 형체가 전혀 다른 이미지로 부드럽게 변화하는 기법입니다. SVG 에서는 animate 효과와 결합하여 초기 도형의 점이 최종 도형으로 재정렬되어 모양이 전환되는 효과를 보여줍니다. 초기 도형이 가진 점의 위치는 재배열이 될 때 매우 큰 영향을 미칩니다.

    코드
    <svg>
      <path stroke="#247FFF" stroke-width="1" fill="none" d="M59.4,28.3h87.2V47.7h-64v45H137v19.4H82.6v63.4H59.4V28.3Z">
        <animate dur="5s" repeatCount="indefinite" attributeName="d"
        values="M59.4,28.3h87.2V47.7h-64v45H137v19.4H82.6v63.4H59.4V28.3Z;
        M100,100.0h50.0V0.100h-0v0H0v100.0H0.0v0.10H10.0V100.6Z;
        M59.4,28.3h87.2V47.7h-64v45H137v19.4H82.6v63.4H59.4V28.3Z"
        calcMode="spline"
        keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"/>
      </path>
    </svg>
    
    

    values=“초기값, 변경값, 초기값” 으로 설정한 모습. 참고 : https://webkul.com/blog/morphing-using-svg-animate-css/

    제한

    모핑 효과를 재현하기 위해서는 제한이 있는데, 모양을 정의하는 점의 수가 처음 모양과 같아야 합니다. SVG 명령어가 똑같지 않으면(직선에서 곡선으로 바꾼다거나, 곡선에서 직선으로 바꾼다거나) 애니메이션은 작동하지 않습니다. 또, IE 에서는 아예 SVG Animate 효과가 작동되지 않습니다.
    Path 명령어의 변형 알아보기 (https://developer.mozilla.org/ko/docs/Web/SVG/Tutorial/Paths)

    예제: MoveTo 명령어에서 LineTo 로 바뀌었을때
    코드
    <svg>
      <path stroke="#247FFF" stroke-width="1" fill="none" d="M59.4,28.3h87.2V47.7h-64v45H137v19.4H82.6v63.4H59.4V28.3Z">
       <animate dur="5s" repeatCount="indefinite" attributeName="d"
       values="M59.4,28.3h87.2V47.7h-64v45H137v19.4H82.6v63.4H59.4V28.3Z;
       L100,100.0h50.0V0.100h-0v0H0v100.0H0.0v0.10H10.0V100.6Z;
       M59.4,28.3h87.2V47.7h-64v45H137v19.4H82.6v63.4H59.4V28.3Z"
       calcMode="spline"
       keySplines="0.4 0 0.2 1; 0.4 0 0.2 1">
       </path>
    </svg>
    
    
    라이브러리 사용

    이런 제약 때문에 SVG 모핑 작업을 할 때는 라이브러리를 사용하는 것이 훨씬 생산성이 높습니다. KUTE.js (http://thednp.github.io/kute.js/svg.html)를 사용한 예제에서는 곡선이 자연스럽게 직선으로 바뀌도록 만들어줍니다.

    예제
    코드
    <!-- core KUTE.js -->
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js"></script>
    <script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-svg.min.js"></script>
    <svg class="svg-path">
      <path class="start" stroke="#247FFF" stroke-width="1" fill="none" d="M53.76,35.35h40.6c40.6,0,63,20.8,63,63.4v4c0,41.79-19.4,67-62.6,67h-41Zm41.4,119.19c29.8,0,43.2-14.8,43.2-49.19v-6.6c0-36.4-16.6-48-45.8-48H71.36V154.54Z"/>
      <path class="end" style="visibility:hidden" stroke="#247FFF" stroke-width="1" fill="none" d="M54.49,35h77.8V50.2H72.09v45h46.4v15H72.09v59.2H54.49V35Z"/>
    <script>
    var tween = KUTE.fromTo('.start', {path: '.start' }, { path: '.end' }).start();
    </script>
    </svg>
    
    

예제 구현

이제 실제 예제를 한번 구현해보겠습니다.

  1. 1. Line Drawing Effect(Stroke-Dasharray & Stroke-Dashoffset)
    코드
    
    /* Alphabet Reset */
    function alphabetReset(){
      $slider.find('.alphabet').each(function(){
        var $alphabet = $(this);
        var colorSet = $(this).data('color');
            colorSet = colorSet.split(',');
          $alphabet.find('.front svg').attr('fill', colorSet[0].trim());
          $alphabet.find('.back svg').find('line, path').attr('stroke', colorSet[1].trim());
          $alphabet.find('.back path').each(function(){
            $(this).attr('stroke-dasharray', parseInt($(this).get(0).getTotalLength())+1);
          });
          $alphabet.find('.back line').each(function(){
            var line = $(this);
            var lineLength = dist(line.attr('x1'), line.attr('x2'), line.attr('y1'), line.attr('y2'));
              line.attr('stroke-dasharray', parseInt(lineLength)+1);
    
          function dist(x1, x2, y1, y2){
            return Math.sqrt( (x2-=x1)*x2 + (y2-=y1)*y2 );
          }
        });
      });
    }
    
    
    초기설정 자바스크립트로 dash-array 설정해주는 부분
    
    //SVG
    $item.find('.alphabet .front').animate({opacity:svgOpacity}, time);
    $item.find('.alphabet .back').each(function(){
      $(this).find('path').each(function(){
        svgLength = $(this).attr('stroke-dasharray');
        svgDashOffset($(this), svgLength);
      });
      $(this).find('line').each(function(){
        svgLength = $(this).attr('stroke-dasharray');
        svgDashOffset($(this), svgLength)
      });
    
      function svgDashOffset($target, svgLength){
        if(idx == nowIdx){//현재
          svgOffset = svgLength,
          svgOffsetBasic = 0;
        }else{
          svgOffsetBasic = svgLength,
          svgOffset = 0;
        }
        $target.css('strokeDashoffset',svgOffsetBasic).animate({'strokeDashoffset':svgOffset}, time);
      }
    });
    
    
    애니메이트 시키는 부분
  2. 2.이동 효과

    mousemove 이벤트가 실행 될 때마다 현재 마우스 위치를 기준선과 비교하여 알파벳 영역과 마스크 영역을 움직이게 만듭니다.

    원리

    기준선을 화면 너비/높이 정 가운데(x, y)로 설정합니다.
    현재 마우스 위치(e.pageX, e.pageY)에서 기준선 위치를 빼서 나온 값으로 얼마나 떨어져 있는지를 (move_x, move_y) 계산합니다.
    move_y 가 양수이면 마우스가 아래, 음수이면 마우스가 위로 이동한 것입니다. move_x 가 양수이면 마우스가 좌, 음수이면 마우스가 우로 이동한 것입니다. 이 이동량에 임의의 최대 이동치를 곱해 마우스 위치에 따라 영역을 움직입니다.

    코드
    /* Alphabet Moving */
    function alphabetEffect(area){
    	var $area = $(area),
    		$targetArea = $area.find('.alphabet');
    
    	var $mask = $area.find('.slide-mask'),
    		$maskW = window_w,
    		$maskH = $mask.innerHeight(),
    		$maskBg_W = window_w,
    		$maskBg_H = window_h,
    		$front = $area.find('.front'),
    		$frontW = $front.innerWidth(),
    		$frontH = $front.innerHeight(),
    		$frontBg_W = $targetArea.innerWidth(),
    		$frontBg_H = $targetArea.innerHeight(),
    		pageX, pageY;
    
    		$(document).off('.alphabet');
    		$(document).on('mousemove.alphabet, touchmove.alphabet', function(e){
    			if(animated){
    				//기준선에서 얼마나 떨어져있는지 계산
    				var x = window_w / 2,
    					y = window_h / 2,
    					pageX = isMobile ? e.touches[0].pageX : e.pageX,
    					pageY = isMobile ? e.touches[0].pageY : e.pageY,
    					basic_x = x - pageX,
    					basic_y = y - pageY;
    
    				//비율계산
    				var front_transform = {
    					rotateY: basic_x*0.01,
    					top: basic_y * -0.05,
    					left: basic_x * 0.05
    				}
    				$targetArea.find('.moving').css({
    					transform:'rotateY('+front_transform.rotateY+'deg)',
    					top:front_transform.top,
    					left:front_transform.left
    				});
    			}
    		});
    }
    
    

    (이동량 * 0.05) 픽셀만큼 top 값과 left 값이 이동하고,
    (이동량 * 0.01) 각도 만큼 Y축 회전(rotateY) 할 수 있도록 처리한 코드.
    top 값은 마우스 움직임을 그대로 따라가기 위해서 -를 붙입니다.

    최대 이동량 정하기

    다음으로 알파벳 내부의 절반영역(.front)과 마스크 영역(.slide_mask)이 움직이는 퍼센트를 정합니다.

    원리

    이동량(move_x)을 부모영역(각각 .front, .slide_mask)으로 나누어 부모 기준 몇 % 이동했는지를 계산(이동량/부모영역)합니다.
    여기에 최대 이동치를 곱합니다. move_x 가 50%(window_w / 2)를 기준으로 이동량을 계산 했기 때문에 1은 0.5, 10은 5, 100은 50 입니다. (여기서는 최대 5% 만큼 좌우로 이동할 수 있도록 10을 곱하겠습니다.)

    코드
    
    //기준선에서 얼마나 떨어져있는지 계산
    var x = window_w / 2,
    	y = window_h / 2,
    	pageX = isMobile ? e.touches[0].pageX : e.pageX,
    	pageY = isMobile ? e.touches[0].pageY : e.pageY,
    	basic_x = x - pageX,
    	basic_y = y - pageY,
    	MAX_MOVE = 5, //보정값
    	MAX_MOVE_MASK = 10;
    
    //비율계산
    var front_transform = {
    	width: 50 + (basic_x / $frontBg_W * MAX_MOVE),
    	rotateY: basic_x*0.01,
    	top: basic_y * -0.05,
    	left: basic_x * 0.05
    }
    var mask_X = 100 - (50 + (basic_x / window_w * MAX_MOVE_MASK));
    $mask.css({right:mask_X+'%'});
    $front.css({width:front_transform.width+'%'});
    $targetArea.find('.moving').css({
    	transform:'rotateY('+front_transform.rotateY+'deg)',
    	top:front_transform.top,
    	left:front_transform.left
    });
    
    

    50 + ((이동량/부모영역) * 최대이동치)
    알파벳 영역이 Y축 회전 하고 left 값이 이동하므로, 같은 값으로 지정하면 어긋나는 모습이 보여 임의의 보정값을 적용(피시일 경우만)하였습니다.

SVG 작업 이슈와 개선 방법

  1. 1.export 전 최적화 작업은 필수

    일러스트레이터 등의 그래픽 툴로 SVG 파일을 작업한 후 외부 출력할 때는 최적화 과정을 거치는 것이 좋습니다. 복잡한 SVG일 수록 불필요한 출력 코드를 줄이면 보다 알아보기 쉬운 코드가 됩니다.

    불필요 선을 정리하여 패스 수를 줄인 모습. 용량이 줄어든다.
    SVG Cleaner https://github.com/RazrFalcon/svgcleaner-gui/releases 와 같은 압축툴을 사용하는 방법도 있다.
  2. 2.폴백(fallbacks)

    폴백이란 어떤 기능이 제대로 동작하지 않을 때, 이에 대처하는 기능 또는 동작을 의미합니다.
    만약 최신 브라우저만을 지원한다면 상관 없겠지만 ie8 과 같은 구형 브라우저에서도 작동되기를 원한다면, SVG 대신 이미지가 노출 될 수 있도록 코드를 개선합니다. 아래는 PNG 폴백 자동생성 사이트 중 하나인 grumpicon(http://www.grumpicon.com/) 입니다.

    grumpicon 에서 자동생성해주는 폴백 파일들

끝으로

SVG 모션을 분석하고 구현해 보고, 작업시 발견할 수 있는 이슈와 개선사항을 논해보았습니다.
점차 증가하는 모션 작업에 있어서 SVG는 훌륭한 선택지 라고 생각합니다.
하지만 복잡한 SVG 모션을 사용해야 할 경우, 제약사항이 많기 때문에 작업 시 주의하여 사용해야 하겠습니다. 라이브러리를 사용하여 생산성을 높이는 것도 좋은 방법입니다. 웹 상에서 유명하고 자주 활용되는 svg 라이브러리를 함께 소개하면서 이 글을 마치겠습니다.

No. 007

Written by Jeon Sohyeon Developer at D.FY on September 18, 2018

No.Eight

Who is NEXT?

Coming soon…

No. 008

We're here to put a dent in the universe. Otherwise why else even be here?

우리는 우주에 흔적을 남기기 위해 여기에 있다.
안 그러면 여기에 있을 이유가 어디 있겠는가?

Steve Jobs 1955-2011

Thank you for watching

© 2018 D.FY Inc. DEFY THE CURRENT™