GPT-6 아스트라, 웹디자인 실력이 이 정도라고? 직접 보면 놀랍니다

AI로 웹사이트를 만드는 것 자체는 이제 별로 신기하지 않습니다.

ChatGPT도 코드를 짜고, Gemini와 Claude도 랜딩페이지 정도는 꽤 잘 만듭니다.

그런데 막상 결과물을 보면 비슷한 경우가 많습니다.

큰 제목 하나.
그라데이션 배경.
둥근 카드 몇 개.
적당히 움직이는 버튼.

딱 보면 어디선가 본 AI 웹사이트 같습니다.

그런데 최근 공개된 GPT-6 Astra는 이 부분에서 꽤 재미있는 모습을 보여주고 있습니다.

OpenAI도 Astra의 주요 능력 가운데 웹사이트 제작과 프런트엔드 QA를 직접 언급하고 있습니다. 웹사이트를 만든 뒤 실제 기능이 제대로 작동하는지 점검하는 작업까지 할 수 있다는 설명입니다. (OpenAI)

단순히 코드를 더 잘 짠다는 이야기가 아닙니다.

웹사이트를 어떻게 보여줘야 하는지까지 다루기 시작했다는 점이 눈에 띕니다.

같은 AI 웹사이트인데 왜 다르게 보일까?

웹사이트 디자인에서 어려운 것은 CSS 코드를 작성하는 것만이 아닙니다.

어디를 비울지,
어디에 시선을 모을지,
어떤 요소를 먼저 보여줄지,
어디에서 움직임을 줄지 결정해야 합니다.

예를 들어 명품 브랜드 사이트라면 화면을 빽빽하게 채우는 것보다 넓은 여백과 느린 호흡이 어울립니다.

반대로 신제품을 강하게 보여주는 랜딩페이지라면 큰 이미지와 과감한 움직임이 필요할 수 있습니다.

GPT-6 Astra를 이용한 웹사이트 제작 사례를 보면 이런 차이를 꽤 적극적으로 반영합니다.

단순히 같은 템플릿에 색만 바꾸는 것이 아니라 사이트의 목적에 따라 레이아웃, 여백, 시각적 위계, 움직임을 다르게 설계하는 방식입니다.

이게 이번 GPT-6 Astra 웹디자인에서 가장 흥미로운 부분입니다.

스크롤만 내려도 웹사이트가 달라집니다

이번 사례에서는 평범한 랜딩페이지보다 훨씬 복잡한 인터랙션도 사용했습니다.

대표적인 것이 다음과 같습니다.

• 레이어드 패럴랙스
• 스크롤 트리거 텍스트 등장
• 스크롤에 따라 물체가 회전하는 효과
• 마우스를 따라 움직이는 캐릭터
• 앞 섹션 위로 겹쳐지는 스태킹 카드

예전에도 구현할 수 있었던 기술입니다.

중요한 건 AI에게 이런 동작을 구체적으로 지시해 실제 페이지에 조합할 수 있다는 것입니다.

영상에서 소개된 음료 브랜드 웹사이트 사례는 꽤 과감합니다.

스크롤하면 캔이 회전하고, 문장이 나뉘어 나타납니다. 마우스를 제품 위에 올리면 내부 구조가 펼쳐지고, 캐릭터의 눈은 커서를 따라 움직입니다.

한 페이지 안에 여러 인터랙션이 들어가는데도 모든 것이 동시에 움직이지 않습니다.

섹션마다 필요한 효과 하나에 집중합니다.

이 차이가 생각보다 큽니다.

애니메이션을 많이 넣는다고 좋은 디자인이 되는 것이 아니기 때문입니다.

GPT-6 아스트라에게 “예쁘게 만들어줘”라고 하면 부족합니다.

여기서 중요한 사용법이 하나 있습니다.

형용사보다 레퍼런스를 주는 겁니다.

예를 들어,

고급스럽게 만들어줘.

라고 하는 것보다 실제로 원하는 웹사이트를 보여주고,

이 사이트의 여백 구조와 스크롤 흐름을 분석해서 이 브랜드에 맞게 적용해줘.

라고 지시하는 편이 훨씬 구체적입니다.

원본 사례에서도 같은 방법을 강조합니다.

‘Premium’이나 ‘Cool’ 같은 추상적인 표현보다 실제 디자인 레퍼런스와 원하는 모션 기법의 이름을 알려주는 방식입니다.

예를 들어 단순히

“멋지게 움직이게 해줘”

라고 하지 않고,

“히어로 영역에 layered parallax를 적용하고 제품에는 scroll-driven rotation을 사용해줘.”

라고 요청하는 식입니다.

