안녕하세요, SR Platform 팀의 서승기라고 합니다. 이번 블로그 포스팅에서는 Next.js라는 Full-Stack Web Framework로 Playground를 제작해 부서 내 반복되는 업무의 효율성을 높인 사례를 공유하고자 합니다.

웹브라우저는 PC, Mobile 할 것 없이 기본적으로 탑재되어 있는 어플리케이션입니다. 그렇기 때문에 보통 웹 기술의 장점으로 접근성을 꼽는데요. 높은 접근성은 개발자에게도 적용됩니다. 특히 2024년 현재, 각종 생성형 AI 툴이 쏟아져 나오면서 웹 개발이 그 어느 때보다 쉽고 편리해졌습니다. 이 글을 쓰는 목적은 웹 기술을 바탕으로 업무 효율화를 이루고 싶지만 아직 실현하지 못한 분들을 위해 사례를 공유하고 첫걸음을 내딛을 수 있는 키워드를 전달하는 것입니다.

우선 Next.js부터 이야기하지 않을 수 없는데요. Next.js는 복잡한 웹 개발을 간소화하는 것을 넘어 일종의 Full-stack 웹 개발 표준처럼 자리 잡아가는 웹 프레임워크라고 보면 되겠습니다. 과거에는 웹 어플리케이션을 만들려면 클라이언트도 만들고, 서버도 만들고, 사용할 UI도 결정하는 등 복잡하고 많은 일이 필요했죠. 그런데 Next.js를 쓰면 한방에 해결됩니다. 이 프레임워크를 통해 앱을 생성하려는 경우 `create-next-app`이라는 명령어로 바로 시작할 수 있습니다. 이 명령어를 사용하면 폴더 구조가 생성되는데 이 자체가 완결된 어플리케이션입니다. 실제 개발된 Playground를 예로 들어보겠습니다.

위와 같은 구조로 폴더가 생성되어 있다고 가정해봅시다. chat이라는 폴더 아래에 page.tsx라는 파일이 보이는데요. 이 경우 http://localhost:port/chat 주소로 접근하면 playground/app/chat/page.tsx에 있는 내용이 자동으로 해당 웹 주소로 연결됩니다. 다른 페이지들도 마찬가지로 폴더를 기반으로 페이지가 연결되죠.

다음으로, Next.js 내부에서 핵심적으로 쓰이는 React에 대해 간단히 알아보겠습니다. React는 컴포넌트 기반과 단방향 데이터 흐름을 특징으로 하는 아키텍처를 가진 Web 개발용 UI 라이브러리입니다. 

예시 [2]

위 예시를 보면 “Profile”이라는 컴포넌트와 “Gallery”라는 컴포넌트가 있는데요. React에서는 함수를 정의하기만 하면 함수가 컴포넌트로 기능할 수 있습니다. 컴포넌트는 별다른 것이 아니고 HTML 형식의 트리 구조로 된 마크업 언어인 JSX를 리턴하는 함수입니다. “Gallery” 컴포넌트 안에서 이미 “Profile”이 세 번 재활용된 것을 볼 수 있습니다. 이런 식으로 만든 컴포넌트는 위 예시처럼 또 다른 컴포넌트에 활용될 수 있습니다. 예를 들면 다음과 같습니다.

예시 [3]

위 예시에서는 “App”이라는 컴포넌트에서 “Gallery”를 사용하고 있습니다. 이런 식으로 React는 트리 구조로 컴포넌트를 쌓아서 앱을 구성한다고 보면 되겠습니다.

위 예시에서 바로 느낄 수 있듯이 이런 구조는 각종 외부 라이브러리를 편리하게 사용하는 데 최적화된 구조입니다. Material-UI, Ant Design, Chakra UI, React Bootstrap, Fluent UI 등의 잘 알려진 외부 UI 라이브러리를 원하는 만큼 끌어다 쓸 수 있죠. 제가 활용한 “chakra-ui”의 경우 Button, Spinner, Select와 같은 대부분의 UI 컴포넌트를 직접 만들지 않고도 바로 사용할 수 있습니다. 개발 중인 앱에 사용할 외부 컴포넌트를 제가 만든 컴포넌트와 마찬가지로  “”과 같은 식으로 사용하면 됩니다.

