웹 기반 컨텐츠 관리 및 기기 전원관리 솔루션(Content Mamegement System)

소개

• 여러 컨텐츠를 위젯 커스터마이징해서 배치하여 웹 기반 기기에서 표출, 기기 전원관리 등을 제공하는 서비스입니다.
• 프론트엔드, 백엔드 2가지로 구성되어 있습니다.

프론트엔드 화면

사용 기술

1. 프론트엔드

• TypeScript, React, Recoil, Styled-Components

1. 백엔드

• Kotlin, Springboot, QueryDSL, Minio, Mariadb

진행 업무

[백엔드] Java → Koltin 포팅

• 사내 메인 백엔드 기술스택이 kotlin로 바뀌기 전에 java로 만들어졌고, 이후 참여했기에 포팅하기로 결정했습니다.
• 기존 java 코드에 영향을 주지 않는 config 소스부터 코드 전체를 포팅했습니다.
  • null safe 관련 이슈는 완전히 해결되었습니다.
  • 소스량이 약 20% 줄어들었습니다.
  • Detekt를 적용해서 정형화된 코드가 되었습니다.

[프론트엔드] 위젯형 컨텐츠 에디터 구현

• 자막, 날씨, 미세먼지 지수, 주식, 뉴스, 동영상, 사진 등 다양한 컨텐츠를 위젯형태로 화면에 배치하여 표출하는 기획이 선정되었습니다.
• ReactGridLayout으로 데이터를 구성하고, 각 컨텐츠 유형별로 위젯을 커스텀 개발하여 제공하는 것으로 결정했습니다.
• 프로토타입 개발 후 사내 테스트를 진행했을 때 ‘겹침’ 옵션을 끄고 사용시 위젯끼리 튕겨나가는 UX는 사용하지 불편한 것으로 판단, ‘겹침’ 옵션을 켜고, 위젯을 배치 순서를 지정하는 것으로 해결하였습니다.

회고

1. 현재 번들러로 craco를 사용중인데 빌드 시간이 너무 오래 걸려서 vite로 포팅하면 좋을 것 같습니다.
2. 이 서비스와 관련없는 사내 직원분들께 테스트를 여러번 진행하면서 UX에 대한 피드백을 받고 적용하는 경험이 재밌었던 것 같습니다.