AI OpenCollege
시각 가이드북

AI OpenCollege 시각 가이드북

상단 메뉴에서 가이드를 선택하세요.
왼쪽 메뉴로 원하는 섹션을 바로 이동할 수 있습니다.

🔤
웹 용어 가이드
52개 기초 용어 · 실시간 데모
🎨
이미지 생성 가이드
SCSE 공식 · 스타일 · 빌더
✦
Claude Design
공식 가이드 기반 · 초보자용
AI OpenCollege · 바이브코딩 기초 참고자료

웹 용어 52가지를
눈으로 배운다

텍스트 설명이 아닌 실제로 동작하는 예제로 — Hero Section부터 Parallax까지 모든 기초 용어를 클릭하고 느끼며 이해합니다.

52개 용어 실시간 데모 Claude 프롬프트 클릭 인터랙션
🔍
//
레이아웃 구조
9개
🦸
Hero Section
// 히어로 섹션
레이아웃필수
웹페이지에서 가장 처음 보이는 메인 섹션. 방문자가 3초 안에 "이 사이트가 뭐하는 곳인지" 파악하는 공간. 헤드라인+서브+CTA 버튼이 핵심.
라이브 데모 — 부드럽게 위아래 움직임
제품가격팀
🎉 New v2.0 출시
더 빠르게.
더 스마트하게.
AI로 업무 생산성을 3배 높이는 유일한 툴
무료 시작하기
데모 보기
// "Hero Section 만들어줘. // 헤드라인, CTA 버튼 2개, 그라디언트 배경."
🧭
Navbar / Navigation Bar
// 네비게이션 바 · 상단 메뉴
레이아웃
페이지 상단 고정 탐색 메뉴. 로고+메뉴 링크+CTA 버튼으로 구성. 스크롤 시 배경이 반투명해지는 Sticky Navbar가 표준.
Sticky Navbar 데모
홈기능가격
시작하기
↓ 스크롤해도 상단 고정
// "Sticky Navbar. 스크롤 시 blur 배경. // 로고+링크+CTA. 모바일 햄버거."
☰
Hamburger Menu
// 햄버거 메뉴 · 모바일 메뉴
레이아웃모바일
3개의 가로선(≡)으로 표시되는 모바일 메뉴 버튼. 클릭 시 메뉴 펼침. 선이 X로 바뀌는 애니메이션이 핵심 UX.
클릭해보세요
interactive
🏠 홈
⚡ 기능
💰 가격
📝 로그인
// "Hamburger Menu. 클릭 시 X 변환. // 메뉴 max-height 0→N 슬라이드다운."
🏁
Footer
// 푸터 · 하단 영역
레이아웃
페이지 맨 아래 영역. 링크 모음+소셜 아이콘+저작권이 위치. 사용자가 본문을 다 읽고 마지막으로 보는 공간.
Footer 레이아웃
⚡ MyApp
AI 업무 자동화 솔루션
제품
기능
가격
API
회사
소개
블로그
채용
© 2026 MyApp
𝕏
in
📧
// "3컬럼 Footer. 브랜드+링크+소셜아이콘."
📋
Sidebar / Side Drawer
// 사이드바 · 드로어
레이아웃
페이지 좌측 고정 수직 탐색 메뉴. 대시보드·어드민·앱에서 많이 사용. 모바일에선 Drawer로 슬라이드 등장.
Sidebar 레이아웃
🏠 홈
📊 분석
⚙️ 설정
👤 프로필
메인 콘텐츠
// "대시보드 Sidebar. 아이콘+텍스트. // 활성 메뉴 하이라이트. 모바일 Drawer."
◨
Split Screen
// 분할 화면 · 좌우 레이아웃
레이아웃
화면을 좌우로 나눠 두 가지 콘텐츠를 동시에 표시. 로그인 페이지, 비교 소개에서 자주 사용.
Split Screen
LEFT
지금 가입하고
시작하세요
14일 무료 체험
RIGHT
이미 계정이
있으신가요?
→ 바로 로그인
// "로그인 Split Screen. // 좌: 가입 유도, 우: 로그인 폼."
⊞
Grid System
// CSS Grid · Flexbox · 격자
레이아웃
화면을 균등한 열로 나눠 콘텐츠를 배치. CSS Grid, Flexbox로 구현. "카드 3개 나란히"가 그리드 활용.
12컬럼 그리드
// 12 column grid
col-4
col-4
col-4
col-8 (메인)
col-4 사이드
3
3
3
3
// "카드 3개 그리드. 모바일 1열→데스크탑 3열."
🧱
Masonry Grid
// 메이슨리 · Pinterest 레이아웃
레이아웃
다른 높이의 카드들을 빈 공간 없이 채워 배치. Pinterest, Unsplash에서 사용하는 갤러리 형식.
Masonry 갤러리
🖼 이미지 1
높이가 다른 카드
📸 이미지 2
🎨 이미지 3
🌅 이미지 4
자유로운 높이
🎬 이미지 5
🏔 이미지 6
// "Masonry 갤러리. CSS columns:3. // 이미지별 다른 높이."
🌊
Wave / Section Divider
// 웨이브 구분선 · SVG Divider
레이아웃
섹션 사이를 부드럽게 연결하는 SVG 웨이브 구분선. 직선 대신 물결 모양으로 디자인 완성도를 높임.
흐르는 Wave 애니메이션
// "SVG Wave Divider. 흐르는 애니메이션."
//
인터랙티브 컴포넌트
15개
🪟
Modal / Dialog
// 모달 · 팝업창 · 다이얼로그
컴포넌트핵심
화면 위에 뜨는 팝업 창. 배경이 어두워지며 중앙에 창 등장. 확인·삭제·로그인에 사용. 배경 클릭 시 닫힘이 UX 규칙.
버튼을 클릭하세요
interactive
클릭하면 Modal이 나타납니다
// "삭제 확인 Modal. overlay 클릭 닫힘. // scale+fade 등장 애니메이션."
🍞
Toast Notification
// 토스트 · 스낵바 · 알림 팝업
컴포넌트
화면 모서리에 잠깐 나타났다 사라지는 알림. 2~4초 후 자동 소멸. 성공/오류/경고/정보 4종.
4종 Toast 알림
✅저장 완료
❌연결 오류
⚠️저장 공간 부족
ℹ️업데이트 완료
// "4종 Toast. 우측 상단 슬라이드인. // 3초 후 자동 사라짐."
⬇️
Dropdown
// 드롭다운 · 셀렉트 메뉴
컴포넌트
클릭 시 아래로 펼쳐지는 선택 메뉴. 외부 클릭 시 닫힘이 핵심 동작. 국가·카테고리·정렬 선택에 사용.
클릭해보세요
interactive
카테고리 선택▾
// "Dropdown. 외부 클릭 닫힘. // 선택값 표시. 구분선 포함."
📂
Accordion / FAQ
// 아코디언 · FAQ · 접히는 메뉴
컴포넌트
제목 클릭 시 내용 펼침, 재클릭 시 접힘. FAQ 섹션에서 가장 많이 사용. ▾ 아이콘 회전이 핵심 인터랙션.
클릭해보세요
interactive
서비스 요금은?▾

무료 플랜과 월 29,000원 유료 플랜이 있습니다.

환불이 가능한가요?▾

결제 후 7일 이내 전액 환불 가능합니다.

데이터는 안전한가요?▾

AES-256 암호화로 모든 데이터를 보호합니다.

