웹사이트 디자인
목표
고객사 비즈니스를 위한 세련된 단일 페이지 HTML 목업 웹사이트를 생성합니다. 웹사이트는 buildinamsterdam.com 미학(대담한 타이포그래피, 오프화이트 배경, 편집 그리드 레이아웃, 테라코타 악센트)을 따릅니다. 웹 디자인 서비스를 제안할 때 사용됩니다.
입력값
- Google Sheet URL (고객 데이터 포함)
- 행 번호 (1부터 시작, 헤더 제외) – 선택할 고객 지정
- 선택 사항: 워크시트 이름 (기본값: 첫 번째 시트)
예상 시트 열
스크립트는 다음 열을 (대소문자 구분 없이, 유연하게 매칭하여) 매핑합니다:
| 열 | 매핑 대상 |
|---|---|
| company_name / company | 비즈니스 이름 (히어로, 내비게이션, 푸터) |
| description / about | 소개 섹션 + 히어로 부제목 |
| keywords / services | 서비스 그리드 (쉼표로 구분) |
| phone / phone_number | 연락처 섹션 |
| email / contact_email | 연락처 섹션 |
| address / full_address | 연락처 섹션 |
| city, state, country | 위치 정보 |
| industry / category | Unsplash 이미지 검색 쿼리 |
| first_name, last_name | 소유자 속성 |
| title / role | 소유자 역할 |
스크립트
scripts/read_prospect.py— Google Sheets에서 단일 고객 행을 읽어 JSON으로 변환scripts/generate_website.py— 고객 JSON에서 HTML 웹사이트 생성
프로세스
1단계: 고객 데이터 읽기
python3 .claude/skills/design-website/scripts/read_prospect.py \
--url "SHEET_URL" \
--row ROW_NUMBER \
--worksheet "WORKSHEET_NAME" # 선택 사항
stdout에 JSON 출력.
2단계: 웹사이트 생성
python3 .claude/skills/design-website/scripts/read_prospect.py \
--url "SHEET_URL" --row 1 | \
python3 .claude/skills/design-website/scripts/generate_website.py
또는 JSON 파일 사용:
python3 .claude/skills/design-website/scripts/generate_website.py < prospect.json
3단계: 미리보기
브라우저에서 생성된 파일 열기:
open .tmp/website_*.html
출력물
.tmp/website_{company_slug}.html— 독립적인 HTML 파일, 모든 브라우저에서 열람 가능- 모든 CSS는 인라인, 이미지는 외부 URL (Unsplash)
환경 변수
.env파일의UNSPLASH_ACCESS_KEY— 스톡 사진에 필요. https://unsplash.com/developers 에서 무료 키 발급- 키가 없으면 picsum.photos의 큐레이트된 플레이스홀더 이미지로 대체
- Google OAuth 인증 정보 (token.json / credentials.json) – Sheets 접근용
디자인 시스템
- 폰트: Inter (Google Fonts CDN)
- 색상: 오프화이트
#F2EFE6, 검정#000, 흰색#FFF, 테라코타#C38133 - 타이포그래피: 굵은 대문자 디스플레이 (72-100px), 섹션 제목 (36-48px), 본문 (16-18px)
- 레이아웃: 전체 뷰포트 히어로, 2열 소개, 3열 서비스 그리드, 2x2 갤러리
- 버튼: 테두리 있음, 대문자, 자간 넓음
엣지 케이스
- 열 누락: 스크립트가 적절한 기본값 사용 (예: 설명이 없으면 "Welcome")
- Unsplash 키 없음: picsum.photos 플레이스홀더 이미지로 대체
- 긴 회사 이름: CSS가 반응형 글꼴 크기 조정으로 처리
- 특수 문자: 출력 시 HTML 이스케이프 처리