안녕하세요! 아이들나라 Frontend 개발자 김혜인입니다 :)
제가 아이들나라에 합류한지도 곧 1년이 다 되어가고 있습니다.(시간이 벌써?! )
오늘은 1년간 제가 아이들나라의 Frontend 개발자로서 경험들을 이야기해 보려고 합니다.
( ͡° ͜ʖ ͡°) 넝담~
시작하기 전에
아이들나라의 Frontend 개발자는 어떤 일들을 하고 있는지 간단히 알려드리자면 크게 두 가지로 구분됩니다.
•
서비스를 운영/관리하는 백오피스 영역
◦
CMS(Content Management System)
◦
LMS(Learning Management System)
◦
각 서비스의 백오피스 시스템
•
고객과 맞닿아있는 서비스 영역
◦
앱에서 사용되는 Webview
◦
아이들나라 홈페이지
먼저 백오피스에 대해 이야기 해볼까요?
아이들나라는 다양한 채널에서 콘텐츠를 제공하고 있습니다. 이런 콘텐츠들은 어떻게 관리되고 있을까요?
아이들나라 앱 메인 화면 (많관부
)
)아이들나라는 CMS(Content Management System)를 통해 다수 서비스(채널)들의 콘텐츠들을 한 곳에서 관리하고 콘텐츠 검수를 진행하고 있습니다. 이렇게 CMS에서 등록된 콘텐츠들이 준비가 완료가되면 각 채널의 백오피스를 통해 콘텐츠 편성을 진행하며 운영에 필요한 부분들을 관리하고 있습니다.
그렇기 때문에 CMS를 포함, 채널 별로 다수의 백오피스가 필요한 상황이 되었는데요.
여기서 Frontend팀은 고민합니다.
이거..아이들나라 백오피스를 위한 공통 UI를 관리하는 무언가를 만들어야겠는 걸..?
UI 컴포넌트 제작기
신규 통합 CMS 및 백오피스 프로젝트의 코드를 공통화/일원화 관리하기 위해 저희가 낸 결론은 “UI 패키지 모듈을 만들자”였습니다. 아쉽게도 바닥부터 시작하기에는 시간이 부족했기 때문에 기본 UI 컴포넌트는 MUI을 사용하였으며 추가 기능들을 붙이면서 Atomic 디자인 패턴을 기반으로 재구현하는 방식으로 진행했습니다.
여담이지만..초반에 호기롭게 Storybook도 도입하여 진행했지만 아쉽게도 현실에 부딪혀 중단되었습니다. ^^;; (올해에는 다시 진행 할 수 있지 않을까 기대해 봅니다.)
아무튼 이렇게 구현된 컴포넌트들은 사내 NPM으로 관리되었고 boilerplate를 사용함에 따라 백오피스의 개발 생산성이 높아졌습니다. 뿐만 아니라 공통 컴포넌트들을 한 곳에서 관리하고 있기 때문에 사용하면서 발견한 버그 수정과 기능 개선등을 한번에 모든 백오피스에 반영할 수 있다는 장점에 제일 컸습니다.
뚝딱! 만들어지고 있는 백오피스
다음은 서비스!
아이들나라에 합류했을 때 서비스를 다루는 영역은 모두 IPTV, APP 환경이었습니다. 작년 11월부터 작은 범위의 홈페이지를 오픈하였고, (홈페이지는 현재 신규 프로젝트로 열심히 개발하고 있어요.) 현재 서비스 프로젝트의 대부분은 Webview 영역입니다. 페이지 단위도 크지 않았고 앞서 말씀드린 것 처럼 WebView 영역 또한 채널 별로 확장될 수 있는 가능성이 높다고 판단되어 Monorepo를 도입하게 되었습니다.
Monorepo 그게 뭐죠?
쉽게 말하면 여러 프로젝트를 하나의 저장소에 개발하는 방식입니다. apps는 각 프로젝트 코드들로 구성되어 있으며 packages에는 apps에서 사용할 공통 컴포넌트 또는 여러 설정 파일들을 작성하고 있습니다.
1...
2├── apps # monorepo 프로젝트 폴더
3│ ├── projectA
4│ └── projectB
5│
6└── packages # 공통 사용 도구 폴더
7 ├── eslint-config # 팀 컨벤션에 맞춰 제작한 설정 파일
8 ├── tsconfig
9 └── ui
10 └── components
11...
Plain Text
복사
개인적으로 느꼈던 장점은 각 Packages 들을 통해 각 프로젝트의 설정들과 의존성 관리를 일관성 있게 관리를 할 수 있다는 점이었습니다. 자세한 Monorepo 도입 여정기는 이후 블로그에서 더 자세히 다루겠습니다.
백오피스 VS 서비스
앞서 아이들나라 백오피스와 서비스의 FE 개발 환경에 대해 간략히 공유드렸는데요. 이번에는 실제 프로젝트를 진행하면서 어떤 부분에서 차이가 있었나 이야기해보려고 합니다.
제가 느꼈던 차이점으로 백오피스의 경우, 요구사항에 대한 이해와 서비스의 전반적인 흐름에 대한 이해도가 높아야 된다는 점이였습니다. 백오피스에서의 과정이 서비스에 어떠한 영향을 주는지에 대해 생각하며 진행해야 했으며 요구 사항을 확인하여 명확한 부분은 없는지 또는 더 좋은 방향이 있을지에 대한 고민을 많이 했습니다.
물론 해당 부분이 서비스에서도 중요하지만 현재는 Webview 영역 자체가 단일 페이지인 경우가 대부분이라 서비스의 흐름 보다 UI/UX 측면에서의 논의를 상대적으로 많이 하였고 고객별 다양한 상황에 대해 어떻게 대응할 것 인지, 디바이스 별 해상도 대응 등 서비스의 UI 완성도를 높이기 위한 부분에 더 집중하여 진행했습니다.
아마 Frontend 개발자가 하는 일은 화면 구현이라고 많이 생각하실 것 같은데요. 실제 화면 구현보다 기획서와 요구사항을 분석하고 논의하는데 더 많은 시간을 보내기도 합니다. 이러한 논의들이 조금씩 모여 아이들나라의 완성도를 높이는데 기여한다고 생각하기 때문에 단순히 기획서나 디자인을 따라 구현만 진행하는 것이 아니라 계속해서 질문하고 확인하는 것 또한 Frontend 개발자의 역할이라고 생각합니다.
앞으로의 과제들
•
boilerplate 2.0 업데이트
◦
개인적으로 초반 설계가 부족했다고 생각이 듭니다. 실제 백오피스에서 필요한 컴포넌트는 예상했던 것 보다 더욱 복잡하고 많은 기능들이 필요하게되면서 추가로 작업했던 그리고 기존에 설계된 컴포넌트의 설계가 부족했다고 생각이 들었습니다. 올해는 boilerplate 2.0으로 좀 더 견고하게 만들 예정입니다.
•
Admin을 Monorepo 환경으로 변경
◦
각 백오피스에서 공통으로 사용되는 로그인/계정 관리 등과 관련된 코드들을 유지보수 측면에서 공통화의 필요성을 느껴 서비스 프로젝트와 동일하게 Monorepo로 변경하려고 합니다.
글을 마무리며…
지난 1년간 아이들나라 Frontend팀에서 걸어온 길과 앞으로 가야할 길에 대해 간단하게 이야기해보았는데요.
이렇게 돌아 보니 여러 프로젝트를 진행했었는데요. 물론 힘들었던 적도 아쉬운 부분도 있었던 과정이지만 그 속에서 새로운 경험을 많이 하게 된 한 해였고 많은 걸 배우고 성장 했던 것 같습니다. 올해는 어떤 고난과 역경(?)이 있을지 걱정이 되기도 하지만 한편으로는 도전에 대한 기대감으로 가득하기도 합니다.
마지막으로 아이들나라의 성장과 도전을 함께 응원해주시길 바라며 다음에 기회가 된다면 또 만나요~
읽어주셔서 감사합니다!
Ps. 아이들나라 Frontend팀에서는 위 여정을 함께할 개발자를 기다리고 있습니다!
많은 관심과 지원 부탁드립니다.
반갑게 맞이할 준비가 되어 있는 Frontend팀
아이들나라의 서비스를 위해 항상 고군분투 해주시는 아이들나라의 핵심!!
모바일 팀의 @김일범 (LGU/Mobile팀)님께 바톤터치하겠습니다!ㅎㅎ