// "FAQ 아코디언. 아이콘 180도 회전. // 하나 열면 나머지 닫힘."
📑
Tabs
// 탭 · 탭 전환 메뉴
컴포넌트
같은 공간에 여러 콘텐츠를 탭으로 전환. 선택된 탭 강조가 핵심 시각 피드백. 상품 상세·설정 화면에 다수 사용.
탭 클릭해보세요
interactive
개요
기능
가격
📊 AI로 업무를 자동화해 생산성을 3배 높여줍니다.
⚡ 핵심 기능: 자동 보고서, AI 요약, 팀 협업
💰 무료 | 프로 ₩29,000/월 | 팀 ₩59,000/월
// "탭 컴포넌트. 콘텐츠 전환 + 페이드인."
🃏
Card
// 카드 · hover 상승 효과
컴포넌트
정보를 박스 형태로 묶은 UI. Hover 시 translateY(-4px) 상승 효과가 기본 인터랙션. 그림자 변화와 함께 사용.
마우스를 올려보세요
🚀
빠른 속도
3배 처리
🔒
보안
AES-256
🤖
AI 기반
Claude 탑재
// "카드 hover: translateY(-4px) + shadow."
📝
Form / Input Field
// 폼 · 입력 필드 · 유효성 검사
컴포넌트
사용자가 텍스트를 입력하는 UI. 포커스 시 테두리 강조, 에러 시 빨간 테두리가 기본. Validation으로 형식 체크.
클릭해서 입력해보세요
올바른 이메일 형식이 아닙니다
// "로그인 폼. focus: green 테두리. // error: red 테두리 + 메시지."
🏷️
Badge / Tag
// 배지 · 태그 · 상태 라벨
컴포넌트
상태·카테고리를 나타내는 작은 라벨. 주문 상태·할인율·카테고리 태그에 사용. 색상으로 의미를 전달하는 것이 핵심.
다양한 Badge 스타일
✅ 완료🔥 신규⚡ PRO배송중취소됨SALE -30%
// "상태 배지. 초록(완료)/빨강(오류). pill 스타일."
👤
Avatar
// 아바타 · 프로필 이미지 · 그룹
컴포넌트
사용자를 나타내는 원형 프로필 이미지 또는 이니셜. 온라인 상태 점이나 Group Avatar(겹치기)를 자주 사용.
Avatar 종류
김
온라인
이
오프라인
A
B
C
그룹
// "Avatar. 온라인 상태 dot. // Avatar Group (겹치기 margin-left:-8px)."
🔘
Switch / Toggle
// 스위치 · ON/OFF 토글
컴포넌트
ON/OFF를 전환하는 슬라이딩 버튼. 알림 설정·다크모드에 많이 사용. 슬라이딩 도트 애니메이션이 특징.
클릭해서 켜고 꺼보세요
interactive
🔔 알림 받기
🌙 다크모드
📧 이메일 수신
// "Toggle Switch. ON: green 배경. 도트 슬라이딩."
⭐
Rating / Star Rating
// 별점 · 평점 · 리뷰 점수
컴포넌트
1~5개의 별로 만족도 표시. 클릭 시 선택, hover 시 미리보기. 이커머스·앱 스토어에 필수 UI.
별을 클릭해보세요
interactive
★★★★★
3점 (보통이에요) · 1,248개 리뷰
5⭐
70%
4⭐
20%
3⭐
6%
// "별점. hover 미리보기. 클릭 선택. // 분포 Progress Bar 포함."
📊
Data Table
// 데이터 테이블 · 표
컴포넌트
행(row)과 열(column)로 데이터를 표시하는 UI. 정렬·필터·페이지네이션과 함께 사용. 어드민 대시보드의 핵심.
Data Table
이름직무상태
김지민프론트엔드근무중
이수현디자이너재택
박준호백엔드휴가
// "테이블. 헤더 정렬 클릭. row hover."
🔍
Search Bar
// 검색창 · 자동완성
컴포넌트
사용자가 키워드를 입력해 검색하는 UI. 자동완성(Autocomplete)으로 입력 중 결과 목록이 나타나는 것이 현대 표준.
클릭해서 입력해보세요
🔍
// "Search + Autocomplete. // 입력 시 실시간 결과 목록."
🪜
Stepper / Wizard
// 스테퍼 · 단계 표시 · 온보딩
컴포넌트
여러 단계 프로세스에서 현재 위치를 보여주는 UI. 완료·진행중·미완료 색상 구분. 가입·결제·설문에 사용.
3단계 온보딩 스테퍼
✓
회원가입
2
프로필
3
완료
// "3단계 Stepper. 완료: 초록 체크. // 현재: 파란 강조. 미완료: 회색."
📅
Timeline
// 타임라인 · 이력 · 배송 추적
컴포넌트
시간 순서대로 이벤트를 나열하는 UI. 점(dot)과 수직선으로 연결. 활동 이력·회사 연혁·배송 추적에 사용.
배송 추적 Timeline
✅ 주문 완료
2026.04.21 · 10:30
📦 배송 중
2026.04.21 · 14:20
🏠 배송 예정
2026.04.22 예정
// "배송 추적 Timeline. dot+수직선."
💳
Price Card
// 가격 카드 · 플랜 비교
컴포넌트
서비스 요금제를 비교하는 카드 UI. 추천 플랜에 "Most Popular" 배지와 강조 테두리. 보통 무료·프로·팀 3가지 플랜.
Price Card 비교
Free
₩0
영원히 무료
✓ 기본 기능
✓ 3개 프로젝트
✗ AI 기능
시작하기
Most Popular
Pro
₩29k
/ 월
✓ 모든 기능
✓ 무제한
✓ AI 기능
업그레이드
// "Price Card. 추천 플랜 강조 + Popular 배지."
//
UX 인터랙션 패턴
12개
💬
Tooltip
// 툴팁 · 도움말 풍선
인터랙션
요소 위에 마우스를 올리면 나타나는 짧은 설명 풍선. 꼬리(화살표)가 특징. 아이콘 버튼의 의미를 설명.
마우스를 올려보세요
🗑️ 삭제
영구 삭제됩니다
📤 공유
링크를 복사합니다
⭐ 저장
즐겨찾기 추가
// "Tooltip. hover 시 상단 표시. // 꼬리 화살표 + fade 애니메이션."
✨
Hover Effect
// 호버 효과 · 마우스오버 반응
인터랙션
마우스를 올렸을 때 변하는 CSS 효과. translateY, scale, shadow, color 변화가 대표적. 클릭 가능하다는 시각 신호.
4가지 hover 패턴
🚀
위로 이동
💎
확대
⚡
글로우
🌟
색상 변경
// ":hover { transform: translateY(-4px); // box-shadow: 0 8px 24px rgba...; }"
🎯
Focus State
// 포커스 상태 · 접근성 · 입력 4종
인터랙션
키보드나 클릭으로 요소가 선택됐을 때의 시각 표시. 접근성(Accessibility)을 위해 필수. Normal/Focus/Error/Disabled 4종 상태.
입력 필드 상태 4종
Normal
일반 상태
Focus
포커스 상태 (선택됨)
Error
오류 상태
Disabled
비활성화
// ":focus { border-color: green; // box-shadow: 0 0 0 3px green/10% }"
🎯
CTA (Call To Action)
// 행동 유도 버튼 · 전환 버튼
인터랙션마케팅
사용자가 특정 행동(가입·구매·다운로드)을 하도록 유도하는 버튼. Primary: 강조색, Secondary: 아웃라인. hover 애니메이션 필수.
CTA Section (hover 해보세요)
지금 시작할 준비가 됐나요?
14일 무료 · 카드 불필요
무료로 시작하기 →
데모 예약
// "CTA 버튼. hover: translateY(-2px) + shadow."
🌑
Overlay
// 오버레이 · 배경 레이어
인터랙션
이미지·배경 위에 반투명 레이어를 올려 텍스트 가독성 향상 또는 Modal 배경으로 사용. position:absolute + rgba()로 구현.
마우스를 올려보세요
배경 이미지 영역

✨ Overlay 효과

