This New Astra Web Design Workflow Is INSANE

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

영상이 제안하는 Astra 웹 디자인 워크플로는 레퍼런스 수집, 여러 시안 비교, 세부 조정, 공유를 반복하며 내장 이미지 생성으로 제작 부담을 줄이는 방식이다.

📌 핵심 요점

1. 제품과 사이트의 목적을 정한 뒤, 좋아하는 웹페이지 스크린샷을 디자인 계열별로 모은 ‘취향 저장소’를 만든다. 추상적인 지시보다 구체적인 시각 자료를 제공하는 것이 출발점이다.
2. 처음부터 하나의 디자인을 확정하지 않고 여러 방향을 비교한다. 영상은 가상의 투자 분석 서비스 Vantage를 대상으로 5개 디자인 계열과 4개 스킬 조건을 조합한 20개 시안을 보여준다.
3. 스킬의 효과는 기본 출력과 비교해 판단한다. 진행자는 Impeccable, Taste, Anthropic의 프런트엔드 디자인 스킬을 시험하지만, 최종적으로 스킬을 쓰지 않은 technical systems 시안을 선호한다.
4. 큰 디자인 방향을 고른 다음 같은 계열의 변형을 비교하고, 조정 패널로 글자·이미지·색상·모션을 다듬는다. 내장 이미지 생성과 외부 컴포넌트 참고 자료도 이 반복 과정에 활용한다.
5. 선택한 설정을 반영한 사이트를 Sites로 공유하고 피드백을 받는다. 영상에서는 이를 중간 결과 공유 수단으로 설명하며, 실제 운영용 배포와는 구분한다.

🧩 배경과 문제 정의

영상은 AI로 만든 프런트엔드가 획일적이고 취향에 맞지 않는 문제를 다룬다. 진행자는 원하는 결과를 처음부터 말로 정확하게 지정하기 어렵기 때문에, 구체적인 참고 자료를 제공하고 여러 결과를 눈으로 비교하는 과정이 필요하다고 본다.

사례는 개인 투자자를 위한 가상의 AI 금융 분석 서비스 Vantage다. 진행자는 Astra와 Codex 데스크톱 앱을 활용해 디자인 계열과 스킬 조건을 비교하고, 선택한 시안을 조정한 뒤 공유하는 흐름을 보여준다. 내장 이미지 생성이 반복 제작을 빠르고 저렴하게 만든다는 설명은 진행자의 주장으로 구분해 읽어야 한다.

🕒 시간순 섹션별 상세정리

1. 내장 이미지 생성과 반복 설계의 장점

• 진행자는 GPT6 Astra와 GPT Images 2.5의 결합이 웹페이지와 이미지 자산을 함께 만드는 데 유리하다고 보여준다. 별도 이미지 도구 연결 없이 작업할 수 있다는 점을 강조한다. [00:41]
• 프런트엔드 디자인은 여러 버전을 직접 보며 취향을 좁혀 가는 과정이라고 보여준다. 내장 이미지 생성은 이 과정에서 자산을 반복 제작하는 부담을 줄인다는 주장이다. [01:40]

2. 참고 자료를 모아 취향 저장소 만들기

• Pinterest, Twitter, Landbook, Dribbble로 언급된 사이트 등에서 마음에 드는 페이지와 미감을 찾고, 스크린샷을 축적하라고 권한다. [02:24]
• 취향 저장소는 참고 자료를 monumental editorial, product-led minimalism, technical systems 같은 계열로 나눈다. 여러 자료의 공통 패턴을 가져오거나 특정 사례를 바탕으로 변형할 수 있다. [03:21]
• ‘깔끔하게’, ‘눈에 띄게’ 같은 추상적 지시 대신 실제 예시를 제공한다. 저장소와 프롬프트는 고정 댓글에서 제공한다고 안내한다. [03:57]

3. 제품 정의와 지속적인 자료 수집

• 단계 설명을 다시 정리하면서 먼저 어떤 제품과 웹사이트를 만들지 정하고, 다음으로 원하는 분위기의 참고 자료를 모으라고 드러낸다. 좋은 사이트를 발견할 때마다 저장소에 추가하는 습관을 권한다. [04:15]
• Chase AI Plus의 관련 강좌를 소개하는 자체 홍보 구간이 계속된다. 이후 참고 스크린샷을 활용한 랜딩페이지 생성으로 돌아온다. [04:55]

4. 여러 디자인 방향과 스킬 조건 설정

