StudyAce 2.0 개발기 ① 처음부터 다시

기말고사 끝나고 한동안 StudyAce 를 안 건드렸는데, 결국 큰 결정을 하나 했어요.

처음부터 다시 짜기로.

지난 BBlog 개편 이랑 비슷한 결인데 이번엔 훨씬 규모가 큽니다. 시안부터 시작해서 스택·백엔드까지 다 갈아엎을 예정이라... 나중에 잊어버리기 전에 시리즈로 남겨보려고 해요.

왜 다시 짜기로 했나

원래 StudyAce 는 1학기 때 만들었던 학습 사이트에서 시작됐어요. Cloudflare Workers + Static Assets + D1 조합으로 굴러가고 있었죠. (이전 편 에서 소개했었네요)

근데 오래 굴리다 보니까 크게 세 가지가 걸리더라고요:

1. UX 가 옛날 스타일.. 태블릿이랑 모바일에서 좀 뻑뻑하다...
2. 클라이언트가 모든 걸 박음. 이건 10편 어뷰징 대응 에서 다뤘던 문제. sanity check + 가챠 서버화까지 했지만 근본은 못 잡았었죠
3. 새 기능이 안 붙음. 반응 지연 기반 인출 판정이라든지, 망각 곡선 복습 스케줄 같은 걸 넣고 싶은데 지금 스키마로는 못 붙는다...

특히 3번이 결정타였어요. StudyAce 를 그냥 문제 푸는 사이트 가 아니라 인출·복습 과학 기반 학습 도구로 만들고 싶어서요. 이걸로 고소대회 본선 진출까지 했기 때문에 기존의 구조는 유지하기가 힘들었어요...

Figma 시안부터 그렸어요

이번엔 코드부터 짜지 않고 시안부터 그렸어요. AI 랑 같이 Figma 에서 작업했는데, Toss 스타일을 참고해서 mobile-first 로 잡았습니다.

주요 화면:

• 홈 (포인트·유물배지·오늘 할 일·랭킹·연속 스트릭)
• 문제풀이 3종 (가림판 / 객관식 / 성조)
• 통계·복습·상점·랭킹·프로필

근데 시안 정독하면서 재밌는 걸 발견했어요. Figma 파일 프레임이 10개인데, 앱 화면은 4개뿐이더라고요?? 시안만 읽는 데도 하루 정도 걸렸네요...

스택 결정 , 이건 좀 오래 저울질했어요

프레임워크는 Next.js 로 굳혔어요. 이미 BBlog 랑 북곽툴즈가 Next 로 도는 상태라 monorepo 스타일에 잘 맞아요. 배포 플로우 (PM2 blue/green + Caddy) 도 재사용할 수 있고요.

• Next.js 16 App Router
• Tailwind v4
• TypeScript
• PWA (manifest + service worker)

디자인 시스템에서 진짜 오래 고민했어요. 후보가 셋이었는데:

1. shadcn/ui — 커스터마이즈 자유도 최고, 2026-07 부터 base 가 Radix 에서 Base UI 로 바뀜
2. StyleSeed (bitjaru/styleseed) — Claude Code 용 design engine, 69개 design rule + 48 컴포넌트 + Toss/Stripe/Linear 스킨
3. 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 밖에 새 폴더로 시작했어요. StudyAce 의 실개발 규모가 워낙 커서 monorepo 안에 들이면 빌드 시간이 늘어나고, 세션도 헷갈리거든요.

세션 역할 분담:

• bbb (총괄) — 방향·인프라·배포 (Caddy·PM2·DNS)
• studyace — 실개발

이 글도 총괄 세션 소관이라 지금 여기서 쓰고 있어요.

다음 편 예고

다음 편에서는 시안 정독하면서 발견한 것들 — 특히 "백엔드도 결국 갈아엎게 됐다" 이야기를 써볼 예정이에요. 원래는 기존 Workers+D1 을 유지할 계획이었는데, 시안이 원한 판정 로직 (반응 지연 기반 3단 판정·망각 곡선) 이 지금 스키마로는 못 만들어져서 결국 처음부터 다시 짰거든요.

그럼 다음 편에서 뵐게요~