이렇게 React 라이브러리를 사용해서 재활용성이 높은 UI를 구성하는 방법을 간단히 살펴봤는데요. 이제 Next.js를 포함한 전체적인 Playground 시스템의 구조를 만드는 방법을 알아보겠습니다. 저는 기존에 운영되고 있는 시스템들을 고려해 아래와 같이 구조를 잡았습니다. 기존에는 각 개발자가 curl 명령어를 사용하든 별도의 python 라이브러리를 쓰든, 나름대로 serving 중인 LLM 모델을 사용하는 구조였는데 여기에 Playground가 추가된 모습입니다.



예시 [4]

위 그림은 Playground가 도입된 이후의 전체적인 Architecture입니다. Playground를 직접적으로 serving하는 서버1과 좀더 고사양의 LLM 모델을 serving하는 서버2가 있습니다. 기존에는 서버2만 있었지만, 서버1이 추가되면서 개발자가 서버2의 기능을 편리하게 이용할 수 있게 되었고, 몇 가지 외부 LLM 모델도 손쉽게 활용할 수 있게 되었습니다. LLM 모델 사용을 Playground가 돕는 동시에 모든 쿼리 내용을 DB에 저장하고 조회할 수 있도록 시스템을 구성했습니다. 이렇게 구성함으로써 부서 내 개발자들이 LLM 모델에 좀더 용이하게 접근할 수 있을 뿐만 아니라 자신이 사용한 내역을 쉽게 조회하고 디버깅할 수 있습니다. (특히 Logging 기능이 많이 유용하다고 평가해주셔서 뿌듯했습니다.)



예시 [5][6]

마지막으로, Playground를 직접 개발하면서 Next.js와 같은 Full-Stack Web Framework를 사용했을 때 느낀 장점을 아래와 같이 정리해보았습니다.

1. 예전 같으면 UI 개발에만 며칠이 걸렸을지 모를 일을 서버 개발까지 모두 포함해서 약 10일 만에 혼자 마칠 수 있었습니다. 게다가 Playground 개발에만 전념하지 않고 원래 업무를 하면서 이렇게 빨리 완료했으니 생산성이 얼마나 높았는지 체감이 되시나요? 이 10일도 쓸 만한 수준이 될 때까지 걸린 시간이고, 초기 버전을 구현하는 데는 불과 5일 정도 걸렸습니다.
2. 웹 개발에 대한 학습을 대부분의 LLM이 충분히 하고 있습니다. 아마 웹 기반 기술 스택의 상당수가 오픈 소스이기 때문이 아닐까 하는데요. 위의 오른쪽 6번 이미지는 삼성전자 사내에서 활용되는 code.i라는 AI Coding Assistant인데 이 Assistant에게 Chat과 관련된 UI를 짜달라고 하면 실제로 잘 짜줍니다. 이런 식으로 생성된 코드가 거의 사용 가능하며 이 같은 LLM 도구 덕분에 Web 개발에 대한 진입장벽이 더욱 낮아질 수 있습니다.
3. 서두에 말씀드렸듯이 웹 기반으로 구현한 이유는 이 Playground를 혼자 사용하는 것이 아니라 동료들과 함께 협업하는 툴로 만들어 빠르게 피드백을 받으면서 구현하기 위한 것입니다. 높은 Next.js 기반 앱 생산성으로 이를 달성할 수 있었습니다.

지금까지 제 개인적인 경험담을 들려드렸는데요. 저와 같은 고민을 했던 개발자 분들에게 많은 도움이 되었으면 합니다.