목차(클릭하세요)
로컬스토리지 저장방식이 아닌 서버에 데이터를 저장하는 방식 활용
[결과물]
0. 참고: 이 내용은 ‘커서 AI 트렌드&활용백과’를 참고함
1. 맞춤형 설문조사 폼&분석
•
Todo list를 로컬 스토리지에 저장하는 방식으로 구현했으니, 이제 서버에 데이터를 저장하고 활용하는 예시를 진행
1-1. 데이터를 서버에 저장하는 방식 중 SQL와 관련성이 없는 세션관리 방식 사용
•
아래 분류는 데이터베이스를 활용하는 방식과 파일 형태로 저장하는 세션방식으로 다시 구분지을 수 있음
구분 | RDBMS | NoSQL | 세션 관리 |
비유 | 체계적으로 분류된 대형 창고 (명확한 구획과 규칙) | 유연한 컨테이너 저장소 (다양한 형태 수용) | 임시 보관함 (단기간 사용 후 정리) |
예시 | MySQL, PostgreSQL | MongoDB, Firebase | PHP Session |
구조 | 테이블-행-열 (고정) | 문서/키-값 (유연) | 키-값 (단순) |
언어 | SQL | 각 DB별 API | 언어별 세션 API |
확장성 | 수직 확장 | 수평 확장 우수 | 제한적 |
지속성 | 영구 저장 | 영구 저장 | 임시 저장 |
용도 | 구조화된 업무 데이터 | 대용량 웹서비스 | 로그인 상태 관리 |
여기서는 생성형 AI로 대략적인 설문을 만들고, 그 결과를 Json형태의 파일로 만들어 서버에 저장한뒤, 그 결과를 분석하는 기능까지 구현하기로 함. 1-2.설문조사 데이터를 Json으로 저장하는 이유?
•
Json: 전화번호 같은 텍스트 기반의 데이터를 쉽게 교환하고 저장하기 위한 형식
•
특징: Json파일은 구조화 되어 있으면, 계층형으로 되어 있음
◦
개발자들이 보다 데이터를 쉽게 이해하고, 활용하도록 만듦
일반 텍스트 기반의 데이터가 서술형 답안지라면, JSON은 디지털 OMR 카드에 가까움 JSON은 설문조사의 **"예측 불가능한 구조"**와 **"웹 기반 처리 필요성"**을 동시에 만족하는 최적의 선택1-3. Json의 장점들
1. 유연한 구조•
설문조사는 구조가 불규칙하고, 문항마다 답변 형태가 다를 수 있음
•
따라서 보다 유연한 구조가 필요함
{
"user_id": 123,
"survey_id": "customer_satisfaction_2024",
"responses": {
"q1": "매우 만족",
"q2": ["배송", "품질", "가격"], // 다중선택
"q3": { // 중첩 구조
"rating": 5,
"comment": "정말 좋았어요"
}
}
}
JSON
복사
2. 웹 개발과의 완벽한 호환
•
JavaScript에서 바로 사용 가능
•
별도 변환 과정 불필요
•
프론트엔드 백엔드 매끄러운 데이터 전송
백엔드 매끄러운 데이터 전송 3. 처리 속도
•
텍스트 기반으로 파싱 빠름
•
메모리 효율적
•
네트워크 전송 부담 적음
4. 확장성
•
새로운 질문 유형 쉽게 추가
•
기존 데이터 구조 깨지지 않음
•
버전 관리 용이
2. 워크플로우 분석
설문조사 폼만들기 설문조사 데이터 생성 및 저장: 사용자가 설문에 응답할 경우 JSOn형식의 데이터를 생성 서버에서 설문조사 데이터 불러오기: PHP를 활용 관리자 페이지로 관리: 관리자페이지에서 설문결과 확인 설문조사 통계: 설문결과 분석 및 시각화2-1. index.php + survey.json 만들기
•
설문문항부터 설계하기
인공지능 기초 수업을 설계하는 사람이야. 학생들이 인공지능에 대해 어디까지 알고 있고, 어떤 서비스를 사용했는지 등에 대한 내용을 담은 설문문항을 만들려고해. 먼저 Json파일로 설문지를 만들어줘
문항을 10문항으로 줄이고, 양자택일, 사지선다, 오지선다, 주관식 등으로 답변 형태를 보다 다양하게
위 프롬프트로 진행하면, survey.json이 먼저 만들어짐 문항을 모두 수정했다면, 아래 프롬프트를 참고하여 index.php파일을 완성하기index.php에서 survey.json파일을 불러오고, 화면에 설문조사로 뿌려주도록 수정해봐
화면을 확인해보고, 모바일에서 접속시에도 디스플레이 크기에 따라 화면이 이상해지지 않도록 ‘ 반응형 디자인’도 적용시키기 tailwind CSS를 이용해 MN감성의 느낌이 나도록 트렌디하게 디자인 변경하기
[디자인 변경전]
[디자인 변경후]
2-2. 설문조사 데이터 생성 및 저장
•
설문 응답자가 설문 조사 제출 또는 응답 버튼을 눌렀을때 설문이 제출되어 저장되어야 함
•
보통 response 또는 result폴더에 저장이 될 수 있도록 셋팅
•
응답시 아래 그림처럼 response폴더에 ‘응답시간이 기록된 Json’파일로 저장됨
•
만약 이 기능이 없다면 AI를 활용해 구현
설문응답자가 설문조사를 체크하고, 입력한뒤, 제출버튼을 누르면, 사용자들이 작성한 데이터가 Json 파일로 Reponse폴더에 저장될 수 있도록 코드 수정해. Reponse폴더가 없다면 새로 만들어야 해
•
이 기능을 구현후 반드시 Test를 진행
•
이 때 한 사람이 응답결과를 “짜_시간_고유 ID.json”형식으로 하는것이 보다 스마트한 선택
사용자가 설문에 응답할 때 한 사람이 응답결과를 “날짜_시간_고유 ID.json”형식으로 해줄수 있니? 고유ID는 특정 컴퓨터에서 특정사용자가 여러번 응답하는 것을 방지하기 위함이야
•
중복 응답 방지 테스트 결과
•
참고로 여기서는 중복 응답 방지시스템 구축을 위한 방식으로 다음을 채택
◦
중복 응답 방지 시스템
고유 ID 생성:•
브라우저 지문(Fingerprint) 기반으로 생성
•
User Agent, Accept Language, Accept Encoding, IP 주소 조합
•
MD5 해시의 앞 8자리 사용 (예: a1b2c3d4)
2-3. 관리자 로그인 페이지 만들기
•
설문조사 통계를 확인하기 위한 관리자 로그인 페이지 구축하기
•
관리자 로그인을 위해 일반적으로 ID와 비번방식을 활용
◦
보통 admin_login.php와 같은 형태로 존재
설문조사 통계를 확인하기 위한 관리자 로그인 페이지를 별도로 만들꺼야. 파일명은 admin_login.php로 해주고, index.php의 좌측 하단에 작은 글씨로 링크를 걸어줘 관리자 페이지 접속을 위한 ID는 adminsj, 비번은 2025로 설정해봐(임시 설정 값)
2-4. 설문조사 자동 통계
•
설문결과를 보다 빠르게 통계적으로 파악할 수 있도록, 대시보드 형태로 만드는 것이 바람직
•
특별히 요청하지 않아도 대시보드 형태로 제공될 가능성이 높음
•
수정할 부분은 다음 2가지가 될 가능성이 큼
2가지 기능을 추가하자.
1.
2지 선다, 4지 선다 같은 경우는 차팅 라이브러리를 이용해 깔끔하게 시각화하자.
2.
사용자의 주관식 응답도 모두다 모아서 보여줘
•
만들어진 결과물
◦
절대 한번에 원하는 결과물이 나온것은 아님◦
여러번의 수정을 거쳤으며, 특히, 대시보드페이지에서 많은 시간이 소요되었음
•
2-5. 결론
•
뭔가 알고있어야 질문을 통해 기능을 업그레이드 할 수 있음
3. 배포하기(깃허브x)
3-1. heroku가 문을 닫았다>.<
따라서 Awardspace를 활용하기•
PHP 및 MySQL을 사용한 무료 호스팅 서비스
3-2.Awardspace 가입 후 도메인 셋팅
•
깃허브 계정 연동이 없으니 구글 계정으로 로그인
•
왼쪽 메뉴에서 "도메인 관리자" 클릭
•
무료 하위 계정을 선택(create a Free Subdomain)선택
◦
나머지는 유료 옵션
•
만들고 싶은 서브 도메인 이름을 설정
•
서브도메인 설정을 PHP로 변경
•
이제 클라우드상의 폴더를 선택하여 셋팅
•
무료 SubDomain주소가 맞는지 확인 후 파일 업로드 진행
•
아래 예시는 설정한 yourname.http://atwebpages.com가 무료 서브도메인
3-3.파일 전체 업로드
파일 업로드 방법
1. Upload 버튼 클릭
•
상단 메뉴에서 "Upload" 버튼을 클릭
•
해당파일을 모두 업로드
2. Upload 후 할일
responses 폴더 생성•
"Create" 버튼 클릭 → "Folder" 선택
•
폴더명: responses 입력
폴더 권한 설정•
responses 폴더 우클릭
•
"Change Permissions" 선택
•
권한을 755 또는 777로 설정
3-4.설문 응답 테스트
[설문 응답후]
이렇게 Json형태로 저장되는 것을 확인할 수 있음
[설문 응답이 저장되는 폴더]
3-5.설문 응답 테스트 후 관리자 페이지까지
웹페이지 구상하고 만드는건 30분, 배포설정에 1시간.ㅠㅠ