소개
대학생 드림보드 만들기를 진행하려고 하는데, 예시를 좀 더 신선하게 보여주면 좋을 것 같아서 만들어 보았습니다.
진행 방법
Claude를 사용해 제작했습니다.
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
처음에 프롬프트를 이렇게 줬더니 대상이 명확하지 않아서 고등학생의 드림보드가 예제로 나왔습니다. 그래서 다시 대학생 버전으로 교체했는데요.
그냥 과랑 나이를 정해서 좋아하는 것, 잘하는 것 등을 필요에 맞게 작성해서 만들어 달라고 하는 편이 좋았지 않았을까 싶습니다.
예시 부분만 대학생 버전으로 교체할게요!
예시를 경영학과 3학년 김민준(23세) 대학생으로 바꿨어요! 변경된 내용은 이렇습니다.
좋아하는 것 → 스타트업 뉴스, 사이드 프로젝트, 네트워킹, 테크 팟캐스트 등 대학생 관심사로
잘 하는 것 → 관계 구축, 아이디어 구체화, 팀 동기 부여 등 실무 역량 중심으로
되고 싶은 모습 → 창업, 시리즈A 투자, 글로벌 진출, 강남 오피스, 테슬라, 한 달 살기
할 일 → 린스타트업 독서, LinkedIn 커피챗, 해커톤 참가, MVP 완성, 예비창업패키지 지원, 졸업 전 법인 설립 등 대학생 눈높이의 현실적인 액션플랜으로 구성했습니다
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>드림보드 만들기 🌟</title>
<style>
:root {
--yellow: #FFE234;
--coral: #FF6B6B;
--mint: #4ECDC4;
--purple: #A855F7;
--navy: #0F172A;
--white: #FFFFFF;
--pink: #FF87C3;
--blue: #3B82F6;
--orange: #FF9F43;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--navy);
color: var(--white);
font-family: 'Nanum Gothic', sans-serif;
overflow-x: hidden;
cursor: none;
}
/* Custom cursor */
.cursor {
width: 20px; height: 20px;
background: var(--yellow);
border-radius: 50%;
position: fixed;
top: 0; left: 0;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: transform 0.1s, width 0.2s, height 0.2s;
mix-blend-mode: difference;
}
/* ---- HERO ---- */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
padding: 40px 20px;
overflow: hidden;
}
.hero-bg {
position: absolute; inset: 0;
background: radial-gradient(ellipse at 20% 50%, rgba(168,85,247,0.3) 0%, transparent 60%),
radial-gradient(ellipse at 80% 20%, rgba(255,107,107,0.3) 0%, transparent 50%),
radial-gradient(ellipse at 60% 80%, rgba(78,205,196,0.2) 0%, transparent 50%);
animation: bgPulse 6s ease-in-out infinite alternate;
}
@keyframes bgPulse {
from { opacity: 0.7; }
to { opacity: 1; }
}
.floating-emoji {
position: absolute;
font-size: clamp(24px, 4vw, 48px);
animation: float linear infinite;
opacity: 0.6;
pointer-events: none;
user-select: none;
}
@keyframes float {
0% { transform: translateY(110vh) rotate(0deg); opacity: 0; }
10% { opacity: 0.6; }
90% { opacity: 0.6; }
100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}
.hero-badge {
background: var(--yellow);
color: var(--navy);
font-family: 'Black Han Sans', sans-serif;
font-size: 14px;
padding: 6px 18px;
border-radius: 100px;
margin-bottom: 24px;
display: inline-block;
animation: bounce 2s ease-in-out infinite;
letter-spacing: 2px;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.hero-title {
font-family: 'Black Han Sans', sans-serif;
font-size: clamp(52px, 10vw, 120px);
line-height: 0.9;
text-align: center;
position: relative;
z-index: 1;
}
.hero-title .line1 { color: var(--white); }
.hero-title .line2 {
color: var(--yellow);
-webkit-text-stroke: 3px var(--yellow);
text-shadow: 4px 4px 0 rgba(255,226,52,0.3);
}
.hero-title .line3 { color: var(--coral); }
.hero-sub {
font-size: clamp(16px, 2.5vw, 20px);
color: rgba(255,255,255,0.7);
text-align: center;
margin-top: 24px;
max-width: 560px;
line-height: 1.7;
z-index: 1;
position: relative;
}
.hero-cta {
margin-top: 48px;
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
z-index: 1;
position: relative;
}
.btn-primary {
background: var(--yellow);
color: var(--navy);
font-family: 'Black Han Sans', sans-serif;
font-size: 18px;
padding: 16px 36px;
border: none;
border-radius: 100px;
cursor: none;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 4px 4px 0 rgba(255,226,52,0.4);
text-decoration: none;
display: inline-block;
}
.btn-primary:hover {
transform: translate(-3px, -3px);
box-shadow: 7px 7px 0 rgba(255,226,52,0.4);
}
.btn-secondary {
background: transparent;
color: var(--white);
font-family: 'Black Han Sans', sans-serif;
font-size: 18px;
padding: 16px 36px;
border: 2px solid rgba(255,255,255,0.4);
border-radius: 100px;
cursor: none;
transition: transform 0.2s, border-color 0.2s;
text-decoration: none;
display: inline-block;
}
.btn-secondary:hover {
transform: translate(-3px, -3px);
border-color: var(--white);
}
/* ---- WHAT IS DREAMBOARD ---- */
.section {
padding: clamp(60px, 10vw, 120px) clamp(20px, 5vw, 60px);
max-width: 1200px;
margin: 0 auto;
}
.section-label {
font-size: 12px;
letter-spacing: 4px;
color: var(--mint);
text-transform: uppercase;
margin-bottom: 12px;
font-weight: 800;
}
.section-title {
font-family: 'Black Han Sans', sans-serif;
font-size: clamp(36px, 6vw, 72px);
line-height: 1.1;
margin-bottom: 24px;
}
/* What card */
.what-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 48px;
}
@media (max-width: 640px) {
.what-grid { grid-template-columns: 1fr; }
}
.what-card {
border-radius: 24px;
padding: 36px;
position: relative;
overflow: hidden;
transition: transform 0.3s;
}
.what-card:hover { transform: translateY(-8px); }
.what-card.card-yellow { background: var(--yellow); color: var(--navy); }
.what-card.card-coral { background: var(--coral); }
.what-card.card-mint { background: var(--mint); color: var(--navy); }
.what-card.card-purple { background: var(--purple); }
.what-card .card-emoji {
font-size: 48px;
margin-bottom: 16px;
display: block;
}
.what-card h3 {
font-family: 'Black Han Sans', sans-serif;
font-size: 22px;
margin-bottom: 10px;
}
.what-card p {
font-size: 15px;
line-height: 1.7;
opacity: 0.85;
}
/* ---- STEPS ---- */
.steps-wrapper {
background: linear-gradient(135deg, #1E1B4B 0%, #0F172A 100%);
padding: clamp(60px, 10vw, 120px) 0;
}
.steps-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(20px, 5vw, 60px);
}
.steps-grid {
display: grid;
gap: 0;
margin-top: 60px;
}
.step-item {
display: grid;
grid-template-columns: auto 1fr;
gap: 32px;
position: relative;
padding-bottom: 56px;
}
.step-item:last-child { padding-bottom: 0; }
.step-left {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.step-num {
width: 60px; height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Black Han Sans', sans-serif;
font-size: 24px;
flex-shrink: 0;
z-index: 1;
position: relative;
}
.step-line {
width: 2px;
flex: 1;
min-height: 40px;
background: linear-gradient(to bottom, currentColor, transparent);
margin-top: 8px;
}
.step-content {
padding-top: 8px;
}
.step-content .step-tag {
font-size: 12px;
letter-spacing: 3px;
opacity: 0.6;
text-transform: uppercase;
margin-bottom: 8px;
font-weight: 800;
}
.step-content h3 {
font-family: 'Black Han Sans', sans-serif;
font-size: clamp(24px, 4vw, 36px);
margin-bottom: 16px;
}
.step-content p {
font-size: 16px;
line-height: 1.8;
color: rgba(255,255,255,0.75);
max-width: 520px;
}
.step-examples {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tag-chip {
padding: 7px 16px;
border-radius: 100px;
font-size: 14px;
font-weight: 700;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
transition: background 0.2s;
cursor: default;
}
.tag-chip:hover { background: rgba(255,255,255,0.2); }
/* Step colors */
.step-item:nth-child(1) .step-num { background: var(--yellow); color: var(--navy); }
.step-item:nth-child(1) .step-line { color: var(--yellow); }
.step-item:nth-child(2) .step-num { background: var(--coral); color: var(--white); }
.step-item:nth-child(2) .step-line { color: var(--coral); }
.step-item:nth-child(3) .step-num { background: var(--mint); color: var(--navy); }
.step-item:nth-child(3) .step-line { color: var(--mint); }
.step-item:nth-child(4) .step-num { background: var(--purple); color: var(--white); }
.step-item:nth-child(4) .step-line { color: var(--purple); }
.step-item:nth-child(5) .step-num { background: var(--orange); color: var(--navy); }
.step-item:nth-child(5) .step-line { color: var(--orange); }
/* ---- TIPS SECTION ---- */
.tips-wrapper {
padding: clamp(60px, 10vw, 120px) clamp(20px, 5vw, 60px);
max-width: 1200px;
margin: 0 auto;
}
.tips-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 48px;
}
@media (max-width: 900px) {
.tips-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.tips-grid { grid-template-columns: 1fr; }
}
.tip-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 28px;
transition: transform 0.3s, background 0.3s;
}
.tip-card:hover {
transform: translateY(-6px);
background: rgba(255,255,255,0.09);
}
.tip-card .tip-emoji { font-size: 36px; margin-bottom: 14px; display: block; }
.tip-card h4 {
font-family: 'Black Han Sans', sans-serif;
font-size: 18px;
margin-bottom: 10px;
color: var(--yellow);
}
.tip-card p {
font-size: 14px;
line-height: 1.7;
color: rgba(255,255,255,0.7);
}
/* ---- EXAMPLE BOARD ---- */
.example-wrapper {
background: linear-gradient(135deg, rgba(78,205,196,0.1) 0%, rgba(168,85,247,0.1) 100%);
border-top: 1px solid rgba(255,255,255,0.07);
border-bottom: 1px solid rgba(255,255,255,0.07);
padding: clamp(60px, 10vw, 120px) clamp(20px, 5vw, 60px);
}
.example-inner { max-width: 1200px; margin: 0 auto; }
.board-preview {
background: var(--white);
color: var(--navy);
border-radius: 28px;
padding: 40px;
margin-top: 48px;
box-shadow: 0 40px 80px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.board-preview::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Ccircle cx='7' cy='7' r='7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.board-header {
text-align: center;
margin-bottom: 36px;
}
.board-header h2 {
font-family: 'Black Han Sans', sans-serif;
font-size: clamp(24px, 5vw, 40px);
color: var(--navy);
}
.board-header .board-name {
color: var(--coral);
font-size: 14px;
margin-top: 6px;
font-weight: 700;
}
.board-sections {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 640px) {
.board-sections { grid-template-columns: 1fr; }
}
.board-section {
border-radius: 16px;
padding: 24px;
min-height: 160px;
}
.board-section.like { background: #FFF3F3; border: 2px dashed var(--coral); }
.board-section.talent { background: #F0FFF4; border: 2px dashed #22C55E; }
.board-section.dream { background: #EFF6FF; border: 2px dashed var(--blue); grid-column: 1 / -1; }
.board-section.todo { background: #FFF8E7; border: 2px dashed var(--orange); grid-column: 1 / -1; }
.board-section h4 {
font-family: 'Black Han Sans', sans-serif;
font-size: 16px;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.board-section.like h4 { color: var(--coral); }
.board-section.talent h4 { color: #22C55E; }
.board-section.dream h4 { color: var(--blue); }
.board-section.todo h4 { color: var(--orange); }
.board-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.board-tag {
padding: 5px 14px;
border-radius: 100px;
font-size: 13px;
font-weight: 700;
}
.board-section.like .board-tag { background: var(--coral); color: white; }
.board-section.talent .board-tag { background: #22C55E; color: white; }
.board-section.dream .board-tag { background: var(--blue); color: white; }
.todo-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
@media (max-width: 640px) {
.todo-list { grid-template-columns: 1fr 1fr; }
}
.todo-item {
background: white;
border-radius: 12px;
padding: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.todo-item .todo-period {
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
color: var(--orange);
text-transform: uppercase;
margin-bottom: 6px;
}
.todo-item p {
font-size: 13px;
line-height: 1.5;
color: var(--navy);
font-weight: 700;
}
.dream-photos {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 8px;
}
.dream-photo {
width: 80px; height: 80px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
flex-direction: column;
font-size: 10px;
font-weight: 700;
gap: 4px;
text-align: center;
color: white;
cursor: default;
transition: transform 0.2s;
}
.dream-photo:hover { transform: scale(1.05); }
.dream-photo span { font-size: 28px; }
/* ---- CHECKLIST ---- */
.checklist-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: clamp(60px, 10vw, 120px) clamp(20px, 5vw, 60px);
}
.checklist-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-top: 48px;
}
@media (max-width: 700px) {
.checklist-grid { grid-template-columns: 1fr; }
}
.checklist-block h3 {
font-family: 'Black Han Sans', sans-serif;
font-size: 22px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.checklist-block .cl-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
font-size: 15px;
line-height: 1.5;
color: rgba(255,255,255,0.8);
cursor: pointer;
transition: color 0.2s;
}
.checklist-block .cl-item:hover { color: white; }
.cl-check {
width: 22px; height: 22px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 6px;
flex-shrink: 0;
margin-top: 2px;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.cl-item.checked .cl-check {
background: var(--mint);
border-color: var(--mint);
color: var(--navy);
}
.cl-item.checked {
color: rgba(255,255,255,0.4);
text-decoration: line-through;
text-decoration-color: var(--mint);
}
.progress-bar-wrap {
margin-top: 20px;
background: rgba(255,255,255,0.1);
border-radius: 100px;
height: 8px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: var(--mint);
border-radius: 100px;
transition: width 0.4s ease;
width: 0%;
}
.progress-label {
font-size: 12px;
color: var(--mint);
margin-top: 8px;
font-weight: 700;
text-align: right;
}
/* ---- DOWNLOAD ---- */
.download-wrapper {
background: var(--yellow);
color: var(--navy);
padding: clamp(60px, 10vw, 120px) clamp(20px, 5vw, 60px);
text-align: center;
position: relative;
overflow: hidden;
}
.download-wrapper::before {
content: '';
position: absolute;
width: 400px; height: 400px;
background: rgba(255,107,107,0.2);
border-radius: 50%;
top: -100px; right: -100px;
}
.download-wrapper::after {
content: '';
position: absolute;
width: 300px; height: 300px;
background: rgba(78,205,196,0.2);
border-radius: 50%;
bottom: -80px; left: -80px;
}
.download-inner { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }
.download-wrapper h2 {
font-family: 'Black Han Sans', sans-serif;
font-size: clamp(36px, 6vw, 64px);
line-height: 1.1;
margin-bottom: 16px;
}
.download-wrapper p {
font-size: 18px;
opacity: 0.7;
margin-bottom: 36px;
line-height: 1.6;
}
.btn-dark {
background: var(--navy);
color: var(--yellow);
font-family: 'Black Han Sans', sans-serif;
font-size: 20px;
padding: 18px 48px;
border: none;
border-radius: 100px;
cursor: none;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 4px 4px 0 rgba(15,23,42,0.3);
text-decoration: none;
display: inline-block;
}
.btn-dark:hover {
transform: translate(-3px, -3px);
box-shadow: 7px 7px 0 rgba(15,23,42,0.3);
}
/* ---- FOOTER ---- */
footer {
background: var(--navy);
border-top: 1px solid rgba(255,255,255,0.07);
padding: 40px clamp(20px, 5vw, 60px);
text-align: center;
font-size: 14px;
color: rgba(255,255,255,0.4);
}
footer span { color: var(--yellow); }
/* ---- SCROLL ANIMATION ---- */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* nav */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 18px clamp(20px, 5vw, 60px);
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(15,23,42,0.8);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nav-logo {
font-family: 'Black Han Sans', sans-serif;
font-size: 22px;
color: var(--yellow);
text-decoration: none;
}
.nav-links {
display: flex;
gap: 28px;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.6);
text-decoration: none;
font-size: 14px;
font-weight: 700;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--yellow); }
@media (max-width: 600px) {
.nav-links { display: none; }
}
.hero { padding-top: 100px; }
/* modal */
.modal-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.8);
backdrop-filter: blur(8px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.modal-overlay.open {
opacity: 1;
pointer-events: all;
}
.modal {
background: #1E1B4B;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 28px;
padding: 40px;
max-width: 540px;
width: 100%;
transform: scale(0.9);
transition: transform 0.3s;
}
.modal-overlay.open .modal { transform: scale(1); }
.modal h2 {
font-family: 'Black Han Sans', sans-serif;
font-size: 28px;
margin-bottom: 20px;
color: var(--yellow);
}
.modal p {
font-size: 15px;
line-height: 1.8;
color: rgba(255,255,255,0.8);
margin-bottom: 16px;
}
.modal-close {
background: var(--yellow);
color: var(--navy);
font-family: 'Black Han Sans', sans-serif;
font-size: 16px;
padding: 12px 32px;
border: none;
border-radius: 100px;
cursor: none;
margin-top: 12px;
transition: transform 0.2s;
}
.modal-close:hover { transform: scale(1.05); }
/* download worksheet */
@media print {
body { background: white; color: black; cursor: auto; }
.cursor, nav, .hero, .steps-wrapper, .tips-wrapper, .checklist-wrapper, .download-wrapper, footer, .example-wrapper > .section-label, .example-wrapper > .section-title { display: none !important; }
.example-wrapper { padding: 20px; background: white; }
.board-preview { box-shadow: none; border: 2px solid #ddd; }
}
</style>
</head>
<body>
<div class="cursor" id="cursor"></div>
<!-- NAV -->
<nav>
<a href="#" class="nav-logo">🌟 드림보드</a>
<ul class="nav-links">
<li><a href="#what">드림보드란?</a></li>
<li><a href="#steps">만드는 법</a></li>
<li><a href="#example">예시 보기</a></li>
<li><a href="#checklist">체크리스트</a></li>
</ul>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-bg"></div>
<div class="hero-badge">✨ 나만의 꿈을 시각화하자</div>
<h1 class="hero-title">
<div class="line1">나의 꿈을</div>
<div class="line2">그림으로</div>
<div class="line3">만들자!</div>
</h1>
<p class="hero-sub">드림보드는 내가 원하는 미래를 그림과 사진으로 표현하는 비전 보드야. 막연한 꿈이 아니라 <strong>구체적인 목표</strong>로 만드는 방법을 알아보자 🚀</p>
<div class="hero-cta">
<a href="#steps" class="btn-primary">지금 시작하기 →</a>
<a href="#what" class="btn-secondary">먼저 알아보기</a>
</div>
</section>
<!-- WHAT IS -->
<section class="section" id="what">
<p class="section-label reveal">드림보드가 뭔데?</p>
<h2 class="section-title reveal">이렇게 <span style="color:var(--yellow)">좋은 점</span>이 있어</h2>
<div class="what-grid">
<div class="what-card card-yellow reveal">
<span class="card-emoji">🧠</span>
<h3>뇌에게 목표를 각인시켜</h3>
<p>매일 보는 이미지는 우리 뇌를 훈련시켜서 목표를 향해 자연스럽게 행동하게 만들어. 심리학적으로도 증명된 방법이야!</p>
</div>
<div class="what-card card-coral reveal">
<span class="card-emoji">💡</span>
<h3>막연한 꿈이 구체적으로 돼</h3>
<p>"잘 되고 싶어"가 아니라 "2년 후 OO이 되어 있다"처럼 구체적인 모습을 상상하게 해줘. 디테일이 클수록 목표 달성률이 올라가!</p>
</div>
<div class="what-card card-mint reveal">
<span class="card-emoji">🎯</span>
<h3>지금 당장 뭘 해야 할지 알 수 있어</h3>
<p>미래 목표에서 거꾸로 계산하면 오늘, 이번 주, 이번 달에 뭘 해야 하는지 자연스럽게 나와. 방황하는 시간이 줄어들어!</p>
</div>
<div class="what-card card-purple reveal">
<span class="card-emoji">🔥</span>
<h3>동기부여가 지속돼</h3>
<p>공부하기 싫을 때, 포기하고 싶을 때 드림보드를 보면 "아, 내가 왜 이걸 하고 있는지"가 생각나. 끝까지 버티는 힘이 돼!</p>
</div>
</div>
</section>
<!-- STEPS -->
<section class="steps-wrapper" id="steps">
<div class="steps-inner">
<p class="section-label reveal">따라하면 누구나 OK</p>
<h2 class="section-title reveal">5단계로 <span style="color:var(--mint)">완성</span>하자</h2>
<div class="steps-grid">
<div class="step-item reveal">
<div class="step-left">
<div class="step-num">01</div>
<div class="step-line"></div>
</div>
<div class="step-content">
<div class="step-tag">Step 1 · 자기발견</div>
<h3>내가 좋아하는 게 뭔지 찾기 🔍</h3>
<p>남들 눈치 보지 말고 진짜 내가 설레는 것들을 적어봐. 하루에 몇 시간이 지나도 모를 정도로 푹 빠지는 게 있어? 그게 바로 열쇠야.</p>
<div class="step-examples">
<span class="tag-chip">📱 유튜브 / 쇼츠</span>
<span class="tag-chip">🎮 게임</span>
<span class="tag-chip">🎵 음악 / 춤</span>
<span class="tag-chip">✍️ 그림 / 웹툰</span>
<span class="tag-chip">🍳 요리</span>
<span class="tag-chip">⚽ 스포츠</span>
<span class="tag-chip">📚 독서</span>
<span class="tag-chip">🤝 사람 만나기</span>
</div>
</div>
</div>
<div class="step-item reveal">
<div class="step-left">
<div class="step-num">02</div>
<div class="step-line"></div>
</div>
<div class="step-content">
<div class="step-tag">Step 2 · 강점발견</div>
<h3>내가 잘 하는 게 뭔지 파악하기 💪</h3>
<p>노력 안 해도 남들보다 잘 되는 게 있어? 친구들이 "너는 왜 이렇게 잘 해?"라고 물어본 적 있어? 그게 바로 너의 강점이야!</p>
<div class="step-examples">
<span class="tag-chip">🗣️ 말하기 / 설득</span>
<span class="tag-chip">🧮 수학 / 논리</span>
<span class="tag-chip">🎨 창의력</span>
<span class="tag-chip">👂 공감 / 경청</span>
<span class="tag-chip">📊 분석 / 정리</span>
<span class="tag-chip">🌐 언어</span>
<span class="tag-chip">🏃 체력 / 운동</span>
</div>
</div>
</div>
<div class="step-item reveal">
<div class="step-left">
<div class="step-num">03</div>
<div class="step-line"></div>
</div>
<div class="step-content">
<div class="step-tag">Step 3 · 미래상상</div>
<h3>내가 되고 싶은 모습 상상하기 ✨</h3>
<p>5년 후, 10년 후 너는 어떤 사람이 돼 있으면 좋겠어? 어떤 일을 하고 있을까? 어디서 살고 싶어? 가능한 구체적으로 상상해봐. 사진이나 이미지로 모아도 좋아!</p>
<div class="step-examples">
<span class="tag-chip">💼 직업 / 일</span>
<span class="tag-chip">🏡 살고 싶은 곳</span>
<span class="tag-chip">👨👩👧 가족 / 관계</span>
<span class="tag-chip">🌍 여행 / 경험</span>
<span class="tag-chip">💪 건강한 모습</span>
<span class="tag-chip">😊 하루 일상</span>
</div>
</div>
</div>
<div class="step-item reveal">
<div class="step-left">
<div class="step-num">04</div>
<div class="step-line"></div>
</div>
<div class="step-content">
<div class="step-tag">Step 4 · 소망수집</div>
<h3>갖고 싶은 것들 모으기 🛍️</h3>
<p>물질적인 것도 OK! 갖고 싶은 물건, 가고 싶은 곳, 먹어보고 싶은 것, 해보고 싶은 경험을 자유롭게 모아봐. 부끄럽게 생각하지 마, 욕망이 동기부여가 돼!</p>
<div class="step-examples">
<span class="tag-chip">💻 원하는 기기</span>
<span class="tag-chip">✈️ 여행지</span>
<span class="tag-chip">🎓 가고 싶은 학교</span>
<span class="tag-chip">🎸 배우고 싶은 것</span>
<span class="tag-chip">🏆 이루고 싶은 성취</span>
</div>
</div>
</div>
<div class="step-item reveal">
<div class="step-left">
<div class="step-num">05</div>
<div class="step-line"></div>
</div>
<div class="step-content">
<div class="step-tag">Step 5 · 액션플랜</div>
<h3>지금 당장 할 일 도출하기 📋</h3>
<p>꿈만 꾸면 공상이야. 행동해야 현실이 돼! 목표에서 거꾸로 내려와서 이번 달, 이번 주, 오늘 당장 할 수 있는 작은 행동을 적어봐.</p>
<div class="step-examples">
<span class="tag-chip">📅 이번 달 목표</span>
<span class="tag-chip">📆 이번 주 할 일</span>
<span class="tag-chip">☀️ 오늘 할 일</span>
<span class="tag-chip">📚 배워야 할 것</span>
<span class="tag-chip">🤝 만나야 할 사람</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- TIPS -->
<section class="tips-wrapper" id="tips">
<p class="section-label reveal">더 잘 만들고 싶어?</p>
<h2 class="section-title reveal">꿀팁 <span style="color:var(--coral)">모음.zip</span></h2>
<div class="tips-grid">
<div class="tip-card reveal">
<span class="tip-emoji">🖼️</span>
<h4>이미지를 많이 써</h4>
<p>글보다 사진, 그림, 이미지가 더 강력해. 핀터레스트(Pinterest)나 구글에서 원하는 이미지를 검색해서 모아봐.</p>
</div>
<div class="tip-card reveal">
<span class="tip-emoji">👀</span>
<h4>매일 볼 수 있는 곳에 붙여</h4>
<p>책상 앞, 방 문, 핸드폰 배경화면으로 만들어도 좋아. 자주 볼수록 뇌에 새겨져!</p>
</div>
<div class="tip-card reveal">
<span class="tip-emoji">✍️</span>
<h4>현재형으로 써</h4>
<p>"되고 싶다"보다 "나는 ○○이다"처럼 현재형으로 써. 뇌가 이미 이뤄진 것처럼 인식해서 더 강력하게 작동해!</p>
</div>
<div class="tip-card reveal">
<span class="tip-emoji">🎨</span>
<h4>내 스타일로 꾸며</h4>
<p>정해진 형식 없어! 잡지 잘라 붙이기, 디지털 도구, 캔버스(Canva) 같은 앱 사용해도 좋아.</p>
</div>
<div class="tip-card reveal">
<span class="tip-emoji">💬</span>
<h4>친구와 같이 만들어</h4>
<p>혼자 하면 부끄럽지만 같이 하면 재밌어. 서로의 꿈을 공유하면 더 큰 자극이 돼!</p>
</div>
<div class="tip-card reveal">
<span class="tip-emoji">🔄</span>
<h4>3~6개월마다 업데이트해</h4>
<p>꿈은 변해도 돼. 주기적으로 돌아보고 달라진 꿈이 있으면 업데이트하면서 성장을 확인해봐.</p>
</div>
</div>
</section>
<!-- EXAMPLE BOARD -->
<section class="example-wrapper" id="example">
<div class="example-inner">
<p class="section-label reveal">이렇게 만들면 돼</p>
<h2 class="section-title reveal">예시 <span style="color:var(--purple)">드림보드</span> 구경해봐</h2>
<p class="reveal" style="color:rgba(255,255,255,0.6); font-size:16px; margin-top:12px;">경영학과 3학년 김민준의 드림보드 예시야. 참고해서 나만의 버전으로 만들어봐!</p>
<div class="board-preview reveal">
<div class="board-header">
<h2>🌟 김민준의 드림보드 2025</h2>
<p class="board-name">경영학과 3학년 · 23세 · "나는 사람과 기술을 연결하는 스타트업 창업가다!"</p>
</div>
<div class="board-sections">
<div class="board-section like">
<h4>❤️ 내가 좋아하는 것</h4>
<div class="board-tags">
<span class="board-tag">스타트업 뉴스 읽기</span>
<span class="board-tag">사이드 프로젝트</span>
<span class="board-tag">네트워킹 파티</span>
<span class="board-tag">테크 팟캐스트</span>
<span class="board-tag">여행 / 백패킹</span>
<span class="board-tag">농구</span>
</div>
</div>
<div class="board-section talent">
<h4>💚 내가 잘 하는 것</h4>
<div class="board-tags" style="flex-direction:column; gap:4px;">
<span style="font-size:14px; font-weight:700; color:#15803d;">✓ 초면인 사람도 금방 친해짐 → 영업·관계 구축 탁월</span>
<span style="font-size:14px; font-weight:700; color:#15803d;">✓ 복잡한 걸 간단하게 설명하기</span>
<span style="font-size:14px; font-weight:700; color:#15803d;">✓ 아이디어를 빠르게 시제품으로 만들기</span>
<span style="font-size:14px; font-weight:700; color:#15803d;">✓ 팀 분위기 살리고 동기 부여하기</span>
</div>
</div>
<div class="board-section dream">
<h4>💙 내가 되고 싶은 모습 + 갖고 싶은 것</h4>
<div class="dream-photos">
<div class="dream-photo" style="background:#FF6B6B;">
<span>🚀</span>스타트업 창업
</div>
<div class="dream-photo" style="background:#A855F7;">
<span>💼</span>시리즈A 투자
</div>
<div class="dream-photo" style="background:#3B82F6;">
<span>🌏</span>글로벌 진출
</div>
<div class="dream-photo" style="background:#22C55E;">
<span>🏢</span>강남 오피스
</div>
<div class="dream-photo" style="background:#FF9F43;">
<span>🚗</span>테슬라 모델3
</div>
<div class="dream-photo" style="background:#4ECDC4;">
<span>🏝️</span>한 달 살기
</div>
</div>
<p style="margin-top:16px; font-size:13px; color:#6B7280; font-weight:700;">💡 실제 사진을 잡지에서 오리거나 핀터레스트에서 찾아서 붙여봐!</p>
</div>
<div class="board-section todo">
<h4>🎯 지금 당장 해야 할 일</h4>
<div class="todo-list">
<div class="todo-item">
<div class="todo-period">오늘</div>
<p>린 스타트업 책 30페이지 읽기 + 아이디어 노트 정리</p>
</div>
<div class="todo-item">
<div class="todo-period">이번 주</div>
<p>관심 분야 스타트업 창업자 LinkedIn 팔로우 5명 + 커피챗 요청</p>
</div>
<div class="todo-item">
<div class="todo-period">이번 달</div>
<p>교내 창업 동아리 가입 or 해커톤 1개 참가 신청</p>
</div>
<div class="todo-item">
<div class="todo-period">6개월</div>
<p>MVP(최소기능제품) 완성, 사용자 인터뷰 20건 이상</p>
</div>
<div class="todo-item">
<div class="todo-period">1년</div>
<p>예비창업패키지 지원, 팀 구성 완료, 초기 매출 발생</p>
</div>
<div class="todo-item">
<div class="todo-period">졸업 전</div>
<p>법인 설립 or 우수 기업 인턴으로 실무 역량 검증</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CHECKLIST -->
<section class="checklist-wrapper" id="checklist">
<p class="section-label reveal">다 만들기 전에 확인해!</p>
<h2 class="section-title reveal">완성 <span style="color:var(--mint)">체크리스트</span></h2>
<p class="reveal" style="color:rgba(255,255,255,0.6); margin-top:8px; font-size:16px;">클릭하면 체크 표시가 돼!</p>
<div class="checklist-grid">
<div class="checklist-block reveal">
<h3 style="color:var(--yellow)">📝 내용 체크</h3>
<div class="cl-item" onclick="toggleCheck(this)">
<div class="cl-check">✓</div>
<span>내가 진짜로 좋아하는 것 3가지 이상 적었나?</span>
</div>
<div class="cl-item" onclick="toggleCheck(this)">
<div class="cl-check">✓</div>
<span>남들이 인정해준 내 강점을 찾았나?</span>
</div>
<div class="cl-item" onclick="toggleCheck(this)">
<div class="cl-check">✓</div>
<span>5년 후 내 모습을 구체적으로 그렸나?</span>
</div>
<div class="cl-item" onclick="toggleCheck(this)">
<div class="cl-check">✓</div>
<span>갖고 싶은 것, 가고 싶은 곳을 이미지로 모았나?</span>
</div>
<div class="cl-item" onclick="toggleCheck(this)">
<div class="cl-check">✓</div>
<span>오늘 당장 할 수 있는 작은 행동을 적었나?</span>
</div>
<div class="cl-item" onclick="toggleCheck(this)">
<div class="cl-check">✓</div>
<span>단기(1개월), 중기(6개월), 장기(1~3년) 목표가 다 있나?</span>
</div>
<div class="progress-bar-wrap" id="progressLeft">
<div class="progress-bar-fill" id="fillLeft"></div>
</div>
<div class="progress-label" id="labelLeft">0 / 6 완료</div>
</div>
<div class="checklist-block reveal">
<h3 style="color:var(--coral)">🎨 형식 체크</h3>
<div class="cl-item" onclick="toggleCheck(this)">
<div class="cl-check">✓</div>
<span>글자보다 이미지나 사진을 더 많이 활용했나?</span>
</div>
<div class="cl-item" onclick="toggleCheck(this)">
<div class="cl-check">✓</div>
<span>보기만 해도 설레는 느낌이 드나?</span>
</div>
<div class="cl-item" onclick="toggleCheck(this)">
<div class="cl-check">✓</div>
<span>색상이 조화롭고 한눈에 들어오나?</span>
</div>
<div class="cl-item" onclick="toggleCheck(this)">
<div class="cl-check">✓</div>
<span>매일 볼 수 있는 곳에 붙일 계획이 있나?</span>
</div>
<div class="cl-item" onclick="toggleCheck(this)">
<div class="cl-check">✓</div>
<span>내 이름과 날짜를 넣었나?</span>
</div>
<div class="cl-item" onclick="toggleCheck(this)">
<div class="cl-check">✓</div>
<span>사진을 찍거나 디지털로 저장해뒀나?</span>
</div>
<div class="progress-bar-wrap" id="progressRight">
<div class="progress-bar-fill" id="fillRight"></div>
</div>
<div class="progress-label" id="labelRight">0 / 6 완료</div>
</div>
</div>
</section>
<!-- DOWNLOAD -->
<section class="download-wrapper" id="download">
<div class="download-inner">
<h2>이제 직접 만들어봐! 🚀</h2>
<p>워크시트를 프린트하거나 디지털 도구로 나만의 드림보드를 완성해봐. 오늘 시작하는 게 가장 중요해!</p>
<a href="#" class="btn-dark" onclick="openModal(); return false;">📄 워크시트 가이드 보기</a>
</div>
</section>
<!-- FOOTER -->
<footer>
만든 날: 2025 · 드림보드 가이드 💛 <span>오늘 시작하는 게 제일 빠르다!</span>
</footer>
<!-- MODAL -->
<div class="modal-overlay" id="modal">
<div class="modal">
<h2>📄 드림보드 워크시트 가이드</h2>
<p><strong style="color:var(--yellow)">준비물</strong><br>A3 또는 A4 종이 (큰 게 좋아) / 잡지, 프린트 이미지 / 가위, 풀 / 펜, 색연필 / 또는 Canva, 피그마 같은 디지털 도구</p>
<p><strong style="color:var(--mint)">순서</strong><br>
1️⃣ 종이 중앙에 내 이름과 날짜 써<br>
2️⃣ 4구역으로 나눠: 좋아하는 것 / 잘 하는 것 / 되고 싶은 모습+갖고 싶은 것 / 할 일<br>
3️⃣ 각 구역에 이미지 먼저 배치하고, 키워드로 보완해<br>
4️⃣ 색감 통일해서 꾸미기<br>
5️⃣ 완성 후 사진 찍고 → 폰 배경화면 설정!</p>
<p><strong style="color:var(--coral)">디지털 도구 추천</strong><br>🎨 Canva (canva.com) - 무료 템플릿 풍부<br>📌 Pinterest - 이미지 수집용<br>📝 Notion - 텍스트 + 이미지 정리</p>
<button class="modal-close" onclick="closeModal()">확인했어! 만들러 간다 🚀</button>
</div>
</div>
<script>
// Custom cursor
const cursor = document.getElementById('cursor');
document.addEventListener('mousemove', e => {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
});
document.querySelectorAll('a, button, .tip-card, .what-card, .cl-item, .dream-photo').forEach(el => {
el.addEventListener('mouseenter', () => {
cursor.style.width = '40px';
cursor.style.height = '40px';
});
el.addEventListener('mouseleave', () => {
cursor.style.width = '20px';
cursor.style.height = '20px';
});
});
// Floating emojis
const emojis = ['⭐','🎯','💫','🚀','🌟','💡','🔥','✨','🎨','💪','🏆','🎵','📚','🌈','💎'];
function spawnEmoji() {
const el = document.createElement('div');
el.classList.add('floating-emoji');
el.textContent = emojis[Math.floor(Math.random() * emojis.length)];
el.style.left = Math.random() * 100 + 'vw';
const duration = 8 + Math.random() * 10;
el.style.animationDuration = duration + 's';
el.style.animationDelay = Math.random() * 4 + 's';
document.querySelector('.hero').appendChild(el);
setTimeout(() => el.remove(), (duration + 4) * 1000);
}
for (let i = 0; i < 15; i++) spawnEmoji();
setInterval(spawnEmoji, 2000);
// Scroll reveal
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver(entries => {
entries.forEach((entry, i) => {
if (entry.isIntersecting) {
setTimeout(() => entry.target.classList.add('visible'), i * 80);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
reveals.forEach(el => observer.observe(el));
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
const target = document.querySelector(a.getAttribute('href'));
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// Checklist
function toggleCheck(item) {
item.classList.toggle('checked');
updateProgress();
}
function updateProgress() {
const blocks = document.querySelectorAll('.checklist-block');
blocks.forEach((block, i) => {
const items = block.querySelectorAll('.cl-item');
const checked = block.querySelectorAll('.cl-item.checked').length;
const fill = block.querySelector('.progress-bar-fill');
const label = block.querySelector('.progress-label');
fill.style.width = (checked / items.length * 100) + '%';
label.textContent = `${checked} / ${items.length} 완료`;
});
}
// Modal
function openModal() {
document.getElementById('modal').classList.add('open');
}
function closeModal() {
document.getElementById('modal').classList.remove('open');
}
document.getElementById('modal').addEventListener('click', e => {
if (e.target === document.getElementById('modal')) closeModal();
});
</script>
</body>
</html>
결과와 배운 점
사실상 교수자 입장에서 만들었으면 하는 항목이 정해져 있었는데 그걸 그냥 노골적으로 작성해 만들어 달라고 하는 편이 좋았겠다 싶습니다.
예시를 뭘로 만들지를 조금 고민해봐야 할 것 같은데요.
파워포인트로 만들지, AI를 써서 만들지 이 부분에 대한 고민이 없어서 사실상 가이드만 제공해주는 형태라 어떻게 만들게 할지에 대한 가이드를 제공하지 못하는 것 같습니다.
과정 중에 어떤 시행착오를 겪었나요?
타겟을 명확하게 하지 않아서 여러번 수정했고, 결과도 마음에 들지 않아서 수정이 좀 더 되어야 겠다 싶습니다.
앞으로의 계획이 있다면 들려주세요.
드림보드의 예시를 만들어서 좀 더 명확하게 어떤 결과물을 도출하고 싶은지에 대한 구체화를 해서 다시 제작하는 것이 좋겠다 싶습니다.
