회사 소개 페이지

Cursor AI를 활용해 전문적인 회사 소개 페이지를 단계별로 만들어봅시다.

프로젝트 개요

완성 모습

맑은소프트
혁신적인 소프트웨어 솔루션

[회사소개] [서비스] [팀] [연락처]

┌─────────────────────┐
│   Hero Section      │
│   큰 제목 + CTA     │
└─────────────────────┘

┌──────┐ ┌──────┐ ┌──────┐
│ 웹개발│ │ 앱개발│ │클라우드│
└──────┘ └──────┘ └──────┘

1단계: 프로젝트 시작

Cursor에서 새 폴더 생성

File > Open Folder → 새 폴더 “company-website” 생성

Cursor AI에게 첫 요청:

회사 소개 웹사이트의 기본 구조 만들어줘.

회사명: 맑은소프트
업종: 소프트웨어 개발

필요한 파일:
- index.html
- style.css
- script.js

2단계: 메인 페이지 구조

Cursor에게 요청:

index.html 만들어줘.

섹션 구성:
1. 네비게이션 바
   - 로고
   - 메뉴 (회사소개, 서비스, 팀, 연락처)
   - 모바일 햄버거 메뉴

2. Hero 섹션
   - 큰 제목: "혁신적인 소프트웨어 솔루션"
   - 부제: "맑은소프트와 함께 성장하세요"
   - CTA 버튼 2개 (서비스 보기, 상담 문의)
   - 배경 이미지 또는 그라데이션

3. 회사 소개 섹션
   - 제목
   - 설명 (3-4줄)
   - 특징 3가지 (아이콘 + 제목 + 설명)

4. 서비스 섹션
   - 제목
   - 카드 3개 (웹 개발, 앱 개발, 클라우드 솔루션)
   - 각 카드: 아이콘, 제목, 설명, "더 보기" 링크

5. 숫자로 보는 회사
   - 설립년도
   - 프로젝트 수
   - 고객사 수
   - 팀원 수

6. 팀 소개
   - 제목
   - 팀원 카드 4개 (사진, 이름, 직책, 소개)

7. 연락처 섹션
   - 주소
   - 전화번호
   - 이메일
   - 간단한 문의 폼 (이름, 이메일, 메시지)

8. 푸터
   - 회사 정보
   - 소셜 미디어 링크
   - 저작권

3단계: CSS 스타일링

Cursor에게 요청:

style.css 만들어줘.

