지난 2년 동안 Work & Co 팀과 저는 Copilot, Cursor, Claude 및 ChatGPT와 같은 AI 코딩 도구를 테스트하고 점진적으로 통합하여 대중이 사용하는 웹 경험을 제공하는 데 도움을 주었습니다. 물론, 초기 회의론과 몇 번의 아하 순간 이후 다양한 AI 도구가 일상적으로 사용되는 방식을 찾았습니다. 시간이 지남에 따라 AI가 인계받는 것이 타당하다고 판단한 애플리케이션 목록이 늘어나기 시작했습니다. 그래서 저는 제가 "책임 있는 개발자"라고 부르는 AI 도구의 실제 사용 사례를 공유하기로 결정했습니다. 책임 있는 개발자란 무엇을 의미하나요? 우리는 이해관계자와 고객이 기대하는 대로 고품질 코드를 제공해야 합니다. 우리의 기여(예: 끌어오기 요청)가 우리 작업을 검토하고 테스트해야 하는 동료에게 부담이 되어서는 안 됩니다. 또한 회사에서 일하는 경우: 우리가 사용하는 도구는 고용주의 승인을 받아야 합니다. 보안 및 개인정보 보호와 같은 민감한 측면은 적절하게 처리되어야 합니다. 정책 승인 없이 비밀, 고객 데이터(PII) 또는 독점 코드를 도구에 붙여넣지 마십시오. 인터넷에서 낯선 사람이 보낸 코드처럼 취급하세요. 항상 테스트하고 확인하십시오. 참고: 이 문서에서는 VSCode 또는 Cursor 내의 Copilot과 같은 AI 코딩 도구에 대한 매우 기본적인 지식이 있다고 가정합니다. 이 모든 것이 완전히 새롭고 생소하게 들린다면 Github Copilot 비디오 튜토리얼이 환상적인 출발점이 될 수 있습니다.
AI 코딩 도구의 유용한 응용 프로그램 참고: 다음 예는 주로 React, Vue, Svelte 또는 Angular와 같은 JavaScript 기반 웹 애플리케이션에서의 작업에 중점을 둡니다. 익숙하지 않은 코드베이스에 대한 이해 확립된 코드베이스에서 작업하는 것은 드문 일이 아니며 대규모 레거시 코드베이스에 합류하는 것은 위협적일 수 있습니다. 프로젝트와 AI 에이전트(제 경우에는 VSCode의 Copilot Chat)를 열고 동료에게 묻는 것처럼 질문을 시작하기만 하면 됩니다. 일반적으로 나는 동료 인간과 마찬가지로 AI 에이전트와 대화하는 것을 좋아합니다. 다음은 보다 세련된 예시 프롬프트입니다. "진입점, 라우팅, 인증, 데이터 계층, 빌드 도구 등 상위 수준의 아키텍처 개요를 제공합니다. 그런 다음 읽을 파일 5개를 순서대로 나열합니다. 설명을 가설로 취급하고 참조 파일로 이동하여 확인합니다."
"라우팅이 어떻게 세부적으로 진행되나요?"와 같은 후속 질문을 계속해서 질문할 수 있습니다. 또는 "인증 프로세스 및 방법에 대해 알려주십시오."를 통해 익숙하지 않은 코드베이스의 어둠을 밝히는 데 도움이 되는 지침을 얻을 수 있습니다. 종속성 업그레이드 시 주요 변경 사항 심사 특히 주요 변경 사항이 포함된 경우 npm 패키지를 업데이트하는 것은 지루하고 시간이 많이 걸리는 작업일 수 있으며 상당한 양의 회귀를 디버그하게 만듭니다. 최근에 데이터 시각화 라이브러리ploly.js를 버전 2에서 3으로 한 가지 주요 릴리스 버전으로 업그레이드해야 했고 그 결과 일부 그래프의 축 레이블이 작동을 멈췄습니다. 계속해서 ChatGPT에 질문했습니다. "Plotly를 사용하는 Angular 프로젝트를 업데이트했습니다. dist 패키지를 버전 2.35.2에서 3.1.0으로 업데이트했습니다. 이제 x 및 y 축의 레이블이 사라졌습니다. 무슨 일이 일어났나요?"
상담원이 즉시 해결책을 가지고 돌아왔습니다(아래에서 직접 확인하세요). 참고: 수정 사항을 배송하기 전에 공식 마이그레이션 가이드에 대한 설명을 확인했습니다.
파일 간에 안전하게 리팩터링 복제 코드베이스가 늘어나면 코드 통합 기회가 확실히 드러납니다. 예를 들어 단일 함수나 구성 요소로 추출할 수 있는 파일 전체에서 코드 중복이 발견되었습니다. 결과적으로 대신 포함될 수 있는 공유 구성 요소를 만들고 해당 리팩터링을 하나의 파일에서 수행하기로 결정했습니다. 이제 남은 파일에 대한 변경 사항을 수동으로 수행하는 대신 에이전트에 리팩터링을 롤아웃하도록 요청합니다. 에이전트를 사용하면 여러 파일을 컨텍스트로 선택할 수 있습니다. 한 파일에 대한 리팩터링이 완료되면 리팩터링된 파일과 변경되지 않은 파일을 모두 컨텍스트에 추가하고 다음과 같이 에이전트에 변경 사항을 다른 파일에 롤아웃하라는 메시지를 표시할 수 있습니다. "파일 A에서 변경한 내용을 파일 B에도 복제합니다." 익숙하지 않은 기술의 기능 구현 AI 코딩 도구를 사용하여 제가 가장 좋아하는 순간 중 하나는 제가 상당히 익숙하지 않은 언어인 GLSL로 매우 복잡한 애니메이션 그라데이션 애니메이션을 만드는 데 도움이 되었을 때였습니다. 최근 프로젝트에서 우리 디자이너들은 3D 개체의 로딩 상태로 애니메이션 그라디언트를 생각해냈습니다. 저는 이 개념이 정말 마음에 들었고 고객에게 독특하고 흥미로운 것을 전달하고 싶었습니다. 그만큼문제: 구현하는 데 이틀 밖에 걸리지 않았으며 GLSL은 학습 곡선이 상당히 가파릅니다. 이번에도 AI 도구(이 경우 ChatGPT)가 유용했고, 캔버스와 매우 간단한 애니메이션 색상 그라데이션을 렌더링하는 독립형 HTML 파일을 생성하라는 메시지를 아주 간단하게 시작했습니다. 단계별로 셰이더를 실제 코드베이스에 통합하기 시작할 수 있도록 괜찮은 결과에 도달할 때까지 AI에 더 많은 정교함을 추가하도록 요청했습니다. 최종 결과: 고객은 매우 만족했으며 AI 덕분에 짧은 시간 내에 복잡한 기능을 제공했습니다. 테스트 작성 내 경험에 따르면 프로젝트에서 적절한 단위 및 통합 테스트 모음을 지속적으로 작성하고 유지 관리할 시간이 충분하지 않으며, 게다가 많은 개발자가 테스트 작성 작업을 실제로 즐기지 않습니다. AI 도우미에게 테스트를 설정하고 작성하도록 요청하는 것은 전적으로 가능하며 짧은 시간 내에 완료될 수 있습니다. 물론 개발자로서 귀하는 테스트에서 애플리케이션의 중요한 부분을 실제로 살펴보고 합리적인 테스트 원칙을 따르는지 확인해야 하지만 AI 도우미에게 테스트 작성을 "아웃소싱"할 수 있습니다. 예시 프롬프트: "Jest를 사용하여 이 함수에 대한 단위 테스트를 작성하세요. 행복한 경로, 엣지 케이스 및 실패 모드를 다루세요. 각 테스트가 존재하는 이유를 설명하세요."
아래와 같이 테스트 전문가 Kent C. Dodds의 테스트 모범 사례를 에이전트에 지침으로 전달할 수도 있습니다.
내부 툴링 앞서 언급한 셰이더 예제와 다소 유사하며 최근에는 코드 베이스의 코드 중복을 분석하고 리팩터링 전후를 비교하는 임무를 받았습니다. 파일을 수동으로 비교하는 데 시간이 많이 걸리는 경로를 가고 싶지 않다면 확실히 쉬운 작업은 아닙니다. Copilot의 도움으로 코드 중복을 분석하고 출력을 테이블로 정렬 및 정렬한 다음 Excel로 내보내는 스크립트를 만들었습니다. 그런 다음 한 단계 더 나아갔습니다. 코드 리팩터링이 완료되면 에이전트에게 기존 Excel 시트를 기준으로 삼아 별도의 열에 현재 복제 상태를 추가하고 델타를 계산하라는 메시지를 표시했습니다. 오래 전에 작성된 코드 업데이트 최근에 내 오래된 고객이 시간이 지남에 따라 그의 웹사이트에서 몇 가지 기능이 더 이상 제대로 작동하지 않는다는 연락을 받았습니다. 문제점: 웹사이트는 거의 10년 전에 구축되었으며 JavaScript와 SCSS는 requireJS와 같은 다소 오래된 컴파일 도구를 사용하고 있었고 설정에는 내 2025 MacBook에서도 실행되지 않는 이전 버전의 Node.js가 필요했습니다. 전체 빌드 프로세스를 수동으로 업데이트하려면 며칠이 걸렸기 때문에 AI 에이전트에게 "JS 및 SCSS 빌드 프로세스를 Vite와 같은 린 2025 스택으로 업데이트할 수 있습니까?"라고 묻기로 결정했습니다. 물론 그랬고, 에이전트와 약 한 시간 동안 개선한 후에 SCSS 및 JS 빌드를 Vite로 전환했고 실제 버그 수정에 집중할 수 있었습니다. 빌드 프로세스에 대한 통합 변경을 수행할 때 출력 및 컴파일된 파일의 유효성을 올바르게 확인하십시오. 요약 및 초안 작성 커밋 메시지에 대한 한 문장으로 최근 코드 변경 사항을 모두 요약하고 싶나요? 아니면 커밋 목록이 길어 세 개의 글머리 기호로 요약하고 싶나요? 문제 없습니다. AI가 처리하도록 하세요. 단, 반드시 교정해 주세요. 예시 프롬프트는 동료에게 메시지를 보내는 것만큼 간단합니다. "최근 변경 사항을 간결한 항목으로 요약해 주세요." 여기서 제가 드릴 수 있는 조언은 글을 작성할 때 GPT를 주의해서 사용하라는 것이며, 코드와 마찬가지로 보내거나 제출하기 전에 출력을 확인하라는 것입니다. 권장 사항 및 모범 사례 프롬프트 AI 사용의 그다지 명확하지 않은 이점 중 하나는 프롬프트가 더 구체적이고 맞춤화될수록 결과가 더 좋아진다는 것입니다. AI 에이전트에게 메시지를 표시하는 프로세스를 통해 우리는 작성하고 코딩하기 전에 요구 사항을 최대한 구체적으로 공식화해야 합니다. 그렇기 때문에 일반적으로 메시지를 최대한 구체적으로 제시하는 것이 좋습니다. Remix의 공동 저자인 Ryan Florence는 초기 프롬프트를 다음 문장으로 마무리하여 이 프로세스를 개선할 수 있는 간단하면서도 강력한 방법을 제안합니다. “시작하기 전에 저한테 궁금한 점이 있으신가요?”
이 시점에서 AI는 일반적으로 특정 의도를 명확히 할 수 있는 유용한 질문을 제공하여 에이전트가 작업에 대한 보다 맞춤화된 접근 방식을 제공하도록 안내합니다.
버전 제어를 사용하고 소화 가능한 청크에서 작업 git과 같은 버전 제어를 사용하면 단일 코드베이스에서 팀으로 협업할 때 유용할 뿐만 아니라긴급 상황 발생 시 롤백할 수 있는 안정적인 포인트가 있는 개인 기여자입니다. 비결정적 특성으로 인해 AI는 때때로 악의적으로 행동하여 달성하려는 목표에 도움이 되지 않는 변경을 수행하고 결국 돌이킬 수 없을 정도로 문제를 일으킬 수 있습니다. 작업을 여러 커밋으로 나누면 문제가 잘못될 경우 되돌릴 수 있는 안정적인 지점을 만드는 데 도움이 됩니다. 그리고 팀원들도 코드를 의미상 잘 구조화된 덩어리로 분할하면 코드를 검토하기가 더 쉬워지므로 감사할 것입니다. 철저한 검토 이것은 일반적인 모범 사례에 가깝지만 제 생각에는 개발 작업에 AI 도구를 사용할 때 훨씬 더 중요해집니다. 코드의 첫 번째 비판적 검토자가 되십시오. 다른 사람의 코드를 검토하는 것처럼 시간을 내어 변경 사항을 한 줄씩 검토하고 자체 검토를 통과한 후에만 작업을 제출하세요. "지금 나에게는 두 가지 사실이 모두 사실입니다. AI 에이전트는 놀랍고 생산성이 크게 향상됩니다. 또한 두뇌를 끄고 완전히 놓아버리면 그들은 또한 엄청난 슬롭 머신입니다."— Armin Ronacher는 자신의 블로그 게시물 Agent Psychosis: Are We Going Insane?
결론과 비판적 생각 제 생각에는 AI 코딩 도구는 개발자로서 매일 생산성을 향상시키고 더 많은 계획과 높은 수준의 사고를 위한 정신적 능력을 확보할 수 있습니다. 그들은 우리가 원하는 결과를 세심한 세부사항으로 표현하도록 강요합니다. 모든 AI는 때때로 환각을 느낄 수 있는데, 이는 기본적으로 자신감 있는 어조에 있다는 것을 의미합니다. 그러니 특히 의심스러울 때는 반드시 확인하고 테스트하시기 바랍니다. AI는 만능이 아니며, 개발자로서 탁월함과 문제 해결 능력은 결코 유행에서 벗어나지 않을 것이라고 믿습니다. 이제 막 경력을 시작한 개발자에게 이러한 도구는 대부분의 작업을 수행하고 싶은 유혹을 느낄 수 있습니다. 여기서 길을 잃을 수 있는 것은 디버그하고 해결하기 까다로운 버그와 문제, 즉 "갈기"를 통해 자주 힘들고 고통스러운 작업을 수행하는 것입니다. Cursor AI의 Lee Robinson조차도 그의 게시물 중 하나에서 이에 대해 질문합니다.
AI 코딩 도구는 빠른 속도로 발전하고 있으며 앞으로 어떤 일이 일어날지 기대됩니다. 이 기사와 해당 팁이 도움이 되기를 바라며 이러한 내용 중 일부를 직접 시도해 보시기 바랍니다.
