Read Original
#Frontend

프롬프팅에서 워크플로로, AI로 프런트엔드 개발 생산성 끌어올리기

프롬프팅에서 워크플로로, AI로 프런트엔드 개발 생산성 끌어올리기
01

Summary

코딩하는 AI를 넘어, 내 업무를 설계하는 '워크플로' AI의 시대로

단순 프롬프트를 넘어 Jira부터 PR까지 자동으로 연결하는 10배 빠른 프런트엔드 엔지니어링 전략

이제 AI는 단순히 코드를 짜는 도구가 아니라 산재된 요구사항을 분석하고 검증하는 파트너입니다. 이 아티클은 LY Corporation이 AI 에이전트를 실제 개발 공정에 어떻게 결합하여 컨텍스트 전환 비용을 줄이고 품질을 높였는지 구체적인 방법론을 제시합니다.

  • 01프롬프팅에서 워크플로로의 패러다임 전환을 통한 확장성 확보
  • 02MCP 설정을 통해 AI가 Jira, Slack, Figma 데이터를 직접 읽고 추론하는 기술적 구현
  • 03구현 전 'Open questions'를 도출하여 기획 오류를 조기에 발견하는 전략
  • 04플랜 모드(Plan Mode)를 활용한 안전한 코드 수정 및 검토 프로세스
  • 05검증 루프를 통한 자동화된 테스트 실행 및 결과 보고서 생성

RECOMMENDATION

단순 코드 생성에 한계를 느끼는 개발팀에게 추천하며, 특히 요구사항 문서가 산재된 대규모 프로젝트에서 AI 워크플로를 통한 컨텍스트 통합을 즉시 시도해 보길 권장합니다.

The Problem

프런트엔드 개발자는 Jira, Figma, Confluence, Slack 등 분산된 도구에서 컨텍스트를 수집하고 조립하는 데 막대한 시간을 소모하며, 단순한 AI 프롬프팅은 반복 가능한 생산성 향상으로 이어지지 못한다.

The Solution

입력 데이터(Jira, Slack 등) 수집부터 계획 수립, 구현, 검증, PR 작성까지 이어지는 '폐쇄 루프(Closed-loop)' AI 워크플로를 구축하고, MCP(Model Context Protocol)와 플랜 모드를 통해 AI가 실무 맥락을 직접 이해하도록 설계한다.

The Result

요구 사항 누락으로 인한 재작업 방지, 기존 코드의 재사용성 극대화, 지루한 반복 작업(Lint, Typecheck 등) 자동화 및 고품질의 PR 생성을 통해 개발 생산성을 오케스트레이션 중심으로 전환한다.

Trade-off

AI가 생성한 출력물에 대한 과도한 신뢰는 이해 부채를 발생시킬 수 있으며, 한 번에 모든 과정을 자동화하려는 시도는 제어가 어려우므로 반드시 읽기와 쓰기 작업을 분리하는 단계적 접근이 필요하다.

03

Key Concepts

Concept · 01

MCP (Model Context Protocol)

AI 모델이 로컬 데이터나 외부 도구(Jira, GitHub 등)와 안전하게 통신하며 컨텍스트를 확장할 수 있게 해주는 개방형 표준 프로토콜이다.

  • Jira, Confluence, Slack 등의 도구를 연결하여 AI 에이전트가 데이터를 직접 읽고 행동하는 연결된 입력으로 변환하는 데 활용된다.
Concept · 02

Closed-loop Workflow

계획, 구현, 검증, 피드백이 하나의 고리로 연결되어 각 단계의 결과가 다음 단계의 입력으로 사용되는 완성된 작업 흐름이다.

  • 에이전트가 작성한 계획을 바탕으로 구현 후 다시 스스로 검증(Lint, Test)하고 PR까지 작성하는 전 과정을 의미한다.
Concept · 03

Plan Mode

AI 에이전트가 파일 수정을 하기 전, 분석 결과와 실행 계획을 먼저 제시하고 사람의 승인을 기다리도록 구조적으로 강제하는 모드이다.

  • Claude Code의 /plan 명령어를 통해 '코드를 수정하지 말고 계획만 세우라'는 지시를 실제 가드레일로 구현하여 안전성을 확보한다.