[Track 1] UI가 포함된 PR인데, AI 믿고 그냥 merge할까요?

AI가 코드를 대신 짜주는 시대가 왔지만, 결과물이 코드가 아니라 코드가 렌더링한 시각적 결과물이라면 이야기가 달라집니다. 결국 사람이 렌더링된 화면을 눈으로 확인하면서 디테일을 살려야 하는데, 원래도 중요하지만 지루하고 길었던 이 일이 이제는 프론트엔드 개발자에게 남은 거의 유일한 일이 되어버렸습니다. 그렇다면 이쪽에서 어떤 재미를 찾아야 할까요? backend.ai-webui를 위해 UI 컴포넌트와 문서 등을 만드는 과정의 이 지루함을 재밌고 편하게 만들기 위해 했던 고민과 시도들을 공유합니다.

Transcript

1. UI가 포함된 PR인데, AI 믿고 그냥 merge할까요? AI가 만든 결과를 받아보고, 판단하고, 다시 전달하는 과정의 UX 김수진 래블업 / Frontend Engineer
2. 1 리뷰 한번 부탁드립니다. AI와 함께 만든 PR 리뷰는 어디서부터 시작될까요? 2 문서 PR을 자동으로 만들었습니다 3 도착하는 길, 전달하는 길 4 확인하기 편해졌다면, 이제 믿어도 될까요? 그런데 제가 리뷰하려니… 찾아다니는 대신, 찾아오게 만들었습니다 UI가 포함된 PR인데, AI 믿고 그냥 merge할까요? 처음 질문으로
3. 1. 리뷰 한번 부탁드립니다. AI와 함께 만든 PR 리뷰는 어디서부터 시작될까요?
4. 1 새 리뷰 요청이 도착했습니다 AI와 함께 만든 변경 그래서… 뭘 보면 되죠? 🤔
5. 먼저, 읽고 연결합니다 설명은 길다. 맥락은 흩어져 있다. PR Jira Teams 출처: github.com/lablup/backend.ai webui PR #9341
6. 아무래도, 프론트엔드니까요 👀 제대로 동작하나? 다른 컴포넌트를 고려해서, 어색하지 않게 만들었나? 사용자 플로우를 해치지 않는가? 결국, 직접 눈으로 봐야 안다
7. 이제, 직접 띄웁니다 브랜치 의존성 dev 서버 워크트리·별도 클론이 필요할 수도 백엔드 연결 로그인 …또 기다림 ⏳ 드디어, 화면이 떴습니다 🎉 지금까지 남긴 리뷰 의견 지금까지 한 일 0개 전부 준비 출처: dev server 스킬 실행 · Backend.AI WebUI 데이터 페이지 자체 캡처
8. 오늘 이야기하려는 것 AI가 코드를 얼마나 잘 만드는가 보다 만들어진 결과를 우리가 어떻게 받아보고 · 판단하고 · 다시 전달하는가 그 과정을 편하게 만들기 위해 해본 시도들
9. 만드는 쪽은, 나름 열심히 자동화했습니다 💪 ✅ 백엔드 변경 매일 아침 자동 요약 ✅ E2E 깨지면 자동 분석·수정 auto heal ✅ 머지되면 매뉴얼 자동 갱신 ✅ PR 요약 공유 · 릴리즈 리스크 리포트 여기까지는 꽤 뿌듯한데 받아보는 쪽에 서 보니 결과물도, 정보도 잘 도착함 그걸 확인할 준비 가… 부족했음 🫠 매일 아침 9시, Teams에 실제로 도착하는 리포트 중 하나 출처: 백엔드 변경 데일리 요약 자체 캡처
10. 만드는 쪽의 완료 는 받는 쪽의 시작 작성자 PR 생성 리뷰어 리뷰 요청 완료 🎉 만들수록 신경 쓰이는 것 바로 그 순간부터, 시작 어디서 보지? 무엇이 바뀌었지? 왜 바뀌었지? 😵💫 다음 사람의 일
11. 리뷰어도 이 과정의 사용자였습니다 제품을 만들 때 묻는 것 정보를 쉽게 찾을 수 있는가 입력을 반복하지 않는가 다음 행동이 보이는가 🤦 개발 과정에서 하는 말 직접 서버를 띄워보세요 관련 내용은 Jira에 있습니다 변경된 파일을 열어보시면 됩니다
12. 이 과정도, UX였습니다 정보가 없는 게 아님 매번 내가 찾아 연결해야 할 뿐 개발·리뷰 과정도 UX를 개선할 대상 사용자는 나, 그리고 내 동료
13. 2. 문서 PR을 자동으로 만들었습니다 그런데 제가 리뷰하려니…
14. 문서 자동화 파이프라인 제품 PR 머지 문서 갱신이 필요한지 판단 문서 PR 생성 스크린샷 자동 캡처 제품 PR 작성자에게 리뷰 요청 여기까지는, 전부 자동 🤖 출처: 문서 자동 업데이트 결과 리포트 Teams, 자체 캡처
15. 그런데, 리뷰하려고 보니 하고 싶었던 판단 설명이 자연스러운가? 이미지로 이해되나? 앞뒤와 맞나? 실제로 하는 일 바뀐 문장·이미지가 문서 어디에? 파일 페이지 대조 중 🔍 출처: github.com/lablup/backend.ai webui PR #9581 Files changed
16. 그런데, 리뷰하려고 보니 코드에서 읽는 것 문서에서 이해하는 것
17. 문서 프리뷰 안에서 변경 보기 실제로 렌더링된 문서 위에 바뀐 부분을 표시 텍스트·이미지의 변경 전후를 비교 다음 변경 지점으로 이동, 확인한 항목은 체크 출처: 문서 PR 프리뷰 lablup.github.io/backend.ai webui, PR #9598
18. 리뷰 행동의 변화 이전 이후 파일 읽기 페이지 찾기 위치 찾기 문서의 맥락 안에서 변경을 보며, 바로 판단 판단은 사람이 🙋 준비는 도구가 🤖 이전과 대조
19. 3. 도착하는 길, 전달하는 길 찾아다니는 대신, 찾아오게 만들었습니다
20. 결과에 도착하는 길 리뷰가 PR로 배달됩니다 이 PR 구현해줘 그 뒤는 전부 자동: ① 구현하고, PR을 엽니다 ② dev 서버가 뜨고 PR에 링크 코멘트 ③ walkthrough 코멘트 바뀐 곳을 바로 확인할 수 있도록 떠먹여줌 🥄 리뷰어는 PR에서 링크 클릭, 그게 전부 출처 PR #9663에 자동으로 달린 walkthrough 코멘트 자체 캡처
21. 판단을 전달하는 길 화면 위에서 그대로 출처: walkthrough 안내 모드 PR #9663의 dev 서버 자체 캡처
22. 관련 정보를 찾는 길 링크 단축키 지금 보는 PR의 Jira는? Teams 스레드는? dev 서버는? 단축키 한 번, 관련 링크가 바로 출처: Jira Helper 크롬 확장 자체 캡처
23. 내 차례인 PR이 모이는 길 리뷰 보드 리뷰할 것, 고칠 것 흩어져 있던 PR들 ① 내가 할 일 기준, 4개 레인으로 정리 ② 상태가 바뀌면 새로고침 없이 반영 ③ 카드를 열면 체크·변경 규모·설명까지 한 화면에 📋 다음 리뷰는, 보드가 알려줍니다 출처: My PR Board 자체 캡처
24. 팀의 현황이 보이는 길 같은 보드에서, 한눈에 정보는 GitHub에 다 있음 매번 필터로 찾아야 할 뿐: ① 누가 어떤 PR을 들고 있는지 리뷰어별로 ② 스택으로 이어진 PR은 묶어서, 순서대로 ③ 검색·상태·정렬은 내 기준대로 즉시 🔍 여기서도, 찾아다니는 대신 찾아오게 출처: My PR Board PR #9630 상세 자체 캡처
25. Demo
26. 4. 확인하기 편해졌다면, 이제 믿어도 될까요? UI가 포함된 PR인데, AI 믿고 그냥 merge할까요? 처음 질문으로
27. 테스트가 다시 통과했습니다 같은 ✅, 의미는 제각각 진짜 버그를 고쳤을 수도 의도된 변경에 테스트를 맞췄을 수도 필요 없어진 테스트를 지웠을 수도 ✅ 만으로는, 모른다 판정 근거를 리포트에 출처: github.com/lablup/backend.ai webui PR #9592 e2e auto heal
28. 그래서, 믿어도 되냐고요? 확인하기 편한 것 옳은 것 도구가 해주는 건 증명 이 아니라, 확인 부담 줄이기까지 옳은가 의 판단은 여전히 사람이 🙋 ⚖
29. 우리는 어디에 시간을 써야 할까요? 재미있는 일 UX 고민, 아이디어 번거로운 일 서버 준비 · 링크 찾기 · 위치 찾기 · 재설명 이 도구들도 AI와 함께 방향은 내가, 구현은 Claude가 시간을 쓸 곳이 이동한다 제품의 UX 만드는 과정의 UX 🧭
30. 마치며 좋은 결과를 만드는 일도, 그 결과를 함께 만들기 쉽게 하는 일도 우리의 일입니다. 우리는 제품을 만듭니다. 제품을 만드는 방식도 만듭니다.
31. Q A