project.solv

Setup 공통 전제

환경 세팅

S.1

Claude Code 설치

웹페이지, 자동화, 제품 비주얼처럼 실제 결과물을 만들 때는 코드 기반 AI가 필요합니다. 수업에서는 Claude Code를 기본 도구로 씁니다.

Claude Code

Anthropic이 만든 AI 코딩 도구. 자연어로 지시하면 코드 작성·수정·실행을 대신 처리합니다.

왜 작업 구조를 만들고 웹페이지까지 완성하기 좋습니다. 다른 도구도 비교하지만, 기본은 Claude Code입니다.

배우는 것 설치, 기본 사용법, Figma·Blender·GitHub와 연결하는 흐름.

수업은 IDE 확장과 Desktop App을 중심으로 진행합니다. 자동화가 필요할 때는 CLI도 함께 씁니다.

Desktop App

Anthropic의 데스크톱 앱. 여러 작업을 화면에서 나눠 관리합니다.

CLI

CLI (터미널)

터미널에서 코드 작성, git 작업, 반복 작업을 처리합니다. 자동화에 필요합니다.

IDE Extension

IDE 확장

VS Code, Cursor, JetBrains 등에서 씁니다. 코드를 보며 바로 수정합니다.

S.2

GitHub 세팅

GitHub는 코드와 작업 이력을 보관하는 기본 저장소입니다. 어느 모듈을 하든 먼저 계정을 만들고 연결합니다.

GitHub

코드 저장소를 만들고 작업 이력을 관리하는 서비스. 개인 프로젝트는 무료 플랜으로 시작할 수 있습니다.

왜 Claude Code가 만든 코드를 저장하고, 필요하면 GitHub Pages로 공개합니다.

배우는 것 계정 생성, 저장소 만들기, Claude Code와 연결하는 흐름.

툴 화면

S.3

기획·마케팅 세팅

기획과 마케팅도 같은 작업 환경에서 정리합니다. 아이디어, 기획서, 카피, 광고 소재를 한 흐름으로 만듭니다.

superpowers

아이디어를 기획과 실행 단계로 나눠주는 Claude Code 스킬 묶음.

쓰임 아이디어를 설계와 실행 계획으로 정리합니다.

gstack

디자인, 리뷰, 발행 작업에 쓰는 실무 스택.

쓰임 기획서, 랜딩, 리포트의 톤을 맞춥니다.

Meta Ads MCP

Meta 광고 계정을 Claude Code에 연결하는 MCP.

쓰임 광고 데이터 확인과 소재·카피 초안을 함께 다룹니다.

Module A Claude Code · 생성형 이미지 툴 · Figma

브랜드 비주얼

A.1

무드보드와 컨셉 이미지

Figma 또는 Figma Weave 캔버스에 레퍼런스와 메모를 펼쳐두고 컨셉 이미지를 만듭니다. 여러 결과를 나란히 보고 필요한 방향만 남깁니다.

기본 세팅 — Claude Code로 브랜드 기준 만들기

먼저 브랜드 기준을 문서로 정리합니다. brand.md, voice.md, design.md를 준비하면 AI가 같은 기준으로 이미지를 만듭니다.

Figma / Figma Weave (캔버스)

Figma는 무드보드 캔버스로, Figma Weave는 같은 화면에서 이미지와 영상을 생성·편집하는 도구로 씁니다.

배우는 것 레퍼런스 정리, 노드 생성, 비교, 재생성 흐름.

Nano Banana

Google Gemini의 이미지 생성 기능. 빠른 시안과 일상적 톤의 이미지에 씁니다.

왜 여러 방향을 빠르게 비교할 때 좋습니다.

ChatGPT Images 2.0

ChatGPT 안에서 쓰는 이미지 생성 도구. 텍스트와 여러 장의 이미지 작업에 씁니다.

왜 문자가 들어간 이미지와 여러 장의 톤 맞춤에 씁니다.

Midjourney (옵션)

사진과 일러스트 스타일을 잡을 때 쓰는 이미지 생성 서비스.

왜 이미 쓰고 있다면 다른 도구와 결과를 비교합니다.

프롬프트도 구조로 관리합니다

