피그마로 개발 구조 잡기
디자인을 개발에 맞게 구조화 하기
피그마로 직접 그린 이미지위의 이미지는 최근 필자가 참여한 프로젝트의 일부분을 각색하여 피그마로 재구성한 디자인이다.
실제 개발까지 진행된 프로젝트의 예제라고 보면 된다.
기획을 바탕으로 디자인을 완성하면 위의 이미지와 같이 2차원적으로 보여지게 된다.
2차원적인 컴포넌트들로는 개발자가 html의 구조를 잡기에는 매우 어렵다.
구조를 완성하고 javascript(react, vue등)로 로직을 개발하다 보면 로직에 따라 html구조 자체를 수정해야 하는 경우도 생기게 된다.
구조를 수정하면 또 로직에 대한 변경사항이 생기게 된다.
이런 과정의 반복이 개발의 실제 과정이라 보면 된다.
디자인 단계에서 개발에 최적화된 구조가 만들어 진다면 개발시간을 많이 단축할 수 있다.
html에 적용할 디자인의 구조가 잘 짜여 있기 때문에 로직을 개발하는 과정과 이에 따라 구조를 변경하는 과정을 줄일 수 있기 때문이다.
피그마로 직접 그린 이미지html의 구조는 나무(트리구조)와 유사한 점이 많다.
완성된 페이지를 기준으로 하나씩 분리하는 과정을 거치면 트리구조를 만들기가 수월하다.
섹션 구분하기
navbar
title section
main section
footer
웹개발의 시작은 페이지 상단의 나브바와 하단의 푸터를 만들고 컨텐츠가 표시될 영역을 따로 구분하면 된다.
여기서는 타이틀이라는 섹션을 따로 구분하였다.
간략하게 이유를 설명하자면 키워드로 컨텐츠를 찾는 기능때문이다.
키워드를 입력하고 검색 버튼을 누르면 컨텐츠 영역은 그에 맞는 것으로 바뀌어야 하기 때문이다.
섹션별 구조잡기
navbar
왼쪽: 회사 로고를 표시
중앙: 하위 페이지 링크 메뉴
오른쪽: 유저 페이지 링크( 유저의 상태에 따라 회원가입 또는 로그인으로 표시)
footer
회사 정보, 개인정보, 이용약관, 고객센터, 문의하기등을 표시
title
메인 컨텐츠의 타이틀과 검색창
main
왼쪽: 강조하고자 하는 피쳐컨텐츠를 카드 형태로 3개 표시, 사용자가 즐겨찾기한 내용을 리스트로 표시(링크를 통해 해당 컨텐츠로 바로가기)
오른쪽: 인기 컨텐츠, 새로운 음식점 리스트, 인기있는 음식점 리스트
컨텐츠 구성하기 (ex: New Restaurant)
새로운 음식점 전체 보기 페이지 이동 버튼
새로 등록된 음식점 카드 리스트
- 대표 음식 이미지
- 해당 음식점을 본 사용자수 표시
- 해당 음식점에 대한 댓글수 표시
- 음식점을 등록한 사용자 정보 표시
- 대표 음식 가격 표시
피그마로 직접 그린 이미지분리하는 과정에서 나누어진 컴포넌트들을 트리구조의 깊이별로 분류하면 위의 이미지와 같다.
각 깊이별로 분리할 영역을 붉은색으로 구분하여 표시하고 그 아래 영역을 다시 붉은색으로 표시하는 순서로 진행을 하였다.
이렇게 분리하여 트리구조로 만드는 작업에 익숙해지기까지 많은 연습이 필요하다.
위의 이미지는 피그마로 분리된 구조를 바탕으로 개발에 적용한 코드의 한 영역이다.
깊이별로 각 디자인 요소가 그에 맞는 html 태그로 들여쓰기 되어 있는 것을 볼 수 있다.
2차원적으로 디자인된 페이지를 개발자가 코드로 구조를 잡으면서 로직까지 개발하는것은 상당한 노하우를 필요로 하는 작업이다.
만약 디자인 요소들이 구조적으로 개발에 최적화 되어 있다면 개발과정에서 많은 이점을 얻게 된다.
더불어 구조화된 디자인 요소들의 네이밍까지 잘 완성되어 있다면 개발자는 겉으로 내색은 안하더라도 엄청 좋아할것이다.
https://brunch.co.kr/@eddwardpark/34
