AI 쌍 프로그래밍으로 앱 구축: 스프린트에서 얻은 교훈-JS 튜토리얼-php.cn

개발자로서 우리는 항상 생산성을 향상하고 작업 흐름을 간소화할 수 있는 방법을 찾고 있습니다. 최근 AI의 발전과 이러한 기술이 판도를 바꿀 것이라는 확고한 믿음을 바탕으로 저는 이러한 도구를 실제 개발 시나리오에서 테스트해 보기로 결정했습니다.

내 목표: 단 7시간 만에 풀 스택 AI 기반 음식 추적 앱 PoC를 구축합니다.
결과: 꽤 잘 작동했습니다! 하지만 도전이 없는 것은 아닙니다.

AI를 개발 친구로 활용하는 방법에 대해 제가 배운 내용은 다음과 같습니다.

프로젝트

목표는 야심차지만 집중적이었습니다. 사용자가 음식을 사진으로 찍고 AI 인식을 사용하여 음식 추적기에 자동으로 기록할 수 있는 모바일 앱을 만드는 것입니다. 기술 스택에는 AI 추론을 위한 Google Gemini 2.0 Flash와 함께 내가 주로 사용하는 Quasar Framework(VueJS Framework), Google Firebase 및 Capacitor(Mobile Dev Framework)가 포함되었습니다.

매우 화려하지는 않지만 AI 지원을 테스트하기에 충분히 복잡합니다.

A.I. 도구

저는 프로젝트의 다양한 측면을 지원하기 위해 AI 도구 조합을 사용했습니다.

ChatGPT(o1 모델): 상위 수준 계획, 요구 사항 수집 및 일반 지침
Claude 3.5 Sonnet via WindSurf/Cascade: 코드 생성 및 특정 개발 작업에는 Codeium의 WindSurf라는 도구를 사용했습니다. 본질적으로 AI를 사용하여 Visual Studio Code를 기반으로 구축된 IDE입니다. 코드 작성기가 내장되어 있습니다. 파일에 직접 액세스할 수 있으며 버전 관리를 통해 전체 파일을 빠르게 작성하고 편집할 수 있습니다.
Google Gemini 2.0 Flash: 이미지 인식 및 음식 분류용. 이 모델은 매우 강력하고 매우 저렴합니다.

"개발자 인턴으로서의 AI" 접근 방식

제가 얻은 가장 귀중한 통찰력 중 하나는 AI를 주니어 개발자나 인턴으로 생각했다는 것입니다. 이 정신적 모델은 제가 협업에 접근하는 방식을 완전히 바꿔 놓았습니다. 전체 프로젝트를 새로운 인턴의 책상 위에 놓고 완벽한 결과를 기대하지 않는 것처럼 저는 다음을 배웠습니다.

지침을 명시적으로 설명하세요
작업을 관리 가능한 단위로 나누기
결과 검토 및 피드백 제공
한 번에 너무 많은 것을 기대하지 마세요
필요할 때 지침과 지시 제공

이 접근 방식은 AI를 "모든 것을 알고 있다"거나 "완전히 신뢰할 수 없다"고 취급하는 것보다 더 나은 결과를 가져왔고 더 효과적이었습니다.

잘 된 점

계획 및 요구 사항

AI는 기획 단계에서 매우 큰 도움이 되었습니다. 저는 대략적인 프로젝트 개요로 시작하여 반복적인 프롬프트를 사용하여 이를 개선했습니다. 예를 들어, 나의 초기 프롬프트 중 하나는 다음과 같습니다.

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.

로그인 후 복사

이를 통해 프로젝트 범위와 일정이 구체화되어 더욱 현실적이고 세부적인 계획이 수립되는 데 도움이 되었습니다.

선적 서류 비치

AI 도구는 문서 생성 및 유지 관리에 탁월했습니다. 포괄적인 마크다운 파일을 신속하게 생성하고 프로젝트가 진행됨에 따라 업데이트된 상태를 유지할 수 있습니다. 이를 통해 실제 개발 작업에 귀중한 시간을 확보할 수 있었습니다.

반복 개발

Building an App with AI Pair Programming: Lessons from a our Sprint

개발을 더 작고 집중적인 프롬프트로 나누는 것이 매우 효과적인 것으로 나타났습니다. 전체 구성 요소를 한 번에 생성하는 대신 이전 구성 요소를 기반으로 하는 일련의 프롬프트를 사용했습니다. 예:

먼저, Firebase 백엔드 인프라 설정
그런 다음 프런트엔드 상용구 작성
카메라 캡쳐 화면 등 구체적인 기능에 이어
마지막으로 데이터 처리 및 표시 기능 추가