더 알아보기
// "이미지 hover 시 Overlay. opacity: 0→1."
🔴
Notification Dot
// 알림 점 · 알림 뱃지
인터랙션
아이콘 위에 표시되는 빨간 점 또는 숫자로 읽지 않은 알림 수를 표시. pulse 애니메이션으로 주목을 끔.
Notification Badge
🔔
3
✉️
12
💬
●
// "알림 뱃지. position:absolute. // top:-2px right:-2px. pulse 애니메이션."
🏷
Chip / Filter Tag
// 칩 · 필터 태그 · 선택 태그
인터랙션
클릭으로 선택/해제할 수 있는 태그. 필터 조건을 시각적으로 표시하고 X버튼으로 제거. 검색 필터에 사용.
클릭해서 선택해보세요
interactive
🎨 디자인×💻 개발📣 마케팅🤖 AI×
// "Chip. 클릭 시 select 토글. // 선택: green + X 버튼."
🗺️
Breadcrumb
// 브레드크럼 · 경로 표시
인터랙션
현재 페이지의 계층 경로를 보여주는 내비게이션. "홈 > 카테고리 > 상품명" 형태. 이커머스·블로그 필수.
경로 표시
🏠 홈/강의/바이브코딩/M01 개요
// "Breadcrumb. / 구분자. // 현재 페이지: 굵게 + 색상 강조."
📄
Pagination
// 페이지네이션 · 페이지 나누기
인터랙션
많은 데이터를 여러 페이지로 나눠 보여주는 UI. 이전/다음 + 페이지 번호. 모바일에선 Infinite Scroll로 대체.
클릭해보세요
interactive
‹
1
2
3
4
5
›
// "Pagination. 현재 페이지 active. // 이전/다음 버튼."
📈
Progress Bar
// 프로그레스 바 · 진행률 표시
인터랙션
작업 완료율을 시각적 막대로 표시. 파일 업로드·온보딩·스킬 수준에 사용. 0 → N% 채워지는 애니메이션이 핵심.
채워지는 Progress Bar
React 개발85%
UI 디자인72%
프로젝트 완성60%
// "Progress Bar. 0 → N% animation. // 색상별 의미 구분."
⭐
Social Proof
// 소셜 증거 · 리뷰 · 후기
인터랙션마케팅
사용자 리뷰·평점·사용자 수로 신뢰를 높이는 UI 패턴. "4.9점 · 1,248개 리뷰" 형태. 구매 결정에 가장 큰 영향.
Social Proof 섹션
★★★★★
4.9점 · 1,248개 리뷰
김
김지민
★★★★★
"정말 업무 효율이 3배 올랐어요!"
// "리뷰 카드. 아바타+이름+별점. // 평균 평점 + 리뷰 수."
🌙
Dark Mode
// 다크모드 · 테마 전환
인터랙션
Light↔Dark 테마를 전환하는 기능. CSS 변수 + Toggle Switch로 구현. localStorage에 설정 저장.
Light vs Dark 비교
Light Mode
☀️ 밝은 테마
Dark Mode
🌙 어두운 테마
// "다크모드 토글. CSS variables 전환. // localStorage에 설정 저장."
//
UX 패턴
8개
💀
Skeleton Loading
// 스켈레톤 · shimmer 효과
UX패턴
로딩 중 실제 콘텐츠 모양의 회색 플레이스홀더. shimmer 애니메이션으로 로딩 중임 표시. 스피너보다 덜 지루한 UX.
Shimmer 로딩 효과
// "Skeleton. shimmer: gradient 좌→우 이동. // 실제 콘텐츠 모양 그대로."
⏳
Loading Spinner
// 로딩 스피너 · Dots Loader
UX패턴
데이터 처리 중을 표시하는 회전 아이콘. border-top-color 트릭으로 구현. Dots Loader(점 3개 튀기기)도 많이 사용.
4가지 로딩 인디케이터
기본
느린
멀티
Dots
// "Spinner: border 중 top만 색상. // Dots: nth-child delay로 순차 bounce."
📭
Empty State
// 빈 상태 · 결과 없음 · No Data
UX패턴
데이터가 없을 때 보여주는 UI. 일러스트+설명+행동 유도 버튼으로 구성하면 UX가 훨씬 좋아짐.
Empty State 디자인
📭
아직 게시글이 없어요
첫 번째 게시글을 작성해
대화를 시작해보세요
+ 게시글 작성
// "Empty State. 일러스트 + 설명 + CTA."
🚫
Error State / 404
// 에러 페이지 · 404 · 500
UX패턴
페이지 없음 또는 오류 발생 시 표시하는 화면. 404(없음), 500(서버), 403(권한 없음)이 대표적.
404 에러 페이지
404
페이지를 찾을 수 없어요
요청한 페이지가 존재하지 않습니다
홈으로 돌아가기
// "404 에러. 큰 숫자 + 설명 + 홈 버튼."
♾️
Infinite Scroll
// 무한 스크롤 · 자동 로딩
UX패턴
하단 도달 시 자동으로 다음 데이터를 불러오는 패턴. SNS 피드의 핵심 UX. IntersectionObserver로 구현.
스크롤해보세요
🎬
바이브코딩 M01 완료
⭐
랜딩 페이지 배포 성공
🔥
Modal 컴포넌트 구현
🚀
Claude API 통합 완료
↓ 스크롤 → 더 불러오기...
// "무한 스크롤. IntersectionObserver. // 하단 도달 시 다음 API 호출."
📌
Sticky Element
// position:sticky · 스크롤 고정
UX패턴
스크롤해도 특정 위치에 고정되는 요소. position:sticky로 구현. 테이블 헤더·필터 바·목차에 사용.
실제로 스크롤해보세요
📌 이 헤더는 스크롤해도 고정됩니다

스크롤을 내려도 위의 헤더가 고정됩니다.

이것이 position: sticky 입니다.

목차, 테이블 헤더, 필터바에 자주 씁니다.

더 아래 내용이 있어요...

// "position: sticky; top: 0; // 스크롤해도 상단 고정."
⬆️
Scroll to Top
// 맨 위로 버튼 · FAB
UX패턴
긴 페이지에서 맨 위로 올라가는 버튼. 보통 우측 하단 원형(FAB). 일정 스크롤 이후 등장. bounce 애니메이션.
bounce 애니메이션
↑
// "스크롤 200px+ 시 버튼 등장. // scrollTo({top:0,behavior:'smooth'})"
📱
Responsive Design
// 반응형 · Mobile First
UX패턴필수
화면 크기에 따라 레이아웃이 자동 변경. 모바일 → 태블릿 → 데스크탑 순으로 설계(Mobile First)하는 것이 표준.
화면 크기별 레이아웃 변화
📱 1열
📲 2열
🖥 3열
// "@media (min-width: 768px) { grid-template-columns: 1fr 1fr; }"
//
애니메이션 & 시각 효과
8개
✨
CSS Animation 6종
// fade · slide · scale · rotate · bounce · shake
애니메이션
모든 움직임은 6가지 기본 애니메이션의 조합. @keyframes와 animation 속성으로 제어.
6가지 기본 애니메이션 실시간
👁
Fade
투명도
→
Slide
이동
🔍
Scale
크기
⚙️
Rotate
회전
🏀
Bounce
튀기기
🔔
Shake
흔들기
// "@keyframes fade { 0%,100%{opacity:1} 50%{opacity:0} } // animation: fade 2s ease-in-out infinite"
📜
Scroll Animation
// 스크롤 등장 효과 · IntersectionObserver
애니메이션
스크롤 시 요소가 화면에 진입할 때 fade-up, slide-in 효과로 등장. 여러 요소가 순차 등장하는 stagger 효과도 자주 사용.
stagger fade-up 효과
🚀
첫 번째 항목 먼저 등장
⚡
0.1초 후 두 번째
✨
0.2초 후 세 번째
// "IntersectionObserver로 뷰포트 진입 감지. // nth-child delay로 순차 등장."
⌨️
Typewriter Effect
// 타이핑 효과 · 글자 순차 등장
애니메이션
텍스트가 한 글자씩 타이핑되듯 등장하는 효과. 깜박이는 커서와 함께 사용. Hero Section 헤드라인에 역동적인 느낌을 줌.
타이핑 중...
AI로 만드는 웹서비스
한 글자씩 나타나는 Typewriter Effect
// "배열에서 문자열 순환. // setInterval로 한 글자씩 추가."
🔢
Counter Animation
// 숫자 카운터 · 증가 애니메이션
애니메이션
숫자가 0에서 목표값까지 빠르게 증가하는 애니메이션. Stats 섹션에서 사용자·거래액 등을 시각적으로 강조.
숫자 카운팅 애니메이션
0
사용자
0
프로젝트
0%
만족도
// "0 → 목표값 animate. // requestAnimationFrame 사용."
📡
Marquee / Ticker
// 마퀴 · 흐르는 텍스트 · 무한 루프
애니메이션
텍스트·이미지가 좌→우 또는 우→좌로 무한 흐르는 효과. 공지사항·파트너 로고·뉴스 티커에 사용. 요소를 2번 복제해 무한 루프.
흐르는 Marquee
React
Next.js
Tailwind
Claude API
Vercel
Supabase
React
Next.js
Tailwind
Claude API
Vercel
Supabase
// "translateX(0 → -50%) animate. // 요소를 2번 복제 → 무한 루프."
🪟
Glassmorphism
// 유리 효과 · Frosted Glass · backdrop-filter
애니메이션
반투명 배경+blur로 유리처럼 보이는 디자인. backdrop-filter:blur()로 구현. 2021년부터 유행. Navbar·Modal·Card에 사용.
Glassmorphism 카드
✨ Glassmorphism
backdrop-filter: blur(12px)
// "background: rgba(255,255,255,.08); // backdrop-filter: blur(12px); // border: 1px solid rgba(255,255,255,.12)"
🌌
Parallax Effect
// 패럴랙스 · 원근 스크롤 효과
애니메이션
배경과 전경이 다른 속도로 스크롤되어 깊이감(원근감)을 만드는 효과. CSS background-attachment 또는 JS로 구현.
배경이 천천히 움직입니다
🌌 Parallax
배경이 다른 속도로 움직임
// "background-attachment: fixed; // 또는 scroll 시 translateY 다르게."
⚡
Scroll Snap
// 스크롤 스냅 · 자동 정렬 스크롤
애니메이션
스크롤 시 지정한 위치에 자동으로 정렬되는 효과. 전체화면 섹션·카드 슬라이더·이미지 갤러리에 사용.
← 옆으로 스크롤해보세요
🚀 섹션 1
⚡ 섹션 2
✨ 섹션 3
🎯 섹션 4
scroll-snap-type: x mandatory
// "scroll-snap-type: x mandatory; // 각 아이템: scroll-snap-align: start"
// 52가지 용어 · AI OpenCollege 바이브코딩 과정

