[심층분석] 100만 명이 코딩을 배운 그곳, freeCodeCamp의 코드베이스를 뜯어봤어요

무료로 코딩을 가르치는 거대한 학교, 그 속을 들여다봐요

혹시 코딩 처음 배울 때 "freeCodeCamp"라는 이름 들어보신 적 있나요? 개발 공부를 시작하면 거의 한 번은 마주치게 되는 사이트거든요. 이름 그대로 "무료(free) 코딩 캠프"인데요, 단순한 강의 사이트가 아니라 미국의 501(c)(3) 비영리 자선단체가 운영하는 진짜 학교 같은 곳이에요. 여기서 501(c)(3)이라는 건, 쉽게 말해 미국 정부가 "이건 공익을 위한 단체야"라고 인정해준 비영리 조직이라는 뜻이에요. 그래서 후원금으로 돌아가고, 학생한테는 돈을 한 푼도 안 받아요.

놀라운 건 숫자예요. 이 단체가 "우리 커뮤니티 덕분에 10만 명 넘는 사람이 첫 개발자 일자리를 구했다"고 밝히고 있거든요. 바쁜 직장인이나 전공이 다른 사람들이 IT 업계로 넘어오도록 돕는 게 목표인데, 실제로 그 길을 만들어내고 있는 거죠.

그런데 오늘 제가 이야기하고 싶은 건 단순히 "좋은 무료 강의 사이트가 있다"가 아니에요. freeCodeCamp는 자기네 학습 플랫폼 코드 전체를 오픈소스로 공개하고 있거든요. 강의 콘텐츠(커리큘럼)부터 사이트를 돌리는 서버 코드까지 전부요. 코딩을 가르치는 곳이 자기 코드를 통째로 보여준다는 게, 생각해보면 가장 좋은 교재가 되는 거잖아요. 그래서 이 코드베이스가 어떻게 생겼는지 같이 한번 뜯어볼게요.

폴더 구조만 봐도 현대 웹 개발이 보여요

저장소를 열면 폴더가 쭉 나오는데, 이게 곧 "요즘 큰 웹 서비스는 이렇게 만든다"는 교과서예요. 핵심만 골라볼게요.

• client : 우리가 브라우저에서 보는 화면, 즉 프론트엔드예요. 강의를 풀고 코드를 입력하는 그 에디터 화면이 여기서 만들어져요.
• api : 서버 쪽 코드예요. 백엔드라고 부르는 부분인데, 회원 정보나 학습 진도, 인증서 발급 같은 걸 처리해요.
• curriculum : 강의 내용 그 자체예요. 수천 개의 코딩 문제와 설명이 여기 들어 있어요.
• e2e : "End to End 테스트"의 줄임말인데요, 이게 뭐냐면 실제 사용자가 클릭하는 것처럼 사이트를 자동으로 조작해보면서 "버튼 누르면 진짜 다음 화면으로 넘어가나?"를 검사하는 코드예요.
• docker : 이 거대한 프로젝트를 누구 컴퓨터에서든 똑같이 돌아가게 만들어주는 설정이에요.
• tools / packages : 여러 곳에서 공통으로 쓰는 도구와 부품들이고요.

여기서 한 가지 중요한 개념이 보여요. 바로 모노레포(monorepo)예요. 이게 뭐냐면, 프론트엔드·백엔드·강의 콘텐츠처럼 서로 다른 프로젝트를 따로따로 저장소에 두지 않고 한 곳에 다 모아두는 방식이에요. 마치 집을 지을 때 거실, 부엌, 방을 각각 다른 동네에 짓지 않고 한 건물 안에 다 넣는 거랑 비슷해요. 그래야 "강의 화면 디자인을 바꾸면서 동시에 서버도 같이 수정"하는 게 한 번에 깔끔하게 되거든요.

pnpm, turbo, husky… 이름은 낯설어도 역할은 단순해요

저장소 최상위에 보면 pnpm-workspace.yaml, turbo.json, .husky 같은 파일들이 있어요. 처음 보면 외계어 같은데, 하나씩 풀면 별거 아니에요.

