🏠 오늘도스냅 홈페이지 설치 가이드
Synology NAS에 홈페이지를 올리는 방법을 단계별로 안내합니다. 처음이어도 괜찮아요!
📁 파일 구조 이해하기
다운로드한 폴더 안에 이런 파일들이 있어요. 각각의 역할을 알아두세요.
oneuldosnap-website/
├── index.html
├── api/
│ ├── gallery.php
│ └── booking.php
├── images/
│ ├── hero/
│ ├── portfolio/
│ └── about.jpg
├── data/
└── setup-guide.html
① Synology Web Station 설치 및 설정
1
Web Station 설치
Synology NAS 관리자 화면(DSM)에 로그인 후:
- 패키지 센터 열기
- Web Station 검색 → 설치
- 함께 PHP 8.1 (또는 최신 버전)도 설치
- Apache HTTP Server 2.4 또는 Nginx도 설치
Web Station이 이미 설치되어 있다면 이 단계는 건너뛰세요.
2
가상 호스트 생성
Web Station 실행 → 가상 호스트 탭 → 생성 클릭
| 항목 | 입력값 |
|---|
| 이름 | oneuldosnap |
| 문서 루트 | /volume1/web/oneuldosnap |
| 포트 | 80 (HTTP) 또는 443 (HTTPS) |
| PHP 버전 | PHP 8.1 (설치한 버전) |
| 백엔드 서버 | Apache 또는 Nginx |
도메인을 연결하면 이름에 oneuldosnap.com 처럼 도메인을 입력하세요.
② 파일 업로드
3
파일 업로드 방법 (두 가지 중 선택)
방법 A — File Station 사용 (쉬움)
- DSM에서 File Station 열기
web 폴더 → oneuldosnap 폴더 생성- 다운로드한
oneuldosnap-website 폴더 안의 모든 파일을 /volume1/web/oneuldosnap/에 업로드
방법 B — 파일 탐색기에서 직접 접근 (편함)
Windows 탐색기 주소창에 입력:
\\NAS_IP_주소\web\oneuldosnap
예: \\192.168.1.100\web\oneuldosnap
NAS IP 주소는 DSM 우측 상단에서 확인할 수 있어요.
③ 사진 넣기
4
메인 슬라이더 사진 (필수)
멋진 결혼식 사진 5장을 아래 이름으로 저장해서 images/hero/ 폴더에 넣으세요.
| 파일명 | 권장 크기 | 용도 |
|---|
| slide1.jpg | 1920×1280px | 첫 번째 슬라이드 |
| slide2.jpg | 1920×1280px | 두 번째 슬라이드 |
| slide3.jpg | 1920×1280px | 세 번째 슬라이드 |
| slide4.jpg | 1920×1280px | 네 번째 슬라이드 |
| slide5.jpg | 1920×1280px | 다섯 번째 슬라이드 |
포트폴리오 갤러리 사진
images/portfolio/ 폴더에 사진을 넣기만 하면 자동으로 갤러리에 표시됩니다! 파일명은 아무렇게나 해도 돼요.
1.jpg, 2.jpg, wedding_김신랑.jpg 등 어떤 이름이든 OK!
사진을 추가/삭제하면 홈페이지 갤러리가 자동으로 바뀝니다. 새로고침하면 바로 반영돼요.
소개 사진
images/about.jpg 파일을 원하는 사진으로 교체하세요.
④ CRM 연동 설정 (예약 자동 전송)
5
booking.php 설정
예약 폼 데이터를 CRM으로 보내려면 api/booking.php 파일을 메모장으로 열고, 아래 부분을 수정하세요.
// ★★★ CONFIG — 여기만 수정하세요 ★★★
$CRM_API_URL = 'http://YOUR_NAS_IP:YOUR_PORT/api/bookings';
// ↑ 여기를 내 CRM 주소로 변경!
예를 들어 CRM이 NAS의 8080 포트에서 실행 중이라면:
$CRM_API_URL = 'http://192.168.1.100:8080/api/bookings';
CRM URL을 모른다면 일단 비워둬도 됩니다. 예약 내용은 data/bookings.json 파일에 자동으로 저장되니까요.
CRM이 다른 포트나 경로를 사용한다면 맞게 수정하세요. CRM 개발자에게 API 엔드포인트를 확인해보세요.
⑤ 도메인 연결 (oneuldosnap.com 연결)
6
도메인 DNS 설정
도메인 등록 사이트(가비아, 후이즈 등)에서 DNS A 레코드를 수정하세요.
| 레코드 타입 | 호스트 | 값 |
|---|
| A | @ | NAS 공인 IP 주소 |
| A | www | NAS 공인 IP 주소 |
NAS 공인 IP는 공유기 설정 또는 whatismyip.com에서 확인하세요.
IP 주소가 자주 바뀐다면 DDNS 서비스를 사용하세요. Synology DSM의 외부 액세스 → DDNS에서 설정할 수 있어요.
7
공유기 포트 포워딩
공유기 관리 화면에서 포트 포워딩을 설정해야 외부에서 접속할 수 있어요.
| 외부 포트 | 내부 IP | 내부 포트 | 프로토콜 |
|---|
| 80 | NAS IP (예: 192.168.1.100) | 80 | TCP |
| 443 | NAS IP | 443 | TCP |
공유기 브랜드마다 설정 방법이 다릅니다. 브랜드명 + "포트 포워딩"으로 검색하면 안내가 나와요.
⑥ Cowork로 사진 자동 업로드 설정
8
Cowork 자동화 설정
촬영 후 사진을 NAS에 넣으면 자동으로 갤러리에 올라가도록 설정할 수 있어요.
- Cowork 앱에서 자동화(스케줄) 탭 열기
- 새 자동화 만들기 선택
- 트리거: 특정 폴더에 파일 추가될 때
- 원본 폴더: 촬영 사진이 들어오는 폴더 (예:
NAS/사진/촬영완료)
- 작업: 파일 복사
- 대상 폴더:
/volume1/web/oneuldosnap/images/portfolio/
이제 원본 폴더에 사진을 넣으면 자동으로 홈페이지 갤러리에 추가됩니다!
갤러리는 최신 사진이 위에 오도록 자동 정렬됩니다.
⑦ 홈페이지 내용 수정하기
9
텍스트/가격 수정
index.html 파일을 메모장(또는 VS Code)으로 열고 아래 부분을 찾아 수정하세요.
패키지 가격 수정
<div class="p-price">가격문의</div>
↓ 이렇게 바꾸세요:
<div class="p-price">350,000원</div>
소개 텍스트 수정
"오늘도스냅은 여러분의 가장 특별한..." 부분을 찾아서 원하는 내용으로 바꾸세요.
패키지 포함 항목 수정
<li>촬영 시간: 2~3시간</li> ← 이 부분들을 수정
Ctrl+F 로 찾기를 사용하면 빠르게 원하는 부분을 찾을 수 있어요.
🎉 설치 완료!
모든 설정이 끝났다면 브라우저에서 http://NAS_IP주소 또는 https://oneuldosnap.com으로 접속해보세요.
문제가 생겼을 때 확인할 것들:
- Web Station이 실행 중인지 확인
- PHP가 설치 및 활성화되어 있는지 확인
- 파일이 올바른 폴더에 업로드되었는지 확인
- 포트 포워딩 설정이 올바른지 확인
- data/ 폴더 쓰기 권한 확인 (예약 저장 안 될 때)