이제 Claude에게 말로 설명해보세요

"Hero Section + Sticky Navbar + 카드 그리드 3개 + Modal 팝업이 있는
랜딩 페이지를 만들어줘. Glassmorphism 스타일로."

// 용어를 알면 Claude에게 정확하게 전달할 수 있습니다
// 정확한 설명 = 원하는 결과 = 바이브코딩의 핵심 ✓
AI OpenCollege · 크리에이티브 과정 참고자료

AI 이미지 생성
프롬프트 완전 가이드

텍스트 한 줄이 이미지가 되는 시대 — 스타일·조명·카메라·분위기 키워드부터 SCSE 공식, 부정 프롬프트까지 AI 이미지 생성의 모든 것을 시각적으로 이해합니다.

SCSE 공식 스타일 12종 키워드 80+ 인터랙티브 빌더 툴 비교 7종
AI Image Generator — 생성 시뮬레이션
Prompt
🎨
GENERATING...
// PROMPT FORMULA
프롬프트의 핵심 — SCSE 공식
모든 좋은 이미지 프롬프트는 4가지 요소로 구성됩니다. S·C·S·E 순서로 작성하면 원하는 이미지에 훨씬 가깝게 만들 수 있습니다.
S
Subject
주체 · 무엇을 그릴 것인가
C
Context
맥락 · 배경과 환경
S
Style
스타일 · 어떤 느낌으로
E
Effects
효과 · 조명·품질·카메라
SCSE 실전 예시 — 클릭해서 확인
S
a young Korean woman in a white hanbok, sitting cross-legged, holding a paper lantern
C
in a misty bamboo forest at dawn, soft morning light filtering through the trees, fallen petals on the ground
S
Studio Ghibli illustration style, painterly, warm color palette, dreamy atmosphere
E
golden hour lighting, volumetric fog, 4K, highly detailed, soft bokeh background
한국어 프롬프트 vs 영어 프롬프트
❌ 한국어 프롬프트 (효과 약함)
"흰 한복을 입은 여성, 대나무 숲, 지브리 스타일"
→ 대부분의 툴은 영어에 최적화
✓ 영어 프롬프트 (효과 강함)
"woman in white hanbok, bamboo forest, Studio Ghibli style, soft lighting"
→ 세밀하고 원하는 결과에 가까움
💡 활용 팁: 한국어로 원하는 이미지를 먼저 정리한 뒤 영어로 번역하고, 이 가이드의 키워드와 스타일 표현을 덧붙이면 훨씬 좋은 결과를 얻을 수 있습니다!
// STYLES
12가지 핵심 이미지 스타일
스타일 키워드 하나가 이미지 전체를 바꿉니다. 가장 많이 쓰이는 12가지 스타일과 실전 프롬프트를 익히세요.
🎌
Anime / Studio Ghibli
anime styleStudio Ghiblicel-shaded
anime illustration, Studio Ghibli style, soft colors, painterly, dreamy atmosphere, cel-shading
🖼
Cinematic / 영화적
cinematicfilm stillanamorphic
cinematic photograph, film still, anamorphic lens, dramatic lighting, color grading, 35mm film
📸
Photo Realistic
photorealistichyperdetailedRAW photo
RAW photo, photorealistic, hyperdetailed, 8K, DSLR, sharp focus, natural lighting
🎨
Oil Painting / 유화
oil paintingbrushstrokesimpasto
oil painting, visible brushstrokes, impasto texture, classical art style, rich colors, canvas texture
⚡
Cyberpunk / 사이버펑크
cyberpunkneon lightsrain-soaked
cyberpunk aesthetic, neon-lit city, rain-soaked streets, holographic displays, dystopian future
✏️
Sketch / 스케치
pencil sketchhand-drawnline art
pencil sketch, hand-drawn illustration, fine line art, crosshatching, monochrome, sketchbook style
🌌
Fantasy / 판타지
fantasy artepicmagical
epic fantasy illustration, magical atmosphere, glowing particles, dramatic epic lighting, detailed world-building
🏙
Minimalist / 미니멀
minimalistcleannegative space
minimalist design, clean composition, negative space, flat color, geometric shapes, Swiss style
🌸
Watercolor / 수채화
watercolorsoft edgespastel
watercolor painting, soft edges, transparent layers, paper texture, delicate pastel colors, wet-on-wet
🤖
3D / CGI
3D renderCGIBlender
3D render, CGI, Blender, octane render, subsurface scattering, global illumination, ray tracing
🎪
Pop Art / 팝아트
pop artAndy Warholbold colors
pop art style, Andy Warhol inspired, bold flat colors, halftone dots, high contrast, graphic design
📐
Isometric / 등각투영
isometricflat designgame art
isometric illustration, flat design, cute 3D, game art style, clean geometry, pastel colors
// KEYWORDS
키워드 사전 — 클릭해서 효과 확인
각 키워드를 클릭하면 어떤 효과를 내는지 바로 확인할 수 있습니다. 프롬프트에 바로 복사해 사용하세요.
💡 조명 (Lighting)
golden hour
studio lighting
volumetric light
neon lighting
soft diffused light
dramatic shadows
rim lighting
backlit
moonlight
god rays
🌅 Golden Hour — 일몰 직전 황금빛 따뜻한 빛. 피사체를 따뜻하고 드라마틱하게 만들어줌. 인물 사진, 풍경 사진에 최고.
🔦 Studio Lighting — 전문 스튜디오의 균형잡힌 인공 조명. 제품 사진, 초상화에 깔끔하고 프로페셔널한 느낌.
☁️ Volumetric Light — 공기 중에 빛 기둥이 보이는 효과. 안개나 먼지 속을 통과하는 빛줄기. 드라마틱하고 신비로운 분위기.
🌈 Neon Lighting — 사이버펑크·도시 야경 필수. 색깔 있는 네온 불빛이 피사체를 둘러싸는 효과. 보라·파랑·핑크 계열과 잘 어울림.
🌤 Soft Diffused Light — 부드럽고 그림자가 없는 균일한 조명. 제품 사진, 음식 사진, 뷰티 사진에 많이 사용. 깔끔하고 편안한 느낌.
🌑 Dramatic Shadows — 강한 명암 대비. 한쪽은 매우 밝고 한쪽은 깊은 그림자. 스릴러·느와르·강렬한 인물 사진에 사용.
💎 Rim Lighting — 피사체의 윤곽선만 빛이 비추는 효과. 뒤쪽에서 오는 빛으로 실루엣 주변이 빛남. 인물을 배경에서 분리시키는 효과.
🌞 Backlit — 피사체 뒤쪽에 광원. 실루엣 효과나 에지라이트 효과 생성. 역광으로 신비롭고 감성적인 분위기 연출.
🌙 Moonlight — 달빛의 차갑고 파란 조명. 야간 씬, 로맨틱하거나 신비로운 분위기. 실버·블루 톤의 차가운 색감.
✨ God Rays — 하늘에서 내려오는 빛 줄기 효과. 나무 사이, 구름 사이, 창문 사이로 보이는 빛기둥. 신성하고 극적인 분위기.
📷 카메라 & 렌즈 (Camera)
bokeh
wide angle
telephoto
macro lens
fisheye lens
tilt-shift
drone shot
long exposure
portrait mode
35mm film
🔵 Bokeh — 배경이 아름답게 흐려지는 효과. 인물이나 피사체가 선명하게 분리됨. f1.4~f2.8 대구경 렌즈 느낌. 인물 사진 필수.
🌐 Wide Angle — 광각 렌즈로 넓은 시야를 담는 것. 건축·풍경·인테리어 사진. 공간이 실제보다 더 넓어 보이는 효과.
🎯 Telephoto — 망원 렌즈로 멀리서 압축된 느낌. 배경이 압축되어 피사체와 가까워 보임. 야생동물·스포츠 사진.
🔬 Macro Lens — 극도로 가까이서 촬영하는 접사 렌즈. 꽃·벌레·음식·제품의 초정밀 디테일을 담음. 실물 크기 이상으로 확대.
👁 Fisheye Lens — 180도 시야의 극단적 광각. 둥글게 왜곡되는 원형 프레임. 스케이트보드 영상, 예술적 왜곡 효과.
🏙 Tilt-Shift — 도시나 풍경이 미니어처처럼 보이는 효과. 위아래를 흐리게 하고 가운데만 선명. 귀여운 모형 세계 느낌.
🚁 Drone Shot — 드론으로 찍은 공중 부감 뷰. Bird's eye view. 도시·자연·건축의 전체 구도를 위에서 내려다보는 시점.
🌊 Long Exposure — 장노출로 움직임을 흐릿하게 담는 기법. 폭포·별 궤적·자동차 빛줄기. 시간의 흐름을 한 장에 담음.
👤 Portrait Mode — 인물 사진에 최적화된 모드. 얼굴을 중심으로 배경 분리. 스마트폰 인물 사진의 부드러운 피부 톤.
📽 35mm Film — 필름 카메라의 아날로그 느낌. 그레인·빛 누출·색상 변색 포함. 빈티지하고 감성적인 레트로 분위기.
🖼 구도 (Composition)
rule of thirds
symmetrical
leading lines
bird's eye view
worm's eye view
close-up
extreme close-up
wide shot
over-the-shoulder
Dutch angle
📐 Rule of Thirds — 화면을 3x3으로 나눠 피사체를 교차점에 배치하는 황금분할. 가장 자연스럽고 안정적인 구도.
⬜ Symmetrical — 좌우 대칭 구도. 건축·자연·인물을 중앙에 배치하여 완벽한 균형감. 권위 있고 안정적인 느낌.
➡️ Leading Lines — 선로·도로·복도 등의 선이 시선을 피사체로 이끄는 구도. 깊이감과 방향감을 동시에 표현.
🚁 Bird's Eye View — 새처럼 위에서 내려다보는 시점. 인물·음식·전체 지도를 위에서 바라봄. 패턴과 배열이 뚜렷하게 보임.
🐛 Worm's Eye View — 땅에서 위를 올려다보는 시점. 건물·나무·인물이 거대하고 위압적으로 보임. 극적인 원근감.
🔍 Close-Up — 인물의 얼굴이나 대상의 일부를 가까이서 포착. 표정·감정·디테일에 집중. 허리 위부터 얼굴까지.
👁 Extreme Close-Up — 눈·입술·손가락 끝 등 극도로 좁은 범위. 텍스처와 세부 디테일이 극대화됨.
🌅 Wide Shot — 인물 전체와 배경을 함께 담는 넓은 구도. 환경과 인물의 관계를 설명. 영화의 설정 샷.
👥 Over-the-Shoulder — 어깨 너머에서 촬영하는 구도. 대화 장면이나 1인칭 시점을 표현. 드라마틱한 깊이감.
🎬 Dutch Angle — 카메라를 기울여 비스듬하게 찍는 기법. 불안감·긴장감·혼란을 표현. 스릴러 영화에서 자주 사용.
🎭 분위기 & 무드 (Mood)
ethereal
melancholic
whimsical
nostalgic
serene
mysterious
cozy
eerie
epic
surreal
✨ Ethereal — 천상의, 몽환적인 느낌. 빛·안개·흐릿함으로 현실과 비현실의 경계. 천사·요정·신비로운 존재에 어울림.
😔 Melancholic — 우울하고 슬픈 감성. 어두운 색조, 비, 홀로 있는 인물. 예술적이고 감성적인 이미지에 사용.
🦋 Whimsical — 엉뚱하고 장난스러운, 동화 같은 느낌. 파스텔 색상, 귀여운 디테일, 비현실적 요소. 아동 콘텐츠에 어울림.
📼 Nostalgic — 과거를 그리워하는 감성. 필름 그레인, 빛바랜 색상, 레트로 요소. 90년대·70년대 감성.
🌊 Serene — 고요하고 평화로운 분위기. 잔잔한 물, 부드러운 빛, 여백 있는 구도. 명상·힐링·자연 이미지.
🌑 Mysterious — 신비롭고 알 수 없는 분위기. 그림자, 안개, 숨겨진 요소. 호기심을 자극하는 비밀스러운 느낌.
☕ Cozy — 따뜻하고 아늑한 분위기. 따뜻한 불빛, 소파, 커피, 담요. 집에 있는 편안한 인테리어·라이프스타일 사진.
👻 Eerie — 소름 돋는 불안한 분위기. 버려진 장소, 창백한 빛, 비틀린 형태. 호러·미스터리·공포 이미지.
⚡ Epic — 웅장하고 압도적인 규모감. 광활한 풍경, 극적인 하늘, 거대한 군중. 영웅·전투·판타지 세계에 어울림.
🌀 Surreal — 현실을 뛰어넘는 초현실주의. 살바도르 달리 스타일. 불가능한 물리적 상황, 꿈 같은 이미지.
⭐ 품질 & 디테일 (Quality)
4K
8K ultra HD
highly detailed
masterpiece
sharp focus
professional
award-winning
trending on ArtStation
octane render
unreal engine 5
📺 4K — 3840×2160 해상도. 세밀한 디테일 표현을 AI에게 요청하는 신호. 실제 AI가 4K 파일을 만들지는 않지만 더 디테일한 결과 유도.
🔭 8K Ultra HD — 7680×4320의 최고 해상도. AI에게 "최고의 디테일"을 요청하는 신호. 복잡하고 정교한 결과를 원할 때 사용.
🔍 Highly Detailed — 세밀하고 복잡한 디테일을 추가하라는 지시. 배경·소품·텍스처까지 정교하게 표현. 디지털 아트에 효과적.
🏆 Masterpiece — 걸작 수준의 높은 품질을 요청. Stable Diffusion 계열에서 특히 효과적인 품질 향상 키워드.
🎯 Sharp Focus — 선명하고 또렷한 초점. 흐릿하거나 뭉개진 결과를 방지. 세부 디테일을 살리고 싶을 때 사용.
👔 Professional — 전문적인 수준의 결과물 요청. 상업용 사진이나 출판물 수준의 품질. 아마추어 느낌을 방지.
🥇 Award-Winning — 수상 경력에 빛나는 수준의 품질. 사진 콘테스트나 예술상 수준의 구도와 조명 품질 유도.
🎨 Trending on ArtStation — 디지털 아트 플랫폼 ArtStation의 인기 스타일. 현대적이고 세련된 디지털 아트 품질.
⚙️ Octane Render — GPU 기반 3D 렌더링 엔진 스타일. 사실적인 빛의 반사·굴절, 유리·금속 표면이 특히 아름다움.
🎮 Unreal Engine 5 — 최신 게임 엔진 수준의 실시간 그래픽. 영화급 리얼리즘, 빛의 산란과 반사, 나노 디테일.
// PROMPT BUILDER
인터랙티브 프롬프트 빌더
각 항목을 클릭해서 선택하면 완성된 영어 프롬프트가 자동으로 조합됩니다. 복사해서 바로 사용하세요.
// AI Image Prompt Builder
🎨 스타일
지브리 애니메이션
영화적 사진
사진 리얼리즘
유화
수채화
3D 렌더
사이버펑크
미니멀
💡 조명
황금빛 황혼
스튜디오 조명
네온 조명
빛기둥 (God Rays)
부드러운 자연광
달빛
강한 명암
역광/테두리빛
📷 카메라
보케 (흐린배경)
광각 렌즈
접사 (마크로)
드론 부감
35mm 필름
인물 포트레이트
틸트시프트 미니어처
🎭 분위기
몽환적
포근한
웅장한
신비로운
고요한
노스탤지어
초현실적
발랄한
⭐ 품질
최고 품질
4K 선명
ArtStation 스타일
UE5 렌더
정교한 디테일
📐 화면 비율
16:9 와이드
1:1 정방형
9:16 세로 (모바일)
4:3 표준
21:9 울트라와이드
생성된 프롬프트 — 아래 텍스트를 복사해서 사용하세요
← 위에서 옵션을 선택하면 프롬프트가 자동으로 조합됩니다
📐 화면 비율 (Aspect Ratio) 시각 가이드
16:9
와이드 / 유튜브
썸네일·배너·광고
1:1
정방형
인스타·프로필
9:16
세로형
릴스·쇼츠·스토리
4:3
표준
프레젠테이션
21:9
울트라와이드
영화·배경화면
3:4
세로형
핀터레스트·포스터
// TOOLS
AI 이미지 생성 툴 비교
각 툴마다 강점이 다릅니다. 목적에 맞는 툴을 선택하세요.
🎨
Midjourney
// 유료 / Discord 또는 웹
현재 가장 예술성이 높은 AI 이미지 생성 툴. 독특한 미적 감각과 높은 완성도. 상업적 사용에도 인기.
아름다운 예술적 스타일
일관된 고품질 결과물
다양한 파라미터 지원
midjourney.com
🖼
DALL-E 3
// ChatGPT Plus 포함
OpenAI의 이미지 생성 AI. ChatGPT와 통합되어 자연어로 프롬프트 가능. 텍스트 렌더링 성능 최고.
텍스트 포함 이미지 최강
ChatGPT로 대화식 생성
안전 필터 잘 갖춰짐
chatgpt.com
🔥
Stable Diffusion
// 무료 오픈소스
완전 무료 오픈소스 이미지 생성 AI. 로컬 설치 또는 웹 서비스 이용. 커스터마이징과 fine-tuning 가능.
완전 무료 (ComfyUI 등)
LoRA로 스타일 커스텀
로컬 실행 가능
stability.ai
🌐
나노바나나 (Nanobana)
// 한국 서비스 / 한국어 지원
⭐ 수강생 추천
국내 AI 이미지 생성 서비스. 한국어 프롬프트 지원으로 접근성이 높음. 국내 정서에 맞는 이미지 생성에 유리.
한국어 프롬프트 직접 입력
국내 정서 이해도 높음
간단한 UI, 빠른 생성
nanobana.ai
🖼️
Image 2.0 (duct-tape2)
// ChatGPT Plus · GPT-4o 내장
⭐ 수강생 추천
ChatGPT에 내장된 최신 이미지 생성 모델. 대화 맥락을 이해하며 이미지를 반복 수정할 수 있어 초보자에게 특히 유리. 텍스트·한국어 지시에 강함.
ChatGPT 대화로 이미지 생성·수정
한국어 지시 이해도 우수
이미지 내 텍스트 렌더링 정확
chatgpt.com
💎
Ideogram
// 무료 플랜 있음
텍스트 렌더링에 특화된 AI. 포스터·썸네일처럼 텍스트가 포함된 이미지 생성에 탁월. 타이포그래피 + 이미지 동시 생성.
이미지 내 텍스트 렌더링 최강
썸네일·포스터 최적화
무료로 일정량 사용 가능
ideogram.ai
✨
Adobe Firefly
// Adobe CC 포함
Adobe의 AI 이미지 생성 툴. Photoshop·Illustrator와 직접 통합. 상업적으로 안전한 학습 데이터 사용.
상업적 사용에 안전한 라이선스
Photoshop 내 생성 기능
기존 이미지 편집에 탁월
firefly.adobe.com
🚀
Leonardo.ai
// 무료 플랜 있음
게임 아트·캐릭터 디자인에 특화. 다양한 모델을 선택해 사용 가능. AI Canvas로 이미지 편집도 지원.
게임 아트·캐릭터 최적화
다양한 모델 선택
일일 무료 크레딧 제공
leonardo.ai
// Before → After 프롬프트 개선 예시
💡 예시 1 — 인물 사진
❌ 약한 프롬프트
여자 사진, 예쁘게, 스튜디오
기대 품질: 낮음
✓ 강한 프롬프트 (SCSE)
portrait of a elegant Korean woman in her 30s, soft smile | in a minimalist white studio, sitting on a stool | photography style, natural skin tone | studio lighting with soft box, bokeh background, 4K, sharp focus
기대 품질: 높음
💡 예시 2 — 음식 사진
❌ 약한 프롬프트
맛있는 라멘
기대 품질: 낮음
✓ 강한 프롬프트 (SCSE)
steaming tonkotsu ramen bowl with chashu pork, soft-boiled egg, nori, green onions | on a dark wooden table, chopsticks beside, minimal props | food photography style | soft natural side lighting, steam visible, overhead flat lay, 8K, sharp focus, mouthwatering
기대 품질: 높음
💡 예시 3 — 마케팅 배너
❌ 약한 프롬프트
스킨케어 광고 이미지
기대 품질: 낮음
✓ 강한 프롬프트 (SCSE)
luxury skincare serum bottle, transparent glass dropper | surrounded by fresh rose petals and dewy leaves, white marble surface | high-end cosmetic product photography | soft box diffused lighting from left, clean white background, reflection on marble, 16:9 banner format, commercial grade
기대 품질: 높음
// NEGATIVE PROMPTS
부정 프롬프트 — 원하지 않는 것 제거
Negative Prompt는 AI가 생성하지 않았으면 하는 요소를 명시합니다. 이상한 결과물을 방지하는 가장 효과적인 방법입니다. (Midjourney: --no [내용], SD: Negative Prompt 칸)
📋 만능 부정 프롬프트 (복사해서 사용)
ugly, deformed, disfigured, poor quality, low quality, blurry, out of focus, extra limbs, extra fingers, missing limbs, bad anatomy, bad proportions, watermark, signature, text overlay, logo, frame, border, cropped, cut off, duplicate, error, mutation, bad hands, poorly drawn hands, long neck, multiple heads, cloned face, gross proportions
👤 인물 해부학
extra fingersmissing fingersextra limbsbad handslong neckdeformed face
📸 품질 문제
blurryout of focuslow qualitypixelatedjpeg artifactsgrainy
📝 텍스트/워터마크
watermarksignaturetextlogoframeborder
🎨 구도 문제
croppedcut offout of frameduplicatemultiple people
🌈 색상 문제
oversaturatedwashed outoverexposedunderexposedflat colors
🤖 AI 특유의 결함
uncanny valleyplastic skindoll-likeweird eyesbad teeth
// QUICK REFERENCE
빠른 참조 카드
프롬프트를 작성할 때 바로 옆에 두고 보는 참조 카드입니다.
💡 조명 Quick Ref
따뜻한 일몰
golden hour
스튜디오 광고
studio lighting
빛기둥 효과
volumetric light, god rays
사이버펑크 분위기
neon lighting
부드러운 자연광
soft diffused light
달빛 야경
moonlight, cold blue
역광 실루엣
backlit, rim lighting
📷 카메라 Quick Ref
흐린 배경
bokeh, f1.8, shallow DOF
넓은 공간
wide angle lens
극도 클로즈업
macro lens
위에서 아래로
drone shot, bird's eye view
아래서 위로
worm's eye view
필름 감성
35mm film, film grain
미니어처 효과
tilt-shift
🎭 분위기 Quick Ref
몽환 / 천상
ethereal, dreamy
아늑한 카페
cozy, warm, soft
판타지 서사시
epic, dramatic, fantasy
신비롭고 어두운
mysterious, eerie, dark
고요하고 평화로운
serene, peaceful, tranquil
복고 감성
nostalgic, retro, vintage
초현실적
surreal, dreamlike
⭐ 품질 Quick Ref
최고 해상도
8K, ultra HD
정교한 디테일
highly detailed, intricate
걸작 품질
masterpiece, award-winning
선명한 초점
sharp focus, crisp
프로 사진가
professional photography
디지털 아트
trending on ArtStation
게임 그래픽
unreal engine 5, octane
🎨 스타일 Quick Ref
애니메이션
anime style, cel-shaded
지브리
Studio Ghibli illustration
영화 스틸
cinematic, film still
유화
oil painting, brushstrokes
수채화
watercolor, soft edges
3D 렌더
3D CGI, octane render
사이버펑크
cyberpunk, neon-lit city
📐 비율 & 파라미터
유튜브 썸네일
--ar 16:9
인스타 게시물
--ar 1:1
릴스/스토리
--ar 9:16
고품질 (MJ)
--quality 2
세밀한 스타일화
--stylize 750
다양한 변형
--chaos 50
이상한 느낌
--weird 500
✍️ 프롬프트 잘 작성하는 3가지 방법
방법 1 — 한국어로 정리 후 영어 번역해서 사용
"우리 카페 라벤더 라떼, 여름, 청량, 몽환적, 1:1 비율"
→ 영어 번역 후 스타일·조명 키워드 추가 → 생성 툴에 입력
방법 2 — 이 페이지의 프롬프트 빌더 활용
스타일·조명·카메라·분위기를 클릭하면 영어 프롬프트가 자동 조합됩니다. 복사해서 바로 사용하세요.
방법 3 — SCSE 공식으로 단계별 작성
S(무엇을) → C(어디서) → S(어떤 스타일) → E(어떤 효과) 순으로 하나씩 작성하고 쉼표로 연결하면 완성입니다.
// AI OpenCollege 크리에이티브 과정 · AI 이미지 가이드

