전화번호부 검색 앱
부서별 직원 연락처를 빠르게 검색하는 앱
🎯 학습 목표
- ✓AI를 활용한 실무 데이터 가공 방법 습득
- ✓JSON 데이터 구조 이해 및 활용
- ✓검색 기능 (필터링) 구현하기
- ✓실무에 바로 활용 가능한 앱 제작
🔧 사용 기술 & 핵심 개념
AI 활용 데이터 가공
ChatGPT/Claude로
비정형 데이터를 JSON으로 변환
JSON 파일
구조화된 데이터를
파일로 저장하고 불러오기
필터 (Filter)
조건에 맞는 데이터만
골라내는 기능
동적 UI
검색 결과에 따라
화면이 바뀌는 인터페이스
💻 실습: 단계별 진행
STEP 1홈페이지 데이터 수집 및 JSON 변환 (10분)
📋 실무 워크플로우
- 삼육대학교 홈페이지에서 전화번호 안내 페이지를 찾습니다
- 필요한 연락처 정보를 복사합니다 (드래그 & Ctrl+C)
- ChatGPT, Claude 또는 Cursor AI에게 데이터를 전달합니다
- AI에게 JSON 형식으로 변환을 요청합니다
- 생성된 JSON 파일을 프로젝트에 저장합니다
🤖 AI에게 전달할 프롬프트
다음 전화번호 데이터를 JSON 형식으로 변환해주세요. 각 항목은 name(이름), department(부서), position(직급), phone(전화번호), email(이메일) 필드를 포함해야 합니다. [여기에 복사한 연락처 데이터를 붙여넣기] 형식 예시: [ { "name": "홍길동", "department": "기획처", "position": "과장", "phone": "02-3399-3001", "email": "hong@syu.ac.kr" } ]
💾 JSON 파일 저장
AI가 생성한 JSON을 `contacts.json` 파일로 저장합니다.
[
{
"name": "김철수",
"department": "기획처",
"position": "과장",
"phone": "02-3399-3001",
"email": "kim@syu.ac.kr"
},
// ... 더 많은 직원 데이터
]STEP 2JSON 파일 불러와서 표시하기 (10분)
🤖 Cursor에게 요청하기
전화번호부 앱을 만들고 싶어요. contacts.json 파일에서 연락처 데이터를 불러와서 카드 형태로 화면에 표시해주세요. 각 카드에는 이름, 부서, 직급, 전화번호, 이메일이 보이도록 하고, 전화 아이콘과 이메일 아이콘도 추가해주세요. 카드는 그리드 레이아웃으로 3개씩 나란히 배치해주세요.
💡 핵심 개념
JSON 파일에서 데이터를 불러오면 데이터와 코드가 분리됩니다. 이후 데이터만 업데이트하면 코드 수정 없이 내용을 변경할 수 있습니다.
STEP 3검색 기능 추가하기 (10분)
🤖 세 번째 프롬프트
검색창을 추가해주세요. 사용자가 검색창에 입력하면 실시간으로 이름이나 부서에 검색어가 포함된 연락처만 보여주세요. 대소문자 구분 없이 검색되도록 해주세요. 검색 결과가 없으면 "검색 결과가 없습니다" 메시지를 표시해주세요.
🔍 검색 원리
1. 입력 감지: 검색창에 타이핑할 때마다
2. 필터링: JSON 데이터에서 조건에 맞는 항목만 선택
3. 재렌더링: 필터링된 결과로 화면 업데이트
STEP 4클릭 액션 추가하기 (5분)
🤖 네 번째 프롬프트
전화 아이콘을 클릭하면 tel: 링크로 전화를 걸 수 있게 하고, 이메일 아이콘을 클릭하면 mailto: 링크로 이메일 앱이 열리도록 해주세요.
STEP 5디자인 개선하기 (5분)
🤖 다섯 번째 프롬프트
앱을 더 예쁘게 만들어주세요. 부서별로 다른 색상의 배지를 추가해주세요 (기획처는 파란색, 총무처는 초록색 등). 카드에 마우스를 올리면 살짝 떠오르는 효과를 주세요. 검색창에 돋보기 아이콘도 추가해주세요.
✅ 완성 체크리스트
💎 이 실습에서 배운 것
1. AI를 활용한 데이터 가공
비정형 데이터를 AI로 구조화된 JSON으로 변환하는 실무 기술
2. 데이터와 코드 분리
JSON 파일 활용으로 유지보수가 쉬운 구조 설계
3. 실시간 검색 기능
필터링을 통한 동적인 사용자 경험 구현
4. 실무 즉시 활용
실제 홈페이지 데이터로 부서에서 바로 사용 가능
💼 실무 활용 시나리오
- 📞
부서별 긴급 연락망
위기 상황 시 빠른 연락을 위한 전화번호부
- 🏢
신입 직원 오리엔테이션
새로운 직원이 담당자를 빠르게 찾을 수 있도록
- 👥
프로젝트 팀 연락처
협업이 필요할 때 즉시 연락
🚀 다음 세션 예고
🌐 웹서비스 구조 이해
오전에는 혼자 쓰는 앱을 만들었습니다. 오후에는 여러 사람이 함께 사용하는 시스템으로 발전시킵니다!
- ✓ 클라이언트-서버 아키텍처 이해
- ✓ 데이터베이스의 역할
- ✓ 보안과 개인정보 보호의 중요성
👨🏫 강사 노트
⏰ 시간 배분: JSON 변환 10분, 표시 10분, 검색 10분, 디자인 10분
🎯 핵심 메시지: "AI로 실제 데이터를 가공하면 실무에서 바로 쓸 수 있어요!"
💬 참여 유도: "본인 부서 연락처를 JSON에 추가해보세요" 실습
🔄 에러 대응: JSON 파일 경로가 정확한지 먼저 확인
💡 강조 포인트: ChatGPT/Claude로 데이터 변환하는 실무 워크플로우 체험
🏠 과제 안내: 다른 홈페이지 데이터로 나만의 검색 앱 만들어보기