소개
요즘 옵시디언에서 이것저것 메모를 하고 있는데요.
그걸 가지고 학생들 취업 준비 가이드 안내 페이지를 만들어 보면 어떨까? 라고 생각을 하게 되었습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
cluade code를 이용해서 html 파일을 만들어 달라고 했습니다.
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
주의사항.md 파일의 내용을 토대로 학생들에게 안내할 html 단일 페이지를 구현해줘.
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
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>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
background: #f0f4f8;
color: #1a202c;
min-height: 100vh;
}
header {
background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
color: white;
padding: 48px 24px 40px;
text-align: center;
}
header h1 {
font-size: 2rem;
font-weight: 700;
letter-spacing: -0.5px;
margin-bottom: 8px;
}
header p {
font-size: 0.95rem;
color: #cbd5e0;
}
main {
max-width: 860px;
margin: 0 auto;
padding: 40px 20px 60px;
display: flex;
flex-direction: column;
gap: 28px;
}
/* ── 카드 공통 ── */
.card {
background: white;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0,0,0,.08);
overflow: hidden;
}
.card-header {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 24px 16px;
border-bottom: 1px solid #e2e8f0;
}
.card-header .icon {
font-size: 1.5rem;
line-height: 1;
}
.card-header h2 {
font-size: 1.1rem;
font-weight: 700;
color: #2d3748;
}
.card-body {
padding: 20px 24px 24px;
}
/* ── 이력서 팁 ── */
.tip-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.tip-list li {
display: flex;
align-items: flex-start;
gap: 12px;
background: #f7fafc;
border-left: 4px solid #4299e1;
border-radius: 0 8px 8px 0;
padding: 12px 14px;
font-size: 0.93rem;
line-height: 1.6;
color: #2d3748;
}
.tip-list li .num {
font-weight: 700;
color: #4299e1;
min-width: 20px;
}
/* ── QA 스텝 ── */
.steps {
display: flex;
flex-direction: column;
gap: 16px;
}
.step {
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
transition: box-shadow .2s;
}
.step:hover {
box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.step-header {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
cursor: pointer;
user-select: none;
background: #fafafa;
}
.step-badge {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 0.8rem;
font-weight: 700;
flex-shrink: 0;
}
.step-badge.blue { background: #ebf8ff; color: #2b6cb0; }
.step-badge.green { background: #f0fff4; color: #276749; }
.step-badge.purple { background: #faf5ff; color: #553c9a; }
.step-badge.orange { background: #fffaf0; color: #c05621; }
.step-badge.red { background: #fff5f5; color: #c53030; }
.step-title {
font-size: 0.97rem;
font-weight: 600;
color: #2d3748;
flex: 1;
}
.step-toggle {
font-size: 0.75rem;
color: #a0aec0;
transition: transform .25s;
}
.step.open .step-toggle {
transform: rotate(180deg);
}
.step-body {
display: none;
padding: 0 18px 16px 64px;
}
.step.open .step-body {
display: block;
}
.step-body ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.step-body ul li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.88rem;
color: #4a5568;
line-height: 1.6;
}
.step-body ul li::before {
content: '•';
color: #a0aec0;
flex-shrink: 0;
margin-top: 1px;
}
/* ── 진행 체크리스트 ── */
.checklist {
display: flex;
flex-direction: column;
gap: 10px;
}
.checklist label {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 8px;
cursor: pointer;
transition: background .15s;
font-size: 0.9rem;
color: #2d3748;
}
.checklist label:hover {
background: #f7fafc;
}
.checklist input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #48bb78;
flex-shrink: 0;
}
.checklist input[type="checkbox"]:checked + span {
text-decoration: line-through;
color: #a0aec0;
}
/* ── 게임 기록 테이블 ── */
.table-wrap {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
thead tr {
background: #edf2f7;
}
th, td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid #e2e8f0;
white-space: nowrap;
}
th {
font-weight: 700;
color: #4a5568;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
tbody tr:hover {
background: #f7fafc;
}
tbody tr td:first-child {
font-weight: 600;
color: #2d3748;
}
.add-row-btn {
margin-top: 12px;
padding: 8px 16px;
background: #ebf8ff;
color: #2b6cb0;
border: 1px solid #bee3f8;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: background .15s;
}
.add-row-btn:hover {
background: #bee3f8;
}
/* ── 진행률 바 ── */
.progress-section {
display: flex;
flex-direction: column;
gap: 14px;
}
.progress-item label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
font-size: 0.88rem;
}
.progress-item label span:first-child {
font-weight: 600;
color: #2d3748;
}
.progress-item label .count {
font-size: 0.82rem;
color: #718096;
}
.bar-bg {
background: #e2e8f0;
border-radius: 99px;
height: 10px;
overflow: hidden;
}
.bar-fill {
height: 100%;
border-radius: 99px;
transition: width .4s ease;
}
.bar-fill.blue { background: linear-gradient(90deg,#63b3ed,#4299e1); }
.bar-fill.green { background: linear-gradient(90deg,#68d391,#48bb78); }
.bar-fill.purple { background: linear-gradient(90deg,#b794f4,#9f7aea); }
.progress-input {
display: flex;
gap: 8px;
margin-top: 6px;
}
.progress-input input {
width: 70px;
padding: 4px 8px;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 0.85rem;
text-align: center;
}
.progress-input button {
padding: 4px 12px;
background: #4299e1;
color: white;
border: none;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
}
.progress-input button:hover {
background: #3182ce;
}
/* ── 반응형 ── */
@media (max-width: 540px) {
header h1 { font-size: 1.5rem; }
.step-body { padding-left: 18px; }
}
</style>
</head>
<body>
<header>
<h1>취업 준비 가이드</h1>
<p>이력서 & 자기소개서 · QA 취업 로드맵 · 진행 관리</p>
</header>
<main>
<!-- ── 1. 이력서 & 자기소개서 주의사항 ── -->
<div class="card">
<div class="card-header">
<span class="icon">📄</span>
<h2>이력서 & 자기소개서 작성 주의사항</h2>
</div>
<div class="card-body">
<ul class="tip-list">
<li>
<span class="num">1</span>
<span>제목 혹은 소제목이 있을 경우, <strong>하고 싶은 이야기를 앞에 먼저</strong> 작성한다.</span>
</li>
<li>
<span class="num">2</span>
<span>매번 지원하는 <strong>회사에 맞춰</strong> 이력서를 보완한다. <strong>매우 열심히!!!!</strong></span>
</li>
</ul>
</div>
</div>
<!-- ── 2. QA 취업 준비 로드맵 ── -->
<div class="card">
<div class="card-header">
<span class="icon">🗺️</span>
<h2>QA 취업 준비 로드맵</h2>
</div>
<div class="card-body">
<div class="steps">
<div class="step open" id="step1">
<div class="step-header" onclick="toggleStep('step1')">
<span class="step-badge blue">0</span>
<span class="step-title">회사 정하고 이력서 & 자기소개서 쓰기</span>
<span class="step-toggle">▼</span>
</div>
<div class="step-body">
<ul>
<li>매번 정성스럽게 일주일간 진행한 내용을 추가해서 보완하여 작성</li>
<li>지원 회사의 요구사항을 꼼꼼히 파악하고 맞춤형으로 작성</li>
</ul>
</div>
</div>
<div class="step" id="step2">
<div class="step-header" onclick="toggleStep('step2')">
<span class="step-badge green">0</span>
<span class="step-title">게임 플레이 (모바일 인덱스 순위 기준)</span>
<span class="step-toggle">▼</span>
</div>
<div class="step-body">
<ul>
<li>각 게임별로 다음 항목을 기록한다:</li>
<li><strong>플랫폼</strong> (예: iOS / Android)</li>
<li><strong>장르</strong> (예: RPG, 전략, 퍼즐 등)</li>
<li><strong>레벨(티어)</strong> — 현재 달성한 레벨 또는 등급</li>
<li><strong>플레이 기간</strong> — 시작일 ~ 종료일</li>
<li><strong>게임 설명</strong> — 20자 내외로 핵심 요약</li>
</ul>
</div>
</div>
<div class="step" id="step3">
<div class="step-header" onclick="toggleStep('step3')">
<span class="step-badge purple">2</span>
<span class="step-title">버그 리포트 100개 작성 (회사 제출용 30개)</span>
<span class="step-toggle">▼</span>
</div>
<div class="step-body">
<ul>
<li>총 100개의 버그 리포트 작성</li>
<li>그 중 30개를 회사 제출용으로 정리 · 고도화</li>
<li>재현 방법, 심각도, 스크린샷 등 포함하여 작성</li>
</ul>
</div>
</div>
<div class="step" id="step4">
<div class="step-header" onclick="toggleStep('step4')">
<span class="step-badge orange">3</span>
<span class="step-title">TC 작성 — 7개 게임, UI 하나에 TC 400개</span>
<span class="step-toggle">▼</span>
</div>
<div class="step-body">
<ul>
<li>게임 7개에 대해 각각 TC를 작성 (UI 기준 400개)</li>
<li>매주 1개씩 순차적으로 작업하여 7개 완성</li>
<li>7개 완성 후 순번을 정해 매주 돌아가면서 개선</li>
</ul>
</div>
</div>
<div class="step" id="step5">
<div class="step-header" onclick="toggleStep('step5')">
<span class="step-badge red">4</span>
<span class="step-title">포트폴리오 과제 완성</span>
<span class="step-toggle">▼</span>
</div>
<div class="step-body">
<ul>
<li>시간과 노력이 듬뿍 담긴 포트폴리오 과제 완성</li>
<li>지금까지의 버그 리포트, TC, 게임 플레이 기록을 종합하여 구성</li>
<li>지원하는 회사의 직무에 맞게 강조점을 조정</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- ── 3. 진행 현황 ── -->
<div class="card">
<div class="card-header">
<span class="icon">📊</span>
<h2>진행 현황</h2>
</div>
<div class="card-body">
<div class="progress-section">
<div class="progress-item">
<label>
<span>버그 리포트</span>
<span class="count" id="bug-label">0 / 100</span>
</label>
<div class="bar-bg"><div class="bar-fill blue" id="bug-bar" style="width:0%"></div></div>
<div class="progress-input">
<input type="number" id="bug-input" min="0" max="100" placeholder="0" />
<button onclick="updateProgress('bug', 100)">업데이트</button>
</div>
</div>
<div class="progress-item">
<label>
<span>TC 작성 (게임 수)</span>
<span class="count" id="tc-label">0 / 7</span>
</label>
<div class="bar-bg"><div class="bar-fill green" id="tc-bar" style="width:0%"></div></div>
<div class="progress-input">
<input type="number" id="tc-input" min="0" max="7" placeholder="0" />
<button onclick="updateProgress('tc', 7)">업데이트</button>
</div>
</div>
<div class="progress-item">
<label>
<span>게임 플레이 기록</span>
<span class="count" id="game-label">0 / 10</span>
</label>
<div class="bar-bg"><div class="bar-fill purple" id="game-bar" style="width:0%"></div></div>
<div class="progress-input">
<input type="number" id="game-input" min="0" max="10" placeholder="0" />
<button onclick="updateProgress('game', 10)">업데이트</button>
</div>
</div>
</div>
</div>
</div>
<!-- ── 4. 게임 플레이 기록표 ── -->
<div class="card">
<div class="card-header">
<span class="icon">🎮</span>
<h2>게임 플레이 기록표</h2>
</div>
<div class="card-body">
<div class="table-wrap">
<table id="game-table">
<thead>
<tr>
<th>#</th>
<th>게임명</th>
<th>플랫폼</th>
<th>장르</th>
<th>레벨/티어</th>
<th>플레이 기간</th>
<th>게임 설명 (20자)</th>
</tr>
</thead>
<tbody id="game-tbody">
<tr>
<td>1</td>
<td><input type="text" style="width:100px;border:none;background:transparent;font-size:.85rem;" placeholder="게임명" /></td>
<td><input type="text" style="width:70px;border:none;background:transparent;font-size:.85rem;" placeholder="iOS/AOS" /></td>
<td><input type="text" style="width:60px;border:none;background:transparent;font-size:.85rem;" placeholder="RPG" /></td>
<td><input type="text" style="width:70px;border:none;background:transparent;font-size:.85rem;" placeholder="Lv.30" /></td>
<td><input type="text" style="width:110px;border:none;background:transparent;font-size:.85rem;" placeholder="24.01~24.03" /></td>
<td><input type="text" style="width:140px;border:none;background:transparent;font-size:.85rem;" placeholder="한 줄 설명" /></td>
</tr>
</tbody>
</table>
</div>
<button class="add-row-btn" onclick="addGameRow()">+ 행 추가</button>
</div>
</div>
<!-- ── 5. 주간 체크리스트 ── -->
<div class="card">
<div class="card-header">
<span class="icon">✅</span>
<h2>주간 체크리스트</h2>
</div>
<div class="card-body">
<div class="checklist">
<label><input type="checkbox" /><span>이력서 / 자기소개서 보완 (주 1회)</span></label>
<label><input type="checkbox" /><span>게임 플레이 기록 업데이트</span></label>
<label><input type="checkbox" /><span>버그 리포트 작성 (목표 분량 채우기)</span></label>
<label><input type="checkbox" /><span>TC 작성 또는 기존 TC 개선</span></label>
<label><input type="checkbox" /><span>포트폴리오 내용 추가 / 정리</span></label>
<label><input type="checkbox" /><span>지원 회사 조사 및 리스트 업데이트</span></label>
</div>
</div>
</div>
</main>
<script>
// 스텝 토글
function toggleStep(id) {
const el = document.getElementById(id);
el.classList.toggle('open');
}
// 진행률 업데이트
function updateProgress(key, max) {
const input = document.getElementById(key + '-input');
const bar = document.getElementById(key + '-bar');
const label = document.getElementById(key + '-label');
let val = Math.min(Math.max(parseInt(input.value) || 0, 0), max);
const pct = (val / max * 100).toFixed(1);
bar.style.width = pct + '%';
label.textContent = val + ' / ' + max;
}
// 게임 기록 행 추가
let rowCount = 1;
function addGameRow() {
rowCount++;
const tbody = document.getElementById('game-tbody');
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${rowCount}</td>
<td><input type="text" style="width:100px;border:none;background:transparent;font-size:.85rem;" placeholder="게임명" /></td>
<td><input type="text" style="width:70px;border:none;background:transparent;font-size:.85rem;" placeholder="iOS/AOS" /></td>
<td><input type="text" style="width:60px;border:none;background:transparent;font-size:.85rem;" placeholder="RPG" /></td>
<td><input type="text" style="width:70px;border:none;background:transparent;font-size:.85rem;" placeholder="Lv.30" /></td>
<td><input type="text" style="width:110px;border:none;background:transparent;font-size:.85rem;" placeholder="24.01~24.03" /></td>
<td><input type="text" style="width:140px;border:none;background:transparent;font-size:.85rem;" placeholder="한 줄 설명" /></td>
`;
tbody.appendChild(tr);
}
</script>
</body>
</html>
결과와 배운 점
md 파일의 메모를 토대로 코드를 작성해 본 것은 처음이었는데요.
생각보다 결과물이 잘 나와서 굉장히 신기했습니다.
앞으로도 학생들에게 도움이 되는 다양한 정보들을 제공해주는 페이지들을 만들 수 있을 것 같아요.
