🎨 회원가입 페이지

깔끔하고 모던한 디자인의 반응형 회원가입 페이지입니다. 실시간 유효성 검사와 풍부한 사용자 피드백을 제공합니다.

✨ 주요 기능

📝 입력 필드

사용자 이름 - 2자 이상 20자 이하, 중복 확인 기능
이메일 - 형식 검증, 중복 확인, 자동 사용 가능 여부 체크
전화번호 (선택) - 자동 하이픈 삽입 (010-1234-5678)
비밀번호 - 강도 표시기, 8자 이상 + 필수 조건 포함
비밀번호 확인 - 일치 여부 실시간 검증

🔐 보안 기능

비밀번호 강도 표시기
- 약함 (빨강): 3가지 이상 미충족
- 보통 (주황): 4가지 충족
- 강함 (초록): 5가지 모두 충족
비밀번호 요구사항
- ✓ 8자 이상
- ✓ 대문자 포함
- ✓ 소문자 포함
- ✓ 숫자 포함
- ✓ 특수문자 포함

👁️ 편의 기능

비밀번호 보기/숨기기 - 눈 아이콘으로 토글
실시간 유효성 검사 - 입력하며 즉시 피드백
컬러 피드백
- 유효: 초록색 테두리 + 초록 배경
- 유효하지 않음: 빨간색 테두리 + 빨간 배경

📊 진행 상황 추적

진행률 바 - 상단에 완료도 시각화
완료율 표시 - 퍼센트로 진행 상황 표시
5단계 완료 기준
1. 사용자 이름 확인
2. 이메일 확인
3. 비밀번호 설정
4. 비밀번호 일치
5. 약관 동의

✅ 약관 및 동의

필수: 이용약관 & 개인정보처리방침 동의
선택: 마케팅 정보 수신 동의
커스텀 체크박스 디자인

💾 데이터 저장

로컬 스토리지 사용 - 사용자 정보 로컬 저장
회원가입 정보
- 사용자 이름
- 이메일
- 전화번호
- 비밀번호
- 마케팅 동의 여부
- 가입 시간

🎨 디자인 특징

색상 팔레트

용도	색상	코드
주요 색상	인디고 블루	`#4f46e5`
성공	초록색	`#10b981`
에러	빨간색	`#ef4444`
경고	주황색	`#f59e0b`
배경	밝은 회색	`#f3f4f6`
테두리	라이트 그레이	`#e5e7eb`

폰트

주요 폰트: Inter (Google Fonts)
대체 폰트: -apple-system, BlinkMacSystemFont, 'Segoe UI'

레이아웃

최대 너비: 480px (데스크톱)
패딩: 40px (데스크톱), 28px (모바일)
모서리 반경: 8-12px (모던하고 부드러운 느낌)
그림자: 섬세한 밀도 그림자

📱 반응형 디자인

완벽한 반응형 지원으로 모든 기기에서 최적의 경험을 제공합니다.

📱 모바일 (< 480px)
- 패딩 28px 20px
- 버튼 전체 너비
- 단일 컬럼 레이아웃

📲 태블릿 (480px - 768px)
- 패딩 32px 24px
- 세로 방향 버튼
- 최적화된 크기

💻 데스크톱 (> 768px)
- 패딩 40px
- 가로 방향 버튼
- 최대 너비 480px

🚀 사용 방법

1. 파일 준비

# 프로젝트 폴더 생성
mkdir signup-page
cd signup-page

# 파일 배치
# - index.html
# - style.css
# - script.js

2. 브라우저에서 열기

# index.html을 브라우저에서 직접 열기
# 또는 로컬 서버 사용
python -m http.server 8000
# http://localhost:8000 접속

3. 회원가입 프로세스

1️⃣ 사용자 이름 입력

2자 이상 20자 이하 입력
중복 확인 버튼 클릭
✓ 사용 가능 메시지 확인

2️⃣ 이메일 입력

올바른 이메일 형식 입력
자동 유효성 검사
✓ 사용 가능한 이메일 메시지 확인

3️⃣ 전화번호 입력 (선택)

숫자만 입력하면 자동 하이픈 삽입
예: 01012345678 → 010-1234-5678

4️⃣ 비밀번호 설정

8자 이상 + 5가지 조건 충족
강도 바 확인
실시간 요구사항 체크

5️⃣ 비밀번호 확인

비밀번호 일치 확인
✓ 비밀번호가 일치합니다 메시지 확인

6️⃣ 약관 동의

이용약관 동의 체크 (필수)
마케팅 동의 체크 (선택)

7️⃣ 회원가입 완료

우측 하단 "회원가입 완료" 버튼 클릭
로컬 스토리지에 정보 저장
성공 모달 메시지 확인
폼 자동 초기화

🛠️ 기술 스택

Frontend

HTML5 - 시맨틱 마크업
CSS3 - 플렉스박스, CSS 변수, 미디어 쿼리
Vanilla JavaScript - 프레임워크 미사용 순수 JS

라이브러리

Google Fonts - Inter 폰트

브라우저 지원

Chrome/Edge 90+
Firefox 88+
Safari 14+
Mobile browsers (iOS Safari, Chrome Mobile)

📂 파일 구조

project/
├── index.html       # HTML 마크업
├── style.css        # 스타일 (786줄)
├── script.js        # 자바스크립트 로직 (490줄)
└── README.md        # 문서 (이 파일)

🔍 유효성 검사 규칙

사용자 이름

- 길이: 2자 이상 20자 이하
- 중복 확인 필수
- 정규식: 제한 없음 (모든 문자 허용)

이메일

- 형식: standard@domain.com
- 정규식: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
- 중복 확인: 자동 수행

전화번호 (선택)

