
들어가며
어느덧 정신없는 2025년이 지나고 2026년 말의 해가 다가왔네요. 링크드인 및 각종 커뮤니티에 쏟아지는 회고록을 보며 다들 열심히 살았구나를 느꼈고, 짧게나마 기록을 해봐야겠다고 느꼈습니다. 코딩 교육이라는 완전히 새로운 도메인에서 일을 맡았으며, 또한 AI라는 거대한 물결을 몸소 경험한 한해였습니다.
모두의연구소에서의 1년

올해 3월 모두의연구소에 프론트엔드 개발자로 합류하게 되었습니다. 모두의연구소는 AI 교육 및 연구 중심의 커뮤니티형 교육서비스를 제공하는 회사로 저는 지원을 하면서 알게되었지만, 이미 학생들과 재직자들 사이에서는 어느정도 인지도가 있는 회사였습니다.
마침 AI가 광풍을 부는 시대에 시류를 탈 수 있는 도메인이라는 생각이 들어 합류를 결정하게 되었습니다.
LMS(Learning Management System)
저에게 올해 키워드는 'LMS'라 할 수 있을정도로 애착이 많이 가고 힘을 쏟은 프로젝트였습니다. 기존의 구 LMS는 레거시라 불릴정도로 코드가 노후화 되어있었고, 디도스(?)에 가까운 API 호출과 오래된 UI/UX로 인해 수강환경이 불편해 개편이 불가피한 상황이었습니다. 입사하자마자 프로젝트를 배정받았고 달리는 기차의 바퀴를 교체하기 시작하였습니다.
LMS라 표현하면 언뜻 와닿지 않을 수 있지만 쉽게 표현하자면 주피터 노트북 혹은 구글의 Colab을 개발한다고 생각하면 편할것 같습니다. Colab처럼 마크다운으로 이뤄진 교안 내부에서 코드 실행환경을 구성해 놓고, 웹소켓을 통해 백엔드 서버와 소통하며 코드를 실행하는 환경입니다.
사실 프로젝트를 시작하면서 어느정도 부담감은 있었습니다. KDC, KDT같은 단어는 처음들어보았고 LMS는 저에게 완전히 새로운 도메인이었으며, 생각보다 국비교육은 제약이 많은 제도라 히스토리 파악이 중요했습니다. 심지어 웹소켓은 학부때 이후로 써본적이 없는데 말이죠 (socket.io도 사용할 수 없는 상황이었습니다 😅). 하지만 훌륭한 동료들과 AI의 도움으로 프로젝트를 성공적으로 마칠 수 있었습니다. 아무리 AI가 생산성을 증대한들 편하게 질문하고 도움받을 수 있는 동료들의 소중함을 절실히 느낀 프로젝트였습니다.
AI 챗봇 서비스
LMS 수강환경에서 툴로 사용하는 AI 챗봇 서비스를 개발했습니다. 학생들이 수강환경에서 코드 혹은 퀴즈와 관련된 질문 / 커리큘럼 / 수강환경 등에 대해 챗봇과 대화하며 궁금증을 해소하고, 외부 AI툴이 아닌 내부 서비스 사용을 통해 락인효과를 높이기 위한 목표도 있었습니다. 최근 많은 기업들에서 챗봇 서비스를 개발하고 컨퍼런스 발표를 통해 공유되는 자료들을 보며 흥미가 있었는데, 마침 좋은 기회에 AI 관련 서비스를 개발할 수 있었습니다.
이번 미션에선 AI 스쿼드와 협업하여 개발했으며 GraphQL Streaming 방식을 통해 매끄럽게 대화하도록 노력했습니다. 챗봇 서비스는 생각보다 손이 많이 가는 작업이었습니다. 처음엔 대화 요청 후 한번에 응답이 오는 형식이라 기다리는 시간이 너무 길었고, 이를 해소하기 위해 GraphQL Streaming 옵션을 활용하여 청크 단위로 응답을 수신하도록 개선하였습니다. 서버가 최초 응답하기 전 공백을 메꾸기 위해 trace message(로딩 메세지)들을 추가하였고, GPT / Perplexity 및 다양한 서비스들을 참고하여 타이핑 애니메이션 및 드래그 옵션 추가 등 유저 편의성을 높히기 위해 노력했습니다.
챗봇은 세심한 UI/UX 작업이 필요한 프로젝트였습니다. 실시간 AI 경험에서 중요한 건 단순히 빨리 답을 내놓는것이 아닌, 정답이 만들어지는 과정을 얼마나 자연스럽게 보여주느냐가 중요한지를 겪은 소중한 경험이었습니다.
Server Driven UI 및 CMS Editor
사실 이건 예전부터 다뤄보고 싶었던 기술스택인데, 고정된 UI가 아닌 서버로부터 UI 정보를 불러와 화면을 구성하는 Server Driven UI를 해보고 싶었습니다. 이미 많은 테크기업에서 도입하고 있었고 (카카오스타일, 올리브영) A/B테스트가 아닌 실시간으로 화면을 API를 통해 구현하는 점이 매력적으로 느껴졌습니다. UI의 주도권이 점점 서버로 넘어가고 있다고도 생각되고요.
Server Driven UI는 기술자체의 난이도보다 유관부서와의 소통 및 협업이 중요한 프로젝트였습니다. 기획과 에디터 디자인이 따로 없는 상황에서 빠른 프로토타입을 개발해냈고, 실제 유저들의 피드백을 받으며 기능을 덧붙였습니다. 초안, 버전관리, 템플릿, 복제 등 초기 개발단계에선 미처 고려하지 못했던 부분들이 요구사항으로 등장했고 살을 붙여가며 에디터의 완성도를 높여갔습니다. 지금은 B2C 페이지의 대부분을 어드민 에디터를 통해 관리하고 있습니다.
에디터 디자인의 경우는 V0 및 Lovable 프로토타입 및 AI의 도움을 많이 받았습니다. 이제 프로토타입은 완전히 AI의 영역으로 넘어갔다고 느꼈습니다.
사내발표
작년에는 외부 컨퍼런스에서 발표를 한건 했다면 올해는 사내에서 발표를 2건 하였습니다. 내부에서 워낙 바쁘게 보내다 보니, 외부로 시선을 돌릴 여유가 없었던 것 같습니다. 저희 개발팀은 주기적으로 회고 및 발표 세션을 가지고 있는데 매번 주제가 달라질정도로 유익한 시간을 가지고 있습니다. 올해에는 특히 AI와 관련된 세션이 많았던 것 같습니다.
취미생활과 함께 기술스택 넓히기

