피그마로 알아보는 HTML
디자인에서 사용자까지
피그마로 직접 그린 이미지우리가 디자인툴을 이용해 만든 서비스의 페이지는 어떻게 사용자에게 전달될까?
먼저 서비스를 만드는 과정부터 유저가 사용하는 과정까지 기술해보자.
만들고자 하는 서비스의 기획을 한다.
기획서에 따라 페이지별로 디자인을 한다.
디자인에 맞춰 html 형태로 마크업 한다.
html 파일에 버튼등의 동적요소(버튼클릭시 다른페이지로 이동등)의 자바스크립트를 작성한다.
만들어진 html 파일을 cafe24, 아마존 AWS등 호스팅 업체의 서버에 업로드 한다.
사용자는 브라우저(크롬, 익스플로러, 사파리등)를 통해 우리가 만든 서비스의 웹주소(http://www.address)로 접속한다.
브라우저는 호스팅 서버로 부터 html, css, js파일을 다운로드 한다.
다운로드 받은 파일의 정보를 브라우저에 렌더링한다.
위의 이미지는 사용자가 서비스 웹주소에 접속할때 네트워크에 일어나는 현상을 보여준다.
처음으로 index.html을 다운로드 하는것을 볼수 있다.
우리가 만든 서비스는 index.html로 부터 시작한다는것을 짐작할 수 있다.
피그마로 직접 그린 이미지html 파일안을 들여다 보면 계층구조로 이루어진것을 볼수 있다.
<html>이 최초의 조상이고 <head>, <body> 두개의 자식들이 있다.
그리고 <head>와 <body>는 각각 수많은 자식들을 가지고 있다.
헤더에는 (1)타이틀, 메타데이터, 파비콘, css, js등에 대한 정보를 담는다.
바디에는 (2)<h1>, (3)<hr>, (4)<h1>, (5)<h2>, (6)<p>, (7)<button>등 여러가지 태그가 자식으로 포함되어 있다.
피그마를 통해 디자인한 수많은 요소 대부분은 <h1>, <p>, <button>, <input>등의 다양한 태그와 매칭되어 <body>의 자식에 포함된다.
출처 : https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-prototyping-in-Figma헤더에 포함된 자바스크립트를 피그마와 비교해 보면 피그마의 프로토타이핑에 해당한다.
프로토타이핑을 통해 동적 화면을 만드는 과정에서 코드를 작성할 필요는 없다.
개발자가 자바스크립트에 동적 코드를 만드는 과정을 피그마가 자동으로 만들어 주기 때문이다.
우리가 만든 서비스도 자바스크립트 코드를 통해 동적(화면이동, 애니메이션등)으로 만들어지는 것이다.
피그마에서는 우리가 디자인한 각 객체들에 대한 코드를 우측 inspect 패널을 통해 확인할 수 있다.
개발자는 우선 css 파일을 생성한다.
css 파일안에 피그마로 디자인된 각각의 객체에 대한 이름을 만든다.
네이밍된 객체에 피그마 inspect창을 확인하여 스타일 정보를 코드로 입력한다.
html 파일에서 디자인과 매칭되는 태크에 css 파일에서 정의한 이름을 연결한다.
우리가 디자인한 결과물은 html, css, js의 파일로 만들어야 비로소 사용자에게 전달할 준비가 되는 것이다.
