H
하베스트
AI로 요약된 콘텐츠

마틴 파울러가 알려주는 ChatGPT와 페어 프로그래밍 하는 법

안녕하세요! 😊 오늘은 소프트웨어 아키텍처의 대가 마틴 파울러와 ThoughtWorks China의 테크 리드 Xu Hao가 실제로 ChatGPT와 페어 프로그래밍을 어떻게 하는지, 그 과정을 시간순으로 따라가며 최대한 자세하게 정리해드릴게요. 실제 대화에서 오간 인상 깊은 대사들도 함께 인용해, 마치 현장에 있는 것처럼 생생하게 느끼실 수 있도록 구성했습니다.

1단계: 문제와 맥락(General Knowledge) ChatGPT에게 알려주기

📝 시작은 '문제 설명'과 '기본 가이드라인'부터!

페어 프로그래밍을 시작할 때, Xu Hao는 ChatGPT에게 자신이 만들고 있는 온라인 화이트보드 시스템의 전체적인 구조와 사용 기술 스택, 그리고 테스트 전략까지 아주 구체적으로 설명하는 프롬프트를 작성했어요.

"현재 제가 만들고 있는 온라인 화이트보드 시스템에 대해 소개하겠습니다. 저는 테크스택으로 TypeScript, React, Redux, KonvaJS, React-Konva를 사용하고 있습니다. ... 모든 코드는 위에 이야기한 테크 스택 만을 사용해야 합니다. 모든 요구사항은 MVVM 아키텍처 패턴을 따라서 리액트 컴포넌트를 이용하여 구현해야 합니다."

주요 키워드

  • TypeScript, React, Redux, KonvaJS, React-Konva
  • MVVM 아키텍처
  • Vitest, React Testing Library, Cypress
  • 공유 뷰 모델(Shared View Model) vs. 로컬 뷰 모델(Local View Model)
  • 테스트 패턴: describe 사용, 데이터 기반 테스트, 뷰 모델 인터페이스로 모킹

🧑‍💻 요구사항 예시

  • Awareness Layer:
    • 다른 사용자의 커서, 이름, 온라인 상태를 화이트보드에 표시
    • AC1: 내 정보는 표시하지 않는다
    • AC2: 다른 사용자의 커서 위치가 바뀌면 애니메이션으로 보여준다

"위에서 언급한 가이드에 따라 전반적인 솔루션을 제공해주세요. ... 구현 방법에 대해 설명하고, 위에서 언급한 가이드에 따라 구현 방법을 할 일 목록 형태로 나누어주세요."

중요 포인트

  • 실제 프로덕션 코드나 비즈니스 정책은 ChatGPT에 입력하지 않는다!
  • 프롬프트는 팀 내에서 재사용 가능하도록 컨텍스트를 잘 정리해두면 좋다

2단계: 꼬리 질문하기 (Chain of Thoughts)

🤔 ChatGPT에게 '왜?'를 묻고, 할 일 목록을 구체화하기

Xu Hao는 ChatGPT가 제시한 솔루션에 대해 꼬리 질문을 던지며, 답변을 점점 더 구체화해 나갔어요. 이 과정에서 할 일 목록(Task List)이 점점 명확해집니다.

"GPT… 너는 다 계획이 있었구나…"

ChatGPT의 첫 번째 할 일 목록 예시

  1. AwarenessInfo 컴포넌트 만들기 (커서/이름 렌더링)
  2. AwarenessInfo를 담을 Konva 레이어 만들기
  3. 메인 화이트보드에 레이어 추가
  4. remote user 정보를 위한 Redux Slice 생성
  5. Redux Slice를 감싸는 ViewModel 인터페이스 만들기
  6. AwarenessInfo에서 ViewModel로부터 정보 받아와 표시
  7. ViewModel 인터페이스에 업데이트 메소드 구현
  8. remote user 커서 이동 시 업데이트 메소드 호출
  9. AwarenessInfo에서 커서 위치 애니메이션 처리
  10. AwarenessInfo 컴포넌트 테스트 (데이터 기반)
  11. ViewModel 인터페이스 테스트
  12. Cypress로 통합 테스트

