AI 코딩 도구 활용

pxd에서 AI 코딩 도구에 대한 관심은 ChatGPT 등장 직후인 2023년부터 이미 시작됐다. UX 엔지니어 Seulbi Lee는 "React·Next 컴포넌트로 탭 클릭 시 자동 스크롤되는 코드를 만들어달라"는 자연어 프롬프트로 ChatGPT가 동작하는 코드와 상세한 설명을 함께 생성해주는 것을 확인했고, 같은 질문을 반복해도 매번 다른 접근(직접 구현 vs 라이브러리 활용)의 답변을 내놓는다는 점에 주목했다. VSCode 확장 프로그램 aicodehelper(ChatGPT API 기반)를 활용해 직접 작성한 커스텀 훅에 대한 코드 리뷰(좋은 점·나쁜 점)를 받아본 사례도 소개했는데, 획기적인 수준은 아니었지만 신입 개발자의 실수를 줄여주는 최소한의 보호막 역할은 할 수 있다고 평가했다. 이 초기 탐색은 "AI가 사람을 완전히 대체하기보다 업무 시간을 단축하고 실수를 줄이는 보조 도구"라는 결론으로 이어졌으며, 이후 pxd XE 그룹이 GitHub Copilot·Cursor AI 등을 본격 도입하며 발전시킨 AI 코딩 활용 흐름의 출발점이 된다.

개발자를 위한 AI 코딩 도구는 깃허브 코파일럿(Copilot)을 시작으로 커서(Cursor AI) 등으로 확장되고 있다. pxd의 개발 조직 XE 그룹은 이 도구들을 실무에 도입해 비교 검토했다. 커서는 VSCode를 포크해 만들었기 때문에 기존 개발 환경을 그대로 유지하면서 진입장벽 없이 사용할 수 있다는 점이 첫 번째 장점이다. 일부 단축키 충돌이 있으므로 자주 쓰는 단축키는 미리 재설정하는 것이 좋다.

커서의 핵심 강점은 세 가지다. 첫째, 현재 작업 중인 리포지터리를 파악해 파일 경로·변수명 등을 문맥에 맞게 자동 완성해 준다. 코파일럿 대비 더 정확한 맥락 인식이 가능하다. 둘째, 원하는 개발 문서를 직접 학습시킨 뒤 해당 문서 기반으로 코드를 추천받을 수 있어 최신 API에도 대응된다. 셋째, GPT-4o·Claude 3.5 Sonnet 등 복수의 AI 모델을 편집기 내에서 전환하며 사용할 수 있다. 컴포저(Composer) 기능은 프롬프트만 입력하면 파일 생성·수정·삭제까지 자동 수행하고, 체크포인트 기능으로 작업 이력을 관리해 원하는 시점으로 되돌릴 수 있다.

GitHub Copilot은 VSCode에 확장 프로그램으로 설치해 바로 사용할 수 있다. pxd XE 그룹의 1년 실사용 경험에 따르면, 챗 뷰(Chat View)와 인라인 챗(Inline Chat) 방식이 실용적이며 코드 자동 완성 기능은 단순 반복 작업의 능률을 높이는 데 효과적이다. 커서 대비 프로젝트 맥락 인식이 약하고 다파일 수정에 취약하다는 한계가 있다.

Claude 3는 Anthropic이 개발한 LLM으로 Opus(최고 성능), Sonnet(속도·성능 균형), Haiku(빠른 응답) 세 모델로 구성된다. ChatGPT 대비 복잡한 코드 분석과 긴 컨텍스트 처리에 강점이 있으며, 실무에서는 GPT와 Claude를 각각의 강점에 맞게 병행 사용하는 것이 효과적이다.

Cursor IDE의 Composer는 Figma 플러그인 개발에도 활용할 수 있다. pxd의 Scaffold Design System에서 Text Styles의 font-size를 variables 값과 수동 매칭해야 하는 반복 작업을 Figma API 문서를 Cursor에 학습시킨 뒤 자연어 프롬프트만으로 자동 매칭 플러그인을 약 2~3시간 만에 완성한 사례가 있다.

생성형 AI는 UI 디자인 작업에도 적용된다. pxd talks 사례에서는 ChatGPT(브랜드 전략·광고 카피 초안), Midjourney(고품질 이미지 생성)를 조합해 소규모 브랜드에서 적은 리소스로 높은 생산성을 달성했다. AI는 보조 도구이며, 전체 디자인 프로세스와 창의적 결정은 여전히 디자이너의 역할이다.

