8화: AI 프로토타입을 엔지니어에게 전달하는 방법

2달 안에 AI 프로토타이핑 마스터하기

Github는 코드 작업을 하는 팀에서 기본으로 사용하는 협업 도구입니다. Google Drive랑 비슷하지만, 코드 작업에 최적화된 클라우드 저장소라고 생각하면 됩니다.

AI 프로토타이핑을 할 때, 디자인 결과물이 더 이상 Figma에만 있는 것이 아니라 코드 형태로 존재하게 됩니다. 그리고 Code Connect까지 연결되어 있다면, 디자인 시스템 컴포넌트도 실제 회사 코드와 동일한 구조를 갖게 됩니다. 여기서부터 팀 내에서 말이 나오기 시작합니다.

이 코드를 어떻게 담당 엔지니어에게 전달할 것인가

보통 문서를 만들면 Google Drive에 올려서 공유하듯이, AI 프로토타입도 Github에 올려서 공유해야 하고, 미국 테크 업계에서는 이 과정을 Engineering handoff라고 부릅니다. 정리하면 단순합니다.

로컬에서 만든 AI 프로토타입을

Github에 올리고

엔지니어가 접근할 수 있게 만든다

이렇게 하면 엔지니어는 AI 프로토타입 코드를 수정하고 실제 프로덕션 코드로 개발을 마칠 수 있습니다. Github를 사용하는 이유는 코드 변경 이력 관리와 코드 협업을 쉽게 할 수 있도록 설계되어있기 때문에 미국 테크 업계에서 활발하게 사용합니다.

AI 프로토타이핑을 제대로 활용하면, 기존에는 1-2달 이상 걸리던 과정을 1-2주 안에 완료할 수 있습니다. 실제로 AI 프로토타이핑을 도입한 후, 전에는 1-2달 이상 걸리던 프로젝트 디자인 및 개발을 1-2주 안에 완료하고 있습니다.

---

회사에서는 공휴일이 없는 달의 금요일이나 월요일을 지정해서 Thank you Day라는 회사 자체 공휴일을 회사 복지로 제공합니다. 이 때 직원들은 앞뒤로 휴가를 붙여서 여행을 가거나 집에서 쉬면서 재충전의 시간을 갖습니다. 저는 가장 최근 Thank you Day에 뉴욕에서 비행기로 3시간 정도 걸리는 플로리다로 여행을 다녀왔는데, 에머랄드 빛 바다도 보고 도화지처럼 하얀 모래를 걸으면서 힐링했습니다.

AI 툴이랑 기능들이 쏟아지면서 배워야할 것이 늘어서 일이 오히려 는 것 같은 기분이 드는 요즘인데, 이 때 너무 무리하는 것보다는 중간 중간 충분히 휴식시간을 가지고 휴가도 내며 일해야 롱런할 수 있을 것 같습니다. 그런 의미에서 Thank you Day 복지 최고.

플로리다 휴양지에서 촬영한 영상 캡쳐본. 낙원같이 나왔다.

포도라는 스타트업에서 디자인 매니저가 말합니다.

이제 팀이 어느정도 AI 프로토타이핑을 할 줄 아니까 엔지니어들한테 이 AI 프로토타입들을 어떻게 가장 효과적으로 전달하면 좋을지 의견 제시해봐.

다음은 Engineering Handoff를 효과적으로 하는 방법을 보여주는 워크플로우입니다.

AI 프로토타이핑을 위한 Engineering Handoff 워크플로우

Step 1. 프로젝트 작동 상태 먼저 확인하기

일잘러처럼 보이려면 작동이 되는 코드를 전달하는 것이 중요합니다. 작동이 안 되는 코드를 넘겨주면 그때부터 신뢰는 수직하강합니다.

Cursor 또는 Claude에서 프로젝트 폴더를 열고 local server를 실행해서 프로토타입이 정상적으로 돌아가는지 확인합니다.

Step 2. AI 툴과 Github 연결하기

Cursor에서 프롬프트를 통해서 Github 연결 요청

Cursor 및 Github 통해서 Github 로그인 및 권한 승인

Step 3. 유저 플로우 녹화하기

Zoom을 활용해서 주요 user flow를 짧게 녹화합니다.

어떤 기능인지

어떻게 동작하는지

어떤 부분을 주의 깊게 보면 되는지

이 세 가지만 영상에서 짧게 보여주면 충분합니다. 영상을 길게 촬영하는 것보다는 더 궁금한 점은 질문하라고 하는 것이 일잘러로 보이는 방법입니다.

Step 4. Github에 업로드하기

Cursor에서 다음을 요청합니다.

Github repository 생성

프로젝트 코드 업로드 (push)

이 과정을 통해 코드가 Github에 올라갑니다.

Step 5. 엔지니어에게 전달하기

Github repo 링크 공유

엔지니어를 collaborator로 추가

Zoom 녹화 영상 같이 전달

이 세 가지를 같이 보내면 의사소통 오류를 최소화되고, Engineering Handoff가 훨씬 효과적으로 됩니다.

Github에서 Repo를 생성하는 화면. Github보다는 AI 툴을 통해 Github Repo를 생성하는 것이 더 깔끔합니다.

뉴욕 테크 실무에서 실제로 적용하며 배운 팁입니다.

1. Repo 이름은 기능 기준으로 짓는 것이 좋습니다

이름만 봐도 어떤 기능인지 바로 알 수 있어야 하고, Github에서 수용 가능한 포맷이 따로 있습니다.

공백 없이

소문자 + 하이픈의 조합

예:

ai-editing

document-viewer

2. 영상으로 의도를 같이 전달하세요

코드만 전달하면 생각보다 의사소통 오류가 많이 생깁니다.

먼저 user flow를 짧게 녹화하고

어떤 부분을 봐야 하는지 같이 전달하는 것을 추천

이렇게 하면 피드백 속도가 훨씬 빨라집니다.

3. Main 개념을 익힌 다음에 Branch 개념을 실험해보세요

위의 단계를 따랐다면, AI 프로토타입은 Main에 살게 됩니다. Figma로 따지자면, Final Design(aka 최최최종 디자인)이라고 이름을 지은 Figma File내의 Figma Page가 Main입니다. Branch는 main 코드에 영향을 주지 않고 실험할 수 있는 공간입니다. AI 프로토타이핑 고수가 되면 다음과 같이 작업하는 것을 추천합니다.

기능 개발은 branch에서 진행

괜찮으면 main으로 반영

Main 및 Branch 개념은 Cursor나 Claude에게 알려달라고 하면 됩니다. 핵심 개념만 이해하면, 자잘한 개념들은 AI에게 물어보는 것이 효율적입니다. 그러나 핵심 개념에 대한 이해 없이는 AI의 효과적인 도움을 받기 어렵습니다.

AI 툴에게 현재 어떤 branch에서 작업 중인지 왼쪽 하단에 칩을 추가해서 항상 알 수 있게 하거나, 작업이 끝나면 main으로 올리도록 요청할 수도 있습니다.

---

어느덧 2달 동안 AI 프로토타이핑을 마스터할 수 있는 여정을 끝냈네요. 도움이 되었으면 좋겠습니다. 다음 글에서는 "에필로그: AI로 UX를 한다는 것의 의미"로 돌아오겠습니다.

---

MIT 석사 졸업 후 글로벌 테크 회사 뉴욕 지사에서 AI 기능을 디자인하는 시니어 UX 디자이너입니다. 이 브런치북에서 실무에서 AI 프로토타이핑을 적용하며 배운 내용을 나눕니다.