설치 없이 SQL을 연습할 수 있는 웹 서비스, NULL지마 개발기

“SQL 공부는 하고 싶은데, 마땅한 데이터셋도 없고 DB 설치부터 너무 막막해요…”

대학 시절 SQL을 처음 배울 때 제가 느꼈던 가장 큰 벽이었습니다.

책에 나오는 SQL 이론과 문법은 어느 정도 이해할 수 있었습니다.
하지만 막상 직접 실행해보려고 하면 생각보다 많은 준비가 필요했습니다.

Oracle이나 MySQL 같은 DBMS를 로컬에 설치해야 하고,
쿼리를 테스트할 만한 데이터셋도 직접 준비해야 했습니다.
게다가 오류가 발생했을 때 어디가 틀렸는지 알려주는 친절한 환경도 부족했습니다.

결국 SQL을 직접 손으로 실행하기보다는 책이나 문제집을 보며 눈으로 익히는 경우가 많았습니다.
하지만 SQL은 직접 데이터를 조회하고, 조건을 걸고, 테이블을 연결해보면서 익혀야 실력이 는다고 생각했습니다.

그래서 만들게 된 프로젝트가 바로 NULL지마입니다.

“설치 없이 웹 브라우저만 켜면 바로 실무형 데이터를 다루며 SQL을 연습할 수 있는 종합 학습 공간을 만들자.”

이 목표로 프로젝트를 시작했습니다.

1. 기획 의도: 왜 만들었을까?

SQL을 처음 공부하는 사람들은 보통 다음과 같은 장벽을 만납니다.

• DBMS 설치가 어렵고 귀찮다.
• 실습할 만한 데이터셋을 구하기 어렵다.
• 테이블 구조를 직접 만드는 것이 부담스럽다.
• 쿼리 오류가 났을 때 어디가 틀렸는지 파악하기 어렵다.
• 책으로만 공부하다 보니 실무 감각을 익히기 어렵다.

특히 SQLD 같은 자격증을 준비할 때도 문법은 공부하지만,
실제 데이터를 가지고 쿼리를 반복해서 작성해볼 수 있는 환경은 생각보다 부족했습니다.

NULL지마는 이런 불편함을 줄이기 위해 만든 서비스입니다.

브라우저에서 바로 SQL을 실행하고,
준비된 데이터셋을 기반으로 문제를 풀고,
학습 로드맵을 따라가며 SQL을 익힐 수 있도록 구성했습니다.

2. 주요 기능 및 스크린샷

2-1. 브라우저에서 바로 동작하는 인터랙티브 SQL 에디터

NULL지마의 핵심 기능은 브라우저에서 바로 실행할 수 있는 SQL 에디터입니다.

사용자는 별도의 데이터베이스 설치 없이 웹 페이지에 접속해 바로 SQL을 작성하고 실행할 수 있습니다.

내부적으로는 sql.js를 사용했습니다.
sql.js는 WebAssembly 기반 SQLite 엔진으로, 브라우저 안에서 가볍게 SQL을 실행할 수 있게 해줍니다.

SQL 에디터에는 다음 기능들을 넣었습니다.

• SQL 문법 하이라이팅
• 자동완성
• SQL 포맷터
• 기본 문법 골격 제공
• 스키마 확인 툴바
• 쿼리 실행 결과 테이블 출력

초급자도 현재 어떤 테이블과 컬럼이 있는지 확인하면서 쿼리를 작성할 수 있도록 구성했습니다.

메인 SQL 에디터 화면

메인 SQL 에디터 화면

2-2. 체계적인 학습 로드맵 & 자격증 학습 도우미

SQL을 처음 공부할 때는 무엇부터 공부해야 할지 막막할 수 있습니다.

그래서 NULL지마에는 핵심 문법을 단계적으로 학습할 수 있는 로드맵을 구성했습니다.

예를 들어 다음과 같은 SQL 문법을 순서대로 학습할 수 있습니다.