AI가 좋아졌다고 프롬프트가 필요 없어지는 것은 아닙니다.

오히려 결과물의 수준이 올라갈수록 무엇을 원하는지 정확하게 설명하는 능력이 더 중요해집니다.

PC에서는 예쁜데 모바일화면에서는 망가진다면?

AI로 웹사이트를 만들 때 자주 생기는 문제가 있습니다.

PC 화면에서는 멀쩡합니다.

그런데 스마트폰으로 보면 글자가 겹치거나 이미지가 잘립니다.

여기서 다시 사람이 코드를 찾아 수정해야 한다면 자동화의 의미가 많이 줄어듭니다.

GPT-6 Astra를 활용한 사례에서는 문제가 발생한 모바일 화면을 캡처해 다시 전달합니다.

어디가 잘못됐는지 알려주자 AI가 해당 부분을 수정합니다.

원본에서는 이 과정을 verification loop, 즉 검증 루프로 설명합니다.

OpenAI 역시 Astra가 웹사이트를 생성하고 프런트엔드 QA를 수행할 수 있다고 설명하고 있습니다. (OpenAI)

웹사이트 제작에서 꽤 중요한 변화입니다.

생성에서 끝나는 게 아니라

제작 → 확인 → 문제 발견 → 수정

까지 하나의 흐름으로 이어질 수 있기 때문입니다.

이미지와 영상까지 GPT-6 Astra가 전부 만드는 건 아닙니다

이 부분은 구분할 필요가 있습니다.

영상에서 보여준 화려한 웹사이트의 이미지와 영상 에셋까지 Astra 혼자 전부 만든 것은 아닙니다.

사례에서는 Higgsfield를 연결해 사진, 영상, 텍스처, 제품 이미지 같은 시각 자료를 공급했습니다. 그 위에서 Astra가 페이지 구조와 인터랙션을 설계하고 구현하는 방식입니다.

즉,

GPT-6 Astra = 웹사이트 설계·코딩·수정

에 가깝고,

필요하다면 외부 이미지·영상 생성 도구를 연결해 결과물의 수준을 높이는 구조입니다.

이 차이를 모르고 결과물만 보면 “프롬프트 하나로 저 사이트가 전부 만들어졌다”고 오해하기 쉽습니다.

웹디자이너가 당장 필요 없어졌다는 이야기는 아닙니다

GPT-6 Astra가 공개됐다고 디자인 원칙까지 사라지는 것은 아닙니다.

오히려 반대에 가깝습니다.

좋은 레퍼런스를 고르는 사람과 그렇지 못한 사람의 결과물 차이가 커질 수 있습니다.

어떤 애니메이션을 넣을지 모르는데 AI에게 정확한 지시를 내리기는 어렵습니다.

브랜드에 어떤 레이아웃이 어울리는지 모르면 좋은 레퍼런스를 선택하기도 어렵습니다.

그래서 앞으로 웹사이트를 만드는 방식은

코드를 직접 전부 작성하는 능력

보다

좋은 사례를 찾고 → 구조를 분석하고 → AI에게 정확하게 지시하고 → 결과물을 검수하는 능력

쪽으로 조금씩 이동할 가능성이 있습니다.

OpenAI도 GPT-6 Astra를 코딩뿐 아니라 컴퓨터 사용, 디자인, 문서 제작 등 복잡한 업무를 처음부터 끝까지 처리하는 모델로 소개하고 있습니다. (OpenAI)

GPT-6 아스트라 웹디자인, 앞으로 더 재미있어지는 이유

예전 바이브 코딩의 가장 큰 매력은 개발을 모르는 사람도 자신의 아이디어를 실제 서비스로 만들 수 있다는 것이었습니다.

GPT-6 Astra에서는 여기에 한 가지가 더 붙고 있습니다.

‘작동하는 웹사이트’를 넘어 ‘보여줄 만한 웹사이트’를 만드는 것입니다.

물론 프롬프트 하나 입력한다고 무조건 수준 높은 디자인이 나오는 것은 아닙니다.

레퍼런스도 필요하고, 원하는 움직임도 설명해야 합니다. 결과를 확인하고 수정하는 과정도 필요합니다.

그래도 분명한 것은 있습니다.

불과 얼마 전까지만 해도 디자인 시안을 만들고, 프런트엔드 개발자가 구현하고, 다시 모바일 화면을 확인하며 수정하던 작업의 상당 부분을 이제 AI와 대화하면서 진행할 수 있게 됐습니다.

그래서 GPT-6 Astra에서 개인적으로 가장 눈에 띄는 부분은 코딩 성능만이 아닙니다.

웹사이트를 보는 눈까지 어느 정도 따라오기 시작했다는 점입니다.