Law Solver: 로스쿨 스터디 도구에서 온라인 학습 플랫폼까지

Law Solver는 직접 만든 문제를 CSV로 불러와 CBT 방식으로 풀 수 있는 학습 서비스다. OX, 5지선다형과 단답형 문제를 지원하고, 답안을 제출하면 곧바로 채점 결과와 해설을 확인할 수 있다. 틀린 문제만 모아 다시 풀거나 오답 메모를 남기는 기능도 갖추고 있다.

처음부터 많은 사람이 사용하는 서비스를 만들 생각은 아니었다. 로스쿨 스터디에서 겪은 작은 불편을 해결하려고 시작한 도구였다. 그러나 친구들과 함께 실제 공부에 사용하면서 필요한 기능이 하나씩 늘었고, 이후에는 검수된 문제를 온라인으로 제공하는 Premium과 법학 생활에 필요한 미니 앱까지 추가했다. 제품 기획부터 프론트엔드와 백엔드 개발, 테스트와 배포까지 모두 직접 맡았다.

Law Solver 메인 화면 — 직접 만든 문제를 불러와 나만의 문제집으로 사용할 수 있는 Law Solver.

스터디가 끝난 뒤 만든 첫 번째 버전

로스쿨 첫 학기에 친구들과 OX 문제를 만들어 함께 푸는 스터디를 했다. 문제는 Google Sheets에 모았는데, 막상 풀 때에는 화면의 셀을 하나씩 읽고 종이에 답을 적어야 했다. 다 푼 뒤에는 각자 준비한 정답과 다시 비교해 채점했다. 문제를 만드는 과정은 좋았지만, 정작 문제를 풀고 채점하는 데 생각보다 많은 시간이 들었다.

그래서 스터디를 마치고 집에 돌아온 뒤 Codex를 열었다. CSV 파일을 올리면 문제를 한 개씩 보여 주고, 마지막에 자동으로 채점하는 웹사이트를 만들어 달라고 요청했다. 약 3시간 뒤에는 실제로 사용할 수 있는 첫 버전이 완성됐다. 그다음 스터디부터는 종이 대신 노트북으로 문제를 풀고, 제출 버튼을 눌러 곧바로 결과를 확인할 수 있었다.

친구들과 사용하기 시작하자 개선할 부분도 금방 보였다. OX뿐 아니라 5지선다형과 단답형 문제도 풀고 싶었고, 자신 없는 문제는 따로 표시해 두고 싶었다. 틀린 문제만 다시 풀거나, 왜 틀렸는지 메모하는 기능도 필요했다. 이렇게 실제 공부 중에 나온 의견을 반영하면서 과목과 문제집 관리, 힌트, 즐겨찾기, 오답 노트와 재풀이 기능을 차례로 추가했다.

가입하지 않아도 쓸 수 있는 오프라인 학습 도구

첫 버전에는 서버가 꼭 필요한 기능이 없었다. 사용자가 자신의 CSV 파일을 불러와 문제를 풀고 결과를 저장하면 되었기 때문이다. 굳이 계정을 만들거나 문제 파일을 외부 서버에 올리게 할 이유가 없었다. 그래서 Law Solver의 기본 기능은 정적 웹 앱으로 만들고, 문제와 답안, 학습 기록은 모두 사용자의 브라우저에 저장했다.

단순해 보이는 CSV 업로드도 실제로 여러 파일을 받아 보니 예외가 많았다. UTF-8과 CP949 파일이 섞여 있었고, 문제 유형을 따로 적지 않은 파일도 있었다. 선택지나 해설 안에 줄바꿈과 강조 표시가 들어가기도 했다. 이를 처리하기 위해 파일 인코딩과 문제 유형을 자동으로 판별하고, OX·5지선다형·단답형을 하나의 문제 형식으로 변환하는 파서를 만들었다. 파일에 문제가 있으면 어느 행을 고쳐야 하는지 바로 알 수 있도록 오류 메시지도 정리했다.

문제와 해설에는 굵은 글씨, 밑줄, 박스와 같은 간단한 서식을 사용할 수 있게 했다. 다만 CSV에 포함된 HTML을 그대로 실행하지는 않는다. 허용한 태그만 별도로 파싱하고 스크립트, 이벤트 핸들러와 인라인 스타일은 제거했다. 파일 안에 실행 가능한 코드가 들어 있더라도 브라우저에서는 동작하지 않게 했다.

Law Solver CBT 풀이 화면 — 문제와 OMR, 타이머, 힌트와 즐겨찾기를 한 화면에서 사용할 수 있다.

기존 사용 경험을 유지하면서 Premium을 붙이기

