소개
클로드 MCP 활용 홈페이지 만들기 수업에서 playwright mcp를 활용해 기존의 웹사이트를 읽어오는 방법을 연습하면서 엄청 신기하다고 생각했습니다. 그리고 쓰레드를 살펴보다 우연히 아래 내용을 보았습니다.
한국 트위터 페이지의 스크린 샷
단순히 웹을 읽는 수준이 아니라 클론을 만들어준다니!
시도 해봐야겠단 생각이 들었습니다. 바로시작!
진행
사용도구 : 클로드, 클로드코드, OpenLovable
클로드에게 OpenLovable에 대해 물어봤습니다.
한국어 텍스트가있는 페이지의 스크린 샷
VS code를 활용해서 설치를 하고 다음 단계를 클로드에 다시 물어봅니다.
한국어 웹 사이트의 스크린 샷
클로드 선생님의 가이드를따라 회원가입 및 API 발급을 진행하고 서버를 실행해봅니다.
짜잔! Open Lovable이 실행되었습니다.
열린 사랑스러운 웹 사이트의 스크린 샷
다양한 랜딩페이지를 찾아볼수 있는 https://www.landing.love/ 에 접속해서 마음에 드는 웹사이트를 하나 고른 뒤 입력! Openlovable이 해당 페이지를 복제하기 시 작합니다.(완전신기…..)
컴퓨터에서 코드 편집기의 스크린 샷
복제된 파일들을 다운받고 만들어진 페이지를 실행해봅니다. 결과물이 매우 훌륭합니다.
(모든페이지를 다 해주는건 아니고 입력한 URL 페이지만 해줍니다.....다해주면 정말 말도 안되겠죠? ㅎㅎ)
프리랜서 UX 디자이너는 맞춤형 비 직조주의 디지털 경험을 창출합니다
vs code를 활용해 해당 폴더에서 클로드 코드를 실행합니다. 그리고 클로드에게 해당 페이지를 뉴스레터 형태로 바꿔달라고 요청합니다! 그리고 나온 결과물!
멋진 뉴스레터 페이지가 완성되었습니다!클로드에게 개발 스크립도 만들어 달라고 요청해봤습니다. 아주 정리를 잘 해줍니다. 멋진 개발 스크립트가 만들어졌습니다. 쭉 한번 읽어보고 오늘의 연습을 마무리 합니다!
# 뉴스레터 랜딩페이지 개발 스크립트
## 프로젝트 개요
기존 포트폴리오 웹사이트를 뉴스레터 랜딩페이지로 변경하는 작업
## 개발 단계
### 1. 프로젝트 분석 및 초기 설정
- React + Vite + Tailwind CSS 프로젝트 확인
- E2B 환경 설정 확인 (host: 0.0.0.0, port: 5173)
- CLAUDE.md 문서 생성
### 2. Hero 섹션 변경
**파일**: `src/components/Hero.jsx`
**변경사항**:
- 포트폴리오 소개 → 뉴스레터 소개로 변경
- 메인 헤드라인: "Discover the latest insights and trends in our newsletter"
- 부제목 추가: "Stay updated with curated content, industry news, and expert perspectives"
### 3. NewsletterCard 컴포넌트 생성
**파일**: `src/components/WorkCard.jsx` (기존 WorkCard 수정)
**주요 기능**:
- 썸네일 이미지 (고정 높이 h-64)
- 발행 날짜 표시
- 제목 및 요약문 표시
- 호버 효과 (이미지 확대, 제목 색상 변경)
**Props**:
```javascript
{ title, imageUrl, link, publishDate, excerpt }
```
### 4. NewsletterGrid 컴포넌트 생성
**파일**: `src/components/WorkGrid.jsx` (기존 WorkGrid 수정)
**주요 기능**:
- 6개의 샘플 뉴스레터 데이터 포함
- 최신순 정렬 기능 (publishDate 기준)
- 반응형 그리드 레이아웃 (1열 → 2열 → 3열)
- 날짜 포맷팅 함수
**샘플 데이터 주제**:
1. Web Development Trends 2024
2. Design Systems at Scale
3. User Experience Best Practices
4. Performance Optimization
5. Web Accessibility
6. Remote Work Tools
### 5. App.jsx 업데이트
**변경사항**:
- WorkGrid → NewsletterGrid 컴포넌트명 변경
- import 경로 업데이트
### 6. 실행 및 테스트
**명령어**: `npm run dev -- --port 5174`
**결과**: 성공적으로 실행 (포트 5173 충돌로 5174 사용)
## 최종 결과
- 다크 테마 유지 (#111111 배경, 흰색 텍스트)
- 뉴스레터 중심의 랜딩페이지
- 최신순으로 정렬된 뉴스레터 목록
- 반응형 디자인
- 호버 효과 및 애니메이션
## 사용된 기술
- React 18.2.0
- Vite 4.3.9
- Tailwind CSS 3.3.0
- Unsplash API (썸네일 이미지)
## 프로젝트 구조
```
src/
├── components/
│ ├── Header.jsx
│ ├── Hero.jsx (뉴스레터 소개)
│ ├── WorkCard.jsx (NewsletterCard)
│ ├── WorkGrid.jsx (NewsletterGrid)
│ └── Footer.jsx
├── App.jsx
├── main.jsx
└── index.css결과와 배운 점
홈페이지를 만들어야겠다고 생각한 후 가장 어려운 점이 컨셉을 선택하고 디자인을 하는 부분이었는데 Opeblovable를 활용하면 이런 부분을 좀 쉽게 해결할 수 있지 않을까 하는 생각이 들었습니다. 물론 저걸로 끝이 아니라 클론한 결과물을 내것으로 만들기 위해서는 끝없는 수정작업이 있어야 할것 같긴합니다. 하지만 새로운 기능을 또 하나 배웠고 평소에 쓰레드를 열심히 봐야겠다는 생각을 했습니다.
그리고 역시! 가장 중요한건 일단 그냥 해보는것. 막힐때는 AI선생님에게 하나 하나 물어보면 해결이 된다는 것!
홈페이지를 배포하는 방법을 배우기 전까지 많이 만들어보고 어떤 컨셉과 내용으로 홈페이지를 구성할지 고민해봐야겠습니다.