"위 방식을 따라서 새로운 기능을 온라인 화이트보드 시스템에 구현할 수 있습니다."

🧩 할 일 목록을 더 구조화하기

Xu Hao는 ChatGPT에게 "할 일 목록을 모델, 뷰 모델, 뷰로 묶어서 다시 써줘"라고 요청합니다.

"할 일 목록을 새로 짜줘. 할 일들은 모델, 뷰 모델, 그리고 뷰에 따라 태스크를 묶어서 알려주라."

이렇게 꼬리 질문을 통해, 처음에는 빠졌던 구조적 분류까지 자연스럽게 추가할 수 있었어요.

3단계: 컴포넌트, 메소드, props 이름까지 구체적으로 요청하기

🏷️ 이름이 곧 설계다!

할 일 목록이 마음에 들면, 이제 각 단계별로 구체적인 컴포넌트/메소드/props 이름을 요청합니다.

"좋았어! 할 일 목록을 다시 작성해줘. 이번에는 컴포넌트와 메소드 그리고 props 이름을 구체적으로 작성해줘."

ChatGPT의 답변 예시

  • AwarenessInfo:
    • props: user name, cursor position, online status
  • AwarenessLayer:
    • AwarenessInfo 컴포넌트들을 담는 Konva 레이어
  • awareness:
    • remote user 정보를 저장하는 Redux Slice
  • AwarenessViewModel:
    • 메소드: updateUserAwarenessInfo
  • MainWhiteboard:
    • AwarenessLayer를 포함

"해당 컴포넌트는 커서 정보와 커서 이름, 그리고 현재 접속 중인지에 대한 정보도 렌더링합니다."

4단계: 이제 코드를 작성해달라고 요청하기

💻 테스트 코드부터, 그리고 실제 구현까지!

이제 ChatGPT에게 테스트 코드와 구현 코드를 차례로 요청합니다.
Xu Hao는 항상 테스트 코드부터 요청하는 TDD 스타일을 선호했어요.

"좋았어! 이제 AwarenessSlice와 AwarenessViewModel을 구현한 기능과 테스트 코드를 작성해줘. 먼저 테스트 코드부터 작성해줘."

ChatGPT의 테스트 코드 예시

describe('awareness slice', () => {
  it('should set the cursor location', () => {
    // ...
  });
  // ...
});

AwarenessViewModel 예시

class AwarenessViewModel {
  setCursorLocation(cursorLocation: { x: number; y: number }) { ... }
  setName(name: string) { ... }
  setOnline(isOnline: boolean) { ... }
}

"참고: 이 구현에서는 AwarenessViewModel을 사용하여 Redux Store 값을 새롭게 설정하는 데 사용된다고 가정했습니다."

🛠️ ChatGPT 코드의 한계와 리팩토링

ChatGPT가 처음 내놓은 코드는 redux-mock-store에 의존하고 있었지만, 실제 프로젝트에는 없던 라이브러리였어요.
그래서 Xu Hao는 "redux-mock-store를 쓰지 않고 테스트를 다시 작성해줘"라고 요청합니다.

"이제는 redux-mock-store를 사용하지 않으므로, 뷰 모델 생성자에 모킹 디스패치 함수를 전달해야 합니다."

이렇게 반복적으로 피드백을 주며, 실제 프로젝트 환경에 맞는 코드로 점점 다듬어 나갑니다.

5단계: 팀 컨벤션에 맞게 추가 지시 내리기

🧑‍🔧 팀의 테스트 컨벤션에 맞추기

예를 들어,
"테스트할 때 store를 초기화하기 위하여 configureTestingStore('awareness', initialState) 를 사용해주세요."
와 같이 팀 내 규칙에 맞는 코드를 요청할 수 있습니다.

