피그마(Figma)로 설계한 화면 제플린(Zeplin)으로 반응형 웹 만들기

임지혜·2021년 10월 18일
8

TeamProject

목록 보기
1/1

🐱‍🏍 2nd Project

모두의 차박의 초기 아이디어 기획단계가 슬슬 마무리되고 본격적인 개발을 시작한다.


기획한 아이디어를 어떻게 웹으로 구현할지
Figma 프로그램을 활용해서 화면설계를 진행했다.



Prototyping by FIGMA

⛄ Figma ; UX/UI 디자인 툴

OVEN으로도 간단한 화면설계를 해봤지만, 나한테는 피그마가 좀 더 손에 익었다.

WorkSpace를 도화지에 그리듯 자유롭게 배치할 수 있는 것도,
모든 element 들에 이름을 주는 기능 등등

프로젝트 시작할 때 전체적인 프로젝트 흐름이 머릿속에 있고,
그 흐름을 한눈에 확인하면서 하나씩 꺼내보며 개발하는 내 스타일에 딱 맞았다 !
(Oven을 Figma 만큼 더 알아보지 못해서 그런 걸지도..)


팀원들이랑 공유하면서 피그마로 만들어낸 전체적인 UI 디자인 결과 !
여기까지는 도화지에 그린 그림 정도라고 할 수 있다.

1차 프로젝트 때는 시간 관계상 이 그림을 진짜 그림으로밖에 사용하지 못했다😂


이번 2차 프로젝트에는 그림에서 그치지 않고,
이 그림을 css 코드로 바꿔주어 실제 개발하려는 웹에 적용을 하려고 한다.


이 때 필요한 툴이 Zeplin !!


⛄ Zeplin ; 디자이너와 개발자의 협업 툴

제플린은 디자이너에 의해서 프로토타이핑된 디자인을 바탕으로 코드를 생성해주는 프로그램이다.

현재 제플린과 연동 가능한 디자인 툴은 Sketch, XD, Photoshop, Figma로 알려져 있다.


제플린을 활용하기 위한 순서는 아래와 같다.

🤖 피그마 -> 제플린

1. 제플린 가입/로그인 후 프로그램 다운로드

2. 프로젝트 생성

여기까지는 그리 어렵지 않다 !!

3. 피그마에서 제플린으로 내보내기

1) plugins > browse pligins in Community
2) 플러그 인에서 제플린 검색해서 설치
3) 내보내기할 Frame, 범위 잡기
4) Plugins > Zeplin 클릭> Export



4. 제플린에서 구성요소 확인

미리 생성해두었던 프로젝트를 열어보면 피그마에서 작업한 화면들이 옮겨져 있는 것을 확인할 수 있다.

Frame을 선택하면 해당 Frame이 활성화되고, 프레임 안에 있는 요소를 선택하면
오른쪽에 CSS와 HTML 코드가 나오는 것을 확인할 수 있다 !



...

이렇게 피그마로 디자인한 웹 화면을 제플린을 통해 코드로 변환했다면
이제 직접 개발할 때 코드를 복붙해서 사용하면 된다.



혼자 하는 개발이 아닌만큼 팀원들 간에 소통이 생각보다 매우 중요하다는걸 다시 느낀다😅

말 하면 될 것 같으면서도 쉽게 말하기 애매하고,
각자가 가진 생각들을 하나의 아이디어에 녹여낸다는게 쉽지 않은 과정인 것은 분명하지만

내가 생각한 것과 옆자리 팀원 들이 생각한 것들이 조화롭게 어우러져
'아름답게' 마무리 될 것이기 때문에 매일 매일이 기대 된당😘😎



이제,
찾아온 템플릿을 설계한 화면 바탕으로 수정해나가면서
우리 아이디어의 기술적인 부분을 추가하는 일만 남았다.

profile
Hello World :-)

1개의 댓글

comment-user-thumbnail
2023년 4월 3일

혹시 반대로 (zeplin -> figma) 도 진행할 수 있을까요?

답글 달기