pnpm은 패키지 매니저예요. 우리가 보통 npm이나 yarn으로 라이브러리(남이 만들어둔 코드 묶음)를 설치하잖아요? pnpm은 그 일을 더 빠르고 디스크 용량도 아끼게 해주는 친구예요. 같은 라이브러리를 프로젝트마다 중복 저장하지 않고, 한 군데 저장해두고 여기저기서 "바로가기"로 연결하는 식이라 용량을 확 줄여줘요. 모노레포처럼 프로젝트가 여러 개 들어 있는 경우엔 이 차이가 어마어마해요.

turbo(Turborepo)는 빌드 속도를 높여주는 도구예요. 이게 뭐냐면, 코드를 고칠 때마다 전체를 처음부터 다시 만들지 않고 바뀐 부분만 다시 작업하고, 한 번 한 작업 결과는 캐시(임시 저장)해두는 거예요. 요리에 비유하면, 국을 다시 끓일 때 육수를 처음부터 우리지 않고 어제 만들어둔 육수를 꺼내 쓰는 거랑 같아요. freeCodeCamp처럼 4만 개가 넘는 커밋이 쌓인 거대한 프로젝트에선 이 캐시 덕분에 빌드 시간이 확 줄어요.

husky는 "git hook"을 쉽게 쓰게 해주는 도구예요. 코드를 저장소에 올리기(commit) 직전에 "잠깐, 코드 스타일 검사부터 통과하고 가"라고 자동으로 막아서서 검사를 돌려줘요. 일종의 검문소인 셈이죠. 그래서 누가 실수로 엉망인 코드를 올리는 걸 미리 막아줘요.

여기에 .prettierrc(코드 자동 정렬), .stylelintrc(CSS 검사), renovate.json(라이브러리 자동 업데이트), tsconfig-base.json(타입스크립트 설정)까지 있어요. 즉, "코드를 깨끗하게 유지하는 자동화 장치"가 겹겹이 깔려 있다는 거예요. 전 세계 수천 명이 자유롭게 코드를 보내는 오픈소스에서 품질을 유지하려면 이런 장치가 필수거든요. 주니어 입장에서는 이 설정 파일들만 따라 해봐도 "실무에서 코드 품질을 어떻게 관리하는지" 통째로 배울 수 있어요.

강의가 곧 코드, 코드가 곧 교재

freeCodeCamp의 진짜 매력은 학습 구조예요. 단순히 영상 보고 끝이 아니라, 상호작용형 코딩 문제(interactive coding challenges)가 수천 개 있어요. 화면 한쪽에 문제가 나오고, 다른 쪽 에디터에 직접 코드를 쳐서 통과시키는 방식이에요. 이게 왜 좋냐면, 사람은 눈으로 보기만 해선 코딩을 못 배우거든요. 직접 타이핑하고 에러를 만나봐야 늘어요.

제공하는 인증 과정도 탄탄해요.

• 반응형 웹 디자인 (Responsive Web Design)
• 자바스크립트
• 프론트엔드 개발 라이브러리
• 파이썬
• 관계형 데이터베이스 (SQL 같은 거예요)
• 백엔드 개발과 API

각 인증마다 강의·실습(랩)·퀴즈를 거치고, 필수 프로젝트 5개를 직접 완성한 뒤 시험을 통과해야 인증서를 받을 수 있어요. 그냥 출석 도장 찍는 게 아니라 "내가 만든 결과물"로 증명하는 구조라, 포트폴리오로도 쓸 수 있어요. 최근엔 개발자를 위한 영어·스페인어·중국어 같은 어학 인증(베타)까지 추가됐는데, 이건 "비영어권 사람도 코딩과 함께 기술 영어를 배우게 하자"는 고민이 담긴 거예요. 한국 개발자한테도 꽤 반가운 방향이죠.

비슷한 서비스들과 뭐가 다를까요

코딩 배우는 곳은 많아요. 그럼 freeCodeCamp는 어떤 자리에 있는 걸까요? 쉬운 비유로 비교해볼게요.