"여기에 컴포넌트 따위를 import 하는 상대 경로만 조금 수정하고, reducer 내용만 조금 더 수정을 가해주면 코드는 정상적으로 동작하더라구요."

6단계: 토큰 제한(Token Limit)과 컨텍스트 관리

⏳ ChatGPT의 '기억력' 한계

ChatGPT와 대화를 오래 하다 보면 토큰 제한 때문에 앞서 나눈 대화의 맥락을 잊어버릴 수 있습니다.

"대화를 지속할 수록 ChatGPT가 앞서서 얘기한 과거 내용부터 잊어버리기 시작한다는 것이 문제입니다. 즉, 맥락을 잊어먹는 것이지요."

문제점

  • 답변이 중간에 끊기거나, 아예 에러가 날 수 있음
  • 대화가 길어질수록 앞서 나눈 내용을 잊어버림

해결법

  • 할 일 목록에 번호를 매겨두고, 필요한 부분만 다시 요청
  • 새로운 세션에서 처음 전략과 할 일 목록만 넣고, 원하는 할 일 번호의 코드를 요청

"꼬리물기식 대화전략이 코드 작성에 매우 유용하다는 사실을 알게 되었습니다."

7단계: 마틴 파울러의 조언과 결론

🤝 ChatGPT는 '똑똑한 주니어 개발자'처럼 활용하자!

마틴 파울러는 LLM(대형 언어 모델)을 활용한 코딩 경험을 이렇게 정리합니다.

"LLM을 사용하여 코딩하는 경험은 LLM이 마치 주니어 개발자인 것처럼 대화를 나누면서 개발을 진행할 수 있도록 해줍니다. 기본적인 아키텍처 가이드라인을 제시하고, GPT라는 주니어 개발자에게 자신이 작성한 코드에 대해 '왜' 라는 질문을 던지게 하고, GPT가 작성한 코드에 대해 피드백하면서 구현해나갈 수 있는 것입니다."

핵심 요약

  • 문제와 맥락을 충분히 설명하라
  • 구체적인 가이드라인과 요구사항을 명확히 하라
  • 꼬리 질문(Chain of Thoughts)으로 대화를 이어가라
  • 할 일 목록을 구조화하고, 번호를 매겨 관리하라
  • 테스트 코드부터 요청하고, 반복적으로 피드백하라
  • 토큰 제한에 유의하며, 컨텍스트를 관리하라
  • ChatGPT를 '주니어 개발자'로 생각하고, 적극적으로 대화하라

💡 마무리하며

ChatGPT와 페어 프로그래밍을 할 때는,
"내가 시니어 개발자, ChatGPT는 똑똑한 주니어 개발자"라는 마음가짐으로
문제의 맥락, 요구사항, 아키텍처, 테스트 전략까지 꼼꼼히 설명해주고
계속해서 "왜?", "이 부분을 더 구체적으로", "우리 팀 컨벤션에 맞게"
라고 피드백을 주면,
정말로 생산성 높은 페어 프로그래밍이 가능하다는 점!
꼭 기억해두세요. 🚀

"적절한 프롬프트를 작성하는 것이 필요하다고 생각합니다."
"꼬리물기식 대화법(Chain of Thoughts)를 잘 이용하면 코딩할 때 매우 유용할 것이라고 생각합니다."

© Martin Fowler
(번역 및 요약: Sigrid Jin)
원문 링크: An Example of LLM Prompting for programming
번역 및 요약글은 원문 링크와 함께 자유롭게 공유하실 수 있습니다.

요약 완료: 2025. 5. 2. 오전 3:31:16
출처:원본 보기

이런 요약이 필요하신가요?

하베스트가 원클릭으로 요약해드립니다

⚡
5초 요약
AI 자동 분석
📱
모든 기기
웹, iOS, Chrome
🔍
스마트 검색
언제든 재발견
요약 시작하기
나도 요약하기