목차(클릭하세요)
동적기능을 포함한 웹페이지: 메일전송 기능, 설문조사 자동통계, 데이터 베이스 등
1. 온라인 명함 작성을 위한 기초Tip
1-1. 베이스가 될 디자인
•
내 온라인 명함의 기준이 될 디자인 모델이 있다면 더욱 쉽게 만들 수 있음•
특히 화면 캡쳐 기능을 이용한다면 더욱 스마트 하게1-2.index.php를 사용하기 위한 기초
index.html vs index.php 차이점
기본 개념
index.html
정적인(Static) 웹 페이지 서버가 해석 없이 파일 내용을 그대로 브라우저에 전송index.php
동적인(Dynamic) 웹 페이지 서버가 PHP 코드를 먼저 해석하고 결과를 브라우저에 전송 주요 비교
| 구분 | index.html | index.php |
파일 확장자 | .html | .php |
콘텐츠 방식 | 정적인 페이지 | 동적인 페이지 |
서버 처리 | 서버가 그대로 전송 | 서버가 PHP 코드 해석 후 결과만 전송 |
백엔드 연결 | 불가능 | 가능 (DB 연결, 사용자 입력 처리 등) |
필요한 환경 | 웹 서버 (Apache, Nginx 등) | PHP가 설치된 웹 서버 |
대표 사용 예시 | 회사소개 페이지, 포트폴리오 | 로그인, 게시판, 데이터 입력/출력 페이지 |
핵심 요약
변동 없는 페이지 → index.html 사용자 입력, 데이터 처리 필요 → index.php2. 온라인명함제작(기초단계)
2-0.전체 구성 흐름
[브라우저]
↓
[php -S localhost:8000 → index.php 실행]
↓
[1. 사용자 정보 배열 ($user)]
└→ 이름, 포지션, 이메일, 전화번호, 주소, 프로필 이미지
↓
[2. 디바이스 감지 (isMobile 함수)]
└→ 모바일 or 데스크탑 구분
↓
[3. Tailwind CSS + 아이콘/폰트 적용]
↓
[4. HTML 콘텐츠 생성]
├── 프로필 영역 (이미지 + 이름 + 포지션)
├── 네비게이션 (About Me, 약력, 프로젝트, 연락)
├── 연락처 정보
├── 소셜미디어 아이콘
├── 추천 영상 (2x2 유튜브 iframe)
└── 다크/라이트 모드 전환 버튼
↓
[5. 모달 창 (About, History, Projects, Contact)]
└→ JS로 열기/닫기
↓
[6. 연락하기 → send_mail.php로 POST 전송 (fetch API 사용)]
Scss
복사
2-1. 프롬프트
•
핵심은 이미지와 함께 프롬프트를 사용하는 멀티모달
tailwind(테일윈드)CSS프레임워크를 이용해서 내가 첨부한 이미지와 유사한 온라인 명함을 만들어봐. 기본적인 기능만 이용해서 php로 작성하고,
모바일과 데스크톱을 자동으로 인식해서 작동하는 반응형 디자인으로 제작해야 해
Markdown
복사
2-2.PHP설치하기
[참고]
로컬에 PHP 설치하기 (윈도우 기준)
1.
official_phpPHP: Hypertext Preprocessor→ 윈도우용 다운로드2.
압축 풀기 (예: C:\php)
3.
환경 변수 설정
•
시스템 변수 → Path에 C:\php 추가
4.
cmd에서 php -v 입력 → 버전 확인되면 성공
설치 방법 (Zip 파일 다운로드 후):
1.
압축 풀기 (예: C:\php)
2.
php.exe가 있는지 확인
3.
환경 변수 Path에 C:\php 추가
4.
cmd에서 php -v 입력 → 버전 나오면 성공
PHP 8.4.6 (cli) (built: Apr 9 2025 09:45:13) (NTS Visual C++ 2022 x64)
Copyright (c) The PHP Group
Zend Engine v4.4.6, Copyright (c) Zend Technologies
Markdown
복사
•
만약 아래와 같은 문구가 나왔다면, 이는 Microsoft Visual C++ Redistributable 라이브러리 버전과의 호환성 문제이므로 이를 해결해야 함.
PHP Warning:
'C:\WINDOWS\SYSTEM32\VCRUNTIME140.dll' 14.34 is not compatible with this
PHP build linked with 14.43 in Unknown on line 0
Markdown
복사
2-3.PHP 실행하기
[참고]
•
vscode 익스텐션을 설치하기: php, php debug, php server, php intelephense•
우측 상단에 생긴 PHP 서버를 누르거나 또는 CTRL + SHIFT + P를 누르고 PHP Server: Serve project를 찾아 실행하기
•
초기 실행결과를 살펴보면?
2-4.사진 업로드 및 비디오 추가
•
업로드하고 싶은 사진하나를 포스팅이미지와 같은 사이트를 사용해 업로드한 뒤, 해당 주소의 사진을 넣어달라고 요청하기
https://i.postimg.cc/OOOOOOOOOO
해당 이미지사진을 사용해서 이미지수정해봐
Markdown
복사
•
해당 php페이지에서 새로고침을 해야 변경된 것을 볼 수 있음
•
비디오 추가를 위해 다음 프롬프트를 사용
이제 명함 아래쪽에 비디오 섹션부분을 넣어줘. 그냥 정사각형으로 하나의 행에 2개의 유튜브 영상이 들어가도록 2*2그리드로 작성해서 반영해. 영상을 직접 포함하는 임베디드 방식으로 코드로 작성해야해
Markdown
복사
2-5.화면전환 및 메뉴 추가
•
화면 전환버튼을 누르면 화면 배경을 다크모드 라이트 모드로 변환할 수 있는 기능 추가하기•
이런 기능들은 서버가 아니라 클라이언트에서 처리하는 방식이므로, 자바스크립트로 구현되는 경우가 많음, 따라서 프롬프트를 아래와 같이
지금의 배경의 디자인이 다소 어둡구나. 다크모드와 라이트모드를 상호변환할 수 있는 전환버튼을 화면 우측 하단에 전구 아이콘으로 표시하고, JS로 구현하자
Markdown
복사
•
이제 우측 상단에 메뉴를 만들꺼야. 'about me', 약력, 프로젝트, 연락, 이렇게 4개로 만들고 font awesome을 이용해서 아이콘도 붙여줘
2-5.메뉴 네비게이션바의 기능 연결하기
•
만들어진 페이지에서 특정 영역을 클릭했을때, 특히 위 그림을 기준으로 ‘Navbar’의 4가지 메뉴를 클릭했을 때 반응이 없음
•
간단하게 아래페이지에서 넣고 싶은 UI를 선택하고, 프롬프트를 활용해 기능 연결하기네비게이션 메뉴에 UI를 추가하자.
1.about 클릭시 모달창: 컴퓨터교육과출신의 찐 AI 연구자
2.약력 클릭시 타임라인: 정보교육지원단- 정보교육유공교원-AIDEAP 마스터 교원 등
3.프로젝트 클릭시 모달창: 바이든vs날리면 외 다수
4. 연락 클릭시 Dialog (다이얼로그)창: 연락받고 싶은 이메일 또는 연락처를 적으세요
오류없이 추가해
Markdown
복사
•
결과는? 메일 보내기 버튼을 눌러도 실제로 작동하지 않음
메일 보내기 버튼을 눌러도 실제로 작동하지 않음
•
실제 작동을 위해서는 PHP로 코딩해서 메일전송만 처리하는 페이지를 별도로 만드는 것이 필요
•
3. 메일전송php 기능
•
메일이 정상적으로 오는지 확인하려면, 실제 이메일주소를 기재할 필요가 있음
사용자가 연락을 눌러서 실제 이름과 이메일주소를 누르고 전송하게 되면, 실제 메일이 도착할 수 있도록 작업할꺼야.
1. 별도의 메일 송신을 담당하는 php 파일을 만들어서 연결해줘. php 에서 mail함수를 사용해 사용자가 입력한 메일이 OOOO.com으로 전송되게 구현해봐
Markdown
복사
3-1. 전체 흐름
[연락하기(Contact) 모달에서 사용자 입력 → 이름, 이메일, 메시지]
↓
[JS fetch → POST 전송 → send_mail.php]
↓
[send_mail.php]
├── 1. 요청 방식 확인 (POST 아니면 차단)
├── 2. 입력 데이터 유효성 검사 (빈칸, 이메일 형식 확인)
├── 3. PHPMailer 로드 (Composer autoload 사용)
├── 4. SMTP 설정 (Gmail, SendGrid, Mailtrap 등)
├── 5. 메일 작성 (From, To, 제목, 본문)
├── 6. 메일 전송 시도 → `$mail->send()`
├── 7. 전송 결과에 따라 JSON 응답 (성공 / 실패)
↓
[브라우저]
└── 성공 시 → "전송 완료" 알림
실패 시 → "오류 발생" 알림 (에러 메시지 포함 가능)
Scss
복사
3-2.주의사항
1.
보안 강화:
•
실제 운영 환경에서는 CSRF 토큰, 스팸 방지를 위한 캡차 등의 추가 보안 기능을 구현하는 것이 좋음
•
커서나 코파일럿이 제공하는 코드는 기본적인 입력 검증(필수 필드, 유효한 이메일 형식)만 구현되어 있을 가능성이 높음
3-3.주의사항
•
현재는 send_mail.php 파일이 서버에 존재하지 않기에 메일 전송이 실제로 이루어질 수 없음
현재 상황
항목 | 상태 |
index.php | VS Code + PHP 내장서버 (php -S)로 실행 중 |
send_mail.php | c:\Users\user\Desktop\online_card\send_mail.php에 존재함 |
외부 SMTP 서버 설정 | 없음 (mail 서버 미설정) |
PHP 기본 mail() 함수 | Windows 환경에서는 동작 X (sendmail or SMTP 필요) |
3-4.Composer 설치하기
•
Composer란? PHP 프로젝트에 사용되거나 사용되어야 할 라이브러리들을 기록하고 설치할 수 있게 해주는 역할
•
PHP 버전에 따른 패키지 설치 버전을 자동으로 정리해 줌
•
실행환경: php 5.3.2+ 이상에서 동작
•
설치방법
◦
글로벌 설치와 로컬 설치가 있는데 귀찮으면 윈도우 인스톨러 다운로드
설치 시 주의:
◦
PHP 경로 설정 (예: C:\php\php.exe → PHP가 설치된 위치)
◦
"Add Composer to PATH" 옵션 체크 → 이것이 중요!
◦
중간에 프록시 설정화면에서는 체크해제
•
이후 설치가 완료됨을 확인하기 위해 bash창에 다음 명령어 입력해보기
composer -V
Scss
복사
3-5.Composer 설치후 PHPMailer 설치
composer require phpmailer/phpmailer
Scss
복사
•
해당 프로젝트가 진행중인 폴더경로에서 CMD실행 후 PHP 메일러 설치를 진행하면? vendor 폴더와 autoload.php가 생성됨.
vendor 폴더와 autoload.php가 생성됨.•
또 추가로 PHPMailer가 SMTP로 메일 전송할 때 TLS/SSL을 사용하기 때문에 반드시 OpenSSL 확장이 필요
3-6.Gmail 보안 설정
•
구글 계정설정으로가서 ‘보안’ → 2단계 인증 활성화 후→ 앱 비밀번호를 상단에서 검색해서 접근 —> 앱 비밀번호 설정
•
→ your_app_password 자리에 설정한 앱 비밀번호 입력
Gmail 일반 비밀번호 X 앱 비밀번호 O
3-7.메일 제목이 깨지는 등 인코딩 설정이 잘못된 경우
•
메일 헤더(Subject)가 UTF-8로 인코딩되지 않으면
•
영어만 있을 때는 괜찮지만, 한글, 일본어, 특수문자 → 깨짐 발생
•
PHPMailer에서는 별도로 CharSet과 Encoding 설정을 해줘야 함.
$mail->CharSet = 'UTF-8'; // ✅ 인코딩 설정 추가!
$mail->Encoding = 'base64'; // ✅ 인코딩 방식 설정!
PHP
복사
4. 깃허브 업로드 후 Render로 배포
왜 Render인가? Render와 Heroku를 많이 사용함, Heroku는 최근 무료 플랜을 종료해버림, 따라서 Render로 결정
Vercel은 서버리스 환경 기반이므로 처음부터 후보군에서 제외4-1. 깃허브 업로드전 readme.md & .gitignore파일 만들기
(참고)에이전트 모드일때 파일을 직접 생성해줌readme.md와 .gitignore파일 만들어줘
Sass
복사
•
저장소(Repository) 생성후 공개용으로 설정해서 업로드 되었는지 확인
•
GitHub Pages 설정: GitHub Pages는 PHP 실행을 지원하지 않음
GitHub Pages는 PHP 실행을 지원하지 않음 즉, 지금처럼index.php, send_mail.php 같은 PHP 파일이 포함된 경우: GitHub Pages로 배포해도 HTML, CSS만 보이고 PHP 기능 (예: 메일 전송, DB 연동 등)은 작동 안 됨•
따라서 GitHub Pages 설정은 무시하고 바로 Render로 배포 시작
GitHub Pages 설정은 무시하고 바로 Render로 배포 시작4-2. Render가입
•
https://render.com 접속, 가입시 구글계정이 아닌 깃허브계정 연동으로 가입하기
◦
클릭 한 번으로 깃허브 저장소가 자동 연결됨
•
깃허브 계정 연결
•
로그인 → New + → Web Service를 선택
리소스 타입 | 역할 요약 | 주로 사용하는 경우 |
Static Sites | HTML/CSS/JS 등 정적 파일만 CDN으로 배포 | 프론트엔드 웹사이트, 블로그, 포트폴리오 등 |
Web Services | PHP, Node.js, Python 등 동적 웹 애플리케이션 실행 | 백엔드 서버, PHP 웹사이트, API 서버 등 |
Private Services | Render 내부에서만 접근 가능한 비공개 서비스 | 인증, DB API 등 외부에 노출하지 않을 때 |
Background Workers | 백그라운드 작업, 큐 기반 비동기 처리 | 데이터 처리, 메시지 소비, 비동기 로직 등 |
Cron Jobs | 일정 시간마다 실행되는 짧은 작업 스케줄러 | 매일 백업, 자동 이메일 전송 등 |
Postgres | PostgreSQL 데이터베이스 생성 및 관리 | 데이터 저장소 필요 시 (RDBMS) |
Key Value | Redis 호환 캐시 또는 메시지 큐 | 로그인 세션, 실시간 상태 저장, 큐 처리 등 |
•
GitHub 리포지토리 연동(로그인된 GitHub 계정 연결 단계)
◦
중간 설정 과정에서 모든 저장소 선택
•
연결이 완료되면 다음그림처럼 소스코드가 나오게 됨
4-3. Render 활용배포
Dockerfile + .render.yaml 준비해서 배포하는 방식
배포하고자 하는 깃허브 저장소를 선택•
Environment: PHP
•
Root directory: /
•
Start command: (비워도 됨)
•
Deploy
주의점•
Render는 Node.js, Python, Ruby, Go, Rust, Elixir와 같은 언어를 네이티브로 지원하며, PHP를 직접 지원안함
•
사용하려면 Docker 이미지를 통해 환경을 설정해야 함
•
지역은 싱가포르 선택
•
Root Directory → 비워두기
비워두기index.php, send_mail.php, Dockerfile이 모두 리포지토리 최상단에 있는 경우
→ 아무것도 입력하지 않으면 기본 루트로 인식됨
•
Dockerfile Path → ./Dockerfile
또는 . 만 입력해도 자동 인식 (기본으로 . 이 셋팅되어 있음)
•
배포를 위해 깃허브 저장소에 배포설정 파일 추가하기(.render.yaml)
services:
- type: web
name: 프로젝트 명칭
env: docker
region: singapore
plan: free
branch: main
dockerfilePath: ./Dockerfile
autoDeploy: true
YAML
복사
.render.yaml 파일의 역할
주요 항목 설명
항목 | 설명 |
type: web | 웹 서비스 (HTML, PHP 등 포함) |
name | Render 서비스 이름 |
env: docker | Docker 환경으로 배포 |
region: singapore | 한국에서 가장 가까운 지역 선택하기 |
plan: free | 무료 플랜 (Render 기본값) |
branch: main | GitHub 리포지토리의 메인 브랜치 기준 |
dockerfilePath | Dockerfile이 루트에 있으므로 ./Dockerfile |
autoDeploy: true | GitHub push 시 자동 재배포 |
•
또한 프로젝트 루트에 깃허브 프로젝트 루트에 Dockerfile도 함께 만들어야 함
•
Dockerfile: PHP 실행 환경 (Apache 포함) 설정 파일
# 1. PHP + Apache 기반 이미지
FROM php:8.1-apache
# 2. 필요한 PHP 확장 설치 (openssl 제외)
RUN docker-php-ext-install mysqli pdo pdo_mysql mbstring
# 3. Composer 설치 (선택적)
COPY /usr/bin/composer /usr/bin/composer
# 4. index.php 우선 적용
RUN echo "DirectoryIndex index.php index.html" > /etc/apache2/mods-enabled/dir.conf
# 5. 코드 복사
COPY . /var/www/html/
# 6. 권한 설정
RUN chown -R www-data:www-data /var/www/html
# 7. 포트 오픈
EXPOSE 80
Docker
복사
Apache 란?항목 | 설명 |
정식 명칭 | Apache HTTP Server (아파치 HTTP 서버) |
역할 | 웹사이트를 인터넷에 공개하고 제공하는 프로그램 |
개발 | Apache Software Foundation (ASF) |
특징 | 오픈소스, 무료, 전 세계 웹서버 점유율 1~2위 (Nginx와 경쟁) |
•
깃허브 저장소에 올라간 최종 파일들 참고
•
Render설정화면에서 Free 선택
•
마지막으로 환경 변수(Environment Variables) 설정하기
◦
현재 프로젝트에서 send_mail.php에서 SMTP 인증 정보를 안전하게 관리하기 위해 꼭 필요한 부분
◦
SMTP 관련 정보를 변수로 넣는 단계라고 생각
•
send_mail.php에서 환경 변수 사용하도록 수정
[변환 전]
// SMTP 설정
$mail->isSMTP();
$mail->Host = 'smtp.gmail.com'; // Gmail SMTP 서버
$mail->SMTPAuth = true;
$mail->Username = '???'; // 🔴 본인 Gmail 주소
$mail->Password = '???'; // 🔴 Gmail 앱 비밀번호 (2차 인증 시 필수)
$mail->SMTPSecure = 'tls'; // 보안 방식
$mail->Port = 587;
PHP
복사
[변환 후]
$mail->isSMTP();
$mail->Host = getenv('SMTP_HOST');
$mail->Port = getenv('SMTP_PORT');
$mail->SMTPAuth = true;
$mail->Username = getenv('SMTP_USER');
$mail->Password = getenv('SMTP_PASS');
$mail->setFrom(getenv('SMTP_FROM_EMAIL'), getenv('SMTP_FROM_NAME'));
PHP
복사
•
모든 준비가 끝났다면 [Deploy Web Service] 버튼 클릭하기
•
배포 준비가 끝나면 아래와 같이 배포페이지가 나옴
•
해당페이지로 들어가서 배포가 제대로 되고 있는지 확인
◦
도커를 이용한 방식이라 배포 초기 단계에서 상당한 시간 소요
[결과물]
5. (번외) 도커로 빌드하는 이유
왜 도커(Docker)로 빌드할까?
Docker는 "내 컴퓨터에서 만든 프로그램을 서버에서도 똑같이 잘 돌아가게 해주는 마법 상자" 1. 어디서나 똑같이 작동
•
개발자 컴퓨터에서 잘 되는데, 서버에서는 에러?
→ Docker는 모든 실행 환경을 통째로 감싸서 어디서 실행해도 동일하게 작동함!
“내 컴에선 되는데요…”는 이제 그만!
2. 실행 환경 자동 구성
•
PHP, Apache, 확장 기능 설치까지 → Dockerfile 하나로 서버 세팅 자동화 가능!
매번 수동 설치 안 해도 돼서 편하고 빠름
3. 배포가 쉬워짐
•
Render, AWS, GitHub Actions 등에서→ Docker 이미지로 바로 실행 가능!
배포 환경에서도 개발 그대로 실행
4. 깨끗한 환경 유지
•
실수로 시스템 파일 꼬일 걱정 없음→ Docker는 고립된 공간에서 작동
실험하다 망가져도, 컨테이너만 지우면 끝!