디자인 요구사항:
- 전문적이고 현대적인 느낌
- 메인 색상: 파란색 계열 (#3498db)
- 보조 색상: 회색, 흰색
- 폰트: 깔끔한 sans-serif
- 부드러운 애니메이션

각 섹션:
1. 네비게이션: 스크롤 시 배경색 추가, 그림자
2. Hero: 전체 화면 높이, 중앙 정렬
3. 서비스 카드: 호버 시 올라오는 효과, 그림자
4. 팀 카드: 원형 사진, 호버 시 정보 표시
5. 버튼: 둥근 모서리, 호버 효과
6. 반응형: 모바일, 태블릿, 데스크톱

애니메이션:
- 페이지 진입 시 페이드인
- 스크롤 시 요소 나타나기
- 부드러운 전환

4단계: JavaScript 인터랙션

Cursor에게 요청:

script.js 만들어줘.

기능:
1. 스크롤 시 네비게이션 배경색 변경
2. 스무스 스크롤 (메뉴 클릭 시 해당 섹션으로)
3. 모바일 햄버거 메뉴 토글
4. 숫자 카운터 애니메이션 (스크롤 시 0부터 숫자까지)
5. 스크롤 시 요소 페이드인 (Intersection Observer 사용)
6. 문의 폼 검증 및 제출 (alert로 확인)

코드 구조:
- 함수 분리
- 주석 추가
- 이벤트 리스너 사용

5단계: 아이콘 추가

Cursor에게 요청:

Font Awesome 아이콘 추가해줘.

필요한 아이콘:
- 서비스 카드: 코드, 모바일, 클라우드
- 특징: 체크, 별, 방패
- 연락처: 위치, 전화, 이메일
- 소셜: 깃허브, 링크드인, 트위터

index.html head에 CDN 링크 추가하고,
각 섹션에 적절한 아이콘 넣어줘.

6단계: 반응형 개선

Cursor에게 요청:

반응형 디자인 개선해줘.

모바일 (< 768px):
- 네비게이션: 햄버거 메뉴
- Hero: 폰트 크기 줄이기
- 서비스/팀 카드: 1열
- 패딩/마진 조정

태블릿 (768px - 1024px):
- 서비스/팀 카드: 2열
- 폰트 크기 중간
- 간격 조정

데스크톱 (> 1024px):
- 서비스/팀 카드: 3-4열
- 최대 너비 제한
- 넓은 간격

7단계: 애니메이션 추가

Cursor에게 요청:

페이지에 애니메이션 추가해줘.

1. Hero 섹션: 타이핑 효과 또는 페이드인
2. 서비스 카드: 순차적으로 나타나기
3. 숫자: 카운트업 애니메이션
4. 팀 카드: 호버 시 뒤집기 효과
5. 버튼: 호버 시 펄스 효과

CSS 또는 JavaScript로 구현.
부드럽고 자연스럽게.

8단계: 문의 폼 개선

Cursor에게 요청:

연락처 섹션의 문의 폼 개선해줘.

기능:
- 실시간 입력 검증
- 이메일 형식 확인
- 필수 항목 표시
- 제출 버튼 비활성화/활성화
- 제출 후 성공 메시지
- 폼 초기화

스타일:
- 현대적인 input 디자인
- 에러 메시지 빨간색
- 성공 메시지 초록색
- 로딩 상태 표시

9단계: 성능 최적화

Cursor에게 요청:

웹사이트 성능 최적화해줘.

1. 이미지 최적화
   - WebP 포맷 사용
   - Lazy loading 추가
   - 적절한 크기

2. CSS 최적화
   - 사용하지 않는 스타일 제거
   - 중복 제거
   - 압축

3. JavaScript 최적화
   - 디바운스 추가 (스크롤 이벤트)
   - 코드 최소화

4. 로딩 속도
   - Preload 중요 리소스
   - Defer JavaScript

10단계: 접근성 개선

Cursor에게 요청:

접근성 개선해줘.

요구사항:
- 시맨틱 HTML 태그 사용
- Alt 텍스트 추가
- ARIA 라벨 추가
- 키보드 네비게이션 지원
- 충분한 색상 대비
- 포커스 표시

완성 확인

테스트 항목

모든 섹션이 표시되는가?
네비게이션이 작동하는가?
스무스 스크롤이 작동하는가?
애니메이션이 자연스러운가?
문의 폼이 작동하는가?
모바일에서 잘 보이는가?
햄버거 메뉴가 작동하는가?

GitHub & Cloudflare Pages 배포

1. Git 초기화

git init
git add .
git commit -m "회사 소개 페이지 초기 버전"

2. GitHub 저장소 생성 및 푸시

git branch -M main
git remote add origin https://github.com/사용자명/company-website.git
git push -u origin main

3. Cloudflare Pages 연결

대시보드 → Connect to Git
저장소 선택 → Save and Deploy
배포 완료 후 URL 확인

추가 개선 사항

Cursor에게 추가로 요청할 수 있는 것들:

블로그 섹션 추가

최근 블로그 글 3개를 보여주는 섹션 추가해줘.
posts.json 파일에서 데이터 가져오기.

고객 후기 섹션

고객 후기를 슬라이더로 보여주는 섹션 추가해줘.
자동 재생, 화살표 네비게이션 포함.

FAQ 섹션

자주 묻는 질문 섹션 추가해줘.
아코디언 형태로 질문 클릭 시 답변 펼쳐지게.

다국어 지원

한국어/영어 전환 기능 추가해줘.
버튼 클릭 시 언어 변경, 로컬 스토리지에 저장.

챗봇 위젯

우측 하단에 간단한 챗봇 아이콘 추가해줘.
클릭 시 문의 폼 또는 FAQ로 이동.

문제 해결

애니메이션이 작동하지 않아요

Cursor에게:

Intersection Observer 코드 확인해줘.
콘솔 에러 확인하고 수정해줘.

모바일에서 레이아웃이 깨져요

Cursor에게:

모바일 CSS 미디어 쿼리 확인해줘.
viewport 메타 태그 확인하고,
모바일에서 깨지는 부분 수정해줘.

폼 제출이 안 돼요

Cursor에게:

폼 submit 이벤트 핸들러 확인해줘.
preventDefault 추가하고,
입력 검증 로직 확인해줘.

다음 단계

회사 소개 페이지를 완성했습니다. 이제 제품 카탈로그 페이지를 만들어봅시다!