StudyAce 2.0 개발기 ① 처음부터 다시
기말고사 끝나고 한동안 StudyAce 를 안 건드렸는데, 결국 큰 결정을 하나 했어요.
처음부터 다시 짜기로.
지난 BBlog 개편 이랑 비슷한 결인데 이번엔 훨씬 규모가 큽니다. 시안부터 시작해서 스택·백엔드까지 다 갈아엎을 예정이라... 나중에 잊어버리기 전에 시리즈로 남겨보려고 해요.
왜 다시 짜기로 했나
원래 StudyAce 는 시험 기간에 친구들이랑 같이 쓰던 학습 사이트에서 시작됐어요. Cloudflare Workers + Static Assets + D1 조합으로 굴러가고 있었죠. (이전 편 에서 소개했었네요)
근데 오래 굴리다 보니까 크게 세 가지가 걸리더라고요:
- UX 가 옛날 스타일 — 태블릿·모바일에서 좀 뻑뻑
- 클라이언트가 모든 걸 박음 — 이건 10편 어뷰징 대응 에서 다뤘던 문제. sanity check + 가챠 서버화까지 했지만 근본은 못 잡음
- 새 기능이 안 붙음 — 반응 지연 기반 인출 판정이라든지, 망각 곡선 복습 스케줄 같은 걸 넣고 싶은데 지금 스키마로는 못 붙음
특히 3번이 결정타였어요. StudyAce 를 "그냥 문제 푸는 사이트" 가 아니라 인출·복습 과학 기반 학습 도구로 만들고 싶어서요.
Figma 시안부터 그렸어요
이번엔 코드부터 짜지 않고 시안부터 그렸어요. AI 랑 같이 Figma 에서 작업했는데, Toss 스타일을 참고해서 mobile-first 로 잡았습니다.
주요 화면:
- 홈 (포인트·유물배지·오늘 할 일·랭킹·연속 스트릭)
- 문제풀이 3종 (가림판 / 객관식 / 성조)
- 통계·복습·상점·랭킹·프로필
근데 시안 정독하면서 재밌는 걸 발견했어요. Figma 파일 프레임이 10개인데, 앱 화면은 4개뿐이더라고요. 나머지 6개는 R&E 발표자료 (아키텍처 다이어그램·시퀀스·베타 설문 결과) 였어요. 시안만 읽는 데도 하루 정도 걸렸네요...
스택 결정 — 이건 좀 오래 저울질했어요
프레임워크는 Next.js 로 굳혔어요. 이미 BBlog 랑 북곽툴즈가 Next 로 도는 상태라 monorepo 스타일에 잘 맞아요. 배포 flow (PM2 blue/green + Caddy) 도 재사용할 수 있고요.
- Next.js 16 App Router
- Tailwind v4
- TypeScript
- PWA (manifest + service worker)
디자인 시스템에서 진짜 오래 고민했어요. 후보가 셋이었는데:
- shadcn/ui — 커스터마이즈 자유도 최고, 2026-07 부터 base 가 Radix 에서 Base UI 로 바뀜
- StyleSeed (
bitjaru/styleseed) — Claude Code 용 design engine, 69개 design rule + 48 컴포넌트 + Toss/Stripe/Linear 스킨 - oh-my-design (
kwakseongjae/oh-my-design) — 400+ 회사 DESIGN.md reference 를 심어주는 툴
셋 다 실제로 세팅해보고 비교했는데, 결론은 shadcn/ui + StyleSeed Toss skin 조합이었어요.
이유는:
- shadcn 이 base 로 가장 표준적이고, Base UI 로 넘어간 것도 안정됨
- StyleSeed 는 shadcn 위에 얹는 design ruleset 이라 겹치지 않음. Claude Code 로 개발할 때 스타일 일관성이 강제됨
- Toss skin 이 시안 결이랑 잘 맞음
oh-my-design 은 화면을 그리기 전에 원칙을 먼저 문서로 정하는 도구인데, 이번엔 시안이 이미 있어서 굳이 필요는 없다고 판단했어요. 나중에 협업자가 늘거나 규모가 커지면 얹어봐도 좋을 것 같습니다.
URL 은 그대로 /studyace
이건 좀 재밌는 결정이었는데요, 서브도메인 (studyace.binaryhub.club) 이 아니라 path (binaryhub.club/studyace) 를 유지하기로 했어요.
이유는 하나 — AdSense. AdSense 는 루트 도메인 위주로 신호를 쌓는데, 서브도메인은 별도 property 로 잡혀서 지표가 리셋될 위험이 있어요. 광고 트래픽이 중요한 사이트라 이 부분은 놓치기 아까웠습니다.
- 앞단: Cloudflare Tunnel → Caddy path proxy (
@studyace path /studyace /studyace/*) - 뒷단: PM2 blue/green (blog·tools 랑 동일 패턴)
Repo 는 완전히 별개로
bbb monorepo 밖에 새 폴더 (c:\Users\re\studyace) 로 시작했어요. StudyAce 의 실개발 규모가 워낙 커서 monorepo 안에 들이면 빌드 시간이 늘어나고, 세션도 헷갈리거든요.
세션 역할 분담:
- bbb (총괄) — 방향·인프라·배포 (Caddy·PM2·DNS)
- studyace — 실개발
이 글도 총괄 세션 소관이라 지금 여기서 쓰고 있어요.
다음 편 예고
다음 편에서는 시안 정독하면서 발견한 것들 — 특히 "백엔드도 결국 갈아엎게 됐다" 이야기를 써볼 예정이에요. 원래는 기존 Workers+D1 을 유지할 계획이었는데, 시안이 원한 판정 로직 (반응 지연 기반 3단 판정·망각 곡선) 이 지금 스키마로는 못 만들어져서 결국 처음부터 다시 짰거든요.
그럼 다음 편에서 뵐게요~