피그마로 이해하는 웹팩
피그마와 웹팩이 무슨 연관이 있을까?
피그마로 직접 그린 이미지피그마와 웹팩이 무슨 연관이 있을까?
웹팩은 오픈소스 자바스크립트 모듈번들러이다.
번들링은 여러개 나누어진 파일들을( html, js, css, images) 하나의 코드로 만든다.
기능적인면에서는 피그마와 상관없어보일 수 있다.
그런데, 흐름만 놓고 보면 우리가 사용하는 피그마에서도 유사한 형태를 볼 수 있다.
피그마로 직접 그린 이미지피그마로 디자인 하는 과정에서 여러개의 프레임, 이미지, 심볼, 스타일등을 사용한다.
이런 다양한 요소의 조합으로 페이지별 화면 디자인을 한다.
위의 이미지는 공식 피그마 프로토타입 설명에 있는 다크모드와 라이트 모드를 지원하는 서비스 디자인이다.
각 화면은 3개의 탭으로 메뉴가 구성되어 있다.
화면간 이동은 하단의 탭바로 이동하고 각 페이지에서는 스크롤을 통해 화면 내용을 볼 수 있다.
피그마로 직접 그린 이미지디자인 작업 화면에서는 여러개의 프레임, 심볼, 이미지, 스타일등이 따로 분리되어 관리된다.
이를 프로토타입이라는 과정을 거쳐 프레젠트로 보면 하나의 화면으로 볼수 있게 된다.
피그마의 이런 과정이 웹팩과 유사한 흐름을 보인다.
우리가 디자인한 화면을 보고 개발자는 html, css, js, image, icon등을 사용하여 개발을 진행한다.
먼저 프로토타입을 보고 전체 디자인 흐름에 대해 이해를 한다.
각 화면별로 우선순위를 정하게 되고 그안에 들어갈 요소들에 대해 필요한 작업준비를 한다.
이런 준비과정을 거쳐 개발 작업을 진행하게 되는데 실제 작업하는 과정에서는 숲을 보면서 한다기 보다 나무를 보면서 작업을 하게 된다.
각각의 나무들에 집중하여 필요한 작업들을 진행하고 이런 나무들의 관계를 연결하다보면 어느순간 숲에 해당하는 서비스가 완성된다.
서비스가 완성되고 사용자에게 전달된다 하더라도 이들의 요청사항등에 의해 계속해서 숲에 존재하는 나무들을 보고 수정해야한다.
피그마로 직접 그린 이미지웹팩이 필요한 이유는 무엇일까?
이는 네트워크와 밀접한 관련이 있다.
우리가 스마트폰으로 사용하는 카카오톡, 유튜브, 인스타그램등은 보이지 않는 네트워크란 고속도로를 통해서 필요한 내용이 전달 된다.
네트워크는 고속도로와 같아서 모든 데이터가 이동하는 순간 병목 현상이 일어날수 밖에 없다.
네트워크는 하나의 데이터가 지나가야 그다음 데이터가 갈 수 있다.
우리가 만든 서비스는 개발이라는 과정을 거쳐 파일이나 데이터 형태로 전달된다.
이런 데이터가 많아질수록 네트워크는 병목현상이 일어나게 된다.
병목현상이 일어나면 필요한 데이터가 통과하는 시간이 늘어나게 된다.
시간이 늘어나면 서비스를 이용하는 사용자는 불만이 쌓이게 되고 결국 애써 만든 서비스를 안쓰게 될수도 있다.
피그마로 직접 그린 이미지이 문제는 웹팩을 통해 해결할 수 있다.
네트워크에 진입하기전 서버에 존재하는 파일이나 데이터를 버스에 해당하는 번들링 파일로 만들어 보내는거다.
하나의 파일형태로 네트워크를 통과하게 되니 시간이 늘어나는것을 방지할수 있다.
사용자에게 전달하는 시간을 줄임으로서 사용자 만족도를 높일수 있다.
