웹사이트 화면 만들 때 중요한 검수 작업

ALT

'기회'라는 단어가 담긴 산과 나무의 이미지

📝 한줄 요약

클로드가 페이지 4개를 만들어주었어요. 하지만 그냥 받아들인 게 아니라 직접 여러 번 봤어요.

그러면서 “처리 대기함은 따로 만들어야겠다”, “Edit 버튼이 필요하다”, “원그래프를 쓰는 게 낫겠다” 같은 피드백을 주었어요.

그 과정에서 배웠어요: AI가 만든 것도 좋지만, 사람의 눈으로 검수하면서 피드백을 주는 것이 앱을 훨씬 낫게 만든다는 것.

Before: “클로드가 만든 화면이니 다 맞겠지” 하고 신뢰만 함
After: 5번 검수하면서 앱의 구조를 완전히 개선함

👥 이런 분께 추천

• AI(클로드)에게 화면을 만들도록 요청한 분

• “자동으로 만들어지니까 끝”이라고 생각하는 분

• “검수하는데 뭘 봐야 할지 모르는” 분

• “내 생각이 맞는지 확실하지 않은” 분

🙋 내 스펙 & 환경

진행 방법

1. 첫 번째 검수: “pending / 완료 구분이 필요하다”

클로드가 만든 Records(내역) 화면을 봤어요. 모든 초과근무 데이터가 한 곳에 섞여 있었어요.

하지만 회계 담당자 입장에서는 다릅니다:

• “지금 내가 승인해야 할 것들”을 먼저 봐야 해요

• “이미 처리한 것들”은 따로 봐야 해요

피드백: “처리 대기함을 따로 만들어서, 승인 대기 중인 것들만 먼저 보이게 해줄래?”

→ 클로드가 화면 구조를 바꿔서 만들었어요.

2. 두 번째 검수: “수정할 수 있게 해줄래?”

처리 대기함을 만드니까 또 다른 문제가 생겼어요. 혹시 실수로 “승인 완료”로 표시했다면?

피드백: “Edit 버튼을 만들어서 이미 완료된 것도 다시 수정할 수 있게 해줄래?”

→ Undo/Edit 기능을 추가했어요.

3. 세 번째 검수: “검색과 필터가 있으면 좋겠어”

데이터가 많아지니까 찾기가 어렵더라고요.

피드백: “특정 사람의 것만 보기, 특정 달의 것만 보기” 같은 검색·필터 기능을 추가해줄래?”

→ 검색과 필터 UI가 생겼어요.

4. 네 번째 검수: “Report 화면은 대표자만 열람할 수 있어야 한다”

Summary(집계) 화면을 봤는데, “이건 회계 화면 같은데?”라는 생각이 들었어요.

실제로는:

• 회계: “승인 대기 중인 것”만 봐야 함

• 대표: “회사 전체 현황”을 봐야 함

피드백: “Report 화면을 따로 만들어서, 대표가 회사 전체 초과근무 현황을 볼 수 있게 해줄래? 그리고 ‘대표’ 역할도 새로 만들어야 할 것 같아”

→ Report 화면이 새로 생겼고, 대표 역할이 추가됐어요.

5. 다섯 번째 검수: “원그래프와 색을 다시 생각해보자”

차트를 봤는데 뭔가 이상했어요. 막대 그래프로는 전체 비율을 알기 어려웠어요.

피드백: “부서별/월별 비율을 보기 위해서 원그래프(Pie chart)로 바꿔줄래?”

→ 원그래프로 변경되었고, 색도 3번 조정했어요.

ALT

회의 결과를 보여주는 대시보드 스크린샷

📊 5번 검수의 결과

결과: 기본 화면 4개 → 구조가 완전히 바뀐 앱

🛠 사용한 도구

배운 점

💡 핵심 1: “검수”는 업무 개선의 시작이다

