⚙️컨텐츠 어드민 (시간 1/2)

상태 관리 구조 추상화

개요

컨텐츠 매니저(Contents Manager, CM)들이 글을 작성하고, 서비스에 올릴 수 있는 서비스

• 일정: 2021.07 - 2021.09

• 소속: 노써치 / 개발

• 기술 스택: Typescript, NodeJS 14, Next11, RecoilJS, Chakra-UI

• 인원: 3인 (본인, FE 팀원 1, BE 팀원 1)

• 성과: 컨텐츠 게시에 사용되는 시간 비용 1/2

상세 설명

프로젝트 설명

기존의 콘텐츠 작성 및 업로드 프로세스는 다음과 같았습니다.

1. CM이 Docs 등에서 콘텐츠를 작성

2. 과거에 사용하던 서버를 다시 켜서 Admin 화면에서 검토

3. 검토가 완료된 자료를 개발자가 배포

4. 배포된 결과물을 서비스 화면에서 CM이 최종 확인

이 과정은 매우 번거롭고 시간이 많이 소요되었습니다. 이번 프로젝트는 이러한 비효율적인 프로세스를 개선하기 위해 시작되었습니다.

문제

응? 내가 이해한 거랑 다른데?

이 프로젝트의 요구사항은 다음 3가지였습니다.

1. 레거시 DB에 있던 자료들을 현재 DB로 옮기기

2. 10개가 넘는 화면을 구성

3. D&D, 프리뷰, 즉시 반영, 검토 기능

당시 1년차였던 저는 팀원 2명과 함께 이를 빠르게 구현해 내는 미션을 받았고, 해결하고 싶었습니다. 그래서 몇차례의 회의를 거쳐 DB를 설계하고, 작업에 들어갔습니다.

문제는 1달 뒤 쯤 일어났습니다. 팀원과 제가 이해한 스펙이 달라 맞춰보니 안맞는 상황이 발생했던 것입니다. 저희는 부랴부랴 다시 회의를 하고, 스펙을 재정의 한 뒤, 문서와 그림으로 이해한바가 일치하는지 검증하였습니다.

결과적으로 작업을 주어진 기간 내 완성하는 것은 가능했지만, 아찔한 이슈였습니다.

컨텐츠 에디터는 D&D여야 한다.

콘텐츠 에디터의 주요 기능 요구사항 중 하나는 드래그 앤드 드롭(Drag and Drop, D&D) 기능이었습니다. D&D는 엑셀에서 컬럼을 눌러 원하는 위치로 이동시키는 것처럼, 사용자가 요소를 직관적으로 이동할 수 있게 하는 기능입니다.

저는 이 기능을 구현하기 위해 라이브러리를 사용하는 방법과 직접 구현하는 방법, 두 가지 옵션을 검토했습니다. 라이브러리를 살펴보니, 당시 사용하던 자료구조에 맞추려면 구조를 크게 변경해야 했습니다. 일정상 이러한 변경은 어렵다고 판단하여, 직접 구현하는 방향을 선택했습니다.

기본적인 구조는 라이브러리에서 아이디어를 얻어 설계했습니다.

• DropSpot: 정의된 자료구조를 시각적으로 보여주는 영역

• DropElement: 자료구조를 감싸고 드래그 가능한 요소로 만드는 컴포넌트

• List: 전역으로 관리되는 데이터 리스트

이렇게 역할을 분리하여 설계했고, 그 결과 주어진 일정 안에 D&D 기능을 성공적으로 구현하고 테스트까지 완료할 수 있었습니다.

Admin도 구현해야 한다.

Admin에서 필요한 메뉴는 총 5가지였으며, 각 메뉴당 페이지 수는 1개에서 최대 5개까지였습니다. 빠르게 기능을 개발해야 했기 때문에 팀원과 작업을 분담하여 진행했습니다.

저는 먼저, 공통으로 사용되는 메뉴 등 기본적인 구조부터 개발했습니다. 인터페이스를 정의하고, 데이터 구조를 선언하여 코드에 정적으로 추가하기만 하면 새로운 메뉴를 손쉽게 개발할 수 있도록 설계했습니다.

이후, 제가 개발한 콘텐츠 에디터를 활용할 수 있는 CRUD 페이지, 콘텐츠별로 SEO를 설정할 수 있는 SEO 관리 페이지, 유튜브 링크 기반의 콘텐츠를 만들 수 있는 영상 콘텐츠 페이지 등을 개발했습니다.

정신없이 빠르게 개발을 진행하는 과정이었지만, 팀원과 효율적으로 협업하며 짧은 시간 안에 개발 역량을 한층 키울 수 있었던 값진 경험이었습니다.

성과

1. 게시를 위해 들이던 평균적인 체감 시간이 컨텐츠 작성을 포함해 1/2로 감소했습니다.

배운점

1. 회의록을 작성하자.

   1. 느낀점

      1. 문서와 그림으로 사전에 소통을 했다면 중간에 다시 방향을 마추는 상황은 일어나지 않았을 것입니다.

   2. action item

      1. 회의시 항상 회의록을 작성한다.

2. 구현에 두려움을 가지지 말자.

   1. 느낀점

      1. 직접 개발하면서 List Update시 발생하는 리렌더링 문제등 최적화 문제가 발생했습니다.

      2. 라이브러리를 커스텀했다면 사용성과 일정 둘다 만족시킬 수 있었겠다는 생각이 들었습니다.

   2. action item

      1. 어렵다고 느껴지는 부분을 막연하게 느끼지 말고 문자화 합니다.