[Next.js 14로 백오피스 만들기] - 1. 시작 배경

1. Next.js로 백오피스 만들기를 시작하게 된 배경

 

최근 생산성이 높은 백오피스 시스템을 만드는 방법을 연구하고 있다.
내가 경험했던 백오피스 환경은 주로 서버 템플릿 엔진으로 만들어져 있었는데 HTML, Vanilla JS, jQuery, Boot Strap을 기반으로 구성되어 있었다.
백오피스 작업은 컴포넌트를 재사용하는 일이 많아서 허겁지겁 다른 메뉴를 참고해서 필요한 컴포넌트를 Copy & Paste를 하고 짜깁기하는 식으로 작업을 했었다.
초반에는 빠르게 개발할 수 있었지만 시간이 지날수록 중복코드가 많아졌고 컴포넌트가 일관되게 동작하지 않는 문제가 발생했다. 결국 재사용성이 떨어지고 유지보수비용이 증가해 생산성이 떨어졌다.
이런 문제를 해결할 방법을 찾던 중 모던 프런트엔드에 대한 관심을 갖게 되었다.

2. 모던 프런트엔드 스킬의 장점

 

모던 프런트엔드 스킬은 구현과 유지보수 측면에서 유리한 점이 많았다.
내가 관심이 있던 것은 React, Next.js, Tailwind CSS 그리고 Antd, MUI 같은 UI 라이브러리인데 그 이유는 다음과 같다.

2.1. React

React는 컴포넌트라는 단위로 재사용 가능한 UI를 구성할 수 있다.
비슷한 컴포넌트를 활용해 메뉴를 구성할 일이 많은 백오피스에서는 React를 활용하는 것이 유리하다고 생각했다.

2.2. Next.js

Next.js는 React 프레임워크로 정해진 규칙에 따라 코딩을 해야 한다.
자유도가 떨어진다는 느낌을 받을 수 있지만 긍정적으로 해석해 보자면 구조에 대해 고민하는 리소스를 줄이고 팀에서 일관된 구조를 공유할 수 있다는 장점이 있다.
그리고 새로운 팀원이 합류하는 상황에서도 프레임워크에 익숙하다면 프로젝트에 빠르게 적응할 수 있기 때문에 실무에도 적합하다고 느꼈다.

2.3. Tailwind CSS

Tailwind 또한 위와 비슷한 이유로 선택했다.
마크업 구조와 CSS에 대한 고민을 해본 사람이라면 누구나 한 번쯤 클래스 네이밍과 구조화로부터 고통을 받은 경험이 있을 것이다.
이런 고통으로부터 자유로워지기 위해 TailwindCSS를 선택했다.
또한 Tailwind는 Boot Strap과 사용법이 비슷해서 Boot Strap을 사용해본 적이 있는 개발자라면 적응하기 쉽다.

2.4. UI Library

Antd, MUI 같은 UI 라이브러리를 사용하면 검증된 고품질의 컴포넌트를 쉽게 가져다 쓸 수 있다는 장점이 있다.
단순해 보이는 컴포넌트라도 직접 개발하려면 생각보다 고려해야 할 점이 많다.
예를 들어 Form에 필요한 단순한 Select 기능을 만든다 가정해 보자.
Select 컴포넌트는 선택된 요소를 보여주고 클릭하면 선택 가능한 옵션을 보여준다.
이를 구현하기 위해선 마크업, 이벤트핸들링, 상태관리를 고려해야 한다.
첫 번째로 마크업은 선택된 요소와 옵션 목록을 노출하기 위해 필요하다.
기본적인 select, option 태그만으로도 구현이 가능하지만, 기본 태그의 경우 OS 및 브라우저 설정에 따라 UI가 달라진다.
이 문제는 기본 태그만으로는 해결할 수 없기 때문에 다른 태그들을 사용해서 select처럼 동작하게끔 구현해야 하는 수고가 든다.
두 번째로 이벤트핸들링은 컴포넌트의 동작에 따라서 후속 행위를 처리해야 할 때 필요하다.
예를 들어 채용플랫폼의 이력서를 입력하는 상황을 가정해 보면 학력 여부가 대졸이냐 고졸이냐에 따라 전공 항목의 입력을 활성/비활성화하는 케이스가 있다.
이처럼 선택한 값에 따라 액션을 해야 한다면 상황에 맞게 컴포넌트에 이벤트 핸들링 로직을 추가할 수 있어야 한다.
마지막으로 컴포넌트의 상태를 조회, 조작할 수 있는 API가 필요하다.
컴포넌트의 활성여부, 상태, 입력된 값 등이 무엇인지 확인하거나 변경할 수 있어야 한다.
가장 어려운 건 이러한 요구사항들을 충족하면서 재사용 가능하게 설계하려면 인터페이스에 대한 고민도 많이 해야 한다. 생각할 부분이 꽤 많다.

 

3. 결론

 

앞서 언급한 고민과 이유들로 위 기술들을 사용해서 백오피스를 개발한다면 빠르게 고품질의 백오피스를 구성할 수 있을 것이라는 확신이 생겼다.
그래서 공부도 할겸 이번 글을 시작으로 Next.js 14, React 18, Tailwind CSS, AntD를 기반으로 한 백오피스 구성방법을 주제로 시리즈로 포스팅해 볼 계획이다.
비슷한 고민을 하는 분들에게 도움이 되는 내용이면 좋겠다.