프롬프트는 기술이 아니라
언어입니다

S(무엇을) + C(어디서) + S(어떤 스타일) + E(어떤 효과) — 이 네 가지를
영어로 구체적으로 표현하면 원하는 이미지를 만들 수 있습니다.

// SCSE 공식으로 구체적으로 작성할수록 원하는 결과에 가까워집니다
// 스타일 키워드 하나가 이미지 전체 분위기를 바꿉니다
// 결과가 마음에 안 들면 키워드를 바꿔 반복 시도하세요 ✓
✦ Anthropic 공식 가이드 기반

대화만으로
디자인을 만든다

Claude Design이 뭔지, 어떻게 쓰는지 — 그림과 예시로 쉽게 이해하는 초보자 안내서

✦ Pro · Max · Team 플랜 🎨 디자인 · 프로토타입 💬 대화로 만들기 🚀 코드 없이
Claude Design — 화면 구조 미리보기
💬 왼쪽: 채팅 (말하는 곳)
월별 매출 대시보드 만들어줘
✦
매출 현황판을 디자인했어요. 오른쪽에서 확인하세요 ✨
차트 색상을 파란색으로 바꿔줘
✦
수정했습니다 💙
원하는 것을 말해보세요...
↑
🖼 오른쪽: 캔버스 (결과물)
대화할 때마다 자동으로 업데이트됩니다
왼쪽 채팅에서 원하는 걸 말하면
→
오른쪽 캔버스에 디자인이 나타납니다
Claude Design이란