• SELECT
• WHERE
• ORDER BY
• GROUP BY
• JOIN
• 서브쿼리
• 집계 함수
• 조건 분기

각 문법마다 개념 설명과 예제 쿼리를 함께 제공하여,
단순히 설명만 읽는 것이 아니라 바로 실행하면서 이해할 수 있도록 만들었습니다.

SQLD 같은 자격증을 준비하는 사람들에게도 학습 보조 도구로 활용할 수 있도록 구성했습니다.

학습 도우미 화면

2-3. 정답 채점 시스템 및 단계별 문제 풀이

SQL은 직접 문제를 풀어보면서 익히는 것이 중요하다고 생각했습니다.

그래서 NULL지마에는 다양한 난이도의 SQL 문제를 풀고,
작성한 쿼리의 실행 결과를 기준으로 정답 여부를 확인할 수 있는 기능을 넣었습니다.

주요 기능은 다음과 같습니다.

• 난이도별 SQL 문제 제공
• 사용자 쿼리 실행
• 정답 결과와 사용자 실행 결과 비교
• 힌트 보기
• 오답 분석
• 최근 작성 코드 자동 저장
• 즐겨찾기 기능

단순히 문제를 푸는 것에서 끝나는 것이 아니라,
틀렸을 때 다시 확인하고 복습할 수 있도록 자기주도 학습에 초점을 맞췄습니다.

문제 목록 화면

문제 상세 화면

2-4. 지식을 나누고 성장을 돕는 커뮤니티 게시판

SQL을 공부하다 보면 혼자 해결하기 어려운 문제가 생길 때가 많습니다.

그래서 단순한 SQL 실행 도구에서 끝내지 않고,
질문과 풀이를 공유할 수 있는 커뮤니티 게시판도 만들었습니다.

커뮤니티 게시판에서는 다음 기능을 사용할 수 있습니다.

• 질문 작성
• 풀이 공유
• 댓글 작성
• 추천 기능
• 게시글 목록 및 상세 조회

어려운 문제를 질문하거나,
다른 사람이 작성한 쿼리 풀이를 보면서 새로운 접근 방식을 배울 수 있도록 만들고 싶었습니다.

3. 기술 스택 및 구조

이번 프로젝트에서 사용한 주요 기술 스택은 다음과 같습니다.

3-1. Core / UI

• React
• Vite
• CodeMirror

프론트엔드는 React와 Vite를 사용했습니다.
Vite를 사용해 빠른 개발 환경을 구성했고, SQL 에디터는 CodeMirror를 활용했습니다.

CodeMirror를 통해 SQL 문법 하이라이팅, 자동완성, 에디터 UX를 구현했습니다.

3-2. DB Engine

• sql.js
• WebAssembly
• SQLite

NULL지마의 가장 중요한 특징은 실제 DB 서버를 사용하지 않고도 브라우저에서 SQL을 실행한다는 점입니다.

이를 위해 sql.js를 사용했습니다.

sql.js는 SQLite를 WebAssembly로 컴파일한 라이브러리입니다.
덕분에 사용자는 별도의 DB 설치 없이 브라우저 안에서 SQL을 실행할 수 있습니다.

이 구조를 선택한 이유는 다음과 같습니다.

• 로컬 DB 설치가 필요 없다.
• 서버 비용 부담이 적다.
• 학습용 서비스에 적합하다.
• 사용자별로 독립적인 SQL 실행 환경을 만들 수 있다.
• 프론트엔드 중심으로 빠르게 기능을 구현할 수 있다.

3-3. Database / Auth

• Firebase Authentication
• Firebase Firestore
• Firebase Hosting

로그인 기능과 커뮤니티 게시판 데이터 관리는 Firebase를 사용했습니다.

Firebase Authentication을 통해 인증을 처리했고,
Firestore를 사용해 게시글, 댓글, 추천 등의 데이터를 관리했습니다.

