피그마의 디자인은 사용자에게 어떻게 전달될까?
프로덕트의 모든 과정을 살펴보자
피그마로 직접 그린 이미지우리가 피그마로 디자인한 결과물이 사용자에게 전달되기까지 어떠한 과정이 존재할까?
이러한 과정을 체득하여 이해하기까지 필자또한 굉장히 오랜 시간이 걸린것 같다.
디자인 이후에 거쳐야 하는 각각의 과정들이 실제 개발자들이 알아야할 내용들이기도 하다.
각각의 과정들을 깊이 파보면 그또한 깊이가 상당하다는걸 알게된다.
그렇기에 실제 사용자에게 서비스하기까지의 과정을 체득하기가 어려운 것이다.
체득하다의 사전적 의미는 '몸소 체험하여 알다'라고 설명되어 있다.
머리로는 이해해도 그것을 실전에서 해결하는것은 차원이 다른문제이다.
피그마로 직접 그린 이미지Design
디자인이라는 용어는 지시하다·표현하다·성취하다의 뜻을 가지고 있는 라틴어의 데시그나레(designare)에서 유래한다. ( https://ko.wikipedia)
피그마, 스케치, 포토샵을 사용하여 유저들이 사용할 프로덕트를 기획하고 시각적으로 표현한다.
피그마로 직접 그린 이미지Handoff
디자인으로 표현된 각 페이지내 컴포넌트들의 디자인을 코드로써 볼수 있게 만든 툴이다.
대부분의 개발자들이 zeplin을 통해 프로젝트를 진행한 경험을 가지고 있다.
피그마를 통해 별도의 export 과정없이 이런 기능을 사용할 수 있다.
https://brunch.co.kr/@eddwardpark/24
피그마로 직접 그린 이미지Dev Env
개발 환경은 실제 코드를 적용하는 프레임워크가 작동하는 베이스라고 볼 수 있다.
node module에는 react, vue등의 프레임워크를 구동할 수 있는 많은 라이브러리들이 포함되어 있다.
npm은 노드모듈외에 오픈소스로 공개된 라이브러리를 사용하게 도와주는 패키지 매니저이다.
https://brunch.co.kr/@eddwardpark/15
피그마로 직접 그린 이미지Code
핸드오프로 표현된 디자인코드를 반영하여 제품을 만드는 과정이다.
react, vue, angular, svelte등이 있으며 이들은 최종적으로 브라우저에서 실행될때에는 자바스크립트로 변환되어 제공되어 진다.
자바스크립트로 변환되는 과정을 번들링이라고 하며 대표적으로 webpack이 있다.
https://brunch.co.kr/@eddwardpark/36
피그마로 직접 그린 이미지Git
깃(Git /ɡɪt)은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템이다. ( https://ko.wikipedia)
깃은 여러명의 개발자들이 만든 코드를 관리할 수 있게 한다.
이렇게 만들어진 통합된 코드들은 DEV, QA, LIVE 로 나누어 실제 사용자에게 전달하기전 테스트 과정을 거치게 된다.
피그마로 직접 그린 이미지CI
CI는 개발자를 위한 자동화 프로세스를 통한 지속적인 통합을 의미한다.
여러명의 개발자가 각자 코드를 수정하고 통합하는 과정에서 새로운 코드들이 충돌하는 경우가 많이 발생한다.
CI를 통해 개발자는 가장 최신의 통합된 코드를 유지하여 이런 문제들을 제거할 수 있게 된다.
피그마로 직접 그린 이미지Cloud
클라우드 컴퓨팅(영어: cloud computing)은 사용자의 직접적인 활발한 관리 없이 특히, 데이터 스토리지(클라우드 스토리지)와 컴퓨팅 파워와 같은 컴퓨터 시스템 리소스를 필요 시 바로 제공(on-demand availability)하는 것을 말한다. ( https://ko.wikipedia)
클라우드 서비스들이 존재하기 이전에는 물리적인 서버 컴퓨터를 구매하여 통합된 서비스 코드를 적용해 사용자에게 서비스를 제공했다.
대표적인 클라우드 서비스는 아마존 aws, 구글 gcp, 마이크로소프트 azure등이 있다.
이러한 서비스들을 통해 우리가 만든 프로덕트가 유저에게 서비스된다.
피그마로 직접 그린 이미지Browser
웹 브라우저 또는 브라우저(영어: web browser 또는 browser, 문화어: 열람기)는 웹 서버에서 이동하며(navigate) 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어이다. 웹 브라우저는 대표적인 HTTP 사용자 에이전트의 하나이기도 하다. ( https://ko.wikipedia)
대표적인 브라우저는 구글 Chrome, 애플 Safari, 마이크로소프트 Edge등이 있다.
이러한 브라우저를 통해 실제 유저들이 우리가 만든 서비스를 사용하게 된다.