이런 것들을 만들 수 있어요

코딩이나 디자인 경험이 없어도 됩니다. 말로 설명하면 Claude가 실제로 작동하는 결과물을 만들어줍니다.

ℹ️
현재 Pro · Max · Team · Enterprise 플랜에서 사용 가능합니다. Enterprise는 관리자가 별도로 활성화해야 합니다.
🎨
디자인
웹페이지, 앱 화면, 대시보드, 랜딩 페이지, 폼 등 다양한 UI
🔗
대화형 프로토타입
버튼을 실제로 눌러볼 수 있는 작동하는 시제품
📊
프레젠테이션
보고서, 슬라이드, 인포그래픽, 발표 자료 등
✨
브랜드가 자동으로 적용됩니다
조직의 디자인 시스템이 설정되어 있으면, 새 프로젝트마다 우리 회사의 색상·글꼴·컴포넌트가 처음부터 자동으로 적용됩니다. 별도로 설정하지 않아도 됩니다.
사용 흐름

이렇게 사용해요 — 6단계

처음에는 이 순서대로만 따라해도 충분합니다. 각 단계를 클릭하면 자세한 내용을 볼 수 있어요.

→
→
→
→
→
📁 1단계 — 새 프로젝트 만들기
새 프로젝트를 만들면 조직의 디자인 시스템이 자동으로 연결됩니다. 우리 회사 브랜드 색상과 글꼴이 처음부터 적용된 상태로 시작할 수 있습니다.
💡
처음 만든 프로젝트에는 이미 우리 회사 색상이 들어가 있습니다. 별도로 브랜드를 설정하지 않아도 됩니다!
📎 2단계 — 자료 첨부 (선택사항)
자료를 더 많이 줄수록 결과물이 좋아집니다. 없어도 바로 시작할 수 있지만, 있으면 훨씬 원하는 결과에 가깝게 나옵니다.
📸 이미지 · 스크린샷
마음에 드는 디자인, 경쟁사 화면, 손으로 그린 스케치를 올리면 "이렇게 만들어줘"가 됩니다.
💻 코드 저장소 · 기존 파일
코드 저장소를 연결하면 기존 컴포넌트를 이해하고 더 실제 서비스에 가까운 결과물을 만들어줍니다.
💬 3단계 — 원하는 것 설명하기
무엇을, 누구를 위해, 어떻게 배치할지 구체적으로 말할수록 좋습니다. 아래 프롬프트 작성법에서 더 자세히 배울 수 있어요.
"지역별·제품별 필터가 있는 월별 매출 대시보드를 만들어줘. 영업팀이 매일 사용하는 거야."
👁️ 4단계 — 캔버스에서 결과 확인
Claude가 오른쪽 캔버스에 디자인을 생성합니다. 처음 결과물이 완벽하지 않아도 괜찮습니다. 첫 번째는 시작점이고, 반복을 통해 완성됩니다.
🔄
첫 번째 결과물을 보고 마음에 들지 않는 부분을 바로 채팅으로 말하면 됩니다. 완성도는 대화를 반복할수록 높아집니다.
🔄 5단계 — 수정하고 반복하기
두 가지 방법으로 계속 다듬을 수 있습니다. 큰 변경은 채팅으로, 세부 수정은 직접 클릭해서 댓글로 요청하세요.
💬 채팅 — 전체적인 변경
전체 색상, 레이아웃 변경, 새 섹션 추가, 대안 디자인 요청 등 큰 범위의 수정에 적합합니다.
📌 인라인 댓글 — 세부 수정
특정 버튼·텍스트를 직접 클릭하고 요청하면 더 빠릅니다. 어느 부분인지 말로 설명할 필요가 없어요.
💾 다른 방향을 탐색하고 싶을 때 — 버전 저장
지금까지 만든 것을 유지하면서 완전히 다른 방향을 시도하고 싶다면:
"지금까지의 작업을 저장하고 완전히 다른 접근 방식을 시도해줘"
→ Claude가 현재 버전을 저장하고 새 방향을 시작합니다. 이전 버전으로 돌아갈 수도 있어요.
📤 6단계 — 내보내거나 공유하기
오른쪽 상단의 "내보내기" 버튼으로 다양한 형식을 선택할 수 있습니다. 아래 내보내기 섹션에서 각 형식을 확인하세요.
.zip PDF PPTX HTML Canva 공유 링크
프롬프트 작성법

