Gemini / Super Gemini 이용한 샘플 프로젝트 #1

Gemini 와 Super Gemini를 설치 후 프로젝트 폴더 생성 (Ubuntu 환경에서 진행)

 

프로젝트 폴더에서 Gemini 실행 후 /init 하면 GEMINI.md 파일이 생성됨. (프로그램 요구사항 정의서 (PRD) 를 만듦)

 

 

 

해당 문서를 기반으로 전체 구조를 계획 (Gemini 가 생성한 문서이므로 PRD 문서를 변경하고 진행하여도 됨)

 

 ---

  Calculator Project: 종합 설계 명세서

  1. 요구사항 분석 (Requirements Discovery)

  핵심 목표: 사용자가 웹 브라우저를 통해 기본적인 사칙연산(+, -, *, /)을 정확하고 직관적으로 수행할 수 있는 계산기 애플리케이션을 제공합니다.

  사용자 시나리오 (User Journey):
   1. 사용자는 웹페이지에 접속하여 계산기 인터페이스를 확인합니다.
   2. 숫자 버튼과 연산자 버튼을 클릭하여 계산식을 입력합니다.
   3. 입력된 내용은 계산기 화면(Display)에 실시간으로 표시됩니다.
   4. '=' 버튼을 클릭하면, 입력된 계산식이 백엔드로 전송되어 결과값을 요청합니다.
   5. 백엔드는 계산 결과를 반환하고, 프론트엔드는 이 값을 화면에 표시합니다.
   6. 'C' (Clear) 버튼으로 현재 입력을, 'AC' (All Clear) 버튼으로 모든 상태를 초기화합니다.

  주요 기능 (MVP):
   * 숫자(0-9), 소수점(.) 입력
   * 사칙연산(+, -, *, /) 연산자
   * 계산 실행(=) 및 초기화(C/AC)
   * 입력 및 결과 표시 화면

  엣지 케이스 및 제약 조건:
   * 0으로 나누기 (오류 처리 필요)
   * 연속된 연산자 입력 (예: 5 * - 3)
   * 잘못된 계산식 입력 (예: 2++3)
   * 부동 소수점 정밀도 문제
   * 기술 제약: GEMINI.md에 명시된 대로 프론트엔드는 React, 백엔드는 Node.js/Express를 사용합니다.

  2. 시스템 아키텍처 (System Architecture)

  철학: 10배의 트래픽 증가에도 유연하게 대응할 수 있도록 프론트엔드와 백엔드를 명확히 분리(Loose Coupling)하여 확장성과 유지보수성을 확보합니다.

  컴포넌트 다이어그램:

    1 +-----------------+      +------------------------+      +----------------------+
    2 |                 |      |                        |      |                      |
    3 |   User Browser  |----->|  Frontend (React SPA)  |<---->|  Backend (Node.js)   |
    4 | (Client)        |      |  (Served by CDN)       |      |  (Stateless API)     |
    5 |                 |      |                        |      |                      |
    6 +-----------------+      +------------------------+      +----------------------+
    7                                                          |
    8                                                          | uses
    9                                                          ▼
   10                                                      +----------------------+
   11                                                      |                      |
   12                                                      |  Math.js Library     |
   13                                                      | (Safe Calculation)   |
   14                                                      |                      |
   15                                                      +----------------------+

  확장성 계획 (Scalability Plan):
   * Frontend: 정적 파일(HTML, CSS, JS)로 빌드하여 Vercel, Netlify 같은 CDN에 배포합니다. 이를 통해 전 세계 사용자에게 빠른 로딩 속도를 제공하고 서버 부하를 최소화합니다.
   * Backend: 백엔드 API는 상태를 저장하지 않는 Stateless 형태로 설계합니다. 이를 통해 Load Balancer 뒤에 여러 개의 서버 인스턴스를 배치하여 수평적으로 쉽게 확장(Scale-out)할 수 있습니다. 초기에는 단일 서버로 충분하지만, 트래픽 증가 시
     유연하게 대응 가능합니다.

  기술 스택 결정:
   * Frontend: React (Create React App)
   * Backend: Node.js, Express
   * 계산 로직: 보안 취약점(Code Injection)이 있는 eval() 함수 대신, 안전하고 정밀한 계산을 위해 math.js 라이브러리를 도입합니다.
   * 패키지 매니저: npm 또는 yarn

  3. 인터페이스 디자인 (Interface Design)

  API 명세 (Backend):
   * Endpoint: POST /api/v1/calculate
   * 역할: 문자열 형태의 계산식을 받아 계산 결과를 반환합니다.
   * Request Body:

   1     {
   2       "expression": "2 * (3 + 4) / 2"
   3     }
   * Success Response (200 OK):
   1     {
   2       "result": 7
   3     }
   * Error Response (400 Bad Request):

   1     {
   2       "error": "Invalid expression"
   3     }
   4     // 또는
   5     {
   6       "error": "Division by zero"
   7     }

  UI 아키텍처 (Frontend):
   * 컴포넌트 계층 구조:
       * App: 애플리케이션의 최상위 컨테이너
           * Calculator: 계산기 전체를 감싸는 위젯
               * Display: 현재 입력값과 결과를 보여주는 화면
               * Keypad: 모든 버튼을 포함하는 컨테이너
                   * Button: 숫자, 연산자 등 개별 버튼 (재사용 가능한 컴포넌트)
   * 상태 관리(State Management): Redux 같은 복잡한 라이브러리 없이, React의 기본 Hook인 useState를 사용하여 현재 입력(currentInput), 계산 결과(result) 등 단순한 상태를 관리합니다.
   * 디자인: 모바일 화면에서도 사용성이 저하되지 않도록 Mobile-First 접근법으로 반응형 디자인을 구현합니다. CSS Flexbox 또는 Grid를 활용합니다.
   * 접근성(Accessibility): 모든 버튼은 시맨틱한 <button> 태그를 사용하고, 키보드만으로 모든 기능이 동작하도록 보장하여 WCAG 표준을 준수합니다.

  4. 구현 전략 (Implementation Strategy)

  개발 로드맵 (Phase-based):
   1. Phase 1: 백엔드 구축 (1~2일)
       * Node.js/Express 프로젝트 초기 설정
       * math.js 라이브러리 연동
       * /api/v1/calculate 엔드포인트 구현
       * '0으로 나누기' 등 주요 오류 처리 로직 추가
       * CORS 설정으로 프론트엔드 요청 허용

   2. Phase 2: 프론트엔드 UI 구현 (2~3일)
       * Create React App으로 프로젝트 초기 설정
       * Display, Button, Keypad 등 재사용 가능한 UI 컴포넌트 구조 설계 및 마크업
       * CSS를 이용한 반응형 스타일링 (Mobile-First)

   3. Phase 3: 로직 연동 및 고도화 (2~3일)
       * useState를 이용한 프론트엔드 상태 관리 로직 구현
       * 버튼 클릭 시 currentInput 상태 업데이트 기능 구현
       * '=' 버튼 클릭 시 백엔드 API 호출 및 결과/오류를 Display에 반영
       * 'C', 'AC' 버튼 기능 구현

  품질 보증 (Quality Gates):
   * Linting: ESLint와 Prettier를 도입하여 일관된 코드 스타일을 유지합니다.
   * Unit Testing (Backend): Jest를 사용하여 계산 로직의 정확성을 검증하는 단위 테스트를 작성합니다. (예: calculate('2+2')는 4를 반환해야 함)
   * Component Testing (Frontend): React Testing Library를 사용하여 각 UI 컴포넌트가 의도대로 렌더링되고 상호작용하는지 검증합니다.

  리스크 관리:
   * 보안: eval() 사용을 원천적으로 배제하고 math.js를 사용하여 Injection 공격 위험을 완화합니다.
   * 정확성: math.js가 제공하는 고정밀도 계산 기능을 활용하여 부동 소수점 오류를 최소화합니다.

  ---

  이 설계안에 따라 프로젝트를 진행하겠습니다. 다음 단계를 지시해주세요.