11장. 검사와 다듬기
이번 장에서 할 일
5~10장에서는 기능을 하나 만들 때마다 검사했어요. 이 장에서는 서비스 전체를 한 번 더 검사하고, 디자인 리뷰로 큰 문제부터 다듬어요. 마지막으로 내가 직접 둘러보고 마음에 안 드는 곳을 말해요.
1. 서비스 전체 검사하기
10장의 확인을 마친 에이전트에 보내요. 프로젝트 폴더에서 새로 연 에이전트여도 돼요.
프롬프트에이전트 대화창에 붙여 넣기
지금까지 만든 거 검증해줘. 모든 페이지를 데스크톱과 휴대폰 크기로 열어 보고, 링크와 버튼도 모두 눌러 봐줘.
에이전트는 이런 검사를 하고 결과를 보고해요.
| 검사 | 하는 일 |
|---|---|
| 코드 검사 | 타입 검사, 코드 규칙 검사, 빌드가 통과하는지 봐요 |
| 자동 테스트 | 5~10장에서 만든 테스트를 모두 돌려요. 두 계정이 서로의 프로필, 찜, 평가, 시청 기록을 보거나 바꿀 수 없는지도 다시 봐요 |
| 화면 | 개발 서버를 켜고 페이지마다 데스크톱과 휴대폰 화면을 찍어요. 브라우저와 서버에 오류가 하나도 없어야 해요 |
| 링크와 버튼 | 없는 페이지(404)로 가는 링크나 눌러도 반응이 없는 버튼이 없는지 눌러 봐요 |
이렇게 되면 성공
타입 검사, 코드 검사, 빌드, 자동 테스트가 모두 통과로 나와요.
페이지마다 오류, 없는 페이지(404), 반응 없는 버튼이 하나도 없다고 나와요.
하지 못한 검사가 있으면 그 이유가 함께 적혀 있어요.
문제가 나왔으면 이렇게 보내세요. 에이전트가 라운드(기능 하나를 만들거나 요청한 것을 고치고 확인까지 마치는 작업 묶음)를 열어 고치고, 끝에 확인을 요청해요.
프롬프트에이전트 대화창에 붙여 넣기
검사에서 찾은 문제를 고쳐줘.
문제가 없으면 2단계로 가요. 고쳤다면 에이전트가 확인을 요청할 때 확인했어라고 보내세요. 확인하면 에이전트가 라운드를 닫고 이번 작업을 기록(커밋)해요.
막히면
2. 디자인 리뷰로 다듬기
검사를 마친 에이전트에 보내요.
프롬프트에이전트 대화창에 붙여 넣기
디자인 리뷰해서 큰 문제부터 고쳐줘.
에이전트는 이런 순서로 일해요.
접근성(키보드나 화면 읽기 프로그램으로도 쓸 수 있는지), 성능, 반응형을 검사해 점수를 매겨요. 코드가 웹 화면 규칙에 맞는지도 봐요.
찾은 문제를 한꺼번에 고치고 다시 검사해요.
개발 서버를 켜 두고 확인을 요청해요.
도움말
고치기 전에 리뷰 결과만 보고 싶으면 디자인 리뷰만 해줘. 고치지는 마라고 보내세요. 점수와 문제 목록만 보고하고 코드는 그대로 둬요.
이렇게 되면 성공
보고에 디자인 리뷰 점수와 큰 문제(P0, P1) 목록이 있어요.
큰 문제는 모두 고쳐졌거나 남겨 둔 이유가 적혀 있어요.
접근성 점수와 검사 점수가 기준을 넘었다고 알려 줘요.
괜찮으면 확인했어라고 보내세요. 확인하면 에이전트가 라운드를 닫고 이번 작업을 기록(커밋)해요.
막히면
점수가 기준에 못 미친다며 어떻게 할지 물어요:
한 번 더 다듬어줘라고 보내세요. 지금 모습이 괜찮으면이대로 둬라고 답해도 돼요.바뀐 곳이 마음에 안 들어요:
헤더 메뉴는 원래 모양으로 되돌려줘처럼 되돌릴 곳을 말하세요.오래 걸려요: 페이지가 많아서 리뷰와 검사에 시간이 걸려요. 멈췄다면
이어서 해줘라고 보내세요.
3. 직접 둘러보고 고치기
마지막으로 내가 직접 써 봐요.
프롬프트에이전트 대화창에 붙여 넣기
개발 서버 켜고 브라우저로 열 주소 알려줘.
알려 준 주소(보통 http://localhost:3001)를 열고 모든 페이지를 둘러보세요. 창 너비를 줄여 휴대폰 크기에서도 보고, 마우스 없이 Tab, Enter, Esc로도 다녀 보세요.
이렇게 되면 성공
휴대폰 크기에서 글자가 잘리거나 겹치는 곳이 없어요.
Tab으로 카드에 가서Enter를 누르면 상세 창이 열리고,Esc로 닫으면 그 카드로 돌아와요.없는 작품 주소(예:
http://localhost:3001/title/없는-작품)를 열면 안내와 홈으로 가는 링크가 있는 404 쪽이 나와요.
마음에 안 드는 곳은 "어디가 어떻게"를 적어 보내세요. 크기나 색 값은 몰라도 돼요. "한 단계", "조금 더"처럼 말하면 에이전트가 DESIGN.md에 정해 둔 규칙 안에서 골라요.
프롬프트에이전트 대화창에 붙여 넣기
휴대폰에서 줄 제목이 너무 커. 한 단계 줄여줘.
프롬프트에이전트 대화창에 붙여 넣기
상세 창의 회차 줄거리가 흐려서 잘 안 보여. 조금 더 진하게 해줘.
여러 곳을 한 번에 적어 보내면 라운드 하나로 고쳐요. 고친 화면을 다시 보고 괜찮으면 확인했어라고 보내세요.
막히면
고쳤다는데 화면이 그대로예요: 브라우저를 새로고침하세요. 그래도 같으면
고쳤다는 곳이 화면에 그대로야. 개발 서버를 다시 켜고 확인해줘라고 보내세요.말한 곳 말고 다른 곳도 바뀌었어요:
줄 제목 말고 다른 곳은 원래대로 되돌려줘처럼 되돌릴 곳을 말하세요.휴대폰 크기로 보는 법을 모르겠어요: 브라우저 창의 오른쪽 끝을 끌어 좁히면 휴대폰 크기 화면이 돼요.
앞 장 작업을 이어서 하려 하거나 중간에 멈췄어요: 5장의 막히면과 같아요.
도움말
배포하지 않을 거면 이 장이 마지막이에요. 인터넷에 올려 다른 사람에게 보여 주려면 12장으로 가세요.
에이전트가 물어보면
고치는 요청은 5장처럼 라운드(기능 하나를 만들거나 요청한 것을 고치고 확인까지 마치는 작업 묶음) 하나로 진행되고, 끝에 직접 보고 확인해 달라고 해요. 4장과 5장 표의 질문(디자인 점수, 스킬 업데이트 등)도 나올 수 있어요.
선택지 창에서 답하는 법은 질문에 답하는 법에 있어요.
| 질문 | 답 |
|---|---|
| 검사에서 찾은 문제를 고칠지 | 고쳐줘 |
| 점수가 기준에 못 미칠 때 더 다듬을지 | 한 번 더 다듬어줘 또는 이대로 둬 |
| 직접 보고 확인해 달라 | 둘러본 뒤 확인했어 또는 고칠 곳 |
이 쪽을 다 했나요?