디자인에 관한 개발자의 시선

- 제플린 사용

최근에는 웹 / 앱 개발을 위해 제플린을 많이 활용하는 추세다.

제플린의 장점은 컴포넌트의 높이와 넓이, 폰트 크기 및 weight 등 컴포넌트를 구성하는 속성을 클릭한번으로 바로 알 수 있다는 점이다. 특히나 컬러를 코드값과 이름으로 모두 받게 되는데 개발자 또한 중복되는 컬러코드를 변수로 사용하는 경우가 있어서 컬러 코드가 잘 정의되어있으면 디자이너와 개발자간의 소통과 개발이 수월하다.

제플린을 사용해 개발할때 난감할때가 있는데 자식 컴포넌트를 감싸는 부모 컴포넌트가 
Grouping 되어있으면 자식을 클릭하기 위해서 두번의 선택해야 하며, 이렇게 선택된 
컴포넌트는 타 컴포넌트와의 마진이나 패딩 확인이 되지 않는다. 
마진과 패딩을 쉽게 보여주기 위해 화면을 감싸야 하는 경우가 있지만 전체 그루핑은 
최대한 사용하지 않는게 좋다.

개발도 디자인도 마찬가지지만 중복되는 컴포넌트는 똑같이 사용되길 원한다. 예를들어 모든 페이지에 공통으로 사용되는 header의 경우 내부 컴포넌트 최대넓이와 높이등이 똑같이 지정되어야 재사용 가능한 컴포넌트화 될 수 있다. 로그인 페이지와 메인페이지에 헤더가 통일성이 없으면 개발은 어렵지 않지만 유지보수와 관리가 어려워진다. 예외상황은 최대한 적을 수록 좋다는 것이다.

 

- 개발 시작시

사람마다 다를수 있지만 필자의 경우 처음 제플린 화면을 받으면 페이지 개수를 세는 작업부터 한다. 빈 페이지라도 네비게이션을 연결해 두는 것으로 채워 나가야 할 컨테이너를 만들어 두면 대략적인 구조가 잡히고 그로인해 작업 시간 산정이 수월하기 때문이다.

빈 페이지를 모두 만들었으면 일단 상단부터 하단으로 제플린 디자인을 훝어보면서 반복되는 부분을 찾는다. 반복되는 부분은 처음부터 컴포넌트로 만들고 시작하면 시간이 절약되고 결국 최종 구조는 컴포넌트화 된 아이템들을 사용한 페이지가 완성될 것이기 때문이다. 예를들어 Input 필드위에 보통 있는 label의 구조를 본다. 이 라벨의 위치 (좌측 마진과 하단 마진)을 확인하고 라벨의 높이 너비등을 확인해서 공통으로 묶을 수 있는 부분이 있으면 클래스명 부터 Form으로 지정하고 작업을 시작한다. 

 

- 라이브러리

필요시마다 공통부분을 컴포넌트화 시키는 방법도 좋지만 기본적으로 몇개의 컴포넌트는 디자이너와 개발자가 서로 미리 개발해서 라이브러리화 한 뒤 작업하는게 좋다. 라이브러리는 어떤식으로도 변형 될 수 있도록 개방성을 가져야 하기에 최소한의 규칙만을 가지도록 한다. 버튼의 경우 호버와 액티브의 색을 어떻게 할지 정하고 border-radius와 배경 글자색을 지정하는 정도이다.

라이브러리화때도 마찬가지지만 하나의 디자인 화면에 모든 경우의 수가 다 들어있는 것이 좋다.
예를들어 회원가입 화면이 있어도 버튼이 hover 될때, 안될때, 회원가입 버튼이 활성화 / 비활성화 되었을 때
동의 체크박스가 선택된것 안된것 등의 요소를 한페이지에 표현하면 화면으로 나눠서 구성하는 것보다 
작업자의 리소스를 아낄수 있다.

 

-보이지 않는 박스

웹의 경우 제플린으로 작업할때 페이지의 전체 너비가 정해져있을 때가 있다. 예를들어 1000px의 페이지 너비를 가진 컨테이너가 가운데 정렬이 되어있는 상황이라면 그 컨테이너 기준으로 컴포넌트들의 위치가 계산된다. 하지만 만약 이 페이지의 너비가 1000px이라는 것을 개발자가 모르고 작업한다면 컴포넌트 간의 위치와 컴포넌트 자체 길이만으로 계산을 해야 하는 일이 생긴다. 따라서 최대한 grouping을 지양하는게 좋지만 전체 구조를 잡을때 사용했던 박스는 만들어 주는게 좋다.