<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel>
<title>AI_23yellow &amp;gt; 커뮤니티 &amp;gt; AI Skill 디자인</title>
<link>https://ai.23yellow.com/ai_skill_design</link>
<language>ko</language>
<description>AI Skill 디자인 (2026-10-30 02:22:49)</description>

<item>
<title>Kling 4.0 실전 — References·Frames·Edit video로 AI 쇼츠 만들기, 비용·시간·한계까지</title>
<link>https://ai.23yellow.com/ai_skill_design/kling-40-%EC%8B%A4%EC%A0%84-referencesframesedit-video%EB%A1%9C-ai-%EC%87%BC%EC%B8%A0/</link>
<description><![CDATA[
ZeroCho TV의 영상 **「Kling 4.0 출시! AI 동영상 제작의 혁신일까?」**에서는 Higgsfield에서 Kling 4.0을 직접 사용해 **References, Frames, Edit video** 세 가지 기능을 테스트하고, 실제 AI 뉴스 쇼츠를 만드는 과정에서 캐릭터 일관성·한국어 음성·장면 전환·비용·생성 시간을 검증합니다.

&gt; 이 영상은 Higgsfield의 제작 지원을 받아 제작되었습니다. 아래 내용은 영상에서 직접 보여준 실사용 결과를 중심으로 정리합니다.

## Kling 4.0에서 달라진 점

영상 기준으로 Kling 4.0은 기존 3.0 대비 한 번에 생성 가능한 영상 길이가 최대 30초로 늘어났습니다.

또한 단순 Text-to-Video를 넘어 다음 세 가지 방식으로 장면을 더 세밀하게 제어할 수 있습니다.

- References
- Frames
- Edit video

## 1. References — 캐릭터와 스타일 유지

References 기능은 기존 이미지나 영상을 참고해:

- 캐릭터
- 배경
- 스타일
- 의상
- 장면 분위기

를 유지하면서 새로운 영상을 만드는 방식입니다.

영상에서는 기존에 만든 수달 AI 캐릭터 이미지를 Reference로 넣고 뉴스 앵커 역할을 시킵니다.

결과적으로 캐릭터 외형과 전체적인 스타일은 상당히 잘 유지됐습니다.

## 한국어 음성과 립싱크는 아직 완벽하지 않다

Kling 4.0이 한국어 대사를 직접 생성하고 입모양도 맞추지만, 실제 테스트에서는 일부 단어가 깨지거나 외계어처럼 발음되는 문제가 있었습니다.

특히 대사가 긴 경우:

- 특정 단어 누락
- 발음 왜곡
- 문장 일부 생략

이 발생할 수 있습니다.

따라서 한국어 콘텐츠에서는 한 번 생성으로 끝내기보다 결과를 반드시 확인하고 재생성 가능성을 고려해야 합니다.

## AI 인간보다 동물 캐릭터가 자연스러울 수 있다

영상에서는 수달 같은 캐릭터를 사용했을 때 사람 형태 AI보다 불쾌한 골짜기가 덜하다는 점도 언급합니다.

AI로 만든 동물·캐릭터는 시청자도 처음부터 인공적인 존재로 받아들이기 때문에 입모양이나 표정의 작은 오류가 덜 거슬릴 수 있습니다.

## 2. Edit video — 기존 영상 수정

이미 생성한 영상을 다시 넣고:

- 의상 변경
- 배경 수정
- 특정 요소 추가

같은 편집을 할 수 있습니다.

실제 테스트에서는 수달 캐릭터에게 뉴스 앵커 스타일의 옷을 입히는 수정은 잘 적용됐습니다.

하지만 중요한 문제가 있었습니다.

### 음성이 있는 영상은 Edit 후 깨질 수 있다

한국어 음성이 포함된 영상을 Edit video로 수정하자 원래 대사가 심하게 깨지는 현상이 발생했습니다.

따라서 현재 기준으로는:

**무대사 액션 장면 → Edit video 활용**

**대사가 중요한 장면 → 가능하면 처음부터 다시 생성**

하는 방식이 더 안전해 보입니다.

## 3. Frames — 키프레임으로 장면 직접 제어

영상에서 가장 유용하게 평가한 기능은 Frames입니다.

시작·중간·끝 장면 이미지를 지정하면 Kling이 그 사이 움직임을 자동으로 연결합니다.

최대 10개까지 Keyframe을 넣을 수 있어 Prompt만으로 설명하기 어려운 장면 구도를 직접 제어할 수 있습니다.

예:

**0초 → 뉴스 앵커 정면**

**15초 → 모니터를 가리키는 장면**

**30초 → 카메라가 가까워진 마무리 장면**

처럼 구조를 먼저 이미지로 설계할 수 있습니다.

## Keyframe 이미지는 연속성을 고려해서 만든다

영상에서는 첫 번째 이미지를 Reference로 두 번째 이미지를 만들고, 다시 앞선 이미지들을 Reference로 세 번째 이미지를 만드는 방식으로 Keyframe을 준비했습니다.

이렇게 하면 각 Frame의 캐릭터 외형과 배경을 더 일관되게 유지할 수 있습니다.

즉:

**Frame 1 생성 → Frame 1을 참고해 Frame 2 → Frame 1·2를 참고해 Frame 3**

형태입니다.

## Frames도 한 번에 완벽하지는 않다

같은 Frame 세트를 사용해도 매번 결과가 조금씩 달랐습니다.

한 번은 장면 사이가 자연스럽게 연결됐지만 다른 시도에서는 갑자기 Cut처럼 전환되기도 했습니다.

영상에서는 Prompt에:

&gt; 장면이 잘리지 않고 자연스럽게 이어져야 한다

는 조건을 추가하자 더 매끄러운 결과가 나왔다고 설명합니다.

즉, Keyframe을 지정했다고 해서 자동으로 완벽한 Transition이 보장되는 것은 아닙니다.

## Prompt에는 카메라와 행동을 구체적으로

Kling 4.0은 영상에서:

- 카메라가 천천히 가까워진다
- 오른손을 들어 인사한다

같은 구체적인 동작 지시를 잘 반영했습니다.

AI 영상에서는 단순히 장면 설명만 적기보다:

- Camera Movement
- Character Action
- Timing
- Dialogue
- Transition

을 세분화해 작성하는 것이 좋습니다.

## 30초 영상 생성 시간

영상의 실제 테스트 기준으로 대략:

- References 기반 30초 생성: 약 5분 내외
- Frames 기반 30초 생성: 약 10분 내외

가 걸렸습니다.

다만 서버 상황이나 옵션에 따라 달라질 수 있으므로 절대적인 수치라기보다 실사용 참고값으로 보는 것이 좋습니다.

## 비용

영상에서 설명한 Higgsfield Credit 기준으로:

- 낮은 품질 30초: 약 60~70 Credit 수준
- 1080p 30초: 약 97.5 Credit

이 사용됐습니다.

영상에서는 대략 20 Credit ≈ 1달러 정도로 계산해 1080p 30초 영상을 한 번 만들 때 약 5달러 수준으로 설명합니다.

따라서 1분짜리 영상을 한 번에 성공하면 약 10달러 수준이지만 실제로는 재생성 비용이 추가될 수 있습니다.

## AI 영상 제작에서 가장 큰 비용은 '재시도'

이번 테스트에서 가장 현실적인 포인트입니다.

AI 영상은:

- 대사 누락
- 발음 오류
- 장면 전환 실패
- Prompt 해석 차이
- Frame 연결 문제

때문에 여러 번 생성해야 할 수 있습니다.

즉, 실제 비용은 '영상 1개 생성 가격'보다:

&gt; **몇 번 재생성해야 원하는 결과가 나오느냐**

에 더 크게 좌우됩니다.

## 초반에는 저해상도로 테스트

영상에서는 처음부터 1080p로 생성하지 않고 낮은 품질로 결과를 먼저 검증하는 방식을 추천합니다.

실전에서는:

**Low Quality 테스트 → Prompt 수정 → Frame 확정 → 최종 High Quality 생성**

순서가 Credit을 아끼는 데 유리합니다.

## 30초 이후 장면을 이어 만드는 방법

앞에서 만든 30초 영상을 Reference로 넣고 다음 30초를 생성하는 방법도 테스트했습니다.

하지만 실제 결과는 기존 영상을 단순히 따라한 느낌이 강했고 새 Prompt의 대사와 배경이 잘 반영되지 않았습니다.

그래서 영상에서는:

&gt; 이전 영상의 마지막 Frame을 다음 영상의 첫 Frame으로 사용하고, Frames 기능으로 이어서 만드는 방식

을 더 추천합니다.

## 기능별 추천

### References

캐릭터·스타일을 유지할 때 유용

### Frames

장면 구조와 카메라 연출을 정확하게 통제할 때 가장 유용

### Edit video

생성 후 일부 요소 수정에 유용하지만 음성 있는 영상은 주의

## Kling 4.0으로 쇼츠를 만들 때 추천 Workflow

영상 내용을 기준으로 정리하면 다음 방식이 가장 안정적입니다.

1. 캐릭터 Reference Image 준비
2. 전체 30초 Storyboard 작성
3. 시작·중간·끝 Keyframe Image 생성
4. 저해상도 Frames 영상 생성
5. 대사·장면 전환·캐릭터 일관성 확인
6. Prompt와 Frame 수정
7. 최종 1080p 생성
8. 다음 30초는 이전 영상 마지막 Frame부터 다시 Frames로 연결

## 핵심 정리

Kling 4.0은 단순히 '텍스트를 영상으로 만드는 모델'보다:

**Reference로 캐릭터를 유지하고 → Frames로 장면을 설계하고 → Edit로 일부를 수정하는 제작 도구**

에 더 가까워지고 있습니다.

하지만 아직:

- 한국어 발음
- 음성 포함 영상 재편집
- Frame 간 Transition
- 재생성 비용

은 주의해야 합니다.

이번 테스트에서 가장 실용적인 결론은:

&gt; **AI 영상은 Prompt 한 번보다, Storyboard와 Keyframe을 먼저 설계할수록 결과와 비용이 좋아진다.**

라고 정리할 수 있습니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-10-30T02:22:49+09:00</dc:date>
</item>


<item>
<title>GPT‑6 Astra vs Claude Opus 5.5 vs DeepSeek V4.1 Flash — 코드로 만드는 디자인 감각 비교</title>
<link>https://ai.23yellow.com/ai_skill_design/gpt6-astra-vs-claude-opus-55-vs-deepseek/</link>
<description><![CDATA[
코드깎는노인 영상 **「최신 AI 모델들의 미적 감각 비교 | 디자인을 위해서라면 이걸 쓰세요」**에서는 최신 AI 모델 3종을 각자의 코딩 에이전트에 연결한 뒤, **이미지 파일 없이 코드만으로 시각 결과물을 얼마나 잘 만드는지** 비교합니다.

비교 대상은 다음 세 모델입니다.

- **GPT‑6 Astra + Codex**
- **Claude Opus 5.5 + Claude Code**
- **DeepSeek V4.1 Flash + OpenCode**

핵심은 단순 코딩 벤치마크가 아니라, **구도·색감·디테일·애니메이션·반응형·수정 피드백까지 포함한 디자인 감각**을 같은 과제로 비교했다는 점입니다.

## 1. 사진 한 장을 코드로 재현

첫 번째 과제는 현관 바닥에 신발 세 켤레가 놓인 사진을 보고, 이미지 파일 없이 코드만으로 다시 그리는 작업입니다.

### DeepSeek

구도와 색감은 잘 맞췄지만 운동화 형태가 둥글게 뭉개지는 경향이 있었습니다.

대신 중간에 자신의 결과를 다시 확인하고 신발 크기를 스스로 수정하면서 오랜 시간 다듬었습니다.

### Claude

자신이 만든 결과를 원본 사진 옆에 놓고 비교하는 도구를 직접 만들어 반복 수정했습니다.

특히:

- 배경 심도
- 운동화 구멍
- 리본 끝 장식
- 식물 잎 형태

같은 작은 디테일까지 잡았습니다.

### GPT

오랜 구상 뒤 비교적 빠르게 한 번에 결과를 만들었습니다.

배경까지 또렷한 일러스트 스타일이었고, 러그 질감을 수천 개의 작은 도형으로 표현하는 등 **코드 밀도와 시각적 정교함**이 돋보였습니다.

## 2. 날씨 아이콘 세트 디자인

맑음·구름·비·눈·천둥·안개·바람·무지개를 한 스타일로 만들고, 마우스를 올렸을 때 각 날씨에 맞는 애니메이션을 적용하는 과제입니다.

### DeepSeek

어두운 배경과 빛나는 카드 스타일을 선택해 다른 두 모델과 차별화했습니다.

### Claude

아이콘 선 굵기와 구름 형태를 통일해 **세트 디자인의 일관성**을 잘 맞췄습니다.

또한 프레임별로 애니메이션을 점검하며 빗방울이 중간에 사라지는 문제까지 수정했습니다.

### GPT

밝은 크림색 배경과 둥근 선의 아이콘을 사용했고, 전체 재생 버튼과 컬러/흑백 전환 기능까지 추가했습니다.

즉, 단순 시각 결과보다 **UI 기능 확장**까지 적극적으로 넣는 경향이 나타났습니다.

## 3. 커피 브랜드 오프닝 애니메이션

가상의 커피 브랜드 첫 화면에 3~5초짜리 오프닝 애니메이션을 만드는 과제입니다.

### DeepSeek

주황색 원 위에 커피잔을 선으로 그리고, 원두와 도장 형태가 계속 천천히 움직이도록 구성했습니다.

### Claude

진한 커피색 배경을 사용하고, 컵이 선에서 도자기 형태로 채워진 뒤 라테아트와 김이 등장하는 연출을 만들었습니다.

### GPT

크림색 배경에 짧고 차분한 4초 안팎의 오프닝을 만들었습니다.

전체적으로 **미니멀하고 빠르게 완성되는 방향**이었습니다.

## 4. 스크롤로 시간 흐름 표현

산·호수·집이 있는 풍경을 만들고, 스크롤에 따라 새벽 → 낮 → 노을 → 밤으로 시간대가 변하도록 하는 과제입니다.

### DeepSeek

시간대별 색상 변화와 함께 시적인 문구를 배치했습니다.

### Claude

해와 달의 위치, 호수 반사광, 창문 불빛, 별과 반딧불이까지 서로 연동했습니다.

즉, **환경 요소 간 상호작용**을 세밀하게 구현했습니다.

### GPT

화면을 고정한 채 스크롤에 따라 시계가 흐르는 방식을 선택했고, 시간표를 눌러 특정 시간대로 바로 이동하는 UI도 추가했습니다.

같은 과제에서도 세 모델이 **서로 다른 인터랙션 해석**을 내놓은 점이 흥미롭습니다.

## 5. 자유 과제 — 감탄할 만한 인터랙티브 작품

주제를 자유롭게 정해 시각적으로 인상적인 인터랙티브 작품을 만들게 했습니다.

### DeepSeek — 영원을 세는 기계

행성들이 검은 별 주위를 돌고, 드래그로 시간 흐름을 조절하는 우주형 인터랙션을 만들었습니다.

### Claude — 등대지기의 밤

등대 불빛으로 배를 찾아 귀환시키는 작은 게임 형태였습니다.

배를 찾을수록 별이 켜지고, 모두 돌아오면 새벽이 오는 **스토리텔링형 인터랙션**입니다.

### GPT — 공명

금빛 곡선 수십 개가 하나의 고리 형태로 얽혀 움직이고, 버튼으로 꽃·일식·궤도 형태로 변하는 추상 조형 작품을 만들었습니다.

세 모델 모두 공교롭게도 **밤·별·궤도 계열의 테마**를 선택했습니다.

## 6. “더 고급스럽게 다듬어 달라”는 애매한 피드백

실무에서 자주 나오는 추상적인 수정 요청을 얼마나 잘 해석하는지도 비교했습니다.

### GPT

모바일 레이아웃 개선에 집중했습니다.

큰 화면은 거의 유지하고, 작은 화면에서 제목·커피잔·버튼 배치를 더 안정적으로 조정했습니다.

### Claude

색, 장식, 라테아트, 김 표현, 애니메이션 타이밍 등 **전체 흐름과 디테일**을 적극적으로 수정했습니다.

여러 화면 크기를 반복 확인하며 수정했습니다.

### DeepSeek

전체 구조는 유지한 채 색감과 그라데이션을 손보는 쪽을 선택했습니다.

세 모델 모두 “다시 만들어라”가 아니라 **기존 결과를 다듬는 요청**으로 해석했습니다.

## 작업 방식 차이가 더 크게 보였다

영상의 중요한 결론은 **최종 결과물 차이보다 작업 방식 차이가 더 크게 느껴졌다는 점**입니다.

### GPT‑6 Astra

- 오래 생각한 뒤 빠르게 한 번에 구현
- 전체 작업 시간이 가장 짧음
- 모바일·UI 기능 확장에 적극적
- 빠르게 괜찮은 결과를 만드는 성향

### Claude Opus 5.5

- 화면을 계속 캡처하고 비교
- 작은 오류를 스스로 찾아 반복 수정
- 시각적 디테일과 흐름을 세밀하게 조정
- 디자인 완성도를 위해 검증 루프를 많이 도는 성향

### DeepSeek V4.1 Flash

- 상대적으로 저렴한 비용
- 결과 품질은 꽤 경쟁력 있음
- 이번 테스트 환경에서는 작업 시간이 가장 길었음
- 반복 수정은 많지만 브라우저 검증 빈도는 상대적으로 낮음

## 총 작업 시간 비교

영상 기준 전체 6개 과제를 합친 시간은 대략 다음과 같습니다.

- **GPT‑6 Astra:** 약 1시간 10분
- **Claude Opus 5.5:** 약 2시간 47분
- **DeepSeek V4.1 Flash:** 9시간 이상

단, 이는 모델 자체의 절대 성능만으로 보기보다 각 코딩 에이전트 환경과 실행 조건의 영향을 함께 받은 결과로 봐야 합니다.

## 디자인 작업에서 어떤 모델이 잘 맞을까?

영상 결과를 바탕으로 단순화하면 다음처럼 볼 수 있습니다.

### 빠르게 시안과 UI를 만들고 싶다면
**GPT‑6 Astra**

속도가 빠르고, 기능을 덧붙이거나 반응형 구조를 만드는 데 적극적입니다.

### 작은 디테일까지 계속 다듬고 싶다면
**Claude Opus 5.5**

자기 결과를 반복 검증하면서 시각 디테일과 흐름을 수정하는 성향이 강합니다.

### 비용을 낮추면서 충분한 결과를 원한다면
**DeepSeek V4.1 Flash**

시간은 더 걸릴 수 있지만, 상대적으로 저렴한 비용에 준수한 결과를 기대할 수 있습니다.

## 핵심 정리

이번 비교의 가장 흥미로운 점은 최신 AI 모델이 이제 단순히 HTML/CSS를 “작성하는 것”을 넘어, **구도와 분위기, 애니메이션 타이밍, 모바일 배치, 시각적 완성도까지 스스로 판단하는 단계**로 들어왔다는 점입니다.

즉, AI 코딩 에이전트는 점점:

**코드 생성기 → UI 구현 도구 → 인터랙션 디자이너 → 시각적 디렉터**

로 역할이 확장되고 있습니다.

디자인 작업에서 앞으로 중요한 기준은 단순 코딩 점수보다도 **얼마나 잘 보고, 비교하고, 수정하며, 미적 의도를 끝까지 유지하는가**가 될 가능성이 큽니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-10-24T16:29:11+09:00</dc:date>
</item>


<item>
<title>Claude Code + HyperFrames — 편집 프로그램 없이 코드로 만드는 모션그래픽</title>
<link>https://ai.23yellow.com/ai_skill_design/claude-code-hyperframes-%ED%8E%B8%EC%A7%91-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8-%EC%97%86%EC%9D%B4/</link>
<description><![CDATA[
커리어해커 알렉스의 쇼츠 **「가운데 이 영상, 편집 프로그램 없이 AI 클로드가 다 만들었습니다」**에서는 Claude Code와 HyperFrames를 이용해 **영상 편집 프로그램 없이 모션그래픽을 코드로 생성하는 방식**을 소개합니다.

## 편집 프로그램 없이 만드는 영상

영상 제작자는 대본과 녹음 파일을 Claude Code에 전달하고 프롬프트 한 번으로 결과물을 만들었다고 설명합니다.

영상 설명란 기준으로는 다음과 같은 조건으로 테스트했습니다.

- 작업 시간 약 12분 32초
- 추가 지시 0회
- Claude가 작성한 코드 약 1,519줄
- HyperFrames가 해당 코드를 영상으로 렌더링

즉, After Effects 같은 전통적인 편집 프로그램에서 타임라인을 직접 조작하는 방식이 아니라 **AI가 영상 구성 코드를 작성하고 이를 렌더러가 영상으로 변환하는 구조**입니다.

## 생성형 영상 AI와 다른 점

일반적인 영상 생성 AI는 장면을 매번 새로 생성하기 때문에 같은 프롬프트를 사용해도 결과가 조금씩 달라질 수 있습니다.

반면 이 방식은 Claude가 다음 요소를 **코드로 정의**합니다.

- 자막
- 줌
- 그래픽
- 색상
- 움직임
- 타이밍

같은 코드를 다시 렌더링하면 동일한 결과가 나오기 때문에 **재현성과 수정 편의성**이 높습니다.

## 색상이나 스타일 수정도 코드 한 줄로

코드 기반 제작의 장점은 수정이 빠르다는 점입니다.

예를 들어 영상 전체 색상을 바꾸고 싶다면 디자인 변수를 수정한 뒤 다시 렌더링하면 됩니다.

전통적인 영상 편집에서는 여러 레이어를 직접 수정해야 할 수 있지만, 코드 기반 작업에서는 스타일 값을 한곳에서 관리할 수 있습니다.

## 준비물

영상 설명에 소개된 구성은 다음과 같습니다.

- Claude Code
- HyperFrames Skill

설치 예시는 다음과 같이 소개됩니다.

`npx skills add heygen-com/hyperframes`

중요한 점은 일반 Claude 앱이 아니라 **Claude Code 환경에서 실행해야 한다는 것**입니다.

## 어떤 작업에 활용할 수 있을까?

이 방식은 다음과 같은 영상 제작에 특히 적합합니다.

- 모션그래픽
- 설명형 영상
- 데이터 시각화 영상
- 반복 제작되는 템플릿 영상
- 브랜드 컬러가 자주 바뀌는 영상
- 동일한 형식으로 여러 버전을 만들어야 하는 콘텐츠

## 핵심은 ‘영상 생성’보다 ‘영상 코드 생성’

이 사례의 핵심은 AI가 최종 영상을 직접 픽셀 단위로 생성하는 것이 아니라, **영상의 구조와 애니메이션을 코드로 작성한다는 점**입니다.

구조를 정리하면 다음과 같습니다.

**대본·오디오 입력 → Claude Code가 영상 코드 작성 → HyperFrames가 렌더링 → 수정 시 코드만 변경 → 동일한 결과 재생성**

AI 영상 제작에서도 이미지 생성 모델뿐 아니라 **코드 기반 모션그래픽 자동화**가 하나의 중요한 제작 방식으로 자리 잡고 있다는 점을 보여주는 사례입니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-10-13T16:27:08+09:00</dc:date>
</item>


<item>
<title>Claude로 만든 사이트 디자인 살리는 무료 도구 5개</title>
<link>https://ai.23yellow.com/ai_skill_design/claude%EB%A1%9C-%EB%A7%8C%EB%93%A0-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%82%B4%EB%A6%AC%EB%8A%94-%EB%AC%B4%EB%A3%8C-%EB%8F%84%EA%B5%AC-5%EA%B0%9C/</link>
<description><![CDATA[
나민수 AI의 쇼츠 **「클로드로 만든 사이트 디자인 살리는 무료 도구 5개」**에서는 Claude로 만든 웹사이트가 비슷한 레이아웃과 스타일로 반복되는 문제를 줄이기 위해 사용할 수 있는 디자인 도구 5가지를 소개합니다.

## 1. awesome-design-md

Apple, Stripe, Notion 같은 서비스의 디자인 규칙을 참고할 수 있도록 정리된 디자인 자료입니다.

프로젝트에 원하는 스타일의 파일을 넣고 Claude에게 해당 디자인 규칙을 따라 작업하도록 지시하는 방식으로 활용합니다.

핵심은 단순히 “예쁘게 만들어줘”라고 요청하는 것이 아니라, **명확한 디자인 레퍼런스와 규칙을 프로젝트 컨텍스트로 제공하는 것**입니다.

## 2. taste

Claude가 자주 생성하는 무난하고 비슷한 레이아웃을 피하도록 도와주는 디자인 규칙입니다.

AI가 기본적으로 선택하는 안전한 레이아웃 대신, 조금 더 명확한 디자인 방향과 개성을 유지하도록 가이드하는 역할을 합니다.

## 3. impeccable

AI가 만든 화면에서 자주 보이는 전형적인 스타일을 다듬는 데 사용하는 도구로 소개됩니다.

영상에서는 다음과 같은 요소를 개선하는 용도로 설명합니다.

- 흔한 AI 스타일의 그라데이션
- 반복적으로 사용되는 폰트
- 밋밋한 레이아웃
- 디테일이 부족한 UI

특히 로컬에서 실행 중인 사이트를 브라우저로 확인하면서 디자인을 직접 수정하는 흐름이 장점입니다.

## 4. UI UX Pro Max

웹과 앱 UI에서 자주 사용하는 디자인 패턴을 참고할 수 있는 도구입니다.

화면을 만들 때 다음과 같은 질문에 활용할 수 있습니다.

- 이 기능은 화면 어디에 배치해야 하는가?
- 어떤 컴포넌트가 적절한가?
- 모바일과 웹에서 어떤 패턴을 써야 하는가?
- 사용자가 자연스럽게 행동하도록 어떻게 구성할 것인가?

즉, 화면을 단순히 꾸미는 것보다 **UI 구조와 UX 패턴을 설계하는 데 도움을 주는 도구**입니다.

## 5. img2threejs

이미지 한 장을 기반으로 Claude가 Three.js 코드를 생성해 3D 형태로 재구성하도록 돕는 도구입니다.

영상에서는 자전거 사진을 입력해 사용자가 마우스로 회전하며 볼 수 있는 3D 결과물로 만드는 사례를 소개합니다.

제품 소개 페이지, 인터랙티브 랜딩 페이지, 포트폴리오 등에 활용할 수 있습니다.

## 핵심은 AI에게 디자인 기준을 주는 것

이 5개 도구의 공통점은 Claude가 알아서 디자인하도록 맡기는 것이 아니라, **사용자가 디자인 기준과 규칙을 먼저 정해주는 것**입니다.

정리하면 다음과 같습니다.

- **awesome-design-md** → 디자인 레퍼런스와 스타일 규칙
- **taste** → 획일적인 레이아웃 방지
- **impeccable** → AI 특유의 UI 스타일 개선
- **UI UX Pro Max** → UI·UX 패턴 설계
- **img2threejs** → 이미지 기반 인터랙티브 3D 구현

AI 디자인 작업에서도 중요한 것은 모델에게 모든 결정을 맡기는 것이 아니라, **디자인 방향을 사람이 정하고 AI는 그 기준에 맞춰 실행하도록 만드는 것**입니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-10-01T18:50:10+09:00</dc:date>
</item>


<item>
<title>바이브 모션디자인 시대 — GPT-6 Astra로 After Effects 자동화하기</title>
<link>https://ai.23yellow.com/ai_skill_design/%EB%B0%94%EC%9D%B4%EB%B8%8C-%EB%AA%A8%EC%85%98%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EB%8C%80-gpt-6-astra%EB%A1%9C-after-effects/</link>
<description><![CDATA[
코드깎는노인 채널의 **「이제는 바이브 모션디자인의 시대 | GPT-6 아스트라 X 힉스필드」** 영상에서는 **GPT-6 Astra와 Higgsfield After Effects 플러그인·MCP를 연결해 자연어로 After Effects를 조작하는 방법**을 소개합니다.

## ChatGPT가 After Effects를 직접 다루는 구조

사용자가 After Effects 기능을 직접 익히지 않아도, ChatGPT에 원하는 결과를 설명하면 AI가 Higgsfield를 통해 After Effects를 조작하도록 만드는 것이 핵심입니다.

**사용자 요청 → GPT-6 Astra → Higgsfield 플러그인/MCP → After Effects 실행 및 편집**

## 설치와 연결 과정

영상에서는 다음 구성 요소를 준비합니다.

- Adobe After Effects
- ChatGPT 데스크톱 앱
- Higgsfield 플러그인
- Node.js
- After Effects MCP

연결이 완료되면 ChatGPT에서 After Effects 도구를 지정한 뒤 자연어로 작업을 요청할 수 있습니다.

## 자연어로 수정

유튜브 채널 로고 이미지를 이용해 인트로 모션을 제작하고, “글씨 크기를 두 배로 키워줘”, “로고와 글씨 사이 간격을 더 벌려줘”처럼 자연어로 수정 지시를 이어갈 수 있습니다.

## 효과음과 리소스 생성

영상에서는 코드 실행으로 간단한 효과음을 직접 생성하고, 필요할 경우 Higgsfield의 이미지·영상 생성 기능을 활용해 모션그래픽에 사용할 리소스도 제작합니다.

## 정보 전달형 모션그래픽에 유용

After Effects 기반 워크플로우는 텍스트, 도형, 레이어, 애니메이션을 실제 편집 도구에서 다루기 때문에 유튜브 인트로, 키네틱 타이포그래피, 브랜드 모션그래픽, 제품 홍보 영상 등에 특히 유용합니다.

반복 가능한 작업 구조는 다음과 같습니다.

**자연어 요구사항 입력 → 디자인 기획 → 필요한 리소스 생성 → After Effects 프로젝트 생성/수정 → 모션·사운드 적용 → 반복 피드백 → 최종 결과물 완성**]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-09-27T01:42:45+09:00</dc:date>
</item>


<item>
<title>AI로 2D 모션그래픽 만들기 — 프롬프트 설계·레퍼런스 분석·스토리보드 실전 가이드</title>
<link>https://ai.23yellow.com/ai_skill_design/ai%EB%A1%9C-2d-%EB%AA%A8%EC%85%98%EA%B7%B8%EB%9E%98%ED%94%BD-%EB%A7%8C%EB%93%A4%EA%B8%B0-%ED%94%84%EB%A1%AC%ED%94%84%ED%8A%B8-%EC%84%A4%EA%B3%84%EB%A0%88%ED%8D%BC%EB%9F%B0%EC%8A%A4-%EB%B6%84%EC%84%9D%EC%8A%A4%ED%86%A0%EB%A6%AC%EB%B3%B4%EB%93%9C/</link>
<description><![CDATA[
디자인하는AI 채널의 **「이런 2D 모션그래픽, 이제 AI로 직접 만드세요 | AI 모션그래픽, 원하는 느낌으로 만드는 방법 (feat. Newtake)」** 영상에서는 AI를 활용해 **키네틱 타이포그래피, 캐릭터 애니메이션, 제품 홍보 영상**을 만드는 전체 워크플로우를 소개합니다.

## 핵심은 ‘촬영 지시서’처럼 프롬프트를 설계하는 것

영상에서는 단순히 ‘모션그래픽을 만들어줘’라고 요청하는 방식보다, 실제 촬영 지시서처럼 영상의 구성과 움직임을 구체적으로 정의하는 것이 중요하다고 설명합니다.

프롬프트에는 전체 영상 길이, 샷 구성, 타이포그래피, 장면 전환, 컬러 팔레트, 카메라 움직임, 배경음악과 효과음, 가드레일 등을 포함합니다.

## 방법 1 — 가이드 프롬프트로 영상 설계

모션그래픽 전문 지식이 부족한 경우에는 미리 만들어 둔 가이드 프롬프트를 AI에 제공하고, 원하는 주제만 입력해 영상 생성용 프롬프트를 작성하도록 할 수 있습니다.

## 방법 2 — 레퍼런스 영상을 분석해 프롬프트로 변환

마음에 드는 모션그래픽이 있다면 해당 영상을 레퍼런스로 분석해 화면 구성, 컬러, 타이포그래피, 텍스트 움직임, 장면 전환, 카메라 모션 등을 추출하고 영상 생성 프롬프트로 변환할 수 있습니다.

## Newtake의 스마트 분석 활용

Newtake의 스마트 분석 기능을 이용해 레퍼런스 영상의 **Shot과 Motion**을 자동 분석하고, 복잡한 텍스트 트레일이나 반복 모션을 영상 생성 단계의 레퍼런스로 활용합니다.

## 캐릭터와 제품의 일관성 유지

캐릭터와 제품 영상에서는 프롬프트 생성 단계와 실제 영상 생성 단계 모두에서 레퍼런스 이미지를 제공해 형태, 색상, 얼굴, 로고, 패키지 디자인 등의 일관성을 유지합니다.

## 25그리드 스토리보드

제품 이미지와 프롬프트를 이용해 하나의 이미지 안에 여러 장면을 연속으로 생성하면 각 장면의 구도, 제품 등장 방식, 전체 영상 흐름, 카메라 방향, 스토리 전개를 미리 확인할 수 있습니다.

구조를 정리하면 다음과 같습니다.

**주제 입력 → 프롬프트 설계 → 레퍼런스 분석 → 스타일·캐릭터·제품 일관성 유지 → 스토리보드 생성 → 영상 생성**]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-09-27T01:42:43+09:00</dc:date>
</item>


<item>
<title>Claude Opus 5.5로 Vox 스타일 모션그래픽 만들기 — Higgsfield MCP 실전 워크플로우</title>
<link>https://ai.23yellow.com/ai_skill_design/claude-opus-55%EB%A1%9C-vox-%EC%8A%A4%ED%83%80%EC%9D%BC-%EB%AA%A8%EC%85%98%EA%B7%B8%EB%9E%98%ED%94%BD-%EB%A7%8C%EB%93%A4%EA%B8%B0/</link>
<description><![CDATA[
원카AI Wonka 채널의 **「프롬프트 한 줄로 고퀄 Vox 스타일 모션 그래픽 만드는 법 (ft. 클로드 오푸스 5.5, 힉스필드)」** 영상에서는 **Claude Opus 5.5와 Higgsfield MCP를 연결해 Vox 스타일의 모션그래픽을 만드는 실전 제작 흐름**을 보여줍니다.

## 준비물은 Claude Opus 5.5와 Higgsfield MCP

영상에서는 Claude Code 환경에서 Opus 5.5를 사용하고, 여기에 Higgsfield MCP를 연결해 이미지와 영상 생성 기능을 외부 도구처럼 호출합니다.

이렇게 연결하면 사용자가 직접 이미지 생성 사이트를 오가거나, 이미지 프롬프트를 하나씩 설계하지 않아도 Claude가 필요한 이미지와 장면을 판단해 Higgsfield를 호출할 수 있습니다.

## 레퍼런스 이미지 한 장으로 스타일 유지

첫 번째 예제에서는 Pinterest에서 찾은 컬러드 페이퍼 아트 스타일의 이미지를 레퍼런스로 사용합니다.

사용자는 카약을 타는 사람의 노 젓는 동작을 여러 프레임으로 나눠 종이 애니메이션처럼 보이게 만들어 달라고 요청하고, Claude가 필요한 배경과 캐릭터 프레임을 자동으로 설계합니다.

## 핵심은 이미지 생성보다 ‘작업 분해’

Claude가 다음 작업을 판단합니다.

- 필요한 이미지 결정
- 배경과 캐릭터 분리 생성
- 캐릭터 일관성 유지
- 움직임을 여러 프레임으로 분해
- 장면별 모션과 카메라 구성 설계
- 최종 영상을 Python 기반으로 조합

즉, **프롬프트 → 계획 → 이미지 생성 → 장면 구성 → 영상화**가 하나의 반복 가능한 제작 절차로 연결됩니다.

## Vox 스타일 영상 제작

영상 후반에는 케이블카, 콜럼버스 항해, 달 착륙, 포르쉐 박스터 등을 주제로 Vox 스타일 인트로를 제작하는 사례를 보여줍니다.

프롬프트에는 컬러 팔레트, 강조색, 찢어진 종이 질감, 배경 제거, 카메라 앵글, 원근감, 모션 규칙 등을 포함합니다.

## 영상 모델 없이도 가능한 모션그래픽

모든 장면을 전용 영상 생성 모델로 만들지 않고, 이미지 생성 결과물을 Python으로 움직여 모션을 구성하는 방식을 활용합니다.

간단한 이동, 확대·축소, 레이어 이동, 원근감, 반복 프레임만으로도 상당히 완성도 높은 모션그래픽을 만들 수 있습니다.

## 나레이션과 배경음악까지 연결

최종 단계에서는 AI가 만든 영상에 나레이션과 배경음악을 추가합니다.

이 영상의 핵심은 **좋은 프롬프트 하나보다, 반복 가능한 제작 절차와 도구 사용 규칙을 AI에게 넘기는 것**입니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-09-27T01:42:41+09:00</dc:date>
</item>


<item>
<title>GPT-6 아스트라⚡AI 영상 제작 올인원 툴 등장! 블렌더 + MCP 조합 미쳤다!</title>
<link>https://ai.23yellow.com/ai_skill_design/gpt-6-%EC%95%84%EC%8A%A4%ED%8A%B8%EB%9D%BCai-%EC%98%81%EC%83%81-%EC%A0%9C%EC%9E%91-%EC%98%AC%EC%9D%B8%EC%9B%90-%ED%88%B4-%EB%93%B1%EC%9E%A5-%EB%B8%94%EB%A0%8C%EB%8D%94/</link>
<description><![CDATA[
GPT-6 Astra와 Higgsfield MCP·Blender Bridge를 연결해 90\~120초 AI 애니메이션을 기획부터 프리비즈, 영상 생성까지 하나의 작업 흐름으로 만드는 과정을 소개합니다.
주요 포인트
GPT-6 Astra 안에서 시나리오, 샷리스트, 프롬프트, 캐릭터 시트를 함께 설계하는 방법
Blender 프리비즈로 카메라 위치·무빙·컷 타이밍을 먼저 확인해 생성 실패를 줄이는 과정
프리비즈는 ‘어디서’, 시트는 ‘무엇을’, 프롬프트는 ‘어떻게 움직이는지’로 역할을 분리하는 핵심 규칙
480p로 먼저 검수한 뒤 720p와 업스케일로 마무리해 크레딧을 아끼는 방법
Higgsfield MCP와 Blender Bridge 설치·연결 및 문제 해결 체크리스트
실제 생성 비용: 480p 158초 395크레딧, 720p 110초 715크레딧, 총 1,110크레딧(약 71,000원)
📎 관련 링크:
https://higgsfield.ai/s/gpt-6-astra-yt-aiastra0-FujBsv
<div class="content_move">[이 게시물은 최고관리자님에 의해 2026-09-20 11:02:07 AI Agent에서 이동 됨]</div>]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-09-15T04:34:07+09:00</dc:date>
</item>


<item>
<title>GPT-6 아스트라 x 블렌더⚡AI 영상 크레딧 90% 절약하는 미친 무료 조합</title>
<link>https://ai.23yellow.com/ai_skill_design/gpt-6-%EC%95%84%EC%8A%A4%ED%8A%B8%EB%9D%BC-x-%EB%B8%94%EB%A0%8C%EB%8D%94ai-%EC%98%81%EC%83%81-%ED%81%AC%EB%A0%88%EB%94%A7-90-%EC%A0%88%EC%95%BD%ED%95%98%EB%8A%94/</link>
<description><![CDATA[
<span style="font-size:14px;color:#181818;">⚡아스트라 X 블렌더 사용해보기 \| 힉스필드 </span>
<span style="font-size:14px;color:#181818;">https://higgsfield.ai/ko/plugins/blender?utm\_source=yt&amp;utm\_medium=social&amp;utm\_category=gr&amp;utm\_campaign=Higgsfield\_x\_Blender\_YT&amp;utm\_creator=aiastra0&amp;utm\_content\_type=de&amp;utm\_post=kCkjUz&amp;invite\_code=higgsfield-x-blender-yt-aiastra0-kCkjUz</span>

***

<span style="font-size:14px;color:#181818;">드디어 공개된 GPT-6 아스트라</span>
<span style="font-size:14px;color:#181818;">이번 영상에서는 프롬프트로만으로 되지않던 모든 AI 영상 생성</span>
<span style="font-size:14px;color:#181818;">아스트라와 블렌더 조합으로 완벽하게 컨트롤 할 수 있는</span>
<span style="font-size:14px;color:#181818;">방법을 공개합니다.</span>
<span style="font-size:14px;color:#181818;">00:00 인트로</span>
<span style="font-size:14px;color:#181818;">01:30 기존 프롬프트 방식의 문제점</span>
<span style="font-size:14px;color:#181818;">02:35 블렌더가 필수인 이유</span>
<span style="font-size:14px;color:#181818;">04:20 설치 프로그램 리스트</span>
<span style="font-size:14px;color:#181818;">04:55 블렌더 설치방법</span>
<span style="font-size:14px;color:#181818;">05:16 블렌더 힉스필드 플러그인 설치방법</span>
<span style="font-size:14px;color:#181818;">05:55 힉스필드 MCP 설치방법</span>
<span style="font-size:14px;color:#181818;">06:23 힉스필드 블렌더 브릿지 MCP 설치방법</span>
<span style="font-size:14px;color:#181818;">07:45 프리비즈 생성방법</span>
<span style="font-size:14px;color:#181818;">09:13 프리비즈 발주규칙</span>
<span style="font-size:14px;color:#181818;">10:37 샘플영상1</span>
<span style="font-size:14px;color:#181818;">11:03 샘플영상2</span>
<span style="font-size:14px;color:#181818;">11:30 샘플영상3</span>
<span style="font-size:14px;color:#181818;">12:03 샘플영상4</span>
<span style="font-size:14px;color:#181818;">13:00 샘플영상5</span>
<span style="font-size:14px;color:#181818;">13:30 힉스필드 블렌더 추가기능</span>
<span style="font-size:14px;color:#181818;">14:13 정리</span>

<span style="font-size:14px;color:#181818;">📌프롬프트 / 스킬 공유 쓰레드</span>
<span style="font-size:14px;color:#181818;">https://www.threads.com/@aiastra0</span>

<span style="font-size:14px;color:#181818;">💻프롬프트 / 스킬 / AI 정보 공유방(공지사항 확인 비밀번호 0628)</span>
<span style="font-size:14px;color:#181818;">https://open.kakao.com/o/g0YXy8ni</span>
<span style="font-size:14px;color:#181818;">https://open.kakao.com/o/g0NfmWfi</span>

<span style="font-size:14px;color:#181818;">⭐아스트라 홈페이지</span>
<span style="font-size:14px;color:#181818;">https://buly.kr/6Bz0bLM</span>

<span style="font-size:14px;color:#181818;">🎥아스트라 스튜디오(AI 필름)</span>
<span style="font-size:14px;color:#181818;"> / @astrastudiosx </span>
<span style="font-size:14px;color:#181818;">문의 : birthofthoughtkr@gmail.com</span>]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-09-20T10:57:50+09:00</dc:date>
</item>


<item>
<title>AI 이미지 생성의 한계가 또 한 번 무너졌습니다 | GPT 이미지 2.5</title>
<link>https://ai.23yellow.com/ai_skill_design/ai-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%83%9D%EC%84%B1%EC%9D%98-%ED%95%9C%EA%B3%84%EA%B0%80-%EB%98%90-%ED%95%9C-%EB%B2%88-%EB%AC%B4%EB%84%88%EC%A1%8C%EC%8A%B5%EB%8B%88%EB%8B%A4/</link>
<description><![CDATA[
<span style="font-size:14px;color:#181818;">GPT 이미지가 2.5로 업그레이드되며 다시 한 번 큰 변화를 보여주고 있습니다. </span>
<span style="font-size:14px;color:#181818;">AI 이미지 생성이 어디까지 발전했는지, 이번 업데이트가 만들어낸 변화를 살펴봅니다.</span>]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-09-12T01:32:17+09:00</dc:date>
</item>


<item>
<title>클로드 코드 /design 업데이트! 클릭으로 레이아웃 손쉽게 수정.</title>
<link>https://ai.23yellow.com/ai_skill_design/%ED%81%B4%EB%A1%9C%EB%93%9C-%EC%BD%94%EB%93%9C-design-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%ED%81%B4%EB%A6%AD%EC%9C%BC%EB%A1%9C-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EC%86%90%EC%89%BD%EA%B2%8C-%EC%88%98%EC%A0%95/</link>
<description><![CDATA[
클로드 코드에 지난주(8월 셋째 주) 리서치 프리뷰로 들어온 /design 명령을 끝까지 검증했습니다.

**이 영상에서 확인한 것**
· /design 한 줄 → 앱 화면·포스터 시안을 그려서 편집 가능한 캔버스 링크로 발행
· 링크를 연 사람은 누구든 클릭으로 색·문구를 직접 수정, Save 하면 새 버전 저장
· 수정 내역을 Claude가 diff로 회수 — 어떤 색을 어떤 색으로 바꿨는지 16진수 값까지 정확히 파악
· 실제로 쓰는 영상 컴포넌트로 실험: 캔버스에서 고친 값이 진짜 코드에 반영되고 다음 렌더부터 적용

**사용 조건**
· 유료 플랜 전용 (Pro · Max · Team — Free 불가, 구독 별도)
· 리서치 프리뷰 — 웹 버전(claude.ai/design)보다 기능이 적음]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-09-03T00:42:11+09:00</dc:date>
</item>


<item>
<title>클로드 디자인 + 코드 최강 조합으로 움직이는 고퀄 홈페이지 만드는법 | AI 웹사이트 제작</title>
<link>https://ai.23yellow.com/ai_skill_design/%ED%81%B4%EB%A1%9C%EB%93%9C-%EB%94%94%EC%9E%90%EC%9D%B8-%EC%BD%94%EB%93%9C-%EC%B5%9C%EA%B0%95-%EC%A1%B0%ED%95%A9%EC%9C%BC%EB%A1%9C-%EC%9B%80%EC%A7%81%EC%9D%B4%EB%8A%94-%EA%B3%A0%ED%80%84/</link>
<description><![CDATA[
코딩 한 줄도 안 했습니다. 클로드로 30분 만에 홈페이지 만드는 법
개발자 없어도 됩니다. 디자인 몰라도 됩니다.
클로드 두 개만 있으면 애니메이션까지 들어간 홈페이지를 완성할 수 있어요.

▶ 이 영상에서 배우는 것
핀터레스트 레퍼런스로 AI 디자인 퀄리티 확 높이는 법
클로드 디자인으로 예쁜 사이트 뽑는 법
클로드 코드로 진짜 작동하는 홈페이지 만드는 법
토큰 아끼면서 디자인 무한 수정하는 법 (트윅스 활용)
애니메이션까지 한 번에 넣는 법
앞에서 만든 디자인이 다음 단계 재료가 되는 구조예요.
따로따로 만드는 게 아니라 하나의 흐름으로 완성하는 겁니다.

[<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(62,166,255);">#클로드</span>](https://www.youtube.com/hashtag/%ED%81%B4%EB%A1%9C%EB%93%9C)<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(255,255,255);"> </span>[<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(62,166,255);">#클로드디자인</span>](https://www.youtube.com/hashtag/%ED%81%B4%EB%A1%9C%EB%93%9C%EB%94%94%EC%9E%90%EC%9D%B8)<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(255,255,255);"> </span>[<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(62,166,255);">#클로드코드</span>](https://www.youtube.com/hashtag/%ED%81%B4%EB%A1%9C%EB%93%9C%EC%BD%94%EB%93%9C)<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(255,255,255);"> </span>[<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(62,166,255);">#AI홈페이지</span>](https://www.youtube.com/hashtag/ai%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80)<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(255,255,255);"> </span>[<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(62,166,255);">#코딩없이홈페이지</span>](https://www.youtube.com/hashtag/%EC%BD%94%EB%94%A9%EC%97%86%EC%9D%B4%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80)<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(255,255,255);"> </span>[<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(62,166,255);">#AI사이트제작</span>](https://www.youtube.com/hashtag/ai%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%A0%9C%EC%9E%91)<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(255,255,255);"> </span>[<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(62,166,255);">#홍아린</span>](https://www.youtube.com/hashtag/%ED%99%8D%EC%95%84%EB%A6%B0)<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(255,255,255);"> </span>[<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(62,166,255);">#AI활용법</span>](https://www.youtube.com/hashtag/ai%ED%99%9C%EC%9A%A9%EB%B2%95)<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(255,255,255);"> </span>[<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(62,166,255);">#1인사업자AI</span>](https://www.youtube.com/hashtag/1%EC%9D%B8%EC%82%AC%EC%97%85%EC%9E%90ai)<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(255,255,255);"> </span>[<span class="ytAttributedStringLinkInheritColor" style="margin:0px;padding:0px;border:0px;background:rgba(255,255,255,0.1);font-family:Roboto, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:pre-wrap;color:rgb(62,166,255);">#무료홈페이지제작</span>](https://www.youtube.com/hashtag/%EB%AC%B4%EB%A3%8C%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80%EC%A0%9C%EC%9E%91)]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-09-03T00:37:56+09:00</dc:date>
</item>


<item>
<title>클로드 코드로 10분 만에 역대급 디자인의 웹사이트 만드는법 (feat. Variant)</title>
<link>https://ai.23yellow.com/ai_skill_design/%ED%81%B4%EB%A1%9C%EB%93%9C-%EC%BD%94%EB%93%9C%EB%A1%9C-10%EB%B6%84-%EB%A7%8C%EC%97%90-%EC%97%AD%EB%8C%80%EA%B8%89-%EB%94%94%EC%9E%90%EC%9D%B8%EC%9D%98-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%9C%EB%8A%94%EB%B2%95/</link>
<description><![CDATA[
🚀 "텐빌더의 일잘러를 위한 클로드 코드 입문 바이블" 강의
[https://bit.ly/Claudebible30_open](https://bit.ly/Claudebible30_open)

👇 현직 CTO의 AI 실전 활용법을 계속 받아보고 싶다면
뉴스레터 (무료 구독): [https://maily.so/tenbuilder](https://maily.so/tenbuilder)

클로드 코드(Claude Code)로 무작정 하다보면 대부분 전형적인 AI 기본값이 나옵니다.
코드부터 치지 않았습니다. 카피를 먼저 잡고, Variant로 디자인을 따로 시키고, 구현은 마지막에 했습니다.
같은 AI를 써도 워크플로우에 따라 결과가 달라지는 3단계를 처음부터 끝까지 보여드립니다.]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-09-03T00:36:27+09:00</dc:date>
</item>


<item>
<title>요즘 클로드 디자인에 미쳐있는 이유</title>
<link>https://ai.23yellow.com/ai_skill_design/%EC%9A%94%EC%A6%98-%ED%81%B4%EB%A1%9C%EB%93%9C-%EB%94%94%EC%9E%90%EC%9D%B8%EC%97%90-%EB%AF%B8%EC%B3%90%EC%9E%88%EB%8A%94-%EC%9D%B4%EC%9C%A0/</link>
<description><![CDATA[
클로드 디자인으로 모바일 화면 7장, 1시간 만에 만들었습니다. 피그마에서는 선 하나 안 그렸습니다.
예전 같으면 2주 걸리고, 디자이너 인건비만 400만 원부터 시작하던 작업이죠.
9년 동안 UX 디자인 컨설팅 회사를 운영하면서 포토샵으로 한 땀 한 땀 그리던 시절부터 피그마 컴포넌트로 디자인 시스템을 세우던 시절까지 다 거쳤습니다.
그런데 지금은 그 과정을 이렇게 안 합니다.
다만 "예쁜 앱 만들어줘"라고 던진다고 좋은 디자인이 나오지는 않습니다.
핵심은 화면을 하나씩 고치는 게 아니라, 디자인의 규칙 자체를 먼저 바꾸는 겁니다.
컬러, 타이포그래피, 버튼, 카드, 여백, 모서리까지 규칙을 먼저 정하고
그 규칙으로 화면을 만들게 하면, AI가 화면마다 제각각 디자인하는 문제가 크게 줄어듭니다.
이 영상에서는 피그마 커뮤니티의 디자인 시스템을 가져와 클로드 디자인에서 커스터마이징하고,
PRD와 실제 운영 중인 PC 서비스 화면을 넣어 모바일 주요 화면까지 만드는 전 과정을 보여드립니다.
AI로 디자인했다는 걸 아무도 모를 정도의 퀄리티를 보여드릴 게요
✅ 이런 분들에게 추천합니다
✔ AI로 UI를 만들었는데 결과가 비슷비슷해서 고민인 분
✔ Claude를 UX/UI 디자인 실무에 활용하고 싶은 분
✔ 디자인 시스템을 처음부터 만드는 것이 부담스러운 기획자·디자이너
✔ Figma 작업 시간을 줄이고 싶은 분
✔ 서비스 기획부터 UI 제작까지 AI와 함께 진행하고 싶은 분
✔ AI 시대에 UX 디자이너의 역할이 어떻게 달라질지 궁금한 분
■ 오늘의 작업 순서
Plan &amp; PRD → 디자인 시스템 레퍼런스 → 스타일 레퍼런스 이미지 → 클로드 디자인 → 모바일 UI
■ AI와 일할 때 지키는 프롬프트 원칙 3가지
1\. 맥락과 목적을 먼저 설명한다
2\. 원하는 방향을 시각 레퍼런스로 보여준다 \(구체적일수록 좋다\)
3\. 한 번에 하나씩 시킨다 — 연관된 화면 묶음 단위로

<span style="font-size:14px;color:#181818;">■ 이 영상에서 쓴 자료 디자인 시스템 레퍼런스: [</span>[<span style="font-size:14px;color:#181818;">https://www.figma.com/design/NFv4XcFd...</span>](https://www.youtube.com/redirect?event=video_description&amp;redir_token=QUM4Zm9rUnFrbEdvaWJaaWNhN2tMdVh4dmozNXxBTl9pYzRmQVZtME9xendReWZnajFvLXBNUVdSVTVYWDY3V0tiOTNrQm45U2ZoaUtkazU1enVGUFRWZF9HaGd3VklyMl9uWEx2MXFkSVVvWk9zcG1McGNrNm9pS1dDZEpzZFUy&amp;q=https%3A%2F%2Fwww.figma.com%2Fdesign%2FNFv4XcFdOcuFBHafr6f7qq%2FiOS-and-iPadOS-26--Community-%3Fnode-id%3D553-22762%26t%3D0HzAbARTLLJDxfow-1&amp;v=9RUcYdww138)<span style="font-size:14px;color:#181818;">]</span>

<br />
#티안나는AI디자인 #designsystems #ClaudeDesign]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-09-03T00:25:22+09:00</dc:date>
</item>


<item>
<title>상세페이지 만들기? 챗GPT 코덱스 Ai 자동화 제작 만드는 방법 | 기획 디자인 이미지 Codex 스킬 제공</title>
<link>https://ai.23yellow.com/ai_skill_design/%EC%83%81%EC%84%B8%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%B1%97gpt-%EC%BD%94%EB%8D%B1%EC%8A%A4-ai-%EC%9E%90%EB%8F%99%ED%99%94-%EC%A0%9C%EC%9E%91-%EB%A7%8C%EB%93%9C%EB%8A%94/</link>
<description><![CDATA[
오늘 영상에서는 ChatGPT 유료 구독만으로 상세페이지 이미지를 자동제작하는 방법,
그것도 Codex 스킬 하나로 초보도 따라할 수 있는 상세페이지 자동화를 보여드립니다.
━━━━━━━━━━━━━━━━━━━━━━━━
📌 이 영상에서 다루는 내용
━━━━━━━━━━━━━━━━━━━━━━━━
00:00 인트로 — 기존 상세페이지 외주 비용 소개
01:19 Codex란? 
02:52 Codex 4가지 장점 
04:38 3단계 설치 가이드
05:41 실제 시연 — 토마토 상세페이지 12장 자동제작
07:07 스킬 설치 방법
08:15 Codex 상세페이지 스킬 작동 흐름 설명
11:28 다양한 상품 적용 사례 (치약, 수박 등)
13:53 스킬 커스터마이징 방법 
15:27 마무리 &amp; 커뮤니티 초대
━━━━━━━━━━━━━━━━━━━━━━━━
🎯 이런 분에게 추천합니다
━━━━━━━━━━━━━━━━━━━━━━━━
• 이커머스/온라인판매 상세페이지 제작이 부담되는 분
• 포토샵, 디자이너 없이 고퀄리티 상세페이지를 만들고 싶은 분
• ChatGPT/Claude 유료 구독 중인데 활용도가 낮다고 느끼는 분
• 상세페이지 외주 비용(30\~80만원)을 절감하고 싶은 분
━━━━━━━━━━━━━━━━━━━━━━━━
🛠 주요 도구
━━━━━━━━━━━━━━━━━━━━━━━━
• Codex (OpenAI) — https://openai.com/codex/
━━━━━━━━━━━━━━━━━━━━━━━━
📚 가이드북 &amp; 커뮤니티
📌 AI싱크클럽 카카오톡 단톡방 (정보공유)
 → https://litt.ly/aisyncclub
📌 상세페이지 자동화 코덱스 스킬 받기 (유튜브 자료실)
 → https://litt.ly/aisyncclub
━━━━━━━━━━━━━━━━━━━━━━━
📢 이 영상이 도움이 되셨다면
👍 좋아요 꾹! (알고리즘이 더 많은 분들께 추천합니다)
💬 댓글로 Codex 스킬 써보고 싶은 작업 공유해주세요!
🔔 구독 + 알림 설정으로 다음 영상 놓치지 마세요!
🔗 AI싱크클럽 단톡방 참여해서 함께 성장해요!]]></description>
<dc:creator>최고관리자</dc:creator>
<dc:date>2026-09-01T23:09:51+09:00</dc:date>
</item>

</channel>
</rss>