제가 발견한 멋진 비결은 A.I. 진행 상황과 다음 단계를 기록하여 프롬프트 사이에 참조할 내용이 있을 수 있도록 하세요. WindSurf를 사용하고 있었기 때문에 "마스터 프롬프트"를 사용하여 대화를 계속할 수 있었습니다. 마스터 프롬프트는 AI에게 지시합니다. 코드를 작성하면서 메모를 다시 참조하고 추가하세요.

버그 수정 및 개발 후

WindSurf가 빛을 발한 또 다른 부분은 버그 수정 및 개발 후 작업이었습니다.

앱을 테스트하고 몇 가지 버그를 발견한 후 WindSurf에 목록을 전달했는데 WindSurf에서 신속하게 문제를 식별 및 수정하고 수정 사항이 제대로 작동하는지 확인하기 위한 테스트 사례도 생성할 수 있었습니다. 덕분에 시간과 노력이 많이 절약되었습니다.

다음과 같은 버그 목록이 있었는데, 수동으로 수정해야 했던 경우는 몇 번 없었습니다.

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.

로그인 후 복사

[x] BUG> 사진을 찍고 취소를 누르면 카메라가 꺼집니다(웹 구현)
[x] BUG> 감지된 음식 보기에서 음식이 감지되지 않으면 목록이 비어 있어 좋지만 음식이 감지되지 않았음을 설명하기 위해 일종의 아이콘과 텍스트를 표시해야 합니다. 추가 또는 감지됨
[x] BUG> 감지된 음식 보기에서 각 항목(텍스트 제목, 신뢰도, 삭제 버튼, 일치하는 음식 드롭다운 선택)을 더 잘 그룹화하여 추가하는 것이 좋을 것입니다. 이러한 모든 요소는 동일한 식품 감지의 일부입니다. 이는 q-카드, 더 나은 스타일링 등을 통해 수행할 수 있습니다
[ * ] 버그> 감지된 음식 보기에서 카메라를 통해 추가된 항목이 아닌 검색을 통해서만 추가된 항목에 대한 드롭다운을 열려고 하면 일치하는 음식 선택 드롭다운이 제대로 다시 열리지 않습니다. )
[x] BUG> 감지된 음식 보기에서 취소 버튼을 누르면 사용자가 대시보드로 돌아가야 합니다. 입력이 비어 있으면 debounceSearch가 실행되지 않아야 합니다
[-] 특징> 출품작 제출(백엔드) - IMG를 가져와 크기 조정, 자르기, 압축 등을 통해 이미지가 128*128 정사각형에 잘 맞도록 만듭니다. 이미지에 대해 다양한 크기를 생성하고 제출 기록에 이미지에 대한 링크를 추가합니다(imageUrl 측면과 함께)
[x] 기능> 대시보드 - 캡처된 각 식사 항목에 대한 IMG를 표시하고 적절한 크기를 로드합니다
[x] 특징> 식사 보기 페이지 추가 -> 모든 세부 정보와 차트 등을 표시합니다
[x] 기능> 식사 편집 기능 추가 -> 카메라 페이지 보기에서 모달을 다시 가져오되 모달만 사용하십시오. 카메라를 시작하지 마세요.
[x] 기능> 식사 삭제 기능 추가
[x] 기능> 식사 기록 보기: 모든 식사 항목을 날짜별로 페이지별로 볼 수 있는 기능. 퀘이사 타임라인 사용 -> 이 페이지로 이동하려면 메뉴에 식사 버튼이 있어야 합니다. 이 페이지에는 IndexPage.vue의 식사 항목에 표시된 것과 동일한 유형의 카드가 표시되어야 합니다
[x] 기능> 물 기록 보기: 모든 물 항목을 날짜별로 페이지별로 볼 수 있는 기능, 퀘이사 타임라인 사용 -> 이 페이지로 이동하려면 메뉴에 물 버튼이 있어야 합니다. 이 페이지에는 IndexPage.vue의 물 항목에 표시된 것과 동일한 유형의 카드가 표시되어야 합니다
[x] BUG> 물 기록 편집이 작동하지 않습니다
[x] BUG> 물 이력 데이터가 이상해요

도전 과제와 문제점

모든 것이 순조롭게 진행된 것은 아닙니다. 몇 가지 주요 과제가 나타났습니다.

파일 편집 문제

파일 수정과 관련하여 몇 가지 제한 사항을 발견했습니다.

열린 파일이 WindSurf에 의해 잠긴 것처럼 보이거나 편집할 수 없게 되는 경우가 있습니다
대화가 길어지면 코드 편집 품질이 절대적으로 저하됩니다

참고: 이 글을 쓰는 현재 최신 버전의 WindSurf에서는 파일 잠금/실패한 파일 편집 버그가 수정된 것 같습니다.