• 원하는 미감이 확실하지 않다면 하나의 랜딩페이지 대신 서로 다른 계열의 여러 페이지를 요청한다. technical systems, product-led minimalism, quiet cinematic 등을 비교 대상으로 든다. [05:40]
• Impeccable, Taste로 소개되는 스킬, Anthropic의 프런트엔드 디자인 스킬을 선택지로 제시한다. 이번 예제에서는 세 스킬을 사용한 조건과 스킬을 사용하지 않은 기본 조건을 비교한다. [06:28]

5. 가상 서비스 Vantage의 20개 시안 비교

• Vantage는 개인 투자자를 위한 AI 금융 분석 서비스라는 설정이지만, 진행자는 실제 서비스가 아닌 가상 예제라고 명시한다. [06:42]
• luminous futurism, print tech paper, quiet cinematic, technical systems, product minimalism의 5개 계열에 각각 4개 스킬 조건을 적용해 총 20개 시안을 만든다. [07:25]
• Codex 데스크톱 앱에서 디자인 계열과 스킬 조건을 전환하며 전체 페이지를 보고, 20개 미리보기 화면으로 돌아가 비교한다. [07:55]

6. 스킬의 효과와 기본 출력 평가

• 진행자는 특정 애니메이션이나 한 가지 스타일을 반복하는 스킬보다 여러 미감에 적용할 수 있는 디자인 스킬을 선호한다고 보여준다. [08:29]
• 일부 결과는 스킬을 적용한 쪽이 더 좋을 수 있지만, 기본 Astra 출력도 충분히 괜찮다고 평가한다. 모델의 기본 성능 향상으로 추가 보완 장치가 덜 필요해질 수 있다는 견해를 덧붙인다. [09:35]
• 참고 자료 외에 상세한 이미지 지시를 하지 않았는데도 구름과 관측소 이미지를 생성해 제품의 ‘멀리 보고 이해한다’는 이야기와 연결했다고 보여준다. [10:05]

7. 선호 계열을 고르고 그 안에서 변형하기

• 진행자는 technical systems 계열을 선택하고, 여러 스킬 조건 중에서는 스킬을 사용하지 않은 버전을 가장 선호한다고 드러낸다. 선택 기준은 개인적 취향이다. [10:54]
• 선택한 미감을 유지하면서 서로 다른 세 가지 버전을 요청한다. 큰 디자인 계열을 먼저 고르고, 계열 안의 변형을 비교한 뒤 미세 수정으로 넘어가는 순서다. [11:45]

8. 세 가지 변형의 이미지와 색상 비교

• 생성된 결과는 original, field of view, research bureau다. field of view는 주요 이미지의 면적이 더 크고, 가상의 대시보드에서는 종목을 눌러 표시 정보를 바꿀 수 있다. [12:20]
• 색상 비중과 이미지 크기를 비교한 뒤 진행자는 깨끗하면서 개성이 남아 있다는 이유로 original을 고른다. 더 큰 차이를 원하면 프롬프트로 요청할 수 있다고 보여준다. [12:52]

9. 실시간 조정 패널로 세부 디자인 다듬기

• 선택한 시안에 슬라이더와 프리셋을 갖춘 조정 패널을 만들도록 요청한다. expressive 프리셋에서는 진입 모션이 추가되는 모습을 보여준다. [14:07]
• 제목의 굵기·높이·자간, 이미지 밝기·대비·확대, 격자 패턴과 강조색을 조정한다. 매번 문장으로 수정 요청을 하는 부담을 줄이고 결과를 즉시 확인하는 방식이다. [14:54]
• 푸터의 워터마크와 움직이는 와이어프레임 도시도 비교한다. 설정 저장·초기화와 원본 비교 기능을 보여주며 관련 프롬프트가 GitHub에 있다고 안내한다. [15:32]

10. 외부 컴포넌트로 참고 범위 확장하기

• 21st.dev에서 테두리, 흐르는 콘텐츠 영역, 추천사, 카드, 달력, 버튼 등 다양한 컴포넌트를 찾아볼 수 있다고 보여준다. [16:13]
• 디자인 경험이 적을수록 어떤 선택지가 있는지 모를 수 있으므로, 몇 분이라도 사례를 탐색해 자신이 좋아하는 요소를 발견하라고 권한다. [16:55]
• 마음에 드는 컴포넌트의 프롬프트를 복사해 Codex에 전달하고, 그 컴포넌트의 미감을 페이지 전체로 확장하는 방법을 제안한다. [17:29]

11. Sites로 중간 결과 공유하기

• 세부 수정과 컴포넌트 적용이 끝나면 설정을 반영하고 Sites에 올리도록 요청한다. 진행자는 Codex에서 @sites를 통해 웹에 게시하는 흐름을 보여준다. [17:50]
• 이를 실제 운영용보다는 다른 사람에게 중간 결과를 보여주고 피드백을 받기 위한 간단한 공유 방식으로 보여준다. [18:20]
• 이메일로 특정 사람에게 공유하거나 인터넷 공개를 선택하는 화면을 보여준다. 비공개 상태에서는 로그인이 요구되며, Vantage 사이트가 게시된 모습을 보여준다. [18:35]