- 형식: 010-1234-5678 또는 01012345678
- 정규식: /^01[0-9]-?[0-9]{3,4}-?[0-9]{4}$/
- 자동 하이픈 삽입

비밀번호

- 최소 길이: 8자
- 필수 조건 (모두 충족해야 함):
  1. 대문자 포함
  2. 소문자 포함
  3. 숫자 포함
  4. 특수문자 포함

📊 로컬 스토리지 데이터 구조

{
  "users": [
    {
      "username": "john_doe",
      "email": "john@example.com",
      "phone": "010-1234-5678",
      "password": "SecurePass123!",
      "marketingAgreed": true,
      "registeredAt": "2026-02-05T10:30:00.000Z"
    }
  ]
}

브라우저 콘솔에서 확인

// 저장된 모든 사용자 조회
JSON.parse(localStorage.getItem('users'))

// 마지막 가입자 확인
const users = JSON.parse(localStorage.getItem('users'));
console.log(users[users.length - 1]);

// 로컬 스토리지 초기화 (주의!)
localStorage.clear();

⚡ 성능 최적화

초경량: HTML, CSS, JS 합계 약 15KB
No Dependencies: 외부 라이브러리 미사용
Smooth Animations: 최적화된 transition (0.2s-0.4s)
Lazy Input Validation: 입력 시 실시간 검사

🎓 학습 포인트

이 프로젝트에서 배울 수 있는 기술:

✅ Form Validation - 실시간 입력 검증
✅ DOM Manipulation - JavaScript로 DOM 제어
✅ Local Storage - 클라이언트 데이터 저장/관리
✅ Responsive Design - 모바일 우선 설계
✅ CSS Variables - 변수를 이용한 색상 관리
✅ Event Handling - 이벤트 리스너 활용
✅ Regular Expressions - 정규식을 이용한 검증
✅ UX/UI Design - 사용자 피드백 디자인

📝 추가 개선 사항 (향후)

- [ ] 백엔드 연동 (DB 저장)
- [ ] 이메일 인증
- [ ] 비밀번호 해싱 (bcrypt)
- [ ] 회원 로그인 페이지
- [ ] 회원 정보 관리 페이지
- [ ] 다국어 지원 (i18n)
- [ ] 다크 모드 지원
- [ ] 소셜 로그인 연동
- [ ] 2단계 인증 (2FA)
- [ ] 접근성 개선 (WCAG 2.1 AA)

🐛 알려진 사항

현재 버전의 특징과 제한사항:

⚠️ 보안 주의

비밀번호가 평문으로 저장됩니다
프로덕션 사용 시 반드시 백엔드 구현 필요
실제 서비스에서는 HTTPS와 서버 검증 필수

ℹ️ 기타

로컬 스토리지는 브라우저별로 독립적
브라우저 캐시 삭제 시 데이터 소실
동일 도메인/포트에서만 데이터 공유

💡 사용 예시

유효한 입력 예시

사용자 이름:      john_doe
이메일:          john.doe@gmail.com
전화번호:        010-1234-5678
비밀번호:        SecurePass123!
비밀번호 확인:   SecurePass123!
약관 동의:       ✓

유효하지 않은 입력 예시

✗ 사용자 이름: 1글자 (최소 2자)
✗ 이메일: noemail (형식 오류)
✗ 전화번호: 123456 (형식 오류)
✗ 비밀번호: pass123 (소문자만, 대문자/특문 필요)
✗ 비밀번호 불일치 (확인 필드 다름)
✗ 약관 미동의

📞 개발자 팁

디버깅

// 콘솔에서 실시간으로 현재 유효성 검사 상태 확인
console.log(validationState);

// 모든 저장된 사용자 확인
console.log('💾 저장된 사용자:', JSON.parse(localStorage.getItem('users')) || []);

// 진행률 확인
console.log('진행률:', document.getElementById('progressBar').style.width);

커스터마이징

/* 색상 변경 */
:root {
    --primary-color: #your-color;
    --success-color: #your-color;
    --error-color: #your-color;
}

/* 폰트 변경 */
body {
    font-family: 'Your-Font', sans-serif;
}

/* 최대 너비 변경 */
.container {
    max-width: 600px; /* 기본값: 480px */
}

📄 라이선스

이 프로젝트는 자유롭게 사용, 수정, 배포할 수 있습니다.

🙌 기여

버그 리포트, 기능 제안, 개선 사항은 언제든 환영합니다!

Last Updated: 2026-02-05
Version: 1.0.0
Status: ✅ Production Ready (클라이언트 사이드만)

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
README.md		README.md
index.html		index.html
script.js		script.js
style.css		style.css

Folders and files

Latest commit

History

Repository files navigation

🎨 회원가입 페이지

✨ 주요 기능

📝 입력 필드

🔐 보안 기능

👁️ 편의 기능

📊 진행 상황 추적

✅ 약관 및 동의

💾 데이터 저장

🎨 디자인 특징

색상 팔레트

폰트

레이아웃

📱 반응형 디자인

🚀 사용 방법

1. 파일 준비

2. 브라우저에서 열기

3. 회원가입 프로세스

🛠️ 기술 스택

Frontend

라이브러리

브라우저 지원

📂 파일 구조

🔍 유효성 검사 규칙

사용자 이름

이메일

전화번호 (선택)

비밀번호

📊 로컬 스토리지 데이터 구조

브라우저 콘솔에서 확인

⚡ 성능 최적화

🎓 학습 포인트

📝 추가 개선 사항 (향후)

🐛 알려진 사항

💡 사용 예시

유효한 입력 예시

유효하지 않은 입력 예시

📞 개발자 팁

디버깅

커스터마이징

📄 라이선스

🙌 기여

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages