ChatGPT 6 Astra와 Higgsfield로 웹사이트 제작·편집 OS 활용법을 소개한다.

01핵심 개요

• 영상은 ChatGPT 6 Astra, GPT image 2.5, Higgsfield를 활용해 반응형 웹사이트를 제작하는 3단계 방식을 제시한다.
• 1단계에서는 save.com, inspora.design, Mobbin 등에서 레퍼런스를 모아 디자인 무드보드를 만드는 과정을 설명한다.
• 2단계인 디자인 루프에서는 Wise 웹사이트 스타일을 참조해 에이전트가 반복 작업하고, 데스크톱·모바일·태블릿 화면을 제작한다고 말한다.
• 웹사이트 OS에서는 색상, 타이포그래피, 그래픽, 문구, 메타데이터를 직접 편집해 토큰 재사용을 줄이는 방식을 보여준다.
• 커뮤니티 사례로 3일 전 웹사이트 제작에 1만8,500달러와 350달러 리테이너를 받은 사례를 언급한다.

02핵심 주장 / 논점 구조

• 영상은 웹사이트 제작을 레퍼런스 수집, 디자인 루프, 웹사이트 운영체제의 3개 레벨로 나눈다.
• 발표자는 좋은 웹사이트 디자인의 출발점이 좋은 레퍼런스와 이미지라고 설명한다.
• 완성 뒤에도 문구·그래픽·SEO를 OS에서 수정하면 전체 웹사이트를 다시 생성하지 않아도 된다고 주장한다.

03디자인 레퍼런스와 스킬 저장 과정

• save.com은 디자이너가 구성한 사이트로 소개되며, 웹사이트 예시를 검색해 디자인 영감을 얻는 용도로 제시된다.
• inspora.design, post.design, Mobbin, recent.design, superhero.io와 모바일 우선 디자인 사이트가 레퍼런스 출처로 언급된다.
• CTA와 컴포넌트에 특화된 웹사이트도 찾아 원하는 디자인의 무드보드를 구성할 수 있다고 설명한다.
• 설명란의 디자인 립 스킬을 ChatGPT에 저장한 뒤 Astra에 넣어 스킬로 저장하라고 지시하는 흐름을 보여준다.

04Wise 스타일 웹사이트 생성과 디자인 루프

• Wise 웹사이트를 예시로 선택한 뒤, Jack AI의 웹사이트 판매용 사이트를 해당 스타일에서 영감 받아 만들도록 요청한다.
• Glider의 기능으로 Codex에서 작업을 시작하고, 시스템이 자체 프롬프트를 생성하는 모습을 보여준다.
• 디자인 루프는 참조 이미지와 제품 사진을 바탕으로 여러 에이전트가 반복해 결과물을 다듬는 방식으로 설명된다.
• 제작 결과물은 데스크톱·모바일·태블릿 화면에서 동작하며, 스크롤 애니메이션과 다양한 컴포넌트를 포함한 예시로 제시된다.

05Higgsfield 플러그인으로 이미지와 영상 생성

• ChatGPT 설정의 Plugins에서 디렉터리를 열고 Higgsfields를 검색해 추가한 뒤, Higgsfield 연결을 허용하는 절차를 안내한다.
• 발표자는 Codex 내부 이미지 생성이 GPT image 2.5인지 검증하지 못해 Higgsfield를 사용한다고 말한다.
• Higgsfield에서 생성한 지구 이미지를 프롬프트로 애니메이션 영상으로 전환하는 예시를 보여준다.
• 참조 기능으로 파란색을 빨간색으로 바꾸고, 2.5 sunburst와 2개 변형을 선택해 생성하는 과정을 시연한다.

06루프 영상과 화면별 인터랙션 구성

• 일반 이미지 대신 시작 프레임과 끝 프레임을 활용한 반복 영상으로 웹사이트 요소를 구성할 수 있다고 설명한다.
• 배경의 덤불 움직임, 날개를 퍼덕이는 나비, 토끼 이미지가 루프 영상 예시로 언급된다.
• 발표자는 이런 움직임이 정적인 이미지보다 웹사이트의 개인적 느낌과 품질을 높인다고 평가한다.
• 생성된 지구 그래픽에는 주석과 자산 컴포넌트가 더해졌으며, 웹사이트 내에서 동적으로 제작됐다고 설명한다.

07웹사이트 OS의 편집·SEO·클라이언트 전달 기능

• Hermes 운영체제를 내려받은 뒤 Website OS를 열어 태블릿과 모바일 화면을 확인하고 수정하는 흐름을 보여준다.
• 디자인 시스템에서 색상 팔레트와 타이포그래피를 바꾸며, 21st.dev에서 찾은 색상 선택기를 추가하는 UI sniping 사례를 든다.
• 그래픽 자산의 크기를 확인하고 Higgsfield로 영상을 재생성하며, 문구도 OS에서 직접 바꿔 토큰 사용을 줄인다고 말한다.
• Slop Monster는 AI 어휘, 문장 구성, 문장부호 리듬, 3단 리듬 등을 점검해 문구를 다시 쓰는 기능으로 소개된다.
• SEM 검토에서 페이지 제목과 검색 설명 등 메타데이터를 수정·저장하고, 클라이언트가 직접 수정하거나 새 페이지를 추가할 수 있다고 설명한다.

08용어 사전