12. 반복 과정과 취향 저장소의 중요성 재강조

• 디자인 계열을 비교하고, 계열 안에서 변형한 뒤, 내장 이미지 생성으로 자산을 만드는 흐름을 다시 정리한다. 최종 예제가 별도 디자인 스킬 없이 제작됐다는 점도 강조한다. [19:17]
• 한 가지 스타일을 강제하는 스킬보다 자신이 원하는 방향을 찾고 반복해서 다듬는 과정이 중요하다고 드러낸다. 그 출발점으로 레퍼런스와 취향 저장소를 재차 강조한다. [19:38]
• 시청자의 경험 공유를 요청하고 관련 강좌와 GitHub 자료를 다시 안내하며 영상을 마친다. [19:56]

🧾 결론

• 영상의 핵심은 특정 스킬 하나보다 ‘참고 자료 → 다양한 방향 → 계열 내 변형 → 미세 조정’으로 선택 범위를 좁히는 과정이다.
• 진행자는 기본 Astra 출력도 충분히 만족스럽다고 평가한다. 다만 이는 한 예제에 대한 시각적 선호이며, 모든 작업에서 스킬이 불필요하다는 검증은 아니다.
• 내장 이미지 생성은 페이지의 이야기와 어울리는 시각 자산을 만드는 데 활용된다. 영상에서는 관측과 전망이라는 제품 콘셉트에 맞춰 구름과 관측소 이미지를 생성한다.
• 취향 저장소는 한 번 만들고 끝내는 자료가 아니다. 마음에 드는 사이트와 컴포넌트를 계속 축적해야 다음 작업에서도 구체적인 방향을 제시할 수 있다.

📈 투자·시사 포인트

• 제작 도구의 경쟁력을 판단할 때 모델의 첫 출력뿐 아니라 이미지 생성, 시안 비교, 세부 조정, 공유가 얼마나 자연스럽게 이어지는지 살펴볼 만하다.
• 영상의 비용 절감 논리는 이미지 생성 도구를 별도로 연결하고 매번 결제하는 부담을 줄인다는 데 있다. 실제 경제성은 이용 요금과 한도 확인이 필요하다.
• 진행자의 사례는 기본 모델 성능이 좋아질수록 추가 스킬의 역할이 필수 보완재에서 선택적 취향 조정 수단으로 달라질 가능성을 시사한다.
• Vantage는 영상에서 만든 가상 투자 분석 서비스다. 등장하는 종목 정보와 대시보드는 투자 판단의 근거가 아니며, 영상 자체도 금융상품이나 기업 가치 분석을 제공하지 않는다.

⚠️ 불확실하거나 확인이 필요한 부분

• ‘최고의 모델’, ‘무료 이미지 생성’, ‘빠르고 저렴하다’는 진행자의 설명이다. 제공된 transcript에는 독립적인 성능 비교, 요금표, 사용량 제한, 실제 소요 시간 측정이 없다.
• GPT6 Astra, GPT Images 2.5, Sites 등의 명칭과 기능은 원문 표기를 기준으로 정리했다. 실제 제공 여부, 계정별 접근 조건, 현재 사양은 이 자료만으로 확인할 수 없다.
• 스킬의 별점 수와 버전은 진행자가 언급한 시점의 수치이며, 일부 도구명은 전사 표기가 일관되지 않다. 정확한 저장소와 버전 확인이 필요하다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 만들 제품과 페이지의 목적을 먼저 한 문장으로 정리한다.
• 마음에 드는 사이트의 스크린샷을 모아 디자인 계열별 취향 저장소를 만든다.
• 동일한 제품 설명과 참고 자료로 여러 디자인 계열을 생성하고, 필요하면 스킬 미사용 조건도 함께 비교한다.
• 선호하는 계열을 고른 뒤 그 안에서 세 가지 변형을 요청해 이미지 비중, 색상, 정보 배치를 비교한다.

❓ 열린 질문

• 기본 Astra와 각 디자인 스킬의 차이는 다른 제품군이나 디자인 계열에서도 비슷하게 나타날까?
• 여러 시안을 만드는 데 드는 시간과 비용은 실제로 얼마나 줄어들며, 어느 시점부터 추가 변형의 효용이 작아질까?
• 개인적 취향으로 고른 시안이 실제 이용자의 이해도와 사용성에서도 더 좋은 결과를 낼까?