본 후기는 직무부트캠프를 학교 지원으로 수강한 후 작성하였으며, 후기 작성 이벤트에 참여해 소정의 원고료를 받았습니다.
수강 페이지: 프론트엔드 현직자와 함께하는 개발 직무 A to Z
신청 과정
• 저는 연세대학교 미래캠퍼스에서 진행한 프리패스 쿠폰을 받아 신청하여 수강했습니다.
신청 계기
이전에 SW개발(백엔드)과 데이터분석 직무부트캠프를 수강하면서 실무 흐름을 직접 경험하는 것이 얼마나 큰 도움이 되는지 체감했습니다. 그래서 이번엔 평소 관심 있던 프론트엔드 분야를 제대로 파보고 싶었습니다.
특히 "HTML/CSS만 좀 해봤는데, 실무에서는 어떻게 구조화하고 JavaScript로 기능을 붙이는지"가 궁금했고, 현직 프론트엔드 개발자의 피드백을 받으며 4주간 집중적으로 성장할 수 있다는 커리큘럼을 보고 바로 신청했습니다.
주차별 수업 내용과 느낀 점
1주차 – HTML/SCSS로 자기소개 페이지 제작
• 환경 세팅: Node.js + npm + SCSS 컴파일 환경 구축
• 반응형 레이아웃: 360px / 768px / 1024px 세 구간 미디어쿼리 대응
• 주요 구현:
- Sticky 헤더 + 네비게이션 호버 효과
- 다크/라이트 테마 전환 (LocalStorage 저장)
- 모바일 메뉴 토글
- SCSS 변수·믹스인 활용으로 유지보수 용이한 스타일 구조화
$bp-768: 768px;
$bp-1024: 1024px;
@mixin up($w) { @media (min-width: $w) { @content; } }
.nav {
display: none;
@include up($bp-768) { display: flex; }
}• 느낀 점: 단순히 "예쁘게 만드는 것"이 아니라, 반응형 설계와 접근성(aria 속성, 스킵 링크 등)까지 고려해야 실무 수준이라는 걸 깨달았습니다. SCSS의 변수와 믹스인을 적극 활용하니 CSS가 훨씬 체계적으로 관리되었습니다.
2주차 – CSS만으로 자판기 UI 구현
• 목표: JavaScript 없이 순수 HTML/CSS로 자판기 시각 요소 완성
• 주요 구현:
- 음료 진열대 3단 구조 (캔 7개 × 3줄)
- 광고판 영역에 CSS 애니메이션 스마일리
- 동전/지폐 투입구, 배출구 디테일
- 그라디언트와 box-shadow로 입체감 표현
.can--red { background: linear-gradient(135deg, #e53935 60%, #b71c1c); }
.can--blue { background: linear-gradient(135deg, #1e88e5 60%, #0d47a1); }• 느낀 점: "CSS로 이렇게까지 표현할 수 있구나" 싶을 정도로 시각적 디테일에 집중한 주차였습니다. 실무에서 디자이너와 협업할 때 CSS만으로 어디까지 구현 가능한지 감을 잡는 데 큰 도움이 되었습니다.
3주차 – JavaScript로 인터랙티브 앱 제작 (계산기 + 시계)
Project #1: 계산기
• 핵심 기능:
- 버튼 입력 및 키보드 입력 동시 지원
- 사칙연산 + 괄호 처리
- C(전체 초기화) / CE(마지막 입력 삭제)
- History 기능: 최근 10개 계산 기록 저장, 클릭 시 식 재입력
function calculate(expr) {
try {
const result = Function(`"use strict"; return (${expr})`)();
return Number.isFinite(result) ? result : 'Error';
} catch {
return 'Error';
}
}Project #2: 디지털 시계 (배터리 + 알람)
• 핵심 기능:
- 실시간 날짜/시간 표시 (1초마다 갱신)
- 배터리 시뮬레이션 (시간 경과에 따라 감소, 0%면 화면 off)
- 알람 최대 3개 등록/삭제
- 스누즈 기능: 알람 울릴 때 5분 뒤로 재설정
• 느낀 점: setInterval, DOM 조작, 이벤트 핸들링을 집중적으로 다루면서 JavaScript의 핵심 패턴을 손에 익혔습니다. 특히 상태 관리(알람 목록, 배터리 잔량)를 어떻게 설계하느냐에 따라 코드 복잡도가 확 달라진다는 걸 체감했습니다.
4주차 – 실전 프로젝트 (To-Do-List + 회원가입)
Project #1: To-Do-List
• 핵심 기능:
- 일정 CRUD (추가/조회/수정/삭제)
- LocalStorage 영구 저장
- 필터링 (전체/오늘/다가오는 일정/지난 일정)
- 정렬 (날짜 오름차순/내림차순, 최근 추가 순)
- 검색 (제목/메모 실시간 필터)
function render() {
let items = JSON.parse(localStorage.getItem('todos')) || [];
items = applyFilter(items);
items = applySort(items);
items = applySearch(items);
// DOM 렌더링...
}Project #2: 회원가입 폼
• 핵심 기능:
- 아이디 중복체크 (LocalStorage 기반 시뮬레이션)
- 비밀번호 실시간 유효성 검사:
- 8~20자
- 영문 + 숫자 포함
- 특수문자 1개 이상
- 공백 금지
- 같은 문자 3회 연속 금지
- 비밀번호 확인 일치 검사
- 폼 전체 유효성 통과 시에만 가입 버튼 활성화
const rules = {
rLen: pw.length >= 8 && pw.length <= 20,
rMix: /[a-zA-Z]/.test(pw) && /\d/.test(pw),
rSpec: /[!@#$%^&*(),.?":{}|<>]/.test(pw),
rSpace: !/\s/.test(pw),
rRepeat: !/(.)\1{2,}/.test(pw)
};• 느낀 점: 실제 서비스에서 흔히 보는 폼 유효성 검사 로직을 직접 구현하면서, 사용자 경험(UX)을 위한 실시간 피드백이 얼마나 중요한지 느꼈습니다. 단순히 "동작하면 끝"이 아니라 에러 메시지, 상태 표시, 접근성까지 챙겨야 완성도가 올라간다는 걸 배웠습니다.
내가 만든 결과물(요약)
| 주차 | 프로젝트 | 핵심 기술 | GitHub |
|---|---|---|---|
| 1주차 | 자기소개 페이지 | HTML, SCSS, 반응형, 테마 전환 | Repo |
| 2주차 | 자판기 UI | CSS 그라디언트, 애니메이션, 레이아웃 | Repo |
| 3주차 | 계산기 + 시계 | JavaScript DOM, 이벤트, setInterval | Repo |
| 4주차 | To-Do + 회원가입 | CRUD, LocalStorage, 폼 유효성 | Repo |
수료 후 도움이 된 점
• 실무 감각: 단순 튜토리얼이 아니라 기획 → 마크업 → 스타일 → 기능 구현 → 피드백 사이클을 4주간 반복하며 실제 개발 흐름을 체득
• 코드 품질 의식: 현직자 멘토님 피드백 덕분에 "동작하면 끝"이 아니라 가독성, 유지보수성, 접근성까지 고려하는 습관 형성
• 포트폴리오 확보: 4개 프로젝트를 GitHub에 정리해두니, 이력서에 바로 첨부할 수 있는 실제 결과물 확보
• 프론트엔드 적합성 확인: HTML/CSS/JS를 넘어 사용자 인터랙션을 설계하고 구현하는 과정이 즐겁다는 걸 확인 → 프론트엔드 직무에 대한 확신
마무리
이번 부트캠프에서 가장 큰 수확은 "프론트엔드는 화면만 그리는 게 아니다"라는 걸 몸으로 체감한 것입니다.
반응형 설계, 접근성, 상태 관리, 유효성 검사, 사용자 피드백... 실무에서 신경 써야 할 요소들을 4주간 직접 구현하면서 프론트엔드 개발자의 시야가 한층 넓어졌습니다.
이전에 백엔드와 데이터분석 부트캠프도 수강했었는데, 이번 프론트엔드까지 경험하고 나니 풀스택 관점에서 서비스를 바라보는 시각도 생긴 것 같습니다.
프론트엔드에 관심 있지만 "어디서부터 시작해야 할지 모르겠다"는 분들께 강력 추천합니다. 특히 현직자 피드백이 있어서 혼자 공부할 때 놓치기 쉬운 부분을 짚어주는 게 가장 큰 장점이었습니다.
읽어주셔서 감사합니다 :)
