사이트 제작 워크플로우

개발 중

요구사항부터 배포까지 홈페이지 만드는 일을 단계와 검사로 묶은 AI 작업 흐름

·

마지막 작업 48일 전

누구의 어떤 문제를 푸나

참조할 사이트와 요구사항에서 출발해, 인터넷에 올린 홈페이지까지 가는 작업 흐름입니다. 요구사항 정리부터 비슷한 사이트 조사, 디자인, 구현, 배포(인터넷에 올리기)까지를 19단계로 나눴습니다. 단계 사이에는 관문이 있습니다. 관문은 기계 검사나 사람 승인입니다. 통과하지 못하면 다음 단계로 가지 않습니다. 공개 서비스가 아니라 내부에서 쓰는 중인 도구입니다.

지금 어디까지 왔나

  • 2월에 만들어 보관해 둔 첫 버전을 8월 13일에 다시 꺼냈습니다.

  • 9월 19일 작업일지: 두 AI가 각자 만들고 서로 채점하던 실험 구조(v2)를 멈췄습니다. 서로 채점할 때 13번 모두 자기 결과를 더 높게 줬습니다. 시간과 비용도 너무 많이 들었습니다.

  • 그래서 단계마다 맡을 AI를 미리 정한 가벼운 구조(v1.5)로 돌아갔습니다.

  • 마지막 기록은 9월 21일입니다. 의뢰받은 회사 홈페이지 1건이 디자인 단계에서 배경 색 결정을 기다립니다.

할 수 있는 것

  • 어떤 사이트든 같은 업종 사이트 9곳 이상을 먼저 조사한 뒤 전략을 세웁니다.

  • 글자색 대비, 사이트가 제대로 만들어지는지(빌드), 비밀값 노출 같은 22가지를 기계가 검사합니다. 판정할 수 없으면 "통과"가 아니라 "판정 불가"로 멈춥니다.

  • 요구사항·브랜드 전략·디자인·배포 네 곳에서는 사람이 승인해야 다음으로 갑니다.

  • 단계마다 Claude(14단계)와 Codex(4단계) 중 누가 맡을지 정해 둡니다. Codex를 부를 때 쓴 토큰 양도 기록합니다.

사람과 AI의 역할

구분

맡은 일

나

실험 구조를 직접 써 보고 토큰(AI 사용량)이 너무 많이 든다며 되돌리자고 했습니다. 목표를 "원하는 유형의 사이트를 높은 수준으로 구현하는 것"이라고 다시 못 박았습니다(9월 19일).

AI

Claude가 실제 코드와 실행 기록을 열어 서로 채점의 치우침(13번 중 13번)을 찾았습니다. 개편안을 쓰고 단계별 담당을 고정했습니다. 같은 업종 사이트 11곳을 브라우저로 열어 움직이는 효과와 어두운 화면 지원을 쟀습니다.

사람이 다시 확인한 것

정말 예전 방식으로 되돌렸는지 다시 물어, 아직 안 된 부분을 AI가 인정하게 했습니다. 의뢰 사이트 결과물을 보고, 컨셉도 묻지 않고 진행했다며 처음부터 다시 하게 했습니다. 컨셉 4가지는 직접 골랐습니다(9월 19일). 8월 시험 제작 때는 화면을 보고 참조 사이트와 전혀 다르다고 지적했습니다. 원인은 AI가 "참조 사이트에 접속할 수 없다"고 잘못 보고한 것이었습니다(8월 22일).

아직 확인 못 한 것

가벼운 구조(v1.5)로 사이트 1건을 끝까지 만든 기록이 아직 없습니다. 구현 단계를 누가 맡을지 정하는 측정 실험도 아직 하지 않았습니다.

다음에 할 일

  • 진행 중인 의뢰 사이트의 배경 톤(밝게/어둡게)을 정하고 나머지 화면으로 넘어갑니다.

  • 가벼운 구조(v1.5)로 사이트 1건을 끝까지 완주합니다. 이것이 개편을 받아들이는 조건입니다.

  • 구현 단계 측정 실험을 실행합니다.

만든 도구

Claude CodeCodex CLINext.jsTypeScriptTailwind CSSVercel
공유