구성요소 내부 설계 — UI, Server, AI, 보안의 깊이
how-to-design-a-program-from-scratch|전체 앱 설계에서 각 구성요소를 들여다보면 그 안에도 설계해야 할 깊이가 있다. 설계는 프랙탈 구조 — 확대하면 각 부분이 또 하나의 세계다.
핵심 원칙: 각 영역에서 "방향"만 네가 정하고, 구현은 AI에게 맡긴다. 방향은 종이 반 장 분량이면 충분하다.
UI — "어떤 경험을 줄 것인가"
네가 결정할 것
1) 디자인 시스템 — 레퍼런스를 정한다
코드 전에 시각적 방향을 잡는다:
- 참고할 앱/사이트 2~3개 스크린샷
- "이 앱의 이 부분이 좋다" 메모
- 색상 톤, 폰트 느낌, 컴포넌트 라이브러리 (shadcn/ui 등)
이걸 안 정하고 "이쁘게 만들어줘"라고 하면 AI가 매번 다른 스타일을 준다.
2) 레이아웃 — 종이에 영역 배치를 그린다
픽셀 단위가 아니라 "어떤 영역이 있고 어떤 관계인지"만:
┌──────────────────────────────────┐
│ 헤더: 학기 선택, 설정 버튼 │
├────────┬─────────────────────────┤
│ 사이드 │ 주간 시간표 그리드 │
│ 수업 │ │
│ 목록 │ │
├────────┴─────────────────────────┤
│ 하단: 채팅 입력 (LLM) │
└──────────────────────────────────┘
3) 상태 관리 — 핵심 질문만 답한다
- 전역 상태가 필요한 게 뭐야? (선택된 학기, 수업 목록)
- 컴포넌트끼리 데이터 공유가 필요한 부분은?
- 비동기 데이터(LLM 응답)의 로딩 처리는?
AI에게 맡길 것
개별 컴포넌트 구현, 반응형 처리, 애니메이션, 접근성.
Server — "어떤 성능 특성이 필요한가"
네가 결정할 것
1) API 설계 — 엔드포인트 목록
how-to-scope-requirements|요구사항의 기능 그룹에서 도출:
[수업 관리] GET/POST/PUT/DELETE /courses
[LLM] POST /llm/command, POST /llm/query
구체적인 요청/응답 형태는 AI에게 맡겨도 된다.
2) 성능 요구 — 숫자로 표현
동시 사용자: 1명 (개인용)
응답 시간: 일반 API 200ms, LLM 5초 이내
데이터 규모: 학기당 수업 최대 30개
이 숫자에 따라 캐싱, 인덱싱 필요 여부가 결정된다.
3) 에러 전략 — "실패하면 어떻게 되나"
LLM 무응답 → 타임아웃 5초, 재시도 메시지
DB 실패 → 에러 알림, 입력 데이터 유지
네트워크 → Local-First면 오프라인 동작
AI/LLM — "어떤 결과를 기대하는가"
네가 결정할 것
1) 기능 범위 — 할 수 있는 것과 없는 것
✓ 자연어 → 일정 데이터 변환
✓ 일정 조회 + 요약
✗ 수업 자동 삭제 (위험 조작은 사용자 확인 필요)
✗ DB 직접 접근
2) 입출력 계약
입력: 자연어 + 관련 일정 데이터
출력: {"action": "add_event", "date": "...", ...}
3) 실패 대응 — LLM은 틀릴 수 있다
JSON 파싱 실패 → 재시도 최대 2회
날짜 오해석 → 사용자에게 확인 UI 표시
엉뚱한 답 → "이해하지 못했어요" 폴백
LLM 출력을 바로 실행하지 않고, 사용자에게 확인받는 것이 안전한 설계다.
보안 — "무엇을 보호하는가"
세 계층으로 나뉜다:
- 네트워크: HTTPS, CORS
- 애플리케이션: 인증(누구인가), 인가(뭘 할 수 있는가), 입력 검증
- 데이터: 저장 암호화, 민감 정보 마스킹, LLM 전송 시 개인정보 제거
개인 로컬 앱이라면 대부분 불필요. "LLM API에 보낼 때 어떤 정보를 포함하고 빼는가" 정도만 결정하면 된다.
요약: 각 영역에서 "방향"만 정한다
| 영역 | 네가 정하는 것 | AI에게 맡기는 것 | |---|---|---| | UI | 레퍼런스, 레이아웃 스케치, 전역 상태 | 컴포넌트 코드, 스타일링, 반응형 | | Server | 엔드포인트 목록, 성능 숫자, 에러 전략 | API 구현, 쿼리 최적화, 로깅 | | AI/LLM | 기능 범위, 입출력 형태, 실패 대응 | 프롬프트, 파싱 로직, 재시도 | | 보안 | 보호 대상, 인증 여부, LLM 전송 범위 | 암호화 구현, 토큰 관리 |
한 번에 다 하지 않는다
domain-modeling-vs-implementation-unit|기능 그룹 단위로 접근한다:
[수업 관리] 구현 시 → UI 레이아웃 + Server CRUD만 설계
[LLM 기능] 구현 시 → 채팅 UI + AI 입출력 + 보안 범위 추가 설계
기능 그룹을 구현할 때마다, 그 기능에 관련된 영역만 "방향"을 추가로 정하면 된다.