모두의 차박의 초기 아이디어 기획단계가 슬슬 마무리되고 본격적인 개발을 시작한다.
기획한 아이디어를 어떻게 웹으로 구현할지
Figma 프로그램을 활용해서 화면설계를 진행했다.
OVEN으로도 간단한 화면설계를 해봤지만, 나한테는 피그마가 좀 더 손에 익었다.
WorkSpace를 도화지에 그리듯 자유롭게 배치할 수 있는 것도,
모든 element 들에 이름을 주는 기능 등등
프로젝트 시작할 때 전체적인 프로젝트 흐름이 머릿속에 있고,
그 흐름을 한눈에 확인하면서 하나씩 꺼내보며 개발하는 내 스타일에 딱 맞았다 !
(Oven을 Figma 만큼 더 알아보지 못해서 그런 걸지도..)
팀원들이랑 공유하면서 피그마로 만들어낸 전체적인 UI 디자인 결과 !
여기까지는 도화지에 그린 그림 정도라고 할 수 있다.
1차 프로젝트 때는 시간 관계상 이 그림을 진짜 그림으로밖에 사용하지 못했다😂
이번 2차 프로젝트에는 그림에서 그치지 않고,
이 그림을 css 코드로 바꿔주어 실제 개발하려는 웹에 적용을 하려고 한다.
이 때 필요한 툴이 Zeplin !!
제플린은 디자이너에 의해서 프로토타이핑된 디자인을 바탕으로 코드를 생성해주는 프로그램이다.
현재 제플린과 연동 가능한 디자인 툴은 Sketch, XD, Photoshop, Figma로 알려져 있다.
제플린을 활용하기 위한 순서는 아래와 같다.
여기까지는 그리 어렵지 않다 !!
1) plugins > browse pligins in Community
2) 플러그 인에서 제플린 검색해서 설치
3) 내보내기할 Frame, 범위 잡기
4) Plugins > Zeplin 클릭> Export
미리 생성해두었던 프로젝트를 열어보면 피그마에서 작업한 화면들이 옮겨져 있는 것을 확인할 수 있다.
Frame을 선택하면 해당 Frame이 활성화되고, 프레임 안에 있는 요소를 선택하면
오른쪽에 CSS와 HTML 코드가 나오는 것을 확인할 수 있다 !
이렇게 피그마로 디자인한 웹 화면을 제플린을 통해 코드로 변환했다면
이제 직접 개발할 때 코드를 복붙해서 사용하면 된다.
혼자 하는 개발이 아닌만큼 팀원들 간에 소통이 생각보다 매우 중요하다는걸 다시 느낀다😅
말 하면 될 것 같으면서도 쉽게 말하기 애매하고,
각자가 가진 생각들을 하나의 아이디어에 녹여낸다는게 쉽지 않은 과정인 것은 분명하지만
내가 생각한 것과 옆자리 팀원 들이 생각한 것들이 조화롭게 어우러져
'아름답게' 마무리 될 것이기 때문에 매일 매일이 기대 된당😘😎
이제,
찾아온 템플릿을 설계한 화면 바탕으로 수정해나가면서
우리 아이디어의 기술적인 부분을 추가하는 일만 남았다.
혹시 반대로 (zeplin -> figma) 도 진행할 수 있을까요?