모두의연구소 프론트엔드 세션 발표 취미생활과 함께 테크 기술스택 넓혀보기
모두의연구소 프론트엔드 세션 발표 취미생활과 함께 테크 기술스택 넓히기 - Download as a PDF or view online for free
www.slideshare.net
최근에 Expo를 활용한 React-Native 앱 개발에 관심이 생기면서, 취미로 즐기는 테니스를 주제로 앱 개발을 했습니다. 테니스 클럽에서 경기이사를 맡으면서 매번 엑셀을 통해 대진표를 짰는데, 이걸 앱과 웹으로 공유하면 어떨까 싶어서 시작하게 된 사이드 프로젝트입니다.
기존에는 Supabase를 활용해 서버를 구성하였지만 기왕 하는거 백엔드까지 해보면 좋겠다 싶어 Nest.js와 PostgreSQL, TypeORM을 활용하여 서버를 구성하였고 어드민까지 직접 구축하였습니다. 결과적으로 Cursor에서 RN, Nest.js, FE(Admin)까지 하나의 워크스페이스로 묶어 동시에 개발하면서 빠른 생산성을 체감할 수 있었습니다. 현업에서도 그렇고 개인적으로도 느끼는거지만 어드민 화면 구현은 이제 프론트의 손을 떠난듯 싶습니다..
앱 개발과 크로스 플랫폼 알아보기

