[AI 활용] Cursor AI로 코딩 없이 웹사이트 만들기 part.6 - 기술 스택 선정 및 프로젝트 구조 설계

🔗 Part.1 - 커서Cursor로 시작하는 개발과 웹 배포의 흐름
🔗 Part.2 - AI 없이 진행했던 개발 단계와 어려움
🔗 Part.3 - Cursor로 개선된 개발 과정과 기존 개발 방식 비교
🔗 Part.4,5 - Cursor 설치 및 초기 설정 방법(설치부터 규칙 설정까지)

기술 스택을 어떻게 정하느냐에 따라, 프로젝트의 개발 속도와 유지보수 효율성이 확 달라집니다. 오늘은 우리가 선택한 기술과 구조의 이유를 찬찬히 설명드릴게요.

안녕하세요! AI 기술 알려주는 아조씨, AIJOSSI입니다. 지난 편에서 Cursor를 설치하고, 프로젝트 룰까지 설정해봤죠. 이제는 본격적으로 "무엇으로 만들지"를 결정해야 할 시간이에요. 오늘은 우리가 선택한 기술 스택, 그리고 프론트/백엔드가 모두 포함된 모노레포 구조의 프로젝트 설계에 대해 소개해드리겠습니다.

1. 기술 스택 선정 배경

이번 프로젝트에서는 프론트엔드는 TypeScript + React, 백엔드는 TypeScript + Node.js (Express) 조합으로 구성합니다. 이 선택에는 다음과 같은 이유가 있어요.

정적 타입(TypeScript): 개발 중 버그를 줄이고, AI 코드 자동완성 정확도를 높입니다.
단일 언어 스택: 프론트와 백을 JavaScript 기반으로 통일하여 러닝커브를 낮춥니다.
Express: 가볍고 단순한 구조로 API 구현에 적합하며, 서버리스 배포에 최적화되어 있습니다.

물론 Next.js처럼 프론트/백 통합 풀스택 프레임워크도 있었지만, Cursor에서 프론트와 백엔드를 개별 영역으로 구분해 다루는 과정을 자세히 보여주기 위해 별도 구조를 선택했습니다.

데이터베이스는 이번 프로젝트에서 제외할 예정입니다. 정적 페이지 중심의 포트폴리오라 필요성이 적기 때문이죠. 단, 향후 방명록이나 메시지 저장이 필요하다면 MongoDB나 SQLite를 추가하는 것도 무리가 없습니다.

2. 프로젝트 디렉토리 구조 설계

우리는 프론트엔드와 백엔드를 하나의 저장소에 담는 모노레포(monorepo) 방식을 택했습니다. 이 방식은 GitHub과 Vercel 모두에서 관리가 편리하고, 공유 설정이나 코드의 재사용이 유리합니다.

예시 구조는 다음과 같습니다:

portfolio-project/
├── frontend/
│   ├── package.json
│   ├── tsconfig.json
│   ├── src/
│   │    ├── components/
│   │    ├── pages/
│   │    └── index.tsx
│   └── public/
│        └── ... (정적 자산: 이미지, favicon 등)
├── backend/
│   ├── package.json
│   ├── tsconfig.json
│   ├── src/
│   │    ├── routes/
│   │    ├── controllers/
│   │    └── index.ts
│   └── .env.example
├── .gitignore
└── README.md

Vercel에서는 프론트엔드 빌드 결과는 정적 사이트로, 백엔드는 서버리스 함수로 각각 배포 가능합니다. 따라서 프로젝트 전체를 하나의 Vercel 프로젝트로 설정해도 문제 없습니다.

이 구조를 통해 앞으로의 작업을 명확하게 나눌 수 있고, Cursor도 각 영역의 context를 이해하기 쉬워집니다.

3. 프론트/백엔드 패키지 구성

다음은 프론트엔드와 백엔드 각각에서 기본적으로 포함할 패키지들입니다. 나중에 Cursor에게 “프로젝트에 필요한 패키지 설치 명령어 알려줘”라고 직접 물어봐도 되지만, 기본 구조는 이렇게 정할 수 있어요.

✅ 프론트엔드 패키지

React, ReactDOM
TypeScript, ts-node
Vite (또는 CRA)
Tailwind CSS (선택사항)

✅ 백엔드 패키지

Express, Cors
Nodemailer (이메일 발송용)
TypeScript, ts-node, nodemon
dotenv, ESLint (환경 변수 및 코드 품질 관리)

실제 코딩 단계에서 Cursor에게 “React 프로젝트로 초기 셋업해줘”, “Express API용 boilerplate 만들어줘” 같은 프롬프트를 입력하면, 이 모든 패키지를 자동으로 설정해주는 흐름도 가능합니다.

4. 기타 설계 고려사항

디자인은 반드시 복잡할 필요 없습니다. Tailwind CSS를 선택하면 빠른 프로토타이핑과 일관된 스타일링이 가능해요. 특히 Cursor는 Tailwind 클래스도 잘 인식해서 “버튼 만들어줘. 주황색이고 마우스 오버 시 어두워져” 같은 프롬프트에 바로 대응 가능합니다.

5. Part.7 예고편 - 프롬프트 기반 개발 시작하기

이제 스택도 정했고, 구조도 정리되었으니 본격적인 프롬프트 기반 코딩을 시작해볼 시간입니다! 다음 편에서는 Cursor에게 구체적인 프롬프트를 주고, 프론트엔드와 백엔드 코드를 실제로 생성해보는 과정을 보여드릴 거예요.

단순히 "로그인 폼 만들어줘" 같은 요청뿐 아니라, "React 함수형 컴포넌트로, Tailwind로 스타일링하고, 이메일과 비밀번호 필드 포함" 등 정확하고 효율적인 프롬프트 작성법까지 함께 다루게 될 테니 기대해주세요!

지금까지 프로젝트의 골격을 완성해봤습니다. 기술 스택을 명확히 설정하고, 구조를 잡아두면 개발이 훨씬 수월해지죠. Cursor와 함께하는 코딩 여정, 다음 편부터는 더 실전적인 내용이 펼쳐집니다. AIJOSSI와 함께 끝까지 완성해봐요!

728x90

저작자표시 비영리 동일조건 (새창열림)