01. 툴보다 제작 단계를 먼저 나눕니다
웹사이트 제작은 레퍼런스, 구조, 디자인, 구현, 자산, 배포가 다른 일입니다. 한 툴에게 전부 맡기기보다 단계별 강점을 조합하면 수정 비용이 줄어듭니다.
02. 레퍼런스 수집
| 목적 | 무엇을 볼까 | 예시 |
|---|---|---|
| 국내 디자인 갤러리 | 한국 시장의 레이아웃·업종 감성 파악 | GDweb 등 |
| 제품 UI 아카이브 | 실제 서비스의 화면 구조와 플로우 | Refero 등 |
| 수상작 갤러리 | 무드·타이포·인터랙션 탐색 | Awwwards 등 |
| 무드보드 | 이미지·컬러·분위기 수집 | Cosmos 등 |
03. 기획·정보구조
| 역할 | 적합한 일 | 주의 |
|---|---|---|
| Claude / ChatGPT | 요구사항 정리·카피·사용자 흐름·비교 | 문서/대화형 기획 |
| Relume류 | 사이트맵·와이어프레임 초안 | 구조를 빨리 볼 때 |
| 에이전트형 도구 | 리서치와 여러 단계를 묶은 작업 | 범위가 큰 기획 |
04. 디자인 단계
| 도구 | 강점 | 적합 |
|---|---|---|
| Figma | 정교한 UI·컴포넌트·협업 | 디자인 시스템 기반 작업 |
| Claude Design | 대화형 디자인·프로토타입·브랜드 시스템 적용 | 베타/플랜 확인 |
| Google Stitch | 자연어 기반 UI 탐색·고해상도 화면·코드/디자인 연결 | 빠른 방향 탐색 |
| Canva | 마케팅 비주얼·간단한 웹 자산 | 정교한 제품 UI보다 콘텐츠 자산 |
05. 구현 단계
| 유형 | 좋은 점 | 주의 |
|---|---|---|
| Codex / Claude Code | 기존 코드베이스 이해·수정·테스트·파일 작업 | 코드 품질과 검증 필요 |
| Cursor | 에디터 안에서 AI 코딩 | 개발자가 직접 확인하며 작업 |
| v0 등 AI 빌더 | UI 초안과 프론트엔드 시작점 | 실제 기능·데이터 연결 별도 검증 |
| Figma Sites / Framer / Webflow | 노코드·로우코드 퍼블리싱 | CMS·SEO·운영 방식 비교 |
06. AItira 권장 조합
1
레퍼런스 10개
좋아하는 이유를 색·타입·구조로 분해
2
요구사항 1장
누구/무엇/CTA/필수 기능
3
디자인 시스템
컬러·타입·간격·컴포넌트
4
시안
Stitch/Figma/Claude Design 등으로 2~3안
5
구현
코딩 에이전트 또는 빌더
6
검증
모바일·폼·링크·404·SEO·접근성
관련 실전
다음 단계
AItira는 제공 자료의 주제와 일반적인 학습 포인트를 참고하되 고유 문장·표·프롬프트·디자인을 복제하지 않고, 공식 정보와 일반 원칙을 기준으로 새로 구성합니다. 기능·요금·화면은 변경될 수 있습니다.