• 유데미(Udemy)나 인프런 : 동네 학원 같아요. 강사 개인이 강의를 올려 팔고, 우리는 골라서 결제해요. 질은 강사마다 천차만별이고 유료죠.
• 코드카데미(Codecademy) : 깔끔한 사설 어학원 느낌이에요. 상호작용형 실습이 좋지만 핵심 콘텐츠는 유료 구독이에요.
• The Odin Project : freeCodeCamp랑 결이 비슷한 무료 오픈소스 커리큘럼이에요. 다만 자체 에디터 없이 "이 자료 보고 직접 환경 만들어서 해봐" 하는 식이라 조금 더 자기주도적이에요.
• freeCodeCamp : 무료 공립학교에 가까워요. 후원으로 운영되고, 강의·실습 에디터·인증서까지 전부 공짜인 데다, 그걸 굴리는 코드까지 오픈소스로 공개해요.

한국 개발자라면 이렇게 써먹어요

그럼 우리 상황에선 어떻게 활용하면 좋을까요? 시나리오별로 정리해볼게요.

1) 비전공자에서 개발자로 넘어가려는 분. 반응형 웹 디자인 → 자바스크립트 → 프론트엔드 라이브러리 순서로 인증을 따라가면, 영상만 보는 강의와 달리 손으로 직접 만들면서 배워요. 영어 설명이 부담되면, 한쪽 화면에 번역기를 띄워두고 문제 부분만 그때그때 돌려보세요. 베타 단계인 어학 인증을 같이 들으면 기술 영어에 자연스럽게 익숙해지고요.

2) 이미 일하는 주니어 개발자. 강의보다 코드베이스 자체를 교재로 쓰는 걸 추천해요. 깃허브에서 저장소를 내려받아서, 모노레포가 어떻게 구성됐는지, husky로 커밋 전 검사를 어떻게 거는지, turbo 캐시 설정이 어떻게 돼 있는지 직접 열어보세요. 실무에서 "잘 만든 프로젝트"를 통째로 들여다볼 기회는 생각보다 드물거든요.

3) 오픈소스 기여를 처음 해보고 싶은 분. freeCodeCamp는 초보 기여자에게 친절하기로 유명해요. 오타 수정이나 번역, 한국어 강의 검수 같은 작은 일부터 시작할 수 있어요. "good first issue"라고 표시된 이슈를 찾아 풀고 PR(코드 제안)을 보내보면, 첫 오픈소스 기여라는 값진 경험이 생겨요. 이게 이력서에도 한 줄 들어가고요.

도입할 때 한 가지만 기억하세요. 이 사이트는 "기초를 잡는 출발점"이지 종착지가 아니에요. 인증서 자체보다, 그 과정에서 "내가 직접 만든 프로젝트 5개"가 진짜 자산이에요. 인증을 따고 나면 그 프로젝트들을 깃허브에 잘 정리해서 자신만의 포트폴리오로 발전시키는 게 핵심이에요.

마무리하며

freeCodeCamp가 보여주는 건 단순한 무료 강의 그 이상이에요. "교육은 누구에게나 열려 있어야 한다"는 철학을, 강의 콘텐츠는 물론 그 콘텐츠를 굴리는 코드까지 통째로 공개하는 방식으로 실천하고 있거든요. 4만 개가 넘는 커밋과 전 세계 수천 명의 기여자가 쌓아 올린 이 저장소는, 그 자체로 "많은 사람이 함께 만드는 소프트웨어란 이런 것"을 보여주는 살아 있는 교과서예요.

AI가 코드를 대신 짜주는 시대에, 이런 "기초부터 직접 손으로 익히는 학습"이 의미가 있을까 싶을 수도 있어요. 하지만 저는 오히려 더 중요해졌다고 봐요. AI가 뱉어낸 코드가 맞는지 틀린지 판단하려면, 결국 내가 기본기를 알아야 하니까요.

여러분은 어떠세요? 코딩을 처음 배울 때 freeCodeCamp 같은 무료 자료로 시작하셨나요, 아니면 유료 강의나 부트캠프를 택하셨나요? 그리고 요즘처럼 AI가 코딩을 거드는 시대에, 기초 학습 방식은 어떻게 바뀌어야 한다고 생각하세요? 여러분의 경험과 생각을 댓글에서 나눠주세요.