모두의연구소 프론트엔드 세션 발표 앱 개발과 크로스 플랫폼 앱 개발 살펴보기
모두의연구소 프론트엔드 세션 발표 앱 개발과 크로스 플랫폼 앱 개발 살펴보기 - Download as a PDF or view online for free
www.slideshare.net
사내에서 앱 개발을 맡게되면서 준비한 앱 개발 관련 세션입니다. 작년까지만 해도 Flutter의 열렬한 신봉자였지만 Expo를 활용한 React-Native의 편안하고 안정적인 개발환경을 체험하고는 Expo의 충성팬이 되었습니다. 앱 개발 스택과 관련하여 네이티브, 웹뷰, 하이브리드 앱에 대해 아이스브레이킹 형식으로 살펴본 세션이었습니다.
AI
사실 올해 가장 크고 임팩트있던 키워드라고 한다면 AI를 빼놓을 수 없을것입니다. GPT가 처음나왔을때만 해도 신기한 장난감 정도로만 생각했는데, 이제는 Cursor혹은 Cluade 없이는 일을 할 수 없는 몸이 되어버렸네요. 올초 모두의연구소에 처음 입사했을때만 해도 Cursor의 자동탭 기능을 주로 활요했다면, 이제는 최대한 직접 작성하는 코드를 줄이고 에이전트를 활용하려 노력하고 있습니다. 직접 타이핑 하는 코더에서 검수자로 역할을 바꾸려고 노력하고 있어요.
최근에는 익숙한 Cursor에서 벗어나 Cluade를 좀 활용해 보고 있습니다. 또한 코드를 직접 작성하는 대신에 설계의 중요성을 서서히 깨닫고 있습니다. 프로젝트별로 잘 정리된 Cursor 룰셋, claude.md 및 잘 구축된 디자인 시스템이 있다면 에이전트를 활용해 좀 더 생산성을 높일 수 있을것 같습니다.
개발팀 차원에서는 우리에게 맞는 툴을 잘 선택하고 도입하며, 피드백을 주고받는게 중요함을 느꼈습니다. 예전 프론트엔드 춘추시절처럼 AI 관련 정보가 폭포수처럼 쏟아지는 시기인 것 같은데, 팀 내부에서는 Playwright MCP를 활용해 E2E 테스트를 돌려보고 디자인시스템을 구축해 피그마 MCP를 좀 더 잘 활용해보려고 하는 등 다양한 시도를 해봤습니다. 그와 더불어 맞지않는 툴은 과감히 버리기도 했습니다. CodeRabbit을 활용해 PR 단계에서 도움을 받으려고 했지만 크게 효과를 보지 못한 경우도 있었습니다. AI를 잘 활용하는 것도 좋지만 너무 맹신하기만 해서도 안됨을 배웠습니다.
사이드 프로젝트
작년에는 Flutter랑 Supabase를 재밌게 가지고 놀았다면, 올해는 Expo(RN)과 Nest.js 그리고 React를 활용해 풀스택으로 앱을 만들어 보고 있습니다. AI를 활용하니 하나의 워크스페이스 내에서, 동일한 제품과 연관된 코드를 동시에 작업할 수 있다는게 굉장히 큰 장점인것 같아요. 테니스를 좋아하여 테니스 클럽 및 대진을 관리하는 앱을 만들었다가, 최근에는 여행 관련 앱을 만들어보고 있어요. 작년에는 사이드프로젝트에 좀 소홀했는데 올해는 다시 열심히 해보려고 합니다. 😅

마치며
마침 AI의 시대에 AI 교육이라는 새로운 도메인에 몸을 담게 되면서 많은것을 배우고 경험한 한해였습니다. 특히나 전에 사용해보지못했던 WebSocket, GraphQL, Stereaming, 챗봇 등 다양한 기술스택을 접하게 되어서 의미있었습니다. KDT, KDC 부트캠프라는 분야가 제약도 좀 있고 도메인 지식이 좀 필요한 영역인데 좋은 동료들이 있어 빠르게 흡수하고 좋은 제품을 개발할 수 있었던것 같습니다. 올해에는 좀 더 AI를 잘 체득하고, 활용할 수 있는 한해가 될수있도록 노력해보겠습니다.
'React' 카테고리의 다른 글
| Docusaurus 기술문서로 개발 이력서 작성하기 (3) | 2024.10.23 |
|---|---|
| Next.js + Supabase로 빠르게 블로그 방명록 만들기 (with AI 디자인) (7) | 2024.07.23 |
| ts-pattern으로 선언적으로 분기처리하기 (0) | 2024.07.16 |
| docker-compose.yaml: `version` is obsolete 이슈 (1) | 2024.07.01 |
| 직장인들의 IT 개발모임 직띵(Zicdding) FE 스터디 2번째 발표 후기 (3) | 2024.06.19 |