프론트엔드 종합: 전체 UI 코드 리뷰

핵심 개념

파트 1 25챕터 결과물 종합 점검 — 빌드 검증·Lighthouse·체크리스트 — 파트 2 백엔드 진입 준비.

본문

25챕터 결과물 — 무엇을 만들었나

📋 코드 (31줄)

[기획·세팅] CH.1~13
✓ 5가지 옵션 → AI SaaS 선택
✓ Lean Canvas + User Story 10개
✓ Figma 와이어프레임 10화면
✓ ERD 6엔터티
✓ Next.js + Tailwind + Supabase + CI/CD

[프론트엔드] CH.14~24
✓ 레이아웃 (헤더·사이드바·푸터)
✓ 인증 (이메일·Google OAuth)
✓ 대시보드 (통계·차트·활동)
✓ CRUD UI (목록·상세·생성·수정·삭제)
✓ 검색·필터·정렬·페이지네이션
✓ 파일 업로드
✓ 실시간 알림
✓ 설정 (프로필·알림·결제·삭제)
✓ 다크모드·반응형
✓ 에러·로딩·빈 상태
✓ a11y + SEO

[지금 가능한 것]
- 회원가입·로그인 동작
- 대시보드 진입
- 빈 상태 표시 (CRUD 데이터 없음)
- 파일 업로드 동작 (Storage)
- 다크/라이트·모바일 지원

[못 하는 것 — 파트 2에서]
- AI 카피 생성 (CH.34~38)
- Stripe 결제 (CH.44)
- 모니터링·CI/CD 완성 (CH.39~43)

종합 체크리스트 — 빌드·코드 품질

BASH📋 코드 (14줄)

# 1. 빌드 검증
pnpm typecheck    # 0 errors
pnpm lint         # 0 errors
pnpm build        # 0 errors

# 2. 번들 사이즈
pnpm build → output 분석
First Load JS: < 200 KB (목표)

# 3. Lighthouse (Vercel preview)
- Performance: 90+
- Accessibility: 100
- Best Practices: 100
- SEO: 100

종합 체크리스트 — 기능

📋 코드 (33줄)

[인증]
✓ 이메일 가입 → 로그인 → 대시보드
✓ Google OAuth → 콜백 → 대시보드
✓ 로그아웃 → 랜딩
✓ 비밀번호 재설정 (Magic Link)

[CRUD]
✓ 생성 → 목록 갱신 (revalidatePath)
✓ 상세 → 404 처리
✓ 수정 → 낙관적 UI
✓ 삭제 → 확인 모달

[검색·필터]
✓ Debounce 300ms
✓ URL 동기화 (공유 가능)
✓ 결과 없음 처리

[파일 업로드]
✓ 드래그앤드롭
✓ 진행률 표시
✓ 미리보기

[설정]
✓ 프로필 수정
✓ 알림 토글
✓ 계정 삭제 (DELETE 확인)

[UX]
✓ 다크/라이트 토글
✓ 375px 모바일 정상
✓ 로딩 Skeleton
✓ 에러 ErrorBoundary
✓ 빈 상태 CTA

종합 체크리스트 — SEO·a11y

📋 코드 (17줄)

[SEO]
✓ <html lang="ko">
✓ metadata.title.template
✓ description (각 페이지)
✓ OG 이미지 (1200x630)
✓ sitemap.ts
✓ robots.ts (인증 페이지 disallow)
✓ JSON-LD (랜딩)

[a11y]
✓ Lighthouse Accessibility 100
✓ alt 모든 이미지
✓ button 시맨틱
✓ 폼 label
✓ 키보드 Tab 순회
✓ focus ring
✓ 색 대비 4.5:1+

Vercel 배포 (Preview)

BASH📋 코드 (4줄)

# Vercel Preview URL로 실기기 테스트
git push origin feature/frontend-complete
# → Vercel 자동 배포 → preview URL
# → iPhone·Android 실기기 접속 → 점검

코드 리팩토링 포인트

📋 코드 (12줄)

[중복 컴포넌트]
- 카드 스타일 → <Card>로 통합
- 버튼 스타일 → <Button variant>로 통합

[큰 파일 분할]
- page.tsx 200줄 넘으면 → 작은 컴포넌트 분리

[하드코딩 색상]
- bg-blue-500 → bg-primary

[any 타입]
- any → unknown + 좁히기

다음 챕터 (파트 2 시작)

CH.26 "API 설계: RESTful 엔드포인트 전체 설계" — 백엔드 풀스택.

파트 2 (CH.26~50) 미리보기

📋 코드 (5줄)

[백엔드 8] CRUD API·인증·파일·실시간·검색·웹훅
[AI 5]    AI 기능·연동·RAG·비용·품질
[배포 5]  Vercel·모니터링·CI/CD·성능·보안
[수익화 5] Stripe·런칭·SEO·100명·MRR
[졸업 2]  코드 리뷰·로드맵 완료

→ 파트 1 결과물(목업 데이터로 동작) → 파트 2에서 실데이터·AI·결제 통합 → MVP 출시.

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

내 마스터 프로젝트의 프론트엔드 종합 점검 부분을 분석해서
실전 적용 + 개선 우선순위 3가지를 알려줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

프론트엔드 종합 점검 관련 모범 사례·안티패턴 5개를
비교 분석해서 실전 적용를 위한 추천 방안을 알려줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

내 프로젝트 전체에서 프론트엔드 종합 점검
최적화 가능 위치와 리스크를 보고해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년 한국 1인 개발자 시장의
프론트엔드 종합 점검 트렌드와 차별화 포인트를 정리해줘.

⭐ 이것만 기억하세요

프론트엔드 종합: 전체 UI 코드 리뷰는 이 3가지만 확실히 잡으세요

1.파트 1 = 프론트엔드 + 인증 + 기본 CRUD 완성

2.Lighthouse 90+ / a11y 100 = 출시 가능 품질 기반

3.다음 챕터에서 백엔드 API 설계 시작

💬 이 챕터 질문 보기

MASTER-PROJECT · CH.25 — 질문하거나 답변을 확인하세요

→

진행도 25 / 50

← 커리큘럼으로 ← 목록으로 (master-project)