2026년 7월에는 법조윤리 문제를 온라인으로 제공하기 위해 Premium을 개발했다. 사용자가 올린 문제를 브라우저에서 푸는 기존 방식과 달리, Premium에서는 계정과 이용 기간을 확인하고 서버에서 문제를 받아와야 했다. 답안과 학습 기록도 여러 기기에서 이어서 볼 수 있어야 했다. 화면 몇 개를 추가하는 정도로 끝낼 수 있는 기능은 아니었다.

Premium 백엔드는 공개된 프론트엔드 저장소와 분리해 별도의 비공개 저장소에서 관리했다. Supabase Auth로 사용자를 인증하고, Postgres와 Edge Functions에서 강좌 이용 권한, 풀이 세션과 제출 결과를 처리했다. 데이터베이스의 Row Level Security는 우선 모든 접근을 막고, 자신의 데이터를 읽고 수정하는 데 필요한 권한만 허용하는 방식으로 작성했다.

정답과 해설은 풀이를 시작할 때 한꺼번에 브라우저로 보내지 않는다. 풀이 중에는 문제를 푸는 데 필요한 내용만 전달하고, 사용자가 힌트를 요청하거나 답안을 제출한 뒤에 필요한 해설을 내려보낸다. 채점 역시 브라우저가 아니라 서버에 저장된 문제를 기준으로 처리한다. 화면에서 메뉴를 숨기는 것만으로는 이용 권한을 보호할 수 없기 때문에, 서버가 모든 요청에서 실제 권한과 학습 상태를 다시 확인하도록 했다.

다만 사용자의 입장에서 오프라인 문제와 Premium 문제를 푸는 방법까지 달라질 필요는 없었다. 처음에는 온라인 풀이와 결과 화면을 따로 구현했는데, 버튼의 위치와 화면이 넘어가는 순서가 조금씩 달라졌고 한쪽을 고칠 때마다 두 화면을 함께 손봐야 했다. 결국 풀이, 결과 확인, 전체 해설과 오답 재풀이 화면을 공통 컴포넌트로 합치고, 데이터를 불러오고 저장하는 부분만 오프라인과 온라인 어댑터로 나눴다. 같은 화면을 사용하면서도 저장 위치와 보안 방식은 분명하게 구분할 수 있었다.

이렇게 계정, 이용권과 온라인 학습 세션을 갖춘 v1.0.0을 출시했고, 15개 세트로 나눈 법조윤리 600문항을 함께 공개했다. 이후에는 오랫동안 사용하지 않다가 다시 접속해도 이전에 풀던 세션을 정확히 이어 갈 수 있도록 복구 과정을 보완했다.

브라우저에 저장한 데이터를 안전하게 지키기

오프라인 방식은 별도의 가입 없이 바로 사용할 수 있다는 장점이 있지만, 데이터가 한 브라우저에만 남는다는 한계도 있었다. 다른 기기로 옮기거나 브라우저 데이터를 지우기 전에 백업하려면 사용자가 직접 파일을 내려받아야 했다. 이 문제를 해결하기 위해 v1.2.0에서 클라우드 백업을 추가했다.

백업 파일은 서버에 보내기 전에 브라우저에서 먼저 압축하고 암호화한다. 사용자가 입력한 비밀번호로 PBKDF2-SHA-256 키를 만든 뒤 AES-256-GCM으로 암호화하며, 비밀번호 자체는 서버로 전송하지 않는다. 복원할 때에도 암호를 푼 데이터를 먼저 모두 검사한 뒤 기존 데이터와 한 번에 교체한다. 복원 도중 오류가 나서 일부 문제집만 바뀌는 상황을 피하기 위해서였다.

초기 버전부터 사용하던 localStorage도 데이터가 많아지면서 한계가 생겼다. 현재 develop 브랜치에서는 문제집과 학습 기록을 IndexedDB로 옮겼다. 이 작업에서 가장 신경 쓴 부분은 새 저장 방식을 적용하는 일보다 기존 사용자의 데이터를 그대로 옮기는 일이었다. 앱이 예전 데이터를 모두 불러오기 전에 빈 값을 저장하지 않도록 초기 로딩 순서를 조정하고, 과거 버전에서 만든 백업 파일까지 복원되는지 확인했다.

분석 도구에도 같은 기준을 적용했다. 어떤 기능을 사용하는지는 확인하되, 문제 내용이나 답안, 점수, 파일명과 사용자 식별자는 분석 이벤트에 넣지 않았다. 공개 랜딩 페이지와 미니 앱만 검색 결과에 노출하고, 계정이나 결제, 실제 풀이 화면은 검색 엔진이 수집하지 않도록 구분했다.

Codex와 함께 개발한 방법

Law Solver는 첫 버전부터 지금까지 Codex를 적극적으로 활용해 개발했다. 처음에는 화면과 CSV 업로드 기능을 빠르게 구현하는 데 주로 사용했지만, 프로젝트가 커진 뒤에는 설계와 테스트, 배포 과정까지 함께 맡겼다.