브랜드 프로필을 읽고 피사체, 톤, 구도, 빛으로 나눠 프롬프트를 씁니다. 툴이 바뀌어도 같은 구조를 유지합니다.

프롬프트 스터디 · 무드보드 레퍼런스

Module B 3D AI · Blender

제품 형태 (3D)

B.1

제품 형태 잡기

AI로 기본 형태를 빠르게 만들고, Blender에서 필요한 부분을 다듬습니다. 직접 모델링할 부분과 AI로 줄일 부분을 나눕니다.

프로젝트 성격과 원하는 퀄리티에 따라 골라 씁니다.

Meshy

빠르게 기본 3D 형태를 만드는 범용 3D AI.

특징 텍스처와 리깅까지 한 브라우저에서 처리합니다.

Tripo

브라우저에서 쓰는 3D 생성 도구. 캐릭터와 게임 에셋에 자주 씁니다.

특징 캐릭터 형태와 간단한 리깅에 적합합니다.

Rodin

사실적인 텍스처와 고품질 렌더가 필요한 프로젝트에 씁니다.

특징 퀄리티가 중요할 때 후보로 둡니다.

브랜드 비주얼 산출물

Module C 이미지 · 영상 · 웹

산출물

C.1

이미지 마감

컨셉 이미지를 배경, 톤, 디테일에 맞춰 마감합니다. 필요한 컷을 고르고 영상 단계로 이어갑니다.

Figma Weave에서 모델을 바꿔가며 여러 버전을 비교합니다. 마스킹과 색 보정도 같은 캔버스에서 처리합니다.

사용 도구

프로젝트에 맞는 이미지 도구를 씁니다. 보통 이미지와 합성 지시를 함께 넣어 다듬습니다.

작업 중인 도구

Figma Weave Planner를 만들고 있습니다. 만들고 싶은 결과물을 한 문장으로 넣으면, 필요한 노드 체인과 프롬프트 초안, 참고 튜토리얼을 정리해 주는 수업용 도구입니다.

상태 수강생용 접근 코드와 함께 쓰는 내부 베타로 준비 중입니다. 공개 페이지에는 흐름만 먼저 보여줍니다.

Figma Weave Planner · 실제 사용 캡처 — 입력, 노드 체인, 마스크, 모델 비교

Figma Weave Planner — 목표와 접근 코드를 입력하는 화면

수업 결과물 · 실제 산출물

C.2

영상 작업

완성된 이미지를 짧은 영상으로 확장합니다. 3D 모델링 여부에 따라 경로를 나누고, 프로젝트에 맞는 도구를 선택합니다.

Kling

텍스트와 이미지로 영상을 만드는 도구.

특징 짧은 클립, 음성·효과음, 멀티샷 구성에 씁니다.

Higgsfield

여러 영상 AI 모델을 한 작업 공간에서 쓰는 플랫폼.

특징 카메라 움직임과 렌즈감을 조정할 때 씁니다.

Figma Weave

이미지와 영상 생성·편집을 한 캔버스에서 다루는 도구.

특징 여러 모델을 비교하고 마스킹·색 보정까지 이어갑니다.

수업 결과물 · 실제 영상 산출물

C.3

웹페이지 정리

결과물을 모아 포트폴리오나 제품 미리보기 페이지로 정리합니다. 정적 웹페이지로 만들고 링크로 공유합니다.

Claude Design

자연어로 화면 초안과 디자인 시스템을 만드는 AI 디자인 도구.

배우는 것 브랜드 컬러와 타이포그래피 기준으로 화면을 잡습니다.

Stitch

자연어 프롬프트로 UI 화면을 만드는 Google Labs 도구.

특징 빠른 화면 시안에 씁니다.

Antigravity

AI 에이전트 기반 코드 에디터.

왜 웹페이지 코드를 만들고 수정할 때 비교합니다.

Figma plugin

Figma 화면을 HTML로 옮길 때 쓰는 플러그인.

배우는 것 Figma 디자인을 정적 웹페이지로 옮기는 흐름.

GitHub Pages 배포

코드를 저장소에 올리고 Pages를 켜면 링크로 공개됩니다. git 작업은 Claude Code와 함께 처리합니다.

기말 프로젝트 웹페이지 — 실제 배포된 결과물