AI로 풀스택 개발하기:프론트엔드 개발(CodeGear.Info)

---

 

https://youtu.be/RH_W9ModQro

 

 

AI 코딩 도구 - 작동 방식에 따른 구분

AI 코딩 도구는 작동 방식 따라 세가지로 구분할 수 있습니다.

• 터미널 기반
  • 맥에서는 터미널을 윈도우에서는 WSL(Windows Subsystem for Linux)을 사용합니다.
  • 클로드 코드, 제미나이 CLI 등
• IDE(통합개발환경) 플러그인 형태
  • 대부분 Visual Studio Code를 플러그인 형태로 제공되어 IDE에 설치 후 사용합니다.
  • Cursor, Windsurf, Cline AI, RooCode AI, Github Copilot 등
• Web Service
  • 웹사이트에 로그인 해서 사용합니다.
  • 구글 AI Studio, v0.dev, Replit 등 

개인적으로 Web Service는 잘 사용을 하지 않습니다.
회사에서 개발할때는 Code Base에서 수정을 하거나, 기능을 추가하는 경우가 많다보니 적합하지 않아서 입니다.

---

AI로 개발을 잘 하는 방법

AI로 개발을 할때 중요한 것은 AI에게 어떻게 지시를 하는가 입니다.

지시하는 사람이 얼마나 구체적이고, 명확하게 지시를 하는가에 따라 결과물이 달라집니다.

AI가 연속성을 가지고 개발을 잘 진행하게 하려면 다음과 같은 방법을 사용하세요.

• 요구사항을 명확하게 알려줄것.
• 처음부터 끝까지 모든것을 한번에 요청하지 말것
• 개발을 단계별로 나누어서 진행할 수 있도록 AI가 직접 계획을 수립하게 지시할 것.
• 계획에 따라 순차적으로 진행을 하되 반드시 소스 검토와 테스트를 할 것.
• 처음 소스가 만들어지만 그 이후에는 작은 기능을 하나씩 붙여 나갈것.

---

프론트엔드 개발하기

프론트엔드 개발을 하기 위해서 다음과 같은 요구사항 문서를 작성합니다.

저는 주로 마크다운 문법을 사용하는 옵시디언을 이용해 문서를 만듭니다.

 

다음은 codegear.info 프론트엔드 개발을 위한 requirement-frontend.md 문서입니다.

### 1. **사이트 목적 및 대상 사용자**
- **사이트 목적:** 이 사이트는 AI 특히 프로그램 개발과 관련된 AI 기술을 소개하는 CodeGear의 유튜브와 블로그를 소개 및 홍보하기 위한 것
- **대상 사용자:** AI에 관심이 있는 개발자가 주 고객층임
    - _왜 필요한가?_ AI 관련된 정보는 많이 있지만, 개발자에게 꼭 필요한 정보는 찾기 힘든면이 있음. 이러한 대상 사용자의 니즈를 충족시키기 위해, 사이트는 **전문적이고 실용적인 정보**를 명확하고 효율적으로 전달하는 데 중점을 두어야 함.

### 2. **주요 기능 및 페이지 구성**
- **필수 페이지:**
    - **홈 (Landing Page):** 방문자에게 첫인상을 주고 핵심 메시지를 전달하는 페이지. 아래 유튜브 인기 영상 3개를 중앙에 사이트 임베드 해서 보여줄것.
	    - Cursor AI 대체, 무료 오픈소스 Cline AI 쓸만할까?
		    - https://youtu.be/AWWNCGXFTfw?si=uTh_TlM9oO826l8w
	    - AI로 [유튜브 요약+노트 저장] 자동화하는 법 - MCP+Obsidian+Cline+Gemini
		    - https://youtu.be/XXurwjs307s?si=n4YYvbEYv4T49Xsj
		- n8n(AI워크플로우자동화) AWS 셀프호스팅 방법
			- https://youtu.be/rZnBHanWiZg?si=Q7XNIaNB7TJO7Aoc
    - **소개/About:** 유튜브와 블로그에 대한 정보. 
	    - 유튜브 채널 : https://www.youtube.com/@codegear-21
	    - 블로그 : https://codegear.tistory.com/
