안녕하세요. 주식회사 Members AI for All Company에서 생성형 AI 활용 PMO를 맡고 있는 라우타쿠입니다.

지난 편에 이어, 「Cursor」를 활용한 PoC 기록의 제2회를 전달해 드립니다.

민주화를 향한 PoC 설계

본 PoC의 목적은 AI가 규율을 지키게 하여, AI 주도 개발 (AI-driven development)의 민주화로 연결하는 것입니다. 이를 위해서는 「AI가 생성하는 코드의 품질을 엔지니어가 매번 리뷰하지 않더라도, AI 스스로가 자율적으로 품질을 담보하는」 설계가 필요했습니다.

「현장의 규칙」을 지키기 위해 「전체의 규칙」을 정하다

AI가 규율을 지키게 하기 위해서는, Cursor라면 「Project Rules」 메커니즘을 이용하여 AI에게 「규칙이나 가이드라인」을 이해시킬 수 있습니다.

이에 「Project Rules」에 Linter나 Formatter에 대한 지시 역할을 하는 규칙을 정했습니다.

「정적 검증 (Static Verification)」이라는 현장의 규칙

먼저 AI와는 독립된 정적 검증 메커니즘을 HTMLHint (Linter)나 Prettier (Formatter) 등의 도구를 도입하여 구축합니다. HTMLHint는 .htmlhintrc 등의 설정 파일에 기반하여 기술적 실수나 부적절한 구조를 기계적으로 검출합니다. Prettier는 코드의 형식을 자동으로 정렬하여 포맷의 일관성을 담보합니다.

「Project Rules」라는 전체의 규칙

그 위에 「정적 검증의 규칙이나 가이드라인을 준수하도록」 하는 규칙을 「Project Rules」에 마련하여, AI를 「규율을 지키는 우수한 운영 담당자」로 만듭니다.

나아가, 수정에 오류가 있어 Linter로부터 지적이 발생한 경우에는 AI 스스로가 그 지적에 따라 수정하도록 규칙을 마련합니다. 이를 통해 「AI가 규칙과 정적 검증 결과에 기반하여 자율적으로 수정할 수 있는 메커니즘」을 실현할 수 있습니다.

「보이는 그대로」와 「자연어」로 직관적으로 수정을 수행하기 위해서는

다음은 비엔지니어라도 망설임 없이 신속하게 수정할 수 있는 워크플로우 설계입니다.

Cursor의 내장 브라우저에는 「Design Mode」가 있습니다. 이 Design Mode를 기점으로 직관적인 조작이 가능하도록 하는 워크플로우 4가지 패턴을 설계했습니다.

1. 편집하고 싶은 곳을 선택하고 자연어로 HTML을 편집하기

Design Mode의 「Select element」로 편집하고 싶은 곳을 선택하고, 그 상태에서 아래와 같은 프롬프트를 입력하여 실행하는 방법입니다. 선택할 수 있는 곳은 요소 단위가 됩니다.

「이 [도입 사례] 요소를 복제하여, [개선 상담] 요소 위에 삽입해 주세요. 이때 라벨을 [체제 지원]으로 변경해 주세요.」

이 방법으로는 수정하고 싶은 곳을 마우스 조작으로 핀포인트로 지정할 수 있으며, 프롬프트도 특별한 전문 용어를 필요로 하지 않습니다.

※ 「Select element」는 내장 브라우저 우측 상단의 툴바에 있는 아이콘(아래 그림의 빨간 테두리)을 통해 활성화합니다.

2. 스크린샷과 자연어로 HTML을 편집하기

「Capture Area Screenshot」 기능을 사용하여 편집하고 싶은 곳이 포함되도록 부분적인 스크린샷을 취득하고, 그 상태에서 아래와 같은 프롬프트를 입력하여 실행하는 방법입니다.

「이 [도입 사례] 요소를 복제하여, [개선 상담] 요소 위에 삽입해 주세요. 이때 라벨을 [체제 지원]으로 변경해 주세요.」

이 방법으로는 요소 선택보다 더욱 직관적으로 지정할 수 있으며, 프롬프트도 특별한 전문 용어를 필요로 하지 않습니다.

※ 「Capture Area Screenshot」은 내장 브라우저 우측 상단의 「…」 메뉴(아래 그림의 빨간 테두리)에서 선택할 수 있습니다.

3. 인스펙터 패널을 사용하여 스타일이나 CSS를 편집하기

「Select element」로 편집하고 싶은 곳을 선택하고, 그 상태에서 인스펙터 패널의 「Design」 탭이나 「CSS」 탭에서 스타일을 편집합니다.

이 방법에서는 프롬프트를 사용하지 않습니다. 디자인 도구와 같은 GUI를 조작해 나갑니다. 비유하자면 디자이너가 Figma 상에서 HTML이나 CSS 속성을 변경하는 이미지입니다.

※ 인스펙터 패널은 내장 브라우저 우측 상단의 패널 표시 아이콘(아래 그림의 빨간 테두리)으로 엽니다.

4. 스크린샷과 자연어로 스타일이나 CSS를 편집하기

「Capture Area Screenshot」 기능을 사용하여 스타일을 변경하고 싶은 곳이 포함되도록 부분적인 스크린샷을 취득하고, 그 상태에서 아래와 같은 프롬프트를 입력하여 실행하는 방법입니다.

"버튼을 빨간색으로 변경해 주세요."

이 방법을 사용하면 스타일 변경에 대해서도 대상을 직관적으로 지정할 수 있으며, 프롬프트 또한 특별히 전문 용어를 필요로 하지 않습니다.

마지막으로

제2회에서는 AI 주도 개발 (AI-driven development)을 현장에 정착시키기 위한 설계에 대해 해설했습니다.

• 거버넌스 (Governance) 설계: AI가 규율을 준수하며 자율적으로 품질을 보증하는 메커니즘 구축
• 워크플로우 (Workflow) 설계: 직관적인 조작으로 AI에게 지시를 내릴 수 있는 운영 워크플로우 구축

이러한 설계는 현 시점에서는 아직 첫걸음에 불과하며, 프로젝트 규칙 (Project Rules)을 더욱 정밀화하는 것이나 Design Mode를 포함한 Cursor의 추가적인 심층 분석도 필요합니다.

그 결과, 더욱 고도화된 업무 요구사항도 견딜 수 있는 강력한 거버넌스의 실현이나, AI에 대한 지시 해상도를 높이는 새로운 워크플로우의 발견으로도 이어질 가능성이 있습니다.

이번 PoC는 단기간의 검증이며, 실제 현장에서 운용할 때는 예기치 못한 결함이나 과제도 발생할 것입니다.

하지만 이 메커니즘을 베이스로 하여 검증과 개수를 반복해 나간다면, "Web 운영 현장에서도 안전하게 사용할 수 있는 체계"로 만들 수 있다고 생각합니다.

최종회인 제3회에서는 이러한 설계 사상을 구체화하기 위한 구체적인 구현에 대해 소개해 드리겠습니다.

Discussion