소개
이번 프로젝트에서 저는 프론트엔드 리드로 참여하며, 직행 플랫폼의 개선을 위한 여러 아이디어를 구현했습니다. 그 과정에서 단순히 기능을 구현하는 것에 그치지 않고, 팀 전체의 협업 효율과 개발 안정성을 높이는 자동화 시스템 구축에 주력했습니다. 오늘은 제가 프로젝트에서 어떻게 자동화를 적용했고, 어떤 효과를 얻었는지 공유하려 합니다.
🚨 반복 작업과 협업 비효율 문제
프로젝트 초기, 팀원들과 함께 기능 아이디어를 기획하며 느낀 점은 반복적인 작업이 많고, 협업 과정에서 발생하는 비효율이 적지 않다는 것이었습니다. 예를 들어:
- WBS 작성과 관리가 매번 수작업으로 이루어짐
- 디자인 변경 시 CSS 코드까지 수동으로 반영해야 함
- 배포 및 빌드 과정에서 실수로 오류가 발생할 가능성 존재
- API 스펙 변경 시 타입 불일치로 개발 중 오류 발생
이러한 문제들은 프로젝트가 커질수록 팀 전체의 생산성을 떨어뜨릴 수 있는 리스크였습니다.
✨ 적용한 자동화 사례
1. WBS 작성 자동화
WBS는 프로젝트 관리에서 핵심이지만, 매번 업데이트하는 것은 번거롭습니다. 이를 해결하기 위해 노션과 Google Worksheet를 연결했습니다. 팀원들이 노션에 자신의 이슈를 입력하면, 자동으로 워크시트에 반영되고 최종적으로 WBS가 생성되도록 설계했습니다. 덕분에 WBS 작성 시간을 줄이고, 누락 없이 최신 상태를 유지할 수 있었습니다.
자세한 방법은 아래 링크에서 확인해주시면 됩니다.(제가 알려준 방법임)
WBS 작성 자동화 방법
2. 디자인 시스템 자동화
디자인 토큰 변경 시 CSS 코드를 일일이 수정하는 것은 비효율적이었습니다. Figma Token Studio로 JSON 파일을 생성하고, AI 스크립트를 이용해 CSS 코드로 변환하도록 자동화했습니다. 덕분에 디자이너가 토큰을 바꾸면 코드까지 자동 반영되어, 디자인 변경 속도가 크게 향상되었습니다.
자세한 방법은 아래 링크에서 확인해주시면 됩니다.
디자인 시스템 자동화
3. CI/CD 자동화
GitHub Actions를 활용해 메인 브랜치에 푸시될 때마다 서비스와 디자인 시스템 스토리북을 자동 배포하도록 설정했습니다. 여기에 AI를 결합하여 배포 과정을 보다 스마트하게 만들었습니다.
- AI 기반 변경 감지: 푸시된 코드 중에서 UI 컴포넌트나 디자인 토큰에 실제 변경이 있는지 AI가 분석하여, 불필요한 배포를 최소화했습니다.
- 자동 배포 스크립트 최적화: AI가 이전 배포와 비교하여 변경된 부분만 배포하도록 스크립트를 조정함으로써 배포 시간을 단축하고 서버 리소스를 효율적으로 사용했습니다.
- 자동 알림 및 확인: 배포 완료 후 AI가 스토리북과 서비스 화면을 스캔하여 주요 컴포넌트 렌더링에 문제가 없는지 확인하고, 팀원에게 알림을 보내 안정성을 높였습니다.
4. API 타입 통일화
백엔드에서 Swagger(OpenAPI) 문서를 제공했지만, 스펙 변경 시 프론트엔드 타입이 불일치하는 문제가 있었습니다. 이를 해결하기 위해 Swagger 문서를 읽어 프론트엔드 타입을 자동으로 생성하도록 했습니다. 덕분에 API 일관성이 유지되고, 개발 속도가 향상되었습니다.
5. Husky 기반 개발 프로세스 자동화
코드 컨벤션과 빌드 오류 문제를 방지하기 위해 Husky를 활용했습니다.
• 커밋 전 린트 검사 → 코드 스타일 자동 확인
• 푸시 전 빌드 검사 → 빌드 오류 방지
• 체크아웃 시 패키지 정보 변경 감지 → 자동 설치
이 덕분에 팀원들은 환경 설정이나 빌드 문제를 걱정하지 않고 개발에 집중할 수 있었습니다.
⭐️ 배운 점과 효과
이번 프로젝트를 통해 배운 가장 큰 점은 개별 기능 구현을 넘어, 팀 전체가 효율적으로 움직일 수 있는 환경을 만드는 것이 중요하다는 것입니다. 자동화를 통해 반복적인 수작업을 줄이고, 빌드·배포 과정의 안정성을 높이며, 디자인과 API의 일관성을 유지할 수 있었습니다.
또한, 팀원들이 보다 빠르고 안전하게 협업할 수 있도록 환경을 마련하는 과정에서 기술적 리더십과 시스템 설계 능력도 함께 향상되었습니다. 단순히 코드를 작성하는 것을 넘어, 프로젝트 전체를 바라보고 개선점을 찾아 자동화하는 경험은 제게 큰 성장의 기회가 되었습니다.
📌 앞으로 도전해보고 싶은 자동화
이번 프로젝트에서 다양한 자동화 경험을 쌓으면서, 아직 더 시도해보고 싶은 영역이 있습니다. 앞으로는 단순 반복 작업을 줄이는 것을 넘어, 실시간 모니터링과 협업 효율을 극대화하는 자동화를 구현하고자 합니다. 구체적으로는 다음과 같습니다.
1. Sentry 기반 에러 로깅 및 알림 자동화
서비스 운영 중 발생하는 에러를 실시간으로 감지하고, 팀원에게 즉시 알림을 전달하는 시스템을 구축하고 싶습니다.
Sentry를 활용하여 프론트엔드와 백엔드 오류를 통합 모니터링
AI 기반 분류로 에러 우선순위 결정
Discord 등으로 자동 알림 전송 → 빠른 대응 가능
이를 통해 서비스 안정성을 더욱 높이고, 문제가 발생했을 때 팀이 즉시 대응할 수 있는 환경을 만들고자 합니다.
2. Discord 기반 협업 알림 및 이슈 생성
팀원 간 커뮤니케이션을 자동화하고, 작업 상태를 실시간으로 공유하는 시스템을 구현해보고 싶습니다.
Discord 채팅에서 특정 명령어 입력 시 자동으로 Notion에 이슈 생성
생성된 이슈가 팀원에게 자동 알림 → 상태 공유와 투명성 향상
반복적인 회의나 보고 과정 없이, 실시간으로 프로젝트 진행 상황 파악 가능
이 과정을 통해 협업 과정의 효율을 높이고, 정보 누락이나 중복 작업을 최소화할 수 있습니다.
사실 이미 이슈 생성 봇은 이번 프로젝트에서 도입해보려고 했습니다. AI에게 동작 기능 코드를 맡겨 Discord와 Notion 연동 이슈 생성 봇을 만드려고 했으나, 기능이 점점 복잡해지고 코드 흐름이 뒤얽혀서 결국 제가 직접 손을 대기 어려울 정도가 되었습니다. 시간이 제한된 상황에서 중간에 포기할 수밖에 없었지만, 이 경험 자체가 큰 배움이 되었습니다.
3. Figma MCP 연동을 통한 디자인 자동화
디자이너와 개발자 간 작업 흐름을 더욱 긴밀하게 만들기 위해, Figma MCP를 활용한 디자인 자동화도 도전해보고 싶습니다.
Figma에서 디자인 변경 시, 개발 코드와 자동 동기화
AI 스크립트를 통해 컴포넌트 상태별 CSS 및 Tailwind 클래스 자동 생성
디자인과 코드의 일관성 유지 → 디자이너와 개발자의 피드백 루프 단축
이로써 디자인 변경이 발생해도 빠르고 안전하게 서비스에 반영될 수 있도록 만들고자 합니다.
이번 프로젝트에서 경험한 자동화와 더불어, 이러한 실시간 모니터링, 협업, 디자인 동기화 자동화를 시도해본다면, 팀 전체의 생산성과 안정성을 한층 더 높일 수 있을 것이라 기대하고 있습니다. 앞으로도 저는 단순한 기능 구현을 넘어, 팀과 서비스 전체를 바라보며 효율과 안정성을 개선하는 개발에 도전해나갈 계획입니다.
