UI 프레임워크 고민

Photo by Randy Fath on Unsplash

요즘 프론트엔드 기술 선택할 때 가장 큰 고민은 어떤 UI 프레임워크를 사용할 것인지 혹은 사용하지 않고 직접 만들 것인지다. 얼핏 생각하면 잘 만들어진 UI 프레임워크의 도움을 받는 것이 일을 줄일 수 있을 것 같지만, 막상 도입해보면 문제가 있다. 그렇다고 작은 규모의 팀에서 새로 프레임워크를 만든다는 것은 너무나 막막한 일이다. 이 글에서는 UI 프레임워크를 비교 추천하기 보다는 그 고민과 나름의 해답을 적어보고자 한다.

UI 프레임워크를 사용하면 잘 디자인된 다양한 컴포넌트를 쉽게 사용할 수 있다. 큰 기업의 노력으로 만들어져서 뛰어난 시각적 디자인과 API 디자인을 갖추고 있다. 추상화가 잘 되어있으므로 적은 코드만으로도 괜찮은 결과물을 만들 수 있다. 여러 사람들이 사용하므로 여러 브라우저에서 안정적이고 꾸준히 지원될 것을 기대할 수 있다.

하지만 막상 사용해보면 원치 않게 디자인된 컴포넌트를 어렵게 사용하게 된다. 프로젝트의 디자인과 다른 부분을 맞추기 위해 스타일 맞춤설정이 필요하지만 쉽지 않다. 불필요한 컴포넌트와 기능 때문에 번들 크기가 커진다. API 문서를 보면서 익히는데 시간이 많이 걸린다. 호환성 때문에 최신 기술을 못 사용하기도 한다. 고쳐지지 않는 버그가 있을 수 있고, 지원이 중단될 수도 있다.

프레임워크는 사용자를 제한한다. 프로젝트의 요구사항이 이 제한 안에 들어간다면 좋겠지만 그렇지 않을 때가 많다. 프레임워크마다 맞춤설정을 지원하는 범위가 다르다. Semantic UI React의 API 설계는 잘 되어있지만 정의된 theme를 바꾸려면 직접 CSS를 빌드하는 과정을 거쳐야 한다. Grommet은 복잡한 theme 설정을 지원한다. Uber의 Base Web은 theme 설정에 세밀한 Overrides 기능을 가지고 있다. 그렇지만 이 기능을 사용하려면 일단 프레임워크에 익숙해져야 하고, 딱 내가 고치고 싶은 부분만 지원하지 않을 수도 있다.

그렇다면 역시 직접 만들어야 할까? 이미 존재하는 UI 프레임워크를 따라잡는 것은 불가능하지만, 필요한 범위만 만드는 것은 가능하다. 필요한 컴포넌트와 prop만 최소한으로 만들면 된다. 요구받은 디자인만 지원하면 되고 최신 기술을 사용할 수도 있다. 그러나 엄청난 투자를 하지 않는 이상 이미 널리 사용되는 UI 프레임워크의 장점을 가질 수 없다.

결국 두 방법 다 장단점이 있고 어느 한 부분을 포기하면서 선택해야 한다. 이 선택에 도움이 되었던 나름의 해답은 다음과 같다.

• 사이드 프로젝트로 여러 UI 프레임워크를 써보자.
• 비슷한 기술 스택의 UI 프레임워크 코드를 살펴보자.
• 필요한 컴포넌트를 만들어보자.
• UI 프레임워크 만드는데 유용한 기술을 알아두자.

사이드 프로젝트로 여러 UI 프레임워크를 써보자.

여러 프레임워크를 써보면서 장단점을 파악해두면 프레임워크 선택의 순간에 도움이 된다. 또한 프레임워크의 API를 사용하면서 좋은 점을 기억해뒀다가 나중에 직접 컴포넌트나 프레임워크를 만들 때 적용시켜볼 수 있다. 여러 프레임워크를 써보는데 시간이 오래 걸린다면, 팀원들끼리 각각 하나씩 맡아서 조사해 볼 수도 있다.

비슷한 기술 스택의 UI 프레임워크 코드를 살펴보자.

사용하는 것을 넘어서 코드를 들여다보면 배울 점이 더 많다. 내 경우에는 styled-components를 사용하는 Grommet에서 다양한 style을 정리하는 방법을 봤던 것이 큰 도움이 되었다. 코드 전체를 보는 것은 힘드므로 관심있는 기능이나 컴포넌트 위주로 살펴보는 것이 효율적이다.

필요한 컴포넌트를 직접 만들어보자.

프레임워크에서 제공하지 않거나 맞춤설정이 안되는 컴포넌트를 직접 만들어보자. 간단한 컴포넌트라도 은근히 신경쓸 것이 많다. 브라우저별로 다른 스타일로 나오기도 하고, 평소에 몰랐던 HTML attribute도 알게될 것이다.

UI 프레임워크 만드는데 유용한 기술을 알아두자.

예를 들어 styled-components는 기본적으로 theming을 지원하므로 여러 컴포넌트 사이에 일관성을 맞추고, 색상, 폰트 등의 전체 변경이 쉬워진다. 더 나아가서 Rebass를 사용하면 prop으로 더 간단히 theme를 사용할 수 있고, 특히 반응형 디자인이 쉬워진다. Rebass 관련해서는 장단점을 정리한 글을 계획중이다.

웹 프론트엔드, 음악, 책 등등
by 조용준