컨텍스트 관리

대화가 길어지면 AI 지원 품질이 저하됩니다. 하나의 긴 세션을 유지하려고 하기보다는 새로운 구성 요소에 대해 신선한 대화를 시작하고 압축된 컨텍스트를 제공하는 방법을 배웠습니다.

코드가 길어지고 복잡해지면서 AI가 따라잡는 데 어려움을 겪었습니다. 품질을 유지하기 위해 작업을 더 작고 관리하기 쉬운 단위로 나누어야 하거나 AI가 제대로 작동하도록 많은 세부 정보와 컨텍스트를 제공해야 했습니다.

방향을 벗어나면 기능이 삭제되거나, 관련 코드가 삭제되거나, 때로는 완전히 잘못된 것을 구축하는 일이 수반됩니다. 이는 시간 낭비가 컸기 때문에 AI를 계속 추적하거나 수동으로 코딩하기로 결정하는 데 매우 신중해야 했습니다.

수동으로 코딩해야 할 때 알기

Building an App with AI Pair Programming: Lessons from a our Sprint

때로는 직접 수행하는 것이 더 빠를 때도 있습니다. 이러한 순간을 인식하는 방법을 배우면 상당한 시간과 좌절감을 줄일 수 있습니다. 내 개발 로그에 언급된 바와 같이: "작동할 때는 잘 작동하고, 그렇지 않을 때는 시간 낭비가 될 수 있습니다."

새롭게 등장한 모범 사례

Git 자주 커밋: AI가 중요한 변경을 수행하기 전에 현재 상태를 커밋합니다. 이는 문제가 발생할 경우 쉽게 대처할 수 있는 방법을 제공합니다.
보일러플레이트 코드 준비: AI 지원을 받기 전에 프로젝트 구조와 기본 구성을 설정하세요. 제 경우에는 다음을 의미했습니다.
- Quasar/Vue CLI 설정
- Firebase CLI 및 구성요소 구성
- 기본 프로젝트 구조 확립
명확하고 상세한 메시지: 요구 사항을 최대한 구체적으로 설명하세요. 관련 맥락과 예시를 포함하세요. 요구 사항 및 설계 단계에 최대한 많은 시간을 할애하고 최대한 많은 세부 정보를 제공하세요. 이러한 메모와 지침은 프로젝트를 더 효과적으로 실행하는 데 도움이 될 뿐만 아니라 AI가 생성한 코드의 품질을 대폭 향상시킵니다.
반복 피드백: 주저하지 말고 AI를 수정하거나 안내하세요. 예를 들어 요구 사항에 맞지 않는 출력을 받았을 때 다음과 같은 구체적인 피드백을 제공했습니다.

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.

로그인 후 복사

이런 구체적인 피드백은 대개 빠르고 정확한 수정으로 이어졌습니다.

평결

AI를 사용하면 개발이 절대적으로 가속화됩니다. 지침과 간헐적인 수정이 필요했지만 ChatGPT와 Claude, WindSurf를 함께 사용하면 같은 시간에 혼자 할 수 있는 것보다 훨씬 더 발전할 수 있었습니다.

단, 성공하려면 이러한 도구의 기능과 한계를 모두 이해해야 했습니다. 핵심은 AI 지원과 인간의 전문성 사이에서 적절한 균형을 찾고 각각의 장점을 활용하는 것이었습니다.

앞으로

Building an App with AI Pair Programming: Lessons from a our Sprint

이 실험은 AI 도구가 현재 개발자를 대체하는 것이 아니라 개발자의 역량을 강화하는 개발 워크플로의 필수적인 부분이 되는 미래를 제시합니다. 핵심은 이러한 도구를 효과적으로 사용하는 방법을 배우고, 도구의 장점과 한계를 이해하고, 단점을 최소화하면서 장점을 극대화하는 워크플로를 개발하는 것입니다.

AI를 워크플로에 통합하는 데 관심이 있는 개발자의 경우 작은 규모로 시작하여 명확한 상호 작용 패턴을 확립하고, AI의 기능과 한계에 익숙해짐에 따라 점차적으로 AI의 역할을 확장하는 것이 좋습니다.

도구는 주니어 개발자 수준이며, 곧 충분한 교육 데이터와 반복을 통해 훨씬 더 많은 작업을 수행할 수 있게 될 것입니다. 이러한 도구가 궁극적으로 전체 애플리케이션을 작성하고 대부분의 개발 프로세스를 처리하는 것을 볼 수 있습니다. 모델이 선임 개발자를 시뮬레이션할 수 있을 때까지는 여전히 인간의 감독과 지도가 필요합니다.