연락처(성도관리) 미니앱
교인 연락처 파일 불러와 태그별 정리
🎯 학습 목표
- ✓파일 업로드 기능 구현하기 (CSV/Excel 파일 읽기)
- ✓localStorage를 활용한 브라우저 데이터 저장
- ✓검색 및 필터링 기능 구현
- ✓테이블 형태로 데이터 시각화하기
🔧 사용 기술
File API
사용자 컴퓨터에서 파일 읽어오기
<input type="file" accept=".csv">
CSV Parser
CSV 데이터를 JavaScript 배열로 변환
localStorage
브라우저에 데이터 영구 저장 (새로고침해도 유지)
Array Filter/Sort
데이터 검색, 정렬, 필터링
💾 localStorage란?
브라우저의 작은 저장소
✅ 장점
- • 서버 없이도 데이터 저장 가능
- • 브라우저를 닫아도 데이터 유지
- • 빠른 읽기/쓰기
- • 무료!
⚠️ 한계
- • 약 5-10MB까지만 저장 가능
- • 다른 컴퓨터/브라우저와 공유 불가
- • 보안이 중요한 정보는 부적합
💡 실생활 비유
localStorage는 스마트폰의 메모장과 같습니다. 앱을 종료해도 메모는 남아있지만, 다른 사람 폰에서는 볼 수 없습니다.
💻 실습: 단계별 진행
STEP 1기본 HTML 구조 만들기 (5분)
🤖 첫 번째 프롬프트
성도 연락처 관리 앱을 만들어주세요. 상단에 제목 "📱 성도 연락처 관리"를 표시하고, CSV 파일을 업로드할 수 있는 파일 선택 버튼을 만들어주세요. 검색창을 만들어주세요. 태그 필터 버튼들 (전체/청년부/장년부/어린이부)을 만들어주세요. 연락처 목록을 표시할 테이블을 만들어주세요. 테이블 열: 이름, 전화번호, 소속, 직분, 비고
📋 예시 CSV 데이터 준비
실습용 CSV 파일 샘플:
이름,전화번호,소속,직분,비고 김목사,010-1234-5678,장년부,담임목사, 이집사,010-2345-6789,청년부,총무, 박권사,010-3456-7890,장년부,찬양팀장, 최선생,010-4567-8901,어린이부,교사, 정집사,010-5678-9012,청년부,회계,새가족
💡 엑셀에서 "다른 이름으로 저장" → CSV (쉼표로 분리) 선택
STEP 2CSV 파일 읽기 기능 (8분)
🤖 두 번째 프롬프트
사용자가 CSV 파일을 선택하면: 1. FileReader API로 파일 내용을 읽어주세요 2. CSV 데이터를 파싱해서 JavaScript 배열로 변환해주세요 3. 첫 줄은 헤더로, 나머지는 데이터로 처리해주세요 4. 파싱한 데이터를 localStorage에 'contacts' 키로 저장해주세요 5. 테이블에 데이터를 표시해주세요 6. 로딩 중일 때 "불러오는 중..." 메시지를 표시해주세요
🔍 CSV 파싱 원리
1단계: 파일 전체를 텍스트로 읽기
2단계: 줄바꿈(\n)으로 분리 → 각 줄이 하나의 행
3단계: 각 줄을 쉼표(,)로 분리 → 열 데이터
4단계: 배열의 배열 구조로 저장
[ ["김목사", "010-1234-5678", "장년부", "담임목사", ""], ["이집사", "010-2345-6789", "청년부", "총무", ""] ]
⚠️ 한글 인코딩 문제
CSV 파일이 깨져 보인다면?
- 엑셀에서 저장할 때 "UTF-8 CSV" 형식 선택
- 또는 FileReader에서
encoding: 'EUC-KR'옵션 추가 - Cursor에게 "한글이 깨져요" 라고 말하면 해결해줌!
STEP 3검색 및 필터링 기능 (8분)
🤖 세 번째 프롬프트
검색창에 텍스트를 입력하면: 1. 실시간으로 이름, 전화번호, 직분에서 일치하는 항목을 찾아주세요 2. 대소문자 구분 없이 검색해주세요 3. 부분 일치도 가능하게 해주세요 (예: "김" 입력 시 "김목사", "김집사" 모두 표시)
태그 버튼을 클릭하면: 1. 해당 소속(청년부/장년부/어린이부)만 표시해주세요 2. "전체" 버튼은 모든 연락처를 보여주세요 3. 현재 선택된 태그는 파란색으로 강조해주세요 4. 검색과 필터는 동시에 적용되게 해주세요
🔍 검색 로직 예시
// JavaScript의 filter 메서드 활용
const filteredContacts = contacts.filter(contact => {
const matchesSearch =
contact.name.includes(searchText) ||
contact.phone.includes(searchText) ||
contact.role.includes(searchText);
const matchesTag =
selectedTag === '전체' ||
contact.group === selectedTag;
return matchesSearch && matchesTag;
});💡 UX 개선 팁
- • 검색 결과 개수 표시: "전체 50명 중 3명"
- • 검색어 하이라이트: 일치하는 부분을 노란색으로
- • 빈 결과 메시지: "검색 결과가 없습니다"
- • 검색창 X 버튼: 클릭하면 검색어 초기화
STEP 4추가 기능 구현 (9분)
🤖 네 번째 프롬프트
다음 기능들을 추가해주세요:
1. 전화 걸기 링크: 전화번호를 클릭하면 전화 앱이 실행되도록 (tel: 링크)
2. 정렬 기능: 테이블 헤더 클릭 시 해당 열로 정렬 (오름차순/내림차순 토글)
3. CSV 내보내기: 현재 필터링된 결과를 CSV 파일로 다운로드하는 버튼
4. 데이터 초기화: localStorage의 데이터를 삭제하는 버튼 (확인 메시지 포함)
5. 페이지 로드 시: localStorage에 저장된 데이터가 있으면 자동으로 표시
📱 전화 걸기 링크
<a href="tel:010-1234-5678">010-1234-5678</a>
모바일에서 클릭하면 바로 전화 앱 실행!
💾 localStorage 기본 사용법
// 저장
localStorage.setItem('contacts', JSON.stringify(data));
// 불러오기
const data = JSON.parse(localStorage.getItem('contacts'));
// 삭제
localStorage.removeItem('contacts');🚀 확장 아이디어 (도전!)
✏️ 직접 수정 기능
테이블 셀을 더블클릭하면 수정 가능하게
➕ 새 연락처 추가
폼으로 직접 입력하여 추가
🏷️ 태그 관리
각 연락처에 여러 태그 추가 가능
📧 이메일 보내기
선택한 연락처에게 단체 메일
📊 통계
소속별/직분별 인원 차트
🎂 생일 알림
오늘 생일인 성도 표시
💼 실전 활용 팁
📋 교회 명단 관리
- • 매주 출석부를 CSV로 저장하여 업로드
- • 새가족 태그로 필터링하여 심방 계획
- • 생일자 명단 추출하여 축하 문자
🎓 학생 관리 (안식일학교)
- • 반별로 필터링하여 학생 연락처 확인
- • 결석자 리스트 추출하여 연락
- • 학부모 연락처 빠른 검색
🎪 행사 참가자 관리
- • 수련회 참가 신청자 명단 관리
- • 조별 편성 후 조장 연락처 확인
- • 참가비 납부 여부 체크 컬럼 추가
✅ 완성 체크리스트
🌅 오전 세션 총정리
축하합니다! 오전 실습을 모두 완료했습니다!
✨ 오전에 만든 것들
- ⌨️ 성경 타자연습기: HTML + JavaScript 기초
- 📖 성경 퀴즈 앱: JSON 데이터 활용
- 📱 연락처 관리 앱: 파일 업로드 + localStorage
🎓 배운 개념들
- • HTML/CSS/JavaScript 기본 구조
- • JSON 데이터 형식
- • File API와 CSV 파싱
- • localStorage 브라우저 저장소
- • 검색, 필터링, 정렬 알고리즘
💪 핵심 성취
서버 없이도 실제로 사용 가능한 앱 3개를 만들었습니다!
이 앱들은 USB에 담아 어디서든 실행할 수 있고,
교회 홈페이지나 교회 컴퓨터에서 바로 사용할 수 있습니다.
🍽️ 점심 시간 & 오후 세션 준비
오후에는 더 큰 도전이 기다립니다!
오전에는 "혼자 쓰는 앱"을 만들었다면,
오후에는 "함께 쓰는 플랫폼"으로 확장합니다!
🌐 오후 핵심 키워드:
- • 서버: 여러 사람이 동시에 접속
- • 데이터베이스: 영구적인 데이터 저장
- • 실시간 통신: Socket.IO로 멀티플레이어
- • API 연동: 문자 발송 시스템
👨🏫 강사 노트
⏰ 시간 관리: localStorage 개념 설명(3분), 실습(22분), 확장 아이디어(5분)
📄 샘플 파일: 미리 준비한 성도명단.csv 파일을 공유하여 실습 진행
💾 localStorage 실습: 개발자 도구(F12) → Application 탭에서 실제 저장된 데이터 확인
🎯 핵심 메시지: "오전에 만든 3개 앱, USB에 담아 집에 가져가세요. 바로 사용 가능합니다!"
📸 성취감: "여러분은 이제 앱 개발자입니다!" 분위기 조성
🍽️ 점심 안내: 12:10-13:00 (50분) / 오후는 더 흥미진진한 실습!