서비스 배포는 Firebase Hosting을 활용했습니다.

3-4. 전체 구조

프로젝트 구조를 단순화하면 다음과 같습니다.

사용자
  ↓
React Web App
  ↓
SQL Editor / 문제 풀이 / 학습 로드맵 / 커뮤니티
  ↓
sql.js       Firebase
브라우저 DB   인증 / 게시판 데이터

SQL 실행은 브라우저 내부의 sql.js에서 처리하고,
로그인이나 게시판처럼 서버 데이터가 필요한 기능은 Firebase에서 관리하는 구조입니다.

4. 개발을 마주하며 느낀 점

이번 프로젝트를 진행하면서 SQL을 단순히 사용하는 입장이 아니라,
학습자가 이해하기 쉬운 형태로 다시 구성해보는 경험을 할 수 있었습니다.

이전에는 SQL을 코딩 테스트 문제를 풀거나 백엔드 API와 연동하기 위한 도구로만 사용하는 경우가 많았습니다.

하지만 NULL지마를 만들면서 직접 예제 데이터셋의 스키마를 구성하고,
테이블 간 관계를 설계하고, 문제를 출제하면서 SQL을 더 깊이 이해하게 되었습니다.

특히 다음 부분에서 많은 것을 배웠습니다.

• 학습용 데이터셋 설계
• 테이블 간 관계 구성
• 문제별 정답 쿼리 검증
• 사용자 쿼리 실행 결과 비교
• 브라우저 환경에서 SQL 실행 처리
• Firebase 기반 인증 및 게시판 구현
• CodeMirror 기반 SQL 에디터 구현

또한 실제 DB 서버를 구축하지 않고도
sql.js를 통해 브라우저에서 빠르고 안전하게 SQL을 실행할 수 있다는 점이 인상 깊었습니다.

프론트엔드에서도 단순 화면 구현을 넘어,
데이터 처리와 학습 도구에 가까운 기능을 만들 수 있다는 점을 경험할 수 있었습니다.

5. 아쉬웠던 점과 앞으로 개선하고 싶은 점

아직 개선하고 싶은 부분도 많습니다.

현재는 기본적인 SQL 학습과 문제 풀이에 집중되어 있지만,
앞으로는 다음 기능들을 추가해보고 싶습니다.

• 문제 난이도 세분화
• 사용자별 학습 진도 저장
• SQLD 기출 유형 기반 문제 추가
• 더 다양한 실무형 데이터셋 제공
• 랭킹 시스템
• AI 기반 오답 피드백
• 실행 계획 확인 기능
• 모바일 화면 최적화

특히 SQL 초급자가 가장 어려워하는 부분은
“내 쿼리가 왜 틀렸는지 모르겠다”는 점이라고 생각합니다.

그래서 향후에는 단순히 정답 여부만 보여주는 것이 아니라,
틀린 이유를 더 친절하게 설명해주는 기능도 추가해보고 싶습니다.

6. 서비스 링크

🌐 배포 서비스 주소: https://null-jima.web.app/
🐙 GitHub 저장소: donghyuk0605/null-jima
📸 작업 시연 비디오: 벨로그 업로드용 WebP/GIF

마무리

NULL지마는 제가 SQL을 처음 공부할 때 느꼈던 불편함에서 출발한 프로젝트입니다.

DB 설치가 어렵고,
연습할 데이터셋이 부족하고,
틀렸을 때 어디가 문제인지 알기 어려웠던 경험을 바탕으로 만들었습니다.

아직 부족한 부분도 많지만,
이 프로젝트를 통해 SQL, 프론트엔드, Firebase, WebAssembly 기반 실행 환경까지 폭넓게 경험할 수 있었습니다.

앞으로도 SQL을 처음 배우는 사람들이 더 쉽게 연습할 수 있도록 기능을 계속 개선해볼 예정입니다.