[소개]
3년간 워드프레스로 웹 사이트를 제작하다가 최근 AI를 활용해서 개발을 하기 시작했습니다. 사실 아직은 AI로 홈페이지를 만드는 것 보다는 워드프레스나 버블을 이용하는게 훨씬 빠르고 고품질로 만들 수 있기는 하지만, 가까운 시일내에 이런 도구보다 AI와 개발하는게 더 빠르고 다양한 기능을 구현할 수 있을 것 같아서 AI 개발에 도전하고 있습니다.
이번 스터디에 참석하면서 처음으로 Cursor AI를 사용해보았고, 이것저것 시도해보았습니다.
[진행 방법]
먼저, 스터디장님이 공유해주신 GPTs "PRD Builder"를 활용하여 PRD를 작성하였습니다.
다만, 단순히 "퍼스널 브랜딩을 위한 랜딩페이지를 제작해줘" 라고 하면 자기 맘대로 하기 때문에, 먼저 정보를 입력할 수 있도록 질문하라고 요청했습니다.
Cursor AI를 이용해서 나를 소개하는 포트폴리오 홈페이지를 제작하고 싶어.
먼저 PRD를 작성하려고 하는데, PRD 작성에 필요한 자료들을 구체적으로 질문해줘그랬더니 아래와 같이 물어보네요
한국 버전의 게임 스크린 샷
이 질문들에 해당하도록 내용을 넣어보았습니다.
텍스트가있는 검은 색 화면의 스크린 샷
이렇게 했더니, 내가 넣고 싶어 하는 데이터가 PRD에 포함이 되지 않았습니다.
그래서 다시 요청했습니다. 아래에는 아까 썼던 이력이나 경력을 추가해두었습니다.
이렇게 하니까 그때서야 내용을 추가한 PRD를 줍니다.
검은 색 컴퓨터 화면의 스크린 샷
이제 PRD를 완성하고 Cursor에서 PRD.md 파일을 만들어 위 내용을 넣고, todolist.md도 만들어달라고 요청합니다.
했더니 아래와 같이 영어로 작성해주었습니다. 아무래도 한글로 하라고 따로 이야기해야 하는거 같습니다.
# Portfolio Landing Page Development Todo List
## Phase 1: Project Setup and Initial Structure (Week 1)
### Day 1-2: Project Initialization
- [ ] Create GitHub repository
- [ ] Set up project structure following the defined file structure
- [ ] Initialize Git and create .gitignore file
- [ ] Create README.md with project documentation
- [ ] Set up development environment
### Day 3-4: Dependencies and Base Setup
- [ ] Install and configure Tailwind CSS
- [ ] Set up basic HTML structure
- [ ] Create initial CSS file with Tailwind configuration
- [ ] Set up JavaScript environment
- [ ] Configure EmailJS or Formspree for contact form
## Phase 2: Core Development (Week 2-3)
### Week 2: Frontend Development - Main Sections
#### Day 1-2: Hero Section
- [ ] Design and implement hero section layout
- [ ] Add profile image placeholder
- [ ] Implement responsive design for hero section
- [ ] Add CTA button styling
- [ ] Implement scroll reveal animation
#### Day 3-4: About Me Section
- [ ] Create about me section layout
- [ ] Add content from PRD
- [ ] Implement responsive design
- [ ] Add hover effects
- [ ] Implement scroll reveal animation
#### Day 5: Career Timeline
- [ ] Design timeline layout
- [ ] Create timeline component
- [ ] Add career data structure
- [ ] Implement responsive design
- [ ] Add scroll reveal animation
### Week 3: Frontend Development - Projects and Education
#### Day 1-2: Projects Section
- [ ] Create projects.json data structure
- [ ] Design project cards layout
- [ ] Implement project cards component
- [ ] Add hover effects
- [ ] Implement responsive grid layout
- [ ] Add scroll reveal animation
#### Day 3-4: Education Section
- [ ] Design education section layout
- [ ] Create education cards
- [ ] Implement responsive design
- [ ] Add hover effects
- [ ] Implement scroll reveal animation
#### Day 5: Contact Section
- [ ] Design contact form layout
- [ ] Implement form validation
- [ ] Set up email integration
- [ ] Add success/error messages
- [ ] Implement responsive design
## Phase 3: Enhancement and Polish (Week 4)
### Day 1-2: Footer and Social Links
- [ ] Design footer layout
- [ ] Add social media icons
- [ ] Implement responsive design
- [ ] Add hover effects
- [ ] Link all social media profiles
### Day 3-4: Animations and Interactions
- [ ] Implement scroll reveal animations
- [ ] Add hover effects to all interactive elements
- [ ] Implement smooth scrolling
- [ ] Add loading animations
- [ ] Optimize animation performance
### Day 5: Testing and Optimization
- [ ] Cross-browser testing
- [ ] Mobile responsiveness testing
- [ ] Performance optimization
- [ ] Accessibility testing
- [ ] SEO optimization
## Phase 4: Final Steps (Week 5)
### Day 1-2: Content and Assets
- [ ] Add final content
- [ ] Optimize images
- [ ] Add favicon
- [ ] Implement dark mode
- [ ] Add meta tags
### Day 3-4: Documentation and Deployment
- [ ] Update README.md
- [ ] Document code
- [ ] Prepare deployment
- [ ] Set up hosting
- [ ] Deploy website
### Day 5: Final Review
- [ ] Final testing
- [ ] Bug fixes
- [ ] Performance check
- [ ] Security review
- [ ] Launch preparation
## Technical Requirements Checklist
- [ ] Responsive design for all screen sizes
- [ ] Cross-browser compatibility
- [ ] Accessibility compliance
- [ ] Performance optimization
- [ ] SEO best practices
- [ ] Security measures
- [ ] Error handling
- [ ] Loading states
- [ ] Form validation
- [ ] Email integration
## Design Requirements Checklist
- [ ] Clean and professional design
- [ ] Primary color (#140f75) implementation
- [ ] Dark mode support
- [ ] Consistent typography
- [ ] Proper spacing and alignment
- [ ] Visual hierarchy
- [ ] Interactive elements
- [ ] Animation effects
- [ ] Image optimization
- [ ] Icon consistency 어짜피 상관 없으니 2개 파일 확인하고 랜딩페이지 만들어달라고 일단 요청합니다.
그랬더니 제가 하지 않은 내용을 가지고 랜딩페이지를 만들어줍니다.
회사 웹 사이트의 홈페이지
음... 내가 원한건 이게 아닌데?
아직 익숙하지 않아서, 다시 한번 처음부터 만들어보기로 합니다.
혹시나 하나씩 확인을 하면서 개발을 하면 나아질까 싶어 아래와 같이 써봤습니다.
그랬더니... 뭐 할때마다 다 물어봅니다. 가뜩이나 파일을 생성하거나 디렉토리를 생성하면 다 확인을 눌러줘야 하는데 진행될 때마다 물어보니 너무 귀찮습니다. 결국... 묻지말고 해달라고 요청합니다.
하지만 무시하고 꿋꿋하게 물어봅니다. 어찌되었건 다 된거 같습니다. 두 번째로 만든 페이지도 열어봤습니다. 하지만, 역시나 미리 써놓은 이력과 경력을 반영하지 않습니다.
열은 받지만, AI와 싸워봐야 나만 손해입니다. 그래서 다시 적어달라고 합니다.
이렇게 넣고 실행했더니, 이제 최소한 내용은 넣어주었습니다.
이 정도면 기본은 나온거 같습니다. 레이아웃도 적당히 잘 된거 같고, 기능만 붙이면 되지 않을까 싶었습니다. 하지만 디자인이 너무 심심해서 바꾸고 싶어졌습니다. 일단, 이 내용을 가지고 직접 Cursor에서 prd를 만들어보라고 시켜보았습니다.
그리고 그 내용을 그대로 복사해서 claude를 이용해서 prd를 변경해보라고 해봤습니다.
그랬더니... 클로드가 온갖 효과와 이미지 등을 고려한 내용으 로 prd를 작성해주었습니다.
자... 새로운 prd가 나왔으니 Cursor에 와서 처음부터 다시 합니다.
빈 폴더를 만들고, prd를 넣고, todo.md 만들라고 하고, 이 2개 파일 보고 해보라고 시킵니다.
이때, windows를 쓰면 자꾸 오류가 난다고 합니다. 뭔가 windows에 안맞는 명령어를 쓰는가봅니다. 그래서 (주의) windows 10을 쓰고 있다고 합니다. 그리고 한글로 하라고 명령도 합니다.
두근두근
이제 실행해보았습니다.
타이핑 효과도 있고, 이미지 넣는 공간도 있고, 아이콘, 이미지 다 들어갑니다.
괜찮았지만 수정해야 할 곳이 참 많습니다. 특히, 내가 넣고자 하는 콘텐츠 내용을 자꾸 누락하거나 지 마음대로 넣습니다.
참 말을 안들어서 다시 수정하라고 합니다.
이제 내용은 들어왔습니다.
뭐 대충 내용은 된거 같아서 이제는 상세 수정을 요청합니다.
한국어 텍스트가있는 검은 색 화면
계속해서 수정해봅니다.
생각하는 시간보다 기다리는 시간이 더 길었습니다. 2시간째 이리저리 테스트 해보는데, 워드프레스로 했으면 1시간이면 될 페이지인데... 라는 생각과 기다리는 시간이 지루하다는 생각이 동시에 듭니다. 그래도 뭔가 계속 할때마다 되는것을 보면 신기하긴 합니다.
아쉬운 것은 타이핑 효과의 오류는 결국 잡지 못하고 Cursor가 스스로 그 효과를 제거해서 오류를 없애버렸습니다.
사실 이렇게 할게 아니라 될 수 있도록 해야 했지만... 일단은 귀찮아서 넘어가봅니다.
이제 얼추 그럴듯합니다.
그냥 끝 내기는 아쉬워서 구글 지도도 넣어보고, 이메일 발송 기능도 넣어보았습니다.
코드는 한줄도 쓰지 않았는데, 다 알려주고 준비해줍니다.
중간중간 오류도 계속해서 발행하는데, 타이핑 효과 오류는 못찾더니 다른 오류는 척척 잘 해결해줍니다.
생각보다는 마음에 듭니다. 신기한건 "메시지 전송" 하면 이메일도 온다는 점입니다. 알려주는 이메일 서비스로 연결했더니 됩니다.
아무래도 AI는 화면을 만드는거보다 기능을 구현하는 것이 더 쉬운거 같습니다.
[결과와 배운 점]
직접 해보니 생각보다 수준있게 만드는 것을 보고 앞으로가 더 기대되었습니다. 특히 Lovable이나 v0와 같은 도구를 이용하거나, 각종 MCP를 이용하 면 더 좋은 결과물을 뽑을 수 있다고 하던데, 정말 많은 도구들을 최대한 활용해서 실제 MVP 개발을 할 수 있는 프로세스를 만들어봐야겠습니다.
