안녕하세요, 커머스플랫폼개발팀 공자윤(Jayoon Kong)입니다.

저는 올해 개발그룹 전략과제 중 하나인, 효율적 분업 구조화를 통한 생산성 증대 및 운영 효율화를 통한 비용 절감/기술 부채 개선 - FE 개발 공정 축소 및 Design System 활용을 통한 FE 개발 생산성 증대 과제를 위하여 UI기술개발팀의 매니저님과 함께 오글톡 프로젝트의 Repository 통합을 추진하였습니다.

목표

• 통합 Repository에서의 CSS 관리 개선
• React Component 도입을 통한 생산성 향상
• 비즈니스 로직과 UI 분리를 통한 개선

실제로 배포되는 프론트엔드 산출물을 FE Repository, HTML 및 CSS 등 정적인 산출물을 Markup Repository로 표현하겠습니다.

통합 Repository에서의 CSS 관리 개선

문제점

• 이전에는 FE Repository와 Markup Repository가 달라 CSS 관리가 복잡했습니다.
• Markup Repository에서 CSS를 수정한 사항이 실제 배포 시 반영되지 않는 문제가 있어 일관성을 유지하기 어려웠습니다.
• Markup Repository까지 모니터링하는 것이 번거로워, CSS의 변경 사항을 추적하기 어려웠습니다.

개선 사항

• 통합 Repository에서 CSS를 작성하도록 변경하여, CSS 파일을 효율적으로 관리할 수 있게 되었습니다.
• 수정 사항이 바로 배포에 반영되므로 일관성이 유지되었습니다.
• 코드 리뷰 시 CSS의 변경 사항을 추적할 수 있어서 개발 시 참고할 수 있었습니다.

React Component 도입을 통한 생산성 향상

문제점

• 이전에는 HTML 산출물을 Markup Repository에서 가져와 FE Repository에 매번 붙여넣는 것이 번거로웠습니다.