핵심 내용

  • 2023년 ChatGPT를 활용한 초기 실험: 자연어 프롬프트로 React/Next 컴포넌트 코드 생성, VSCode 확장 aicodehelper로 코드 리뷰 시도 — 이후 Copilot·Cursor 도입의 출발점
  • 커서: VSCode 포크로 기존 환경 그대로 사용 가능, 리포지터리 맥락 기반 자동 완성이 코파일럿보다 정교함
  • 커서 컴포저: 프롬프트만으로 파일 생성·수정·삭제 + 체크포인트 이력 관리
  • GitHub Copilot: 챗 뷰·인라인 챗 방식이 실용적, 단순 자동완성에 효과적
  • Claude 3: Opus/Sonnet/Haiku 3단계, 복잡한 코드 분석과 긴 컨텍스트에 강점
  • AI 생성 코드는 반드시 검토 필요, 사용 횟수·속도 제한도 실무에서 주의
  • Figma 플러그인 개발에 Cursor 활용: API 문서 학습 후 프롬프트로 구현 가능 (약 2~3시간)
  • 챗GPT를 활용한 IA 구성 및 와이어프레임 생성은 빠른 초안 제작에 유용하나 팀 검토 필수
  • 디자이너의 AI 활용: ChatGPT(기획), Midjourney(이미지)를 조합한 브랜드 효율화

관련 개념

바이브 코딩(Vibe Coding) 실전 경험: pxd XE Group이 Next.js + TypeScript + Cursor + Figma MCP 환경에서 내부 BXD·pxdAX 웹사이트를 실제로 90% 이상 바이브 코딩으로 구현한 결과, 두 가지 핵심 교훈이 나왔다. ① 프롬프트 전략이 결과를 좌우한다. 피그마 링크만 던지면 "그럴듯한 수준"에 그치지만, 컴포넌트명, SCSS 모듈 방식, 접근성 고려, vw mixin 사용, 모바일/태블릿/PC별 링크와 상세 인터랙션 요구사항 등을 구체적으로 명시하면 퀄리티가 확연히 달라진다. 유튜브에서 보여지는 '링크만 전달해 뚝딱 완성' 데모는 실전에서 재현되지 않는다. ② 커서 룰(Cursor Rule)로 반복 최소화. 팀의 코드 스타일·컨벤션을 룰로 저장하면 매번 긴 프롬프트를 입력할 필요가 없다. 만족스러웠던 점: 마이크로 인터랙션·스크립트 기반 기능 구현은 빠르고 정확(2~3시간 작업을 1~2분에). 아쉬웠던 점: 디자인의 디테일한 수치 반영은 여전히 손이 많이 가며, 수정을 반복하다 보면 기존 기능이 망가지는 경우 발생. 결론: "퀄리티 = 자세한 프롬프트"이며, 자세한 프롬프트를 작성하려면 결국 개발 지식이 있는 사람이 절대적으로 유리하다.

커서의 Notepads 기능(베타)은 개발 중 참조 문서를 유지하는 도구로, 피그마에서 추출한 수천 줄의 SCSS 변수나 복잡한 요구사항을 구조화해 AI가 맥락을 더 명확하게 이해하도록 돕는다. 단, AI 코딩 도구의 실질적 한계도 명확하다: 복잡한 UI 명세 처리 미흡, 프로젝트 규모 커질수록 맥락 손실, 보안 제한 환경 미지원. 소규모 프로젝트와 정적 사이트에서는 효과적이나 대규모 상용 앱은 개발자 검토가 반드시 필요하다. "프로덕션급 앱 개발에는 AI 오류와 보안 문제를 잡아낼 개발자 지식이 필요하다"는 점이 핵심 결론이다.

Adobe Make it. Seoul 2025 컨퍼런스는 생성형 AI가 콘텐츠 창작 워크플로우를 어떻게 바꾸는지 보여주는 사례를 공유했다. Frame.io는 클라우드 기반 영상 협업 플랫폼으로, 스튜디오 드래곤이 도입해 촬영 중 즉시 클라우드 업로드 → 원격 팀의 실시간 검수가 가능해졌다. 타임라인 기반 댓글·드로잉·로고 첨부, 포렌식 워터마크, Adobe Premiere 통합 기능을 갖춘다. AiINN(이노바션)은 Adobe Firefly의 Object Composites API를 활용해 제품 이미지를 왜곡 없이 합성하는 마케팅 콘텐츠 AI 솔루션이다. Project NEO는 기본 도형 조합과 Pathfinder 기능으로 3D 아트워크를 생성하는 Adobe 베타 툴이며, Firefly Custom Model은 특정 캐릭터 IP를 80% 충실도로 재현할 수 있는 파인튜닝 기능이다.

GitHub에서 AI를 활용한 PR 리뷰 자동화도 실무 사례가 늘고 있다. pxd XE 그룹은 GitHub Actions와 Claude API를 연동해 PR 오픈 시점에 자동으로 코드 리뷰를 요청하는 파이프라인을 구축했다. 핵심 흐름은 세 단계로, PR이 오픈되면 Actions Workflow가 diff를 추출하고, 추출된 diff를 Claude에 전달해 코드 품질·보안·로직 오류를 검토시킨 뒤, 리뷰 코멘트를 PR에 자동 작성한다. 팀원이 직접 확인하지 않아도 외부 코드 변경에 대한 기본적인 스크리닝이 가능해졌다. 단, AI 리뷰는 응용 도메인 지식을 가진 인사가 확인하는 최종 판단을 해야 한다는 주의사항도 동반된다.

출처

최종 업데이트: 2026-07-19 | 출처 12개