바닐라 JS로 만든 진짜 서비스 7개 — 멋쟁이사자처럼 17기 교육생 프로젝트 소개
한 달간 교육생들이 만든 일곱 개 프로젝트의 도메인을 한눈에 정리하면 이렇습니다.
숙소 예약부터 퀴즈 학습까지, 일곱 팀이 각자 다른 도메인에 도전했습니다. 공통 키워드는 바닐라 JavaScript와 실서버 REST API.
3월 말부터 4월 중순까지 약 4주. 짧다면 짧고 길다면 긴 그 기간 동안, 멋쟁이사자처럼 17기 프론트엔드 부트캠프 교육생들이 직접 기획하고, 디자인하고, 구현하고, 배포까지 끝낸 프로젝트 일곱 개를 소개합니다.
React도 Vue도 안 씁니다. 전부 HTML + CSS + 바닐라 JavaScript입니다. 그리고 그 뒤에는 진짜 REST API가 붙어 있어요. 목업 데이터로 화면만 흉내 낸 게 아니라, 서버에 요청을 보내 응답을 받고, 로그인 토큰을 관리하고, CRUD를 처리하는 프로젝트입니다.
각 프로젝트의 API 문서는 FullStackFamily 실전 API 페이지에서 직접 호출해 볼 수 있습니다. 카드에 달린 GitHub 배지를 누르면 교육생들이 만든 레포로 바로 이동하고요. 한 팀씩 차례대로 보겠습니다.
1. Latte BnB — 숙소 예약 서비스
팀 바닐라라떼 (이동근·이선우·방효진)
에어비앤비를 닮은 숙소 예약 플랫폼입니다. 랜딩 히어로 슬라이더, 검색·정렬·페이지네이션, 캘린더 기반 예약 신청, 위시리스트, 프로필 관리. 숙소 예약에 필요한 흐름은 거의 다 들어갔습니다.
이 팀이 택한 구조가 흥미롭습니다. /accommodations-detail/, /reservation-request/, /reservations-check/, /reservations-detail/, /admin/add/ 같은 디렉토리를 페이지 단위로 나눠 멀티 페이지 앱(MPA)으로 구성했거든요. Vite의 rollupOptions로 여러 HTML 엔트리를 번들링하는 방식입니다. 요즘은 SPA가 기본처럼 여겨지지만, 에어비앤비나 부킹닷컴 같은 실제 서비스도 SEO와 초기 로딩을 위해 페이지 단위 이동을 많이 씁니다.
관리자 페이지는 별도로 구성했습니다. 숙소 등록·수정 CRUD와 관리자 로그인을 분리했고, 회원가입과 예약 취소는 모달로 띄웁니다. 예약 흐름에 캘린더 모듈과 요금 계산까지 붙인 걸 보면, 수업 범위에서 한 발씩 더 나갔다는 티가 납니다.
2. Bui1dBox — 영화 리뷰 플랫폼
Bui1d-UP (강재훈 외)
"영화를 보고 나서 그 감동을 어디에 기록하지?" 이 질문에서 출발한 프로젝트입니다. Bui1dBox는 영화 감상평을 남기고 관리하는 공간이 목표였습니다.
특이한 점은 이메일 인증입니다. 회원가입 시 인증 코드를 발송하고 검증하는 흐름을 직접 구현했거든요. 바닐라 JS만으로 비동기 인증 플로우를 제대로 돌리려면 상태 관리가 생각보다 까다롭습니다. 화면 전환, 타이머, 재전송 처리까지 얹은 걸 보면 이쪽에 꽤 시간을 썼다는 게 보입니다.
메인 기능은 영화 CRUD, 장르별 검색, 리뷰 작성, 프로필 관리입니다. 3명이 역할을 나눌 때 메인/상세/장르 페이지, 마이페이지/로그인/회원가입, 랜딩/업로드/수정을 각각 맡았습니다. "일단 기능부터 나누자" 식의 수평 분담이 아니라, 페이지 단위로 엔드 투 엔드 담당을 가져간 방식이죠. 부트캠프에선 흔치 않은 선택입니다.
3. LocciShop — 화장품 쇼핑몰
유나·태형 (2인팀)
록시땅 한국 쇼핑몰을 참고해 만든 e-커머스 프로젝트입니다. 엔드포인트가 47개. 이번 일곱 팀 중 API 규모가 가장 큽니다.
두 명이 만든 규모치고 범위가 꽤 넓습니다. 회원가입·로그인, 메인·카테고리, 상품 상세(이미지 슬라이더, 별점·리뷰, 옵션 연동, 리추얼 스텝, 추천 상품), 장바구니·결제(포인트 적용·자동 적립), 위시리스트, 마이페이지(주문 내역, 내 리뷰). 쇼핑몰에서 쓸 만한 화면은 거의 다 있습니다.
재미있는 건 공유 컴포넌트 시스템입니다. 헤더·드로어·버튼·배지·상품 카드를 재사용 단위로 분리했고, API 통신은 client.js 한 곳에서 처리합니다. 리액트의 컴포넌트를 바닐라 JS에서 흉내 낸 구조인데, 47개 엔드포인트를 둘이 소화하려면 이 정도 추상화는 거의 필수였을 겁니다.
포인트 시스템도 단순하지 않습니다. 주문할 때 포인트를 차감하고, 결제 완료 후에는 자동 적립됩니다. 쇼핑몰 도메인의 현실을 꽤 반영한 구현입니다.
4. SW칸타빌레 — 노래방 TOP 10 차트
RawBeef (박소유·이우현)
레포 이름은 RawBeef, 서비스 이름은 "SW칸타빌레"입니다. 노래방 인기곡 차트와 관리자 시스템이 붙어 있습니다.
이 팀의 README는 다른 팀과 분위기가 좀 다릅니다. 총 105개 PR, 8회 코드 리뷰를 거치면서 쌓인 리팩토링 히스토리가 단계별로 적혀 있거든요. Pages/ 임시 폴더에서 시작해 src/admin/, src/SWcantabile/, src/component/로 디렉토리를 정리한 과정, 헤더 HTML을 모든 페이지에 복붙하다가 header.js 공통 컴포넌트로 분리한 과정, 500줄짜리 admin_song.js 한 파일을 API 호출 파일과 UI 렌더링 파일로 쪼갠 과정까지 전부 남아 있습니다.
기술적으로도 볼거리가 많습니다. Canvas 배경 애니메이션(requestAnimationFrame에 DPR 보정까지), Tailwind dark: 프리픽스와 localStorage로 다크모드 구현, 유튜브 미리듣기와 앨범 아트 표시. 특히 ES Module 로딩 순서 버그로 로컬은 되는데 배포 후 404가 뜨던 이슈를 어떻게 해결했는지가 README에 자세히 적혀 있습니다. 비슷한 상황을 겪는 사람이 읽으면 힌트를 얻을 만합니다.
장르 필터, 곡 검색, 사용자가 직접 올리는 "노래 등록 신청"(비밀번호로 삭제 가능), 관리자의 신청곡 처리까지 한 흐름으로 이어집니다.
5. Pocket Archive — 포켓몬 도감 + 커뮤니티
박규나·엄인호·이규화
포켓몬을 좋아하는 사람들이 모여 이야기하고 자기 파티를 공유하는 공간. 도감과 커뮤니티 두 축을 한 서비스에 담았습니다.
홈은 PokéAPI를 연동한 포켓몬 도감입니다. 검색하고 상세 정보를 볼 수 있죠. Board는 커뮤니티 공간으로, 게시글 작성·조회·댓글이 돌아갑니다. My Party는 나만의 파티 구성을 짜는 기능, My Page는 내 정보와 작성한 글을 관리하는 공간입니다.
특징은 외부 API(PokéAPI)와 자체 API를 동시에 다룬다는 점입니다. 포켓몬 정보는 외부에서 받아오고, 게시글·댓글·파티·좋아요는 자체 백엔드에 저장합니다. JWT 토큰 기반 접근 권한도 들어가 있어서, 로그인한 사용자만 파티를 만들고 글을 쓸 수 있습니다.
모바일 반응형과 슬라이드 메뉴까지 챙긴 걸 보면 "보기만 하는 도감"으로 두지 않으려 했다는 의도가 읽힙니다. 포켓몬 팬이 실제로 놀러 올 만한 공간을 겨냥한 거죠.
6. Gentlelion — 젠틀몬스터 쇼핑몰 클론
김도혁·최유종·장종호
젠틀몬스터 공식 홈페이지를 바닐라 JS로 클론한 프로젝트입니다. 안경·선글라스를 파는 쇼핑몰인데, 이 팀이 택한 길이 좀 독특합니다.
유저 페이지와 관리자 페이지를 분리 배포하는 모노레포 구조를 직접 설계했거든요. packages/user, packages/admin, 공통 API Wrapper(share-api)를 하나의 레포에서 워크스페이스로 관리합니다. 배포도 따로입니다. 유저는 gentlelion.vercel.app, 어드민은 gentlelion-adminmin.vercel.app.
바닐라 JS의 한계를 인정하고 그 안에서 모듈화를 끝까지 밀어붙인 점도 눈에 띕니다. 헤더, 푸터, 상품 카드, 쇼핑백 네비게이션 같은 마크업을 별도 HTML 파일로 분리하고 fetch로 DOM에 주입합니다. "프레임워크 없이 컴포넌트 흉내 내기"를 진지하게 시도한 프로젝트죠.
장바구니 수량 변경(PUT), 삭제(DELETE), 주문 생성, 포인트 결제까지 CRUD 전체 흐름을 구현했습니다. 기능 완성 후에는 Playwright E2E 테스트를 페이지별로 작성해 회귀 버그를 막았고요. 부트캠프 프로젝트에서 E2E까지 돌리는 팀은 정말 드뭅니다.
7. Nailed IT — 프론트엔드 퀴즈 학습 플랫폼
김연수 (1인)
혼자 만든 프로젝트입니다. 이름 그대로 HTML·CSS·JavaScript 개념을 퀴즈로 푸는 학습 서비스입니다.
카테고리별로 퀴즈가 나뉘어 있고, 세션 기반으로 한 번에 여러 문제를 풀 수 있습니다. 채점과 히스토리도 있어서, 내가 어떤 문제를 맞혔고 틀렸는지 기록이 쌓여요. 부트캠프 수강생이 부트캠프 학습자를 위한 도구를 직접 만든 셈입니다.
엔드포인트는 15개로 작은 편이지만, "세션"이라는 도메인 개념이 들어간 게 특이합니다. 퀴즈 풀이는 단순 GET/POST가 아니라 세션 생성 → 답안 제출 → 채점 → 결과 조회라는 라이프사이클을 타야 하거든요. 이걸 1인으로 기획·설계·구현까지 완주한 점이 이 프로젝트의 진짜 성취입니다.
공통점 하나와 배움 하나
일곱 팀의 도메인은 제각각이지만 공통점이 있습니다. 프레임워크 없이 진짜 서비스를 만들었다는 점이죠. React가 알아서 해 주는 렌더링, Vue가 알아서 해 주는 상태 관리, Next.js가 알아서 해 주는 라우팅. 이 편리함을 다 걷어 내고 맨손으로 부딪힌 프로젝트입니다.
덕분에 팀마다 몸으로 익힌 점이 있습니다. RawBeef 팀은 ES Module의 defer 동작과 Vite 번들링이 만나는 지점을 로컬/배포 차이로 체감했고, Gentlelion 팀은 "컴포넌트"라는 개념을 바닐라 JS에서 재발명하면서 모듈 설계를 익혔습니다. LocciShop 팀은 47개 엔드포인트를 둘이 감당하려면 공통 클라이언트가 꼭 있어야 한다는 걸 깨달았고, Latte BnB 팀은 MPA 구조에서 페이지 간 상태를 어떻게 공유할지 고민했을 겁니다.
프레임워크를 쓰면 이런 고민의 상당수를 건너뛰게 됩니다. 편한 대신, "왜 이게 이렇게 생겼는지"에 대한 감각도 같이 흐려지죠. 한 번쯤은 직접 손으로 만들어 봐야 프레임워크가 숨기고 있는 복잡도가 제대로 드러납니다. 이번 기수 프로젝트는 그 "한 번쯤"을 남긴 결과물입니다.
직접 호출해 보세요
실전 API 페이지에서 일곱 프로젝트의 API를 문서와 함께 볼 수 있습니다. 각 API 문서 페이지에는 호출 버튼이 있어서 브라우저에서 바로 요청을 보내고 응답을 확인할 수 있습니다. 본인 프로젝트에서 연동해 봐도 좋고, 다른 팀의 설계를 구경하는 용도로도 좋습니다.
레포도 들여다보시길 권합니다. PR 히스토리와 커밋 로그에는 4주 동안 교육생들이 어떤 고민을 했고 어떻게 풀어 나갔는지가 고스란히 남아 있습니다. 부트캠프를 준비 중이거나 바닐라 JS로 뭔가 만들어 보고 싶은 분에게는 참고할 거리가 많습니다.
멋쟁이사자처럼 17기 여러분, 정말 수고하셨습니다.
댓글
댓글을 작성하려면 이 필요합니다.