연간 목표 달성, 자체 브랜딩, 사용자 피드백 반영 등의 이유로 디자인 개편과정에서의 공용컴포넌트제작의 경험에 대해 작성해보려 한다.
1. 여러 랩퍼 태그들에 의한 스타일적용 어려움.
기존에 완성된 antd컴포넌트에 css를 추가적으로 작성하려 할 때 인라인 스타일로 작성해도 반영이 안 되는 경우가 매우 많았다. 예시로 셀렉트 컴포넌트가 있었는데, 적용하기 위해 작성한 코드를 예를 들면 다음과 같다.
&.ant-select-single .ant-select-selector {
.ant-select-selection-item,
.ant-select-selection-placeholder {
line-height: 40px;
}
}
&.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
height: 36px;
font-size: 14px;
padding: 0px 10px;
border-radius: 8px;
}이처럼 기존에 완성된 antd라이브러리에 직접 css를 추가작성 하려다 보니 일일이 런타임 환경에서 개발자도구를 통해 선택자를 찾아야 하며, 선택자 조합이 한눈에 알아보기 어렵게 복잡해진다.
2. 컴포넌트 이름 짓기 + 동료개발자가 작업 시 페이지 내에 어떤 컴포넌트가 공용으로 만들어져 있는지 파악이 안 됨
대표적으로 버튼 컴포넌트가 많아지면서 컴포넌트의 이름 짓기가 까다로워졌다. 처음엔 primary, secondary처럼 피그마 디자인에 주어진 기준으로 이름을 작성했었지만 피그마에 etc로 구분된 부분의 버튼들은 UploadButton, AnswerButton...처럼, 사용되고 있는 페이지의 컨텍스트를 그대로 가져와 이름을 짓게 되었다. 이렇게 작성된 이후에 발생된 문제점의 일화로, 동일한 프로젝트에서 다른 기능을 작업하고 있는 동료개발자 또한 UploadButton으로 정의된 버튼의 디자인이 필요한데 그곳에선 버튼이 '업로드'의 역할을 하지 않고 '바코드 생성'의 역할을 하는 버튼이었고, UploadButton이 그 의미를 담고 있지 않아 공용컴포넌트에 존재함에도 불구하고 새롭게 컴포넌트를 만드는 비효율이 발생했다. 공용으로 만들어놓은 컴포넌트에 대해서 이미지만이라도 문서화하여 남겨놨더라면 줄어들었을 문제였다.
3. 완벽한 공용화에 대한 집착
새롭게 디자인된 UI를 완벽하게 공용화하려다 보니 개발속도가 더뎌졌었다. 피그마에 컴포넌트로 분류된 항목들을 전부 components폴더 내부로 위치시키려다 보니 개발과 디자인이 동시에 진행되는 상황에서 새로운 디자인이 추가될 때마다 기존에 작성된 컴포넌트에 추가하기가 까다로워졌다. 그래서 props로 구분을 짓는것이아닌 Button폴더내부에 여러 버튼들을 만드는 방식을 적용했으나, 이렇게되면서 이름짓기가 까다로워져 UploadButton같은 버튼이 탄생하게되었다. 자연스럽게 개발자간에 혼란이와서 2번과같은 문제가 발생하게되었다.
4. 디자이너와 의사소통 부재
디자인이 추가될 때마다 기존컴포넌트에 추가하기가 어려워진까닭이 디자이너와 개발자간 서로 생각하는 컴포넌트의 정의가 달랐다라고 생각한다. 예를들어 디자이너는 Button컴포넌트를 정의할때 '중요도'순으로 구분지었다. primary -> secondary -> teruary.. 식으로 말이다. 근데 내가 작업을할땐 과거 작업에서도 그렇고 어떤 특정한 기준, 예를들어 높이,패딩 폰트크기는 동일하되, 너비,색상같이 일부만 다른것처럼 디자인을 기준으로 컴포넌트를 작성했던터라 새로운 디자인이 추가될때마다 디자이너의 의도를 점점 알 수 없게되었다. 자연스럽게 피그마와 프로젝트의 components폴더의 구조가 달라졌고, 새로운 디자인이 추가될때마다 이상한 이름의 컴포넌트가 늘어나게 되었다.
결론
결과적으로 시행착오를 겪으면서 동료개발자들이 새로운 기능을 개발할 때 공용화된 컴포넌트를 사용하여 개발할 수 있게 되었다. 결국엔 설계단에서의 문제였다. 사전에 컴포넌트를 디자인기준으로 잡게 되었다면 하나의 기능을 하는 컴포넌트를 여러 파일로 이상한 이름으로 분류할 필요도 없었을 것이고, 새롭게 추가되는 디자인을 기존의 컴포넌트구조에 지금보다는 쉽게 추가할 수 있었을 것이다. 또한 애초에 다지인이 완전히 완성되지 않았는데 컴포넌트를 완벽하게 공용화하려는 시도 또한 문제가 있었다고 생각한다. 어느 정도는 중복이 발생해도 사용하는 페이지의 하위 폴더로 분류하여 컴포넌트를 우선 만들어놓고 추후에 공용화하는 방식으로 개발을 진행하는 것도 방법일 것이라 생각한다.