큰 기능을 만들 때에는 곧바로 코드를 작성하게 하지 않았다. Premium을 시작할 때에도 먼저 기존 오프라인 기능과 온라인 기능을 어떤 기준으로 나눌지, 이용 기간이 끝나면 사용자가 무엇을 볼 수 있어야 하는지, 정답과 해설은 언제 전달해야 하는지를 함께 검토했다. 설계를 정한 뒤에는 Codex가 프론트엔드와 서버 저장소를 오가며 데이터베이스 마이그레이션, Edge Function과 React 화면을 구현하고 테스트를 작성했다.

반복해서 지켜야 하는 규칙은 각 저장소의 AGENTS.md에 정리했다. 오프라인 문제는 서버로 보내지 않는다는 원칙, 서버에서 권한과 채점 결과를 확인하는 방법, 분석 도구에 넣지 말아야 할 데이터와 비밀 키 관리 방법 등을 기록해 두었다. 덕분에 긴 작업을 여러 번 나누어 진행하더라도 매번 같은 전제를 다시 설명할 필요가 줄었다.

구현이 끝난 뒤에는 Codex가 직접 브라우저를 열어 회원가입, 강좌 등록, 문제 풀이, 일시정지, 제출과 오답 재풀이까지 차례로 확인하게 했다. IndexedDB 전환처럼 기존 데이터가 걸린 작업에서는 저장, 백업과 테스트를 각각 다른 에이전트에게 검토시킨 뒤 발견된 문제를 다시 수정했다. 2026년 8월 29일 현재 develop 브랜치에서는 41개 테스트 파일에 포함된 137개 테스트가 모두 통과한다.

물론 Codex가 제안한 내용을 그대로 적용하지는 않았다. Premium을 기존 기능과 분리된 별도 서비스처럼 구성했던 초안은 직접 사용해 본 뒤 다시 고쳤다. 버튼의 위치부터 데이터 보관 방식까지, 결과가 처음 의도와 맞지 않으면 요구사항을 더 구체적으로 설명하고 다시 구현했다. AI 덕분에 생각한 기능을 실제로 확인하기까지 걸리는 시간은 크게 줄었지만, 무엇을 만들고 어느 수준에서 배포할지는 결국 직접 판단해야 했다.

주요 릴리스

시기	릴리스	주요 변경사항
2026.03	최초 버전	CSV 업로드, 문제 풀이와 자동 채점
2026.05	v0.1.1–v0.2.0	힌트, 즐겨찾기, 오답 재풀이, 다크 모드와 글꼴 설정
2026.07	v0.3.0–v0.5.x	과목과 문제집 관리, 대시보드와 결과 화면 개편, GA4 분석 추가
2026.07	v0.6.0–v0.6.5	미니 앱, LBTI, CSV 자동 판별과 서식 지원, Premium 준비
2026.07	v1.0.0	계정과 이용권, 온라인 학습, 법조윤리 600문항 공개
2026.08	v1.2.0	암호화된 클라우드 백업과 복원
2026.08	v1.3.3	수강신청 미니 앱과 모바일 사용성 개선
2026.08	개발 중	IndexedDB 저장과 기존 데이터 마이그레이션

Law Solver 학습 결과 화면 — 채점 결과를 확인한 뒤 전체 해설이나 오답 재풀이로 이어갈 수 있다.

결과와 배운 점

Law Solver는 스터디에서 문제를 조금 더 편하게 풀기 위해 만든 작은 도구에서 출발했다. 약 다섯 달 동안 20차례가 넘는 릴리스를 거치며, 지금은 사용자가 직접 만든 문제를 푸는 오프라인 학습 기능과 검수된 콘텐츠를 제공하는 Premium, 법학 생활에 필요한 미니 앱을 함께 운영하고 있다.

처음부터 완성된 구조를 정해 두고 만든 서비스는 아니었다. 직접 사용하면서 불편한 부분을 찾고, 친구들의 의견을 듣고, 기능이 커질 때마다 저장 방식과 서버 구조를 다시 다듬었다. 그 과정에서 새 기능을 빠르게 만드는 것만큼, 이미 쌓인 데이터와 익숙한 사용 방식을 지키는 일도 중요하다는 것을 배웠다.

AI를 활용한 개발도 마찬가지였다. Codex는 구현과 검증에 걸리는 시간을 크게 줄여 주었지만, 제품의 방향까지 대신 정해 주지는 않았다. 해결하려는 문제를 정확히 설명하고, 만들어진 결과를 직접 사용해 보고, 부족한 부분을 다시 고치는 과정이 계속 필요했다. Law Solver는 AI로 빠르게 시작한 프로젝트이면서, AI와 함께 하나의 제품을 계속 운영하고 개선하는 방법을 배운 프로젝트이기도 했다.