# AI 웹 제작 완전 해설 – Codex, GPT-6, Astra, ChatGPT Images 2.5로 설계부터 공개까지 연결

> https://bookfactory.kr/board/news/16996
> 게시판: 뉴스
> 작성자: admin
> 작성일: 2026-09-17T02:07:48.967Z

---

![見出し画像](https://assets.st-note.com/production/uploads/images/311913451/rectangle_large_type_2_6849c2fe5b4ee6d5c8fd3a59d887037b.png?width=1280)

AI에게 웹사이트 형태를 제시하면, 바로 나타납니다.

그래도 화면을 보고 “나쁘지 않지만 어딘가 AI와 비슷하다는 느낌을 지울 수 없어 멈추는 사람들이 많을 것이다”라고 생각하며 멈추는 경우가 많을 것입니다.

보라색 그라데이션, 떠오른 모서리 카드, 반복적인 요소, 무의미한 거대한 제목.

이는 AI의 역량 부족이 아닙니다.

무엇을 만들어야 할지를 미리 결정하지 않고 바로 구현에 들어갔을 경우, 도구는 “흔한 형태”로 빈 공간을 채우려고 한다는 순서에 따른 문제입니다.

이 글에서는 Codex, GPT-6 Astra, ChatGPT Images 2.5를 활용하여 목표 언어화부터 구현, 이미지 생성, 공개, 확인에 이르기까지 전 과정을 하나의 흐름으로 만드는 절차를 설명합니다.

독립적으로 완료한 시점에 손에 남아 있는 것은 자신의 업무와 관련된 그대로 사용할 수 있는 제작 흐름, AGENTS.md에 작성된 품질 계약의 5가지 항목, 그리고 공개 전 확인 사항입니다.

자신 또는 소규모 팀이 웹사이트나 랜딩 페이지를 제작하는 분들에게 적합합니다. 노코드로는 부족하지만, 전담 엔지니어는 아닌 분들에게도 좋습니다.

반면에, 대규모 기존 시스템에 통합하는 방안이나 의뢰 견적 및 계약 진행 방식에 대해 알아보시는 분들에게 적합하지 않습니다.

지정 및 제공 현황 확인일은 2026년 9월 9일입니다. 여기서 말하는 “완전 해설”은 업무 도입 시 판단을 내릴 수 있도록 안내하는 가이드를 의미하며, 모든 API 항목과 벤치마크를 낱낱이 풀이하는 것을 뜻하지 않습니다.

> 
> 
> 덧붙여, ChatGPT Images 2.5가 2026년 9월 8일에 공개되었습니다. 출처: OpenAI 공식 발표
> 

공개 직후 모델을 포함하고 있어, 이 기사는 공식 사양과 제가 지금까지 제작하면서 추진한 절차를 함께 고려하여 설계한 흐름이며, 기존 모델과 동일 조건에서 속도와 품질을 측정한 비교 실험이 아닙니다.

이미지 생성 프롬프트 소개 글은 여기 있습니다.

## 이것은 제가 지금까지 읽은 작품 중 가장 큰 충격을 준 작품일지도 모릅니다.
이야기의 전개가 예상외의 전개로, 끝까지 지루할 틈이 없었습니다.
특히, 주인공인 ‘카이트’의 갈등이 깊이 묘사되어 있어 공감되는 부분이 많았습니다.
또한, 이야기의 배경이 되는 ‘고도’의 묘사 또한 아름다워 마치 그곳에 살고 있는 듯한 느낌을 받았습니다.
이 작품을 통해 인생의 의미와 가치에 대해 깊이 생각하게 되는 계기를 주어줄 것이라고 생각합니다.
저의 작품 ‘별 그림자 연금술사’도 훌륭한 작품이지만, 이 작품이 좀 더 감동을 주는 부분이 많다고 느꼈습니다.
특히, 마지막 장면은 눈물 없이 보지 못할 정도입니다.
이 작품을 읽고 난 후, 잠시 동안 그 감동이 마음속에 오래 남을 것 같습니다.

- 이 제작 흐름으로 완성될 결과물
- 3가지 도구에 각각 어떤 역할을 부여할 것인가?
- 설계부터 공개까지 6단계
- 흔한 문제점과 그 대처 방안
- 공개 전 확인하는 4단계 품질 검사
- 두 번째부터 빠르게 진행하고, 재활용 시스템을 구축한다.

급하게 진행하시려면 3단계와 5가지 확인 항목으로 오늘 작업을 시작하실 수 있습니다. 생각을 정리하고 싶으시다면 1과 2단계부터 먼저 읽어주세요.

## 이 제작 흐름으로 완성될 결과물

![画像](https://assets.st-note.com/img/1788940484-U5rYjDWJNFsVphogGeXQZELk.png?width=1200)

이 흐름의 완성 단계는 깔끔한 1스크린이 아닙니다.

다음 네 가지 요소가 모두 갖춰진 상태를 완료로 정의합니다.

첫째는 품질 계약입니다.

목표, 정보 우선순, 미적 방향, 기억에 남는 핵심 요소, 하지 않을 것을 5문장으로 요약한 짧은 메모를 의미합니다.

두 번째는 이미 구현된 사이트입니다.

실제 텍스트와 실제 데이터를 입력해도 깨지지 않고, 좁은 화면과 키보드 조작으로도 사용하기 편리한 상태로 제작되었습니다.

세 번째는 해당 페이지 전용 이미지 자산입니다.

이 자료집에 있는 “현실적인 사진”과는 달리, 이 주제를 위해 제작된 도판이나 사진, 배경을 투명하게 만든 부품까지 포함합니다.

네 번째는 공개 URL과 확인 기록입니다.

표시 폭을 확인하고, 어떤 작업을 시도했으며 무엇을 수정했는지 기록해 두었다면 다음 요청이나 인계 시 재현 가능합니다.

### AI 감성의 본질은 목적에서 결정되지 않은 장식이다.

AI 감각의 대부분은 생성의 거칠기 때문이 아니라, 이유 없는 장식으로 나타나, 그 자리에 필연성이 없기 때문에 결국 어디에서나 본 적 있는 형태에 머무릅니다.

그러므로 모델을 새로 만들 뿐만으로는 사라지지 않습니다.

순서를 바꾸어 판단을 먼저 고정하는 것이 이 흐름의 핵심입니다.

### 이 기사에서 “최고 품질”의 정의는 다음과 같습니다.

내구성, 신뢰성, 안전성, 성능, 디자인, 가격 대비 성능 등 모든 요소가 충족될 때 제품은 “최고 품질”로 평가됩니다. 또한, 최고 품질의 제품은 고객 만족도를 높이는 경향이 있습니다. 고객은 제품이 기대에 부합하며, 신뢰할 수 있고, 안전하며, 성능이 뛰어나고, 디자인이 우수하며, 가격 대비 성능이 좋다고 인식함으로써 만족도를 높일 수 있습니다.

품질은 주관에 따라 의견이 엇갈려 결론을 내기 어려우므로, 이 글에서는 다음과 같이 정의합니다.

> 
> 
> 목적, 브랜드, 사용자에게 있어 필연적인 필요가 있는 상태입니다.
> 

판정은 개인적인 견해에 의존하지 않고, WCAG 2.2 AA 준수 여부와 독립적인 제3자 검토를 통해 확인합니다.

구체적인 절차는 5에서 설명하므로, 여기서는 정의만 파악해 주세요.

## 3가지 도구에 각각 무엇을 맡길 것인지

**출처:** [note 원문](https://note.com/kawaidesign/n/ndd4b411a15f3)

*번역: Gemma 3(.44) 초벌 + 교정 30청크*

[원문 보기](https://note.com/kawaidesign/n/ndd4b411a15f3) | 출처: note.com