DevelRocket LMS 개발
9월 말, 경일게임아카데미의 IT개발자 육성을 위한 브랜드인 디벨로켓의 LMS를 개발하는데 프론트엔드 개발자로 합류하게 되었습니다..!
LMS는
Learning Management System 으로 온라인으로 학생들의 수업을 진행할 수 있는 시스템을 말합니다. (인터넷 강의를 듣고, 관리할 수 있는 플랫폼이죠!)KDC? KDT는 들어봤는데?
K-Digital Training (첨단산업 디지털 핵심 실무인재 양성훈련)
AI, 빅데이터, 반도체 등 첨단산업·디지털 분야 핵심 실무인재 양성
K-Digital Credit (디지털 기초역량훈련)
노동시장 참여자가 디지털 역량 부족(Digital Divide)으로 노동시장 진입 및 적응에 어려움을 겪지 않도록 지원체계 마련 (출처 :고용노동부 )
KDC는 KDT보다 비교적 짧은 시간에 온라인 통해서 수업을 진행합니다.
그래서 ! 온라인 교육을 진행할 플랫폼이 필요하다.
디벨로켓의 개발팀은 이렇게 시작이 되었습니다.
(경일게임아카데미, 디벨로켓은 https://www.kiweb.or.kr/main 에서 더 자세히 볼 수 있어요!)
DevelRocket - FrontEnd
Develrocket의 Front-end는 어떻게 개발을 하고 있는지 합류 후 어떤 작업을 했는지 소개해드릴게요!
합류 후 어떤 일을 했나요?
DevelRocket 리뉴얼과 LMS 개발
DevelRocket의 최근 프로젝트는 웹페이지 디자인의 사용자 친화적 개선과 온라인 교육 플랫폼 개발을 포함한 전체적인 리뉴얼 작업이었습니다. 이 작업을 통해 단순히 사용자 경험을 향상시키는 것을 넘어, 개발팀의 작업 효율성과 웹사이트의 유지보수 용이성까지 크게 개선하는 이중적 성과를 달성하였습니다.
주요 개선 사항으로는 반응형 디자인, 카테고리 분류를 통한 사용자 경험 향상, 그리고 프론트엔드 코드의 고도화를 들 수 있습니다. 이러한 기술적 향상은 개발 과정의 효율성을 높이는 데 기여했습니다.
리뉴얼의 일환으로, DevelRocket의 핵심 서비스인 온라인 교육 플랫폼 개발을 하였습니다. 이 플랫폼은 학습 컨텐츠 제공, 교강사와 사용자 간의 상호작용 기능, 커뮤니티 구성 요소 구현 등을 통해 학습 환경을 풍부하게 만들었습니다. 또한, 관리자 페이지를 통해 웹사이트 전반, 학습 컨텐츠 및 사용자 관리 기능을 통합하여 관리할 수 있는 구조를 마련하였습니다.
이러한 리뉴얼과 개발 작업은 사용자에게는 더 나은 서비스 경험을, 개발팀에게는 작업의 효율성과 즐거움을 제공하며, 최종적으로 DevelRocket 웹사이트의 성능과 유지보수 능력을 크게 향상시켰습니다. 사용자와 개발팀이 모두 만족할 수 있는 훌륭한 결과로 이어졌습니다.
어떻게 진행했나요?
개발 문화
팀의 전반적인 문화는
도메인 지식의 공유- 팀원 모두가 프로젝트의 목표와 방향성을 명확하게 이해하기 위해서 팀리더가 정기적으로 프로젝트 업데이트를 공유하고, 모든 구성원이 완전히 이해할 때까지 질문과 피드백을 권장하고 있습니다.
문제 해결의 신속성- 프로젝트를 진행하며 발생하는 궁금증이나 이슈는 즉시 해결하여 잘못된 방향으로의 진행을 방지합니다. 신속한 문제 해결을 통해 프로젝트의 효율성을 높이고 목표달성을 가속화합니다.
스프린트를 통한 진행상태 점검- 주차별 스프린트를 진행하여 프로젝트의 진행 상태를 주기적으로 확인하고 다음 작업을 계획합니다. 이러한 접근 방식은 프로젝트의 집중도를 높이고 팀원 각자의 업무를 명확하게 할당하는데 도움이 됩니다.
위와 같은 문화를 바탕으로 개발팀 중 프론트엔드 개발자 2명과 UI/UX 디자이너 1명은 협력하여 사용자 인터페이스를 설계하고 구현하고 있습니다. 사용자 경험을 최적화 하는데 집중하며, 필요한 디자인 요소의 정보를 신속하게 공유합니다. 이러한 작업 구조는 문제 해결의 신속성을 높이고 개발과정에서의 효율성을 극대화합니다.
(양 옆에서 디자이너 구찮게 괴롭히기....)
개발 환경
DevelRocket의 Front-end에서 사용하는 기술 스택 및 협업 도구
- Next.js
- TypeScript
- TailwindCSS
- Recoil
- React-Query
- monorepo
- figma
- notion
Next.js와 TypeScript를 핵심으로 진행하고, TailwindCSS로 스타일링, Recoil로 상태 관리, React-Query로 데이터 패칭을 처리하는 등의 체계를 구축하였습니다. 처음 접해보는 것도 있었지만 빠르게 습득하여 프로젝트에 효과적으로 적용했습니다.
리뉴얼 과정에서는 monorepo 개념을 도입하여 프로젝트 관리의 효율성을 높였습니다. 프로젝트 내 여러 부분에서 공통된 컴포넌트와 UI를 재사용할 계획이었기 때문에 중요한 결정이였습니다. Monorepo를 통해 코드 베이스를 통합 관리하고, 일관성 있는 개발 환경을 유지하여 프로젝트간의 의존성과 협업을 원활하게 진행할 수 있었습니다.
디자이너와의 협업은 Figma를 통해서 했습니다. Figma를 통해 디자인 아이디어도 공유하고, 피드백을 신속하게 주고받아, 디자인과 개발간의 간극을 줄였습니다. 또한, 프로젝트의 관리와 문서화를 위해 Notion을 사용하여 팀 내 정보, 일정을 공유하였습니다.
(피그마에 재밌는 기능 중 하나.... 이 기능 몰랐을 때는.. comment로 썼는데 만들었다가 지웠다가 ㅋㅋㅋ)
내가 개발에 기여한 것
- 모노레포 도입으로 개발자 경험 상승
- 개발 환경 세팅
- DevelRocket - 관리페이지(어드민), 사용자 페이지(클라이언트)
- 컴포넌트의 재사용성 증가
- 학습 페이지
- md파일을 파싱하여 페이지에 보여주는 기능
- TIL 등 md 형식을 지원하는 editor, viewer 기능
- 사용자 경험을 위한 반응형 디자인
- 다양한 디바이스에서도 일관된 사용자 경험 제공
- 접근성 향상
- AWS서비스 활용
- 로그인 서비스를 위한 Cognito
- 정적 데이터 관리를 위한 S3
어디까지 했으며, 앞으로의 목표는?
지금까지는 KDC를 위한 작업을 했습니다. 이후 KDT도 진행할 예정인데, KDC와 UI가 크게 달라지는건 없지만 내부적으로 처리해야할 내용이 많으니 기존 코드의 리팩토링, 디렉토리 구조 정리 등 고도화 해야할 작업이 많습니다.... (디테일은 잡아도 잡아도 나와요.... 원래 이래요...?ㅜㅜㅜ)
또... PWA 구현하기
그 외 추가하고 싶은 기능이나 기술은?
개발 시간에 치이고, 어떻게 해야할지 몰라서 손도 못댔던 테스트 코드 작성도 해보고 싶고, 모노레포를 깔끔하게 관리하기 위해서 storybook도 도입하고 싶다.
(있는걸 가져다 쓰는데도 가끔
있던가? 하면서 또 만들어 쓰는.....)총평
- 크게 어렵지 않게 프로젝트를 잘 하고 있다.
- 성장하고 있다.
- 역시 글 쓰는게 제일 어렵다..
Share article