잘 말할수록 잘 만들어집니다

디자이너가 아니어도 됩니다. 다만 구체적으로 말할수록 원하는 결과가 나옵니다. 좋은 프롬프트의 4가지 요소를 알면 충분해요.

🎯
목표
무엇을 만드나요?
대시보드, 랜딩 페이지, 온보딩 화면...
🖼️
레이아웃
어떻게 배치하나요?
위에 메트릭, 아래에 차트, 오른쪽에 필터...
📄
콘텐츠
어떤 정보를 보여주나요?
월별 매출, 사용자 수, 필터 옵션...
👤
대상
누가 사용하나요?
영업팀, 고객, 관리자, 일반 사용자...
비교해보세요 ❌ 막연한 요청 vs ✓ 좋은 요청
❌ 막연한 프롬프트
"대시보드 만들어줘"
😕 결과 예측 불가
✓ 구체적인 프롬프트
"지역 및 제품별 필터가 있는 월별 수익 대시보드를 만들어줘. 영업팀이 매일 쓰는 거야."
😊 원하는 결과가 나와요
✅ 실제로 잘 작동하는 프롬프트 예시
📊
대시보드
// 데이터 시각화
필터와 차트가 포함된 현황판
"지역 및 제품 라인 필터가 있는 월별 수익 대시보드를 만들어줘."
📱
앱 온보딩
// 모바일 화면 흐름
처음 사용자를 안내하는 화면
"핵심 기능을 안내하는 4화면 모바일 온보딩을 디자인해줘."
🌐
랜딩 페이지
// 웹 마케팅
신제품 소개 페이지
"히어로 섹션, 코드 예제, 가격 정보가 있는 API 제품 랜딩 페이지를 만들어줘."
📋
내부 관리 도구
// 업무용 인터페이스
팀원이 사용하는 관리 화면
"운영팀이 콘텐츠를 검토하고 승인하는 내부 도구를 디자인해줘."
수정하기

