AI 코딩 도구에 같은 화면을 다시 만들어달라고 했는데, 두 번째 결과는 첫 번째와 전혀 다르게 나올 때가 있습니다. 색상은 비슷하지만 버튼 위치가 달라지고, 있던 기능이 빠지기도 합니다.
핵심은 AI가 이전 결과를 기억하지 못해서가 아니라, 다시 만들 때 참고할 기준이 충분히 고정돼 있지 않기 때문입니다. 시작 전에 화면의 기준, 파일의 기준, 완료 조건, 변경 범위를 정해두면 결과가 크게 흔들리는 일을 줄일 수 있습니다.
1. 화면 기준을 먼저 고정하세요
“깔끔하게 만들어줘”처럼 느낌만 전달하면 AI는 매번 다른 디자인을 선택합니다. 다시 만들 화면이라면 최소한 배경색, 본문 글자색, 포인트 색, 글꼴 크기, 카드 모서리, 콘텐츠 폭을 먼저 적어두세요.
예를 들어 “배경은 #0B0D12, 본문은 #E9EDF5, 포인트는 파란색, 콘텐츠 폭은 1120px, 버튼 모서리는 10px”처럼 숫자로 적으면 판단 범위가 좁아집니다. 화면 캡처를 함께 주더라도 숫자 기준을 남겨두는 편이 안전합니다.
2. 파일과 이동 경로를 알려주세요
화면이 달라지는 원인은 디자인만이 아닙니다. AI가 다른 파일을 수정했거나, 같은 이름의 컴포넌트를 새로 만들었거나, 실제로 사용되지 않는 경로에 화면을 추가했을 수도 있습니다.
작업을 시작하기 전에 “홈 화면은 이 파일, 글 목록은 이 파일, 상세 화면은 이 경로”처럼 현재 구조를 짧게 적어주세요. 기존 파일을 수정할지 새 파일을 만들지도 분명히 해야 합니다.
3. 완료 조건을 화면이 아니라 행동으로 적으세요
“완성된 화면”은 사람마다 기준이 다릅니다. 대신 사용자가 실제로 할 행동을 적으면 확인하기 쉬워집니다.
1) 메뉴를 누르면 글 목록으로 이동한다.
2) 목록에서 제목을 누르면 상세 글이 열린다.
3) 뒤로 가도 목록의 스크롤 위치가 유지된다.
4) 모바일 폭에서 가로 스크롤이 생기지 않는다.
이렇게 쓰면 AI가 화면을 예쁘게 만드는 데서 끝나지 않고, 기능이 연결됐는지까지 확인하게 만들 수 있습니다.
4. 한 번에 한 영역만 바꾸세요
헤더, 카드, 본문 폭, 모바일 레이아웃을 한 번에 바꾸면 문제가 생겼을 때 원인을 찾기 어렵습니다. 먼저 헤더만 수정하고 확인한 다음, 카드와 본문으로 넘어가세요.
작업 지시는 다음처럼 짧게 나누는 편이 좋습니다.
“현재 구조와 기능은 유지하세요. 이번 단계에서는 글 목록 카드의 간격과 제목 크기만 수정하세요. 헤더, 라우팅, 데이터 연결은 건드리지 마세요. 수정 후 변경한 파일과 확인한 화면을 알려주세요.”
잘 안 되는 지시와 바꿔 쓰는 방법
잘 안 되는 지시: “지난번처럼 고급스럽고 더 예쁘게 다시 만들어줘.”
바꿔 쓰는 지시: “현재 색상과 레이아웃은 유지하세요. 카드 간격을 24px로 맞추고, 제목은 24px, 본문은 16px로 조정하세요. 수정 대상은 ArticleCard 컴포넌트 하나로 제한하세요.”
첫 번째 문장은 취향을 해석해야 하지만, 두 번째 문장은 확인할 수 있는 조건이 있습니다.
작업 전 체크리스트
- 참고할 화면 캡처 또는 주소가 있는가?
- 색상, 글꼴, 간격, 콘텐츠 폭이 숫자로 정리돼 있는가?
- 수정할 파일과 건드리면 안 되는 파일이 구분돼 있는가?
- 사용자가 직접 확인할 행동이 적혀 있는가?
- 이번 단계에서 바꿀 영역이 하나로 제한돼 있는가?
정리
AI 코딩 도구의 결과가 매번 달라질 때 도구를 바꾸기 전에 기준부터 고정해보세요. 화면을 설명하는 말, 파일 구조, 완료 조건, 변경 범위를 정하면 같은 요청을 반복해도 결과를 비교할 수 있습니다.
오늘 바로 해볼 일은 간단합니다. 다음 작업을 시작하기 전에 “유지할 것 3개, 바꿀 것 1개, 확인할 행동 3개”를 먼저 적어보세요.