디자인을 보면 보통 "예쁘다"에서 멈춘다
웹사이트를 보다가 "이 사이트 진짜 예쁘다"는 생각, 한 번쯤 해보셨죠?
그런데 거기서 끝납니다. 대부분은.
AI로 직접 홈페이지를 만들고 싶은데, 막상 시작하려니 막막합니다. 코드는 어디서 시작해야 할지, 디자인은 어떻게 옮겨야 할지 감이 안 잡히죠.
이번 제주코딩캠프 수업에서 딱 이 문제를 다뤘습니다. 핵심은 단순합니다.
"예쁘다"에서 멈추지 말고, "구조"로 보는 눈을 키워야 한다.
스크린샷 하나로 웹페이지 구조를 분석하고, 그걸 프롬프트로 바꿔서 CursorAI로 실제 코드를 만드는 과정, 지금부터 단계별로 풀어드립니다.
왜 "구조"를 먼저 봐야 할까?
AI에게 "이 사이트처럼 만들어줘"라고만 하면 원하는 결과가 나오지 않습니다.
AI는 모호한 요청에 약합니다. 반면 구체적인 구조 정보를 주면 놀라울 정도로 정확하게 코드를 만들어냅니다.
웹페이지는 결국 몇 가지 블록의 조합입니다. 복잡해 보이는 사이트도 뜯어보면 아래 구조의 반복이에요.
1단계 — 스크린샷을 "박스"로 나눠보기
좋아하는 사이트를 캡처합니다. 그리고 이렇게 질문해 보세요.
"이 화면에서 반복되는 덩어리가 뭐지?"
위에서 아래로 훑으면서 크게 세 구역을 먼저 잡습니다.
- Header: 로고, 메뉴가 있는 상단
- Content(Main): 실제 내용이 들어가는 중간 영역
- Footer: 저작권, 링크, 연락처가 있는 하단
이것만 해도 절반은 완성입니다. 아래 구조도를 보시면 훨씬 직관적으로 이해가 됩니다.
어떤 사이트든 이 틀 안에 들어옵니다. <header> 안에는 로고와 <nav>, <main> 안에는 <aside>(사이드바)와 <section>(콘텐츠), 마지막에 <footer>가 오는 구조입니다. 이게 출발점입니다.
2단계 — 각 영역 안을 더 잘게 나눠보기
크게 세 덩어리를 잡았다면, 이제 각 영역 안을 더 쪼개봅니다.
실제 서비스 사이트를 예시로 보면 헤더 아래 메인 영역에는 이런 요소들이 들어있습니다.
- Hero 이미지 + 헤드라인: 첫눈에 들어오는 핵심 메시지
- Supporting copy: 부제목, 추가 설명
- Form 영역: 이메일 입력칸, 버튼(CTA)
- Social Proof: 후기, 고객 로고, 리뷰
- Benefits 섹션: 주요 기능 3가지 나열
- Footer: 로고, 정책 링크, 카피라이트
실제 사이트 구조 분석 예시를 보시면 이 흐름이 훨씬 명확하게 보입니다.
복잡해 보이던 사이트가 이렇게 쪼개지면, 갑자기 "아, 나도 만들 수 있겠다"는 느낌이 옵니다. 실제로 만들 수 있어요.
3단계 — 구조를 프롬프트 언어로 바꾸기
구조가 머릿속에 그려졌다면, 이제 그걸 AI가 알아들을 수 있는 말로 바꿔야 합니다.
예시 프롬프트는 이런 식입니다.
아래 구조로 반응형 웹페이지를 만들어줘.
[Header]
- 왼쪽: 로고 텍스트
- 오른쪽: 네비게이션 메뉴 (홈, 소개, 서비스, 문의)
[Main - Hero 섹션]
- 배경: 밝은 회색
- 왼쪽: 큰 헤드라인 텍스트 + 설명 문장 + 버튼(CTA)
- 오른쪽: 이미지 또는 플레이스홀더
[Main - 기능 소개 섹션]
- 3개의 카드 가로 배치
- 각 카드: 아이콘 + 제목 + 설명
[Footer]
- 저작권 텍스트 중앙 정렬
이 정도만 써줘도 CursorAI는 꽤 그럴듯한 HTML/CSS 코드를 뽑아냅니다. 구조가 명확할수록 결과물도 정확해집니다.
4단계 — CursorAI로 실제 코드 만들기
CursorAI는 일반 코드 에디터에 AI가 붙어있는 도구입니다. 위에서 작성한 프롬프트를 그대로 Cursor의 채팅창에 입력하면 됩니다.
처음에는 결과물이 100% 마음에 안 들 수 있습니다. 그래도 괜찮습니다. 중요한 건 수정하는 방법도 대화로 해결된다는 점입니다.
- "Hero 섹션 배경색을 흰색으로 바꿔줘"
- "버튼 색깔을 파란색으로 변경해줘"
- "카드 섹션을 모바일에서 1열로 보이게 수정해줘"
이런 식으로 계속 대화하면서 다듬어가면 됩니다. 코드를 몰라도 방향을 잡을 수 있습니다.
마무리 — 디자인 → 코드, 이제 AI로 충분히 가능합니다
정리하면 이렇습니다.
- 마음에 드는 사이트를 스크린샷으로 캡처한다
- Header / Content / Footer로 크게 나눈다
- 각 영역 안을 세부 요소로 쪼갠다
- 그 구조를 프롬프트 텍스트로 작성한다
- CursorAI에 넣고 코드를 받는다
- 대화로 수정하며 완성한다
코딩을 몰라도 됩니다. 구조를 읽는 눈만 있으면 됩니다. 그리고 그 눈은 오늘 이 글을 읽은 것만으로도 이미 조금 열렸습니다.
혹시 직접 해보셨나요? 분석해본 사이트나 만들어보고 싶은 페이지가 있다면 댓글로 공유해 주세요!
CursorAI 활용 웹개발 수업에 관심 있으신 분은 제주코딩캠프 커리큘럼을 확인해보세요. 스크린샷 하나로 시작하는 실습 중심 수업, 직접 만들어보면서 배웁니다. 🚀