**# 역할 부여**
당신은 숙련된 UI/UX 디자이너이자 프론트엔드 개발자입니다. 지금부터 아래의 상세한 기획안을 바탕으로 '파도세무회계'의 원페이지(One-Pager) 웹사이트 HTML 프로토타입을 제작해야 합니다. 최종 결과물은 하나의 HTML 파일로, CSS와 JavaScript 코드가 내부에 포함되어 있어야 합니다.
**# 프로젝트 개요**
* **클라이언트:** 파도세무회계 (Pado Tax Accounting)
* **웹사이트 타입:** 반응형 원페이지 웹사이트
* **핵심 콘셉트:** 고요한 파도 속, 깊이 있는 전문성
* **주요 키워드:** 신뢰, 전문성, 꾸준함, 안락함
* **타깃 고객:** 30~50대 사업가 및 자산가
**# 디자인 시스템**
프로토타입은 반드시 아래의 디자인 시스템을 준수하여 제작해 주세요.
**1. 컬러 팔레트 (Color Palette)**
* **Primary (메인 네이비):** `#0d2c4f` (헤더, 푸터 등 주요 영역)
* **Base (모던 블랙):** `#212529` (기본 텍스트, 어두운 배경)
* **Accent (포인트 블루):** `#3a7ca5` (버튼, 링크, 강조 요소)
* **Background (밝은 회색):** `#f8f9fa` (밝은 섹션의 배경)
* **Text (밝은 텍스트):** `#ffffff` (어두운 배경 위의 텍스트)
* **Border / Gray (구분선/회색):** `#dee2e6`
**2. 타이포그래피 (Typography)**
* **폰트:** Pretendard
* **폰트 스타일 가이드:**
* **H1 (메인 타이틀):** `font-weight: 700; font-size: 42px; line-height: 1.4; letter-spacing: -1.5%;`
* **H2 (섹션 제목):** `font-weight: 700; font-size: 32px; line-height: 1.4; letter-spacing: -1%;`
* **H3 (소제목):** `font-weight: 600; font-size: 24px; line-height: 1.5;`
* **Body (본문):** `font-weight: 400; font-size: 17px; line-height: 1.7;`
* **Lead (리드 텍스트):** `font-weight: 400; font-size: 20px; line-height: 1.6;`
* **Button (버튼):** `font-weight: 600; font-size: 16px;`
* **Caption (캡션):** `font-weight: 400; font-size: 14px; line-height: 1.5;`
**3. 이미지 처리 규칙**
* **모든 사진 및 이미지가 들어갈 영역은 회색 박스 (**`background-color: #cccccc;`)로 처리해 주세요. 프로필 사진, 배경 이미지 등 모든 시각적 요소가 이 규칙을 따릅니다.
**# 웹사이트 구조 및 콘텐츠 (섹션별 상세 기획)**
아래 순서와 내용에 따라 5개의 섹션으로 구성된 원페이지를 제작해 주세요.
**[Section 1: Hero]**
* **배경:** 전체 화면을 덮는 어두운 배경 (Primary 또는 Base 컬러). 배경 이미지 영역은 회색 박스로 처리.
* **내용:**
* **H1 (메인 타이틀):** "저희는 세무 서비스가 아닌, '안락함'을 팝니다."
* **Lead (리드 텍스트):** "복잡한 세금 문제는 저희에게 맡기시고, 대표님은 더 중요한 사업에만 집중하세요. 파도세무회계가 든든한 파트너가 되어드리겠습니다."
* **Button (버튼):** "[무료 상담으로 안락함 경험하기]" (Accent 컬러 배경). 이 버튼 클릭 시 페이지 하단의 `[Section 5: Contact]`로 부드럽게 스크롤 되어야 합니다.
**[Section 2: Our Philosophy]**
* **배경:** 밝은 회색 (`#f8f9fa`)
* **내용:**
* **H2 (섹션 제목):** "왜 '지속 가능한' 세무사가 중요할까요?"
* **Body (본문):** "사업은 1라운드 경기가 아닙니다. 처음의 화려한 약속보다, 12라운드 내내 곁을 지키는 꾸준함이 중요합니다. 파도세무회계는 매일의 성실함으로 대표님의 사업 여정을 끝까지 함께합니다."
* **세무사 소개 (2인):** 가로로 나란히 배치. 각 인물마다 좌측엔 **정사각형 회색 박스 (프로필 사진 영역)**, 우측엔 텍스트를 배치합니다.
* **인물 1:**
* **H3 (소제목):** 이지훈 대표 세무사
* **Caption (캡션):** "꾸준함으로 증명하는 전문가"
* **인물 2:**
* **H3 (소제목):** OOO 파트너 세무사
* **Caption (캡션):** "고객 중심의 솔루션을 연구하는 전문가"
**[Section 3: Services]**
* **배경:** 흰색 (`#ffffff`)
* **내용:**
* **H2 (섹션 제목):** "대표님의 상황에 맞는 최적의 솔루션"
* **서비스 목록:** 6개의 서비스를 3개씩 2줄의 그리드(Grid) 형태로 배치. 각 서비스는 아이콘, 제목, 짧은 설명으로 구성된 카드 형태입니다.
* **아이콘 영역:** 48x48px 크기의 **회색 원형 박스**
* **H3 (소제목):** 서비스명 (예: 법인 컨설팅, 세무 기장 등)
* **Caption (캡션):** 서비스 한 줄 요약 (예: 설립, 운영, 절세 전략 컨설팅)
**[Section 4: Expertise]**
* **배경:** 밝은 회색 (`#f8f9fa`)
* **내용:**
* **H2 (섹션 제목):** "전문성의 깊이: 끊임없이 연구합니다"
* **전문가 칼럼 (Blog):** 3개의 블로그 포스트를 카드 형태로 가로로 나란히 배치. 각 카드는 상단의 **직사각형 회색 박스 (썸네일 이미지 영역)**와 하단의 텍스트로 구성.
* **H3 (소제목):** "양도세, 모르면 손해 보는 O가지"
* **Body (본문):** "블로그 포스트의 첫 두 문장을 요약하여 보여줍니다..."
* **자주 묻는 질문 (FAQ):**
* **H3 (소제목):** "자주 묻는 질문"
* 질문 목록을 3~4개 생성. 각 질문을 클릭하면 아래에 숨겨져 있던 답변(Body 텍스트)이 펼쳐지는 아코디언(Accordion) 형태로 구현해 주세요.
**[Section 5: Contact]**
* **배경:** 어두운 배경 (Primary 컬러)
* **글자색:** 전체적으로 밝은 텍스트 (`#ffffff`) 사용
* **내용:**
* **H2 (섹션 제목):** "이제, 혼자 고민하지 마세요"
* **Body (본문):** "저희의 가치에 공감하셨다면, 먼저 상담을 통해 직접 확인해 보시는 것을 추천합니다. 모든 상담은 대표님의 편안한 시작을 위해 무료로 진행됩니다."
* **문의 정보:**
* **연락처:** ☎️ 010-0000-0000 (8월 초 개통 예정)
* **주소:** 🏢 부산 강서구 명지 플러스시네마 309호
* **카카오톡 버튼:** Accent 컬러 배경의 버튼. 텍스트는 "[카카오톡 채널로 1:1 무료 상담]"
**# 기술적 요구사항**
* **반응형 디자인:** 데스크톱과 모바일 화면 모두에서 레이아웃이 자연스럽게 보이도록 제작해야 합니다.
* **인터랙션:** Hero 섹션의 CTA 버튼 클릭 시 Contact 섹션으로의 '부드러운 스크롤(Smooth Scroll)' 기능과, FAQ 섹션의 '아코디언(Accordion)' 기능은 반드시 JavaScript로 구현해 주세요.
padotax-hompage-prototype.html
E.o.D