수정하는 두 가지 방법

첫 결과물이 완벽하지 않아도 됩니다. 두 가지 방법으로 계속 다듬으면 됩니다. 상황에 따라 골라 쓰세요.

💬
채팅으로 수정
전체적인 변경 · 새 기능 추가
이럴 때 사용하세요
✓
전체 색상이나 분위기를 바꾸고 싶을 때
✓
새로운 섹션이나 기능을 추가할 때
✓
레이아웃 전체를 재배치하고 싶을 때
✓
2~3가지 대안 디자인을 비교하고 싶을 때
예시 문장
"색 구성표를 더 어둡고 미니멀하게 만들어줘."
"오른쪽에 설정 패널을 추가해줘."
"이 페이지 대안 레이아웃 2~3개 보여줘."
📌
인라인 댓글로 수정
특정 부분 직접 클릭 → 요청
이럴 때 사용하세요
✓
특정 버튼이나 텍스트 하나만 바꿀 때
✓
간격·크기 같은 세부 조정이 필요할 때
✓
어느 부분인지 말로 설명하기 복잡할 때
✓
컴포넌트 하나만 빠르게 수정할 때
예시 문장
"이 버튼 패딩을 더 크게 만들어줘."
"라디오 버튼 대신 드롭다운으로 바꿔줘."
"여기에 기본 브랜드 색상을 써줘."
⚠️
댓글이 사라질 때 해결 방법
인라인 댓글이 가끔 Claude가 읽기 전에 사라지는 문제가 있습니다. 이럴 때는 댓글 내용을 채팅창에 직접 붙여넣기하면 됩니다.
내보내기 · 공유

완성 후 내보내거나 공유하기

오른쪽 상단 "내보내기" 버튼으로 다양한 형식을 선택할 수 있습니다. 상황에 맞는 형식을 골라 사용하세요.

📦
.zip 다운로드
전체 파일을 묶어서 내 컴퓨터에 저장
코드 파일 포함
📄
PDF 내보내기
출력하거나 이메일 첨부용으로 사용
인쇄 · 공유
📊
PPTX 내보내기
파워포인트로 발표할 때
발표용
🎨
Canva로 전송
Canva에서 추가 편집하고 싶을 때
편집 가능
🌐
독립형 HTML
웹브라우저에서 바로 열 수 있는 파일
바로 실행
🔗
공유 링크
조직 내 동료와 링크로 공유
보기 · 댓글 · 편집
💡
개발자에게 넘길 때는 "Claude Code로 인계"
디자인을 실제 코드로 개발하고 싶다면 Claude Code로 인계 옵션을 사용하세요. 로컬 코딩 에이전트나 Claude Code Web으로 직접 넘겨줄 수 있습니다.
꿀팁

더 좋은 결과를 얻는 방법 6가지

공식 가이드에서 뽑은 핵심 팁입니다. 처음에는 ① ② 번만 기억해도 충분합니다.

①
간단하게 시작하기
핵심 레이아웃과 콘텐츠만으로 시작하고, 이후에 세부 요소를 하나씩 추가하세요.
✓ "기본 대시보드 만들어줘"
→ 이후 "여기에 필터 추가해줘"
②
구체적으로 피드백하기
"이게 이상해"보다 정확히 무엇을 어떻게 바꾸고 싶은지 말하면 훨씬 정확한 수정이 됩니다.
❌ "이게 좀 이상해"
✓ "폼 필드 사이 간격을 8px로 줄여줘"
③
반응형을 미리 알려주기
모바일, 태블릿, 데스크탑 어떤 기기에서 보이는지 처음부터 언급하면 나중에 다시 수정할 일이 줄어듭니다.
✓ "모바일과 데스크탑 모두에서 잘 보이게 만들어줘"
④
여러 안 비교하기
방향이 확실하지 않을 때는 혼자 고민하지 말고 2~3가지 대안을 보여달라고 하세요.
✓ "이 레이아웃 대안 2~3가지 보여줘. 비교해서 고를게."
⑤
컴포넌트 이름으로 요청하기
브랜드 시스템에 컴포넌트가 있다면 이름으로 직접 언급하면 더 정확하게 적용됩니다.
✓ "기본 버튼 컴포넌트 사용해줘"
✓ "카드 레이아웃 패턴 적용해줘"
⑥
검토를 요청하기
만드는 것뿐 아니라 완성된 디자인의 문제점을 찾아달라고도 할 수 있습니다.
✓ "이 디자인의 접근성 문제점을 찾아줘"
✓ "개선할 점이 있으면 제안해줘"
주의사항

알아두면 좋은 주의사항

Claude Design은 현재 실험적 미리보기 단계입니다. 가끔 이런 문제가 생길 수 있으니 해결 방법을 미리 알아두세요.

💬
댓글이 사라지는 문제
⚠ 인라인 댓글이 Claude가 읽기 전에 가끔 사라집니다
해결: 댓글 내용을 채팅창에 직접 붙여넣기하세요
💾
컴팩트 모드 저장 오류
⚠ 컴팩트 레이아웃 모드에서 저장이 안 될 수 있습니다
해결: 전체 보기(Full view)로 전환하고 다시 시도하세요
📁
너무 큰 코드 저장소
⚠ 매우 큰 저장소를 연결하면 느려지거나 오류가 납니다
해결: 전체 대신 특정 하위 폴더만 연결하세요
⚠️
채팅 업스트림 오류
⚠ "채팅 업스트림 오류"가 뜰 수 있습니다
해결: 같은 프로젝트 안에서 새 채팅 탭을 시작하세요
🎨

이제 시작해볼까요?

처음엔 간단한 것부터 — 대화하듯 설명하면 됩니다.
완벽하지 않아도 괜찮아요. 반복하면서 완성됩니다.

📁 새 프로젝트 만들기
→
💬 원하는 것 말하기
→
🔄 수정하며 완성하기