- **기능:**
    - **반응형 디자인:** 모바일, 태블릿, 데스크톱 등 다양한 기기에서 잘 보이도록.
    - **디자인**: Clean & Modern Minimalism과 Bold & Expressive Typography를 적절히 사용할것.
    - **다크 모드**: 다크모드, 라이트모드, 시스템 모드를 선택할 수 있도록.
    - **간단한 애니메이션/인터랙션:** 사용자 경험을 향상시킬 수 있는 요소 (스크롤 애니메이션, 호버 효과 등).
    - **SEO 친화적:** 검색 엔진에 노출이 잘 되도록 기본적인 메타태그 설정 등.

### 3. **콘텐츠 요구사항**
- **이미지 or 비디오:** 저작권에 위배되지 않도록 https://pixabay.com 에서 적절한것을 사용할 것.
- **아이콘:** Heroicons 아이콘 팩을 사용할것.

### 4. **성능 및 접근성**
- **로딩 속도:** 빠른 페이지 로딩 속도 (Core Web Vitals 고려).
- **접근성 (Accessibility):** 시각 장애인 등 다양한 사용자를 위한 웹 접근성 고려 (ARIA 속성, 키보드 내비게이션 등)

### 5. **구현계획**
- 한번에 사이트를 완성하지 말고, 단계별 계획을 세워서 만들것.
- plan.md에 계획 내용을 작성해서 저장해서 실제 구현시 사용할것.

### 6. **프레임워크**
- 프레임워크는 next.js 로 만들것.
- 컴포넌트 기능을 최대한 활용할 것.

### 7. **언어**
- 답변은 한국어로 할것

• ###, ** 등의 기호가 들어가 있는데, 마크다운 에디터를 사용하면 아래와 같이 보이게 됩니다.

---

AI 코드 어시스턴트에게 개발 요청하기

지난 개요에서 설명한 폴더 구조는 다음과 같습니다.

 

이제 requirement.md를 이용해서 개발을 요청해 보겠습니다.

• 프론트엔드 폴더에 requirement.md를 복사합니다.
• 프론트엔드 폴더에서 에디터를 열고 AI에게 개발 요청을 합니다.
• IDE 기반의 어시스턴트는 Roo Code AI를 사용했습니다.
• RooCode AI의 경우 Architect 모드로 시작 하였고, 계획이 수립되면 Code 모드로 변경하였습니다.

• 터미널 기반은 클로드 코드를 사용하였습니다.
• VSCode에 클로드코드 플러그인을 설치하면 좀 더 편하게 하실 수 있습니다.
• 두 케이스 모두 아래와 같이 입력하면 프로젝트를 생성합니다.

requirement.md를 분석해서 구현 plan을 수립해줘

 

• 중간에 진행 여부를 묻는 과정이 있는데, 지금과 같이 프로젝트를 생성하고 특별한 로직이 들어가지 않을 경우는 Auto 모드로 진행을 해도 괜찮습니다.

 

---

어시스턴트별 결과  확인

물론 어시스턴트에 어떤 AI모델을 붙였는지에 따라 결과가 달라질 수 있습니다.

요구사항 마크다운을 수정해도 결과가 달라집니다.

다음은 제가 수행한 결과들이니 참조용으로만 봐주세요.

 

클로드 코드

제미나이 CLI

루코드+제미나이

 

---

이렇게 해서 완성된 소스를 준비된 서버에 배포하시면 됩니다.

도메인 구매와 서버 구축 방법은 아래 링크된 글에서 확인하실 수 있습니다.

https://codegear.tistory.com/137

6천원 도메인, 무료 AWS로 '나만의 웹사이트' 띄우는 갓성비 끝판왕 가이드!

 

배포 방법은 아래 링크된 글에서 보실 수 있습니다.

https://codegear.tistory.com/145

수동으로 개발 소스 서버에 배포하기(aws, github, pm2, nginx)