AI가 만든 화면도 다 잘 만들어진 게 아니라, “기획자가 실제로 써봤을 때 뭐가 필요한가”를 찾아내는 과정이 중요해요.

예를 들어:

• 클로드는 “Records 화면을 만들어달라”는 요청만 받음

• 하지만 저는 실제로 “회계가 승인 대기 중인 것들만 봐야 한다”는 걸 알고 있었어요

• 그래서 “처리 대기함을 따로 만들어달라”고 피드백

💡 핵심 2: “자동”과 “최적”은 다르다

AI가 자동으로 만들어주는 건 정말 편해요. 하지만 “당신의 상황에 최적”인 건 다릅니다. 그 차이를 찾아내는 게 검수예요.

자동으로 만든 것: “표로 데이터를 보여줌”
최적으로 개선한 것: “처리 대기함 + Report 화면 + 원그래프”

💡 핵심 3: 피드백할 때는 “왜”를 생각하기

좋은 피드백은 “이렇게 만들어달라”가 아니라 “이게 필요한 이유”를 설명해요.

❌ “처리 대기함을 만들어줄래?”
✓ “회계 담당자는 지금 승인해야 할 것들을 먼저 봐야 하니까, 대기 중인 것들을 따로 묶어줄 수 있을까?”

이렇게 하면 클로드가 “아, 그래서 필요하구나”를 이해하고 더 나은 해결책을 제시해요.

💡 핵심 4: 여러 번 검수가 중요한 이유

한 번의 완벽한 검수보다는 여러 번의 작은 검수가 훨씬 효과적이에요. 왜냐하면:

• 처음엔 전체 구조만 봐요

• 2차에는 각 부분의 기능을 봐요

• 3차 이후엔 세부 사항(색, 배치)을 봐요

각 단계에서 다른 것들이 보여요.

적용할 점

🎯 AI와 협업할 때 검수 프로세스

1. 1차 검수: 구조

   • “화면 구조가 내 업무 흐름과 맞나?”

   • “빠진 게 있나?”

2. 2차 검수: 기능

   • “각 버튼/링크가 실제로 필요한 기능을 하나?”

   • “실수를 복구할 방법이 있나?”

3. 3차 검수: 효율성

   • “데이터를 빨리 찾을 수 있나?”

   • “불편한 동작이 있나?”

4. 4차 검수: 시각화

   • “데이터를 이해하기 쉬운 형태로 보여주나?”

   • “색상/배치가 적절한가?”

5. 5차 이후: 세부

   • “폰트 크기는 적당한가?”

   • “여백은 충분한가?”

📋 검수 체크리스트

각 화면을 검수할 때 이 항목들을 확인해요:

• 내 업무 흐름과 화면 순서가 맞나?

• 꼭 필요한 정보만 보이나?

• 실수했을 때 되돌릴 방법이 있나?

• 찾고 싶은 데이터를 빨리 찾을 수 있나?

• 수치/통계는 차트로 시각화되어 있나?

• 색상이 균형잡혀 있나?

🔜 다음 단계

1. 현재: 5번 검수로 기본 화면 완성 ✓

2. 다음: 모든 필드의 값이 일치하는지 검수 (작업 19 참고)

3. 그다음: 실제 데이터로 성능 테스트

솔직한 소감

처음엔 “클로드가 화면 4개를 만들어주면 끝이겠지”라고 생각했어요. 하지만 검수하면서 깨달았어요. AI가 90%를 만들어주면, 남은 10%는 “현장 업무를 잘 아는 사람이” 할 수 있다는 것.

그 10%가 앱을 정말 다르게 만들어줬어요. 처리 대기함이 없었으면 회계가 계속 불편했을 거고, Report 화면이 없었으면 대표가 현황을 못 봤을 거예요.

이제 알겠어요. “자동으로 만들어지니까 끝”이 아니라 “만들어진 것을 보고 피드백하고 다시 만들고”의 반복이 진짜 개발 프로세스라는 것.