AI 연구실에 들어갔지만 무엇부터 시작해야 할지 모르는 분들을 위해, 브라우저만으로 배울 수 있는 무료 AI 학습 사이트를 만들었습니다

안녕하세요, AI 계열 연구실에 소속되어 있는 마누카-하ニー입니다.

연구실에 배정된 직후, 저 자신은 프로그래밍이 전혀 초보자였기에 매일 다음과 같은 고민을 안고 있었습니다.

• "AI는 결국 무엇을 공부해야 하나요?"
• "Python은 무엇인가요? NumPy나 Pandas는 들어본 적 있지만 어디에 쓰는 건가요?"
• "연구 주제는 정해졌지만, 무엇부터 시작해야 할지 모르겠어요..."
• "애초에 환경 구축 (Environment Setup)은 어떻게 하는 건가요...?"

실제로 AI 분야의 공부를 시작하려고 해도, "Python 설치", "VS Code 도입", "환경 구축 (Environment Setup)" 단계에서 좌절하는 사람은 적지 않습니다.

그래서, **"환경 구축 불필요·브라우저만으로 지금 바로 학습을 시작할 수 있으며, 최종적으로는 연구 현장(기초) 레벨의 실전까지 스텝업할 수 있는 무료 사이트"**를 제작했습니다!

• 🔗
  사이트 URL: https://a-ibrary.vercel.app/ - 💸
  비용: 무료 (진척도 관리를 위한 사인인 기능 있음)

💡 컨셉:

우선 브라우저로 간편하게 기초를 다지고, 최종적으로는 자신의 PC 상에서 연구실 실무(GPU 환경·PyTorch)로 원활하게 이행할 수 있는 심리스(Seamless)한 학습 로드맵을 제공합니다.

※ PyTorch를 사용한 AI 모델 개발 기사는 제작 중입니다. 잠시만 기다려 주세요(__)

통상적으로 AI 학습을 시작하려면 Python 설치나 라이브러리 도입 등 번거로운 초기 설정이 필요합니다. 본 사이트에서는 그것들을 전혀 신경 쓸 필요 없이, 접속하는 순간 학습을 시작할 수 있습니다.

단순히 글을 읽는 좌학(座学)이 아니라, 브라우저 상에 내장된 본격적인 에디터로 실제로 코드를 작성하고, 그 자리에서 실행하여 결과를 확인할 수 있는 구성으로 만들었습니다.

"어디까지 읽었더라?"라고 되지 않도록, 로그인하면 "읽었습니다" 버튼을 통해 페이지의 기독 여부 및 진척 상황을 관리할 수 있는 기능을 탑재했습니다. 자신의 성장을 시각적으로 확인할 수 있어 지속적으로 학습을 진행할 수 있습니다.

"웹 앱 안에서만 완결되는 장난감"이 아닙니다.

기초를 브라우저에서 배운 후에는, 실제 연구 현장이나 프로의 개발 현장에서 사용되는 모던한 도구(VS Code / PyTorch / GPU)로 자연스럽게 스텝업할 수 있는 커리큘럼으로 되어 있습니다.

프로그래밍 미경험자부터, AI 연구에서 빈번하게 등장하는 라이브러리의 기초까지 스텝 바이 스텝(Step-by-step)으로 배웁니다.

카테고리	배울 수 있는 내용
Python 기초	변수, 타입, 리스트, 딕셔너리, 조건 분기 (if), 반복 (for), 함수, 모듈
AI·데이터 분석 기초	NumPy / Pandas / Matplotlib (데이터 취급 방법과 시각화)
AI 학습의 기초 지식	AI/머신러닝 (Machine Learning)이란 무엇인가, 데이터셋이란 무엇인가, 학습과 추론의 차이 등

"Python 기초는 이해했으니, 실제 AI를 만들어 보고 싶다"는 분들을 위한 장입니다.

개발 환경: VS Code ➔ Google Colab (VS Code 확장 기능 경유로 클라우드 GPU 이용) -
프레임워크: PyTorch -
목표: 손글씨 인식 AI (MNIST)를 만들어 보자! -

자신의 손으로 모델을 구축하고 학습시키는 체험을 통해, **"데이터 로드 ➔ 전처리 ➔ 모델 학습 ➔ 추론 ➔ 결과 확인"**이라는 머신러닝 프로젝트의 일련의 흐름을 통째로 체험할 수 있습니다.

Qiita 독자 여러분을 위해, 이 앱의 뒷단의 기술 구성도 공유합니다.

Next.js 16을 베이스로, 프론트엔드에서의 Python 실행과 보안이 유지되는 사용자 관리를 결합한 모던한 아키텍처를 채택하고 있습니다.

프론트엔드: Next.js 16 (React) -
인증·사용자 관리: Clerk ("읽었습니다" 버튼과 연동된 진척도 관리에 사용) -
Python 실행 환경 (WebAssembly): Pyodide 0.29.3 -
코드 에디터: @monaco-editor/react 4.7.0 -
ORM / 데이터베이스: Prisma 7.4.1 / Postgres 17 -
호스팅: Vercel

브라우저 상에서 Python을 안전하고 빠르게 실행하기 위해, Pyodide를 채택하여 클라이언트 사이드(WebAssembly)에서 코드를 평가하고 있습니다. 에디터 부분에는 Monaco Editor를 사용하고 있어, 초보자가 스트레스 없이 코드를 작성할 수 있는 풍부한 개발 경험(Developer Experience)을 목표로 했습니다.

또한, 사용자의 학습 동기를 유지하기 위한 '진척도 관리(읽음 기능)'에는 Clerk와 Prisma를 조합하여 구현했습니다. Clerk 덕분에 보안이 유지되면서도 신속하게 사용자에게 귀속된 진척 데이터를 핸들링할 수 있었습니다.

저 자신도 연구실에 처음 들어갔을 당시 무엇부터 공부해야 할지 몰라 정말 고생했습니다.

마찬가지로 "AI에 관심은 있지만 무엇부터 시작해야 할지 모르겠다"는 분들에게 조금이라도 도움이 된다면 기쁘겠습니다.

무료로 이용할 수 있으니, 꼭 부담 없이 사용해 보세요!

또한, "이 부분이 이해하기 어려웠다", **"이런 콘텐츠를 추가해 달라!"**와 같은 개선점이나, "기술적으로 이 부분은 이렇게 개선할 수 있지 않을까" 하는 엔지니어 관점의 피드백이 있다면 댓글로 알려주세요. 개발에 큰 힘이 됩니다.

앞으로도 AI 모델 개발에 관한 기사는 수시로 업데이트해 나가고자 합니다.

잘 부탁드립니다!